Palettable Palettes
===================

Curated color palettes from Palettable, including ColorBrewer and other professional color schemes.


Diverging
---------

.. raw:: html


   <div id="_5fc44e1dc90648b5be80d3494a427ec8" class="color-swatch">
       <style>
           #_5fc44e1dc90648b5be80d3494a427ec8 {
               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%);
           }
           #_5fc44e1dc90648b5be80d3494a427ec8 div {
               width: 100%;
           }
           #_5fc44e1dc90648b5be80d3494a427ec8 > div.gradient {
               width: 100%;
               height: min(4rem, 100%);
               display: grid;
               gap: 0.2rem;
               grid-template-rows: 1rem auto;
           }
           #_5fc44e1dc90648b5be80d3494a427ec8 .color {
               height: minmax(1.5rem, 100%);
           }
           #_5fc44e1dc90648b5be80d3494a427ec8 > div.gradient > strong {
               margin: 0;
               padding: 0;
           }
           #_5fc44e1dc90648b5be80d3494a427ec8 img {height: 100%;}
       </style>
       
           <div class="gradient">
       <style>
           #_ebf23ecd9d2e41d299ee710524dbc4ab {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ebf23ecd9d2e41d299ee710524dbc4ab div { flex: 1 1 0; }
           #_ebf23ecd9d2e41d299ee710524dbc4ab div.color { width: 100%; height: 100%; }
           #_ebf23ecd9d2e41d299ee710524dbc4ab div.cmap { width: 100%; height: auto; }
           #_ebf23ecd9d2e41d299ee710524dbc4ab div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>balance</strong>
       
       <div id="_ebf23ecd9d2e41d299ee710524dbc4ab" class="color-map">
           
                           <div>
                   <style>
       #_e066e86ea6644a6bacbd742938594367 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(24, 28, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e066e86ea6644a6bacbd742938594367::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e066e86ea6644a6bacbd742938594367:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e066e86ea6644a6bacbd742938594367" class="color" data-tooltip="RGBA: 24, 28, 67, 1.0
   HEXA: #181c43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_581fee9c1cee4b6c9c6f8ce41dfd8a5b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 46, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_581fee9c1cee4b6c9c6f8ce41dfd8a5b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_581fee9c1cee4b6c9c6f8ce41dfd8a5b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_581fee9c1cee4b6c9c6f8ce41dfd8a5b" class="color" data-tooltip="RGBA: 36, 46, 108, 1.0
   HEXA: #242e6cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b70045a8cb144a269d94720bcf66c4f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 64, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b70045a8cb144a269d94720bcf66c4f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b70045a8cb144a269d94720bcf66c4f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b70045a8cb144a269d94720bcf66c4f6" class="color" data-tooltip="RGBA: 41, 64, 158, 1.0
   HEXA: #29409eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_821f72bb127342e8a38b08b1d70b93ae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 89, 190, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_821f72bb127342e8a38b08b1d70b93ae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_821f72bb127342e8a38b08b1d70b93ae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_821f72bb127342e8a38b08b1d70b93ae" class="color" data-tooltip="RGBA: 16, 89, 190, 1.0
   HEXA: #1059beff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50e7972062f248adb15d10484a58e020 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(30, 118, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50e7972062f248adb15d10484a58e020::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50e7972062f248adb15d10484a58e020:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50e7972062f248adb15d10484a58e020" class="color" data-tooltip="RGBA: 30, 118, 187, 1.0
   HEXA: #1e76bbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_623477223acd4fc1a048ea0f675a62a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 141, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_623477223acd4fc1a048ea0f675a62a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_623477223acd4fc1a048ea0f675a62a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_623477223acd4fc1a048ea0f675a62a4" class="color" data-tooltip="RGBA: 64, 141, 186, 1.0
   HEXA: #408dbaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a6c2473dead04b7697bf614bdefed091 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 164, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6c2473dead04b7697bf614bdefed091::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6c2473dead04b7697bf614bdefed091:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6c2473dead04b7697bf614bdefed091" class="color" data-tooltip="RGBA: 104, 164, 188, 1.0
   HEXA: #68a4bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf4e66d7b5804faf8402c45ed582b3f7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(145, 183, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf4e66d7b5804faf8402c45ed582b3f7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf4e66d7b5804faf8402c45ed582b3f7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf4e66d7b5804faf8402c45ed582b3f7" class="color" data-tooltip="RGBA: 145, 183, 195, 1.0
   HEXA: #91b7c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e34e84e4ae7e4729b47ab3fb3bcf2905 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 202, 208, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e34e84e4ae7e4729b47ab3fb3bcf2905::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e34e84e4ae7e4729b47ab3fb3bcf2905:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e34e84e4ae7e4729b47ab3fb3bcf2905" class="color" data-tooltip="RGBA: 185, 202, 208, 1.0
   HEXA: #b9cad0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86a591dcf3ac432bb609959b082863c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 225, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86a591dcf3ac432bb609959b082863c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86a591dcf3ac432bb609959b082863c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86a591dcf3ac432bb609959b082863c1" class="color" data-tooltip="RGBA: 225, 225, 227, 1.0
   HEXA: #e1e1e3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_634ef7aaf4e74fbaa33e17ef9988824b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 222, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_634ef7aaf4e74fbaa33e17ef9988824b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_634ef7aaf4e74fbaa33e17ef9988824b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_634ef7aaf4e74fbaa33e17ef9988824b" class="color" data-tooltip="RGBA: 235, 222, 219, 1.0
   HEXA: #ebdedbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f6b9b3b431ad4f8ca1c7135dd127dfa4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 189, 178, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f6b9b3b431ad4f8ca1c7135dd127dfa4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f6b9b3b431ad4f8ca1c7135dd127dfa4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f6b9b3b431ad4f8ca1c7135dd127dfa4" class="color" data-tooltip="RGBA: 223, 189, 178, 1.0
   HEXA: #dfbdb2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea331a7368604910bc95a5cf7696e595 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 159, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea331a7368604910bc95a5cf7696e595::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea331a7368604910bc95a5cf7696e595:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea331a7368604910bc95a5cf7696e595" class="color" data-tooltip="RGBA: 214, 159, 141, 1.0
   HEXA: #d69f8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8dac8e0b11714e9bb420f5ab0fc77f57 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(205, 130, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8dac8e0b11714e9bb420f5ab0fc77f57::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8dac8e0b11714e9bb420f5ab0fc77f57:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8dac8e0b11714e9bb420f5ab0fc77f57" class="color" data-tooltip="RGBA: 205, 130, 104, 1.0
   HEXA: #cd8268ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1a409d6d26ff419d8634ee1256e32d6b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 97, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1a409d6d26ff419d8634ee1256e32d6b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1a409d6d26ff419d8634ee1256e32d6b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1a409d6d26ff419d8634ee1256e32d6b" class="color" data-tooltip="RGBA: 195, 97, 67, 1.0
   HEXA: #c36143ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ec3892fb59994fe8b314197d8502d99f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(183, 64, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ec3892fb59994fe8b314197d8502d99f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ec3892fb59994fe8b314197d8502d99f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ec3892fb59994fe8b314197d8502d99f" class="color" data-tooltip="RGBA: 183, 64, 41, 1.0
   HEXA: #b74029ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_97d280ed50d841b5917e05fa8edf5f77 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 29, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_97d280ed50d841b5917e05fa8edf5f77::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_97d280ed50d841b5917e05fa8edf5f77:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_97d280ed50d841b5917e05fa8edf5f77" class="color" data-tooltip="RGBA: 161, 29, 37, 1.0
   HEXA: #a11d25ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7dfade9c4438484d8d50cef4296724d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 14, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7dfade9c4438484d8d50cef4296724d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7dfade9c4438484d8d50cef4296724d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7dfade9c4438484d8d50cef4296724d1" class="color" data-tooltip="RGBA: 131, 14, 41, 1.0
   HEXA: #830e29ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7586452a0e7e4511b9af94bfb76f34ec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 14, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7586452a0e7e4511b9af94bfb76f34ec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7586452a0e7e4511b9af94bfb76f34ec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7586452a0e7e4511b9af94bfb76f34ec" class="color" data-tooltip="RGBA: 94, 14, 33, 1.0
   HEXA: #5e0e21ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9fff7fe5d13745cb9e42081382703714 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 9, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9fff7fe5d13745cb9e42081382703714::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9fff7fe5d13745cb9e42081382703714:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9fff7fe5d13745cb9e42081382703714" class="color" data-tooltip="RGBA: 60, 9, 18, 1.0
   HEXA: #3c0912ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_bb836829e92e4c36872b235f31c2bd43 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_bb836829e92e4c36872b235f31c2bd43 div { flex: 1 1 0; }
           #_bb836829e92e4c36872b235f31c2bd43 div.color { width: 100%; height: 100%; }
           #_bb836829e92e4c36872b235f31c2bd43 div.cmap { width: 100%; height: auto; }
           #_bb836829e92e4c36872b235f31c2bd43 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>curl</strong>
       
       <div id="_bb836829e92e4c36872b235f31c2bd43" class="color-map">
           
                           <div>
                   <style>
       #_6ad5bcdba7bd41e69da58dab6780d040 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(21, 29, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ad5bcdba7bd41e69da58dab6780d040::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ad5bcdba7bd41e69da58dab6780d040:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ad5bcdba7bd41e69da58dab6780d040" class="color" data-tooltip="RGBA: 21, 29, 68, 1.0
   HEXA: #151d44ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2e61d3e0b88f42ecac5b33b189ae4581 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 55, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2e61d3e0b88f42ecac5b33b189ae4581::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2e61d3e0b88f42ecac5b33b189ae4581:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2e61d3e0b88f42ecac5b33b189ae4581" class="color" data-tooltip="RGBA: 26, 55, 83, 1.0
   HEXA: #1a3753ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a724230a07b4130b4475d5af936741f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 80, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a724230a07b4130b4475d5af936741f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a724230a07b4130b4475d5af936741f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a724230a07b4130b4475d5af936741f" class="color" data-tooltip="RGBA: 28, 80, 98, 1.0
   HEXA: #1c5062ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9f0e82ee466241abbb9618b38536ca6a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(22, 105, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9f0e82ee466241abbb9618b38536ca6a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9f0e82ee466241abbb9618b38536ca6a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9f0e82ee466241abbb9618b38536ca6a" class="color" data-tooltip="RGBA: 22, 105, 113, 1.0
   HEXA: #166971ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5532d2f5912942b28f9591bbe6ca761c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(19, 131, 123, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5532d2f5912942b28f9591bbe6ca761c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5532d2f5912942b28f9591bbe6ca761c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5532d2f5912942b28f9591bbe6ca761c" class="color" data-tooltip="RGBA: 19, 131, 123, 1.0
   HEXA: #13837bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0603ba5369174f2faddf03df65c2a5c7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 153, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0603ba5369174f2faddf03df65c2a5c7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0603ba5369174f2faddf03df65c2a5c7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0603ba5369174f2faddf03df65c2a5c7" class="color" data-tooltip="RGBA: 56, 153, 129, 1.0
   HEXA: #389981ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8294dff0013e40cfbc2268e404f378ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 173, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8294dff0013e40cfbc2268e404f378ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8294dff0013e40cfbc2268e404f378ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8294dff0013e40cfbc2268e404f378ee" class="color" data-tooltip="RGBA: 109, 173, 138, 1.0
   HEXA: #6dad8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3692875355f04670ac60142c67356428 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 191, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3692875355f04670ac60142c67356428::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3692875355f04670ac60142c67356428:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3692875355f04670ac60142c67356428" class="color" data-tooltip="RGBA: 156, 191, 159, 1.0
   HEXA: #9cbf9fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b27835966154473e834749193e3a374d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 211, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b27835966154473e834749193e3a374d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b27835966154473e834749193e3a374d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b27835966154473e834749193e3a374d" class="color" data-tooltip="RGBA: 198, 211, 188, 1.0
   HEXA: #c6d3bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_97a111bd56c24c348264b598558fa8ce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 234, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_97a111bd56c24c348264b598558fa8ce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_97a111bd56c24c348264b598558fa8ce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_97a111bd56c24c348264b598558fa8ce" class="color" data-tooltip="RGBA: 237, 234, 225, 1.0
   HEXA: #edeae1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f45d432404af4e7a8002280dde389f2c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 230, 223, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f45d432404af4e7a8002280dde389f2c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f45d432404af4e7a8002280dde389f2c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f45d432404af4e7a8002280dde389f2c" class="color" data-tooltip="RGBA: 246, 230, 223, 1.0
   HEXA: #f6e6dfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef15c8db373b4e7ea7ee04fea77e3cfd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 197, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef15c8db373b4e7ea7ee04fea77e3cfd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef15c8db373b4e7ea7ee04fea77e3cfd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef15c8db373b4e7ea7ee04fea77e3cfd" class="color" data-tooltip="RGBA: 234, 197, 179, 1.0
   HEXA: #eac5b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1a1293481cd0442a98686a7baf23274a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 163, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1a1293481cd0442a98686a7baf23274a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1a1293481cd0442a98686a7baf23274a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1a1293481cd0442a98686a7baf23274a" class="color" data-tooltip="RGBA: 225, 163, 139, 1.0
   HEXA: #e1a38bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_41ae86abe7ab46ef9246d135713a6bdc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 129, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_41ae86abe7ab46ef9246d135713a6bdc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_41ae86abe7ab46ef9246d135713a6bdc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_41ae86abe7ab46ef9246d135713a6bdc" class="color" data-tooltip="RGBA: 215, 129, 111, 1.0
   HEXA: #d7816fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d95c90a411d140218c2b74ae0c56b5b5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 97, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d95c90a411d140218c2b74ae0c56b5b5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d95c90a411d140218c2b74ae0c56b5b5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d95c90a411d140218c2b74ae0c56b5b5" class="color" data-tooltip="RGBA: 200, 97, 98, 1.0
   HEXA: #c86162ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6cc52ce5e7514a9db568297fc3eb1225 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 69, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6cc52ce5e7514a9db568297fc3eb1225::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6cc52ce5e7514a9db568297fc3eb1225:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6cc52ce5e7514a9db568297fc3eb1225" class="color" data-tooltip="RGBA: 180, 69, 96, 1.0
   HEXA: #b44560ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc2c5c2c7b0040d380af2c6e6bb65147 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 45, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc2c5c2c7b0040d380af2c6e6bb65147::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc2c5c2c7b0040d380af2c6e6bb65147:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc2c5c2c7b0040d380af2c6e6bb65147" class="color" data-tooltip="RGBA: 153, 45, 97, 1.0
   HEXA: #992d61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b36a08e840ad454dbffaa18e2747fd84 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(122, 27, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b36a08e840ad454dbffaa18e2747fd84::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b36a08e840ad454dbffaa18e2747fd84:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b36a08e840ad454dbffaa18e2747fd84" class="color" data-tooltip="RGBA: 122, 27, 94, 1.0
   HEXA: #7a1b5eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_66712d8f6ede4426a2f2e531bd1fa7a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 19, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66712d8f6ede4426a2f2e531bd1fa7a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66712d8f6ede4426a2f2e531bd1fa7a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66712d8f6ede4426a2f2e531bd1fa7a4" class="color" data-tooltip="RGBA: 87, 19, 80, 1.0
   HEXA: #571350ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ed170960775d49a7a793c7487d732bbe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(52, 13, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ed170960775d49a7a793c7487d732bbe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ed170960775d49a7a793c7487d732bbe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ed170960775d49a7a793c7487d732bbe" class="color" data-tooltip="RGBA: 52, 13, 53, 1.0
   HEXA: #340d35ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b8e12daa2df647f5a525a2d0320486e4 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b8e12daa2df647f5a525a2d0320486e4 div { flex: 1 1 0; }
           #_b8e12daa2df647f5a525a2d0320486e4 div.color { width: 100%; height: 100%; }
           #_b8e12daa2df647f5a525a2d0320486e4 div.cmap { width: 100%; height: auto; }
           #_b8e12daa2df647f5a525a2d0320486e4 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>delta</strong>
       
       <div id="_b8e12daa2df647f5a525a2d0320486e4" class="color-map">
           
                           <div>
                   <style>
       #_1faa9684947245f4908577c7fd28d651 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 32, 64, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1faa9684947245f4908577c7fd28d651::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1faa9684947245f4908577c7fd28d651:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1faa9684947245f4908577c7fd28d651" class="color" data-tooltip="RGBA: 17, 32, 64, 1.0
   HEXA: #112040ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1cc9bc17cdb4675b1dc285b05bb6b05 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 49, 109, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1cc9bc17cdb4675b1dc285b05bb6b05::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1cc9bc17cdb4675b1dc285b05bb6b05:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1cc9bc17cdb4675b1dc285b05bb6b05" class="color" data-tooltip="RGBA: 33, 49, 109, 1.0
   HEXA: #21316dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7d0145337a5941e7862d7560424ca9a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 70, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d0145337a5941e7862d7560424ca9a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d0145337a5941e7862d7560424ca9a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d0145337a5941e7862d7560424ca9a5" class="color" data-tooltip="RGBA: 33, 70, 154, 1.0
   HEXA: #21469aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5ea66fec2d0f4f4a9ffa830e5d4b3ba3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 99, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5ea66fec2d0f4f4a9ffa830e5d4b3ba3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5ea66fec2d0f4f4a9ffa830e5d4b3ba3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5ea66fec2d0f4f4a9ffa830e5d4b3ba3" class="color" data-tooltip="RGBA: 27, 99, 159, 1.0
   HEXA: #1b639fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c1f78ed528c4123a8cdd79b38889ed8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 126, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c1f78ed528c4123a8cdd79b38889ed8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c1f78ed528c4123a8cdd79b38889ed8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c1f78ed528c4123a8cdd79b38889ed8" class="color" data-tooltip="RGBA: 38, 126, 165, 1.0
   HEXA: #267ea5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3bc3c15254b745ad996eff703ec6a97d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 150, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3bc3c15254b745ad996eff703ec6a97d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3bc3c15254b745ad996eff703ec6a97d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3bc3c15254b745ad996eff703ec6a97d" class="color" data-tooltip="RGBA: 56, 150, 171, 1.0
   HEXA: #3896abff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c737b03fff974fc78c796862d07aa6ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(91, 174, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c737b03fff974fc78c796862d07aa6ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c737b03fff974fc78c796862d07aa6ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c737b03fff974fc78c796862d07aa6ba" class="color" data-tooltip="RGBA: 91, 174, 177, 1.0
   HEXA: #5baeb1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8f1471f3a39a474aa27575fdd15e9278 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(143, 194, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8f1471f3a39a474aa27575fdd15e9278::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8f1471f3a39a474aa27575fdd15e9278:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8f1471f3a39a474aa27575fdd15e9278" class="color" data-tooltip="RGBA: 143, 194, 187, 1.0
   HEXA: #8fc2bbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_51c68d5dc8c84b81b393807f6cb5f922 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(190, 215, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_51c68d5dc8c84b81b393807f6cb5f922::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_51c68d5dc8c84b81b393807f6cb5f922:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_51c68d5dc8c84b81b393807f6cb5f922" class="color" data-tooltip="RGBA: 190, 215, 205, 1.0
   HEXA: #bed7cdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_96f72e4fa0d846e0ab1ff17d1af11c0e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(233, 238, 224, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_96f72e4fa0d846e0ab1ff17d1af11c0e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_96f72e4fa0d846e0ab1ff17d1af11c0e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_96f72e4fa0d846e0ab1ff17d1af11c0e" class="color" data-tooltip="RGBA: 233, 238, 224, 1.0
   HEXA: #e9eee0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7d56759e759e42f1ae885c8e18a598be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 237, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d56759e759e42f1ae885c8e18a598be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d56759e759e42f1ae885c8e18a598be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d56759e759e42f1ae885c8e18a598be" class="color" data-tooltip="RGBA: 246, 237, 177, 1.0
   HEXA: #f6edb1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_676775a5f9e14bf294f74379bf5e72b4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 207, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_676775a5f9e14bf294f74379bf5e72b4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_676775a5f9e14bf294f74379bf5e72b4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_676775a5f9e14bf294f74379bf5e72b4" class="color" data-tooltip="RGBA: 227, 207, 119, 1.0
   HEXA: #e3cf77ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bda6b9ca1bbc46f69aa24910ef73870f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 184, 63, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bda6b9ca1bbc46f69aa24910ef73870f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bda6b9ca1bbc46f69aa24910ef73870f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bda6b9ca1bbc46f69aa24910ef73870f" class="color" data-tooltip="RGBA: 197, 184, 63, 1.0
   HEXA: #c5b83fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea9d9fb73536477785b29bb0e5171dcb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(155, 166, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea9d9fb73536477785b29bb0e5171dcb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea9d9fb73536477785b29bb0e5171dcb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea9d9fb73536477785b29bb0e5171dcb" class="color" data-tooltip="RGBA: 155, 166, 20, 1.0
   HEXA: #9ba614ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bfb4179ad04a440db82844a8bfefb0fd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 150, 7, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bfb4179ad04a440db82844a8bfefb0fd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bfb4179ad04a440db82844a8bfefb0fd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bfb4179ad04a440db82844a8bfefb0fd" class="color" data-tooltip="RGBA: 108, 150, 7, 1.0
   HEXA: #6c9607ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_87ae7af4520345538acb447ed822d302 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(61, 133, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_87ae7af4520345538acb447ed822d302::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_87ae7af4520345538acb447ed822d302:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_87ae7af4520345538acb447ed822d302" class="color" data-tooltip="RGBA: 61, 133, 27, 1.0
   HEXA: #3d851bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_48abb4eeec524dbfa6ed039beabe3800 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(19, 111, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_48abb4eeec524dbfa6ed039beabe3800::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_48abb4eeec524dbfa6ed039beabe3800:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_48abb4eeec524dbfa6ed039beabe3800" class="color" data-tooltip="RGBA: 19, 111, 41, 1.0
   HEXA: #136f29ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd0d02675b6f420199266832b74df6ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 86, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd0d02675b6f420199266832b74df6ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd0d02675b6f420199266832b74df6ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd0d02675b6f420199266832b74df6ca" class="color" data-tooltip="RGBA: 15, 86, 44, 1.0
   HEXA: #0f562cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac0ff451d082448188dd0d5a4f2fefeb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 61, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac0ff451d082448188dd0d5a4f2fefeb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac0ff451d082448188dd0d5a4f2fefeb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac0ff451d082448188dd0d5a4f2fefeb" class="color" data-tooltip="RGBA: 25, 61, 36, 1.0
   HEXA: #193d24ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f67c4961fed74e489b664fbbbc8df507 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 35, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f67c4961fed74e489b664fbbbc8df507::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f67c4961fed74e489b664fbbbc8df507:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f67c4961fed74e489b664fbbbc8df507" class="color" data-tooltip="RGBA: 23, 35, 19, 1.0
   HEXA: #172313ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ff6c627f2a8f4d6c92ac882a7a674312 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ff6c627f2a8f4d6c92ac882a7a674312 div { flex: 1 1 0; }
           #_ff6c627f2a8f4d6c92ac882a7a674312 div.color { width: 100%; height: 100%; }
           #_ff6c627f2a8f4d6c92ac882a7a674312 div.cmap { width: 100%; height: auto; }
           #_ff6c627f2a8f4d6c92ac882a7a674312 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>armyrose</strong>
       
       <div id="_ff6c627f2a8f4d6c92ac882a7a674312" class="color-map">
           
                           <div>
                   <style>
       #_7f85d0aedc3c41478493540901fdfb50 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 130, 52, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7f85d0aedc3c41478493540901fdfb50::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7f85d0aedc3c41478493540901fdfb50:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7f85d0aedc3c41478493540901fdfb50" class="color" data-tooltip="RGBA: 121, 130, 52, 1.0
   HEXA: #798234ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46b41b33354b4910b1de8ac8dd198a1c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(163, 173, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46b41b33354b4910b1de8ac8dd198a1c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46b41b33354b4910b1de8ac8dd198a1c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46b41b33354b4910b1de8ac8dd198a1c" class="color" data-tooltip="RGBA: 163, 173, 98, 1.0
   HEXA: #a3ad62ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_94715f5a1257489bb3954276eac632de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 211, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_94715f5a1257489bb3954276eac632de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_94715f5a1257489bb3954276eac632de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_94715f5a1257489bb3954276eac632de" class="color" data-tooltip="RGBA: 208, 211, 162, 1.0
   HEXA: #d0d3a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_02358b765a194ff4b373ff889fb57493 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 251, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_02358b765a194ff4b373ff889fb57493::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_02358b765a194ff4b373ff889fb57493:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_02358b765a194ff4b373ff889fb57493" class="color" data-tooltip="RGBA: 253, 251, 228, 1.0
   HEXA: #fdfbe4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8ae8851ddd0d4e44ac60de20c0fc2e48 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 198, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8ae8851ddd0d4e44ac60de20c0fc2e48::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8ae8851ddd0d4e44ac60de20c0fc2e48:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8ae8851ddd0d4e44ac60de20c0fc2e48" class="color" data-tooltip="RGBA: 240, 198, 195, 1.0
   HEXA: #f0c6c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a515ffe8284146b0878ab5edabffdc18 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 145, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a515ffe8284146b0878ab5edabffdc18::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a515ffe8284146b0878ab5edabffdc18:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a515ffe8284146b0878ab5edabffdc18" class="color" data-tooltip="RGBA: 223, 145, 163, 1.0
   HEXA: #df91a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_37c9f186f96a496eb1fe8d18bcebb141 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 103, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_37c9f186f96a496eb1fe8d18bcebb141::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_37c9f186f96a496eb1fe8d18bcebb141:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_37c9f186f96a496eb1fe8d18bcebb141" class="color" data-tooltip="RGBA: 212, 103, 128, 1.0
   HEXA: #d46780ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f3c5486b060d4947b2e1d50cdb79f32d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f3c5486b060d4947b2e1d50cdb79f32d div { flex: 1 1 0; }
           #_f3c5486b060d4947b2e1d50cdb79f32d div.color { width: 100%; height: 100%; }
           #_f3c5486b060d4947b2e1d50cdb79f32d div.cmap { width: 100%; height: auto; }
           #_f3c5486b060d4947b2e1d50cdb79f32d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>earth</strong>
       
       <div id="_f3c5486b060d4947b2e1d50cdb79f32d" class="color-map">
           
                           <div>
                   <style>
       #_5b79b5a95032435e9fb9a0c46b783db1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 105, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5b79b5a95032435e9fb9a0c46b783db1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5b79b5a95032435e9fb9a0c46b783db1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5b79b5a95032435e9fb9a0c46b783db1" class="color" data-tooltip="RGBA: 161, 105, 40, 1.0
   HEXA: #a16928ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_945d99dd94a140a7be4de52854121c37 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 146, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_945d99dd94a140a7be4de52854121c37::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_945d99dd94a140a7be4de52854121c37:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_945d99dd94a140a7be4de52854121c37" class="color" data-tooltip="RGBA: 189, 146, 90, 1.0
   HEXA: #bd925aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_23179696783f455fb50f7fd352bf5ba6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 189, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_23179696783f455fb50f7fd352bf5ba6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_23179696783f455fb50f7fd352bf5ba6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_23179696783f455fb50f7fd352bf5ba6" class="color" data-tooltip="RGBA: 214, 189, 141, 1.0
   HEXA: #d6bd8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b67172f2c81c45d4a098d2ea262e6dbe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 234, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b67172f2c81c45d4a098d2ea262e6dbe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b67172f2c81c45d4a098d2ea262e6dbe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b67172f2c81c45d4a098d2ea262e6dbe" class="color" data-tooltip="RGBA: 237, 234, 194, 1.0
   HEXA: #edeac2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_84da0d2da9f049b9abe78713d996a3cb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 200, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_84da0d2da9f049b9abe78713d996a3cb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_84da0d2da9f049b9abe78713d996a3cb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_84da0d2da9f049b9abe78713d996a3cb" class="color" data-tooltip="RGBA: 181, 200, 184, 1.0
   HEXA: #b5c8b8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ba24e975e2f243ed8a23be028087d822 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 167, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba24e975e2f243ed8a23be028087d822::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba24e975e2f243ed8a23be028087d822:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba24e975e2f243ed8a23be028087d822" class="color" data-tooltip="RGBA: 121, 167, 172, 1.0
   HEXA: #79a7acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4cde7374677e4428b0f602f66a3a6bbe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 135, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4cde7374677e4428b0f602f66a3a6bbe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4cde7374677e4428b0f602f66a3a6bbe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4cde7374677e4428b0f602f66a3a6bbe" class="color" data-tooltip="RGBA: 40, 135, 161, 1.0
   HEXA: #2887a1ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9b3891a9aceb4dc9ad5121ab2fd82d22 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9b3891a9aceb4dc9ad5121ab2fd82d22 div { flex: 1 1 0; }
           #_9b3891a9aceb4dc9ad5121ab2fd82d22 div.color { width: 100%; height: 100%; }
           #_9b3891a9aceb4dc9ad5121ab2fd82d22 div.cmap { width: 100%; height: auto; }
           #_9b3891a9aceb4dc9ad5121ab2fd82d22 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>fall</strong>
       
       <div id="_9b3891a9aceb4dc9ad5121ab2fd82d22" class="color-map">
           
                           <div>
                   <style>
       #_f65c8272a95e4a2aa6bf6a67f43cb39b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(61, 89, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f65c8272a95e4a2aa6bf6a67f43cb39b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f65c8272a95e4a2aa6bf6a67f43cb39b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f65c8272a95e4a2aa6bf6a67f43cb39b" class="color" data-tooltip="RGBA: 61, 89, 65, 1.0
   HEXA: #3d5941ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7f3432db7dd34db997bd238d7f267060 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 136, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7f3432db7dd34db997bd238d7f267060::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7f3432db7dd34db997bd238d7f267060:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7f3432db7dd34db997bd238d7f267060" class="color" data-tooltip="RGBA: 119, 136, 104, 1.0
   HEXA: #778868ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_08c98d62cf864615a9731f7bc89c0c68 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 185, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_08c98d62cf864615a9731f7bc89c0c68::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_08c98d62cf864615a9731f7bc89c0c68:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_08c98d62cf864615a9731f7bc89c0c68" class="color" data-tooltip="RGBA: 181, 185, 145, 1.0
   HEXA: #b5b991ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5e4d206e18a24e68be333a460569d540 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 237, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5e4d206e18a24e68be333a460569d540::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5e4d206e18a24e68be333a460569d540:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5e4d206e18a24e68be333a460569d540" class="color" data-tooltip="RGBA: 246, 237, 189, 1.0
   HEXA: #f6edbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aac20e2965634a7aa898f41afe510aaf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 187, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aac20e2965634a7aa898f41afe510aaf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aac20e2965634a7aa898f41afe510aaf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aac20e2965634a7aa898f41afe510aaf" class="color" data-tooltip="RGBA: 237, 187, 138, 1.0
   HEXA: #edbb8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eabf4196b8db4066873126eac976e9de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 138, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eabf4196b8db4066873126eac976e9de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eabf4196b8db4066873126eac976e9de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eabf4196b8db4066873126eac976e9de" class="color" data-tooltip="RGBA: 222, 138, 90, 1.0
   HEXA: #de8a5aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_74b386ec54fc4ceda78c6fc83fc7a747 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 86, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_74b386ec54fc4ceda78c6fc83fc7a747::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_74b386ec54fc4ceda78c6fc83fc7a747:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_74b386ec54fc4ceda78c6fc83fc7a747" class="color" data-tooltip="RGBA: 202, 86, 44, 1.0
   HEXA: #ca562cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_fee7e89aac5d49e2950f5b491c1baa63 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_fee7e89aac5d49e2950f5b491c1baa63 div { flex: 1 1 0; }
           #_fee7e89aac5d49e2950f5b491c1baa63 div.color { width: 100%; height: 100%; }
           #_fee7e89aac5d49e2950f5b491c1baa63 div.cmap { width: 100%; height: auto; }
           #_fee7e89aac5d49e2950f5b491c1baa63 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>geyser</strong>
       
       <div id="_fee7e89aac5d49e2950f5b491c1baa63" class="color-map">
           
                           <div>
                   <style>
       #_a35a250bd0e54d9e999643576076976e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 128, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a35a250bd0e54d9e999643576076976e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a35a250bd0e54d9e999643576076976e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a35a250bd0e54d9e999643576076976e" class="color" data-tooltip="RGBA: 0, 128, 128, 1.0
   HEXA: #008080ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1534004452145c9bbc3a563b26b0621 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(112, 164, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1534004452145c9bbc3a563b26b0621::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1534004452145c9bbc3a563b26b0621:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1534004452145c9bbc3a563b26b0621" class="color" data-tooltip="RGBA: 112, 164, 148, 1.0
   HEXA: #70a494ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_54f9288135944a7dbc2dfe66a74fee57 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 200, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_54f9288135944a7dbc2dfe66a74fee57::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_54f9288135944a7dbc2dfe66a74fee57:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_54f9288135944a7dbc2dfe66a74fee57" class="color" data-tooltip="RGBA: 180, 200, 168, 1.0
   HEXA: #b4c8a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7ca10cdfa12b4130879157f7a2cd3cb8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 237, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7ca10cdfa12b4130879157f7a2cd3cb8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7ca10cdfa12b4130879157f7a2cd3cb8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7ca10cdfa12b4130879157f7a2cd3cb8" class="color" data-tooltip="RGBA: 246, 237, 189, 1.0
   HEXA: #f6edbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ca6a83c6a2cb42fd84f785c5d355db83 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 187, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ca6a83c6a2cb42fd84f785c5d355db83::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ca6a83c6a2cb42fd84f785c5d355db83:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ca6a83c6a2cb42fd84f785c5d355db83" class="color" data-tooltip="RGBA: 237, 187, 138, 1.0
   HEXA: #edbb8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e796132a7e94f78b0413b4fb44e5fd0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 138, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e796132a7e94f78b0413b4fb44e5fd0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e796132a7e94f78b0413b4fb44e5fd0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e796132a7e94f78b0413b4fb44e5fd0" class="color" data-tooltip="RGBA: 222, 138, 90, 1.0
   HEXA: #de8a5aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1b053e2e55041bc85885ff6660f7367 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 86, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1b053e2e55041bc85885ff6660f7367::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1b053e2e55041bc85885ff6660f7367:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1b053e2e55041bc85885ff6660f7367" class="color" data-tooltip="RGBA: 202, 86, 44, 1.0
   HEXA: #ca562cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0edbbc374077408985c860db7a3ed9e4 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0edbbc374077408985c860db7a3ed9e4 div { flex: 1 1 0; }
           #_0edbbc374077408985c860db7a3ed9e4 div.color { width: 100%; height: 100%; }
           #_0edbbc374077408985c860db7a3ed9e4 div.cmap { width: 100%; height: auto; }
           #_0edbbc374077408985c860db7a3ed9e4 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tealrose</strong>
       
       <div id="_0edbbc374077408985c860db7a3ed9e4" class="color-map">
           
                           <div>
                   <style>
       #_f2749afdcc3b4527812fd9e33f47f096 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 147, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f2749afdcc3b4527812fd9e33f47f096::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f2749afdcc3b4527812fd9e33f47f096:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f2749afdcc3b4527812fd9e33f47f096" class="color" data-tooltip="RGBA: 0, 147, 146, 1.0
   HEXA: #009392ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8aa4c370790a471a8154847ad27ac8f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 170, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8aa4c370790a471a8154847ad27ac8f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8aa4c370790a471a8154847ad27ac8f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8aa4c370790a471a8154847ad27ac8f8" class="color" data-tooltip="RGBA: 114, 170, 161, 1.0
   HEXA: #72aaa1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_78b41538282141b59e35e91bfd4c0445 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 199, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_78b41538282141b59e35e91bfd4c0445::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_78b41538282141b59e35e91bfd4c0445:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_78b41538282141b59e35e91bfd4c0445" class="color" data-tooltip="RGBA: 177, 199, 179, 1.0
   HEXA: #b1c7b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b2f67f3de4d40e99be285adca72f041 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 234, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b2f67f3de4d40e99be285adca72f041::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b2f67f3de4d40e99be285adca72f041:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b2f67f3de4d40e99be285adca72f041" class="color" data-tooltip="RGBA: 241, 234, 200, 1.0
   HEXA: #f1eac8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_577257188c7a4defb70195994d7a6905 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 185, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_577257188c7a4defb70195994d7a6905::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_577257188c7a4defb70195994d7a6905:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_577257188c7a4defb70195994d7a6905" class="color" data-tooltip="RGBA: 229, 185, 173, 1.0
   HEXA: #e5b9adff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d70f9f19094447d5b850bcfad65f1684 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 137, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d70f9f19094447d5b850bcfad65f1684::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d70f9f19094447d5b850bcfad65f1684:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d70f9f19094447d5b850bcfad65f1684" class="color" data-tooltip="RGBA: 217, 137, 148, 1.0
   HEXA: #d98994ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3d393d440184e03833528b997a791cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 88, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3d393d440184e03833528b997a791cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3d393d440184e03833528b997a791cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3d393d440184e03833528b997a791cf" class="color" data-tooltip="RGBA: 208, 88, 126, 1.0
   HEXA: #d0587eff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c19179f43bd24d6b89e095dcf5005111 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c19179f43bd24d6b89e095dcf5005111 div { flex: 1 1 0; }
           #_c19179f43bd24d6b89e095dcf5005111 div.color { width: 100%; height: 100%; }
           #_c19179f43bd24d6b89e095dcf5005111 div.cmap { width: 100%; height: auto; }
           #_c19179f43bd24d6b89e095dcf5005111 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>temps</strong>
       
       <div id="_c19179f43bd24d6b89e095dcf5005111" class="color-map">
           
                           <div>
                   <style>
       #_e75dbfa98e8747a3b9d9b49af9f64a1d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 147, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e75dbfa98e8747a3b9d9b49af9f64a1d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e75dbfa98e8747a3b9d9b49af9f64a1d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e75dbfa98e8747a3b9d9b49af9f64a1d" class="color" data-tooltip="RGBA: 0, 147, 146, 1.0
   HEXA: #009392ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34d04325c3cc4f2da044a09ccd1cc478 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 177, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34d04325c3cc4f2da044a09ccd1cc478::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34d04325c3cc4f2da044a09ccd1cc478:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34d04325c3cc4f2da044a09ccd1cc478" class="color" data-tooltip="RGBA: 57, 177, 133, 1.0
   HEXA: #39b185ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1c918b0c2c14763b993a7e6f5fbb880 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 203, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1c918b0c2c14763b993a7e6f5fbb880::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1c918b0c2c14763b993a7e6f5fbb880:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1c918b0c2c14763b993a7e6f5fbb880" class="color" data-tooltip="RGBA: 156, 203, 134, 1.0
   HEXA: #9ccb86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dce925c9662c4fcc8a722b0565afa0c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(233, 226, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dce925c9662c4fcc8a722b0565afa0c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dce925c9662c4fcc8a722b0565afa0c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dce925c9662c4fcc8a722b0565afa0c9" class="color" data-tooltip="RGBA: 233, 226, 156, 1.0
   HEXA: #e9e29cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d3c8b98f9b4545c0b2c8a8e20fd9d573 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 180, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d3c8b98f9b4545c0b2c8a8e20fd9d573::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d3c8b98f9b4545c0b2c8a8e20fd9d573:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d3c8b98f9b4545c0b2c8a8e20fd9d573" class="color" data-tooltip="RGBA: 238, 180, 121, 1.0
   HEXA: #eeb479ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e44f7e5db3cd4396a7df0cc25987bd1a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(232, 132, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e44f7e5db3cd4396a7df0cc25987bd1a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e44f7e5db3cd4396a7df0cc25987bd1a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e44f7e5db3cd4396a7df0cc25987bd1a" class="color" data-tooltip="RGBA: 232, 132, 113, 1.0
   HEXA: #e88471ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d58ca3ed7bb34c42a612b5bfdd3b0820 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 89, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d58ca3ed7bb34c42a612b5bfdd3b0820::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d58ca3ed7bb34c42a612b5bfdd3b0820:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d58ca3ed7bb34c42a612b5bfdd3b0820" class="color" data-tooltip="RGBA: 207, 89, 126, 1.0
   HEXA: #cf597eff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c640f855ca324bef8d9f0babb48807b2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c640f855ca324bef8d9f0babb48807b2 div { flex: 1 1 0; }
           #_c640f855ca324bef8d9f0babb48807b2 div.color { width: 100%; height: 100%; }
           #_c640f855ca324bef8d9f0babb48807b2 div.cmap { width: 100%; height: auto; }
           #_c640f855ca324bef8d9f0babb48807b2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tropic</strong>
       
       <div id="_c640f855ca324bef8d9f0babb48807b2" class="color-map">
           
                           <div>
                   <style>
       #_6c0ede8d3b6c4fd4885adca425ccee0b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 155, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6c0ede8d3b6c4fd4885adca425ccee0b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6c0ede8d3b6c4fd4885adca425ccee0b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6c0ede8d3b6c4fd4885adca425ccee0b" class="color" data-tooltip="RGBA: 0, 155, 158, 1.0
   HEXA: #009b9eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e2096554694d44dcb7886ac4de145934 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 183, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e2096554694d44dcb7886ac4de145934::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e2096554694d44dcb7886ac4de145934:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e2096554694d44dcb7886ac4de145934" class="color" data-tooltip="RGBA: 66, 183, 185, 1.0
   HEXA: #42b7b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_610899ed3b44466eb283e9b9c6314f2b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 211, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_610899ed3b44466eb283e9b9c6314f2b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_610899ed3b44466eb283e9b9c6314f2b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_610899ed3b44466eb283e9b9c6314f2b" class="color" data-tooltip="RGBA: 167, 211, 212, 1.0
   HEXA: #a7d3d4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5bb94ae6bd8043b8b234b2cc1589b7a7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 241, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5bb94ae6bd8043b8b234b2cc1589b7a7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5bb94ae6bd8043b8b234b2cc1589b7a7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5bb94ae6bd8043b8b234b2cc1589b7a7" class="color" data-tooltip="RGBA: 241, 241, 241, 1.0
   HEXA: #f1f1f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c452d884f5fd4e8ea91f275fb5ba69e6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 193, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c452d884f5fd4e8ea91f275fb5ba69e6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c452d884f5fd4e8ea91f275fb5ba69e6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c452d884f5fd4e8ea91f275fb5ba69e6" class="color" data-tooltip="RGBA: 228, 193, 217, 1.0
   HEXA: #e4c1d9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb7a6c441d2b4fda90b8a6d6d43e3171 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 145, 193, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb7a6c441d2b4fda90b8a6d6d43e3171::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb7a6c441d2b4fda90b8a6d6d43e3171:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb7a6c441d2b4fda90b8a6d6d43e3171" class="color" data-tooltip="RGBA: 214, 145, 193, 1.0
   HEXA: #d691c1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e491c0c15c8e454da2410a5ad2ba8114 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 93, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e491c0c15c8e454da2410a5ad2ba8114::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e491c0c15c8e454da2410a5ad2ba8114:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e491c0c15c8e454da2410a5ad2ba8114" class="color" data-tooltip="RGBA: 199, 93, 171, 1.0
   HEXA: #c75dabff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_d56816347a754c0b89f44e4648679b97 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_d56816347a754c0b89f44e4648679b97 div { flex: 1 1 0; }
           #_d56816347a754c0b89f44e4648679b97 div.color { width: 100%; height: 100%; }
           #_d56816347a754c0b89f44e4648679b97 div.cmap { width: 100%; height: auto; }
           #_d56816347a754c0b89f44e4648679b97 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>brbg</strong>
       
       <div id="_d56816347a754c0b89f44e4648679b97" class="color-map">
           
                           <div>
                   <style>
       #_7a0e3f550cb24dbcbfc2cf4631df4c7e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 48, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7a0e3f550cb24dbcbfc2cf4631df4c7e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7a0e3f550cb24dbcbfc2cf4631df4c7e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7a0e3f550cb24dbcbfc2cf4631df4c7e" class="color" data-tooltip="RGBA: 84, 48, 5, 1.0
   HEXA: #543005ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef0e0a79f0244b098faadd94739bbcbc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 81, 10, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef0e0a79f0244b098faadd94739bbcbc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef0e0a79f0244b098faadd94739bbcbc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef0e0a79f0244b098faadd94739bbcbc" class="color" data-tooltip="RGBA: 140, 81, 10, 1.0
   HEXA: #8c510aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_896105fe16a64ef8b2c867b8cf3e1013 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 129, 45, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_896105fe16a64ef8b2c867b8cf3e1013::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_896105fe16a64ef8b2c867b8cf3e1013:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_896105fe16a64ef8b2c867b8cf3e1013" class="color" data-tooltip="RGBA: 191, 129, 45, 1.0
   HEXA: #bf812dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_720b6249f4774d7194c442d7d22b5c93 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 194, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_720b6249f4774d7194c442d7d22b5c93::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_720b6249f4774d7194c442d7d22b5c93:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_720b6249f4774d7194c442d7d22b5c93" class="color" data-tooltip="RGBA: 223, 194, 125, 1.0
   HEXA: #dfc27dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_12eecc0d2c85424d8d129a77586b3bda { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 232, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_12eecc0d2c85424d8d129a77586b3bda::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_12eecc0d2c85424d8d129a77586b3bda:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_12eecc0d2c85424d8d129a77586b3bda" class="color" data-tooltip="RGBA: 246, 232, 195, 1.0
   HEXA: #f6e8c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_25c2df8231854d0c84d5c657660bc1a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 245, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_25c2df8231854d0c84d5c657660bc1a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_25c2df8231854d0c84d5c657660bc1a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_25c2df8231854d0c84d5c657660bc1a4" class="color" data-tooltip="RGBA: 245, 245, 245, 1.0
   HEXA: #f5f5f5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a177711bbe304131be6fcb85d5dd704e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 234, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a177711bbe304131be6fcb85d5dd704e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a177711bbe304131be6fcb85d5dd704e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a177711bbe304131be6fcb85d5dd704e" class="color" data-tooltip="RGBA: 199, 234, 229, 1.0
   HEXA: #c7eae5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f140a3156be346028a7a3efd29bb5c0e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 205, 193, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f140a3156be346028a7a3efd29bb5c0e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f140a3156be346028a7a3efd29bb5c0e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f140a3156be346028a7a3efd29bb5c0e" class="color" data-tooltip="RGBA: 128, 205, 193, 1.0
   HEXA: #80cdc1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc1bc8ff80c74541811396c09bb6610d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 151, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc1bc8ff80c74541811396c09bb6610d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc1bc8ff80c74541811396c09bb6610d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc1bc8ff80c74541811396c09bb6610d" class="color" data-tooltip="RGBA: 53, 151, 143, 1.0
   HEXA: #35978fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee45cb0b5f5149c89b93ace85e7fbdad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 102, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee45cb0b5f5149c89b93ace85e7fbdad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee45cb0b5f5149c89b93ace85e7fbdad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee45cb0b5f5149c89b93ace85e7fbdad" class="color" data-tooltip="RGBA: 1, 102, 94, 1.0
   HEXA: #01665eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c007d0f1e03441c8e4af674b8593201 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 60, 48, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c007d0f1e03441c8e4af674b8593201::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c007d0f1e03441c8e4af674b8593201:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c007d0f1e03441c8e4af674b8593201" class="color" data-tooltip="RGBA: 0, 60, 48, 1.0
   HEXA: #003c30ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8c11dfca32b6484eb565ad76ef514110 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8c11dfca32b6484eb565ad76ef514110 div { flex: 1 1 0; }
           #_8c11dfca32b6484eb565ad76ef514110 div.color { width: 100%; height: 100%; }
           #_8c11dfca32b6484eb565ad76ef514110 div.cmap { width: 100%; height: auto; }
           #_8c11dfca32b6484eb565ad76ef514110 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>piyg</strong>
       
       <div id="_8c11dfca32b6484eb565ad76ef514110" class="color-map">
           
                           <div>
                   <style>
       #_d47985f6a16b4f50b8890d846b191e7a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(142, 1, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d47985f6a16b4f50b8890d846b191e7a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d47985f6a16b4f50b8890d846b191e7a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d47985f6a16b4f50b8890d846b191e7a" class="color" data-tooltip="RGBA: 142, 1, 82, 1.0
   HEXA: #8e0152ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e25347fa105b4fa78b4db91dd4ef3f4a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 27, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e25347fa105b4fa78b4db91dd4ef3f4a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e25347fa105b4fa78b4db91dd4ef3f4a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e25347fa105b4fa78b4db91dd4ef3f4a" class="color" data-tooltip="RGBA: 197, 27, 125, 1.0
   HEXA: #c51b7dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f951d8ef5b7c4bb9a907ec50c2914e2d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 119, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f951d8ef5b7c4bb9a907ec50c2914e2d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f951d8ef5b7c4bb9a907ec50c2914e2d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f951d8ef5b7c4bb9a907ec50c2914e2d" class="color" data-tooltip="RGBA: 222, 119, 174, 1.0
   HEXA: #de77aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_77627e0ce22246479de67d4bb29ba943 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 182, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_77627e0ce22246479de67d4bb29ba943::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_77627e0ce22246479de67d4bb29ba943:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_77627e0ce22246479de67d4bb29ba943" class="color" data-tooltip="RGBA: 241, 182, 218, 1.0
   HEXA: #f1b6daff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dc344400da794f5eb55c9211112ff2f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 224, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dc344400da794f5eb55c9211112ff2f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dc344400da794f5eb55c9211112ff2f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dc344400da794f5eb55c9211112ff2f1" class="color" data-tooltip="RGBA: 253, 224, 239, 1.0
   HEXA: #fde0efff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_242a6e05709d49ddbb3afa19c72f6aec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_242a6e05709d49ddbb3afa19c72f6aec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_242a6e05709d49ddbb3afa19c72f6aec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_242a6e05709d49ddbb3afa19c72f6aec" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_326d63f4fd184b8ba32c5815cef45f90 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 245, 208, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_326d63f4fd184b8ba32c5815cef45f90::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_326d63f4fd184b8ba32c5815cef45f90:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_326d63f4fd184b8ba32c5815cef45f90" class="color" data-tooltip="RGBA: 230, 245, 208, 1.0
   HEXA: #e6f5d0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_173e3a89aa53460c9849ae1796bc4bfc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(184, 225, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_173e3a89aa53460c9849ae1796bc4bfc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_173e3a89aa53460c9849ae1796bc4bfc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_173e3a89aa53460c9849ae1796bc4bfc" class="color" data-tooltip="RGBA: 184, 225, 134, 1.0
   HEXA: #b8e186ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f6294affb11340a68c395c8a86f44e87 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 188, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f6294affb11340a68c395c8a86f44e87::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f6294affb11340a68c395c8a86f44e87:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f6294affb11340a68c395c8a86f44e87" class="color" data-tooltip="RGBA: 127, 188, 65, 1.0
   HEXA: #7fbc41ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cecc0c29f229431c8580083ded1f83bb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 146, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cecc0c29f229431c8580083ded1f83bb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cecc0c29f229431c8580083ded1f83bb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cecc0c29f229431c8580083ded1f83bb" class="color" data-tooltip="RGBA: 77, 146, 33, 1.0
   HEXA: #4d9221ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_156a93f471f6436980e346cdfe666dda { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 100, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_156a93f471f6436980e346cdfe666dda::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_156a93f471f6436980e346cdfe666dda:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_156a93f471f6436980e346cdfe666dda" class="color" data-tooltip="RGBA: 39, 100, 25, 1.0
   HEXA: #276419ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_75a13b693d334613a9f72de17d5fdd62 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_75a13b693d334613a9f72de17d5fdd62 div { flex: 1 1 0; }
           #_75a13b693d334613a9f72de17d5fdd62 div.color { width: 100%; height: 100%; }
           #_75a13b693d334613a9f72de17d5fdd62 div.cmap { width: 100%; height: auto; }
           #_75a13b693d334613a9f72de17d5fdd62 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>prgn</strong>
       
       <div id="_75a13b693d334613a9f72de17d5fdd62" class="color-map">
           
                           <div>
                   <style>
       #_9e2120f95a4b4e87b046ecda7be8e193 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 0, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e2120f95a4b4e87b046ecda7be8e193::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e2120f95a4b4e87b046ecda7be8e193:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e2120f95a4b4e87b046ecda7be8e193" class="color" data-tooltip="RGBA: 64, 0, 75, 1.0
   HEXA: #40004bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_367fc3b976ad4d479d36805318d661fb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(118, 42, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_367fc3b976ad4d479d36805318d661fb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_367fc3b976ad4d479d36805318d661fb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_367fc3b976ad4d479d36805318d661fb" class="color" data-tooltip="RGBA: 118, 42, 131, 1.0
   HEXA: #762a83ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1be6d86aa0634cbc8d3ed7214dcdef6e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 112, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1be6d86aa0634cbc8d3ed7214dcdef6e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1be6d86aa0634cbc8d3ed7214dcdef6e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1be6d86aa0634cbc8d3ed7214dcdef6e" class="color" data-tooltip="RGBA: 153, 112, 171, 1.0
   HEXA: #9970abff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3750b2a696024c93985ceb59f0578e2b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 165, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3750b2a696024c93985ceb59f0578e2b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3750b2a696024c93985ceb59f0578e2b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3750b2a696024c93985ceb59f0578e2b" class="color" data-tooltip="RGBA: 194, 165, 207, 1.0
   HEXA: #c2a5cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc5d6580120e4c6aae80a2404d0a7b20 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 212, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc5d6580120e4c6aae80a2404d0a7b20::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc5d6580120e4c6aae80a2404d0a7b20:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc5d6580120e4c6aae80a2404d0a7b20" class="color" data-tooltip="RGBA: 231, 212, 232, 1.0
   HEXA: #e7d4e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_736528b1d919464490914e11c9e66006 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_736528b1d919464490914e11c9e66006::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_736528b1d919464490914e11c9e66006:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_736528b1d919464490914e11c9e66006" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ccc9b4950e944ace9e9629bee08af85d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 240, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ccc9b4950e944ace9e9629bee08af85d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ccc9b4950e944ace9e9629bee08af85d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ccc9b4950e944ace9e9629bee08af85d" class="color" data-tooltip="RGBA: 217, 240, 211, 1.0
   HEXA: #d9f0d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_774b204f4acd49cabff6cf92c08db035 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 219, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_774b204f4acd49cabff6cf92c08db035::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_774b204f4acd49cabff6cf92c08db035:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_774b204f4acd49cabff6cf92c08db035" class="color" data-tooltip="RGBA: 166, 219, 160, 1.0
   HEXA: #a6dba0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0dec66598ce348f88a95819b83bb93e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(90, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0dec66598ce348f88a95819b83bb93e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0dec66598ce348f88a95819b83bb93e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0dec66598ce348f88a95819b83bb93e0" class="color" data-tooltip="RGBA: 90, 174, 97, 1.0
   HEXA: #5aae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3d1b81f138ee4838ab82c72f5531f5da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 120, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3d1b81f138ee4838ab82c72f5531f5da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3d1b81f138ee4838ab82c72f5531f5da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3d1b81f138ee4838ab82c72f5531f5da" class="color" data-tooltip="RGBA: 27, 120, 55, 1.0
   HEXA: #1b7837ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_89fe957d939145a2afadfe1944331903 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 68, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_89fe957d939145a2afadfe1944331903::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_89fe957d939145a2afadfe1944331903:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_89fe957d939145a2afadfe1944331903" class="color" data-tooltip="RGBA: 0, 68, 27, 1.0
   HEXA: #00441bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_befa932bdd5140dcacb9ffb887403cf1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_befa932bdd5140dcacb9ffb887403cf1 div { flex: 1 1 0; }
           #_befa932bdd5140dcacb9ffb887403cf1 div.color { width: 100%; height: 100%; }
           #_befa932bdd5140dcacb9ffb887403cf1 div.cmap { width: 100%; height: auto; }
           #_befa932bdd5140dcacb9ffb887403cf1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>puor</strong>
       
       <div id="_befa932bdd5140dcacb9ffb887403cf1" class="color-map">
           
                           <div>
                   <style>
       #_3385d7f25e094b768c3154ecdf21fdbe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 59, 8, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3385d7f25e094b768c3154ecdf21fdbe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3385d7f25e094b768c3154ecdf21fdbe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3385d7f25e094b768c3154ecdf21fdbe" class="color" data-tooltip="RGBA: 127, 59, 8, 1.0
   HEXA: #7f3b08ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a8c8e38d27dc409287b7a8ba292ef8a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 88, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8c8e38d27dc409287b7a8ba292ef8a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8c8e38d27dc409287b7a8ba292ef8a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8c8e38d27dc409287b7a8ba292ef8a4" class="color" data-tooltip="RGBA: 179, 88, 6, 1.0
   HEXA: #b35806ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_622850ba2e5c4903af19afc7bd5e0533 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 130, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_622850ba2e5c4903af19afc7bd5e0533::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_622850ba2e5c4903af19afc7bd5e0533:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_622850ba2e5c4903af19afc7bd5e0533" class="color" data-tooltip="RGBA: 224, 130, 20, 1.0
   HEXA: #e08214ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57416409550649bf8b4cb6ee3b89bf58 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 184, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57416409550649bf8b4cb6ee3b89bf58::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57416409550649bf8b4cb6ee3b89bf58:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57416409550649bf8b4cb6ee3b89bf58" class="color" data-tooltip="RGBA: 253, 184, 99, 1.0
   HEXA: #fdb863ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6f0cd1b2351c43619164f1f41ce553e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 182, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6f0cd1b2351c43619164f1f41ce553e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6f0cd1b2351c43619164f1f41ce553e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6f0cd1b2351c43619164f1f41ce553e8" class="color" data-tooltip="RGBA: 254, 224, 182, 1.0
   HEXA: #fee0b6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a0ebb64b6a34187acab2a9442f0c49c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a0ebb64b6a34187acab2a9442f0c49c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a0ebb64b6a34187acab2a9442f0c49c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a0ebb64b6a34187acab2a9442f0c49c" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a925c08387484d22aa7efe84d6e35307 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 218, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a925c08387484d22aa7efe84d6e35307::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a925c08387484d22aa7efe84d6e35307:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a925c08387484d22aa7efe84d6e35307" class="color" data-tooltip="RGBA: 216, 218, 235, 1.0
   HEXA: #d8daebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_005a4a967be34e309d01b12448f13528 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 171, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_005a4a967be34e309d01b12448f13528::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_005a4a967be34e309d01b12448f13528:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_005a4a967be34e309d01b12448f13528" class="color" data-tooltip="RGBA: 178, 171, 210, 1.0
   HEXA: #b2abd2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fa5256ec1a2c4cc499bf7740eb6863d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 115, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fa5256ec1a2c4cc499bf7740eb6863d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fa5256ec1a2c4cc499bf7740eb6863d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fa5256ec1a2c4cc499bf7740eb6863d1" class="color" data-tooltip="RGBA: 128, 115, 172, 1.0
   HEXA: #8073acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_33338c47fa1f4117b35b583739cbdc8d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 39, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_33338c47fa1f4117b35b583739cbdc8d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_33338c47fa1f4117b35b583739cbdc8d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_33338c47fa1f4117b35b583739cbdc8d" class="color" data-tooltip="RGBA: 84, 39, 136, 1.0
   HEXA: #542788ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_06c0caa76ada4390a495572923f76634 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(45, 0, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_06c0caa76ada4390a495572923f76634::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_06c0caa76ada4390a495572923f76634:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_06c0caa76ada4390a495572923f76634" class="color" data-tooltip="RGBA: 45, 0, 75, 1.0
   HEXA: #2d004bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6a22545c3fc84e23a639adb02876c218 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6a22545c3fc84e23a639adb02876c218 div { flex: 1 1 0; }
           #_6a22545c3fc84e23a639adb02876c218 div.color { width: 100%; height: 100%; }
           #_6a22545c3fc84e23a639adb02876c218 div.cmap { width: 100%; height: auto; }
           #_6a22545c3fc84e23a639adb02876c218 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>rdbu</strong>
       
       <div id="_6a22545c3fc84e23a639adb02876c218" class="color-map">
           
                           <div>
                   <style>
       #_aabc9dc5222c481bb978319cefb82ca0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aabc9dc5222c481bb978319cefb82ca0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aabc9dc5222c481bb978319cefb82ca0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aabc9dc5222c481bb978319cefb82ca0" class="color" data-tooltip="RGBA: 103, 0, 31, 1.0
   HEXA: #67001fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd3a657e9180406a813f1467ebf5dc3c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 24, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd3a657e9180406a813f1467ebf5dc3c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd3a657e9180406a813f1467ebf5dc3c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd3a657e9180406a813f1467ebf5dc3c" class="color" data-tooltip="RGBA: 178, 24, 43, 1.0
   HEXA: #b2182bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d399dab5a4f34653b2ef709408217954 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 96, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d399dab5a4f34653b2ef709408217954::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d399dab5a4f34653b2ef709408217954:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d399dab5a4f34653b2ef709408217954" class="color" data-tooltip="RGBA: 214, 96, 77, 1.0
   HEXA: #d6604dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_77599661354a4dec82a8880b2ab306f4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 165, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_77599661354a4dec82a8880b2ab306f4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_77599661354a4dec82a8880b2ab306f4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_77599661354a4dec82a8880b2ab306f4" class="color" data-tooltip="RGBA: 244, 165, 130, 1.0
   HEXA: #f4a582ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fdad7499bf384b41a08c8ac4d9e9736d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 219, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fdad7499bf384b41a08c8ac4d9e9736d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fdad7499bf384b41a08c8ac4d9e9736d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fdad7499bf384b41a08c8ac4d9e9736d" class="color" data-tooltip="RGBA: 253, 219, 199, 1.0
   HEXA: #fddbc7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6a9b241eb7be4b7abaf4fc15b244a939 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 247, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6a9b241eb7be4b7abaf4fc15b244a939::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6a9b241eb7be4b7abaf4fc15b244a939:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6a9b241eb7be4b7abaf4fc15b244a939" class="color" data-tooltip="RGBA: 247, 247, 247, 1.0
   HEXA: #f7f7f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_20728ecffcef43abbb91c8bbec29c86d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 229, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_20728ecffcef43abbb91c8bbec29c86d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_20728ecffcef43abbb91c8bbec29c86d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_20728ecffcef43abbb91c8bbec29c86d" class="color" data-tooltip="RGBA: 209, 229, 240, 1.0
   HEXA: #d1e5f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7264f20a55864c509ef614a34af968ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 197, 222, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7264f20a55864c509ef614a34af968ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7264f20a55864c509ef614a34af968ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7264f20a55864c509ef614a34af968ba" class="color" data-tooltip="RGBA: 146, 197, 222, 1.0
   HEXA: #92c5deff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9cb25e59bf14c6393497c2d1ebf73b4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(67, 147, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9cb25e59bf14c6393497c2d1ebf73b4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9cb25e59bf14c6393497c2d1ebf73b4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9cb25e59bf14c6393497c2d1ebf73b4" class="color" data-tooltip="RGBA: 67, 147, 195, 1.0
   HEXA: #4393c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6363db7428aa4cfdb67795d1223d1651 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 102, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6363db7428aa4cfdb67795d1223d1651::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6363db7428aa4cfdb67795d1223d1651:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6363db7428aa4cfdb67795d1223d1651" class="color" data-tooltip="RGBA: 33, 102, 172, 1.0
   HEXA: #2166acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_08f313518bc74d4eba2051808f2e6230 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 48, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_08f313518bc74d4eba2051808f2e6230::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_08f313518bc74d4eba2051808f2e6230:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_08f313518bc74d4eba2051808f2e6230" class="color" data-tooltip="RGBA: 5, 48, 97, 1.0
   HEXA: #053061ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_833232a81b274db2bdea4745181d5e65 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_833232a81b274db2bdea4745181d5e65 div { flex: 1 1 0; }
           #_833232a81b274db2bdea4745181d5e65 div.color { width: 100%; height: 100%; }
           #_833232a81b274db2bdea4745181d5e65 div.cmap { width: 100%; height: auto; }
           #_833232a81b274db2bdea4745181d5e65 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>rdgy</strong>
       
       <div id="_833232a81b274db2bdea4745181d5e65" class="color-map">
           
                           <div>
                   <style>
       #_ab4a6c2e64cc48388c8797e947578070 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab4a6c2e64cc48388c8797e947578070::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab4a6c2e64cc48388c8797e947578070:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab4a6c2e64cc48388c8797e947578070" class="color" data-tooltip="RGBA: 103, 0, 31, 1.0
   HEXA: #67001fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c7abb001b5ae4246938888050569baba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 24, 43, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c7abb001b5ae4246938888050569baba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c7abb001b5ae4246938888050569baba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c7abb001b5ae4246938888050569baba" class="color" data-tooltip="RGBA: 178, 24, 43, 1.0
   HEXA: #b2182bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bf47e6cb8e6144929b141cf10257a927 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 96, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf47e6cb8e6144929b141cf10257a927::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf47e6cb8e6144929b141cf10257a927:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf47e6cb8e6144929b141cf10257a927" class="color" data-tooltip="RGBA: 214, 96, 77, 1.0
   HEXA: #d6604dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_189eedd727c4495bab86c042a59416f9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 165, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_189eedd727c4495bab86c042a59416f9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_189eedd727c4495bab86c042a59416f9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_189eedd727c4495bab86c042a59416f9" class="color" data-tooltip="RGBA: 244, 165, 130, 1.0
   HEXA: #f4a582ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_207b57bbcfca401fa4c8ec7edd08ae19 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 219, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_207b57bbcfca401fa4c8ec7edd08ae19::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_207b57bbcfca401fa4c8ec7edd08ae19:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_207b57bbcfca401fa4c8ec7edd08ae19" class="color" data-tooltip="RGBA: 253, 219, 199, 1.0
   HEXA: #fddbc7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0ec5ff1361c74cf081d4932c6329b7b2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ec5ff1361c74cf081d4932c6329b7b2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ec5ff1361c74cf081d4932c6329b7b2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ec5ff1361c74cf081d4932c6329b7b2" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_26de8922f7a249c09d82566b276cecca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 224, 224, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26de8922f7a249c09d82566b276cecca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26de8922f7a249c09d82566b276cecca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26de8922f7a249c09d82566b276cecca" class="color" data-tooltip="RGBA: 224, 224, 224, 1.0
   HEXA: #e0e0e0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0cf9d9ef5b1d459b92624983be5b61b2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 186, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0cf9d9ef5b1d459b92624983be5b61b2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0cf9d9ef5b1d459b92624983be5b61b2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0cf9d9ef5b1d459b92624983be5b61b2" class="color" data-tooltip="RGBA: 186, 186, 186, 1.0
   HEXA: #bababaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_105b459474a24a82a07a4c966b0a60d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 135, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_105b459474a24a82a07a4c966b0a60d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_105b459474a24a82a07a4c966b0a60d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_105b459474a24a82a07a4c966b0a60d4" class="color" data-tooltip="RGBA: 135, 135, 135, 1.0
   HEXA: #878787ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_710e1def4773467191b43347a860332f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 77, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_710e1def4773467191b43347a860332f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_710e1def4773467191b43347a860332f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_710e1def4773467191b43347a860332f" class="color" data-tooltip="RGBA: 77, 77, 77, 1.0
   HEXA: #4d4d4dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_72dbc1a1970a47378991620475cc81a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 26, 26, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_72dbc1a1970a47378991620475cc81a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_72dbc1a1970a47378991620475cc81a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_72dbc1a1970a47378991620475cc81a0" class="color" data-tooltip="RGBA: 26, 26, 26, 1.0
   HEXA: #1a1a1aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_fd167e7bac754b7bba3d807592410db7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_fd167e7bac754b7bba3d807592410db7 div { flex: 1 1 0; }
           #_fd167e7bac754b7bba3d807592410db7 div.color { width: 100%; height: 100%; }
           #_fd167e7bac754b7bba3d807592410db7 div.cmap { width: 100%; height: auto; }
           #_fd167e7bac754b7bba3d807592410db7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>rdylbu</strong>
       
       <div id="_fd167e7bac754b7bba3d807592410db7" class="color-map">
           
                           <div>
                   <style>
       #_cf7a9e38d66445658796db8558863cdd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf7a9e38d66445658796db8558863cdd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf7a9e38d66445658796db8558863cdd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf7a9e38d66445658796db8558863cdd" class="color" data-tooltip="RGBA: 165, 0, 38, 1.0
   HEXA: #a50026ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9e3c75eda98f4e33b9f2768dfba38d43 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 48, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e3c75eda98f4e33b9f2768dfba38d43::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e3c75eda98f4e33b9f2768dfba38d43:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e3c75eda98f4e33b9f2768dfba38d43" class="color" data-tooltip="RGBA: 215, 48, 39, 1.0
   HEXA: #d73027ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1741092071244f33974c0c76f812f14d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 109, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1741092071244f33974c0c76f812f14d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1741092071244f33974c0c76f812f14d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1741092071244f33974c0c76f812f14d" class="color" data-tooltip="RGBA: 244, 109, 67, 1.0
   HEXA: #f46d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ec9de9edcec944d38659871248d17926 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ec9de9edcec944d38659871248d17926::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ec9de9edcec944d38659871248d17926:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ec9de9edcec944d38659871248d17926" class="color" data-tooltip="RGBA: 253, 174, 97, 1.0
   HEXA: #fdae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_88b9792c474649fa8f2acf0c4ef0e8b6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_88b9792c474649fa8f2acf0c4ef0e8b6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_88b9792c474649fa8f2acf0c4ef0e8b6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_88b9792c474649fa8f2acf0c4ef0e8b6" class="color" data-tooltip="RGBA: 254, 224, 144, 1.0
   HEXA: #fee090ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_05dafb8455ee4a688f53945633737d58 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_05dafb8455ee4a688f53945633737d58::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_05dafb8455ee4a688f53945633737d58:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_05dafb8455ee4a688f53945633737d58" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_92c3ad5b94f14dd7b8b7070a0d5349f4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 243, 248, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_92c3ad5b94f14dd7b8b7070a0d5349f4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_92c3ad5b94f14dd7b8b7070a0d5349f4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_92c3ad5b94f14dd7b8b7070a0d5349f4" class="color" data-tooltip="RGBA: 224, 243, 248, 1.0
   HEXA: #e0f3f8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e10763d06854475e9778909eecf844bc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 217, 233, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e10763d06854475e9778909eecf844bc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e10763d06854475e9778909eecf844bc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e10763d06854475e9778909eecf844bc" class="color" data-tooltip="RGBA: 171, 217, 233, 1.0
   HEXA: #abd9e9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ccdafb5ffd6049f18575ab6e5f7de1db { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 173, 209, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ccdafb5ffd6049f18575ab6e5f7de1db::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ccdafb5ffd6049f18575ab6e5f7de1db:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ccdafb5ffd6049f18575ab6e5f7de1db" class="color" data-tooltip="RGBA: 116, 173, 209, 1.0
   HEXA: #74add1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ffb257cf687e44c08b47fe73bb918c34 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 117, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ffb257cf687e44c08b47fe73bb918c34::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ffb257cf687e44c08b47fe73bb918c34:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ffb257cf687e44c08b47fe73bb918c34" class="color" data-tooltip="RGBA: 69, 117, 180, 1.0
   HEXA: #4575b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e84a71f1f6b64093a5c2bd4a354b6478 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(49, 54, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e84a71f1f6b64093a5c2bd4a354b6478::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e84a71f1f6b64093a5c2bd4a354b6478:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e84a71f1f6b64093a5c2bd4a354b6478" class="color" data-tooltip="RGBA: 49, 54, 149, 1.0
   HEXA: #313695ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a8f104bdc5fe4171a1e4d219150a484d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a8f104bdc5fe4171a1e4d219150a484d div { flex: 1 1 0; }
           #_a8f104bdc5fe4171a1e4d219150a484d div.color { width: 100%; height: 100%; }
           #_a8f104bdc5fe4171a1e4d219150a484d div.cmap { width: 100%; height: auto; }
           #_a8f104bdc5fe4171a1e4d219150a484d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>rdylgn</strong>
       
       <div id="_a8f104bdc5fe4171a1e4d219150a484d" class="color-map">
           
                           <div>
                   <style>
       #_992f534f8fea4ac1a4ee5e328e738049 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_992f534f8fea4ac1a4ee5e328e738049::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_992f534f8fea4ac1a4ee5e328e738049:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_992f534f8fea4ac1a4ee5e328e738049" class="color" data-tooltip="RGBA: 165, 0, 38, 1.0
   HEXA: #a50026ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3429e79244a149d688787ced4c86e484 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 48, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3429e79244a149d688787ced4c86e484::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3429e79244a149d688787ced4c86e484:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3429e79244a149d688787ced4c86e484" class="color" data-tooltip="RGBA: 215, 48, 39, 1.0
   HEXA: #d73027ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf2fca9a032f4394958ad6de195d12da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 109, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf2fca9a032f4394958ad6de195d12da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf2fca9a032f4394958ad6de195d12da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf2fca9a032f4394958ad6de195d12da" class="color" data-tooltip="RGBA: 244, 109, 67, 1.0
   HEXA: #f46d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4421db478684c5da7bf0a109b826e34 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4421db478684c5da7bf0a109b826e34::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4421db478684c5da7bf0a109b826e34:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4421db478684c5da7bf0a109b826e34" class="color" data-tooltip="RGBA: 253, 174, 97, 1.0
   HEXA: #fdae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0fd5f41d6d18491e9a466304f3ddbfd2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0fd5f41d6d18491e9a466304f3ddbfd2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0fd5f41d6d18491e9a466304f3ddbfd2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0fd5f41d6d18491e9a466304f3ddbfd2" class="color" data-tooltip="RGBA: 254, 224, 139, 1.0
   HEXA: #fee08bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f047906686a94686bad9d43af53cfd75 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f047906686a94686bad9d43af53cfd75::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f047906686a94686bad9d43af53cfd75:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f047906686a94686bad9d43af53cfd75" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4030d58bc78f456cb6ccc87638ccd3e7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 239, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4030d58bc78f456cb6ccc87638ccd3e7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4030d58bc78f456cb6ccc87638ccd3e7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4030d58bc78f456cb6ccc87638ccd3e7" class="color" data-tooltip="RGBA: 217, 239, 139, 1.0
   HEXA: #d9ef8bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_965230dc010e4b6696f1a9cd780cc57c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 217, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_965230dc010e4b6696f1a9cd780cc57c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_965230dc010e4b6696f1a9cd780cc57c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_965230dc010e4b6696f1a9cd780cc57c" class="color" data-tooltip="RGBA: 166, 217, 106, 1.0
   HEXA: #a6d96aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_680ccdcabb8a47ab8642c9e28da9d304 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 189, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_680ccdcabb8a47ab8642c9e28da9d304::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_680ccdcabb8a47ab8642c9e28da9d304:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_680ccdcabb8a47ab8642c9e28da9d304" class="color" data-tooltip="RGBA: 102, 189, 99, 1.0
   HEXA: #66bd63ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a8b6c2af69704dfdae18ada21e96745b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 152, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8b6c2af69704dfdae18ada21e96745b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8b6c2af69704dfdae18ada21e96745b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8b6c2af69704dfdae18ada21e96745b" class="color" data-tooltip="RGBA: 26, 152, 80, 1.0
   HEXA: #1a9850ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b73f1283604d4986b6efcd81c717ab9b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 104, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b73f1283604d4986b6efcd81c717ab9b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b73f1283604d4986b6efcd81c717ab9b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b73f1283604d4986b6efcd81c717ab9b" class="color" data-tooltip="RGBA: 0, 104, 55, 1.0
   HEXA: #006837ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5ca024c8991f43d79eb4324cc2b7e6d2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5ca024c8991f43d79eb4324cc2b7e6d2 div { flex: 1 1 0; }
           #_5ca024c8991f43d79eb4324cc2b7e6d2 div.color { width: 100%; height: 100%; }
           #_5ca024c8991f43d79eb4324cc2b7e6d2 div.cmap { width: 100%; height: auto; }
           #_5ca024c8991f43d79eb4324cc2b7e6d2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>spectral</strong>
       
       <div id="_5ca024c8991f43d79eb4324cc2b7e6d2" class="color-map">
           
                           <div>
                   <style>
       #_52c09c65fbbd4599a327370a2a4e44ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 1, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_52c09c65fbbd4599a327370a2a4e44ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_52c09c65fbbd4599a327370a2a4e44ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_52c09c65fbbd4599a327370a2a4e44ab" class="color" data-tooltip="RGBA: 158, 1, 66, 1.0
   HEXA: #9e0142ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63813236421b4b928e4e19554e44d2a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 62, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63813236421b4b928e4e19554e44d2a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63813236421b4b928e4e19554e44d2a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63813236421b4b928e4e19554e44d2a3" class="color" data-tooltip="RGBA: 213, 62, 79, 1.0
   HEXA: #d53e4fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_906b4efe46d94e8da0994574176741b2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 109, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_906b4efe46d94e8da0994574176741b2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_906b4efe46d94e8da0994574176741b2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_906b4efe46d94e8da0994574176741b2" class="color" data-tooltip="RGBA: 244, 109, 67, 1.0
   HEXA: #f46d43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b2f09cbc4d3431c9159d5f946a861d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b2f09cbc4d3431c9159d5f946a861d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b2f09cbc4d3431c9159d5f946a861d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b2f09cbc4d3431c9159d5f946a861d1" class="color" data-tooltip="RGBA: 253, 174, 97, 1.0
   HEXA: #fdae61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cecdd976715d44eea7bedf647c249052 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cecdd976715d44eea7bedf647c249052::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cecdd976715d44eea7bedf647c249052:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cecdd976715d44eea7bedf647c249052" class="color" data-tooltip="RGBA: 254, 224, 139, 1.0
   HEXA: #fee08bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_55e0ed32b89e414a8d529de5ee4f1407 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_55e0ed32b89e414a8d529de5ee4f1407::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_55e0ed32b89e414a8d529de5ee4f1407:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_55e0ed32b89e414a8d529de5ee4f1407" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57e91619709d44a8b8369773accd058b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 245, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57e91619709d44a8b8369773accd058b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57e91619709d44a8b8369773accd058b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57e91619709d44a8b8369773accd058b" class="color" data-tooltip="RGBA: 230, 245, 152, 1.0
   HEXA: #e6f598ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ca45a7a3edb14f7fa36c570efadec038 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 221, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ca45a7a3edb14f7fa36c570efadec038::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ca45a7a3edb14f7fa36c570efadec038:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ca45a7a3edb14f7fa36c570efadec038" class="color" data-tooltip="RGBA: 171, 221, 164, 1.0
   HEXA: #abdda4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_74cb50e2b08646e88d0443cea88cc707 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 194, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_74cb50e2b08646e88d0443cea88cc707::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_74cb50e2b08646e88d0443cea88cc707:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_74cb50e2b08646e88d0443cea88cc707" class="color" data-tooltip="RGBA: 102, 194, 165, 1.0
   HEXA: #66c2a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7b2b8ae00b9b490989dd6ba8c371dba2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 136, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7b2b8ae00b9b490989dd6ba8c371dba2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7b2b8ae00b9b490989dd6ba8c371dba2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7b2b8ae00b9b490989dd6ba8c371dba2" class="color" data-tooltip="RGBA: 50, 136, 189, 1.0
   HEXA: #3288bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_54c1a9f8af23476dbc8720afb0b33031 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 79, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_54c1a9f8af23476dbc8720afb0b33031::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_54c1a9f8af23476dbc8720afb0b33031:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_54c1a9f8af23476dbc8720afb0b33031" class="color" data-tooltip="RGBA: 94, 79, 162, 1.0
   HEXA: #5e4fa2ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_64818f5835644d1aaa0eed9769e74732 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_64818f5835644d1aaa0eed9769e74732 div { flex: 1 1 0; }
           #_64818f5835644d1aaa0eed9769e74732 div.color { width: 100%; height: 100%; }
           #_64818f5835644d1aaa0eed9769e74732 div.cmap { width: 100%; height: auto; }
           #_64818f5835644d1aaa0eed9769e74732 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bluedarkorange12</strong>
       
       <div id="_64818f5835644d1aaa0eed9769e74732" class="color-map">
           
                           <div>
                   <style>
       #_4c4c29b2efd94740b57b739fff9c85f3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(30, 142, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c4c29b2efd94740b57b739fff9c85f3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c4c29b2efd94740b57b739fff9c85f3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c4c29b2efd94740b57b739fff9c85f3" class="color" data-tooltip="RGBA: 30, 142, 153, 1.0
   HEXA: #1e8e99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_03c7df4a0d9742f5a20911cf4917cb4d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(81, 195, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_03c7df4a0d9742f5a20911cf4917cb4d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_03c7df4a0d9742f5a20911cf4917cb4d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_03c7df4a0d9742f5a20911cf4917cb4d" class="color" data-tooltip="RGBA: 81, 195, 204, 1.0
   HEXA: #51c3ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f6a29e29a5d14160bd92418b51421eda { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 249, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f6a29e29a5d14160bd92418b51421eda::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f6a29e29a5d14160bd92418b51421eda:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f6a29e29a5d14160bd92418b51421eda" class="color" data-tooltip="RGBA: 153, 249, 255, 1.0
   HEXA: #99f9ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53f8f3fd6a484daf93cba794c8e61b63 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 252, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53f8f3fd6a484daf93cba794c8e61b63::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53f8f3fd6a484daf93cba794c8e61b63:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53f8f3fd6a484daf93cba794c8e61b63" class="color" data-tooltip="RGBA: 178, 252, 255, 1.0
   HEXA: #b2fcffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_29815a5bd38841bea85511723fde8082 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 254, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_29815a5bd38841bea85511723fde8082::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_29815a5bd38841bea85511723fde8082:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_29815a5bd38841bea85511723fde8082" class="color" data-tooltip="RGBA: 204, 254, 255, 1.0
   HEXA: #ccfeffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2678da3e19914e5a83619ce8e4915061 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2678da3e19914e5a83619ce8e4915061::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2678da3e19914e5a83619ce8e4915061:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2678da3e19914e5a83619ce8e4915061" class="color" data-tooltip="RGBA: 229, 255, 255, 1.0
   HEXA: #e5ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8aaef557cb154f99992344e5db246d56 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 229, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8aaef557cb154f99992344e5db246d56::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8aaef557cb154f99992344e5db246d56:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8aaef557cb154f99992344e5db246d56" class="color" data-tooltip="RGBA: 255, 229, 204, 1.0
   HEXA: #ffe5ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1150712590f041f09fe976a8710b7318 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 202, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1150712590f041f09fe976a8710b7318::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1150712590f041f09fe976a8710b7318:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1150712590f041f09fe976a8710b7318" class="color" data-tooltip="RGBA: 255, 202, 153, 1.0
   HEXA: #ffca99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1bd600418c6f4cb2b9c7399447040691 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 173, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1bd600418c6f4cb2b9c7399447040691::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1bd600418c6f4cb2b9c7399447040691:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1bd600418c6f4cb2b9c7399447040691" class="color" data-tooltip="RGBA: 255, 173, 101, 1.0
   HEXA: #ffad65ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9df86ee20c64ce3a608a90e82c4dd68 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 142, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9df86ee20c64ce3a608a90e82c4dd68::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9df86ee20c64ce3a608a90e82c4dd68:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9df86ee20c64ce3a608a90e82c4dd68" class="color" data-tooltip="RGBA: 255, 142, 50, 1.0
   HEXA: #ff8e32ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_230a19a4c7e34fb58eb960ca1b491e6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 88, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_230a19a4c7e34fb58eb960ca1b491e6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_230a19a4c7e34fb58eb960ca1b491e6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_230a19a4c7e34fb58eb960ca1b491e6c" class="color" data-tooltip="RGBA: 204, 88, 0, 1.0
   HEXA: #cc5800ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_902e3d38c3754694aa2d53e365c0b05f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 63, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_902e3d38c3754694aa2d53e365c0b05f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_902e3d38c3754694aa2d53e365c0b05f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_902e3d38c3754694aa2d53e365c0b05f" class="color" data-tooltip="RGBA: 153, 63, 0, 1.0
   HEXA: #993f00ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_e7e12a5a5d8949c8b1fc9138094b4f36 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_e7e12a5a5d8949c8b1fc9138094b4f36 div { flex: 1 1 0; }
           #_e7e12a5a5d8949c8b1fc9138094b4f36 div.color { width: 100%; height: 100%; }
           #_e7e12a5a5d8949c8b1fc9138094b4f36 div.cmap { width: 100%; height: auto; }
           #_e7e12a5a5d8949c8b1fc9138094b4f36 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bluedarkorange18</strong>
       
       <div id="_e7e12a5a5d8949c8b1fc9138094b4f36" class="color-map">
           
                           <div>
                   <style>
       #_090fa25f1700400baf2bddbd10cb1a91 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_090fa25f1700400baf2bddbd10cb1a91::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_090fa25f1700400baf2bddbd10cb1a91:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_090fa25f1700400baf2bddbd10cb1a91" class="color" data-tooltip="RGBA: 0, 102, 102, 1.0
   HEXA: #006666ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b5828275e6f487a9ae4d08f7fb3003c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 153, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b5828275e6f487a9ae4d08f7fb3003c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b5828275e6f487a9ae4d08f7fb3003c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b5828275e6f487a9ae4d08f7fb3003c" class="color" data-tooltip="RGBA: 0, 153, 153, 1.0
   HEXA: #009999ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_184ba9f8aa5345eebea2410aa506e21d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 204, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_184ba9f8aa5345eebea2410aa506e21d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_184ba9f8aa5345eebea2410aa506e21d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_184ba9f8aa5345eebea2410aa506e21d" class="color" data-tooltip="RGBA: 0, 204, 204, 1.0
   HEXA: #00ccccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5e061d1e6c3d44e6b0e1e21c3d001bbc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5e061d1e6c3d44e6b0e1e21c3d001bbc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5e061d1e6c3d44e6b0e1e21c3d001bbc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5e061d1e6c3d44e6b0e1e21c3d001bbc" class="color" data-tooltip="RGBA: 0, 255, 255, 1.0
   HEXA: #00ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_42b85fea087b4cedab1875700899e61d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_42b85fea087b4cedab1875700899e61d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_42b85fea087b4cedab1875700899e61d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_42b85fea087b4cedab1875700899e61d" class="color" data-tooltip="RGBA: 51, 255, 255, 1.0
   HEXA: #33ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9c2676f4792a4d1e9ddec47d8c6edd3a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9c2676f4792a4d1e9ddec47d8c6edd3a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9c2676f4792a4d1e9ddec47d8c6edd3a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9c2676f4792a4d1e9ddec47d8c6edd3a" class="color" data-tooltip="RGBA: 101, 255, 255, 1.0
   HEXA: #65ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dc4270ce217d44dab77c5070e819aadc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dc4270ce217d44dab77c5070e819aadc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dc4270ce217d44dab77c5070e819aadc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dc4270ce217d44dab77c5070e819aadc" class="color" data-tooltip="RGBA: 153, 255, 255, 1.0
   HEXA: #99ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68fe0b89d2b742c4a9fcfae877418aac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68fe0b89d2b742c4a9fcfae877418aac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68fe0b89d2b742c4a9fcfae877418aac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68fe0b89d2b742c4a9fcfae877418aac" class="color" data-tooltip="RGBA: 178, 255, 255, 1.0
   HEXA: #b2ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_049291fbdb014a49a7e9e8b7da64ecb9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_049291fbdb014a49a7e9e8b7da64ecb9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_049291fbdb014a49a7e9e8b7da64ecb9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_049291fbdb014a49a7e9e8b7da64ecb9" class="color" data-tooltip="RGBA: 203, 255, 255, 1.0
   HEXA: #cbffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_80ec0653b1554f238fb4beb48388b254 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_80ec0653b1554f238fb4beb48388b254::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_80ec0653b1554f238fb4beb48388b254:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_80ec0653b1554f238fb4beb48388b254" class="color" data-tooltip="RGBA: 229, 255, 255, 1.0
   HEXA: #e5ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34e340ea7a534250bc46b9fcaef68006 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 229, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34e340ea7a534250bc46b9fcaef68006::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34e340ea7a534250bc46b9fcaef68006:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34e340ea7a534250bc46b9fcaef68006" class="color" data-tooltip="RGBA: 255, 229, 203, 1.0
   HEXA: #ffe5cbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_59e491f35e4c49b296d7ba5d47b2369e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 202, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_59e491f35e4c49b296d7ba5d47b2369e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_59e491f35e4c49b296d7ba5d47b2369e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_59e491f35e4c49b296d7ba5d47b2369e" class="color" data-tooltip="RGBA: 255, 202, 153, 1.0
   HEXA: #ffca99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_326a16dcd11648b58669ecbce4b59531 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 173, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_326a16dcd11648b58669ecbce4b59531::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_326a16dcd11648b58669ecbce4b59531:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_326a16dcd11648b58669ecbce4b59531" class="color" data-tooltip="RGBA: 255, 173, 101, 1.0
   HEXA: #ffad65ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3c759f5150ce4a2b81da819b0d88f41b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 142, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c759f5150ce4a2b81da819b0d88f41b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c759f5150ce4a2b81da819b0d88f41b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c759f5150ce4a2b81da819b0d88f41b" class="color" data-tooltip="RGBA: 255, 142, 51, 1.0
   HEXA: #ff8e33ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_edf81f7aa380426c9a18249ef604e29b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 110, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_edf81f7aa380426c9a18249ef604e29b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_edf81f7aa380426c9a18249ef604e29b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_edf81f7aa380426c9a18249ef604e29b" class="color" data-tooltip="RGBA: 255, 110, 0, 1.0
   HEXA: #ff6e00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1eb4ef99ec884e62a240c605060f783b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 85, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1eb4ef99ec884e62a240c605060f783b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1eb4ef99ec884e62a240c605060f783b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1eb4ef99ec884e62a240c605060f783b" class="color" data-tooltip="RGBA: 204, 85, 0, 1.0
   HEXA: #cc5500ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_716a8b10e33a4db29d1f4dac920844fa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 61, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_716a8b10e33a4db29d1f4dac920844fa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_716a8b10e33a4db29d1f4dac920844fa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_716a8b10e33a4db29d1f4dac920844fa" class="color" data-tooltip="RGBA: 153, 61, 0, 1.0
   HEXA: #993d00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8136e094912045f29dac4a354f421f47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 39, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8136e094912045f29dac4a354f421f47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8136e094912045f29dac4a354f421f47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8136e094912045f29dac4a354f421f47" class="color" data-tooltip="RGBA: 102, 39, 0, 1.0
   HEXA: #662700ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a077529ac2e049ce999ff96dcefab2ce {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a077529ac2e049ce999ff96dcefab2ce div { flex: 1 1 0; }
           #_a077529ac2e049ce999ff96dcefab2ce div.color { width: 100%; height: 100%; }
           #_a077529ac2e049ce999ff96dcefab2ce div.cmap { width: 100%; height: auto; }
           #_a077529ac2e049ce999ff96dcefab2ce div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bluedarkred12</strong>
       
       <div id="_a077529ac2e049ce999ff96dcefab2ce" class="color-map">
           
                           <div>
                   <style>
       #_06d36e51bd86464194e7d1566571e1b9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 10, 216, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_06d36e51bd86464194e7d1566571e1b9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_06d36e51bd86464194e7d1566571e1b9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_06d36e51bd86464194e7d1566571e1b9" class="color" data-tooltip="RGBA: 41, 10, 216, 1.0
   HEXA: #290ad8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_380d7c51e9da4d148c2a1811fdff4485 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 77, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_380d7c51e9da4d148c2a1811fdff4485::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_380d7c51e9da4d148c2a1811fdff4485:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_380d7c51e9da4d148c2a1811fdff4485" class="color" data-tooltip="RGBA: 38, 77, 255, 1.0
   HEXA: #264dffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_56ed73a8cc9c48ae920eb11b4277f82d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 160, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_56ed73a8cc9c48ae920eb11b4277f82d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_56ed73a8cc9c48ae920eb11b4277f82d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_56ed73a8cc9c48ae920eb11b4277f82d" class="color" data-tooltip="RGBA: 63, 160, 255, 1.0
   HEXA: #3fa0ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c3a2e5cde2842f69877bf75b0bfc0a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 217, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c3a2e5cde2842f69877bf75b0bfc0a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c3a2e5cde2842f69877bf75b0bfc0a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c3a2e5cde2842f69877bf75b0bfc0a0" class="color" data-tooltip="RGBA: 114, 217, 255, 1.0
   HEXA: #72d9ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_97525ad9c38643c3a3a2605a120a358f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 247, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_97525ad9c38643c3a3a2605a120a358f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_97525ad9c38643c3a3a2605a120a358f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_97525ad9c38643c3a3a2605a120a358f" class="color" data-tooltip="RGBA: 170, 247, 255, 1.0
   HEXA: #aaf7ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2261eb203cc54ac38f9abd1db6139121 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2261eb203cc54ac38f9abd1db6139121::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2261eb203cc54ac38f9abd1db6139121:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2261eb203cc54ac38f9abd1db6139121" class="color" data-tooltip="RGBA: 224, 255, 255, 1.0
   HEXA: #e0ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1c9625a0387844989242ea938e34d5f0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1c9625a0387844989242ea938e34d5f0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1c9625a0387844989242ea938e34d5f0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1c9625a0387844989242ea938e34d5f0" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_514f02d02ab94296a375ee6f5170b8c4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 224, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_514f02d02ab94296a375ee6f5170b8c4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_514f02d02ab94296a375ee6f5170b8c4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_514f02d02ab94296a375ee6f5170b8c4" class="color" data-tooltip="RGBA: 255, 224, 153, 1.0
   HEXA: #ffe099ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_489dfc5c44cb40c5a28fa33322f07c04 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 173, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_489dfc5c44cb40c5a28fa33322f07c04::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_489dfc5c44cb40c5a28fa33322f07c04:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_489dfc5c44cb40c5a28fa33322f07c04" class="color" data-tooltip="RGBA: 255, 173, 114, 1.0
   HEXA: #ffad72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c74f00beaf1546878c35e7f2dd42d923 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 109, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c74f00beaf1546878c35e7f2dd42d923::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c74f00beaf1546878c35e7f2dd42d923:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c74f00beaf1546878c35e7f2dd42d923" class="color" data-tooltip="RGBA: 247, 109, 94, 1.0
   HEXA: #f76d5eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_594f52dbad9041a48db5a7845a5290fb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 38, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_594f52dbad9041a48db5a7845a5290fb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_594f52dbad9041a48db5a7845a5290fb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_594f52dbad9041a48db5a7845a5290fb" class="color" data-tooltip="RGBA: 216, 38, 50, 1.0
   HEXA: #d82632ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a127ddb9ac2c49b0b4ee65204509f034 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 0, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a127ddb9ac2c49b0b4ee65204509f034::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a127ddb9ac2c49b0b4ee65204509f034:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a127ddb9ac2c49b0b4ee65204509f034" class="color" data-tooltip="RGBA: 165, 0, 33, 1.0
   HEXA: #a50021ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2952bd3b056f4e1a823e1f96ecb528d1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2952bd3b056f4e1a823e1f96ecb528d1 div { flex: 1 1 0; }
           #_2952bd3b056f4e1a823e1f96ecb528d1 div.color { width: 100%; height: 100%; }
           #_2952bd3b056f4e1a823e1f96ecb528d1 div.cmap { width: 100%; height: auto; }
           #_2952bd3b056f4e1a823e1f96ecb528d1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bluedarkred18</strong>
       
       <div id="_2952bd3b056f4e1a823e1f96ecb528d1" class="color-map">
           
                           <div>
                   <style>
       #_be93b2f9a2794dd08b1338b96beb022d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 0, 216, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be93b2f9a2794dd08b1338b96beb022d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be93b2f9a2794dd08b1338b96beb022d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be93b2f9a2794dd08b1338b96beb022d" class="color" data-tooltip="RGBA: 36, 0, 216, 1.0
   HEXA: #2400d8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2469dc900db344a8994c541c6489011e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(24, 28, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2469dc900db344a8994c541c6489011e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2469dc900db344a8994c541c6489011e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2469dc900db344a8994c541c6489011e" class="color" data-tooltip="RGBA: 24, 28, 247, 1.0
   HEXA: #181cf7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_058ca31c2a9e4ba6920dfc56a3d3f59e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 87, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_058ca31c2a9e4ba6920dfc56a3d3f59e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_058ca31c2a9e4ba6920dfc56a3d3f59e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_058ca31c2a9e4ba6920dfc56a3d3f59e" class="color" data-tooltip="RGBA: 40, 87, 255, 1.0
   HEXA: #2857ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7f96328ae4524c408141b8aaa003eaa7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(61, 135, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7f96328ae4524c408141b8aaa003eaa7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7f96328ae4524c408141b8aaa003eaa7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7f96328ae4524c408141b8aaa003eaa7" class="color" data-tooltip="RGBA: 61, 135, 255, 1.0
   HEXA: #3d87ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_81880ee84697496e939d3997b93c5a49 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(86, 176, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_81880ee84697496e939d3997b93c5a49::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_81880ee84697496e939d3997b93c5a49:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_81880ee84697496e939d3997b93c5a49" class="color" data-tooltip="RGBA: 86, 176, 255, 1.0
   HEXA: #56b0ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eda08c1ac13746b3b67141ed8fac465e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 211, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eda08c1ac13746b3b67141ed8fac465e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eda08c1ac13746b3b67141ed8fac465e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eda08c1ac13746b3b67141ed8fac465e" class="color" data-tooltip="RGBA: 117, 211, 255, 1.0
   HEXA: #75d3ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c26e6f0552740f5949670a3efd77fc9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 234, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c26e6f0552740f5949670a3efd77fc9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c26e6f0552740f5949670a3efd77fc9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c26e6f0552740f5949670a3efd77fc9" class="color" data-tooltip="RGBA: 153, 234, 255, 1.0
   HEXA: #99eaffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_512eed511a184784beb33c43835c662c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 249, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_512eed511a184784beb33c43835c662c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_512eed511a184784beb33c43835c662c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_512eed511a184784beb33c43835c662c" class="color" data-tooltip="RGBA: 188, 249, 255, 1.0
   HEXA: #bcf9ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4e0f2057e6a3401d984643c4149a776d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4e0f2057e6a3401d984643c4149a776d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4e0f2057e6a3401d984643c4149a776d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4e0f2057e6a3401d984643c4149a776d" class="color" data-tooltip="RGBA: 234, 255, 255, 1.0
   HEXA: #eaffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_485536ff94a048fbaf2f4727568ed165 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 234, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_485536ff94a048fbaf2f4727568ed165::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_485536ff94a048fbaf2f4727568ed165:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_485536ff94a048fbaf2f4727568ed165" class="color" data-tooltip="RGBA: 255, 255, 234, 1.0
   HEXA: #ffffeaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_773941c4b3bc418c91ae3f156d718014 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 241, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_773941c4b3bc418c91ae3f156d718014::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_773941c4b3bc418c91ae3f156d718014:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_773941c4b3bc418c91ae3f156d718014" class="color" data-tooltip="RGBA: 255, 241, 188, 1.0
   HEXA: #fff1bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e54b7be3521542ba8e95f555efecbc7c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 214, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e54b7be3521542ba8e95f555efecbc7c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e54b7be3521542ba8e95f555efecbc7c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e54b7be3521542ba8e95f555efecbc7c" class="color" data-tooltip="RGBA: 255, 214, 153, 1.0
   HEXA: #ffd699ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c2a2e25a274d42869dae9a109a1daddd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 172, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c2a2e25a274d42869dae9a109a1daddd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c2a2e25a274d42869dae9a109a1daddd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c2a2e25a274d42869dae9a109a1daddd" class="color" data-tooltip="RGBA: 255, 172, 117, 1.0
   HEXA: #ffac75ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68a037a28c05455788a99f43f6676769 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 120, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68a037a28c05455788a99f43f6676769::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68a037a28c05455788a99f43f6676769:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68a037a28c05455788a99f43f6676769" class="color" data-tooltip="RGBA: 255, 120, 86, 1.0
   HEXA: #ff7856ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b5c4dc6516db4bf684ca2b3098184fc0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 61, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b5c4dc6516db4bf684ca2b3098184fc0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b5c4dc6516db4bf684ca2b3098184fc0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b5c4dc6516db4bf684ca2b3098184fc0" class="color" data-tooltip="RGBA: 255, 61, 61, 1.0
   HEXA: #ff3d3dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4e98428a85434c518a991182b044b1ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 39, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4e98428a85434c518a991182b044b1ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4e98428a85434c518a991182b044b1ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4e98428a85434c518a991182b044b1ee" class="color" data-tooltip="RGBA: 247, 39, 53, 1.0
   HEXA: #f72735ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c6614554982b4f8489df368f66ee5eea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 21, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c6614554982b4f8489df368f66ee5eea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c6614554982b4f8489df368f66ee5eea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c6614554982b4f8489df368f66ee5eea" class="color" data-tooltip="RGBA: 216, 21, 47, 1.0
   HEXA: #d8152fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_69a97507279548179135a820101650d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 0, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_69a97507279548179135a820101650d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_69a97507279548179135a820101650d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_69a97507279548179135a820101650d1" class="color" data-tooltip="RGBA: 165, 0, 33, 1.0
   HEXA: #a50021ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_76eb43e80a984ad4b0bc2033d0e2f1fb {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_76eb43e80a984ad4b0bc2033d0e2f1fb div { flex: 1 1 0; }
           #_76eb43e80a984ad4b0bc2033d0e2f1fb div.color { width: 100%; height: 100%; }
           #_76eb43e80a984ad4b0bc2033d0e2f1fb div.cmap { width: 100%; height: auto; }
           #_76eb43e80a984ad4b0bc2033d0e2f1fb div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bluegray</strong>
       
       <div id="_76eb43e80a984ad4b0bc2033d0e2f1fb" class="color-map">
           
                           <div>
                   <style>
       #_be118f18f8bc4cc4a61a0829f4a473f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 153, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be118f18f8bc4cc4a61a0829f4a473f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be118f18f8bc4cc4a61a0829f4a473f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be118f18f8bc4cc4a61a0829f4a473f1" class="color" data-tooltip="RGBA: 0, 153, 204, 1.0
   HEXA: #0099ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_065c1400657b43f68c7ee57aa96cd085 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 229, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_065c1400657b43f68c7ee57aa96cd085::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_065c1400657b43f68c7ee57aa96cd085:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_065c1400657b43f68c7ee57aa96cd085" class="color" data-tooltip="RGBA: 102, 229, 255, 1.0
   HEXA: #66e5ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4abeeab1e90c456fba61621933371a0d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4abeeab1e90c456fba61621933371a0d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4abeeab1e90c456fba61621933371a0d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4abeeab1e90c456fba61621933371a0d" class="color" data-tooltip="RGBA: 153, 255, 255, 1.0
   HEXA: #99ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_919fd66f7bc14e2b88bfcbace899247e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_919fd66f7bc14e2b88bfcbace899247e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_919fd66f7bc14e2b88bfcbace899247e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_919fd66f7bc14e2b88bfcbace899247e" class="color" data-tooltip="RGBA: 204, 255, 255, 1.0
   HEXA: #ccffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1bef36d2e12846ddb5d0d0b43b181b0c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 229, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1bef36d2e12846ddb5d0d0b43b181b0c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1bef36d2e12846ddb5d0d0b43b181b0c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1bef36d2e12846ddb5d0d0b43b181b0c" class="color" data-tooltip="RGBA: 229, 229, 229, 1.0
   HEXA: #e5e5e5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ffbf40b432345758253101e13aac899 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 153, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ffbf40b432345758253101e13aac899::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ffbf40b432345758253101e13aac899:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ffbf40b432345758253101e13aac899" class="color" data-tooltip="RGBA: 153, 153, 153, 1.0
   HEXA: #999999ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9fc72c78efd9438f89b3d0acca5f964a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9fc72c78efd9438f89b3d0acca5f964a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9fc72c78efd9438f89b3d0acca5f964a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9fc72c78efd9438f89b3d0acca5f964a" class="color" data-tooltip="RGBA: 102, 102, 102, 1.0
   HEXA: #666666ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_651b8e11302c48d1a1f65bffe71a326f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 51, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_651b8e11302c48d1a1f65bffe71a326f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_651b8e11302c48d1a1f65bffe71a326f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_651b8e11302c48d1a1f65bffe71a326f" class="color" data-tooltip="RGBA: 51, 51, 51, 1.0
   HEXA: #333333ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2b440d0f8d904c79962123b1a339f815 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2b440d0f8d904c79962123b1a339f815 div { flex: 1 1 0; }
           #_2b440d0f8d904c79962123b1a339f815 div.color { width: 100%; height: 100%; }
           #_2b440d0f8d904c79962123b1a339f815 div.cmap { width: 100%; height: auto; }
           #_2b440d0f8d904c79962123b1a339f815 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bluegreen</strong>
       
       <div id="_2b440d0f8d904c79962123b1a339f815" class="color-map">
           
                           <div>
                   <style>
       #_6de4511862e84b54b3f1d7249b222d21 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6de4511862e84b54b3f1d7249b222d21::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6de4511862e84b54b3f1d7249b222d21:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6de4511862e84b54b3f1d7249b222d21" class="color" data-tooltip="RGBA: 0, 0, 255, 1.0
   HEXA: #0000ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34cc6eaf097148ad85ad67d7974fc2cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 51, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34cc6eaf097148ad85ad67d7974fc2cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34cc6eaf097148ad85ad67d7974fc2cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34cc6eaf097148ad85ad67d7974fc2cf" class="color" data-tooltip="RGBA: 51, 51, 255, 1.0
   HEXA: #3333ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_393cf07735f644f09fe63fdc6c69dc47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 101, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_393cf07735f644f09fe63fdc6c69dc47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_393cf07735f644f09fe63fdc6c69dc47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_393cf07735f644f09fe63fdc6c69dc47" class="color" data-tooltip="RGBA: 101, 101, 255, 1.0
   HEXA: #6565ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e60877b6a46c44f881813e9773202e8c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 153, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e60877b6a46c44f881813e9773202e8c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e60877b6a46c44f881813e9773202e8c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e60877b6a46c44f881813e9773202e8c" class="color" data-tooltip="RGBA: 153, 153, 255, 1.0
   HEXA: #9999ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c47bb5fd74d8438da0a4f33dce1e0151 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 178, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c47bb5fd74d8438da0a4f33dce1e0151::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c47bb5fd74d8438da0a4f33dce1e0151:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c47bb5fd74d8438da0a4f33dce1e0151" class="color" data-tooltip="RGBA: 178, 178, 255, 1.0
   HEXA: #b2b2ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_61b7355376a34d98ab8539efee3f4cb4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 203, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61b7355376a34d98ab8539efee3f4cb4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61b7355376a34d98ab8539efee3f4cb4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61b7355376a34d98ab8539efee3f4cb4" class="color" data-tooltip="RGBA: 203, 203, 255, 1.0
   HEXA: #cbcbffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8bc95a2958da424384558a1e93e34f6d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 229, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8bc95a2958da424384558a1e93e34f6d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8bc95a2958da424384558a1e93e34f6d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8bc95a2958da424384558a1e93e34f6d" class="color" data-tooltip="RGBA: 229, 229, 255, 1.0
   HEXA: #e5e5ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5dc9e6e43e354211a33589784db1dbdd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 255, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5dc9e6e43e354211a33589784db1dbdd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5dc9e6e43e354211a33589784db1dbdd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5dc9e6e43e354211a33589784db1dbdd" class="color" data-tooltip="RGBA: 229, 255, 229, 1.0
   HEXA: #e5ffe5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_abcf43e256b64ac597411e50ddf2d502 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 255, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_abcf43e256b64ac597411e50ddf2d502::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_abcf43e256b64ac597411e50ddf2d502:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_abcf43e256b64ac597411e50ddf2d502" class="color" data-tooltip="RGBA: 203, 255, 203, 1.0
   HEXA: #cbffcbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e584a3e6056e4168beb4abeafb6a771e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 255, 178, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e584a3e6056e4168beb4abeafb6a771e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e584a3e6056e4168beb4abeafb6a771e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e584a3e6056e4168beb4abeafb6a771e" class="color" data-tooltip="RGBA: 178, 255, 178, 1.0
   HEXA: #b2ffb2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8126e6edac0743178d6e7bf5ab43d05d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 255, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8126e6edac0743178d6e7bf5ab43d05d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8126e6edac0743178d6e7bf5ab43d05d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8126e6edac0743178d6e7bf5ab43d05d" class="color" data-tooltip="RGBA: 153, 255, 153, 1.0
   HEXA: #99ff99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_94b21932bfa54c838ca0b0bf0d64de08 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 255, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_94b21932bfa54c838ca0b0bf0d64de08::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_94b21932bfa54c838ca0b0bf0d64de08:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_94b21932bfa54c838ca0b0bf0d64de08" class="color" data-tooltip="RGBA: 101, 255, 101, 1.0
   HEXA: #65ff65ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e5e039494d6d4b2b85215926b4a45a56 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 255, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e5e039494d6d4b2b85215926b4a45a56::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e5e039494d6d4b2b85215926b4a45a56:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e5e039494d6d4b2b85215926b4a45a56" class="color" data-tooltip="RGBA: 51, 255, 51, 1.0
   HEXA: #33ff33ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_baf0622730af4e07880332398d6f6c31 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 255, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_baf0622730af4e07880332398d6f6c31::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_baf0622730af4e07880332398d6f6c31:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_baf0622730af4e07880332398d6f6c31" class="color" data-tooltip="RGBA: 0, 255, 0, 1.0
   HEXA: #00ff00ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9e9fa25fdb0f4506972e6b8b135d2049 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9e9fa25fdb0f4506972e6b8b135d2049 div { flex: 1 1 0; }
           #_9e9fa25fdb0f4506972e6b8b135d2049 div.color { width: 100%; height: 100%; }
           #_9e9fa25fdb0f4506972e6b8b135d2049 div.cmap { width: 100%; height: auto; }
           #_9e9fa25fdb0f4506972e6b8b135d2049 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bluegrey</strong>
       
       <div id="_9e9fa25fdb0f4506972e6b8b135d2049" class="color-map">
           
                           <div>
                   <style>
       #_7e580107f0444466872da32a45912d2c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 153, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7e580107f0444466872da32a45912d2c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7e580107f0444466872da32a45912d2c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7e580107f0444466872da32a45912d2c" class="color" data-tooltip="RGBA: 0, 153, 204, 1.0
   HEXA: #0099ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e5db3cb39c7e45808a682764089e23ed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 229, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e5db3cb39c7e45808a682764089e23ed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e5db3cb39c7e45808a682764089e23ed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e5db3cb39c7e45808a682764089e23ed" class="color" data-tooltip="RGBA: 102, 229, 255, 1.0
   HEXA: #66e5ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_039b6fd535c44d3eafd25aba0cd5c103 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_039b6fd535c44d3eafd25aba0cd5c103::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_039b6fd535c44d3eafd25aba0cd5c103:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_039b6fd535c44d3eafd25aba0cd5c103" class="color" data-tooltip="RGBA: 153, 255, 255, 1.0
   HEXA: #99ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f77bc884e2ee4dda9732ac7547d5c682 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f77bc884e2ee4dda9732ac7547d5c682::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f77bc884e2ee4dda9732ac7547d5c682:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f77bc884e2ee4dda9732ac7547d5c682" class="color" data-tooltip="RGBA: 204, 255, 255, 1.0
   HEXA: #ccffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b3caf44e29b4730a076ab03263e9f37 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 229, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b3caf44e29b4730a076ab03263e9f37::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b3caf44e29b4730a076ab03263e9f37:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b3caf44e29b4730a076ab03263e9f37" class="color" data-tooltip="RGBA: 229, 229, 229, 1.0
   HEXA: #e5e5e5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2729eeac1994788b4179d3b3d503a64 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 153, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2729eeac1994788b4179d3b3d503a64::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2729eeac1994788b4179d3b3d503a64:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2729eeac1994788b4179d3b3d503a64" class="color" data-tooltip="RGBA: 153, 153, 153, 1.0
   HEXA: #999999ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fbd4462a5bc94a58956637abd5ccb92c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fbd4462a5bc94a58956637abd5ccb92c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fbd4462a5bc94a58956637abd5ccb92c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fbd4462a5bc94a58956637abd5ccb92c" class="color" data-tooltip="RGBA: 102, 102, 102, 1.0
   HEXA: #666666ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e545f5f3acb7417f830166480ad32383 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 51, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e545f5f3acb7417f830166480ad32383::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e545f5f3acb7417f830166480ad32383:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e545f5f3acb7417f830166480ad32383" class="color" data-tooltip="RGBA: 51, 51, 51, 1.0
   HEXA: #333333ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2540725243d946cd9d9b56176585c14f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2540725243d946cd9d9b56176585c14f div { flex: 1 1 0; }
           #_2540725243d946cd9d9b56176585c14f div.color { width: 100%; height: 100%; }
           #_2540725243d946cd9d9b56176585c14f div.cmap { width: 100%; height: auto; }
           #_2540725243d946cd9d9b56176585c14f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>blueorange10</strong>
       
       <div id="_2540725243d946cd9d9b56176585c14f" class="color-map">
           
                           <div>
                   <style>
       #_3e054a3119724121b67079eaaf66a8c7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 84, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e054a3119724121b67079eaaf66a8c7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e054a3119724121b67079eaaf66a8c7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e054a3119724121b67079eaaf66a8c7" class="color" data-tooltip="RGBA: 0, 84, 255, 1.0
   HEXA: #0054ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3ff3f7cbecca489183a274350acf2cba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 153, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3ff3f7cbecca489183a274350acf2cba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3ff3f7cbecca489183a274350acf2cba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3ff3f7cbecca489183a274350acf2cba" class="color" data-tooltip="RGBA: 50, 153, 255, 1.0
   HEXA: #3299ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_51f9d7da376c431fa65e1f81f6972034 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 204, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_51f9d7da376c431fa65e1f81f6972034::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_51f9d7da376c431fa65e1f81f6972034:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_51f9d7da376c431fa65e1f81f6972034" class="color" data-tooltip="RGBA: 101, 204, 255, 1.0
   HEXA: #65ccffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_de87df66f2834a1e8a1e7eab71cf0663 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 237, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_de87df66f2834a1e8a1e7eab71cf0663::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_de87df66f2834a1e8a1e7eab71cf0663:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_de87df66f2834a1e8a1e7eab71cf0663" class="color" data-tooltip="RGBA: 153, 237, 255, 1.0
   HEXA: #99edffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_77e204e9eda444598290d4919b61289c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_77e204e9eda444598290d4919b61289c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_77e204e9eda444598290d4919b61289c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_77e204e9eda444598290d4919b61289c" class="color" data-tooltip="RGBA: 204, 255, 255, 1.0
   HEXA: #ccffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a76f9fbcdf8c4234812a25549e17ea5e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a76f9fbcdf8c4234812a25549e17ea5e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a76f9fbcdf8c4234812a25549e17ea5e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a76f9fbcdf8c4234812a25549e17ea5e" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4085109d9b7b44e4b8297d1b53922d66 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 238, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4085109d9b7b44e4b8297d1b53922d66::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4085109d9b7b44e4b8297d1b53922d66:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4085109d9b7b44e4b8297d1b53922d66" class="color" data-tooltip="RGBA: 255, 238, 153, 1.0
   HEXA: #ffee99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_290167ba7dec4614b119db2b8b850dee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 204, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_290167ba7dec4614b119db2b8b850dee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_290167ba7dec4614b119db2b8b850dee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_290167ba7dec4614b119db2b8b850dee" class="color" data-tooltip="RGBA: 255, 204, 101, 1.0
   HEXA: #ffcc65ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a00190c07e244c47bffbf26a36b2bc02 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 153, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a00190c07e244c47bffbf26a36b2bc02::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a00190c07e244c47bffbf26a36b2bc02:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a00190c07e244c47bffbf26a36b2bc02" class="color" data-tooltip="RGBA: 255, 153, 50, 1.0
   HEXA: #ff9932ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_917e94993b534cb091a75dd169c7528d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 85, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_917e94993b534cb091a75dd169c7528d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_917e94993b534cb091a75dd169c7528d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_917e94993b534cb091a75dd169c7528d" class="color" data-tooltip="RGBA: 255, 85, 0, 1.0
   HEXA: #ff5500ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b520e225c8c74d5581de5b9730a9e375 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b520e225c8c74d5581de5b9730a9e375 div { flex: 1 1 0; }
           #_b520e225c8c74d5581de5b9730a9e375 div.color { width: 100%; height: 100%; }
           #_b520e225c8c74d5581de5b9730a9e375 div.cmap { width: 100%; height: auto; }
           #_b520e225c8c74d5581de5b9730a9e375 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>blueorange12</strong>
       
       <div id="_b520e225c8c74d5581de5b9730a9e375" class="color-map">
           
                           <div>
                   <style>
       #_8d76779820654a15a4f0aaec29dcfa70 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 42, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8d76779820654a15a4f0aaec29dcfa70::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8d76779820654a15a4f0aaec29dcfa70:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8d76779820654a15a4f0aaec29dcfa70" class="color" data-tooltip="RGBA: 0, 42, 255, 1.0
   HEXA: #002affff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1785f8ec625a4ed1bd4fe52a3272334b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 101, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1785f8ec625a4ed1bd4fe52a3272334b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1785f8ec625a4ed1bd4fe52a3272334b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1785f8ec625a4ed1bd4fe52a3272334b" class="color" data-tooltip="RGBA: 25, 101, 255, 1.0
   HEXA: #1965ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d48f52bbeaa46f1b3b94dda3fcada11 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 153, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d48f52bbeaa46f1b3b94dda3fcada11::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d48f52bbeaa46f1b3b94dda3fcada11:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d48f52bbeaa46f1b3b94dda3fcada11" class="color" data-tooltip="RGBA: 50, 153, 255, 1.0
   HEXA: #3299ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2fb57fcad63846129ff1b08e9260d72a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 237, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2fb57fcad63846129ff1b08e9260d72a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2fb57fcad63846129ff1b08e9260d72a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2fb57fcad63846129ff1b08e9260d72a" class="color" data-tooltip="RGBA: 153, 237, 255, 1.0
   HEXA: #99edffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d40901613be144cdbb0c84fdbe9c955d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 204, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d40901613be144cdbb0c84fdbe9c955d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d40901613be144cdbb0c84fdbe9c955d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d40901613be144cdbb0c84fdbe9c955d" class="color" data-tooltip="RGBA: 101, 204, 255, 1.0
   HEXA: #65ccffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_500def9728d64cf4b688d335f9eae8d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_500def9728d64cf4b688d335f9eae8d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_500def9728d64cf4b688d335f9eae8d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_500def9728d64cf4b688d335f9eae8d1" class="color" data-tooltip="RGBA: 204, 255, 255, 1.0
   HEXA: #ccffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_969643a4c7a44ff694d924702097a120 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_969643a4c7a44ff694d924702097a120::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_969643a4c7a44ff694d924702097a120:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_969643a4c7a44ff694d924702097a120" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_778e380064a740eea1f14d319da4e4de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 238, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_778e380064a740eea1f14d319da4e4de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_778e380064a740eea1f14d319da4e4de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_778e380064a740eea1f14d319da4e4de" class="color" data-tooltip="RGBA: 255, 238, 153, 1.0
   HEXA: #ffee99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7a517db86b064b36a79caf8e45d89ff5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 204, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7a517db86b064b36a79caf8e45d89ff5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7a517db86b064b36a79caf8e45d89ff5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7a517db86b064b36a79caf8e45d89ff5" class="color" data-tooltip="RGBA: 255, 204, 101, 1.0
   HEXA: #ffcc65ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4aa86d4994f54b1abc470723ab7fe9d5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 153, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4aa86d4994f54b1abc470723ab7fe9d5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4aa86d4994f54b1abc470723ab7fe9d5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4aa86d4994f54b1abc470723ab7fe9d5" class="color" data-tooltip="RGBA: 255, 153, 50, 1.0
   HEXA: #ff9932ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64ee2d23ef3046e9875f12b851e095fc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 102, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64ee2d23ef3046e9875f12b851e095fc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64ee2d23ef3046e9875f12b851e095fc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64ee2d23ef3046e9875f12b851e095fc" class="color" data-tooltip="RGBA: 255, 102, 25, 1.0
   HEXA: #ff6619ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_88cbc86a93204d7e857fabb8498239a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 42, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_88cbc86a93204d7e857fabb8498239a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_88cbc86a93204d7e857fabb8498239a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_88cbc86a93204d7e857fabb8498239a4" class="color" data-tooltip="RGBA: 255, 42, 0, 1.0
   HEXA: #ff2a00ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b8770cd01d0d423eb79a534cbfbec9e9 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b8770cd01d0d423eb79a534cbfbec9e9 div { flex: 1 1 0; }
           #_b8770cd01d0d423eb79a534cbfbec9e9 div.color { width: 100%; height: 100%; }
           #_b8770cd01d0d423eb79a534cbfbec9e9 div.cmap { width: 100%; height: auto; }
           #_b8770cd01d0d423eb79a534cbfbec9e9 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>blueorange8</strong>
       
       <div id="_b8770cd01d0d423eb79a534cbfbec9e9" class="color-map">
           
                           <div>
                   <style>
       #_a326b9a159a74e888342e3d4c358e416 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 127, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a326b9a159a74e888342e3d4c358e416::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a326b9a159a74e888342e3d4c358e416:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a326b9a159a74e888342e3d4c358e416" class="color" data-tooltip="RGBA: 0, 127, 255, 1.0
   HEXA: #007fffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3b2c9d8ef6254a10a1bd5653d88b42dc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 195, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b2c9d8ef6254a10a1bd5653d88b42dc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b2c9d8ef6254a10a1bd5653d88b42dc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b2c9d8ef6254a10a1bd5653d88b42dc" class="color" data-tooltip="RGBA: 76, 195, 255, 1.0
   HEXA: #4cc3ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_deb468a1824c4d308a76c594cf603fd6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 237, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_deb468a1824c4d308a76c594cf603fd6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_deb468a1824c4d308a76c594cf603fd6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_deb468a1824c4d308a76c594cf603fd6" class="color" data-tooltip="RGBA: 153, 237, 255, 1.0
   HEXA: #99edffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_03da369d135242fcac5e24aecc9b2405 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_03da369d135242fcac5e24aecc9b2405::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_03da369d135242fcac5e24aecc9b2405:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_03da369d135242fcac5e24aecc9b2405" class="color" data-tooltip="RGBA: 204, 255, 255, 1.0
   HEXA: #ccffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_207a38e67ce24e7fab3fc5000cbe2f1c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_207a38e67ce24e7fab3fc5000cbe2f1c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_207a38e67ce24e7fab3fc5000cbe2f1c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_207a38e67ce24e7fab3fc5000cbe2f1c" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f5c086e5c0c64a6cb56c004bfd230b38 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 238, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f5c086e5c0c64a6cb56c004bfd230b38::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f5c086e5c0c64a6cb56c004bfd230b38:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f5c086e5c0c64a6cb56c004bfd230b38" class="color" data-tooltip="RGBA: 255, 238, 153, 1.0
   HEXA: #ffee99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b7203f68977d4b28a5710d3314e45066 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 195, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b7203f68977d4b28a5710d3314e45066::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b7203f68977d4b28a5710d3314e45066:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b7203f68977d4b28a5710d3314e45066" class="color" data-tooltip="RGBA: 255, 195, 76, 1.0
   HEXA: #ffc34cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b002786592c444939673561448d83907 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 127, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b002786592c444939673561448d83907::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b002786592c444939673561448d83907:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b002786592c444939673561448d83907" class="color" data-tooltip="RGBA: 255, 127, 0, 1.0
   HEXA: #ff7f00ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f8269838a61547b9acf870fd0e730609 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f8269838a61547b9acf870fd0e730609 div { flex: 1 1 0; }
           #_f8269838a61547b9acf870fd0e730609 div.color { width: 100%; height: 100%; }
           #_f8269838a61547b9acf870fd0e730609 div.cmap { width: 100%; height: auto; }
           #_f8269838a61547b9acf870fd0e730609 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>blueorangered</strong>
       
       <div id="_f8269838a61547b9acf870fd0e730609" class="color-map">
           
                           <div>
                   <style>
       #_8b10d538c1c44f07aa657f2ff43396bb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(7, 90, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8b10d538c1c44f07aa657f2ff43396bb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8b10d538c1c44f07aa657f2ff43396bb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8b10d538c1c44f07aa657f2ff43396bb" class="color" data-tooltip="RGBA: 7, 90, 255, 1.0
   HEXA: #075affff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a322134c6e484eee9f4e74e323ede57d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 118, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a322134c6e484eee9f4e74e323ede57d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a322134c6e484eee9f4e74e323ede57d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a322134c6e484eee9f4e74e323ede57d" class="color" data-tooltip="RGBA: 50, 118, 255, 1.0
   HEXA: #3276ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_482f5e9fbb0047c8ac4744cd0eb3e184 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 144, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_482f5e9fbb0047c8ac4744cd0eb3e184::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_482f5e9fbb0047c8ac4744cd0eb3e184:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_482f5e9fbb0047c8ac4744cd0eb3e184" class="color" data-tooltip="RGBA: 89, 144, 255, 1.0
   HEXA: #5990ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_490e4507eff94e2882350b7d6896c4e3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 178, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_490e4507eff94e2882350b7d6896c4e3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_490e4507eff94e2882350b7d6896c4e3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_490e4507eff94e2882350b7d6896c4e3" class="color" data-tooltip="RGBA: 140, 178, 255, 1.0
   HEXA: #8cb2ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8aba3ec0d0514dc5ab133c6fa54c6285 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 212, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8aba3ec0d0514dc5ab133c6fa54c6285::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8aba3ec0d0514dc5ab133c6fa54c6285:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8aba3ec0d0514dc5ab133c6fa54c6285" class="color" data-tooltip="RGBA: 191, 212, 255, 1.0
   HEXA: #bfd4ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_72ef6cf5c7854f7593bf0b66fa2c4cd1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 238, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_72ef6cf5c7854f7593bf0b66fa2c4cd1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_72ef6cf5c7854f7593bf0b66fa2c4cd1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_72ef6cf5c7854f7593bf0b66fa2c4cd1" class="color" data-tooltip="RGBA: 229, 238, 255, 1.0
   HEXA: #e5eeffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_23183438109d4c2fbe30345cf45c4528 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 249, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_23183438109d4c2fbe30345cf45c4528::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_23183438109d4c2fbe30345cf45c4528:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_23183438109d4c2fbe30345cf45c4528" class="color" data-tooltip="RGBA: 247, 249, 255, 1.0
   HEXA: #f7f9ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2542ba2f327d48e2842c687ca5e06cf2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2542ba2f327d48e2842c687ca5e06cf2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2542ba2f327d48e2842c687ca5e06cf2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2542ba2f327d48e2842c687ca5e06cf2" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_787adaf9a872432e9edf5b4e93817438 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_787adaf9a872432e9edf5b4e93817438::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_787adaf9a872432e9edf5b4e93817438:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_787adaf9a872432e9edf5b4e93817438" class="color" data-tooltip="RGBA: 255, 255, 153, 1.0
   HEXA: #ffff99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9e7f602d77584e3d99b66de83f116750 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e7f602d77584e3d99b66de83f116750::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e7f602d77584e3d99b66de83f116750:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e7f602d77584e3d99b66de83f116750" class="color" data-tooltip="RGBA: 255, 255, 0, 1.0
   HEXA: #ffff00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_092d865112b84cfc85e2f8e2af23912b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 204, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_092d865112b84cfc85e2f8e2af23912b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_092d865112b84cfc85e2f8e2af23912b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_092d865112b84cfc85e2f8e2af23912b" class="color" data-tooltip="RGBA: 255, 204, 0, 1.0
   HEXA: #ffcc00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6ae3b8c620b84a4ca1cf577c079297c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 153, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ae3b8c620b84a4ca1cf577c079297c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ae3b8c620b84a4ca1cf577c079297c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ae3b8c620b84a4ca1cf577c079297c9" class="color" data-tooltip="RGBA: 255, 153, 0, 1.0
   HEXA: #ff9900ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5aa7a1afaef8481a9f876da6a6dad883 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 102, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5aa7a1afaef8481a9f876da6a6dad883::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5aa7a1afaef8481a9f876da6a6dad883:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5aa7a1afaef8481a9f876da6a6dad883" class="color" data-tooltip="RGBA: 255, 102, 0, 1.0
   HEXA: #ff6600ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3213330a513d49849df13369f51fc5cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3213330a513d49849df13369f51fc5cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3213330a513d49849df13369f51fc5cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3213330a513d49849df13369f51fc5cc" class="color" data-tooltip="RGBA: 255, 0, 0, 1.0
   HEXA: #ff0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8a0fcbba92d04646b5e2e5e8bf5283f1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8a0fcbba92d04646b5e2e5e8bf5283f1 div { flex: 1 1 0; }
           #_8a0fcbba92d04646b5e2e5e8bf5283f1 div.color { width: 100%; height: 100%; }
           #_8a0fcbba92d04646b5e2e5e8bf5283f1 div.cmap { width: 100%; height: auto; }
           #_8a0fcbba92d04646b5e2e5e8bf5283f1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>brownblue10</strong>
       
       <div id="_8a0fcbba92d04646b5e2e5e8bf5283f1" class="color-map">
           
                           <div>
                   <style>
       #_67947f4b122540aa86d4b5ac4c43e608 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 47, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_67947f4b122540aa86d4b5ac4c43e608::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_67947f4b122540aa86d4b5ac4c43e608:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_67947f4b122540aa86d4b5ac4c43e608" class="color" data-tooltip="RGBA: 102, 47, 0, 1.0
   HEXA: #662f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f86f84824c874aa88d07859d772b0c07 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 96, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f86f84824c874aa88d07859d772b0c07::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f86f84824c874aa88d07859d772b0c07:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f86f84824c874aa88d07859d772b0c07" class="color" data-tooltip="RGBA: 153, 96, 53, 1.0
   HEXA: #996035ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_563a1dcc88a54a3c82ef5924b5bcea3d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 155, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_563a1dcc88a54a3c82ef5924b5bcea3d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_563a1dcc88a54a3c82ef5924b5bcea3d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_563a1dcc88a54a3c82ef5924b5bcea3d" class="color" data-tooltip="RGBA: 204, 155, 122, 1.0
   HEXA: #cc9b7aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_264b64ce89bd4d4fbf70fcc3f507c7cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 175, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_264b64ce89bd4d4fbf70fcc3f507c7cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_264b64ce89bd4d4fbf70fcc3f507c7cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_264b64ce89bd4d4fbf70fcc3f507c7cf" class="color" data-tooltip="RGBA: 216, 175, 151, 1.0
   HEXA: #d8af97ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_127e5c440fb24529bbcc41a6566b45be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 218, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_127e5c440fb24529bbcc41a6566b45be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_127e5c440fb24529bbcc41a6566b45be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_127e5c440fb24529bbcc41a6566b45be" class="color" data-tooltip="RGBA: 242, 218, 205, 1.0
   HEXA: #f2dacdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1aee251e1044c3d87c9da2de771069b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 253, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1aee251e1044c3d87c9da2de771069b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1aee251e1044c3d87c9da2de771069b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1aee251e1044c3d87c9da2de771069b" class="color" data-tooltip="RGBA: 204, 253, 255, 1.0
   HEXA: #ccfdffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d5493f1031604fb990f3a4fdda80ba93 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 248, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d5493f1031604fb990f3a4fdda80ba93::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d5493f1031604fb990f3a4fdda80ba93:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d5493f1031604fb990f3a4fdda80ba93" class="color" data-tooltip="RGBA: 153, 248, 255, 1.0
   HEXA: #99f8ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d54604f813974d408e42815297a1b06b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 239, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d54604f813974d408e42815297a1b06b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d54604f813974d408e42815297a1b06b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d54604f813974d408e42815297a1b06b" class="color" data-tooltip="RGBA: 101, 239, 255, 1.0
   HEXA: #65efffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2cdeb6c4d05b427ea5f89d768a84d03b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 227, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2cdeb6c4d05b427ea5f89d768a84d03b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2cdeb6c4d05b427ea5f89d768a84d03b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2cdeb6c4d05b427ea5f89d768a84d03b" class="color" data-tooltip="RGBA: 50, 227, 255, 1.0
   HEXA: #32e3ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_70c72c0e60b0459a8386256265997daa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 169, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_70c72c0e60b0459a8386256265997daa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_70c72c0e60b0459a8386256265997daa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_70c72c0e60b0459a8386256265997daa" class="color" data-tooltip="RGBA: 0, 169, 204, 1.0
   HEXA: #00a9ccff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f0ce81c145b84626a5bbbb7a6230b78c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f0ce81c145b84626a5bbbb7a6230b78c div { flex: 1 1 0; }
           #_f0ce81c145b84626a5bbbb7a6230b78c div.color { width: 100%; height: 100%; }
           #_f0ce81c145b84626a5bbbb7a6230b78c div.cmap { width: 100%; height: auto; }
           #_f0ce81c145b84626a5bbbb7a6230b78c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>brownblue12</strong>
       
       <div id="_f0ce81c145b84626a5bbbb7a6230b78c" class="color-map">
           
                           <div>
                   <style>
       #_a2589c68dad94d159a244bff22c9df04 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 25, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a2589c68dad94d159a244bff22c9df04::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a2589c68dad94d159a244bff22c9df04:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a2589c68dad94d159a244bff22c9df04" class="color" data-tooltip="RGBA: 51, 25, 0, 1.0
   HEXA: #331900ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_04f922ef74de4ffdae7dac77016956d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(2, 47, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_04f922ef74de4ffdae7dac77016956d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_04f922ef74de4ffdae7dac77016956d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_04f922ef74de4ffdae7dac77016956d1" class="color" data-tooltip="RGBA: 2, 47, 0, 1.0
   HEXA: #022f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_61684323a74749c29486aca3f745a5c0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 96, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61684323a74749c29486aca3f745a5c0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61684323a74749c29486aca3f745a5c0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61684323a74749c29486aca3f745a5c0" class="color" data-tooltip="RGBA: 53, 96, 53, 1.0
   HEXA: #356035ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1cb9dabcd334b99b1ff9c0d037974cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 155, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1cb9dabcd334b99b1ff9c0d037974cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1cb9dabcd334b99b1ff9c0d037974cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1cb9dabcd334b99b1ff9c0d037974cd" class="color" data-tooltip="RGBA: 4, 155, 122, 1.0
   HEXA: #049b7aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3d7eba93be3a4a89965946d299552ff6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 175, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3d7eba93be3a4a89965946d299552ff6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3d7eba93be3a4a89965946d299552ff6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3d7eba93be3a4a89965946d299552ff6" class="color" data-tooltip="RGBA: 16, 175, 151, 1.0
   HEXA: #10af97ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0ae4123b57fb40bf8e8dc55e0d61d5cb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 218, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ae4123b57fb40bf8e8dc55e0d61d5cb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ae4123b57fb40bf8e8dc55e0d61d5cb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ae4123b57fb40bf8e8dc55e0d61d5cb" class="color" data-tooltip="RGBA: 42, 218, 205, 1.0
   HEXA: #2adacdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cfb6c388971640b299a3ed11cb0089e5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 253, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cfb6c388971640b299a3ed11cb0089e5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cfb6c388971640b299a3ed11cb0089e5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cfb6c388971640b299a3ed11cb0089e5" class="color" data-tooltip="RGBA: 4, 253, 255, 1.0
   HEXA: #04fdffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3a37f37446ba4374be9f85360af65f59 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 248, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3a37f37446ba4374be9f85360af65f59::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3a37f37446ba4374be9f85360af65f59:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3a37f37446ba4374be9f85360af65f59" class="color" data-tooltip="RGBA: 53, 248, 255, 1.0
   HEXA: #35f8ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8cf19808fb434853b0b7620096802f22 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 239, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8cf19808fb434853b0b7620096802f22::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8cf19808fb434853b0b7620096802f22:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8cf19808fb434853b0b7620096802f22" class="color" data-tooltip="RGBA: 1, 239, 255, 1.0
   HEXA: #01efffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7cfa9ff60ad2427d8ffed35c642b6cf8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 227, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7cfa9ff60ad2427d8ffed35c642b6cf8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7cfa9ff60ad2427d8ffed35c642b6cf8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7cfa9ff60ad2427d8ffed35c642b6cf8" class="color" data-tooltip="RGBA: 50, 227, 255, 1.0
   HEXA: #32e3ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0f9d41baa122479b8eb2263f45d3a0e7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 169, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f9d41baa122479b8eb2263f45d3a0e7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f9d41baa122479b8eb2263f45d3a0e7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f9d41baa122479b8eb2263f45d3a0e7" class="color" data-tooltip="RGBA: 0, 169, 204, 1.0
   HEXA: #00a9ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_394952ab41de41e38eb5d0dc1ade2d41 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 122, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_394952ab41de41e38eb5d0dc1ade2d41::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_394952ab41de41e38eb5d0dc1ade2d41:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_394952ab41de41e38eb5d0dc1ade2d41" class="color" data-tooltip="RGBA: 0, 122, 153, 1.0
   HEXA: #007a99ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b4f0c81ebbd64bb481903cd45efdf01c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b4f0c81ebbd64bb481903cd45efdf01c div { flex: 1 1 0; }
           #_b4f0c81ebbd64bb481903cd45efdf01c div.color { width: 100%; height: 100%; }
           #_b4f0c81ebbd64bb481903cd45efdf01c div.cmap { width: 100%; height: auto; }
           #_b4f0c81ebbd64bb481903cd45efdf01c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>greenmagenta</strong>
       
       <div id="_b4f0c81ebbd64bb481903cd45efdf01c" class="color-map">
           
                           <div>
                   <style>
       #_215eed032567400ab25f426960ee7dcf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 80, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_215eed032567400ab25f426960ee7dcf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_215eed032567400ab25f426960ee7dcf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_215eed032567400ab25f426960ee7dcf" class="color" data-tooltip="RGBA: 0, 80, 0, 1.0
   HEXA: #005000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7b267885d5f44cc3a95640ed3d054da8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 134, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7b267885d5f44cc3a95640ed3d054da8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7b267885d5f44cc3a95640ed3d054da8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7b267885d5f44cc3a95640ed3d054da8" class="color" data-tooltip="RGBA: 0, 134, 0, 1.0
   HEXA: #008600ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90436b5f28ef4d84b0c567c9da5cc5a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 187, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90436b5f28ef4d84b0c567c9da5cc5a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90436b5f28ef4d84b0c567c9da5cc5a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90436b5f28ef4d84b0c567c9da5cc5a4" class="color" data-tooltip="RGBA: 0, 187, 0, 1.0
   HEXA: #00bb00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8fe256ee97e2466a825def2061389b81 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 241, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8fe256ee97e2466a825def2061389b81::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8fe256ee97e2466a825def2061389b81:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8fe256ee97e2466a825def2061389b81" class="color" data-tooltip="RGBA: 0, 241, 0, 1.0
   HEXA: #00f100ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53f37ff7ff3c44e08da8f4fcddbff08c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(80, 255, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53f37ff7ff3c44e08da8f4fcddbff08c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53f37ff7ff3c44e08da8f4fcddbff08c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53f37ff7ff3c44e08da8f4fcddbff08c" class="color" data-tooltip="RGBA: 80, 255, 80, 1.0
   HEXA: #50ff50ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d4dd7ecd164477989e8f818dbfd3c9d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(134, 255, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d4dd7ecd164477989e8f818dbfd3c9d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d4dd7ecd164477989e8f818dbfd3c9d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d4dd7ecd164477989e8f818dbfd3c9d" class="color" data-tooltip="RGBA: 134, 255, 134, 1.0
   HEXA: #86ff86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c49c89806c874405bab8f8ff7bc82632 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(187, 255, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c49c89806c874405bab8f8ff7bc82632::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c49c89806c874405bab8f8ff7bc82632:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c49c89806c874405bab8f8ff7bc82632" class="color" data-tooltip="RGBA: 187, 255, 187, 1.0
   HEXA: #bbffbbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_71caefc22a5a4c618d459dd734684e47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_71caefc22a5a4c618d459dd734684e47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_71caefc22a5a4c618d459dd734684e47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_71caefc22a5a4c618d459dd734684e47" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_723c1032c3ac404ba0d00ba103ed35a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 241, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_723c1032c3ac404ba0d00ba103ed35a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_723c1032c3ac404ba0d00ba103ed35a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_723c1032c3ac404ba0d00ba103ed35a6" class="color" data-tooltip="RGBA: 255, 241, 255, 1.0
   HEXA: #fff1ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fddf4dda4c194045bf3fe1d899fddca0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 187, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fddf4dda4c194045bf3fe1d899fddca0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fddf4dda4c194045bf3fe1d899fddca0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fddf4dda4c194045bf3fe1d899fddca0" class="color" data-tooltip="RGBA: 255, 187, 255, 1.0
   HEXA: #ffbbffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d139b424f3de46a0bce2be786e52fb7c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 134, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d139b424f3de46a0bce2be786e52fb7c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d139b424f3de46a0bce2be786e52fb7c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d139b424f3de46a0bce2be786e52fb7c" class="color" data-tooltip="RGBA: 255, 134, 255, 1.0
   HEXA: #ff86ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dece5d8841f3401e8f07f07fe34e81ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 80, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dece5d8841f3401e8f07f07fe34e81ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dece5d8841f3401e8f07f07fe34e81ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dece5d8841f3401e8f07f07fe34e81ea" class="color" data-tooltip="RGBA: 255, 80, 255, 1.0
   HEXA: #ff50ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_33f3813642664405baf5c3dc5708423d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 0, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_33f3813642664405baf5c3dc5708423d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_33f3813642664405baf5c3dc5708423d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_33f3813642664405baf5c3dc5708423d" class="color" data-tooltip="RGBA: 241, 0, 241, 1.0
   HEXA: #f100f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4692055bccb04138b02322e1aec735ad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(187, 0, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4692055bccb04138b02322e1aec735ad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4692055bccb04138b02322e1aec735ad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4692055bccb04138b02322e1aec735ad" class="color" data-tooltip="RGBA: 187, 0, 187, 1.0
   HEXA: #bb00bbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7290720f4ccb42e7bd2d14a64473e0f7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(134, 0, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7290720f4ccb42e7bd2d14a64473e0f7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7290720f4ccb42e7bd2d14a64473e0f7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7290720f4ccb42e7bd2d14a64473e0f7" class="color" data-tooltip="RGBA: 134, 0, 134, 1.0
   HEXA: #860086ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4eb09e5772964967b806b1cd8db9a07d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(80, 0, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4eb09e5772964967b806b1cd8db9a07d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4eb09e5772964967b806b1cd8db9a07d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4eb09e5772964967b806b1cd8db9a07d" class="color" data-tooltip="RGBA: 80, 0, 80, 1.0
   HEXA: #500050ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2991fb305ea4474ba213241d6372d563 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2991fb305ea4474ba213241d6372d563 div { flex: 1 1 0; }
           #_2991fb305ea4474ba213241d6372d563 div.color { width: 100%; height: 100%; }
           #_2991fb305ea4474ba213241d6372d563 div.cmap { width: 100%; height: auto; }
           #_2991fb305ea4474ba213241d6372d563 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>redyellowblue</strong>
       
       <div id="_2991fb305ea4474ba213241d6372d563" class="color-map">
           
                           <div>
                   <style>
       #_bf9d5a02a1b94b468ad7c95486f4c023 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 0, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf9d5a02a1b94b468ad7c95486f4c023::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf9d5a02a1b94b468ad7c95486f4c023:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf9d5a02a1b94b468ad7c95486f4c023" class="color" data-tooltip="RGBA: 165, 0, 33, 1.0
   HEXA: #a50021ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d938b84d8e2244baa7f3bff238076e13 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 38, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d938b84d8e2244baa7f3bff238076e13::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d938b84d8e2244baa7f3bff238076e13:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d938b84d8e2244baa7f3bff238076e13" class="color" data-tooltip="RGBA: 216, 38, 50, 1.0
   HEXA: #d82632ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b799a005a29449e596a774ce81e21178 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 109, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b799a005a29449e596a774ce81e21178::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b799a005a29449e596a774ce81e21178:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b799a005a29449e596a774ce81e21178" class="color" data-tooltip="RGBA: 247, 109, 94, 1.0
   HEXA: #f76d5eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3bdfa0094dd40adad7e6733aa4f9fad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 173, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3bdfa0094dd40adad7e6733aa4f9fad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3bdfa0094dd40adad7e6733aa4f9fad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3bdfa0094dd40adad7e6733aa4f9fad" class="color" data-tooltip="RGBA: 255, 173, 114, 1.0
   HEXA: #ffad72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_49f44e47eb4d4b0ea7d6552e150eb489 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 224, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_49f44e47eb4d4b0ea7d6552e150eb489::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_49f44e47eb4d4b0ea7d6552e150eb489:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_49f44e47eb4d4b0ea7d6552e150eb489" class="color" data-tooltip="RGBA: 255, 224, 153, 1.0
   HEXA: #ffe099ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_81054efb5f3e4137badd3a8882e1ddae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_81054efb5f3e4137badd3a8882e1ddae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_81054efb5f3e4137badd3a8882e1ddae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_81054efb5f3e4137badd3a8882e1ddae" class="color" data-tooltip="RGBA: 255, 255, 191, 1.0
   HEXA: #ffffbfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c98814812fe47448b14d7096ff81fbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c98814812fe47448b14d7096ff81fbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c98814812fe47448b14d7096ff81fbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c98814812fe47448b14d7096ff81fbd" class="color" data-tooltip="RGBA: 224, 255, 255, 1.0
   HEXA: #e0ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5dfce0f30fc747019f23295e0fce7689 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 247, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5dfce0f30fc747019f23295e0fce7689::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5dfce0f30fc747019f23295e0fce7689:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5dfce0f30fc747019f23295e0fce7689" class="color" data-tooltip="RGBA: 170, 247, 255, 1.0
   HEXA: #aaf7ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a44c07d4f32048f3b1989e8a7b33a410 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 216, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a44c07d4f32048f3b1989e8a7b33a410::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a44c07d4f32048f3b1989e8a7b33a410:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a44c07d4f32048f3b1989e8a7b33a410" class="color" data-tooltip="RGBA: 114, 216, 255, 1.0
   HEXA: #72d8ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7b40319e11a7454988249f6c7995a897 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 160, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7b40319e11a7454988249f6c7995a897::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7b40319e11a7454988249f6c7995a897:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7b40319e11a7454988249f6c7995a897" class="color" data-tooltip="RGBA: 63, 160, 255, 1.0
   HEXA: #3fa0ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5a7e055cf57c4f768765aaefa2434e76 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 76, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5a7e055cf57c4f768765aaefa2434e76::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5a7e055cf57c4f768765aaefa2434e76:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5a7e055cf57c4f768765aaefa2434e76" class="color" data-tooltip="RGBA: 38, 76, 255, 1.0
   HEXA: #264cffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_cc865f2f43a14e4cb6976d8e82fe85c6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_cc865f2f43a14e4cb6976d8e82fe85c6 div { flex: 1 1 0; }
           #_cc865f2f43a14e4cb6976d8e82fe85c6 div.color { width: 100%; height: 100%; }
           #_cc865f2f43a14e4cb6976d8e82fe85c6 div.cmap { width: 100%; height: auto; }
           #_cc865f2f43a14e4cb6976d8e82fe85c6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>broc</strong>
       
       <div id="_cc865f2f43a14e4cb6976d8e82fe85c6" class="color-map">
           
                           <div>
                   <style>
       #_3a5d3e4ed4f14046aab694e9d9ad78d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 26, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3a5d3e4ed4f14046aab694e9d9ad78d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3a5d3e4ed4f14046aab694e9d9ad78d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3a5d3e4ed4f14046aab694e9d9ad78d4" class="color" data-tooltip="RGBA: 44, 26, 76, 1.0
   HEXA: #2c1a4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c6aa7d68dc484bde92483abb4388ab82 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 45, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c6aa7d68dc484bde92483abb4388ab82::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c6aa7d68dc484bde92483abb4388ab82:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c6aa7d68dc484bde92483abb4388ab82" class="color" data-tooltip="RGBA: 42, 45, 96, 1.0
   HEXA: #2a2d60ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5341643c5d974606a5633617ab462791 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 67, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5341643c5d974606a5633617ab462791::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5341643c5d974606a5633617ab462791:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5341643c5d974606a5633617ab462791" class="color" data-tooltip="RGBA: 40, 67, 117, 1.0
   HEXA: #284375ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9f284a278784c9080dea9dc13f6afec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 88, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9f284a278784c9080dea9dc13f6afec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9f284a278784c9080dea9dc13f6afec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9f284a278784c9080dea9dc13f6afec" class="color" data-tooltip="RGBA: 46, 88, 137, 1.0
   HEXA: #2e5889ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44ad32cdfb724355bd8f73dbbe9c4ad0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 113, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44ad32cdfb724355bd8f73dbbe9c4ad0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44ad32cdfb724355bd8f73dbbe9c4ad0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44ad32cdfb724355bd8f73dbbe9c4ad0" class="color" data-tooltip="RGBA: 69, 113, 156, 1.0
   HEXA: #45719cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_82f799c5e52241d4be14ae2706e8e641 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(97, 135, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82f799c5e52241d4be14ae2706e8e641::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82f799c5e52241d4be14ae2706e8e641:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82f799c5e52241d4be14ae2706e8e641" class="color" data-tooltip="RGBA: 97, 135, 172, 1.0
   HEXA: #6187acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fcc19d50ee9d4536b7cc553d5de4eeb4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(130, 160, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fcc19d50ee9d4536b7cc553d5de4eeb4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fcc19d50ee9d4536b7cc553d5de4eeb4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fcc19d50ee9d4536b7cc553d5de4eeb4" class="color" data-tooltip="RGBA: 130, 160, 189, 1.0
   HEXA: #82a0bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dc15418ec0984eee9c6c385136ff602c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 183, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dc15418ec0984eee9c6c385136ff602c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dc15418ec0984eee9c6c385136ff602c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dc15418ec0984eee9c6c385136ff602c" class="color" data-tooltip="RGBA: 160, 183, 205, 1.0
   HEXA: #a0b7cdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_891958f6ea4d49b4b86ffbfcebf7cdd1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 207, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_891958f6ea4d49b4b86ffbfcebf7cdd1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_891958f6ea4d49b4b86ffbfcebf7cdd1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_891958f6ea4d49b4b86ffbfcebf7cdd1" class="color" data-tooltip="RGBA: 191, 207, 221, 1.0
   HEXA: #bfcfddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c9babdd935664f109061a7f9163401c3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 231, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9babdd935664f109061a7f9163401c3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9babdd935664f109061a7f9163401c3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9babdd935664f109061a7f9163401c3" class="color" data-tooltip="RGBA: 224, 231, 236, 1.0
   HEXA: #e0e7ecff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_da34bd08a6204719841af1a7f3190a26 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 239, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_da34bd08a6204719841af1a7f3190a26::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_da34bd08a6204719841af1a7f3190a26:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_da34bd08a6204719841af1a7f3190a26" class="color" data-tooltip="RGBA: 238, 239, 227, 1.0
   HEXA: #eeefe3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b86d57214afb4b1a80ae97f830620026 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 225, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b86d57214afb4b1a80ae97f830620026::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b86d57214afb4b1a80ae97f830620026:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b86d57214afb4b1a80ae97f830620026" class="color" data-tooltip="RGBA: 225, 225, 196, 1.0
   HEXA: #e1e1c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a6a5004282f446638baf68452dcfb039 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(210, 210, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6a5004282f446638baf68452dcfb039::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6a5004282f446638baf68452dcfb039:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6a5004282f446638baf68452dcfb039" class="color" data-tooltip="RGBA: 210, 210, 165, 1.0
   HEXA: #d2d2a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_885a9538fab242f8a27327c406f86850 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(190, 190, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_885a9538fab242f8a27327c406f86850::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_885a9538fab242f8a27327c406f86850:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_885a9538fab242f8a27327c406f86850" class="color" data-tooltip="RGBA: 190, 190, 133, 1.0
   HEXA: #bebe85ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a2dbdbf4410e4ba7a92a065a10ea7925 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 161, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a2dbdbf4410e4ba7a92a065a10ea7925::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a2dbdbf4410e4ba7a92a065a10ea7925:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a2dbdbf4410e4ba7a92a065a10ea7925" class="color" data-tooltip="RGBA: 161, 161, 103, 1.0
   HEXA: #a1a167ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_23b28869fd6f46dd8eb09af5e3656963 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 135, 81, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_23b28869fd6f46dd8eb09af5e3656963::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_23b28869fd6f46dd8eb09af5e3656963:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_23b28869fd6f46dd8eb09af5e3656963" class="color" data-tooltip="RGBA: 135, 135, 81, 1.0
   HEXA: #878751ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_91d107aab2054072a7197c590f1eeef4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 108, 58, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_91d107aab2054072a7197c590f1eeef4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_91d107aab2054072a7197c590f1eeef4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_91d107aab2054072a7197c590f1eeef4" class="color" data-tooltip="RGBA: 108, 108, 58, 1.0
   HEXA: #6c6c3aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d05d4a5a1aa44ac18e5236b8033f51d0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 84, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d05d4a5a1aa44ac18e5236b8033f51d0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d05d4a5a1aa44ac18e5236b8033f51d0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d05d4a5a1aa44ac18e5236b8033f51d0" class="color" data-tooltip="RGBA: 84, 84, 38, 1.0
   HEXA: #545426ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_45be55db77fb4a49afda6578f1d0f413 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 59, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_45be55db77fb4a49afda6578f1d0f413::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_45be55db77fb4a49afda6578f1d0f413:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_45be55db77fb4a49afda6578f1d0f413" class="color" data-tooltip="RGBA: 59, 59, 18, 1.0
   HEXA: #3b3b12ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6f83c7f4232d457cbf3fa08592680b6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 38, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6f83c7f4232d457cbf3fa08592680b6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6f83c7f4232d457cbf3fa08592680b6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6f83c7f4232d457cbf3fa08592680b6c" class="color" data-tooltip="RGBA: 38, 38, 0, 1.0
   HEXA: #262600ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ff984eb6803544ffab9601f3181652bc {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ff984eb6803544ffab9601f3181652bc div { flex: 1 1 0; }
           #_ff984eb6803544ffab9601f3181652bc div.color { width: 100%; height: 100%; }
           #_ff984eb6803544ffab9601f3181652bc div.cmap { width: 100%; height: auto; }
           #_ff984eb6803544ffab9601f3181652bc div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>cork</strong>
       
       <div id="_ff984eb6803544ffab9601f3181652bc" class="color-map">
           
                           <div>
                   <style>
       #_73231772b0e244319f03e46db13151ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 26, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_73231772b0e244319f03e46db13151ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_73231772b0e244319f03e46db13151ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_73231772b0e244319f03e46db13151ba" class="color" data-tooltip="RGBA: 44, 26, 76, 1.0
   HEXA: #2c1a4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6d302342bd934f509d904c3fdf9232a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(43, 44, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6d302342bd934f509d904c3fdf9232a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6d302342bd934f509d904c3fdf9232a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6d302342bd934f509d904c3fdf9232a5" class="color" data-tooltip="RGBA: 43, 44, 95, 1.0
   HEXA: #2b2c5fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4fe79c21116a4cda8731777f5cb66ff1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 65, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4fe79c21116a4cda8731777f5cb66ff1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4fe79c21116a4cda8731777f5cb66ff1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4fe79c21116a4cda8731777f5cb66ff1" class="color" data-tooltip="RGBA: 42, 65, 116, 1.0
   HEXA: #2a4174ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_afba32ff719b490494d34eb3239a4669 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 86, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_afba32ff719b490494d34eb3239a4669::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_afba32ff719b490494d34eb3239a4669:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_afba32ff719b490494d34eb3239a4669" class="color" data-tooltip="RGBA: 47, 86, 135, 1.0
   HEXA: #2f5687ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c9fbf662147a4062ae9b34e5661dc9dc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(67, 109, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9fbf662147a4062ae9b34e5661dc9dc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9fbf662147a4062ae9b34e5661dc9dc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9fbf662147a4062ae9b34e5661dc9dc" class="color" data-tooltip="RGBA: 67, 109, 154, 1.0
   HEXA: #436d9aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6c8026b37a7c4f68adde33dea31d73f0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(93, 131, 169, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6c8026b37a7c4f68adde33dea31d73f0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6c8026b37a7c4f68adde33dea31d73f0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6c8026b37a7c4f68adde33dea31d73f0" class="color" data-tooltip="RGBA: 93, 131, 169, 1.0
   HEXA: #5d83a9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1e7a514bb954e16811d22bcb69b02da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 155, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1e7a514bb954e16811d22bcb69b02da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1e7a514bb954e16811d22bcb69b02da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1e7a514bb954e16811d22bcb69b02da" class="color" data-tooltip="RGBA: 123, 155, 186, 1.0
   HEXA: #7b9bbaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d119dabe4214dfbb877aa7a27f1ada1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 177, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d119dabe4214dfbb877aa7a27f1ada1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d119dabe4214dfbb877aa7a27f1ada1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d119dabe4214dfbb877aa7a27f1ada1" class="color" data-tooltip="RGBA: 152, 177, 201, 1.0
   HEXA: #98b1c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4aad4348973243c3aff4802fa684ad47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 199, 216, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4aad4348973243c3aff4802fa684ad47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4aad4348973243c3aff4802fa684ad47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4aad4348973243c3aff4802fa684ad47" class="color" data-tooltip="RGBA: 182, 199, 216, 1.0
   HEXA: #b6c7d8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e62f87083ad54eb9aa987bf3a681c447 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 223, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e62f87083ad54eb9aa987bf3a681c447::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e62f87083ad54eb9aa987bf3a681c447:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e62f87083ad54eb9aa987bf3a681c447" class="color" data-tooltip="RGBA: 211, 223, 229, 1.0
   HEXA: #d3dfe5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_81ee55d594e74f74b518fa81010397a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 231, 222, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_81ee55d594e74f74b518fa81010397a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_81ee55d594e74f74b518fa81010397a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_81ee55d594e74f74b518fa81010397a2" class="color" data-tooltip="RGBA: 217, 231, 222, 1.0
   HEXA: #d9e7deff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d609f9fed10e4ebd8ddb545a866126f7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 219, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d609f9fed10e4ebd8ddb545a866126f7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d609f9fed10e4ebd8ddb545a866126f7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d609f9fed10e4ebd8ddb545a866126f7" class="color" data-tooltip="RGBA: 193, 219, 196, 1.0
   HEXA: #c1dbc4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_54a7cf11033942178e96b612467b0122 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 203, 170, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_54a7cf11033942178e96b612467b0122::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_54a7cf11033942178e96b612467b0122:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_54a7cf11033942178e96b612467b0122" class="color" data-tooltip="RGBA: 167, 203, 170, 1.0
   HEXA: #a7cbaaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a306dd6fe26248509379956992029482 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 188, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a306dd6fe26248509379956992029482::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a306dd6fe26248509379956992029482:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a306dd6fe26248509379956992029482" class="color" data-tooltip="RGBA: 141, 188, 145, 1.0
   HEXA: #8dbc91ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4757fe21d3774c43b75fbad57b94b185 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(113, 172, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4757fe21d3774c43b75fbad57b94b185::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4757fe21d3774c43b75fbad57b94b185:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4757fe21d3774c43b75fbad57b94b185" class="color" data-tooltip="RGBA: 113, 172, 118, 1.0
   HEXA: #71ac76ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3f27f31c32724ea1adf886e68ecebb2c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(88, 155, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3f27f31c32724ea1adf886e68ecebb2c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3f27f31c32724ea1adf886e68ecebb2c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3f27f31c32724ea1adf886e68ecebb2c" class="color" data-tooltip="RGBA: 88, 155, 91, 1.0
   HEXA: #589b5bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_32bc3b283b9b4e1e8d3735a5b74c7b9f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 132, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_32bc3b283b9b4e1e8d3735a5b74c7b9f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_32bc3b283b9b4e1e8d3735a5b74c7b9f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_32bc3b283b9b4e1e8d3735a5b74c7b9f" class="color" data-tooltip="RGBA: 69, 132, 61, 1.0
   HEXA: #45843dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c4902a57731844788721774f3af87c2a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 111, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c4902a57731844788721774f3af87c2a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c4902a57731844788721774f3af87c2a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c4902a57731844788721774f3af87c2a" class="color" data-tooltip="RGBA: 64, 111, 38, 1.0
   HEXA: #406f26ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6d514c0232ee4db798b31ffa5d55024b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 92, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6d514c0232ee4db798b31ffa5d55024b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6d514c0232ee4db798b31ffa5d55024b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6d514c0232ee4db798b31ffa5d55024b" class="color" data-tooltip="RGBA: 66, 92, 19, 1.0
   HEXA: #425c13ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_562e98f0665748dd992e7fa9b00dce1a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 77, 3, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_562e98f0665748dd992e7fa9b00dce1a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_562e98f0665748dd992e7fa9b00dce1a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_562e98f0665748dd992e7fa9b00dce1a" class="color" data-tooltip="RGBA: 66, 77, 3, 1.0
   HEXA: #424d03ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c149d0506d6749319465f41e378037ac {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c149d0506d6749319465f41e378037ac div { flex: 1 1 0; }
           #_c149d0506d6749319465f41e378037ac div.color { width: 100%; height: 100%; }
           #_c149d0506d6749319465f41e378037ac div.cmap { width: 100%; height: auto; }
           #_c149d0506d6749319465f41e378037ac div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>vik</strong>
       
       <div id="_c149d0506d6749319465f41e378037ac" class="color-map">
           
                           <div>
                   <style>
       #_a480aa9cd172445f88bf90eb1945bed3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 18, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a480aa9cd172445f88bf90eb1945bed3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a480aa9cd172445f88bf90eb1945bed3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a480aa9cd172445f88bf90eb1945bed3" class="color" data-tooltip="RGBA: 0, 18, 97, 1.0
   HEXA: #001261ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2b847b73c4942cea22b7f69aadb949b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(2, 39, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2b847b73c4942cea22b7f69aadb949b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2b847b73c4942cea22b7f69aadb949b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2b847b73c4942cea22b7f69aadb949b" class="color" data-tooltip="RGBA: 2, 39, 110, 1.0
   HEXA: #02276eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_58068a89e166434bb289894b147d6446 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(3, 60, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_58068a89e166434bb289894b147d6446::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_58068a89e166434bb289894b147d6446:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_58068a89e166434bb289894b147d6446" class="color" data-tooltip="RGBA: 3, 60, 124, 1.0
   HEXA: #033c7cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_210c4619c5dd40f6a599547794aebc2b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 81, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_210c4619c5dd40f6a599547794aebc2b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_210c4619c5dd40f6a599547794aebc2b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_210c4619c5dd40f6a599547794aebc2b" class="color" data-tooltip="RGBA: 5, 81, 137, 1.0
   HEXA: #055189ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b382b10d3653409ebf2656990e5db145 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 105, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b382b10d3653409ebf2656990e5db145::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b382b10d3653409ebf2656990e5db145:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b382b10d3653409ebf2656990e5db145" class="color" data-tooltip="RGBA: 23, 105, 153, 1.0
   HEXA: #176999ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf735e23aa71445f8739ce5b54395104 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 131, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf735e23aa71445f8739ce5b54395104::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf735e23aa71445f8739ce5b54395104:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf735e23aa71445f8739ce5b54395104" class="color" data-tooltip="RGBA: 57, 131, 171, 1.0
   HEXA: #3983abff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34fd8ab01822473693a53da795b46fd6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(100, 160, 190, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34fd8ab01822473693a53da795b46fd6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34fd8ab01822473693a53da795b46fd6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34fd8ab01822473693a53da795b46fd6" class="color" data-tooltip="RGBA: 100, 160, 190, 1.0
   HEXA: #64a0beff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eab4fab8f2e54f9da9e630a36d1e409c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 186, 208, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eab4fab8f2e54f9da9e630a36d1e409c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eab4fab8f2e54f9da9e630a36d1e409c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eab4fab8f2e54f9da9e630a36d1e409c" class="color" data-tooltip="RGBA: 141, 186, 208, 1.0
   HEXA: #8dbad0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eeacd59d095d44a2a425c9674dedb0fa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 211, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eeacd59d095d44a2a425c9674dedb0fa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eeacd59d095d44a2a425c9674dedb0fa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eeacd59d095d44a2a425c9674dedb0fa" class="color" data-tooltip="RGBA: 182, 211, 225, 1.0
   HEXA: #b6d3e1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_26fcaca3da1c4a7fb108a7086fb9a21d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 230, 233, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26fcaca3da1c4a7fb108a7086fb9a21d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26fcaca3da1c4a7fb108a7086fb9a21d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26fcaca3da1c4a7fb108a7086fb9a21d" class="color" data-tooltip="RGBA: 224, 230, 233, 1.0
   HEXA: #e0e6e9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d61c8a9cc2f442dbaeb6e3ca93099f02 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 221, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d61c8a9cc2f442dbaeb6e3ca93099f02::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d61c8a9cc2f442dbaeb6e3ca93099f02:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d61c8a9cc2f442dbaeb6e3ca93099f02" class="color" data-tooltip="RGBA: 238, 221, 211, 1.0
   HEXA: #eeddd3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_89ee768b9811486692ac5ce04bf60665 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 193, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_89ee768b9811486692ac5ce04bf60665::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_89ee768b9811486692ac5ce04bf60665:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_89ee768b9811486692ac5ce04bf60665" class="color" data-tooltip="RGBA: 229, 193, 173, 1.0
   HEXA: #e5c1adff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_75ec40e7fc13402992bde1649a3688cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 168, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_75ec40e7fc13402992bde1649a3688cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_75ec40e7fc13402992bde1649a3688cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_75ec40e7fc13402992bde1649a3688cf" class="color" data-tooltip="RGBA: 219, 168, 139, 1.0
   HEXA: #dba88bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_384b2a73ac8444dbaefb8225af87d3bc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 144, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_384b2a73ac8444dbaefb8225af87d3bc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_384b2a73ac8444dbaefb8225af87d3bc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_384b2a73ac8444dbaefb8225af87d3bc" class="color" data-tooltip="RGBA: 208, 144, 107, 1.0
   HEXA: #d0906bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d8bb03a09f9345c2beedf423d5ce1ef0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 119, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d8bb03a09f9345c2beedf423d5ce1ef0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d8bb03a09f9345c2beedf423d5ce1ef0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d8bb03a09f9345c2beedf423d5ce1ef0" class="color" data-tooltip="RGBA: 198, 119, 74, 1.0
   HEXA: #c6774aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3368f5f541b74d25aae3cec91f0c2dba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(187, 96, 45, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3368f5f541b74d25aae3cec91f0c2dba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3368f5f541b74d25aae3cec91f0c2dba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3368f5f541b74d25aae3cec91f0c2dba" class="color" data-tooltip="RGBA: 187, 96, 45, 1.0
   HEXA: #bb602dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64b99af73ec74480a429e4baee9377ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 64, 15, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64b99af73ec74480a429e4baee9377ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64b99af73ec74480a429e4baee9377ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64b99af73ec74480a429e4baee9377ba" class="color" data-tooltip="RGBA: 165, 64, 15, 1.0
   HEXA: #a5400fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6a1fc6d14f4941888b7bc9ced279c53a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 38, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6a1fc6d14f4941888b7bc9ced279c53a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6a1fc6d14f4941888b7bc9ced279c53a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6a1fc6d14f4941888b7bc9ced279c53a" class="color" data-tooltip="RGBA: 137, 38, 6, 1.0
   HEXA: #892606ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d6717c1f91de42aa9b3ebf6c2de1402b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 17, 7, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d6717c1f91de42aa9b3ebf6c2de1402b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d6717c1f91de42aa9b3ebf6c2de1402b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d6717c1f91de42aa9b3ebf6c2de1402b" class="color" data-tooltip="RGBA: 111, 17, 7, 1.0
   HEXA: #6f1107ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7534fcb779374559bb068dc0ff970a3d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 0, 8, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7534fcb779374559bb068dc0ff970a3d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7534fcb779374559bb068dc0ff970a3d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7534fcb779374559bb068dc0ff970a3d" class="color" data-tooltip="RGBA: 89, 0, 8, 1.0
   HEXA: #590008ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a04e0c939ee1496f979b674dd9595fae {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a04e0c939ee1496f979b674dd9595fae div { flex: 1 1 0; }
           #_a04e0c939ee1496f979b674dd9595fae div.color { width: 100%; height: 100%; }
           #_a04e0c939ee1496f979b674dd9595fae div.cmap { width: 100%; height: auto; }
           #_a04e0c939ee1496f979b674dd9595fae div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>lisbon</strong>
       
       <div id="_a04e0c939ee1496f979b674dd9595fae" class="color-map">
           
                           <div>
                   <style>
       #_9477282b21b348f281c1a2888cc06779 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 229, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9477282b21b348f281c1a2888cc06779::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9477282b21b348f281c1a2888cc06779:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9477282b21b348f281c1a2888cc06779" class="color" data-tooltip="RGBA: 230, 229, 255, 1.0
   HEXA: #e6e5ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e2ec188906954e3aaca8195af946ad8e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 204, 234, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e2ec188906954e3aaca8195af946ad8e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e2ec188906954e3aaca8195af946ad8e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e2ec188906954e3aaca8195af946ad8e" class="color" data-tooltip="RGBA: 195, 204, 234, 1.0
   HEXA: #c3cceaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_877fa0d383dd4f05919d993c2596937a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 177, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_877fa0d383dd4f05919d993c2596937a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_877fa0d383dd4f05919d993c2596937a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_877fa0d383dd4f05919d993c2596937a" class="color" data-tooltip="RGBA: 158, 177, 212, 1.0
   HEXA: #9eb1d4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3c8667d6913f4bf797958fdc53231163 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 152, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c8667d6913f4bf797958fdc53231163::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c8667d6913f4bf797958fdc53231163:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c8667d6913f4bf797958fdc53231163" class="color" data-tooltip="RGBA: 124, 152, 192, 1.0
   HEXA: #7c98c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_30a74843bb134b7dab62567aa8c311ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 125, 169, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30a74843bb134b7dab62567aa8c311ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30a74843bb134b7dab62567aa8c311ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30a74843bb134b7dab62567aa8c311ee" class="color" data-tooltip="RGBA: 89, 125, 169, 1.0
   HEXA: #597da9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_df38210f0e9347f4932957dc00f578ae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 100, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_df38210f0e9347f4932957dc00f578ae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_df38210f0e9347f4932957dc00f578ae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_df38210f0e9347f4932957dc00f578ae" class="color" data-tooltip="RGBA: 58, 100, 145, 1.0
   HEXA: #3a6491ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44e8ac361daf44c39c4d93b73fb9c631 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 74, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44e8ac361daf44c39c4d93b73fb9c631::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44e8ac361daf44c39c4d93b73fb9c631:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44e8ac361daf44c39c4d93b73fb9c631" class="color" data-tooltip="RGBA: 34, 74, 113, 1.0
   HEXA: #224a71ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6ffe17fe1e094e01bc47cf82eec28aef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 54, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6ffe17fe1e094e01bc47cf82eec28aef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6ffe17fe1e094e01bc47cf82eec28aef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6ffe17fe1e094e01bc47cf82eec28aef" class="color" data-tooltip="RGBA: 23, 54, 83, 1.0
   HEXA: #173653ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46405204a24c4680a94afbd3f1ab6d8e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 36, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46405204a24c4680a94afbd3f1ab6d8e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46405204a24c4680a94afbd3f1ab6d8e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46405204a24c4680a94afbd3f1ab6d8e" class="color" data-tooltip="RGBA: 18, 36, 55, 1.0
   HEXA: #122437ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e0520f3dfa5f4ad7adeb41ef44d3fa5b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(19, 25, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e0520f3dfa5f4ad7adeb41ef44d3fa5b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e0520f3dfa5f4ad7adeb41ef44d3fa5b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e0520f3dfa5f4ad7adeb41ef44d3fa5b" class="color" data-tooltip="RGBA: 19, 25, 32, 1.0
   HEXA: #131920ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b397eedff81047aebadfd6f7cfef584e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 28, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b397eedff81047aebadfd6f7cfef584e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b397eedff81047aebadfd6f7cfef584e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b397eedff81047aebadfd6f7cfef584e" class="color" data-tooltip="RGBA: 28, 28, 23, 1.0
   HEXA: #1c1c17ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7738d34b6a0d483f81a384623507078e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(48, 45, 30, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7738d34b6a0d483f81a384623507078e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7738d34b6a0d483f81a384623507078e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7738d34b6a0d483f81a384623507078e" class="color" data-tooltip="RGBA: 48, 45, 30, 1.0
   HEXA: #302d1eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1cb1692d7ade4f15a98c180c964a3126 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 66, 42, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1cb1692d7ade4f15a98c180c964a3126::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1cb1692d7ade4f15a98c180c964a3126:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1cb1692d7ade4f15a98c180c964a3126" class="color" data-tooltip="RGBA: 70, 66, 42, 1.0
   HEXA: #46422aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2e834630841e43cd9f215d9d833fbdf6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 88, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2e834630841e43cd9f215d9d833fbdf6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2e834630841e43cd9f215d9d833fbdf6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2e834630841e43cd9f215d9d833fbdf6" class="color" data-tooltip="RGBA: 94, 88, 56, 1.0
   HEXA: #5e5838ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dfb7c3d85cc34996b0b9d87f9b37cd59 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 114, 73, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dfb7c3d85cc34996b0b9d87f9b37cd59::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dfb7c3d85cc34996b0b9d87f9b37cd59:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dfb7c3d85cc34996b0b9d87f9b37cd59" class="color" data-tooltip="RGBA: 121, 114, 73, 1.0
   HEXA: #797249ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_260496bc609041799d87253c506dfe07 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(148, 139, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_260496bc609041799d87253c506dfe07::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_260496bc609041799d87253c506dfe07:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_260496bc609041799d87253c506dfe07" class="color" data-tooltip="RGBA: 148, 139, 91, 1.0
   HEXA: #948b5bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_203850a222374bb7ae7b83a57a80ca0f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 169, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_203850a222374bb7ae7b83a57a80ca0f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_203850a222374bb7ae7b83a57a80ca0f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_203850a222374bb7ae7b83a57a80ca0f" class="color" data-tooltip="RGBA: 177, 169, 117, 1.0
   HEXA: #b1a975ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c1806ee5a40c47b8a40e89d65c6a61c8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 197, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1806ee5a40c47b8a40e89d65c6a61c8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1806ee5a40c47b8a40e89d65c6a61c8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1806ee5a40c47b8a40e89d65c6a61c8" class="color" data-tooltip="RGBA: 203, 197, 147, 1.0
   HEXA: #cbc593ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7ba09927b8e64040ab34ab53882b336b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 227, 182, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7ba09927b8e64040ab34ab53882b336b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7ba09927b8e64040ab34ab53882b336b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7ba09927b8e64040ab34ab53882b336b" class="color" data-tooltip="RGBA: 230, 227, 182, 1.0
   HEXA: #e6e3b6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f7cf717e9344424a32ba37f331a49d7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f7cf717e9344424a32ba37f331a49d7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f7cf717e9344424a32ba37f331a49d7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f7cf717e9344424a32ba37f331a49d7" class="color" data-tooltip="RGBA: 255, 255, 217, 1.0
   HEXA: #ffffd9ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5ffea98d66a04e549a55c3c8b36c4fd2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5ffea98d66a04e549a55c3c8b36c4fd2 div { flex: 1 1 0; }
           #_5ffea98d66a04e549a55c3c8b36c4fd2 div.color { width: 100%; height: 100%; }
           #_5ffea98d66a04e549a55c3c8b36c4fd2 div.cmap { width: 100%; height: auto; }
           #_5ffea98d66a04e549a55c3c8b36c4fd2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tofino</strong>
       
       <div id="_5ffea98d66a04e549a55c3c8b36c4fd2" class="color-map">
           
                           <div>
                   <style>
       #_676203b9d5084ee2ac251fe4a7a53c90 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 217, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_676203b9d5084ee2ac251fe4a7a53c90::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_676203b9d5084ee2ac251fe4a7a53c90:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_676203b9d5084ee2ac251fe4a7a53c90" class="color" data-tooltip="RGBA: 222, 217, 255, 1.0
   HEXA: #ded9ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_05d1d25f36a54545bb5d0ff6ae460d54 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(187, 192, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_05d1d25f36a54545bb5d0ff6ae460d54::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_05d1d25f36a54545bb5d0ff6ae460d54:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_05d1d25f36a54545bb5d0ff6ae460d54" class="color" data-tooltip="RGBA: 187, 192, 240, 1.0
   HEXA: #bbc0f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3639359b91ec41dbbe52b3ea0df8c1a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 166, 223, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3639359b91ec41dbbe52b3ea0df8c1a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3639359b91ec41dbbe52b3ea0df8c1a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3639359b91ec41dbbe52b3ea0df8c1a1" class="color" data-tooltip="RGBA: 150, 166, 223, 1.0
   HEXA: #96a6dfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f2415163ab894d4f8af10d6a72fec477 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 141, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f2415163ab894d4f8af10d6a72fec477::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f2415163ab894d4f8af10d6a72fec477:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f2415163ab894d4f8af10d6a72fec477" class="color" data-tooltip="RGBA: 115, 141, 206, 1.0
   HEXA: #738dceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_578d416c8bf945dda4d080d3a36b6b90 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(81, 113, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_578d416c8bf945dda4d080d3a36b6b90::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_578d416c8bf945dda4d080d3a36b6b90:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_578d416c8bf945dda4d080d3a36b6b90" class="color" data-tooltip="RGBA: 81, 113, 180, 1.0
   HEXA: #5171b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e80fc33051d443180c2b12f462f64c7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 89, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e80fc33051d443180c2b12f462f64c7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e80fc33051d443180c2b12f462f64c7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e80fc33051d443180c2b12f462f64c7" class="color" data-tooltip="RGBA: 58, 89, 147, 1.0
   HEXA: #3a5993ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_19a151106e074a73bf1ddaaa212a36de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(43, 66, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_19a151106e074a73bf1ddaaa212a36de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_19a151106e074a73bf1ddaaa212a36de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_19a151106e074a73bf1ddaaa212a36de" class="color" data-tooltip="RGBA: 43, 66, 111, 1.0
   HEXA: #2b426fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_353c97f5e97e4b68b9a27bb9e93c2ce6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 48, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_353c97f5e97e4b68b9a27bb9e93c2ce6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_353c97f5e97e4b68b9a27bb9e93c2ce6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_353c97f5e97e4b68b9a27bb9e93c2ce6" class="color" data-tooltip="RGBA: 31, 48, 79, 1.0
   HEXA: #1f304fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a46e856688b2495ab825709bd5d9fa25 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(21, 31, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a46e856688b2495ab825709bd5d9fa25::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a46e856688b2495ab825709bd5d9fa25:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a46e856688b2495ab825709bd5d9fa25" class="color" data-tooltip="RGBA: 21, 31, 50, 1.0
   HEXA: #151f32ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4030f0edc07a4e9e9df9ec61b335a3e5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(14, 21, 26, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4030f0edc07a4e9e9df9ec61b335a3e5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4030f0edc07a4e9e9df9ec61b335a3e5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4030f0edc07a4e9e9df9ec61b335a3e5" class="color" data-tooltip="RGBA: 14, 21, 26, 1.0
   HEXA: #0e151aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5fc717865ad6495eb38478169a2c655e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(14, 26, 17, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5fc717865ad6495eb38478169a2c655e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5fc717865ad6495eb38478169a2c655e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5fc717865ad6495eb38478169a2c655e" class="color" data-tooltip="RGBA: 14, 26, 17, 1.0
   HEXA: #0e1a11ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fecc66689c014ac189b83c24fb384313 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(21, 42, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fecc66689c014ac189b83c24fb384313::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fecc66689c014ac189b83c24fb384313:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fecc66689c014ac189b83c24fb384313" class="color" data-tooltip="RGBA: 21, 42, 23, 1.0
   HEXA: #152a17ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f88d9d8d66749bbac6e9b8175e3fe4b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 62, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f88d9d8d66749bbac6e9b8175e3fe4b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f88d9d8d66749bbac6e9b8175e3fe4b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f88d9d8d66749bbac6e9b8175e3fe4b" class="color" data-tooltip="RGBA: 29, 62, 32, 1.0
   HEXA: #1d3e20ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e73fe2eab3d14ad6bce035242480aa2e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 84, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e73fe2eab3d14ad6bce035242480aa2e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e73fe2eab3d14ad6bce035242480aa2e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e73fe2eab3d14ad6bce035242480aa2e" class="color" data-tooltip="RGBA: 39, 84, 44, 1.0
   HEXA: #27542cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_310a6f38471b43c188690f268e9bf1b1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(52, 109, 57, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_310a6f38471b43c188690f268e9bf1b1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_310a6f38471b43c188690f268e9bf1b1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_310a6f38471b43c188690f268e9bf1b1" class="color" data-tooltip="RGBA: 52, 109, 57, 1.0
   HEXA: #346d39ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b204b5e1e8b44bca954ce915462fc186 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 135, 71, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b204b5e1e8b44bca954ce915462fc186::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b204b5e1e8b44bca954ce915462fc186:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b204b5e1e8b44bca954ce915462fc186" class="color" data-tooltip="RGBA: 68, 135, 71, 1.0
   HEXA: #448747ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e1eb9ab7eca47f5a614151fedfa02c8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(100, 164, 92, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e1eb9ab7eca47f5a614151fedfa02c8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e1eb9ab7eca47f5a614151fedfa02c8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e1eb9ab7eca47f5a614151fedfa02c8" class="color" data-tooltip="RGBA: 100, 164, 92, 1.0
   HEXA: #64a45cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cab56d62bbd54957a07f1e256b05c1c2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 187, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cab56d62bbd54957a07f1e256b05c1c2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cab56d62bbd54957a07f1e256b05c1c2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cab56d62bbd54957a07f1e256b05c1c2" class="color" data-tooltip="RGBA: 139, 187, 113, 1.0
   HEXA: #8bbb71ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_090aebf4d6e2449baf908d8f58049ae5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 209, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_090aebf4d6e2449baf908d8f58049ae5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_090aebf4d6e2449baf908d8f58049ae5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_090aebf4d6e2449baf908d8f58049ae5" class="color" data-tooltip="RGBA: 181, 209, 135, 1.0
   HEXA: #b5d187ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5a4a7d712f584613b658ca5db5dff2a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 230, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5a4a7d712f584613b658ca5db5dff2a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5a4a7d712f584613b658ca5db5dff2a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5a4a7d712f584613b658ca5db5dff2a6" class="color" data-tooltip="RGBA: 219, 230, 155, 1.0
   HEXA: #dbe69bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_32c9890e7adb4c15a1c03f123937bada {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_32c9890e7adb4c15a1c03f123937bada div { flex: 1 1 0; }
           #_32c9890e7adb4c15a1c03f123937bada div.color { width: 100%; height: 100%; }
           #_32c9890e7adb4c15a1c03f123937bada div.cmap { width: 100%; height: auto; }
           #_32c9890e7adb4c15a1c03f123937bada div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>berlin</strong>
       
       <div id="_32c9890e7adb4c15a1c03f123937bada" class="color-map">
           
                           <div>
                   <style>
       #_d6551621f7fc44aa90c9a1335b973870 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 176, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d6551621f7fc44aa90c9a1335b973870::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d6551621f7fc44aa90c9a1335b973870:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d6551621f7fc44aa90c9a1335b973870" class="color" data-tooltip="RGBA: 158, 176, 255, 1.0
   HEXA: #9eb0ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_96dd28b9725e4a718d84b714d2125fc1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 172, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_96dd28b9725e4a718d84b714d2125fc1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_96dd28b9725e4a718d84b714d2125fc1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_96dd28b9725e4a718d84b714d2125fc1" class="color" data-tooltip="RGBA: 128, 172, 241, 1.0
   HEXA: #80acf1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb9f15ef926544d79cb48e4058e1fdf3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(93, 165, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb9f15ef926544d79cb48e4058e1fdf3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb9f15ef926544d79cb48e4058e1fdf3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb9f15ef926544d79cb48e4058e1fdf3" class="color" data-tooltip="RGBA: 93, 165, 221, 1.0
   HEXA: #5da5ddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95d356464b014d578bc4edab20a6335b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 148, 193, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95d356464b014d578bc4edab20a6335b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95d356464b014d578bc4edab20a6335b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95d356464b014d578bc4edab20a6335b" class="color" data-tooltip="RGBA: 65, 148, 193, 1.0
   HEXA: #4194c1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2d07baac2c364ce0811c11ee8b9ca5cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(48, 122, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2d07baac2c364ce0811c11ee8b9ca5cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2d07baac2c364ce0811c11ee8b9ca5cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2d07baac2c364ce0811c11ee8b9ca5cf" class="color" data-tooltip="RGBA: 48, 122, 158, 1.0
   HEXA: #307a9eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6830608e43594ac5aecfdb8c6cbda526 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 98, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6830608e43594ac5aecfdb8c6cbda526::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6830608e43594ac5aecfdb8c6cbda526:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6830608e43594ac5aecfdb8c6cbda526" class="color" data-tooltip="RGBA: 38, 98, 127, 1.0
   HEXA: #26627fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c4ab4936ef34c7d90dde8c4c6fe4b6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 73, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c4ab4936ef34c7d90dde8c4c6fe4b6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c4ab4936ef34c7d90dde8c4c6fe4b6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c4ab4936ef34c7d90dde8c4c6fe4b6c" class="color" data-tooltip="RGBA: 28, 73, 95, 1.0
   HEXA: #1c495fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d05e47a4388440d19cbd8d1646cb8a56 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(21, 51, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d05e47a4388440d19cbd8d1646cb8a56::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d05e47a4388440d19cbd8d1646cb8a56:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d05e47a4388440d19cbd8d1646cb8a56" class="color" data-tooltip="RGBA: 21, 51, 66, 1.0
   HEXA: #153342ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6affe9ad21264c8b8c4525658240b2ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 32, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6affe9ad21264c8b8c4525658240b2ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6affe9ad21264c8b8c4525658240b2ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6affe9ad21264c8b8c4525658240b2ab" class="color" data-tooltip="RGBA: 17, 32, 40, 1.0
   HEXA: #112028ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fee025fa387045a39d39197b48a29976 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(19, 17, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fee025fa387045a39d39197b48a29976::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fee025fa387045a39d39197b48a29976:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fee025fa387045a39d39197b48a29976" class="color" data-tooltip="RGBA: 19, 17, 18, 1.0
   HEXA: #131112ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44cc5af430474a4782c0a967e251cc47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(32, 11, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44cc5af430474a4782c0a967e251cc47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44cc5af430474a4782c0a967e251cc47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44cc5af430474a4782c0a967e251cc47" class="color" data-tooltip="RGBA: 32, 11, 4, 1.0
   HEXA: #200b04ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5e9c7aeb0f5748f887645e7e7fbbfaed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(48, 15, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5e9c7aeb0f5748f887645e7e7fbbfaed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5e9c7aeb0f5748f887645e7e7fbbfaed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5e9c7aeb0f5748f887645e7e7fbbfaed" class="color" data-tooltip="RGBA: 48, 15, 0, 1.0
   HEXA: #300f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50dadfd9f144476486b8229af921f72f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 19, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50dadfd9f144476486b8229af921f72f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50dadfd9f144476486b8229af921f72f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50dadfd9f144476486b8229af921f72f" class="color" data-tooltip="RGBA: 66, 19, 1, 1.0
   HEXA: #421301ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b8a138df67ac4e029a8a8fcc4b3c6c55 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 27, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b8a138df67ac4e029a8a8fcc4b3c6c55::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b8a138df67ac4e029a8a8fcc4b3c6c55:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b8a138df67ac4e029a8a8fcc4b3c6c55" class="color" data-tooltip="RGBA: 87, 27, 6, 1.0
   HEXA: #571b06ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b4fe70b11f55452781cc9b0e60fa4e1d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 45, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b4fe70b11f55452781cc9b0e60fa4e1d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b4fe70b11f55452781cc9b0e60fa4e1d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b4fe70b11f55452781cc9b0e60fa4e1d" class="color" data-tooltip="RGBA: 117, 45, 23, 1.0
   HEXA: #752d17ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bc54c1580e3d415d99b5cb938d73f030 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(144, 68, 48, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc54c1580e3d415d99b5cb938d73f030::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc54c1580e3d415d99b5cb938d73f030:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc54c1580e3d415d99b5cb938d73f030" class="color" data-tooltip="RGBA: 144, 68, 48, 1.0
   HEXA: #904430ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d3f036515fda4a24a320da89e17f90a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 94, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d3f036515fda4a24a320da89e17f90a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d3f036515fda4a24a320da89e17f90a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d3f036515fda4a24a320da89e17f90a1" class="color" data-tooltip="RGBA: 172, 94, 79, 1.0
   HEXA: #ac5e4fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2c2bd6687e5d4be9885bb19084926684 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 119, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2c2bd6687e5d4be9885bb19084926684::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2c2bd6687e5d4be9885bb19084926684:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2c2bd6687e5d4be9885bb19084926684" class="color" data-tooltip="RGBA: 198, 119, 108, 1.0
   HEXA: #c6776cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_710d7dfd75ec430383677927bc4154d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 147, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_710d7dfd75ec430383677927bc4154d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_710d7dfd75ec430383677927bc4154d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_710d7dfd75ec430383677927bc4154d4" class="color" data-tooltip="RGBA: 227, 147, 142, 1.0
   HEXA: #e3938eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7f3ed2816a0f4322a9c13600ee3b6c96 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 173, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7f3ed2816a0f4322a9c13600ee3b6c96::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7f3ed2816a0f4322a9c13600ee3b6c96:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7f3ed2816a0f4322a9c13600ee3b6c96" class="color" data-tooltip="RGBA: 255, 173, 173, 1.0
   HEXA: #ffadadff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_46dd80ae637c4ff39778dc14c97f15d9 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_46dd80ae637c4ff39778dc14c97f15d9 div { flex: 1 1 0; }
           #_46dd80ae637c4ff39778dc14c97f15d9 div.color { width: 100%; height: 100%; }
           #_46dd80ae637c4ff39778dc14c97f15d9 div.cmap { width: 100%; height: auto; }
           #_46dd80ae637c4ff39778dc14c97f15d9 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>roma</strong>
       
       <div id="_46dd80ae637c4ff39778dc14c97f15d9" class="color-map">
           
                           <div>
                   <style>
       #_2cf68aa9e2f843a1b215e21d1f603bf8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 25, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2cf68aa9e2f843a1b215e21d1f603bf8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2cf68aa9e2f843a1b215e21d1f603bf8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2cf68aa9e2f843a1b215e21d1f603bf8" class="color" data-tooltip="RGBA: 127, 25, 0, 1.0
   HEXA: #7f1900ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee5ae8a7aff04a7fad8e7de2aa0d4f97 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 58, 11, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee5ae8a7aff04a7fad8e7de2aa0d4f97::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee5ae8a7aff04a7fad8e7de2aa0d4f97:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee5ae8a7aff04a7fad8e7de2aa0d4f97" class="color" data-tooltip="RGBA: 141, 58, 11, 1.0
   HEXA: #8d3a0bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd762b1e778a4d2da23e8d515908d32c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 87, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd762b1e778a4d2da23e8d515908d32c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd762b1e778a4d2da23e8d515908d32c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd762b1e778a4d2da23e8d515908d32c" class="color" data-tooltip="RGBA: 156, 87, 23, 1.0
   HEXA: #9c5717ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_78f1b4ff3c1f4a779a8565341da3fcb0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(169, 113, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_78f1b4ff3c1f4a779a8565341da3fcb0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_78f1b4ff3c1f4a779a8565341da3fcb0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_78f1b4ff3c1f4a779a8565341da3fcb0" class="color" data-tooltip="RGBA: 169, 113, 34, 1.0
   HEXA: #a97122ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef67fb7c84d34f119ee714ec1d2a1a8e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 140, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef67fb7c84d34f119ee714ec1d2a1a8e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef67fb7c84d34f119ee714ec1d2a1a8e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef67fb7c84d34f119ee714ec1d2a1a8e" class="color" data-tooltip="RGBA: 182, 140, 47, 1.0
   HEXA: #b68c2fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_91fa859f3f0a4dd2814ca032b5e0fbaa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 168, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_91fa859f3f0a4dd2814ca032b5e0fbaa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_91fa859f3f0a4dd2814ca032b5e0fbaa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_91fa859f3f0a4dd2814ca032b5e0fbaa" class="color" data-tooltip="RGBA: 196, 168, 65, 1.0
   HEXA: #c4a841ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_157bec0f16674b36bc7f7fc9abd15ea2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 200, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_157bec0f16674b36bc7f7fc9abd15ea2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_157bec0f16674b36bc7f7fc9abd15ea2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_157bec0f16674b36bc7f7fc9abd15ea2" class="color" data-tooltip="RGBA: 213, 200, 97, 1.0
   HEXA: #d5c861ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_205e5e344324444ab7d87c04264d93a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 221, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_205e5e344324444ab7d87c04264d93a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_205e5e344324444ab7d87c04264d93a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_205e5e344324444ab7d87c04264d93a1" class="color" data-tooltip="RGBA: 224, 221, 134, 1.0
   HEXA: #e0dd86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea34d22943cf45bca4834232744f82d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(226, 232, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea34d22943cf45bca4834232744f82d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea34d22943cf45bca4834232744f82d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea34d22943cf45bca4834232744f82d2" class="color" data-tooltip="RGBA: 226, 232, 166, 1.0
   HEXA: #e2e8a6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fd89760b862e4066b2a3c54104d72c61 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 236, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fd89760b862e4066b2a3c54104d72c61::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fd89760b862e4066b2a3c54104d72c61:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fd89760b862e4066b2a3c54104d72c61" class="color" data-tooltip="RGBA: 214, 236, 192, 1.0
   HEXA: #d6ecc0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1db2cdea380f4bf89783416a36c1ea4c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 233, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1db2cdea380f4bf89783416a36c1ea4c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1db2cdea380f4bf89783416a36c1ea4c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1db2cdea380f4bf89783416a36c1ea4c" class="color" data-tooltip="RGBA: 189, 233, 207, 1.0
   HEXA: #bde9cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a628c6e5eff4c7ba752cc24f982f5a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 223, 215, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a628c6e5eff4c7ba752cc24f982f5a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a628c6e5eff4c7ba752cc24f982f5a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a628c6e5eff4c7ba752cc24f982f5a1" class="color" data-tooltip="RGBA: 152, 223, 215, 1.0
   HEXA: #98dfd7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0ad9c4265d7f474d80e2bd0fa428529e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 204, 214, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ad9c4265d7f474d80e2bd0fa428529e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ad9c4265d7f474d80e2bd0fa428529e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ad9c4265d7f474d80e2bd0fa428529e" class="color" data-tooltip="RGBA: 117, 204, 214, 1.0
   HEXA: #75ccd6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3c00ebdc61ce46edb2e414be6e3cdea1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(91, 182, 208, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c00ebdc61ce46edb2e414be6e3cdea1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c00ebdc61ce46edb2e414be6e3cdea1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c00ebdc61ce46edb2e414be6e3cdea1" class="color" data-tooltip="RGBA: 91, 182, 208, 1.0
   HEXA: #5bb6d0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_658924a43b1b4a98b83b833c13b68aba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(74, 157, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_658924a43b1b4a98b83b833c13b68aba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_658924a43b1b4a98b83b833c13b68aba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_658924a43b1b4a98b83b833c13b68aba" class="color" data-tooltip="RGBA: 74, 157, 199, 1.0
   HEXA: #4a9dc7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fbf4b314e3914eae963ff620ffae7fe4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 135, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fbf4b314e3914eae963ff620ffae7fe4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fbf4b314e3914eae963ff620ffae7fe4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fbf4b314e3914eae963ff620ffae7fe4" class="color" data-tooltip="RGBA: 64, 135, 189, 1.0
   HEXA: #4087bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_025913bfea484773adc867a5bdfdaf3c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(55, 112, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_025913bfea484773adc867a5bdfdaf3c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_025913bfea484773adc867a5bdfdaf3c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_025913bfea484773adc867a5bdfdaf3c" class="color" data-tooltip="RGBA: 55, 112, 180, 1.0
   HEXA: #3770b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_263412ae238445dca30f645e42cd763b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 92, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_263412ae238445dca30f645e42cd763b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_263412ae238445dca30f645e42cd763b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_263412ae238445dca30f645e42cd763b" class="color" data-tooltip="RGBA: 47, 92, 171, 1.0
   HEXA: #2f5cabff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95f5105c06ff4293bfbbc56e3ba49088 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 71, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95f5105c06ff4293bfbbc56e3ba49088::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95f5105c06ff4293bfbbc56e3ba49088:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95f5105c06ff4293bfbbc56e3ba49088" class="color" data-tooltip="RGBA: 37, 71, 161, 1.0
   HEXA: #2547a1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cbce677b17444661bd14434f60beec51 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 51, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cbce677b17444661bd14434f60beec51::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cbce677b17444661bd14434f60beec51:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cbce677b17444661bd14434f60beec51" class="color" data-tooltip="RGBA: 26, 51, 153, 1.0
   HEXA: #1a3399ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
   </div>


|


----


Sequential
----------

.. raw:: html


   <div id="_51b0207c32e749ec9481eb5bd155a368" class="color-swatch">
       <style>
           #_51b0207c32e749ec9481eb5bd155a368 {
               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%);
           }
           #_51b0207c32e749ec9481eb5bd155a368 div {
               width: 100%;
           }
           #_51b0207c32e749ec9481eb5bd155a368 > div.gradient {
               width: 100%;
               height: min(4rem, 100%);
               display: grid;
               gap: 0.2rem;
               grid-template-rows: 1rem auto;
           }
           #_51b0207c32e749ec9481eb5bd155a368 .color {
               height: minmax(1.5rem, 100%);
           }
           #_51b0207c32e749ec9481eb5bd155a368 > div.gradient > strong {
               margin: 0;
               padding: 0;
           }
           #_51b0207c32e749ec9481eb5bd155a368 img {height: 100%;}
       </style>
       
           <div class="gradient">
       <style>
           #_b6c0248a856b4b4aa345db4ac0b0c2d3 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b6c0248a856b4b4aa345db4ac0b0c2d3 div { flex: 1 1 0; }
           #_b6c0248a856b4b4aa345db4ac0b0c2d3 div.color { width: 100%; height: 100%; }
           #_b6c0248a856b4b4aa345db4ac0b0c2d3 div.cmap { width: 100%; height: auto; }
           #_b6c0248a856b4b4aa345db4ac0b0c2d3 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>algae</strong>
       
       <div id="_b6c0248a856b4b4aa345db4ac0b0c2d3" class="color-map">
           
                           <div>
                   <style>
       #_f33e597cb151448dadf658b64f6fb90e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 249, 208, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f33e597cb151448dadf658b64f6fb90e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f33e597cb151448dadf658b64f6fb90e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f33e597cb151448dadf658b64f6fb90e" class="color" data-tooltip="RGBA: 215, 249, 208, 1.0
   HEXA: #d7f9d0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_10cd101295f0415e86a9ebd8340515fb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 237, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_10cd101295f0415e86a9ebd8340515fb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_10cd101295f0415e86a9ebd8340515fb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_10cd101295f0415e86a9ebd8340515fb" class="color" data-tooltip="RGBA: 199, 237, 189, 1.0
   HEXA: #c7edbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_16494bef2c4741a681f1d7ec2f8561b6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 225, 169, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_16494bef2c4741a681f1d7ec2f8561b6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_16494bef2c4741a681f1d7ec2f8561b6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_16494bef2c4741a681f1d7ec2f8561b6" class="color" data-tooltip="RGBA: 181, 225, 169, 1.0
   HEXA: #b5e1a9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3af7c7bf53f24151817b621403882272 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(164, 214, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3af7c7bf53f24151817b621403882272::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3af7c7bf53f24151817b621403882272:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3af7c7bf53f24151817b621403882272" class="color" data-tooltip="RGBA: 164, 214, 152, 1.0
   HEXA: #a4d698ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b0e2bd5e0b5a48568920b90e5784f936 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 203, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b0e2bd5e0b5a48568920b90e5784f936::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b0e2bd5e0b5a48568920b90e5784f936:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b0e2bd5e0b5a48568920b90e5784f936" class="color" data-tooltip="RGBA: 146, 203, 134, 1.0
   HEXA: #92cb86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0da4dbede32b436c8c7e2f21fe867835 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 193, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0da4dbede32b436c8c7e2f21fe867835::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0da4dbede32b436c8c7e2f21fe867835:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0da4dbede32b436c8c7e2f21fe867835" class="color" data-tooltip="RGBA: 128, 193, 118, 1.0
   HEXA: #80c176ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_650ede9067a94db8a04007752acfe945 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 183, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_650ede9067a94db8a04007752acfe945::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_650ede9067a94db8a04007752acfe945:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_650ede9067a94db8a04007752acfe945" class="color" data-tooltip="RGBA: 107, 183, 103, 1.0
   HEXA: #6bb767ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34d07301009a44bb9a6dea88f1b312da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 174, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34d07301009a44bb9a6dea88f1b312da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34d07301009a44bb9a6dea88f1b312da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34d07301009a44bb9a6dea88f1b312da" class="color" data-tooltip="RGBA: 84, 174, 91, 1.0
   HEXA: #54ae5bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f7245beec1cc4fbe9f5ecaedd94022ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 165, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f7245beec1cc4fbe9f5ecaedd94022ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f7245beec1cc4fbe9f5ecaedd94022ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f7245beec1cc4fbe9f5ecaedd94022ca" class="color" data-tooltip="RGBA: 57, 165, 83, 1.0
   HEXA: #39a553ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_791112e82ebd4d67b43fbea1de8ea057 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 154, 81, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_791112e82ebd4d67b43fbea1de8ea057::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_791112e82ebd4d67b43fbea1de8ea057:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_791112e82ebd4d67b43fbea1de8ea057" class="color" data-tooltip="RGBA: 28, 154, 81, 1.0
   HEXA: #1c9a51ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0521b099fc4d4c1e844fb513d33b6622 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(11, 143, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0521b099fc4d4c1e844fb513d33b6622::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0521b099fc4d4c1e844fb513d33b6622:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0521b099fc4d4c1e844fb513d33b6622" class="color" data-tooltip="RGBA: 11, 143, 79, 1.0
   HEXA: #0b8f4fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_068a82dfa77f426196c3d9b701c2d0d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(7, 130, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_068a82dfa77f426196c3d9b701c2d0d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_068a82dfa77f426196c3d9b701c2d0d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_068a82dfa77f426196c3d9b701c2d0d1" class="color" data-tooltip="RGBA: 7, 130, 76, 1.0
   HEXA: #07824cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_07a4c11357784496bf2c54027b5fa8a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 118, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_07a4c11357784496bf2c54027b5fa8a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_07a4c11357784496bf2c54027b5fa8a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_07a4c11357784496bf2c54027b5fa8a3" class="color" data-tooltip="RGBA: 13, 118, 72, 1.0
   HEXA: #0d7648ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bc81f78a58214457b25ffd38cdb1dd62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(19, 106, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc81f78a58214457b25ffd38cdb1dd62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc81f78a58214457b25ffd38cdb1dd62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc81f78a58214457b25ffd38cdb1dd62" class="color" data-tooltip="RGBA: 19, 106, 67, 1.0
   HEXA: #136a43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_82961788ae30420f90576927b4595870 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(24, 94, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82961788ae30420f90576927b4595870::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82961788ae30420f90576927b4595870:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82961788ae30420f90576927b4595870" class="color" data-tooltip="RGBA: 24, 94, 61, 1.0
   HEXA: #185e3dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ba263b37b1e04cbbb0346eee3f59d1b4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 83, 54, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba263b37b1e04cbbb0346eee3f59d1b4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba263b37b1e04cbbb0346eee3f59d1b4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba263b37b1e04cbbb0346eee3f59d1b4" class="color" data-tooltip="RGBA: 26, 83, 54, 1.0
   HEXA: #1a5336ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_915e4767e0eb4977a87daaef38e30639 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 71, 46, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_915e4767e0eb4977a87daaef38e30639::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_915e4767e0eb4977a87daaef38e30639:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_915e4767e0eb4977a87daaef38e30639" class="color" data-tooltip="RGBA: 26, 71, 46, 1.0
   HEXA: #1a472eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5bc89c933b9d4d20ab6e1510f885dbcb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(24, 59, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5bc89c933b9d4d20ab6e1510f885dbcb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5bc89c933b9d4d20ab6e1510f885dbcb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5bc89c933b9d4d20ab6e1510f885dbcb" class="color" data-tooltip="RGBA: 24, 59, 38, 1.0
   HEXA: #183b26ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd62ffcf640c4a32b2478becafd799df { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(22, 47, 29, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd62ffcf640c4a32b2478becafd799df::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd62ffcf640c4a32b2478becafd799df:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd62ffcf640c4a32b2478becafd799df" class="color" data-tooltip="RGBA: 22, 47, 29, 1.0
   HEXA: #162f1dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aee8849b2eee4d439d0a4f4c1b12cebf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 36, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aee8849b2eee4d439d0a4f4c1b12cebf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aee8849b2eee4d439d0a4f4c1b12cebf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aee8849b2eee4d439d0a4f4c1b12cebf" class="color" data-tooltip="RGBA: 18, 36, 20, 1.0
   HEXA: #122414ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_03485836c7754753a8bfe14dfd2cb9a0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_03485836c7754753a8bfe14dfd2cb9a0 div { flex: 1 1 0; }
           #_03485836c7754753a8bfe14dfd2cb9a0 div.color { width: 100%; height: 100%; }
           #_03485836c7754753a8bfe14dfd2cb9a0 div.cmap { width: 100%; height: auto; }
           #_03485836c7754753a8bfe14dfd2cb9a0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>amp</strong>
       
       <div id="_03485836c7754753a8bfe14dfd2cb9a0" class="color-map">
           
                           <div>
                   <style>
       #_152a203607fd40bb9d2070813256aa36 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 237, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_152a203607fd40bb9d2070813256aa36::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_152a203607fd40bb9d2070813256aa36:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_152a203607fd40bb9d2070813256aa36" class="color" data-tooltip="RGBA: 241, 237, 236, 1.0
   HEXA: #f1edecff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_32f8269a1e764fbaa99254cf9d3165a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 221, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_32f8269a1e764fbaa99254cf9d3165a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_32f8269a1e764fbaa99254cf9d3165a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_32f8269a1e764fbaa99254cf9d3165a5" class="color" data-tooltip="RGBA: 234, 221, 218, 1.0
   HEXA: #eadddaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_89b118d39f78495e9e550ec74d24f1fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 205, 198, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_89b118d39f78495e9e550ec74d24f1fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_89b118d39f78495e9e550ec74d24f1fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_89b118d39f78495e9e550ec74d24f1fe" class="color" data-tooltip="RGBA: 228, 205, 198, 1.0
   HEXA: #e4cdc6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_317c60c88b744e8e8053168140f5c20e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 190, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_317c60c88b744e8e8053168140f5c20e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_317c60c88b744e8e8053168140f5c20e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_317c60c88b744e8e8053168140f5c20e" class="color" data-tooltip="RGBA: 223, 190, 179, 1.0
   HEXA: #dfbeb3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a6a4b7a3f3954ed3a0c8752b4405ad8f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 174, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6a4b7a3f3954ed3a0c8752b4405ad8f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6a4b7a3f3954ed3a0c8752b4405ad8f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6a4b7a3f3954ed3a0c8752b4405ad8f" class="color" data-tooltip="RGBA: 219, 174, 159, 1.0
   HEXA: #dbae9fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bc4d9718fdfe4b10bb6bf5373fc80e78 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 159, 140, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc4d9718fdfe4b10bb6bf5373fc80e78::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc4d9718fdfe4b10bb6bf5373fc80e78:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc4d9718fdfe4b10bb6bf5373fc80e78" class="color" data-tooltip="RGBA: 214, 159, 140, 1.0
   HEXA: #d69f8cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_83fcb33216f340e58287ffef8087f0d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 143, 120, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_83fcb33216f340e58287ffef8087f0d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_83fcb33216f340e58287ffef8087f0d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_83fcb33216f340e58287ffef8087f0d9" class="color" data-tooltip="RGBA: 209, 143, 120, 1.0
   HEXA: #d18f78ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_12acc415447043c4b3882a5e5f060d18 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(205, 128, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_12acc415447043c4b3882a5e5f060d18::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_12acc415447043c4b3882a5e5f060d18:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_12acc415447043c4b3882a5e5f060d18" class="color" data-tooltip="RGBA: 205, 128, 102, 1.0
   HEXA: #cd8066ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46b6670a3cb94497a888614f044c50c8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 113, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46b6670a3cb94497a888614f044c50c8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46b6670a3cb94497a888614f044c50c8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46b6670a3cb94497a888614f044c50c8" class="color" data-tooltip="RGBA: 200, 113, 85, 1.0
   HEXA: #c87155ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_962b0c9b73e64626a8dd7c7d26e20a77 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 97, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_962b0c9b73e64626a8dd7c7d26e20a77::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_962b0c9b73e64626a8dd7c7d26e20a77:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_962b0c9b73e64626a8dd7c7d26e20a77" class="color" data-tooltip="RGBA: 195, 97, 67, 1.0
   HEXA: #c36143ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_157b5d136ea94ab7958798855de01e1d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 81, 52, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_157b5d136ea94ab7958798855de01e1d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_157b5d136ea94ab7958798855de01e1d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_157b5d136ea94ab7958798855de01e1d" class="color" data-tooltip="RGBA: 189, 81, 52, 1.0
   HEXA: #bd5134ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_494a3ce3bd2649408072ebc0463b872f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 63, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_494a3ce3bd2649408072ebc0463b872f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_494a3ce3bd2649408072ebc0463b872f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_494a3ce3bd2649408072ebc0463b872f" class="color" data-tooltip="RGBA: 182, 63, 41, 1.0
   HEXA: #b63f29ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5207e8d35b6b465599a53500355feb7f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 45, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5207e8d35b6b465599a53500355feb7f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5207e8d35b6b465599a53500355feb7f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5207e8d35b6b465599a53500355feb7f" class="color" data-tooltip="RGBA: 174, 45, 36, 1.0
   HEXA: #ae2d24ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_18f97fc20cdc4f7c8dd2369435ede40b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(162, 30, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_18f97fc20cdc4f7c8dd2369435ede40b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_18f97fc20cdc4f7c8dd2369435ede40b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_18f97fc20cdc4f7c8dd2369435ede40b" class="color" data-tooltip="RGBA: 162, 30, 37, 1.0
   HEXA: #a21e25ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cef39611f9a14b1e81b2f4e87fd46d52 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(147, 18, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cef39611f9a14b1e81b2f4e87fd46d52::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cef39611f9a14b1e81b2f4e87fd46d52:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cef39611f9a14b1e81b2f4e87fd46d52" class="color" data-tooltip="RGBA: 147, 18, 40, 1.0
   HEXA: #931228ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0fe2788a309a4e9bad54da0a842ff322 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 14, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0fe2788a309a4e9bad54da0a842ff322::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0fe2788a309a4e9bad54da0a842ff322:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0fe2788a309a4e9bad54da0a842ff322" class="color" data-tooltip="RGBA: 131, 14, 41, 1.0
   HEXA: #830e29ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_82149a6e6ce64989b0896ec40302b708 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(112, 14, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82149a6e6ce64989b0896ec40302b708::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82149a6e6ce64989b0896ec40302b708:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82149a6e6ce64989b0896ec40302b708" class="color" data-tooltip="RGBA: 112, 14, 39, 1.0
   HEXA: #700e27ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9b4f36aed5a7435583de822da7c663d5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 14, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9b4f36aed5a7435583de822da7c663d5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9b4f36aed5a7435583de822da7c663d5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9b4f36aed5a7435583de822da7c663d5" class="color" data-tooltip="RGBA: 95, 14, 33, 1.0
   HEXA: #5f0e21ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e6a219c8a3d4906a741d0b674f7b98c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 12, 26, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e6a219c8a3d4906a741d0b674f7b98c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e6a219c8a3d4906a741d0b674f7b98c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e6a219c8a3d4906a741d0b674f7b98c" class="color" data-tooltip="RGBA: 77, 12, 26, 1.0
   HEXA: #4d0c1aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9fd05a66b5bb4bbe9eaf39dfbcca00a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 9, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9fd05a66b5bb4bbe9eaf39dfbcca00a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9fd05a66b5bb4bbe9eaf39dfbcca00a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9fd05a66b5bb4bbe9eaf39dfbcca00a1" class="color" data-tooltip="RGBA: 60, 9, 18, 1.0
   HEXA: #3c0912ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c5ea09720c7847b0a2b6ed6efbc9dd59 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c5ea09720c7847b0a2b6ed6efbc9dd59 div { flex: 1 1 0; }
           #_c5ea09720c7847b0a2b6ed6efbc9dd59 div.color { width: 100%; height: 100%; }
           #_c5ea09720c7847b0a2b6ed6efbc9dd59 div.cmap { width: 100%; height: auto; }
           #_c5ea09720c7847b0a2b6ed6efbc9dd59 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>deep</strong>
       
       <div id="_c5ea09720c7847b0a2b6ed6efbc9dd59" class="color-map">
           
                           <div>
                   <style>
       #_d85de3076a1343d38506cd896edb3fcd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 254, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d85de3076a1343d38506cd896edb3fcd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d85de3076a1343d38506cd896edb3fcd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d85de3076a1343d38506cd896edb3fcd" class="color" data-tooltip="RGBA: 253, 254, 204, 1.0
   HEXA: #fdfeccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_831770722a034f33a8bc26c393fb6e96 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 244, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_831770722a034f33a8bc26c393fb6e96::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_831770722a034f33a8bc26c393fb6e96:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_831770722a034f33a8bc26c393fb6e96" class="color" data-tooltip="RGBA: 227, 244, 189, 1.0
   HEXA: #e3f4bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be6bb556c9bc429ca3c7849b541a38ce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 234, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be6bb556c9bc429ca3c7849b541a38ce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be6bb556c9bc429ca3c7849b541a38ce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be6bb556c9bc429ca3c7849b541a38ce" class="color" data-tooltip="RGBA: 198, 234, 176, 1.0
   HEXA: #c6eab0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ac4515688b443bbbc524bc67a9d494b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 224, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ac4515688b443bbbc524bc67a9d494b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ac4515688b443bbbc524bc67a9d494b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ac4515688b443bbbc524bc67a9d494b" class="color" data-tooltip="RGBA: 170, 224, 168, 1.0
   HEXA: #aae0a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_38c15688f26f490885dd838f9d9f40d0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 214, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_38c15688f26f490885dd838f9d9f40d0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_38c15688f26f490885dd838f9d9f40d0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_38c15688f26f490885dd838f9d9f40d0" class="color" data-tooltip="RGBA: 139, 214, 163, 1.0
   HEXA: #8bd6a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_264be17e9b3b40fd9fac33cb3dc6e8ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 203, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_264be17e9b3b40fd9fac33cb3dc6e8ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_264be17e9b3b40fd9fac33cb3dc6e8ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_264be17e9b3b40fd9fac33cb3dc6e8ac" class="color" data-tooltip="RGBA: 115, 203, 163, 1.0
   HEXA: #73cba3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1c3408d9130748b6b0774ef344cb7627 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(97, 190, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1c3408d9130748b6b0774ef344cb7627::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1c3408d9130748b6b0774ef344cb7627:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1c3408d9130748b6b0774ef344cb7627" class="color" data-tooltip="RGBA: 97, 190, 164, 1.0
   HEXA: #61bea4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_80f618d85e98468593adb8d92a7d1e96 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(86, 176, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_80f618d85e98468593adb8d92a7d1e96::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_80f618d85e98468593adb8d92a7d1e96:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_80f618d85e98468593adb8d92a7d1e96" class="color" data-tooltip="RGBA: 86, 176, 164, 1.0
   HEXA: #56b0a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_820b63adc7f94b3ca9df9c3591c7f9ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(80, 163, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_820b63adc7f94b3ca9df9c3591c7f9ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_820b63adc7f94b3ca9df9c3591c7f9ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_820b63adc7f94b3ca9df9c3591c7f9ea" class="color" data-tooltip="RGBA: 80, 163, 162, 1.0
   HEXA: #50a3a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_25684de89a6b4f85b0ce4ed849de11c0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(74, 149, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_25684de89a6b4f85b0ce4ed849de11c0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_25684de89a6b4f85b0ce4ed849de11c0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_25684de89a6b4f85b0ce4ed849de11c0" class="color" data-tooltip="RGBA: 74, 149, 159, 1.0
   HEXA: #4a959fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dbd568a5b2d14c9aa60d399d66420a8d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 136, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dbd568a5b2d14c9aa60d399d66420a8d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dbd568a5b2d14c9aa60d399d66420a8d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dbd568a5b2d14c9aa60d399d66420a8d" class="color" data-tooltip="RGBA: 70, 136, 156, 1.0
   HEXA: #46889cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fe67763b018b4e65b53bb5b448e3147e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 122, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fe67763b018b4e65b53bb5b448e3147e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fe67763b018b4e65b53bb5b448e3147e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fe67763b018b4e65b53bb5b448e3147e" class="color" data-tooltip="RGBA: 66, 122, 153, 1.0
   HEXA: #427a99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_914efa4813134ce392394b0e6d882032 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 109, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_914efa4813134ce392394b0e6d882032::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_914efa4813134ce392394b0e6d882032:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_914efa4813134ce392394b0e6d882032" class="color" data-tooltip="RGBA: 63, 109, 151, 1.0
   HEXA: #3f6d97ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d969462f6589402d8731a10cb0af93b8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 96, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d969462f6589402d8731a10cb0af93b8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d969462f6589402d8731a10cb0af93b8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d969462f6589402d8731a10cb0af93b8" class="color" data-tooltip="RGBA: 62, 96, 148, 1.0
   HEXA: #3e6094ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f32a34b8f88949d9903291776765c127 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 80, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f32a34b8f88949d9903291776765c127::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f32a34b8f88949d9903291776765c127:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f32a34b8f88949d9903291776765c127" class="color" data-tooltip="RGBA: 63, 80, 142, 1.0
   HEXA: #3f508eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_add8dae5d89247c1a33deec7eb64cc09 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 67, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_add8dae5d89247c1a33deec7eb64cc09::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_add8dae5d89247c1a33deec7eb64cc09:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_add8dae5d89247c1a33deec7eb64cc09" class="color" data-tooltip="RGBA: 66, 67, 128, 1.0
   HEXA: #424380ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a73b2e681d704ccda6d4b83b3c6f674f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 56, 105, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a73b2e681d704ccda6d4b83b3c6f674f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a73b2e681d704ccda6d4b83b3c6f674f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a73b2e681d704ccda6d4b83b3c6f674f" class="color" data-tooltip="RGBA: 63, 56, 105, 1.0
   HEXA: #3f3869ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c44baeca065b4e2b92ed5c252442118e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 46, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c44baeca065b4e2b92ed5c252442118e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c44baeca065b4e2b92ed5c252442118e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c44baeca065b4e2b92ed5c252442118e" class="color" data-tooltip="RGBA: 57, 46, 84, 1.0
   HEXA: #392e54ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee6eef72e8ad4baaba15253e688e5ac2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(48, 36, 62, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee6eef72e8ad4baaba15253e688e5ac2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee6eef72e8ad4baaba15253e688e5ac2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee6eef72e8ad4baaba15253e688e5ac2" class="color" data-tooltip="RGBA: 48, 36, 62, 1.0
   HEXA: #30243eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_317bb09ef9894750842670d75b1e2478 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 26, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_317bb09ef9894750842670d75b1e2478::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_317bb09ef9894750842670d75b1e2478:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_317bb09ef9894750842670d75b1e2478" class="color" data-tooltip="RGBA: 40, 26, 44, 1.0
   HEXA: #281a2cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_75b5421b263f4f5a8e5dc99f54fdab03 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_75b5421b263f4f5a8e5dc99f54fdab03 div { flex: 1 1 0; }
           #_75b5421b263f4f5a8e5dc99f54fdab03 div.color { width: 100%; height: 100%; }
           #_75b5421b263f4f5a8e5dc99f54fdab03 div.cmap { width: 100%; height: auto; }
           #_75b5421b263f4f5a8e5dc99f54fdab03 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>dense</strong>
       
       <div id="_75b5421b263f4f5a8e5dc99f54fdab03" class="color-map">
           
                           <div>
                   <style>
       #_bd62fb550fb54963afa15c42b6a41667 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 241, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd62fb550fb54963afa15c42b6a41667::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd62fb550fb54963afa15c42b6a41667:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd62fb550fb54963afa15c42b6a41667" class="color" data-tooltip="RGBA: 230, 241, 241, 1.0
   HEXA: #e6f1f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b00460dc00f1495ca9648431e5077cfd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 230, 233, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b00460dc00f1495ca9648431e5077cfd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b00460dc00f1495ca9648431e5077cfd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b00460dc00f1495ca9648431e5077cfd" class="color" data-tooltip="RGBA: 208, 230, 233, 1.0
   HEXA: #d0e6e9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee82f7ec71d14bb798abcf0d37988168 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 218, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee82f7ec71d14bb798abcf0d37988168::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee82f7ec71d14bb798abcf0d37988168:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee82f7ec71d14bb798abcf0d37988168" class="color" data-tooltip="RGBA: 185, 218, 228, 1.0
   HEXA: #b9dae4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b6895722bf84fac845ac0bd326a6cb6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 207, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b6895722bf84fac845ac0bd326a6cb6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b6895722bf84fac845ac0bd326a6cb6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b6895722bf84fac845ac0bd326a6cb6" class="color" data-tooltip="RGBA: 165, 207, 226, 1.0
   HEXA: #a5cfe2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ed7c0bc1082e4255afc23e5534b13eb5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 195, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ed7c0bc1082e4255afc23e5534b13eb5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ed7c0bc1082e4255afc23e5534b13eb5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ed7c0bc1082e4255afc23e5534b13eb5" class="color" data-tooltip="RGBA: 146, 195, 226, 1.0
   HEXA: #92c3e2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c470e6e61c6c4e6786f04aae8f1a7373 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 182, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c470e6e61c6c4e6786f04aae8f1a7373::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c470e6e61c6c4e6786f04aae8f1a7373:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c470e6e61c6c4e6786f04aae8f1a7373" class="color" data-tooltip="RGBA: 131, 182, 227, 1.0
   HEXA: #83b6e3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e6e99399edac455c8c6fc996994659b5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 168, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e6e99399edac455c8c6fc996994659b5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e6e99399edac455c8c6fc996994659b5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e6e99399edac455c8c6fc996994659b5" class="color" data-tooltip="RGBA: 120, 168, 228, 1.0
   HEXA: #78a8e4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dd6c16745e02465c97a890729c7e683b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 154, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dd6c16745e02465c97a890729c7e683b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dd6c16745e02465c97a890729c7e683b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dd6c16745e02465c97a890729c7e683b" class="color" data-tooltip="RGBA: 116, 154, 228, 1.0
   HEXA: #749ae4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_21b54a96b8fa41c2b6cad95e83cfd477 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 138, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_21b54a96b8fa41c2b6cad95e83cfd477::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_21b54a96b8fa41c2b6cad95e83cfd477:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_21b54a96b8fa41c2b6cad95e83cfd477" class="color" data-tooltip="RGBA: 116, 138, 226, 1.0
   HEXA: #748ae2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5bf479d0e4e24a2ea73f132866e0e965 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(118, 121, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5bf479d0e4e24a2ea73f132866e0e965::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5bf479d0e4e24a2ea73f132866e0e965:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5bf479d0e4e24a2ea73f132866e0e965" class="color" data-tooltip="RGBA: 118, 121, 218, 1.0
   HEXA: #7679daff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c8b8506504404c2c8fbbacc908c87652 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 106, 208, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c8b8506504404c2c8fbbacc908c87652::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c8b8506504404c2c8fbbacc908c87652:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c8b8506504404c2c8fbbacc908c87652" class="color" data-tooltip="RGBA: 120, 106, 208, 1.0
   HEXA: #786ad0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4bb1be1798be4f6dbb520ff1dd8b3bfc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 90, 193, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4bb1be1798be4f6dbb520ff1dd8b3bfc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4bb1be1798be4f6dbb520ff1dd8b3bfc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4bb1be1798be4f6dbb520ff1dd8b3bfc" class="color" data-tooltip="RGBA: 121, 90, 193, 1.0
   HEXA: #795ac1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1972b2a4612f403a8c787cc72059fa8a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 76, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1972b2a4612f403a8c787cc72059fa8a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1972b2a4612f403a8c787cc72059fa8a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1972b2a4612f403a8c787cc72059fa8a" class="color" data-tooltip="RGBA: 120, 76, 177, 1.0
   HEXA: #784cb1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1fb12292ac104d1dabb4b4ce17c29e1f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 62, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1fb12292ac104d1dabb4b4ce17c29e1f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1fb12292ac104d1dabb4b4ce17c29e1f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1fb12292ac104d1dabb4b4ce17c29e1f" class="color" data-tooltip="RGBA: 117, 62, 159, 1.0
   HEXA: #753e9fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_06f71c9caa874170aa639007a2b99b94 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(112, 49, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_06f71c9caa874170aa639007a2b99b94::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_06f71c9caa874170aa639007a2b99b94:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_06f71c9caa874170aa639007a2b99b94" class="color" data-tooltip="RGBA: 112, 49, 138, 1.0
   HEXA: #70318aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f9374ef950ce4631a712de44d530e160 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 38, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f9374ef950ce4631a712de44d530e160::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f9374ef950ce4631a712de44d530e160:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f9374ef950ce4631a712de44d530e160" class="color" data-tooltip="RGBA: 106, 38, 117, 1.0
   HEXA: #6a2675ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0a2506241bd543fbb29c9c1fe0ce51b6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(96, 28, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0a2506241bd543fbb29c9c1fe0ce51b6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0a2506241bd543fbb29c9c1fe0ce51b6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0a2506241bd543fbb29c9c1fe0ce51b6" class="color" data-tooltip="RGBA: 96, 28, 94, 1.0
   HEXA: #601c5eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_51f9a96164024d3c8921216f3e4a587f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(85, 22, 73, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_51f9a96164024d3c8921216f3e4a587f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_51f9a96164024d3c8921216f3e4a587f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_51f9a96164024d3c8921216f3e4a587f" class="color" data-tooltip="RGBA: 85, 22, 73, 1.0
   HEXA: #551649ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_82057c3c327341d9adc4e002d156fe99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 18, 52, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82057c3c327341d9adc4e002d156fe99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82057c3c327341d9adc4e002d156fe99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82057c3c327341d9adc4e002d156fe99" class="color" data-tooltip="RGBA: 70, 18, 52, 1.0
   HEXA: #461234ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f610688a9a324aee8233aa31de765ae8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 14, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f610688a9a324aee8233aa31de765ae8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f610688a9a324aee8233aa31de765ae8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f610688a9a324aee8233aa31de765ae8" class="color" data-tooltip="RGBA: 54, 14, 36, 1.0
   HEXA: #360e24ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_17927922ebc0415cb54dc806715a9b7a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_17927922ebc0415cb54dc806715a9b7a div { flex: 1 1 0; }
           #_17927922ebc0415cb54dc806715a9b7a div.color { width: 100%; height: 100%; }
           #_17927922ebc0415cb54dc806715a9b7a div.cmap { width: 100%; height: auto; }
           #_17927922ebc0415cb54dc806715a9b7a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>gray</strong>
       
       <div id="_17927922ebc0415cb54dc806715a9b7a" class="color-map">
           
                           <div>
                   <style>
       #_c0a506b1d11f4d909b58c51eef67056f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c0a506b1d11f4d909b58c51eef67056f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c0a506b1d11f4d909b58c51eef67056f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c0a506b1d11f4d909b58c51eef67056f" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c3d5986afe55419bae958ab6b26c1a88 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(6, 6, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c3d5986afe55419bae958ab6b26c1a88::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c3d5986afe55419bae958ab6b26c1a88:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c3d5986afe55419bae958ab6b26c1a88" class="color" data-tooltip="RGBA: 6, 6, 6, 1.0
   HEXA: #060606ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b6dc297121c249bfab1ef884c025cfc4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(21, 20, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b6dc297121c249bfab1ef884c025cfc4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b6dc297121c249bfab1ef884c025cfc4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b6dc297121c249bfab1ef884c025cfc4" class="color" data-tooltip="RGBA: 21, 20, 20, 1.0
   HEXA: #151414ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e989ada0f46d4bfeb99bc545e92c79c0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 33, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e989ada0f46d4bfeb99bc545e92c79c0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e989ada0f46d4bfeb99bc545e92c79c0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e989ada0f46d4bfeb99bc545e92c79c0" class="color" data-tooltip="RGBA: 33, 33, 33, 1.0
   HEXA: #212121ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a128812f9ce44713bb2e72f0b839f5a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 46, 46, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a128812f9ce44713bb2e72f0b839f5a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a128812f9ce44713bb2e72f0b839f5a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a128812f9ce44713bb2e72f0b839f5a4" class="color" data-tooltip="RGBA: 46, 46, 46, 1.0
   HEXA: #2e2e2eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b3ee2183b86f471385e730bbb880f586 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 57, 57, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b3ee2183b86f471385e730bbb880f586::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b3ee2183b86f471385e730bbb880f586:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b3ee2183b86f471385e730bbb880f586" class="color" data-tooltip="RGBA: 58, 57, 57, 1.0
   HEXA: #3a3939ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2169d66758fc430ea1127396ee148203 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(71, 70, 70, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2169d66758fc430ea1127396ee148203::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2169d66758fc430ea1127396ee148203:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2169d66758fc430ea1127396ee148203" class="color" data-tooltip="RGBA: 71, 70, 70, 1.0
   HEXA: #474646ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d9d9c0d9a2bc46aba1a8695bd27c006b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 82, 81, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d9d9c0d9a2bc46aba1a8695bd27c006b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d9d9c0d9a2bc46aba1a8695bd27c006b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d9d9c0d9a2bc46aba1a8695bd27c006b" class="color" data-tooltip="RGBA: 82, 82, 81, 1.0
   HEXA: #525251ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b26e68366f934aa39b8e710d889b5451 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 94, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b26e68366f934aa39b8e710d889b5451::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b26e68366f934aa39b8e710d889b5451:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b26e68366f934aa39b8e710d889b5451" class="color" data-tooltip="RGBA: 94, 94, 93, 1.0
   HEXA: #5e5e5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_705e94cedf344419b5bd8a80d6b710a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 107, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_705e94cedf344419b5bd8a80d6b710a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_705e94cedf344419b5bd8a80d6b710a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_705e94cedf344419b5bd8a80d6b710a0" class="color" data-tooltip="RGBA: 107, 107, 106, 1.0
   HEXA: #6b6b6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d01dc0a06d08403ebe360dda869a202f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 119, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d01dc0a06d08403ebe360dda869a202f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d01dc0a06d08403ebe360dda869a202f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d01dc0a06d08403ebe360dda869a202f" class="color" data-tooltip="RGBA: 119, 119, 118, 1.0
   HEXA: #777776ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e412ced641a74d34aa5d78ae424f270e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 132, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e412ced641a74d34aa5d78ae424f270e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e412ced641a74d34aa5d78ae424f270e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e412ced641a74d34aa5d78ae424f270e" class="color" data-tooltip="RGBA: 133, 132, 132, 1.0
   HEXA: #858484ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d535f737fa254159854c9d269887dd31 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 145, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d535f737fa254159854c9d269887dd31::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d535f737fa254159854c9d269887dd31:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d535f737fa254159854c9d269887dd31" class="color" data-tooltip="RGBA: 146, 145, 145, 1.0
   HEXA: #929191ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_457809ba9b3d4b5d891ab64459c08aca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(159, 159, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_457809ba9b3d4b5d891ab64459c08aca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_457809ba9b3d4b5d891ab64459c08aca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_457809ba9b3d4b5d891ab64459c08aca" class="color" data-tooltip="RGBA: 159, 159, 158, 1.0
   HEXA: #9f9f9eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e01ad0a427794f1abe2f615b5a200cb2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 173, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e01ad0a427794f1abe2f615b5a200cb2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e01ad0a427794f1abe2f615b5a200cb2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e01ad0a427794f1abe2f615b5a200cb2" class="color" data-tooltip="RGBA: 174, 173, 173, 1.0
   HEXA: #aeadadff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c2b15121d73248478d063fdbd005358b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 188, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c2b15121d73248478d063fdbd005358b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c2b15121d73248478d063fdbd005358b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c2b15121d73248478d063fdbd005358b" class="color" data-tooltip="RGBA: 188, 188, 187, 1.0
   HEXA: #bcbcbbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_05addad5f8434a50b3eafd78f5e35dcb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 204, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_05addad5f8434a50b3eafd78f5e35dcb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_05addad5f8434a50b3eafd78f5e35dcb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_05addad5f8434a50b3eafd78f5e35dcb" class="color" data-tooltip="RGBA: 204, 204, 203, 1.0
   HEXA: #cccccbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_10004924c06548329a6415c2d89aecd4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 220, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_10004924c06548329a6415c2d89aecd4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_10004924c06548329a6415c2d89aecd4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_10004924c06548329a6415c2d89aecd4" class="color" data-tooltip="RGBA: 220, 220, 219, 1.0
   HEXA: #dcdcdbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8f305a4f42774893874949c5bc4111a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 237, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8f305a4f42774893874949c5bc4111a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8f305a4f42774893874949c5bc4111a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8f305a4f42774893874949c5bc4111a6" class="color" data-tooltip="RGBA: 238, 237, 236, 1.0
   HEXA: #eeedecff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9083d0102ad84bafb6921d9888e0e948 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9083d0102ad84bafb6921d9888e0e948::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9083d0102ad84bafb6921d9888e0e948:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9083d0102ad84bafb6921d9888e0e948" class="color" data-tooltip="RGBA: 255, 255, 253, 1.0
   HEXA: #fffffdff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8eebf0ca4c8f4a36a52e137ae245c827 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8eebf0ca4c8f4a36a52e137ae245c827 div { flex: 1 1 0; }
           #_8eebf0ca4c8f4a36a52e137ae245c827 div.color { width: 100%; height: 100%; }
           #_8eebf0ca4c8f4a36a52e137ae245c827 div.cmap { width: 100%; height: auto; }
           #_8eebf0ca4c8f4a36a52e137ae245c827 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>haline</strong>
       
       <div id="_8eebf0ca4c8f4a36a52e137ae245c827" class="color-map">
           
                           <div>
                   <style>
       #_ff8f7ab257094a74a5b6035da94d2c5a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 24, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ff8f7ab257094a74a5b6035da94d2c5a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ff8f7ab257094a74a5b6035da94d2c5a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ff8f7ab257094a74a5b6035da94d2c5a" class="color" data-tooltip="RGBA: 42, 24, 108, 1.0
   HEXA: #2a186cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d8cd2833fb64a169eed4985b7f9492c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 28, 140, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d8cd2833fb64a169eed4985b7f9492c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d8cd2833fb64a169eed4985b7f9492c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d8cd2833fb64a169eed4985b7f9492c" class="color" data-tooltip="RGBA: 46, 28, 140, 1.0
   HEXA: #2e1c8cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_687b8fffa2094afea7ee68e3944e67f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 43, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_687b8fffa2094afea7ee68e3944e67f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_687b8fffa2094afea7ee68e3944e67f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_687b8fffa2094afea7ee68e3944e67f1" class="color" data-tooltip="RGBA: 38, 43, 163, 1.0
   HEXA: #262ba3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_460694117571408b886f90eeb8c12f86 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(22, 64, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_460694117571408b886f90eeb8c12f86::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_460694117571408b886f90eeb8c12f86:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_460694117571408b886f90eeb8c12f86" class="color" data-tooltip="RGBA: 22, 64, 157, 1.0
   HEXA: #16409dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_456af2a5d7f946d39dbfaa3d96932dc3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(12, 81, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_456af2a5d7f946d39dbfaa3d96932dc3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_456af2a5d7f946d39dbfaa3d96932dc3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_456af2a5d7f946d39dbfaa3d96932dc3" class="color" data-tooltip="RGBA: 12, 81, 149, 1.0
   HEXA: #0c5195ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b20f3185f08d4f9ba1cdf7c46cbed616 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 94, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b20f3185f08d4f9ba1cdf7c46cbed616::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b20f3185f08d4f9ba1cdf7c46cbed616:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b20f3185f08d4f9ba1cdf7c46cbed616" class="color" data-tooltip="RGBA: 17, 94, 143, 1.0
   HEXA: #115e8fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4cc3ba9b848b47ada6710593357368a8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 107, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4cc3ba9b848b47ada6710593357368a8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4cc3ba9b848b47ada6710593357368a8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4cc3ba9b848b47ada6710593357368a8" class="color" data-tooltip="RGBA: 29, 107, 139, 1.0
   HEXA: #1d6b8bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7352c4477b0a4510900e0582a6b5db0d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 118, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7352c4477b0a4510900e0582a6b5db0d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7352c4477b0a4510900e0582a6b5db0d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7352c4477b0a4510900e0582a6b5db0d" class="color" data-tooltip="RGBA: 39, 118, 138, 1.0
   HEXA: #27768aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_59c76ec9f89b484d924f2fb2a9ef97a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(48, 129, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_59c76ec9f89b484d924f2fb2a9ef97a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_59c76ec9f89b484d924f2fb2a9ef97a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_59c76ec9f89b484d924f2fb2a9ef97a6" class="color" data-tooltip="RGBA: 48, 129, 137, 1.0
   HEXA: #308189ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_77e8cdcdc28a4dc886ae548c311641ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 141, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_77e8cdcdc28a4dc886ae548c311641ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_77e8cdcdc28a4dc886ae548c311641ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_77e8cdcdc28a4dc886ae548c311641ab" class="color" data-tooltip="RGBA: 56, 141, 136, 1.0
   HEXA: #388d88ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5a5602bad2374d7c80939c2dffd36ac4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 153, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5a5602bad2374d7c80939c2dffd36ac4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5a5602bad2374d7c80939c2dffd36ac4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5a5602bad2374d7c80939c2dffd36ac4" class="color" data-tooltip="RGBA: 63, 153, 134, 1.0
   HEXA: #3f9986ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6a3416b2f67543219f0b6400d23406c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(71, 165, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6a3416b2f67543219f0b6400d23406c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6a3416b2f67543219f0b6400d23406c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6a3416b2f67543219f0b6400d23406c6" class="color" data-tooltip="RGBA: 71, 165, 131, 1.0
   HEXA: #47a583ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46adca91fc174aa68b578fe0908a28ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(81, 177, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46adca91fc174aa68b578fe0908a28ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46adca91fc174aa68b578fe0908a28ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46adca91fc174aa68b578fe0908a28ba" class="color" data-tooltip="RGBA: 81, 177, 125, 1.0
   HEXA: #51b17dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_87616cea73a840008e6f7d39032416aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 189, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_87616cea73a840008e6f7d39032416aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_87616cea73a840008e6f7d39032416aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_87616cea73a840008e6f7d39032416aa" class="color" data-tooltip="RGBA: 94, 189, 117, 1.0
   HEXA: #5ebd75ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d6a1229f2417466d9a80768712e17f04 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 200, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d6a1229f2417466d9a80768712e17f04::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d6a1229f2417466d9a80768712e17f04:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d6a1229f2417466d9a80768712e17f04" class="color" data-tooltip="RGBA: 115, 200, 106, 1.0
   HEXA: #73c86aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a9df008151894d3fb090de1ea73a1213 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 210, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a9df008151894d3fb090de1ea73a1213::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a9df008151894d3fb090de1ea73a1213:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a9df008151894d3fb090de1ea73a1213" class="color" data-tooltip="RGBA: 141, 210, 95, 1.0
   HEXA: #8dd25fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_78e9448490bb4568abaddf87b6652868 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(175, 217, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_78e9448490bb4568abaddf87b6652868::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_78e9448490bb4568abaddf87b6652868:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_78e9448490bb4568abaddf87b6652868" class="color" data-tooltip="RGBA: 175, 217, 93, 1.0
   HEXA: #afd95dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_43340c8ecfe541afa50613dcffdb5896 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 223, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_43340c8ecfe541afa50613dcffdb5896::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_43340c8ecfe541afa50613dcffdb5896:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_43340c8ecfe541afa50613dcffdb5896" class="color" data-tooltip="RGBA: 204, 223, 106, 1.0
   HEXA: #ccdf6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5d49229b4fd249c8b470deb877ce1d09 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 231, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5d49229b4fd249c8b470deb877ce1d09::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5d49229b4fd249c8b470deb877ce1d09:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5d49229b4fd249c8b470deb877ce1d09" class="color" data-tooltip="RGBA: 231, 231, 129, 1.0
   HEXA: #e7e781ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_38b24a15625b47aebcee1c679055706b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 239, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_38b24a15625b47aebcee1c679055706b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_38b24a15625b47aebcee1c679055706b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_38b24a15625b47aebcee1c679055706b" class="color" data-tooltip="RGBA: 253, 239, 154, 1.0
   HEXA: #fdef9aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_36e66f56c96b4e5495d8842248f3c4d9 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_36e66f56c96b4e5495d8842248f3c4d9 div { flex: 1 1 0; }
           #_36e66f56c96b4e5495d8842248f3c4d9 div.color { width: 100%; height: 100%; }
           #_36e66f56c96b4e5495d8842248f3c4d9 div.cmap { width: 100%; height: auto; }
           #_36e66f56c96b4e5495d8842248f3c4d9 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>ice</strong>
       
       <div id="_36e66f56c96b4e5495d8842248f3c4d9" class="color-map">
           
                           <div>
                   <style>
       #_bc490bfee0e64109ba636239c0d52db6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 6, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc490bfee0e64109ba636239c0d52db6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc490bfee0e64109ba636239c0d52db6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc490bfee0e64109ba636239c0d52db6" class="color" data-tooltip="RGBA: 4, 6, 19, 1.0
   HEXA: #040613ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b299e9be03545568155e1e8c2cf236f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 17, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b299e9be03545568155e1e8c2cf236f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b299e9be03545568155e1e8c2cf236f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b299e9be03545568155e1e8c2cf236f" class="color" data-tooltip="RGBA: 16, 17, 37, 1.0
   HEXA: #101125ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_59518c5bd75b449aaba0e80f98f8156c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 28, 58, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_59518c5bd75b449aaba0e80f98f8156c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_59518c5bd75b449aaba0e80f98f8156c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_59518c5bd75b449aaba0e80f98f8156c" class="color" data-tooltip="RGBA: 29, 28, 58, 1.0
   HEXA: #1d1c3aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_19d2cd9a26864870b4fdc3809ab07e43 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 38, 78, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_19d2cd9a26864870b4fdc3809ab07e43::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_19d2cd9a26864870b4fdc3809ab07e43:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_19d2cd9a26864870b4fdc3809ab07e43" class="color" data-tooltip="RGBA: 40, 38, 78, 1.0
   HEXA: #28264eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_96072d5a53cd4af7b1f67c87072065a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 49, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_96072d5a53cd4af7b1f67c87072065a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_96072d5a53cd4af7b1f67c87072065a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_96072d5a53cd4af7b1f67c87072065a5" class="color" data-tooltip="RGBA: 50, 49, 100, 1.0
   HEXA: #323164ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c5a8d3295f894c118bf12ae99ef34496 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 59, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c5a8d3295f894c118bf12ae99ef34496::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c5a8d3295f894c118bf12ae99ef34496:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c5a8d3295f894c118bf12ae99ef34496" class="color" data-tooltip="RGBA: 58, 59, 122, 1.0
   HEXA: #3a3b7aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4938b9c4691c4caf878009f5a2985fa7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 72, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4938b9c4691c4caf878009f5a2985fa7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4938b9c4691c4caf878009f5a2985fa7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4938b9c4691c4caf878009f5a2985fa7" class="color" data-tooltip="RGBA: 62, 72, 144, 1.0
   HEXA: #3e4890ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f19f28177f004d468e5f87f6719567be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 85, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f19f28177f004d468e5f87f6719567be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f19f28177f004d468e5f87f6719567be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f19f28177f004d468e5f87f6719567be" class="color" data-tooltip="RGBA: 63, 85, 161, 1.0
   HEXA: #3f55a1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d31833679fdf48509424ca3c342a013a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 99, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d31833679fdf48509424ca3c342a013a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d31833679fdf48509424ca3c342a013a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d31833679fdf48509424ca3c342a013a" class="color" data-tooltip="RGBA: 62, 99, 173, 1.0
   HEXA: #3e63adff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_54db8a4d5e114d63951e5d5254e77194 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 115, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_54db8a4d5e114d63951e5d5254e77194::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_54db8a4d5e114d63951e5d5254e77194:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_54db8a4d5e114d63951e5d5254e77194" class="color" data-tooltip="RGBA: 64, 115, 180, 1.0
   HEXA: #4073b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f97b6c7deeef4903a67c5ac526b5824d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 129, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f97b6c7deeef4903a67c5ac526b5824d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f97b6c7deeef4903a67c5ac526b5824d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f97b6c7deeef4903a67c5ac526b5824d" class="color" data-tooltip="RGBA: 69, 129, 186, 1.0
   HEXA: #4581baff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53eeca0431714d1baefd37a9a56f82dd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(78, 144, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53eeca0431714d1baefd37a9a56f82dd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53eeca0431714d1baefd37a9a56f82dd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53eeca0431714d1baefd37a9a56f82dd" class="color" data-tooltip="RGBA: 78, 144, 191, 1.0
   HEXA: #4e90bfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8ac656ebd5eb4ce3af525946c29cbcbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 158, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8ac656ebd5eb4ce3af525946c29cbcbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8ac656ebd5eb4ce3af525946c29cbcbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8ac656ebd5eb4ce3af525946c29cbcbd" class="color" data-tooltip="RGBA: 89, 158, 196, 1.0
   HEXA: #599ec4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ce93dec83b684c32853d54605a3206b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 172, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce93dec83b684c32853d54605a3206b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce93dec83b684c32853d54605a3206b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce93dec83b684c32853d54605a3206b3" class="color" data-tooltip="RGBA: 101, 172, 201, 1.0
   HEXA: #65acc9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_df6a7a5233d74e12af3d8c4564a97f72 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 187, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_df6a7a5233d74e12af3d8c4564a97f72::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_df6a7a5233d74e12af3d8c4564a97f72:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_df6a7a5233d74e12af3d8c4564a97f72" class="color" data-tooltip="RGBA: 117, 187, 207, 1.0
   HEXA: #75bbcfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8945d01e857d4da09311beddcd74821e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 200, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8945d01e857d4da09311beddcd74821e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8945d01e857d4da09311beddcd74821e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8945d01e857d4da09311beddcd74821e" class="color" data-tooltip="RGBA: 136, 200, 212, 1.0
   HEXA: #88c8d4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_370b94e969ef4efba5339ebe96d1c712 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 214, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_370b94e969ef4efba5339ebe96d1c712::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_370b94e969ef4efba5339ebe96d1c712:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_370b94e969ef4efba5339ebe96d1c712" class="color" data-tooltip="RGBA: 160, 214, 220, 1.0
   HEXA: #a0d6dcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_721b3969f40a4fa8a424d29f91376267 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 226, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_721b3969f40a4fa8a424d29f91376267::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_721b3969f40a4fa8a424d29f91376267:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_721b3969f40a4fa8a424d29f91376267" class="color" data-tooltip="RGBA: 185, 226, 229, 1.0
   HEXA: #b9e2e5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3c7be47428ba4fa7af7112f55d80f03d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 239, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c7be47428ba4fa7af7112f55d80f03d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c7be47428ba4fa7af7112f55d80f03d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c7be47428ba4fa7af7112f55d80f03d" class="color" data-tooltip="RGBA: 211, 239, 241, 1.0
   HEXA: #d3eff1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c05a9c31b1404335bd356bd8dc2c8966 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 253, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c05a9c31b1404335bd356bd8dc2c8966::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c05a9c31b1404335bd356bd8dc2c8966:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c05a9c31b1404335bd356bd8dc2c8966" class="color" data-tooltip="RGBA: 234, 253, 253, 1.0
   HEXA: #eafdfdff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a84bca5c72ec464492769a269a6c7b16 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a84bca5c72ec464492769a269a6c7b16 div { flex: 1 1 0; }
           #_a84bca5c72ec464492769a269a6c7b16 div.color { width: 100%; height: 100%; }
           #_a84bca5c72ec464492769a269a6c7b16 div.cmap { width: 100%; height: auto; }
           #_a84bca5c72ec464492769a269a6c7b16 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>matter</strong>
       
       <div id="_a84bca5c72ec464492769a269a6c7b16" class="color-map">
           
                           <div>
                   <style>
       #_6122d8c5cb2e4956bdcdd2ef359c0d7d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 237, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6122d8c5cb2e4956bdcdd2ef359c0d7d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6122d8c5cb2e4956bdcdd2ef359c0d7d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6122d8c5cb2e4956bdcdd2ef359c0d7d" class="color" data-tooltip="RGBA: 254, 237, 176, 1.0
   HEXA: #feedb0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fa7c8987dbf84cad9af6a11136d84039 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 219, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fa7c8987dbf84cad9af6a11136d84039::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fa7c8987dbf84cad9af6a11136d84039:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fa7c8987dbf84cad9af6a11136d84039" class="color" data-tooltip="RGBA: 252, 219, 159, 1.0
   HEXA: #fcdb9fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c1a889924e5448d9a51892d86be611da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 200, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1a889924e5448d9a51892d86be611da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1a889924e5448d9a51892d86be611da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1a889924e5448d9a51892d86be611da" class="color" data-tooltip="RGBA: 250, 200, 141, 1.0
   HEXA: #fac88dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b2020bb0c70c4e98af0acffa7ae6ba9c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 182, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b2020bb0c70c4e98af0acffa7ae6ba9c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b2020bb0c70c4e98af0acffa7ae6ba9c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b2020bb0c70c4e98af0acffa7ae6ba9c" class="color" data-tooltip="RGBA: 248, 182, 126, 1.0
   HEXA: #f8b67eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_61d77b2a76bb470ea52dd29771e542dd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 163, 112, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61d77b2a76bb470ea52dd29771e542dd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61d77b2a76bb470ea52dd29771e542dd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61d77b2a76bb470ea52dd29771e542dd" class="color" data-tooltip="RGBA: 245, 163, 112, 1.0
   HEXA: #f5a370ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bf431de1ceb84601b6812f34705e4707 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 145, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf431de1ceb84601b6812f34705e4707::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf431de1ceb84601b6812f34705e4707:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf431de1ceb84601b6812f34705e4707" class="color" data-tooltip="RGBA: 241, 145, 100, 1.0
   HEXA: #f19164ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_09756c10a22e446790fd905fe0e74623 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 126, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_09756c10a22e446790fd905fe0e74623::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_09756c10a22e446790fd905fe0e74623:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_09756c10a22e446790fd905fe0e74623" class="color" data-tooltip="RGBA: 236, 126, 90, 1.0
   HEXA: #ec7e5aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_821e72f4d854409fa9f60d3b3bab5154 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 108, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_821e72f4d854409fa9f60d3b3bab5154::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_821e72f4d854409fa9f60d3b3bab5154:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_821e72f4d854409fa9f60d3b3bab5154" class="color" data-tooltip="RGBA: 231, 108, 85, 1.0
   HEXA: #e76c55ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bfcde21f24f3430d96df70030a006067 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 91, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bfcde21f24f3430d96df70030a006067::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bfcde21f24f3430d96df70030a006067:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bfcde21f24f3430d96df70030a006067" class="color" data-tooltip="RGBA: 223, 91, 83, 1.0
   HEXA: #df5b53ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_093d8f2828f74b5e991b0ef70a623361 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 75, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_093d8f2828f74b5e991b0ef70a623361::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_093d8f2828f74b5e991b0ef70a623361:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_093d8f2828f74b5e991b0ef70a623361" class="color" data-tooltip="RGBA: 213, 75, 84, 1.0
   HEXA: #d54b54ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0ce3685d4cc9484394297d11bc5effc9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 61, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ce3685d4cc9484394297d11bc5effc9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ce3685d4cc9484394297d11bc5effc9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ce3685d4cc9484394297d11bc5effc9" class="color" data-tooltip="RGBA: 200, 61, 88, 1.0
   HEXA: #c83d58ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_62b3b345634b4ec8b6a2a301ff244d7e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 50, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_62b3b345634b4ec8b6a2a301ff244d7e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_62b3b345634b4ec8b6a2a301ff244d7e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_62b3b345634b4ec8b6a2a301ff244d7e" class="color" data-tooltip="RGBA: 185, 50, 93, 1.0
   HEXA: #b9325dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ae8dad5ca7e247eaa21d3463b6302ef0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 41, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ae8dad5ca7e247eaa21d3463b6302ef0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ae8dad5ca7e247eaa21d3463b6302ef0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ae8dad5ca7e247eaa21d3463b6302ef0" class="color" data-tooltip="RGBA: 170, 41, 97, 1.0
   HEXA: #aa2961ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_095ca8439c4b4d90a9e99407657a9d49 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(154, 34, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_095ca8439c4b4d90a9e99407657a9d49::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_095ca8439c4b4d90a9e99407657a9d49:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_095ca8439c4b4d90a9e99407657a9d49" class="color" data-tooltip="RGBA: 154, 34, 99, 1.0
   HEXA: #9a2263ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa2eafccf21e4aecbb47344476f21861 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 29, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa2eafccf21e4aecbb47344476f21861::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa2eafccf21e4aecbb47344476f21861:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa2eafccf21e4aecbb47344476f21861" class="color" data-tooltip="RGBA: 136, 29, 99, 1.0
   HEXA: #881d63ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_43fa1c0da0934e0e9439d5ec7cd93378 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(118, 26, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_43fa1c0da0934e0e9439d5ec7cd93378::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_43fa1c0da0934e0e9439d5ec7cd93378:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_43fa1c0da0934e0e9439d5ec7cd93378" class="color" data-tooltip="RGBA: 118, 26, 97, 1.0
   HEXA: #761a61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44f974fb7d544c65a3f11e02cb6bf44a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 24, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44f974fb7d544c65a3f11e02cb6bf44a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44f974fb7d544c65a3f11e02cb6bf44a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44f974fb7d544c65a3f11e02cb6bf44a" class="color" data-tooltip="RGBA: 99, 24, 91, 1.0
   HEXA: #63185bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c890595ae3554c18804ff99e10686e9c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 22, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c890595ae3554c18804ff99e10686e9c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c890595ae3554c18804ff99e10686e9c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c890595ae3554c18804ff99e10686e9c" class="color" data-tooltip="RGBA: 82, 22, 83, 1.0
   HEXA: #521653ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d8a8aa8c31954078a56dd5f255768a73 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 19, 73, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d8a8aa8c31954078a56dd5f255768a73::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d8a8aa8c31954078a56dd5f255768a73:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d8a8aa8c31954078a56dd5f255768a73" class="color" data-tooltip="RGBA: 64, 19, 73, 1.0
   HEXA: #401349ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ee51d8c73104e95b9f7f1773890b72f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 15, 62, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ee51d8c73104e95b9f7f1773890b72f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ee51d8c73104e95b9f7f1773890b72f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ee51d8c73104e95b9f7f1773890b72f" class="color" data-tooltip="RGBA: 47, 15, 62, 1.0
   HEXA: #2f0f3eff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0f76511c34744035bae933538b703798 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0f76511c34744035bae933538b703798 div { flex: 1 1 0; }
           #_0f76511c34744035bae933538b703798 div.color { width: 100%; height: 100%; }
           #_0f76511c34744035bae933538b703798 div.cmap { width: 100%; height: auto; }
           #_0f76511c34744035bae933538b703798 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>oxy</strong>
       
       <div id="_0f76511c34744035bae933538b703798" class="color-map">
           
                           <div>
                   <style>
       #_b6e1d63db15c4eefaade6c29e3e95629 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 5, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b6e1d63db15c4eefaade6c29e3e95629::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b6e1d63db15c4eefaade6c29e3e95629:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b6e1d63db15c4eefaade6c29e3e95629" class="color" data-tooltip="RGBA: 64, 5, 5, 1.0
   HEXA: #400505ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0979f25ecf07419ab8edce5ce570a681 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(85, 7, 11, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0979f25ecf07419ab8edce5ce570a681::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0979f25ecf07419ab8edce5ce570a681:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0979f25ecf07419ab8edce5ce570a681" class="color" data-tooltip="RGBA: 85, 7, 11, 1.0
   HEXA: #55070bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_792e742a801a424ba3c29294ee4384a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 6, 15, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_792e742a801a424ba3c29294ee4384a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_792e742a801a424ba3c29294ee4384a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_792e742a801a424ba3c29294ee4384a9" class="color" data-tooltip="RGBA: 109, 6, 15, 1.0
   HEXA: #6d060fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_45be6983e5e2475396dc9192cc745b0a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 8, 12, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_45be6983e5e2475396dc9192cc745b0a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_45be6983e5e2475396dc9192cc745b0a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_45be6983e5e2475396dc9192cc745b0a" class="color" data-tooltip="RGBA: 131, 8, 12, 1.0
   HEXA: #83080cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b0cda9b339094cbcbb9e51a64765677c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 81, 81, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b0cda9b339094cbcbb9e51a64765677c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b0cda9b339094cbcbb9e51a64765677c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b0cda9b339094cbcbb9e51a64765677c" class="color" data-tooltip="RGBA: 82, 81, 81, 1.0
   HEXA: #525151ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_97ae91bc8e9b43deb847e432a6ed015d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 94, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_97ae91bc8e9b43deb847e432a6ed015d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_97ae91bc8e9b43deb847e432a6ed015d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_97ae91bc8e9b43deb847e432a6ed015d" class="color" data-tooltip="RGBA: 95, 94, 94, 1.0
   HEXA: #5f5e5eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_764a6bfeff144721ba3018040681037e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 107, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_764a6bfeff144721ba3018040681037e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_764a6bfeff144721ba3018040681037e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_764a6bfeff144721ba3018040681037e" class="color" data-tooltip="RGBA: 107, 107, 106, 1.0
   HEXA: #6b6b6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f87499c76d5f4b0daab720c5d7e0bb36 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 119, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f87499c76d5f4b0daab720c5d7e0bb36::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f87499c76d5f4b0daab720c5d7e0bb36:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f87499c76d5f4b0daab720c5d7e0bb36" class="color" data-tooltip="RGBA: 120, 119, 119, 1.0
   HEXA: #787777ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4641087a4b214055b9ee43edb36e6c15 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 133, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4641087a4b214055b9ee43edb36e6c15::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4641087a4b214055b9ee43edb36e6c15:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4641087a4b214055b9ee43edb36e6c15" class="color" data-tooltip="RGBA: 133, 133, 132, 1.0
   HEXA: #858584ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_12b083320c7b4eebafd390651d0d0de7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(147, 147, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_12b083320c7b4eebafd390651d0d0de7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_12b083320c7b4eebafd390651d0d0de7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_12b083320c7b4eebafd390651d0d0de7" class="color" data-tooltip="RGBA: 147, 147, 146, 1.0
   HEXA: #939392ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_02bae001291c4c53a3714ec0c7448c08 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(162, 161, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_02bae001291c4c53a3714ec0c7448c08::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_02bae001291c4c53a3714ec0c7448c08:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_02bae001291c4c53a3714ec0c7448c08" class="color" data-tooltip="RGBA: 162, 161, 160, 1.0
   HEXA: #a2a1a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4f3b3e1d3b194b94a39bf96fffb3a3e1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 176, 175, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4f3b3e1d3b194b94a39bf96fffb3a3e1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4f3b3e1d3b194b94a39bf96fffb3a3e1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4f3b3e1d3b194b94a39bf96fffb3a3e1" class="color" data-tooltip="RGBA: 177, 176, 175, 1.0
   HEXA: #b1b0afff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_623d8fa62085472d8bdffe2fe2c777aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 192, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_623d8fa62085472d8bdffe2fe2c777aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_623d8fa62085472d8bdffe2fe2c777aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_623d8fa62085472d8bdffe2fe2c777aa" class="color" data-tooltip="RGBA: 192, 192, 191, 1.0
   HEXA: #c0c0bfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_20af324fa5b64fb59a199e5de74e18ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 207, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_20af324fa5b64fb59a199e5de74e18ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_20af324fa5b64fb59a199e5de74e18ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_20af324fa5b64fb59a199e5de74e18ba" class="color" data-tooltip="RGBA: 207, 207, 206, 1.0
   HEXA: #cfcfceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd02c810a33d45ba897ac147f4da9442 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 224, 223, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd02c810a33d45ba897ac147f4da9442::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd02c810a33d45ba897ac147f4da9442:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd02c810a33d45ba897ac147f4da9442" class="color" data-tooltip="RGBA: 224, 224, 223, 1.0
   HEXA: #e0e0dfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_986f6567831f48a7a3829407f934d26e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 242, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_986f6567831f48a7a3829407f934d26e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_986f6567831f48a7a3829407f934d26e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_986f6567831f48a7a3829407f934d26e" class="color" data-tooltip="RGBA: 242, 242, 241, 1.0
   HEXA: #f2f2f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d0a4cc5cda52470aa885e5ec6569119f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 241, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d0a4cc5cda52470aa885e5ec6569119f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d0a4cc5cda52470aa885e5ec6569119f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d0a4cc5cda52470aa885e5ec6569119f" class="color" data-tooltip="RGBA: 234, 241, 69, 1.0
   HEXA: #eaf145ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6aab8e90eafd4f898124f06ee204e64f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(232, 217, 46, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6aab8e90eafd4f898124f06ee204e64f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6aab8e90eafd4f898124f06ee204e64f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6aab8e90eafd4f898124f06ee204e64f" class="color" data-tooltip="RGBA: 232, 217, 46, 1.0
   HEXA: #e8d92eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e6e80ae0e0b0412abc7ce12ab1c73761 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 195, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e6e80ae0e0b0412abc7ce12ab1c73761::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e6e80ae0e0b0412abc7ce12ab1c73761:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e6e80ae0e0b0412abc7ce12ab1c73761" class="color" data-tooltip="RGBA: 227, 195, 34, 1.0
   HEXA: #e3c322ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0910f43933f74a28bb766380aa3616fb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 175, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0910f43933f74a28bb766380aa3616fb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0910f43933f74a28bb766380aa3616fb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0910f43933f74a28bb766380aa3616fb" class="color" data-tooltip="RGBA: 221, 175, 25, 1.0
   HEXA: #ddaf19ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_62e460e5eb4e4ac6859d96b191585159 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_62e460e5eb4e4ac6859d96b191585159 div { flex: 1 1 0; }
           #_62e460e5eb4e4ac6859d96b191585159 div.color { width: 100%; height: 100%; }
           #_62e460e5eb4e4ac6859d96b191585159 div.cmap { width: 100%; height: auto; }
           #_62e460e5eb4e4ac6859d96b191585159 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>phase</strong>
       
       <div id="_62e460e5eb4e4ac6859d96b191585159" class="color-map">
           
                           <div>
                   <style>
       #_707ddd06792b4bebbd9b5bcaec259100 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 120, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_707ddd06792b4bebbd9b5bcaec259100::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_707ddd06792b4bebbd9b5bcaec259100:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_707ddd06792b4bebbd9b5bcaec259100" class="color" data-tooltip="RGBA: 168, 120, 13, 1.0
   HEXA: #a8780dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_92d32843b5ec47a9829813c121346a4c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 107, 35, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_92d32843b5ec47a9829813c121346a4c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_92d32843b5ec47a9829813c121346a4c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_92d32843b5ec47a9829813c121346a4c" class="color" data-tooltip="RGBA: 186, 107, 35, 1.0
   HEXA: #ba6b23ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c09e142052a4c729ccf904b3f6c37f5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 92, 58, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c09e142052a4c729ccf904b3f6c37f5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c09e142052a4c729ccf904b3f6c37f5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c09e142052a4c729ccf904b3f6c37f5" class="color" data-tooltip="RGBA: 202, 92, 58, 1.0
   HEXA: #ca5c3aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa15c02d9b064b9d92689ed9251ef718 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 75, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa15c02d9b064b9d92689ed9251ef718::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa15c02d9b064b9d92689ed9251ef718:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa15c02d9b064b9d92689ed9251ef718" class="color" data-tooltip="RGBA: 213, 75, 83, 1.0
   HEXA: #d54b53ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_541798af2a934b5986cb23e2a66419cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 56, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_541798af2a934b5986cb23e2a66419cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_541798af2a934b5986cb23e2a66419cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_541798af2a934b5986cb23e2a66419cc" class="color" data-tooltip="RGBA: 221, 56, 118, 1.0
   HEXA: #dd3876ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7d26ecaba57b4b3580a360e872b509d7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 40, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d26ecaba57b4b3580a360e872b509d7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d26ecaba57b4b3580a360e872b509d7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d26ecaba57b4b3580a360e872b509d7" class="color" data-tooltip="RGBA: 222, 40, 157, 1.0
   HEXA: #de289dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4468c0c8f62d43539150162155de1db9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 42, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4468c0c8f62d43539150162155de1db9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4468c0c8f62d43539150162155de1db9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4468c0c8f62d43539150162155de1db9" class="color" data-tooltip="RGBA: 212, 42, 199, 1.0
   HEXA: #d42ac7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b35fe219582445569a35df280e13e6fc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 62, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b35fe219582445569a35df280e13e6fc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b35fe219582445569a35df280e13e6fc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b35fe219582445569a35df280e13e6fc" class="color" data-tooltip="RGBA: 195, 62, 226, 1.0
   HEXA: #c33ee2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3d7c9662d07147e09ba66fef4747a5f7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 84, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3d7c9662d07147e09ba66fef4747a5f7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3d7c9662d07147e09ba66fef4747a5f7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3d7c9662d07147e09ba66fef4747a5f7" class="color" data-tooltip="RGBA: 172, 84, 241, 1.0
   HEXA: #ac54f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_519d02b4d1e249cb88a58a70fbc2e21b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(143, 105, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_519d02b4d1e249cb88a58a70fbc2e21b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_519d02b4d1e249cb88a58a70fbc2e21b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_519d02b4d1e249cb88a58a70fbc2e21b" class="color" data-tooltip="RGBA: 143, 105, 244, 1.0
   HEXA: #8f69f4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3d6aeeb7dba640969f17a43e85b6fdf4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 122, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3d6aeeb7dba640969f17a43e85b6fdf4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3d6aeeb7dba640969f17a43e85b6fdf4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3d6aeeb7dba640969f17a43e85b6fdf4" class="color" data-tooltip="RGBA: 110, 122, 235, 1.0
   HEXA: #6e7aebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c5769e0ce87b4d42b29bbe33d1052643 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(71, 136, 213, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c5769e0ce87b4d42b29bbe33d1052643::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c5769e0ce87b4d42b29bbe33d1052643:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c5769e0ce87b4d42b29bbe33d1052643" class="color" data-tooltip="RGBA: 71, 136, 213, 1.0
   HEXA: #4788d5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_14ca08f2d33945a692000470a3f63bd7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 144, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_14ca08f2d33945a692000470a3f63bd7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_14ca08f2d33945a692000470a3f63bd7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_14ca08f2d33945a692000470a3f63bd7" class="color" data-tooltip="RGBA: 42, 144, 186, 1.0
   HEXA: #2a90baff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6a38b7e640324397876f8b5b7f529983 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 148, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6a38b7e640324397876f8b5b7f529983::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6a38b7e640324397876f8b5b7f529983:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6a38b7e640324397876f8b5b7f529983" class="color" data-tooltip="RGBA: 26, 148, 160, 1.0
   HEXA: #1a94a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_89aec8d4df2548b79477cc489e76c26d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(14, 152, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_89aec8d4df2548b79477cc489e76c26d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_89aec8d4df2548b79477cc489e76c26d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_89aec8d4df2548b79477cc489e76c26d" class="color" data-tooltip="RGBA: 14, 152, 132, 1.0
   HEXA: #0e9884ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8e40006aa57141d092562a0e9c2329c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(19, 154, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e40006aa57141d092562a0e9c2329c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e40006aa57141d092562a0e9c2329c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e40006aa57141d092562a0e9c2329c1" class="color" data-tooltip="RGBA: 19, 154, 102, 1.0
   HEXA: #139a66ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46149f25be124aab84c0b456e4119200 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 153, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46149f25be124aab84c0b456e4119200::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46149f25be124aab84c0b456e4119200:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46149f25be124aab84c0b456e4119200" class="color" data-tooltip="RGBA: 60, 153, 60, 1.0
   HEXA: #3c993cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c492924c17d943ebb086cdd196cf9fde { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 144, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c492924c17d943ebb086cdd196cf9fde::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c492924c17d943ebb086cdd196cf9fde:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c492924c17d943ebb086cdd196cf9fde" class="color" data-tooltip="RGBA: 107, 144, 23, 1.0
   HEXA: #6b9017ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7da5c239c4c24d21a6ab87e8fd18535d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(143, 132, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7da5c239c4c24d21a6ab87e8fd18535d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7da5c239c4c24d21a6ab87e8fd18535d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7da5c239c4c24d21a6ab87e8fd18535d" class="color" data-tooltip="RGBA: 143, 132, 13, 1.0
   HEXA: #8f840dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a30f9b84ecc44042bf81cdb2a6b97e4c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 120, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a30f9b84ecc44042bf81cdb2a6b97e4c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a30f9b84ecc44042bf81cdb2a6b97e4c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a30f9b84ecc44042bf81cdb2a6b97e4c" class="color" data-tooltip="RGBA: 168, 120, 13, 1.0
   HEXA: #a8780dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5d0c3a1f6d0947bd84b027b1e55d7de5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5d0c3a1f6d0947bd84b027b1e55d7de5 div { flex: 1 1 0; }
           #_5d0c3a1f6d0947bd84b027b1e55d7de5 div.color { width: 100%; height: 100%; }
           #_5d0c3a1f6d0947bd84b027b1e55d7de5 div.cmap { width: 100%; height: auto; }
           #_5d0c3a1f6d0947bd84b027b1e55d7de5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>solar</strong>
       
       <div id="_5d0c3a1f6d0947bd84b027b1e55d7de5" class="color-map">
           
                           <div>
                   <style>
       #_6bee7931e2d44d23b67f7131bec77286 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 20, 24, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6bee7931e2d44d23b67f7131bec77286::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6bee7931e2d44d23b67f7131bec77286:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6bee7931e2d44d23b67f7131bec77286" class="color" data-tooltip="RGBA: 51, 20, 24, 1.0
   HEXA: #331418ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_848ffd39a31a452eb2670983a6087a29 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(67, 25, 30, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_848ffd39a31a452eb2670983a6087a29::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_848ffd39a31a452eb2670983a6087a29:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_848ffd39a31a452eb2670983a6087a29" class="color" data-tooltip="RGBA: 67, 25, 30, 1.0
   HEXA: #43191eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_169c70e6700b4ad5a4bca5cfd525b7fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(85, 30, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_169c70e6700b4ad5a4bca5cfd525b7fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_169c70e6700b4ad5a4bca5cfd525b7fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_169c70e6700b4ad5a4bca5cfd525b7fe" class="color" data-tooltip="RGBA: 85, 30, 34, 1.0
   HEXA: #551e22ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d5efbab12a8342fcb50e830cc2adc9a8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 35, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d5efbab12a8342fcb50e830cc2adc9a8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d5efbab12a8342fcb50e830cc2adc9a8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d5efbab12a8342fcb50e830cc2adc9a8" class="color" data-tooltip="RGBA: 101, 35, 36, 1.0
   HEXA: #652324ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_59e8eba6a818426caf152a6b2e83ffe1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 40, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_59e8eba6a818426caf152a6b2e83ffe1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_59e8eba6a818426caf152a6b2e83ffe1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_59e8eba6a818426caf152a6b2e83ffe1" class="color" data-tooltip="RGBA: 119, 40, 36, 1.0
   HEXA: #772824ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fd392e02ba944891a91df6041924d655 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 46, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fd392e02ba944891a91df6041924d655::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fd392e02ba944891a91df6041924d655:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fd392e02ba944891a91df6041924d655" class="color" data-tooltip="RGBA: 133, 46, 33, 1.0
   HEXA: #852e21ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_36bcd06610a3470a99888e4388ffa7bb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(147, 56, 29, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_36bcd06610a3470a99888e4388ffa7bb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_36bcd06610a3470a99888e4388ffa7bb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_36bcd06610a3470a99888e4388ffa7bb" class="color" data-tooltip="RGBA: 147, 56, 29, 1.0
   HEXA: #93381dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_72db6c0766944bc1a27fffb1687f292a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(159, 67, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_72db6c0766944bc1a27fffb1687f292a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_72db6c0766944bc1a27fffb1687f292a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_72db6c0766944bc1a27fffb1687f292a" class="color" data-tooltip="RGBA: 159, 67, 25, 1.0
   HEXA: #9f4319ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7ab0108e436c42d69e1b37bd5ffd0572 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 79, 22, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7ab0108e436c42d69e1b37bd5ffd0572::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7ab0108e436c42d69e1b37bd5ffd0572:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7ab0108e436c42d69e1b37bd5ffd0572" class="color" data-tooltip="RGBA: 168, 79, 22, 1.0
   HEXA: #a84f16ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_61a3a05e0450449bae8a54edbf3bbb0d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 93, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61a3a05e0450449bae8a54edbf3bbb0d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61a3a05e0450449bae8a54edbf3bbb0d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61a3a05e0450449bae8a54edbf3bbb0d" class="color" data-tooltip="RGBA: 178, 93, 20, 1.0
   HEXA: #b25d14ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e4010d6a325b480e8510a26745efcfb5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 107, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e4010d6a325b480e8510a26745efcfb5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e4010d6a325b480e8510a26745efcfb5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e4010d6a325b480e8510a26745efcfb5" class="color" data-tooltip="RGBA: 186, 107, 19, 1.0
   HEXA: #ba6b13ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_727d7a467cbc44db9838833d367a0d46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 122, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_727d7a467cbc44db9838833d367a0d46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_727d7a467cbc44db9838833d367a0d46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_727d7a467cbc44db9838833d367a0d46" class="color" data-tooltip="RGBA: 193, 122, 20, 1.0
   HEXA: #c17a14ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9caa65699865484a9b2c8359e097adbe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 136, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9caa65699865484a9b2c8359e097adbe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9caa65699865484a9b2c8359e097adbe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9caa65699865484a9b2c8359e097adbe" class="color" data-tooltip="RGBA: 199, 136, 23, 1.0
   HEXA: #c78817ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_885663e1074c40e09c8a9595809f668d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(205, 151, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_885663e1074c40e09c8a9595809f668d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_885663e1074c40e09c8a9595809f668d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_885663e1074c40e09c8a9595809f668d" class="color" data-tooltip="RGBA: 205, 151, 27, 1.0
   HEXA: #cd971bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4cef368e3b614ba9a604840ec5e5bda9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 167, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4cef368e3b614ba9a604840ec5e5bda9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4cef368e3b614ba9a604840ec5e5bda9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4cef368e3b614ba9a604840ec5e5bda9" class="color" data-tooltip="RGBA: 211, 167, 33, 1.0
   HEXA: #d3a721ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a5b7b22dc71d4dbe933de6376f29ee42 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 183, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a5b7b22dc71d4dbe933de6376f29ee42::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a5b7b22dc71d4dbe933de6376f29ee42:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a5b7b22dc71d4dbe933de6376f29ee42" class="color" data-tooltip="RGBA: 215, 183, 40, 1.0
   HEXA: #d7b728ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea87c9733a5848ffabaa4a3b82d88e1a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 200, 49, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea87c9733a5848ffabaa4a3b82d88e1a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea87c9733a5848ffabaa4a3b82d88e1a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea87c9733a5848ffabaa4a3b82d88e1a" class="color" data-tooltip="RGBA: 219, 200, 49, 1.0
   HEXA: #dbc831ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2c4f2e0077d47a28297654596eab9a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 217, 57, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2c4f2e0077d47a28297654596eab9a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2c4f2e0077d47a28297654596eab9a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2c4f2e0077d47a28297654596eab9a6" class="color" data-tooltip="RGBA: 222, 217, 57, 1.0
   HEXA: #ded939ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b781124e7784705bed378e68e469596 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 235, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b781124e7784705bed378e68e469596::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b781124e7784705bed378e68e469596:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b781124e7784705bed378e68e469596" class="color" data-tooltip="RGBA: 224, 235, 66, 1.0
   HEXA: #e0eb42ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b12b869b08a94aaba5457b3e790153a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 253, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b12b869b08a94aaba5457b3e790153a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b12b869b08a94aaba5457b3e790153a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b12b869b08a94aaba5457b3e790153a3" class="color" data-tooltip="RGBA: 225, 253, 75, 1.0
   HEXA: #e1fd4bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b45192103a0b4022b5a9a9eef71b4d5a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b45192103a0b4022b5a9a9eef71b4d5a div { flex: 1 1 0; }
           #_b45192103a0b4022b5a9a9eef71b4d5a div.color { width: 100%; height: 100%; }
           #_b45192103a0b4022b5a9a9eef71b4d5a div.cmap { width: 100%; height: auto; }
           #_b45192103a0b4022b5a9a9eef71b4d5a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>speed</strong>
       
       <div id="_b45192103a0b4022b5a9a9eef71b4d5a" class="color-map">
           
                           <div>
                   <style>
       #_b868663953544e5b9a25f496b1bba927 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 253, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b868663953544e5b9a25f496b1bba927::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b868663953544e5b9a25f496b1bba927:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b868663953544e5b9a25f496b1bba927" class="color" data-tooltip="RGBA: 255, 253, 205, 1.0
   HEXA: #fffdcdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50d2add138cc47c3bb15812e80b0ab41 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 237, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50d2add138cc47c3bb15812e80b0ab41::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50d2add138cc47c3bb15812e80b0ab41:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50d2add138cc47c3bb15812e80b0ab41" class="color" data-tooltip="RGBA: 246, 237, 177, 1.0
   HEXA: #f6edb1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53056886e6df4025b0cad9cfcdf5e29e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 221, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53056886e6df4025b0cad9cfcdf5e29e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53056886e6df4025b0cad9cfcdf5e29e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53056886e6df4025b0cad9cfcdf5e29e" class="color" data-tooltip="RGBA: 237, 221, 147, 1.0
   HEXA: #eddd93ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_479dd65c14354c4fba9aeb90bba67490 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 207, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_479dd65c14354c4fba9aeb90bba67490::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_479dd65c14354c4fba9aeb90bba67490:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_479dd65c14354c4fba9aeb90bba67490" class="color" data-tooltip="RGBA: 227, 207, 119, 1.0
   HEXA: #e3cf77ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4d18f929025043af9edeb623c7ce1417 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 194, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d18f929025043af9edeb623c7ce1417::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d18f929025043af9edeb623c7ce1417:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d18f929025043af9edeb623c7ce1417" class="color" data-tooltip="RGBA: 213, 194, 89, 1.0
   HEXA: #d5c259ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eff73b298d0643cf989c364f285900d5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 184, 63, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eff73b298d0643cf989c364f285900d5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eff73b298d0643cf989c364f285900d5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eff73b298d0643cf989c364f285900d5" class="color" data-tooltip="RGBA: 197, 184, 63, 1.0
   HEXA: #c5b83fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d3733cfb2c5844428f81ee30f230d5e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 174, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d3733cfb2c5844428f81ee30f230d5e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d3733cfb2c5844428f81ee30f230d5e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d3733cfb2c5844428f81ee30f230d5e0" class="color" data-tooltip="RGBA: 177, 174, 39, 1.0
   HEXA: #b1ae27ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7e36f9d47795411080b5b423074ac7ef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(155, 166, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7e36f9d47795411080b5b423074ac7ef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7e36f9d47795411080b5b423074ac7ef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7e36f9d47795411080b5b423074ac7ef" class="color" data-tooltip="RGBA: 155, 166, 20, 1.0
   HEXA: #9ba614ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6bb1eb65ab23410db362d7aeb8630d1a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 159, 7, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6bb1eb65ab23410db362d7aeb8630d1a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6bb1eb65ab23410db362d7aeb8630d1a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6bb1eb65ab23410db362d7aeb8630d1a" class="color" data-tooltip="RGBA: 133, 159, 7, 1.0
   HEXA: #859f07ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cdb444049fb14a28bbc845e70c4528f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 150, 7, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cdb444049fb14a28bbc845e70c4528f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cdb444049fb14a28bbc845e70c4528f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cdb444049fb14a28bbc845e70c4528f6" class="color" data-tooltip="RGBA: 108, 150, 7, 1.0
   HEXA: #6c9607ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c9e6e7fd81a48a0ac4914961626ab36 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 142, 17, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c9e6e7fd81a48a0ac4914961626ab36::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c9e6e7fd81a48a0ac4914961626ab36:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c9e6e7fd81a48a0ac4914961626ab36" class="color" data-tooltip="RGBA: 84, 142, 17, 1.0
   HEXA: #548e11ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_091f62e1587b48a898b59705a89f7f41 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 132, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_091f62e1587b48a898b59705a89f7f41::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_091f62e1587b48a898b59705a89f7f41:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_091f62e1587b48a898b59705a89f7f41" class="color" data-tooltip="RGBA: 59, 132, 28, 1.0
   HEXA: #3b841cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc662559cf84440f8d5ca582ef78415d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 122, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc662559cf84440f8d5ca582ef78415d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc662559cf84440f8d5ca582ef78415d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc662559cf84440f8d5ca582ef78415d" class="color" data-tooltip="RGBA: 37, 122, 36, 1.0
   HEXA: #257a24ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_977f4bab44274ec680b4bc074269df7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(19, 111, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_977f4bab44274ec680b4bc074269df7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_977f4bab44274ec680b4bc074269df7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_977f4bab44274ec680b4bc074269df7b" class="color" data-tooltip="RGBA: 19, 111, 41, 1.0
   HEXA: #136f29ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2f7ccc60ea9f4908bcb9441779f8448e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(11, 99, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2f7ccc60ea9f4908bcb9441779f8448e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2f7ccc60ea9f4908bcb9441779f8448e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2f7ccc60ea9f4908bcb9441779f8448e" class="color" data-tooltip="RGBA: 11, 99, 44, 1.0
   HEXA: #0b632cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_98c1c764c99b43308ddd670d48e93745 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 86, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_98c1c764c99b43308ddd670d48e93745::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_98c1c764c99b43308ddd670d48e93745:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_98c1c764c99b43308ddd670d48e93745" class="color" data-tooltip="RGBA: 15, 86, 44, 1.0
   HEXA: #0f562cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aafdffdc53a44b6a8eb008c66c9d6b31 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(21, 73, 42, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aafdffdc53a44b6a8eb008c66c9d6b31::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aafdffdc53a44b6a8eb008c66c9d6b31:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aafdffdc53a44b6a8eb008c66c9d6b31" class="color" data-tooltip="RGBA: 21, 73, 42, 1.0
   HEXA: #15492aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_600731cf56a347d5be9fc31a79042859 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 61, 36, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_600731cf56a347d5be9fc31a79042859::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_600731cf56a347d5be9fc31a79042859:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_600731cf56a347d5be9fc31a79042859" class="color" data-tooltip="RGBA: 25, 61, 36, 1.0
   HEXA: #193d24ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_66da339679f94f4399b40e3b197267ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 47, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66da339679f94f4399b40e3b197267ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66da339679f94f4399b40e3b197267ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66da339679f94f4399b40e3b197267ea" class="color" data-tooltip="RGBA: 25, 47, 28, 1.0
   HEXA: #192f1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7d8dbd3920104fc5b68f939197389ecd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 35, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d8dbd3920104fc5b68f939197389ecd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d8dbd3920104fc5b68f939197389ecd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d8dbd3920104fc5b68f939197389ecd" class="color" data-tooltip="RGBA: 23, 35, 19, 1.0
   HEXA: #172313ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6d74ed3b134e4e61956d247599d3309b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6d74ed3b134e4e61956d247599d3309b div { flex: 1 1 0; }
           #_6d74ed3b134e4e61956d247599d3309b div.color { width: 100%; height: 100%; }
           #_6d74ed3b134e4e61956d247599d3309b div.cmap { width: 100%; height: auto; }
           #_6d74ed3b134e4e61956d247599d3309b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tempo</strong>
       
       <div id="_6d74ed3b134e4e61956d247599d3309b" class="color-map">
           
                           <div>
                   <style>
       #_fbc82c4c22ea407588cf2130290097cb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 246, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fbc82c4c22ea407588cf2130290097cb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fbc82c4c22ea407588cf2130290097cb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fbc82c4c22ea407588cf2130290097cb" class="color" data-tooltip="RGBA: 255, 246, 244, 1.0
   HEXA: #fff6f4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_450cf824e61c4495b4bdc68524dc369c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 234, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_450cf824e61c4495b4bdc68524dc369c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_450cf824e61c4495b4bdc68524dc369c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_450cf824e61c4495b4bdc68524dc369c" class="color" data-tooltip="RGBA: 237, 234, 225, 1.0
   HEXA: #edeae1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f7e0ecd4914e4836b205060f64711a9b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 221, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f7e0ecd4914e4836b205060f64711a9b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f7e0ecd4914e4836b205060f64711a9b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f7e0ecd4914e4836b205060f64711a9b" class="color" data-tooltip="RGBA: 217, 221, 205, 1.0
   HEXA: #d9ddcdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1b9b23d0c3c4be296b8506e76d1adfb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 211, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1b9b23d0c3c4be296b8506e76d1adfb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1b9b23d0c3c4be296b8506e76d1adfb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1b9b23d0c3c4be296b8506e76d1adfb" class="color" data-tooltip="RGBA: 198, 211, 188, 1.0
   HEXA: #c6d3bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_162ca369a1c8450590599b07fe53df26 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 200, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_162ca369a1c8450590599b07fe53df26::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_162ca369a1c8450590599b07fe53df26:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_162ca369a1c8450590599b07fe53df26" class="color" data-tooltip="RGBA: 177, 200, 172, 1.0
   HEXA: #b1c8acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63b84493dbe040a88833873e7e13e658 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 191, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63b84493dbe040a88833873e7e13e658::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63b84493dbe040a88833873e7e13e658:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63b84493dbe040a88833873e7e13e658" class="color" data-tooltip="RGBA: 156, 191, 159, 1.0
   HEXA: #9cbf9fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_327d12ce73c14805b91c2e0ce080b242 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 181, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_327d12ce73c14805b91c2e0ce080b242::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_327d12ce73c14805b91c2e0ce080b242:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_327d12ce73c14805b91c2e0ce080b242" class="color" data-tooltip="RGBA: 133, 181, 147, 1.0
   HEXA: #85b593ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ec9f1a8419164decb25a33793153b23e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 173, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ec9f1a8419164decb25a33793153b23e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ec9f1a8419164decb25a33793153b23e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ec9f1a8419164decb25a33793153b23e" class="color" data-tooltip="RGBA: 109, 173, 138, 1.0
   HEXA: #6dad8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ccbd11b855c48a4adadb4796083652f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 164, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ccbd11b855c48a4adadb4796083652f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ccbd11b855c48a4adadb4796083652f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ccbd11b855c48a4adadb4796083652f" class="color" data-tooltip="RGBA: 84, 164, 132, 1.0
   HEXA: #54a484ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_43d9577baba5408ea5e8be62affcf785 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 153, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_43d9577baba5408ea5e8be62affcf785::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_43d9577baba5408ea5e8be62affcf785:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_43d9577baba5408ea5e8be62affcf785" class="color" data-tooltip="RGBA: 56, 153, 129, 1.0
   HEXA: #389981ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_19ca62cb828d4f03a0f00fb372cde069 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 142, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_19ca62cb828d4f03a0f00fb372cde069::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_19ca62cb828d4f03a0f00fb372cde069:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_19ca62cb828d4f03a0f00fb372cde069" class="color" data-tooltip="RGBA: 33, 142, 126, 1.0
   HEXA: #218e7eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb5a7809047a4bf88a58d9a084c3633c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 130, 123, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb5a7809047a4bf88a58d9a084c3633c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb5a7809047a4bf88a58d9a084c3633c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb5a7809047a4bf88a58d9a084c3633c" class="color" data-tooltip="RGBA: 18, 130, 123, 1.0
   HEXA: #12827bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ac3e0f8ec8740c6ae2b51eaf5a2ef29 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 118, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ac3e0f8ec8740c6ae2b51eaf5a2ef29::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ac3e0f8ec8740c6ae2b51eaf5a2ef29:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ac3e0f8ec8740c6ae2b51eaf5a2ef29" class="color" data-tooltip="RGBA: 18, 118, 118, 1.0
   HEXA: #127676ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3893a33a3fa41fe9a2c05a84426f72b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(22, 105, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3893a33a3fa41fe9a2c05a84426f72b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3893a33a3fa41fe9a2c05a84426f72b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3893a33a3fa41fe9a2c05a84426f72b" class="color" data-tooltip="RGBA: 22, 105, 113, 1.0
   HEXA: #166971ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6f498c075bd946bcb786408f86fbad61 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 92, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6f498c075bd946bcb786408f86fbad61::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6f498c075bd946bcb786408f86fbad61:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6f498c075bd946bcb786408f86fbad61" class="color" data-tooltip="RGBA: 26, 92, 106, 1.0
   HEXA: #1a5c6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ed96be3aff29489ba952ae346204a376 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 80, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ed96be3aff29489ba952ae346204a376::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ed96be3aff29489ba952ae346204a376:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ed96be3aff29489ba952ae346204a376" class="color" data-tooltip="RGBA: 28, 80, 98, 1.0
   HEXA: #1c5062ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e43416c7ddd74e73981abb21e79e4e76 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 67, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e43416c7ddd74e73981abb21e79e4e76::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e43416c7ddd74e73981abb21e79e4e76:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e43416c7ddd74e73981abb21e79e4e76" class="color" data-tooltip="RGBA: 28, 67, 90, 1.0
   HEXA: #1c435aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bc2c542cbaac4d39b449b5ba58f3c75b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 55, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bc2c542cbaac4d39b449b5ba58f3c75b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bc2c542cbaac4d39b449b5ba58f3c75b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bc2c542cbaac4d39b449b5ba58f3c75b" class="color" data-tooltip="RGBA: 26, 55, 83, 1.0
   HEXA: #1a3753ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f3b44611dfc34c6d9c355efcf5a7bb02 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(24, 42, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f3b44611dfc34c6d9c355efcf5a7bb02::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f3b44611dfc34c6d9c355efcf5a7bb02:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f3b44611dfc34c6d9c355efcf5a7bb02" class="color" data-tooltip="RGBA: 24, 42, 75, 1.0
   HEXA: #182a4bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5231ecda747c4807b550bbe352c5c166 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(21, 29, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5231ecda747c4807b550bbe352c5c166::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5231ecda747c4807b550bbe352c5c166:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5231ecda747c4807b550bbe352c5c166" class="color" data-tooltip="RGBA: 21, 29, 68, 1.0
   HEXA: #151d44ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c1e9810053cb4bad825d3a7c6235e8fe {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c1e9810053cb4bad825d3a7c6235e8fe div { flex: 1 1 0; }
           #_c1e9810053cb4bad825d3a7c6235e8fe div.color { width: 100%; height: 100%; }
           #_c1e9810053cb4bad825d3a7c6235e8fe div.cmap { width: 100%; height: auto; }
           #_c1e9810053cb4bad825d3a7c6235e8fe div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>thermal</strong>
       
       <div id="_c1e9810053cb4bad825d3a7c6235e8fe" class="color-map">
           
                           <div>
                   <style>
       #_0650ee4126214c76857bec60f89ca831 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 35, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0650ee4126214c76857bec60f89ca831::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0650ee4126214c76857bec60f89ca831:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0650ee4126214c76857bec60f89ca831" class="color" data-tooltip="RGBA: 4, 35, 51, 1.0
   HEXA: #042333ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_646a88870a7847688523c4dd4349c81a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(7, 44, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_646a88870a7847688523c4dd4349c81a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_646a88870a7847688523c4dd4349c81a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_646a88870a7847688523c4dd4349c81a" class="color" data-tooltip="RGBA: 7, 44, 77, 1.0
   HEXA: #072c4dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cbc9fc77404044898f75ecec85d1cd7e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 50, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cbc9fc77404044898f75ecec85d1cd7e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cbc9fc77404044898f75ecec85d1cd7e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cbc9fc77404044898f75ecec85d1cd7e" class="color" data-tooltip="RGBA: 18, 50, 111, 1.0
   HEXA: #12326fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3b5b69d1e6f4416fa96d75e52b44e11c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 52, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b5b69d1e6f4416fa96d75e52b44e11c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b5b69d1e6f4416fa96d75e52b44e11c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b5b69d1e6f4416fa96d75e52b44e11c" class="color" data-tooltip="RGBA: 39, 52, 145, 1.0
   HEXA: #273491ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f7248c24736849c080e2a2ceb7c36678 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 53, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f7248c24736849c080e2a2ceb7c36678::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f7248c24736849c080e2a2ceb7c36678:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f7248c24736849c080e2a2ceb7c36678" class="color" data-tooltip="RGBA: 70, 53, 160, 1.0
   HEXA: #4635a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d6fe7f92eb684906b21eb1360776d874 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(91, 61, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d6fe7f92eb684906b21eb1360776d874::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d6fe7f92eb684906b21eb1360776d874:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d6fe7f92eb684906b21eb1360776d874" class="color" data-tooltip="RGBA: 91, 61, 155, 1.0
   HEXA: #5b3d9bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb76284f54184e45b0c8f3a60f8c6a70 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 71, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb76284f54184e45b0c8f3a60f8c6a70::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb76284f54184e45b0c8f3a60f8c6a70:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb76284f54184e45b0c8f3a60f8c6a70" class="color" data-tooltip="RGBA: 110, 71, 148, 1.0
   HEXA: #6e4794ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7cf0cdccec8f456e8bc9c4f2811df90d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 78, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7cf0cdccec8f456e8bc9c4f2811df90d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7cf0cdccec8f456e8bc9c4f2811df90d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7cf0cdccec8f456e8bc9c4f2811df90d" class="color" data-tooltip="RGBA: 128, 78, 143, 1.0
   HEXA: #804e8fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_21fcead9012046af8396a662f4c25c71 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 85, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_21fcead9012046af8396a662f4c25c71::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_21fcead9012046af8396a662f4c25c71:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_21fcead9012046af8396a662f4c25c71" class="color" data-tooltip="RGBA: 146, 85, 139, 1.0
   HEXA: #92558bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_826d17f18ee2475e969c8cf5b1cf2624 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 92, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_826d17f18ee2475e969c8cf5b1cf2624::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_826d17f18ee2475e969c8cf5b1cf2624:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_826d17f18ee2475e969c8cf5b1cf2624" class="color" data-tooltip="RGBA: 166, 92, 134, 1.0
   HEXA: #a65c86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0459a5573a88475ea9a56cffe675c668 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 98, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0459a5573a88475ea9a56cffe675c668::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0459a5573a88475ea9a56cffe675c668:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0459a5573a88475ea9a56cffe675c668" class="color" data-tooltip="RGBA: 186, 98, 126, 1.0
   HEXA: #ba627eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7fc8a6e2336f4a6a8c189c6dafa75075 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 105, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7fc8a6e2336f4a6a8c189c6dafa75075::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7fc8a6e2336f4a6a8c189c6dafa75075:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7fc8a6e2336f4a6a8c189c6dafa75075" class="color" data-tooltip="RGBA: 206, 105, 113, 1.0
   HEXA: #ce6971ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e6758ecd173344efa22c4d4ab2cd987d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 113, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e6758ecd173344efa22c4d4ab2cd987d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e6758ecd173344efa22c4d4ab2cd987d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e6758ecd173344efa22c4d4ab2cd987d" class="color" data-tooltip="RGBA: 224, 113, 99, 1.0
   HEXA: #e07163ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2851cfceeb3c4540a4d400aa0774cc64 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 125, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2851cfceeb3c4540a4d400aa0774cc64::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2851cfceeb3c4540a4d400aa0774cc64:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2851cfceeb3c4540a4d400aa0774cc64" class="color" data-tooltip="RGBA: 238, 125, 83, 1.0
   HEXA: #ee7d53ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7be497f36d984f0c8583d0a71c097ea6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 142, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7be497f36d984f0c8583d0a71c097ea6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7be497f36d984f0c8583d0a71c097ea6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7be497f36d984f0c8583d0a71c097ea6" class="color" data-tooltip="RGBA: 248, 142, 68, 1.0
   HEXA: #f88e44ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aaac8c821bee468285af8732a59472e1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 161, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aaac8c821bee468285af8732a59472e1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aaac8c821bee468285af8732a59472e1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aaac8c821bee468285af8732a59472e1" class="color" data-tooltip="RGBA: 251, 161, 61, 1.0
   HEXA: #fba13dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9e33263efe8e47109b1371526ca8ad68 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 183, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e33263efe8e47109b1371526ca8ad68::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e33263efe8e47109b1371526ca8ad68:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e33263efe8e47109b1371526ca8ad68" class="color" data-tooltip="RGBA: 251, 183, 61, 1.0
   HEXA: #fbb73dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_228ea5e25fcc4ad58ce46b4e3ba3831d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 205, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_228ea5e25fcc4ad58ce46b4e3ba3831d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_228ea5e25fcc4ad58ce46b4e3ba3831d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_228ea5e25fcc4ad58ce46b4e3ba3831d" class="color" data-tooltip="RGBA: 248, 205, 68, 1.0
   HEXA: #f8cd44ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_724f7e517f10424595adb5fd961083e1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 228, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_724f7e517f10424595adb5fd961083e1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_724f7e517f10424595adb5fd961083e1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_724f7e517f10424595adb5fd961083e1" class="color" data-tooltip="RGBA: 241, 228, 79, 1.0
   HEXA: #f1e44fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_175dbb5f46eb42c48fa28fdcf8e1950d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(232, 250, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_175dbb5f46eb42c48fa28fdcf8e1950d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_175dbb5f46eb42c48fa28fdcf8e1950d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_175dbb5f46eb42c48fa28fdcf8e1950d" class="color" data-tooltip="RGBA: 232, 250, 91, 1.0
   HEXA: #e8fa5bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_31a1980e965441b6be95b54e9969f7b1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_31a1980e965441b6be95b54e9969f7b1 div { flex: 1 1 0; }
           #_31a1980e965441b6be95b54e9969f7b1 div.color { width: 100%; height: 100%; }
           #_31a1980e965441b6be95b54e9969f7b1 div.cmap { width: 100%; height: auto; }
           #_31a1980e965441b6be95b54e9969f7b1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>turbid</strong>
       
       <div id="_31a1980e965441b6be95b54e9969f7b1" class="color-map">
           
                           <div>
                   <style>
       #_8748b92bcbb8456bb2a84daf6341ef68 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(233, 246, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8748b92bcbb8456bb2a84daf6341ef68::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8748b92bcbb8456bb2a84daf6341ef68:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8748b92bcbb8456bb2a84daf6341ef68" class="color" data-tooltip="RGBA: 233, 246, 171, 1.0
   HEXA: #e9f6abff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90fde2568c414c47b0c08a8b56d31d47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(226, 231, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90fde2568c414c47b0c08a8b56d31d47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90fde2568c414c47b0c08a8b56d31d47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90fde2568c414c47b0c08a8b56d31d47" class="color" data-tooltip="RGBA: 226, 231, 152, 1.0
   HEXA: #e2e798ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9322cdde6fd74f29848b97090add8d23 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 215, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9322cdde6fd74f29848b97090add8d23::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9322cdde6fd74f29848b97090add8d23:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9322cdde6fd74f29848b97090add8d23" class="color" data-tooltip="RGBA: 218, 215, 132, 1.0
   HEXA: #dad784ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b5a1d31da0c043e690b4066b27a0d689 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 200, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b5a1d31da0c043e690b4066b27a0d689::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b5a1d31da0c043e690b4066b27a0d689:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b5a1d31da0c043e690b4066b27a0d689" class="color" data-tooltip="RGBA: 212, 200, 115, 1.0
   HEXA: #d4c873ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eccb39b2902d418ea4b54cc424245888 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 184, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eccb39b2902d418ea4b54cc424245888::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eccb39b2902d418ea4b54cc424245888:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eccb39b2902d418ea4b54cc424245888" class="color" data-tooltip="RGBA: 206, 184, 98, 1.0
   HEXA: #ceb862ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_55233f084b4549178af33993a5200347 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 170, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_55233f084b4549178af33993a5200347::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_55233f084b4549178af33993a5200347:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_55233f084b4549178af33993a5200347" class="color" data-tooltip="RGBA: 200, 170, 85, 1.0
   HEXA: #c8aa55ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e04b5745f4214b8d878cb5104d9036fa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 155, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e04b5745f4214b8d878cb5104d9036fa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e04b5745f4214b8d878cb5104d9036fa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e04b5745f4214b8d878cb5104d9036fa" class="color" data-tooltip="RGBA: 193, 155, 74, 1.0
   HEXA: #c19b4aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c17f2f61fac432495df3b7fab2fca8e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 142, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c17f2f61fac432495df3b7fab2fca8e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c17f2f61fac432495df3b7fab2fca8e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c17f2f61fac432495df3b7fab2fca8e" class="color" data-tooltip="RGBA: 186, 142, 66, 1.0
   HEXA: #ba8e42ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ecccbbab8c8b47ca90275158f5ffa356 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 130, 62, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ecccbbab8c8b47ca90275158f5ffa356::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ecccbbab8c8b47ca90275158f5ffa356:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ecccbbab8c8b47ca90275158f5ffa356" class="color" data-tooltip="RGBA: 177, 130, 62, 1.0
   HEXA: #b1823eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_27c2c422a25641f6a8b4fd0746bb4127 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 118, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_27c2c422a25641f6a8b4fd0746bb4127::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_27c2c422a25641f6a8b4fd0746bb4127:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_27c2c422a25641f6a8b4fd0746bb4127" class="color" data-tooltip="RGBA: 167, 118, 60, 1.0
   HEXA: #a7763cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b69d9188d14141f49579630fe31da75c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 107, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b69d9188d14141f49579630fe31da75c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b69d9188d14141f49579630fe31da75c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b69d9188d14141f49579630fe31da75c" class="color" data-tooltip="RGBA: 156, 107, 59, 1.0
   HEXA: #9c6b3bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_541ac00e03754b69b3c00c20e173c5d7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(143, 97, 58, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_541ac00e03754b69b3c00c20e173c5d7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_541ac00e03754b69b3c00c20e173c5d7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_541ac00e03754b69b3c00c20e173c5d7" class="color" data-tooltip="RGBA: 143, 97, 58, 1.0
   HEXA: #8f613aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9bc0f8ed41e14614a617da26a274b175 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(130, 88, 57, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9bc0f8ed41e14614a617da26a274b175::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9bc0f8ed41e14614a617da26a274b175:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9bc0f8ed41e14614a617da26a274b175" class="color" data-tooltip="RGBA: 130, 88, 57, 1.0
   HEXA: #825839ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e540d11b74cf4682b5ccc76b19da8e86 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 80, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e540d11b74cf4682b5ccc76b19da8e86::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e540d11b74cf4682b5ccc76b19da8e86:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e540d11b74cf4682b5ccc76b19da8e86" class="color" data-tooltip="RGBA: 117, 80, 55, 1.0
   HEXA: #755037ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa61708274f54334a10db995e2fa40f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 72, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa61708274f54334a10db995e2fa40f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa61708274f54334a10db995e2fa40f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa61708274f54334a10db995e2fa40f8" class="color" data-tooltip="RGBA: 102, 72, 53, 1.0
   HEXA: #664835ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7abc0328f124411db75554fd01f6b0fc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 64, 49, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7abc0328f124411db75554fd01f6b0fc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7abc0328f124411db75554fd01f6b0fc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7abc0328f124411db75554fd01f6b0fc" class="color" data-tooltip="RGBA: 89, 64, 49, 1.0
   HEXA: #594031ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5688cfcad6754057aaca5323621c08d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(74, 56, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5688cfcad6754057aaca5323621c08d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5688cfcad6754057aaca5323621c08d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5688cfcad6754057aaca5323621c08d1" class="color" data-tooltip="RGBA: 74, 56, 44, 1.0
   HEXA: #4a382cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a367a743bcef441cba228d3e3ad985f9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(61, 48, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a367a743bcef441cba228d3e3ad985f9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a367a743bcef441cba228d3e3ad985f9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a367a743bcef441cba228d3e3ad985f9" class="color" data-tooltip="RGBA: 61, 48, 39, 1.0
   HEXA: #3d3027ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_31471863f6ab4ebb811011d9e74dc476 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 39, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_31471863f6ab4ebb811011d9e74dc476::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_31471863f6ab4ebb811011d9e74dc476:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_31471863f6ab4ebb811011d9e74dc476" class="color" data-tooltip="RGBA: 47, 39, 33, 1.0
   HEXA: #2f2721ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1e5ece2feb0649c3a4324e464ecce0af { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 31, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1e5ece2feb0649c3a4324e464ecce0af::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1e5ece2feb0649c3a4324e464ecce0af:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1e5ece2feb0649c3a4324e464ecce0af" class="color" data-tooltip="RGBA: 34, 31, 27, 1.0
   HEXA: #221f1bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5f8342314b6d42288c4701b39e41eb6e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5f8342314b6d42288c4701b39e41eb6e div { flex: 1 1 0; }
           #_5f8342314b6d42288c4701b39e41eb6e div.color { width: 100%; height: 100%; }
           #_5f8342314b6d42288c4701b39e41eb6e div.cmap { width: 100%; height: auto; }
           #_5f8342314b6d42288c4701b39e41eb6e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>blugrn</strong>
       
       <div id="_5f8342314b6d42288c4701b39e41eb6e" class="color-map">
           
                           <div>
                   <style>
       #_150ef7d7e8d7494db042ba15a60533f2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 230, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_150ef7d7e8d7494db042ba15a60533f2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_150ef7d7e8d7494db042ba15a60533f2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_150ef7d7e8d7494db042ba15a60533f2" class="color" data-tooltip="RGBA: 196, 230, 195, 1.0
   HEXA: #c4e6c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7ca84fca7cd74a48868a84227299c66b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 210, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7ca84fca7cd74a48868a84227299c66b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7ca84fca7cd74a48868a84227299c66b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7ca84fca7cd74a48868a84227299c66b" class="color" data-tooltip="RGBA: 150, 210, 164, 1.0
   HEXA: #96d2a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5d2ad002cb5a41039b37ed58ea049246 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 188, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5d2ad002cb5a41039b37ed58ea049246::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5d2ad002cb5a41039b37ed58ea049246:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5d2ad002cb5a41039b37ed58ea049246" class="color" data-tooltip="RGBA: 109, 188, 144, 1.0
   HEXA: #6dbc90ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a35da5095734f0f9b17a7f36c361c98 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 162, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a35da5095734f0f9b17a7f36c361c98::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a35da5095734f0f9b17a7f36c361c98:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a35da5095734f0f9b17a7f36c361c98" class="color" data-tooltip="RGBA: 77, 162, 132, 1.0
   HEXA: #4da284ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_de5c414557ed48dfaad14a402ffafadf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 135, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_de5c414557ed48dfaad14a402ffafadf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_de5c414557ed48dfaad14a402ffafadf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_de5c414557ed48dfaad14a402ffafadf" class="color" data-tooltip="RGBA: 54, 135, 122, 1.0
   HEXA: #36877aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ccc95570135e49b2bff7ddc077467ea4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 107, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ccc95570135e49b2bff7ddc077467ea4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ccc95570135e49b2bff7ddc077467ea4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ccc95570135e49b2bff7ddc077467ea4" class="color" data-tooltip="RGBA: 38, 107, 110, 1.0
   HEXA: #266b6eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6930169b57be4cac88e4014b8cdc7515 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 79, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6930169b57be4cac88e4014b8cdc7515::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6930169b57be4cac88e4014b8cdc7515:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6930169b57be4cac88e4014b8cdc7515" class="color" data-tooltip="RGBA: 29, 79, 96, 1.0
   HEXA: #1d4f60ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_39d22f84516d4459870d361c1220e667 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_39d22f84516d4459870d361c1220e667 div { flex: 1 1 0; }
           #_39d22f84516d4459870d361c1220e667 div.color { width: 100%; height: 100%; }
           #_39d22f84516d4459870d361c1220e667 div.cmap { width: 100%; height: auto; }
           #_39d22f84516d4459870d361c1220e667 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bluyl</strong>
       
       <div id="_39d22f84516d4459870d361c1220e667" class="color-map">
           
                           <div>
                   <style>
       #_c33cced79c0f4c029be25b5acf6accb2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 254, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c33cced79c0f4c029be25b5acf6accb2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c33cced79c0f4c029be25b5acf6accb2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c33cced79c0f4c029be25b5acf6accb2" class="color" data-tooltip="RGBA: 247, 254, 174, 1.0
   HEXA: #f7feaeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_631f78795ee041c495c1ed31c32c583a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(183, 230, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_631f78795ee041c495c1ed31c32c583a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_631f78795ee041c495c1ed31c32c583a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_631f78795ee041c495c1ed31c32c583a" class="color" data-tooltip="RGBA: 183, 230, 165, 1.0
   HEXA: #b7e6a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ce7a2b47cc914fcc959bc0c56fb601d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 203, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce7a2b47cc914fcc959bc0c56fb601d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce7a2b47cc914fcc959bc0c56fb601d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce7a2b47cc914fcc959bc0c56fb601d4" class="color" data-tooltip="RGBA: 124, 203, 162, 1.0
   HEXA: #7ccba2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c9434c01f0e3478787ba305d20c2b93b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 174, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9434c01f0e3478787ba305d20c2b93b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9434c01f0e3478787ba305d20c2b93b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9434c01f0e3478787ba305d20c2b93b" class="color" data-tooltip="RGBA: 70, 174, 160, 1.0
   HEXA: #46aea0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2bfba095747841fbace22c56b6582f0c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 144, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2bfba095747841fbace22c56b6582f0c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2bfba095747841fbace22c56b6582f0c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2bfba095747841fbace22c56b6582f0c" class="color" data-tooltip="RGBA: 8, 144, 153, 1.0
   HEXA: #089099ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_051268a6ef1342ae99a70dd47d337a6e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 113, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_051268a6ef1342ae99a70dd47d337a6e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_051268a6ef1342ae99a70dd47d337a6e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_051268a6ef1342ae99a70dd47d337a6e" class="color" data-tooltip="RGBA: 0, 113, 139, 1.0
   HEXA: #00718bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ba3ea1e97aa44aa696dd751d438aac0a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 82, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba3ea1e97aa44aa696dd751d438aac0a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba3ea1e97aa44aa696dd751d438aac0a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba3ea1e97aa44aa696dd751d438aac0a" class="color" data-tooltip="RGBA: 4, 82, 117, 1.0
   HEXA: #045275ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_87b7ef970b964f3aaca78c25a649ed4a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_87b7ef970b964f3aaca78c25a649ed4a div { flex: 1 1 0; }
           #_87b7ef970b964f3aaca78c25a649ed4a div.color { width: 100%; height: 100%; }
           #_87b7ef970b964f3aaca78c25a649ed4a div.cmap { width: 100%; height: auto; }
           #_87b7ef970b964f3aaca78c25a649ed4a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>brwnyl</strong>
       
       <div id="_87b7ef970b964f3aaca78c25a649ed4a" class="color-map">
           
                           <div>
                   <style>
       #_1edec99a57194851967ca28a2662b5f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 229, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1edec99a57194851967ca28a2662b5f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1edec99a57194851967ca28a2662b5f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1edec99a57194851967ca28a2662b5f8" class="color" data-tooltip="RGBA: 237, 229, 207, 1.0
   HEXA: #ede5cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5ae512ebdd624e2a95e68e6e17eef925 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 194, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5ae512ebdd624e2a95e68e6e17eef925::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5ae512ebdd624e2a95e68e6e17eef925:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5ae512ebdd624e2a95e68e6e17eef925" class="color" data-tooltip="RGBA: 224, 194, 162, 1.0
   HEXA: #e0c2a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_709a378393d34c51a577da2f63290989 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 156, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_709a378393d34c51a577da2f63290989::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_709a378393d34c51a577da2f63290989:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_709a378393d34c51a577da2f63290989" class="color" data-tooltip="RGBA: 211, 156, 131, 1.0
   HEXA: #d39c83ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d4d4fd9230cf43e58028f0e7e8e086a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 118, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d4d4fd9230cf43e58028f0e7e8e086a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d4d4fd9230cf43e58028f0e7e8e086a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d4d4fd9230cf43e58028f0e7e8e086a0" class="color" data-tooltip="RGBA: 193, 118, 111, 1.0
   HEXA: #c1766fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c20b47efa81f43f3961f921edd3a4adb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 84, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c20b47efa81f43f3961f921edd3a4adb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c20b47efa81f43f3961f921edd3a4adb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c20b47efa81f43f3961f921edd3a4adb" class="color" data-tooltip="RGBA: 166, 84, 97, 1.0
   HEXA: #a65461ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b273a855c928406484bc2b996f3ee3c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 55, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b273a855c928406484bc2b996f3ee3c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b273a855c928406484bc2b996f3ee3c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b273a855c928406484bc2b996f3ee3c9" class="color" data-tooltip="RGBA: 129, 55, 83, 1.0
   HEXA: #813753ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3c4850ad2e724608b29469dc4cbc716a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 31, 63, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c4850ad2e724608b29469dc4cbc716a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c4850ad2e724608b29469dc4cbc716a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c4850ad2e724608b29469dc4cbc716a" class="color" data-tooltip="RGBA: 84, 31, 63, 1.0
   HEXA: #541f3fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0d39c1752dd849d6ab6e43db1576ca02 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0d39c1752dd849d6ab6e43db1576ca02 div { flex: 1 1 0; }
           #_0d39c1752dd849d6ab6e43db1576ca02 div.color { width: 100%; height: 100%; }
           #_0d39c1752dd849d6ab6e43db1576ca02 div.cmap { width: 100%; height: auto; }
           #_0d39c1752dd849d6ab6e43db1576ca02 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>burg</strong>
       
       <div id="_0d39c1752dd849d6ab6e43db1576ca02" class="color-map">
           
                           <div>
                   <style>
       #_5cc4e77e0ca94046bcfc90742f32a09d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 198, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5cc4e77e0ca94046bcfc90742f32a09d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5cc4e77e0ca94046bcfc90742f32a09d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5cc4e77e0ca94046bcfc90742f32a09d" class="color" data-tooltip="RGBA: 255, 198, 196, 1.0
   HEXA: #ffc6c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_66f202a0329447b6ac7c5dc00f1bc801 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 163, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66f202a0329447b6ac7c5dc00f1bc801::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66f202a0329447b6ac7c5dc00f1bc801:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66f202a0329447b6ac7c5dc00f1bc801" class="color" data-tooltip="RGBA: 244, 163, 168, 1.0
   HEXA: #f4a3a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6f2bcbd49dc84d73be2edd90b7b7a74d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 129, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6f2bcbd49dc84d73be2edd90b7b7a74d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6f2bcbd49dc84d73be2edd90b7b7a74d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6f2bcbd49dc84d73be2edd90b7b7a74d" class="color" data-tooltip="RGBA: 227, 129, 145, 1.0
   HEXA: #e38191ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fb762843b9814077a8c6d651c310f19c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 96, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fb762843b9814077a8c6d651c310f19c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fb762843b9814077a8c6d651c310f19c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fb762843b9814077a8c6d651c310f19c" class="color" data-tooltip="RGBA: 204, 96, 125, 1.0
   HEXA: #cc607dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f167e56289f243be92fb3ca2a6d5c0ad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 70, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f167e56289f243be92fb3ca2a6d5c0ad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f167e56289f243be92fb3ca2a6d5c0ad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f167e56289f243be92fb3ca2a6d5c0ad" class="color" data-tooltip="RGBA: 173, 70, 108, 1.0
   HEXA: #ad466cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8854aae9f4704f09a19193d1cc98bca8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 48, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8854aae9f4704f09a19193d1cc98bca8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8854aae9f4704f09a19193d1cc98bca8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8854aae9f4704f09a19193d1cc98bca8" class="color" data-tooltip="RGBA: 139, 48, 88, 1.0
   HEXA: #8b3058ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d22b9e39c30c4da08ead613f163289c2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 32, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d22b9e39c30c4da08ead613f163289c2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d22b9e39c30c4da08ead613f163289c2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d22b9e39c30c4da08ead613f163289c2" class="color" data-tooltip="RGBA: 103, 32, 68, 1.0
   HEXA: #672044ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_01831d6f6aad4fd886a8b0a29c3ac508 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_01831d6f6aad4fd886a8b0a29c3ac508 div { flex: 1 1 0; }
           #_01831d6f6aad4fd886a8b0a29c3ac508 div.color { width: 100%; height: 100%; }
           #_01831d6f6aad4fd886a8b0a29c3ac508 div.cmap { width: 100%; height: auto; }
           #_01831d6f6aad4fd886a8b0a29c3ac508 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>burgyl</strong>
       
       <div id="_01831d6f6aad4fd886a8b0a29c3ac508" class="color-map">
           
                           <div>
                   <style>
       #_a61f63a66f4b4e38a2b9a9a84937c18b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 230, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a61f63a66f4b4e38a2b9a9a84937c18b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a61f63a66f4b4e38a2b9a9a84937c18b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a61f63a66f4b4e38a2b9a9a84937c18b" class="color" data-tooltip="RGBA: 251, 230, 197, 1.0
   HEXA: #fbe6c5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f8524f1b7c6d40bbb6796d1e1d43b55e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 186, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f8524f1b7c6d40bbb6796d1e1d43b55e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f8524f1b7c6d40bbb6796d1e1d43b55e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f8524f1b7c6d40bbb6796d1e1d43b55e" class="color" data-tooltip="RGBA: 245, 186, 152, 1.0
   HEXA: #f5ba98ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_faf4d070428e4c6a901c23e06ed6d22a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 138, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_faf4d070428e4c6a901c23e06ed6d22a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_faf4d070428e4c6a901c23e06ed6d22a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_faf4d070428e4c6a901c23e06ed6d22a" class="color" data-tooltip="RGBA: 238, 138, 130, 1.0
   HEXA: #ee8a82ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e4efc7ba0efd4df7a0cb51a95336b2ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 113, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e4efc7ba0efd4df7a0cb51a95336b2ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e4efc7ba0efd4df7a0cb51a95336b2ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e4efc7ba0efd4df7a0cb51a95336b2ba" class="color" data-tooltip="RGBA: 220, 113, 118, 1.0
   HEXA: #dc7176ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8de8cca5b7ba4808a05d1df83860b9e3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 88, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8de8cca5b7ba4808a05d1df83860b9e3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8de8cca5b7ba4808a05d1df83860b9e3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8de8cca5b7ba4808a05d1df83860b9e3" class="color" data-tooltip="RGBA: 200, 88, 108, 1.0
   HEXA: #c8586cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c53337af0cf4120b6dd2bd0d4888de1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 63, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c53337af0cf4120b6dd2bd0d4888de1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c53337af0cf4120b6dd2bd0d4888de1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c53337af0cf4120b6dd2bd0d4888de1" class="color" data-tooltip="RGBA: 156, 63, 93, 1.0
   HEXA: #9c3f5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6753e2b995d0416c81e9b8126b29af40 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(112, 40, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6753e2b995d0416c81e9b8126b29af40::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6753e2b995d0416c81e9b8126b29af40:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6753e2b995d0416c81e9b8126b29af40" class="color" data-tooltip="RGBA: 112, 40, 74, 1.0
   HEXA: #70284aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f2a22cf00d0147899d0df1288b213188 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f2a22cf00d0147899d0df1288b213188 div { flex: 1 1 0; }
           #_f2a22cf00d0147899d0df1288b213188 div.color { width: 100%; height: 100%; }
           #_f2a22cf00d0147899d0df1288b213188 div.cmap { width: 100%; height: auto; }
           #_f2a22cf00d0147899d0df1288b213188 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>darkmint</strong>
       
       <div id="_f2a22cf00d0147899d0df1288b213188" class="color-map">
           
                           <div>
                   <style>
       #_9e1695f7387a47388af2b970d51cc31b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(210, 251, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e1695f7387a47388af2b970d51cc31b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e1695f7387a47388af2b970d51cc31b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e1695f7387a47388af2b970d51cc31b" class="color" data-tooltip="RGBA: 210, 251, 212, 1.0
   HEXA: #d2fbd4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_db0331cbed63497ba120e40a9fa335c8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 219, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db0331cbed63497ba120e40a9fa335c8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db0331cbed63497ba120e40a9fa335c8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db0331cbed63497ba120e40a9fa335c8" class="color" data-tooltip="RGBA: 165, 219, 194, 1.0
   HEXA: #a5dbc2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fe596890181f40b58e74f7357c49d86d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 188, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fe596890181f40b58e74f7357c49d86d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fe596890181f40b58e74f7357c49d86d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fe596890181f40b58e74f7357c49d86d" class="color" data-tooltip="RGBA: 123, 188, 176, 1.0
   HEXA: #7bbcb0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf6f2d02adfe45bbba7680e859c66599 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(85, 156, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf6f2d02adfe45bbba7680e859c66599::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf6f2d02adfe45bbba7680e859c66599:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf6f2d02adfe45bbba7680e859c66599" class="color" data-tooltip="RGBA: 85, 156, 158, 1.0
   HEXA: #559c9eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_baacd80a6c2b452f9a293a33f5fe023f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 124, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_baacd80a6c2b452f9a293a33f5fe023f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_baacd80a6c2b452f9a293a33f5fe023f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_baacd80a6c2b452f9a293a33f5fe023f" class="color" data-tooltip="RGBA: 58, 124, 137, 1.0
   HEXA: #3a7c89ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c6d584d569e4673a13c64a55a8c491c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 93, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c6d584d569e4673a13c64a55a8c491c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c6d584d569e4673a13c64a55a8c491c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c6d584d569e4673a13c64a55a8c491c" class="color" data-tooltip="RGBA: 35, 93, 114, 1.0
   HEXA: #235d72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_59329dda81ec4284a5b77f86ce0e052a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 63, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_59329dda81ec4284a5b77f86ce0e052a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_59329dda81ec4284a5b77f86ce0e052a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_59329dda81ec4284a5b77f86ce0e052a" class="color" data-tooltip="RGBA: 18, 63, 90, 1.0
   HEXA: #123f5aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_edec71d704c04d4abaf302399f299163 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_edec71d704c04d4abaf302399f299163 div { flex: 1 1 0; }
           #_edec71d704c04d4abaf302399f299163 div.color { width: 100%; height: 100%; }
           #_edec71d704c04d4abaf302399f299163 div.cmap { width: 100%; height: auto; }
           #_edec71d704c04d4abaf302399f299163 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>emrld</strong>
       
       <div id="_edec71d704c04d4abaf302399f299163" class="color-map">
           
                           <div>
                   <style>
       #_beaf80cc40244f2b98d58906a1b17553 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 242, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_beaf80cc40244f2b98d58906a1b17553::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_beaf80cc40244f2b98d58906a1b17553:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_beaf80cc40244f2b98d58906a1b17553" class="color" data-tooltip="RGBA: 211, 242, 163, 1.0
   HEXA: #d3f2a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_164dbb91ab4f452fab6384cc95a26e0d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(151, 225, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_164dbb91ab4f452fab6384cc95a26e0d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_164dbb91ab4f452fab6384cc95a26e0d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_164dbb91ab4f452fab6384cc95a26e0d" class="color" data-tooltip="RGBA: 151, 225, 150, 1.0
   HEXA: #97e196ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_62332f88f2a14006a38486a421dadf5f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 192, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_62332f88f2a14006a38486a421dadf5f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_62332f88f2a14006a38486a421dadf5f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_62332f88f2a14006a38486a421dadf5f" class="color" data-tooltip="RGBA: 108, 192, 139, 1.0
   HEXA: #6cc08bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_27ad790ac03241299a06e99136c6cd2c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 155, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_27ad790ac03241299a06e99136c6cd2c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_27ad790ac03241299a06e99136c6cd2c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_27ad790ac03241299a06e99136c6cd2c" class="color" data-tooltip="RGBA: 76, 155, 130, 1.0
   HEXA: #4c9b82ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_20a468917b934794b441ea76c52b21df { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 122, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_20a468917b934794b441ea76c52b21df::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_20a468917b934794b441ea76c52b21df:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_20a468917b934794b441ea76c52b21df" class="color" data-tooltip="RGBA: 33, 122, 121, 1.0
   HEXA: #217a79ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc956bba234142e0ad821380c0b8925b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 89, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc956bba234142e0ad821380c0b8925b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc956bba234142e0ad821380c0b8925b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc956bba234142e0ad821380c0b8925b" class="color" data-tooltip="RGBA: 16, 89, 101, 1.0
   HEXA: #105965ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cdfb07599c214bc8b3a3a4cc3f2182f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(7, 64, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cdfb07599c214bc8b3a3a4cc3f2182f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cdfb07599c214bc8b3a3a4cc3f2182f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cdfb07599c214bc8b3a3a4cc3f2182f1" class="color" data-tooltip="RGBA: 7, 64, 80, 1.0
   HEXA: #074050ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ee5019c60cd3457c9d44234159995c31 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ee5019c60cd3457c9d44234159995c31 div { flex: 1 1 0; }
           #_ee5019c60cd3457c9d44234159995c31 div.color { width: 100%; height: 100%; }
           #_ee5019c60cd3457c9d44234159995c31 div.cmap { width: 100%; height: auto; }
           #_ee5019c60cd3457c9d44234159995c31 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>magenta</strong>
       
       <div id="_ee5019c60cd3457c9d44234159995c31" class="color-map">
           
                           <div>
                   <style>
       #_6c967984df18463ca42bc170dc13c3ec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 203, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6c967984df18463ca42bc170dc13c3ec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6c967984df18463ca42bc170dc13c3ec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6c967984df18463ca42bc170dc13c3ec" class="color" data-tooltip="RGBA: 243, 203, 211, 1.0
   HEXA: #f3cbd3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9e807b17a8454d7998bc9e41a7b77520 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 169, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e807b17a8454d7998bc9e41a7b77520::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e807b17a8454d7998bc9e41a7b77520:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e807b17a8454d7998bc9e41a7b77520" class="color" data-tooltip="RGBA: 234, 169, 189, 1.0
   HEXA: #eaa9bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b1f5de964f2c4784b0101c31b9feabc0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 136, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b1f5de964f2c4784b0101c31b9feabc0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b1f5de964f2c4784b0101c31b9feabc0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b1f5de964f2c4784b0101c31b9feabc0" class="color" data-tooltip="RGBA: 221, 136, 172, 1.0
   HEXA: #dd88acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c5d73c5786941148b25eefbda9f8a14 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 105, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c5d73c5786941148b25eefbda9f8a14::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c5d73c5786941148b25eefbda9f8a14:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c5d73c5786941148b25eefbda9f8a14" class="color" data-tooltip="RGBA: 202, 105, 157, 1.0
   HEXA: #ca699dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_186d8bda75f54aaeaa25beb965da0f31 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 77, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_186d8bda75f54aaeaa25beb965da0f31::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_186d8bda75f54aaeaa25beb965da0f31:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_186d8bda75f54aaeaa25beb965da0f31" class="color" data-tooltip="RGBA: 177, 77, 142, 1.0
   HEXA: #b14d8eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b4ecbf73ac8b4f32991ea80167bf7250 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(145, 53, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b4ecbf73ac8b4f32991ea80167bf7250::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b4ecbf73ac8b4f32991ea80167bf7250:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b4ecbf73ac8b4f32991ea80167bf7250" class="color" data-tooltip="RGBA: 145, 53, 125, 1.0
   HEXA: #91357dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7d4bbc2098a04e8cb60cdbf1aab129c7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(108, 33, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d4bbc2098a04e8cb60cdbf1aab129c7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d4bbc2098a04e8cb60cdbf1aab129c7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d4bbc2098a04e8cb60cdbf1aab129c7" class="color" data-tooltip="RGBA: 108, 33, 103, 1.0
   HEXA: #6c2167ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2dadd9ccd8b741469aca73549ca6f4af {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2dadd9ccd8b741469aca73549ca6f4af div { flex: 1 1 0; }
           #_2dadd9ccd8b741469aca73549ca6f4af div.color { width: 100%; height: 100%; }
           #_2dadd9ccd8b741469aca73549ca6f4af div.cmap { width: 100%; height: auto; }
           #_2dadd9ccd8b741469aca73549ca6f4af div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>mint</strong>
       
       <div id="_2dadd9ccd8b741469aca73549ca6f4af" class="color-map">
           
                           <div>
                   <style>
       #_07afeec5b98b4a1e88aefcbc771c267c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 241, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_07afeec5b98b4a1e88aefcbc771c267c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_07afeec5b98b4a1e88aefcbc771c267c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_07afeec5b98b4a1e88aefcbc771c267c" class="color" data-tooltip="RGBA: 228, 241, 225, 1.0
   HEXA: #e4f1e1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_84a8b277d7904f67beaa66d69d39209b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 217, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_84a8b277d7904f67beaa66d69d39209b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_84a8b277d7904f67beaa66d69d39209b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_84a8b277d7904f67beaa66d69d39209b" class="color" data-tooltip="RGBA: 180, 217, 204, 1.0
   HEXA: #b4d9ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_59f0876e6aeb4430838944649c81c143 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 192, 182, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_59f0876e6aeb4430838944649c81c143::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_59f0876e6aeb4430838944649c81c143:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_59f0876e6aeb4430838944649c81c143" class="color" data-tooltip="RGBA: 137, 192, 182, 1.0
   HEXA: #89c0b6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb2ba52e09354f7fb6dfd321c3ca92e5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 166, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb2ba52e09354f7fb6dfd321c3ca92e5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb2ba52e09354f7fb6dfd321c3ca92e5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb2ba52e09354f7fb6dfd321c3ca92e5" class="color" data-tooltip="RGBA: 99, 166, 160, 1.0
   HEXA: #63a6a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e74eb332246489ea88f10fbded326bf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 140, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e74eb332246489ea88f10fbded326bf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e74eb332246489ea88f10fbded326bf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e74eb332246489ea88f10fbded326bf" class="color" data-tooltip="RGBA: 68, 140, 138, 1.0
   HEXA: #448c8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b24ef1edec2348b5a6b0d0d1af3f2788 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 114, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b24ef1edec2348b5a6b0d0d1af3f2788::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b24ef1edec2348b5a6b0d0d1af3f2788:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b24ef1edec2348b5a6b0d0d1af3f2788" class="color" data-tooltip="RGBA: 40, 114, 116, 1.0
   HEXA: #287274ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_93ec2a98e4f7433faa85528aa736e4a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 88, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_93ec2a98e4f7433faa85528aa736e4a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_93ec2a98e4f7433faa85528aa736e4a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_93ec2a98e4f7433faa85528aa736e4a6" class="color" data-tooltip="RGBA: 13, 88, 95, 1.0
   HEXA: #0d585fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2ee0a4148fa3430bb17140659af1af8a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2ee0a4148fa3430bb17140659af1af8a div { flex: 1 1 0; }
           #_2ee0a4148fa3430bb17140659af1af8a div.color { width: 100%; height: 100%; }
           #_2ee0a4148fa3430bb17140659af1af8a div.cmap { width: 100%; height: auto; }
           #_2ee0a4148fa3430bb17140659af1af8a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>oryel</strong>
       
       <div id="_2ee0a4148fa3430bb17140659af1af8a" class="color-map">
           
                           <div>
                   <style>
       #_4f285e4b1878460d815d45e60b84b11c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 218, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4f285e4b1878460d815d45e60b84b11c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4f285e4b1878460d815d45e60b84b11c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4f285e4b1878460d815d45e60b84b11c" class="color" data-tooltip="RGBA: 236, 218, 154, 1.0
   HEXA: #ecda9aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_62db3a342dcf43b1a666c2af61eab772 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 196, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_62db3a342dcf43b1a666c2af61eab772::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_62db3a342dcf43b1a666c2af61eab772:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_62db3a342dcf43b1a666c2af61eab772" class="color" data-tooltip="RGBA: 239, 196, 126, 1.0
   HEXA: #efc47eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0651e53144ee4a0daff614617e2384fc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 173, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0651e53144ee4a0daff614617e2384fc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0651e53144ee4a0daff614617e2384fc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0651e53144ee4a0daff614617e2384fc" class="color" data-tooltip="RGBA: 243, 173, 106, 1.0
   HEXA: #f3ad6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1fdec9789c57472fb5d2a99e972de290 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 148, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1fdec9789c57472fb5d2a99e972de290::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1fdec9789c57472fb5d2a99e972de290:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1fdec9789c57472fb5d2a99e972de290" class="color" data-tooltip="RGBA: 247, 148, 93, 1.0
   HEXA: #f7945dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_35a9cb0b289e4adba64df2b36a9d76fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 123, 87, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_35a9cb0b289e4adba64df2b36a9d76fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_35a9cb0b289e4adba64df2b36a9d76fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_35a9cb0b289e4adba64df2b36a9d76fe" class="color" data-tooltip="RGBA: 249, 123, 87, 1.0
   HEXA: #f97b57ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15ad96234a9d495b8f98c1b7de6f5a61 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 99, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15ad96234a9d495b8f98c1b7de6f5a61::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15ad96234a9d495b8f98c1b7de6f5a61:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15ad96234a9d495b8f98c1b7de6f5a61" class="color" data-tooltip="RGBA: 246, 99, 86, 1.0
   HEXA: #f66356ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68ccf0093dbf420f9ff86b6060fefb2b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 77, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68ccf0093dbf420f9ff86b6060fefb2b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68ccf0093dbf420f9ff86b6060fefb2b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68ccf0093dbf420f9ff86b6060fefb2b" class="color" data-tooltip="RGBA: 238, 77, 90, 1.0
   HEXA: #ee4d5aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_e3ecdd38557b460fbf2e6fb32838b9a8 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_e3ecdd38557b460fbf2e6fb32838b9a8 div { flex: 1 1 0; }
           #_e3ecdd38557b460fbf2e6fb32838b9a8 div.color { width: 100%; height: 100%; }
           #_e3ecdd38557b460fbf2e6fb32838b9a8 div.cmap { width: 100%; height: auto; }
           #_e3ecdd38557b460fbf2e6fb32838b9a8 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>peach</strong>
       
       <div id="_e3ecdd38557b460fbf2e6fb32838b9a8" class="color-map">
           
                           <div>
                   <style>
       #_94ae01f4068547bea77f4155e7bf4086 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 224, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_94ae01f4068547bea77f4155e7bf4086::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_94ae01f4068547bea77f4155e7bf4086:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_94ae01f4068547bea77f4155e7bf4086" class="color" data-tooltip="RGBA: 253, 224, 197, 1.0
   HEXA: #fde0c5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2922e9520c824beb9bc358bddefb5c74 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 203, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2922e9520c824beb9bc358bddefb5c74::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2922e9520c824beb9bc358bddefb5c74:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2922e9520c824beb9bc358bddefb5c74" class="color" data-tooltip="RGBA: 250, 203, 166, 1.0
   HEXA: #facba6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a92d7737da244370abdb148191a74dbc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 181, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a92d7737da244370abdb148191a74dbc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a92d7737da244370abdb148191a74dbc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a92d7737da244370abdb148191a74dbc" class="color" data-tooltip="RGBA: 248, 181, 139, 1.0
   HEXA: #f8b58bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bce492fc9e8841f9ade4712c8c4a5706 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 158, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bce492fc9e8841f9ade4712c8c4a5706::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bce492fc9e8841f9ade4712c8c4a5706:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bce492fc9e8841f9ade4712c8c4a5706" class="color" data-tooltip="RGBA: 245, 158, 114, 1.0
   HEXA: #f59e72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8de3cbeb869243749a8a64e351828d37 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 133, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8de3cbeb869243749a8a64e351828d37::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8de3cbeb869243749a8a64e351828d37:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8de3cbeb869243749a8a64e351828d37" class="color" data-tooltip="RGBA: 242, 133, 93, 1.0
   HEXA: #f2855dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_daf5d2002a9d4f8590e01cb70bfd2721 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 106, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_daf5d2002a9d4f8590e01cb70bfd2721::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_daf5d2002a9d4f8590e01cb70bfd2721:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_daf5d2002a9d4f8590e01cb70bfd2721" class="color" data-tooltip="RGBA: 239, 106, 76, 1.0
   HEXA: #ef6a4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1523de28f9e54bdba9bf5d9363de3721 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 74, 64, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1523de28f9e54bdba9bf5d9363de3721::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1523de28f9e54bdba9bf5d9363de3721:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1523de28f9e54bdba9bf5d9363de3721" class="color" data-tooltip="RGBA: 235, 74, 64, 1.0
   HEXA: #eb4a40ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2dcacdce94d149fa925fa505b2d24383 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2dcacdce94d149fa925fa505b2d24383 div { flex: 1 1 0; }
           #_2dcacdce94d149fa925fa505b2d24383 div.color { width: 100%; height: 100%; }
           #_2dcacdce94d149fa925fa505b2d24383 div.cmap { width: 100%; height: auto; }
           #_2dcacdce94d149fa925fa505b2d24383 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>pinkyl</strong>
       
       <div id="_2dcacdce94d149fa925fa505b2d24383" class="color-map">
           
                           <div>
                   <style>
       #_439f4770aff1405d8ded3e3dbc729da1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 246, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_439f4770aff1405d8ded3e3dbc729da1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_439f4770aff1405d8ded3e3dbc729da1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_439f4770aff1405d8ded3e3dbc729da1" class="color" data-tooltip="RGBA: 254, 246, 181, 1.0
   HEXA: #fef6b5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5533b91e88cc4d2fa50964c616e9fd85 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 221, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5533b91e88cc4d2fa50964c616e9fd85::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5533b91e88cc4d2fa50964c616e9fd85:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5533b91e88cc4d2fa50964c616e9fd85" class="color" data-tooltip="RGBA: 255, 221, 154, 1.0
   HEXA: #ffdd9aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2cf81ea37da41fca58ebec4fa63fca9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 194, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2cf81ea37da41fca58ebec4fa63fca9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2cf81ea37da41fca58ebec4fa63fca9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2cf81ea37da41fca58ebec4fa63fca9" class="color" data-tooltip="RGBA: 255, 194, 133, 1.0
   HEXA: #ffc285ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c1c4ae913fb648c7872f328f91f47e3e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 166, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1c4ae913fb648c7872f328f91f47e3e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1c4ae913fb648c7872f328f91f47e3e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1c4ae913fb648c7872f328f91f47e3e" class="color" data-tooltip="RGBA: 255, 166, 121, 1.0
   HEXA: #ffa679ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e48bc78c418741b3887200d5cb6550ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 138, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e48bc78c418741b3887200d5cb6550ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e48bc78c418741b3887200d5cb6550ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e48bc78c418741b3887200d5cb6550ca" class="color" data-tooltip="RGBA: 250, 138, 118, 1.0
   HEXA: #fa8a76ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_81fa9505e42f4a0ca37a26ae7c622497 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 109, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_81fa9505e42f4a0ca37a26ae7c622497::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_81fa9505e42f4a0ca37a26ae7c622497:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_81fa9505e42f4a0ca37a26ae7c622497" class="color" data-tooltip="RGBA: 241, 109, 122, 1.0
   HEXA: #f16d7aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c051c700286a4f679ef0d4a930467801 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 83, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c051c700286a4f679ef0d4a930467801::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c051c700286a4f679ef0d4a930467801:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c051c700286a4f679ef0d4a930467801" class="color" data-tooltip="RGBA: 225, 83, 131, 1.0
   HEXA: #e15383ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_d01be17f2bd54e3ba33ab1b08a82c829 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_d01be17f2bd54e3ba33ab1b08a82c829 div { flex: 1 1 0; }
           #_d01be17f2bd54e3ba33ab1b08a82c829 div.color { width: 100%; height: 100%; }
           #_d01be17f2bd54e3ba33ab1b08a82c829 div.cmap { width: 100%; height: auto; }
           #_d01be17f2bd54e3ba33ab1b08a82c829 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>purp</strong>
       
       <div id="_d01be17f2bd54e3ba33ab1b08a82c829" class="color-map">
           
                           <div>
                   <style>
       #_babc6b7ae2384c0298863af1e284325e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 224, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_babc6b7ae2384c0298863af1e284325e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_babc6b7ae2384c0298863af1e284325e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_babc6b7ae2384c0298863af1e284325e" class="color" data-tooltip="RGBA: 243, 224, 247, 1.0
   HEXA: #f3e0f7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d11617b22d864d7f8ff1eee797108366 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 199, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d11617b22d864d7f8ff1eee797108366::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d11617b22d864d7f8ff1eee797108366:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d11617b22d864d7f8ff1eee797108366" class="color" data-tooltip="RGBA: 228, 199, 241, 1.0
   HEXA: #e4c7f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cdd0cdeb48fd4a1ab1443c1045a6d98a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 175, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cdd0cdeb48fd4a1ab1443c1045a6d98a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cdd0cdeb48fd4a1ab1443c1045a6d98a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cdd0cdeb48fd4a1ab1443c1045a6d98a" class="color" data-tooltip="RGBA: 209, 175, 232, 1.0
   HEXA: #d1afe8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_17e446e888f9406db43346c700e006bd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 152, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_17e446e888f9406db43346c700e006bd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_17e446e888f9406db43346c700e006bd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_17e446e888f9406db43346c700e006bd" class="color" data-tooltip="RGBA: 185, 152, 221, 1.0
   HEXA: #b998ddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7652b888f0f0463aa1137baac7ba7959 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(159, 130, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7652b888f0f0463aa1137baac7ba7959::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7652b888f0f0463aa1137baac7ba7959:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7652b888f0f0463aa1137baac7ba7959" class="color" data-tooltip="RGBA: 159, 130, 206, 1.0
   HEXA: #9f82ceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6c4e93e695fd4a5ca2518c0f33b0f258 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(130, 109, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6c4e93e695fd4a5ca2518c0f33b0f258::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6c4e93e695fd4a5ca2518c0f33b0f258:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6c4e93e695fd4a5ca2518c0f33b0f258" class="color" data-tooltip="RGBA: 130, 109, 186, 1.0
   HEXA: #826dbaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_71035a174cfc416bbd847604f36e6849 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 88, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_71035a174cfc416bbd847604f36e6849::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_71035a174cfc416bbd847604f36e6849:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_71035a174cfc416bbd847604f36e6849" class="color" data-tooltip="RGBA: 99, 88, 159, 1.0
   HEXA: #63589fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f259d92b7979470391063c196259206b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f259d92b7979470391063c196259206b div { flex: 1 1 0; }
           #_f259d92b7979470391063c196259206b div.color { width: 100%; height: 100%; }
           #_f259d92b7979470391063c196259206b div.cmap { width: 100%; height: auto; }
           #_f259d92b7979470391063c196259206b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>purpor</strong>
       
       <div id="_f259d92b7979470391063c196259206b" class="color-map">
           
                           <div>
                   <style>
       #_9881dee467824f8594db8213a333bd4a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 221, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9881dee467824f8594db8213a333bd4a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9881dee467824f8594db8213a333bd4a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9881dee467824f8594db8213a333bd4a" class="color" data-tooltip="RGBA: 249, 221, 218, 1.0
   HEXA: #f9dddaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c472ad3e0f6f4415824b4b0fa51e8829 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 185, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c472ad3e0f6f4415824b4b0fa51e8829::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c472ad3e0f6f4415824b4b0fa51e8829:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c472ad3e0f6f4415824b4b0fa51e8829" class="color" data-tooltip="RGBA: 242, 185, 196, 1.0
   HEXA: #f2b9c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ba28b01bad6d43458cd2bfd5f4408a82 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 151, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba28b01bad6d43458cd2bfd5f4408a82::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba28b01bad6d43458cd2bfd5f4408a82:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba28b01bad6d43458cd2bfd5f4408a82" class="color" data-tooltip="RGBA: 229, 151, 185, 1.0
   HEXA: #e597b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86a464282db74cedbb2a4509335e3aac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 120, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86a464282db74cedbb2a4509335e3aac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86a464282db74cedbb2a4509335e3aac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86a464282db74cedbb2a4509335e3aac" class="color" data-tooltip="RGBA: 206, 120, 179, 1.0
   HEXA: #ce78b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dcad5660abc54317a08e393d434bb5e4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 95, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dcad5660abc54317a08e393d434bb5e4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dcad5660abc54317a08e393d434bb5e4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dcad5660abc54317a08e393d434bb5e4" class="color" data-tooltip="RGBA: 173, 95, 173, 1.0
   HEXA: #ad5fadff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a2d23dfd7bbe4180ae050c7895bbbe17 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 75, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a2d23dfd7bbe4180ae050c7895bbbe17::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a2d23dfd7bbe4180ae050c7895bbbe17:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a2d23dfd7bbe4180ae050c7895bbbe17" class="color" data-tooltip="RGBA: 131, 75, 160, 1.0
   HEXA: #834ba0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_da8e2b22950b4b7fab1bdf58eeb0ed83 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 59, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_da8e2b22950b4b7fab1bdf58eeb0ed83::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_da8e2b22950b4b7fab1bdf58eeb0ed83:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_da8e2b22950b4b7fab1bdf58eeb0ed83" class="color" data-tooltip="RGBA: 87, 59, 136, 1.0
   HEXA: #573b88ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b928905f5b064c56acaba4c174c09f03 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b928905f5b064c56acaba4c174c09f03 div { flex: 1 1 0; }
           #_b928905f5b064c56acaba4c174c09f03 div.color { width: 100%; height: 100%; }
           #_b928905f5b064c56acaba4c174c09f03 div.cmap { width: 100%; height: auto; }
           #_b928905f5b064c56acaba4c174c09f03 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>redor</strong>
       
       <div id="_b928905f5b064c56acaba4c174c09f03" class="color-map">
           
                           <div>
                   <style>
       #_50564f48fcf24fbcb83dae05750a8013 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 210, 169, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50564f48fcf24fbcb83dae05750a8013::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50564f48fcf24fbcb83dae05750a8013:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50564f48fcf24fbcb83dae05750a8013" class="color" data-tooltip="RGBA: 246, 210, 169, 1.0
   HEXA: #f6d2a9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_79cd6949559b46aca606285d89437372 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 183, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_79cd6949559b46aca606285d89437372::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_79cd6949559b46aca606285d89437372:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_79cd6949559b46aca606285d89437372" class="color" data-tooltip="RGBA: 245, 183, 142, 1.0
   HEXA: #f5b78eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_39d449ff00db4552a55e31edf8a789ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 156, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_39d449ff00db4552a55e31edf8a789ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_39d449ff00db4552a55e31edf8a789ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_39d449ff00db4552a55e31edf8a789ee" class="color" data-tooltip="RGBA: 241, 156, 124, 1.0
   HEXA: #f19c7cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d7e38f633184cac96f3422beeca22f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 129, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d7e38f633184cac96f3422beeca22f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d7e38f633184cac96f3422beeca22f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d7e38f633184cac96f3422beeca22f6" class="color" data-tooltip="RGBA: 234, 129, 113, 1.0
   HEXA: #ea8171ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_07d5079421e54283b3ba472a641c814c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 104, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_07d5079421e54283b3ba472a641c814c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_07d5079421e54283b3ba472a641c814c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_07d5079421e54283b3ba472a641c814c" class="color" data-tooltip="RGBA: 221, 104, 108, 1.0
   HEXA: #dd686cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_76b9fb4de3a94c01a9da53b3e0e08d83 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 82, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_76b9fb4de3a94c01a9da53b3e0e08d83::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_76b9fb4de3a94c01a9da53b3e0e08d83:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_76b9fb4de3a94c01a9da53b3e0e08d83" class="color" data-tooltip="RGBA: 202, 82, 104, 1.0
   HEXA: #ca5268ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4483711811c6498089c92122bd014b02 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 63, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4483711811c6498089c92122bd014b02::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4483711811c6498089c92122bd014b02:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4483711811c6498089c92122bd014b02" class="color" data-tooltip="RGBA: 177, 63, 100, 1.0
   HEXA: #b13f64ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ceaef2a52b1547b3a8c179a289000dad {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ceaef2a52b1547b3a8c179a289000dad div { flex: 1 1 0; }
           #_ceaef2a52b1547b3a8c179a289000dad div.color { width: 100%; height: 100%; }
           #_ceaef2a52b1547b3a8c179a289000dad div.cmap { width: 100%; height: auto; }
           #_ceaef2a52b1547b3a8c179a289000dad div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>sunset</strong>
       
       <div id="_ceaef2a52b1547b3a8c179a289000dad" class="color-map">
           
                           <div>
                   <style>
       #_f497f1b65c6549168e3d3662692a6a31 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 231, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f497f1b65c6549168e3d3662692a6a31::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f497f1b65c6549168e3d3662692a6a31:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f497f1b65c6549168e3d3662692a6a31" class="color" data-tooltip="RGBA: 243, 231, 155, 1.0
   HEXA: #f3e79bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7a699fc65fc24934aff51a2b49c5274a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 196, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7a699fc65fc24934aff51a2b49c5274a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7a699fc65fc24934aff51a2b49c5274a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7a699fc65fc24934aff51a2b49c5274a" class="color" data-tooltip="RGBA: 250, 196, 132, 1.0
   HEXA: #fac484ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9764aee9a67346efb1e926ccd17c24d4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 160, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9764aee9a67346efb1e926ccd17c24d4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9764aee9a67346efb1e926ccd17c24d4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9764aee9a67346efb1e926ccd17c24d4" class="color" data-tooltip="RGBA: 248, 160, 126, 1.0
   HEXA: #f8a07eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a644359d571c412691bcc38fc843d5eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 127, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a644359d571c412691bcc38fc843d5eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a644359d571c412691bcc38fc843d5eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a644359d571c412691bcc38fc843d5eb" class="color" data-tooltip="RGBA: 235, 127, 134, 1.0
   HEXA: #eb7f86ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cfa687a657bc415993dfd13bd4b3fdca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 102, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cfa687a657bc415993dfd13bd4b3fdca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cfa687a657bc415993dfd13bd4b3fdca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cfa687a657bc415993dfd13bd4b3fdca" class="color" data-tooltip="RGBA: 206, 102, 147, 1.0
   HEXA: #ce6693ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4ef763a64abd4fb68062875546c10f34 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 89, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4ef763a64abd4fb68062875546c10f34::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4ef763a64abd4fb68062875546c10f34:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4ef763a64abd4fb68062875546c10f34" class="color" data-tooltip="RGBA: 160, 89, 160, 1.0
   HEXA: #a059a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c062001c99364517904d8d7858ac57a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(92, 83, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c062001c99364517904d8d7858ac57a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c062001c99364517904d8d7858ac57a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c062001c99364517904d8d7858ac57a3" class="color" data-tooltip="RGBA: 92, 83, 165, 1.0
   HEXA: #5c53a5ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_70961a7a3e8a42dbb08c3a6c5e8b73fe {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_70961a7a3e8a42dbb08c3a6c5e8b73fe div { flex: 1 1 0; }
           #_70961a7a3e8a42dbb08c3a6c5e8b73fe div.color { width: 100%; height: 100%; }
           #_70961a7a3e8a42dbb08c3a6c5e8b73fe div.cmap { width: 100%; height: auto; }
           #_70961a7a3e8a42dbb08c3a6c5e8b73fe div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>sunsetdark</strong>
       
       <div id="_70961a7a3e8a42dbb08c3a6c5e8b73fe" class="color-map">
           
                           <div>
                   <style>
       #_4d4d94fd4b56417faf943d9132543ffa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 222, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d4d94fd4b56417faf943d9132543ffa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d4d94fd4b56417faf943d9132543ffa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d4d94fd4b56417faf943d9132543ffa" class="color" data-tooltip="RGBA: 252, 222, 156, 1.0
   HEXA: #fcde9cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a8526e101aad4e8caa0ae4d6e7006ded { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 164, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8526e101aad4e8caa0ae4d6e7006ded::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8526e101aad4e8caa0ae4d6e7006ded:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8526e101aad4e8caa0ae4d6e7006ded" class="color" data-tooltip="RGBA: 250, 164, 118, 1.0
   HEXA: #faa476ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_247d5f9c0ff94421aff3bcc987803473 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 116, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_247d5f9c0ff94421aff3bcc987803473::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_247d5f9c0ff94421aff3bcc987803473:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_247d5f9c0ff94421aff3bcc987803473" class="color" data-tooltip="RGBA: 240, 116, 110, 1.0
   HEXA: #f0746eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_82921c6f69c64005b6e4d555f18c91a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 79, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_82921c6f69c64005b6e4d555f18c91a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_82921c6f69c64005b6e4d555f18c91a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_82921c6f69c64005b6e4d555f18c91a4" class="color" data-tooltip="RGBA: 227, 79, 111, 1.0
   HEXA: #e34f6fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8d8ef53cf495451abb4102aa94469fe1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 57, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8d8ef53cf495451abb4102aa94469fe1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8d8ef53cf495451abb4102aa94469fe1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8d8ef53cf495451abb4102aa94469fe1" class="color" data-tooltip="RGBA: 220, 57, 119, 1.0
   HEXA: #dc3977ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_426800ff50f64e6c8bde655ec7a4fb06 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 37, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_426800ff50f64e6c8bde655ec7a4fb06::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_426800ff50f64e6c8bde655ec7a4fb06:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_426800ff50f64e6c8bde655ec7a4fb06" class="color" data-tooltip="RGBA: 185, 37, 122, 1.0
   HEXA: #b9257aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_364cae5f719d46b4ae282011775da566 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 29, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_364cae5f719d46b4ae282011775da566::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_364cae5f719d46b4ae282011775da566:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_364cae5f719d46b4ae282011775da566" class="color" data-tooltip="RGBA: 124, 29, 111, 1.0
   HEXA: #7c1d6fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2c283b75959e454d83820f210ad48883 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2c283b75959e454d83820f210ad48883 div { flex: 1 1 0; }
           #_2c283b75959e454d83820f210ad48883 div.color { width: 100%; height: 100%; }
           #_2c283b75959e454d83820f210ad48883 div.cmap { width: 100%; height: auto; }
           #_2c283b75959e454d83820f210ad48883 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>teal</strong>
       
       <div id="_2c283b75959e454d83820f210ad48883" class="color-map">
           
                           <div>
                   <style>
       #_ef7c25a115674e8e9f938bfaac328def { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 238, 234, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef7c25a115674e8e9f938bfaac328def::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef7c25a115674e8e9f938bfaac328def:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef7c25a115674e8e9f938bfaac328def" class="color" data-tooltip="RGBA: 209, 238, 234, 1.0
   HEXA: #d1eeeaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b56f949184a246f3aad804fec3601b1e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 219, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b56f949184a246f3aad804fec3601b1e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b56f949184a246f3aad804fec3601b1e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b56f949184a246f3aad804fec3601b1e" class="color" data-tooltip="RGBA: 168, 219, 217, 1.0
   HEXA: #a8dbd9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_749569cbb28d40ca91db3ca87b47fd97 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 196, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_749569cbb28d40ca91db3ca87b47fd97::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_749569cbb28d40ca91db3ca87b47fd97:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_749569cbb28d40ca91db3ca87b47fd97" class="color" data-tooltip="RGBA: 133, 196, 201, 1.0
   HEXA: #85c4c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_edc805eae1b844ae8950f8d40e166503 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 171, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_edc805eae1b844ae8950f8d40e166503::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_edc805eae1b844ae8950f8d40e166503:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_edc805eae1b844ae8950f8d40e166503" class="color" data-tooltip="RGBA: 104, 171, 184, 1.0
   HEXA: #68abb8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ac65e85c69342e3a05a080b42771414 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(79, 144, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ac65e85c69342e3a05a080b42771414::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ac65e85c69342e3a05a080b42771414:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ac65e85c69342e3a05a080b42771414" class="color" data-tooltip="RGBA: 79, 144, 166, 1.0
   HEXA: #4f90a6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4865e4ff4da3496f84cb24b178caa65b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 115, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4865e4ff4da3496f84cb24b178caa65b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4865e4ff4da3496f84cb24b178caa65b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4865e4ff4da3496f84cb24b178caa65b" class="color" data-tooltip="RGBA: 59, 115, 143, 1.0
   HEXA: #3b738fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a3054931069b48cb8d81b499945693da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 86, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a3054931069b48cb8d81b499945693da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a3054931069b48cb8d81b499945693da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a3054931069b48cb8d81b499945693da" class="color" data-tooltip="RGBA: 42, 86, 116, 1.0
   HEXA: #2a5674ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_495fb94edaad4560bb9158992feca693 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_495fb94edaad4560bb9158992feca693 div { flex: 1 1 0; }
           #_495fb94edaad4560bb9158992feca693 div.color { width: 100%; height: 100%; }
           #_495fb94edaad4560bb9158992feca693 div.cmap { width: 100%; height: auto; }
           #_495fb94edaad4560bb9158992feca693 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tealgrn</strong>
       
       <div id="_495fb94edaad4560bb9158992feca693" class="color-map">
           
                           <div>
                   <style>
       #_dd4ed7c4a3674b90a326d79719ab9556 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(176, 242, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dd4ed7c4a3674b90a326d79719ab9556::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dd4ed7c4a3674b90a326d79719ab9556:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dd4ed7c4a3674b90a326d79719ab9556" class="color" data-tooltip="RGBA: 176, 242, 188, 1.0
   HEXA: #b0f2bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c5fde8d7bb24cc6aacfa00c944f9e97 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 232, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c5fde8d7bb24cc6aacfa00c944f9e97::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c5fde8d7bb24cc6aacfa00c944f9e97:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c5fde8d7bb24cc6aacfa00c944f9e97" class="color" data-tooltip="RGBA: 137, 232, 172, 1.0
   HEXA: #89e8acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fb23f29f71264b8193d059a373ed124f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 219, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fb23f29f71264b8193d059a373ed124f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fb23f29f71264b8193d059a373ed124f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fb23f29f71264b8193d059a373ed124f" class="color" data-tooltip="RGBA: 103, 219, 165, 1.0
   HEXA: #67dba5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4046cf1b04ad48d4ac337fe9a3769114 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 200, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4046cf1b04ad48d4ac337fe9a3769114::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4046cf1b04ad48d4ac337fe9a3769114:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4046cf1b04ad48d4ac337fe9a3769114" class="color" data-tooltip="RGBA: 76, 200, 163, 1.0
   HEXA: #4cc8a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3acebf85ad85463cb2aec5e0cb68a80f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 178, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3acebf85ad85463cb2aec5e0cb68a80f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3acebf85ad85463cb2aec5e0cb68a80f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3acebf85ad85463cb2aec5e0cb68a80f" class="color" data-tooltip="RGBA: 56, 178, 163, 1.0
   HEXA: #38b2a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_195a2ff99258425e9e353427e96571c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 152, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_195a2ff99258425e9e353427e96571c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_195a2ff99258425e9e353427e96571c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_195a2ff99258425e9e353427e96571c9" class="color" data-tooltip="RGBA: 44, 152, 160, 1.0
   HEXA: #2c98a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86ddedc7ae6d47508da39249c1bff7f9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 125, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86ddedc7ae6d47508da39249c1bff7f9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86ddedc7ae6d47508da39249c1bff7f9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86ddedc7ae6d47508da39249c1bff7f9" class="color" data-tooltip="RGBA: 37, 125, 152, 1.0
   HEXA: #257d98ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4b790047eb684a4f889ad149e9dc9733 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4b790047eb684a4f889ad149e9dc9733 div { flex: 1 1 0; }
           #_4b790047eb684a4f889ad149e9dc9733 div.color { width: 100%; height: 100%; }
           #_4b790047eb684a4f889ad149e9dc9733 div.cmap { width: 100%; height: auto; }
           #_4b790047eb684a4f889ad149e9dc9733 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>aggrnyl</strong>
       
       <div id="_4b790047eb684a4f889ad149e9dc9733" class="color-map">
           
                           <div>
                   <style>
       #_9a1526ecffe54f1cb9b004b28ffa2cf5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 86, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9a1526ecffe54f1cb9b004b28ffa2cf5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9a1526ecffe54f1cb9b004b28ffa2cf5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9a1526ecffe54f1cb9b004b28ffa2cf5" class="color" data-tooltip="RGBA: 36, 86, 104, 1.0
   HEXA: #245668ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_62fc2d1f70f34f0890366fcec9343c10 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 114, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_62fc2d1f70f34f0890366fcec9343c10::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_62fc2d1f70f34f0890366fcec9343c10:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_62fc2d1f70f34f0890366fcec9343c10" class="color" data-tooltip="RGBA: 15, 114, 121, 1.0
   HEXA: #0f7279ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f7c8e501c4b84defbfc47bab3ff87050 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 143, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f7c8e501c4b84defbfc47bab3ff87050::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f7c8e501c4b84defbfc47bab3ff87050:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f7c8e501c4b84defbfc47bab3ff87050" class="color" data-tooltip="RGBA: 13, 143, 129, 1.0
   HEXA: #0d8f81ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_324948393abe42ae88cea5c6568e5b23 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 171, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_324948393abe42ae88cea5c6568e5b23::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_324948393abe42ae88cea5c6568e5b23:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_324948393abe42ae88cea5c6568e5b23" class="color" data-tooltip="RGBA: 57, 171, 126, 1.0
   HEXA: #39ab7eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_792948c8d06446919bf0e51fad734161 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 197, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_792948c8d06446919bf0e51fad734161::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_792948c8d06446919bf0e51fad734161:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_792948c8d06446919bf0e51fad734161" class="color" data-tooltip="RGBA: 110, 197, 116, 1.0
   HEXA: #6ec574ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a550777afe2840178dce12bcc7ac312e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(169, 220, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a550777afe2840178dce12bcc7ac312e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a550777afe2840178dce12bcc7ac312e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a550777afe2840178dce12bcc7ac312e" class="color" data-tooltip="RGBA: 169, 220, 103, 1.0
   HEXA: #a9dc67ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_63615faa1de5463ca7244fbc3b67e986 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 239, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_63615faa1de5463ca7244fbc3b67e986::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_63615faa1de5463ca7244fbc3b67e986:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_63615faa1de5463ca7244fbc3b67e986" class="color" data-tooltip="RGBA: 237, 239, 93, 1.0
   HEXA: #edef5dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_30961b7ead2d4208b9067609f4ebd40e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_30961b7ead2d4208b9067609f4ebd40e div { flex: 1 1 0; }
           #_30961b7ead2d4208b9067609f4ebd40e div.color { width: 100%; height: 100%; }
           #_30961b7ead2d4208b9067609f4ebd40e div.cmap { width: 100%; height: auto; }
           #_30961b7ead2d4208b9067609f4ebd40e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>agsunset</strong>
       
       <div id="_30961b7ead2d4208b9067609f4ebd40e" class="color-map">
           
                           <div>
                   <style>
       #_cce2e3c947114c42a29716641cb673cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(75, 41, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cce2e3c947114c42a29716641cb673cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cce2e3c947114c42a29716641cb673cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cce2e3c947114c42a29716641cb673cf" class="color" data-tooltip="RGBA: 75, 41, 145, 1.0
   HEXA: #4b2991ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b0c80ea38a2b4a0c9e3ccbf1c7b91527 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 44, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b0c80ea38a2b4a0c9e3ccbf1c7b91527::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b0c80ea38a2b4a0c9e3ccbf1c7b91527:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b0c80ea38a2b4a0c9e3ccbf1c7b91527" class="color" data-tooltip="RGBA: 135, 44, 162, 1.0
   HEXA: #872ca2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_37e9e5cdc068453b9ec1090a8076bb57 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 54, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_37e9e5cdc068453b9ec1090a8076bb57::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_37e9e5cdc068453b9ec1090a8076bb57:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_37e9e5cdc068453b9ec1090a8076bb57" class="color" data-tooltip="RGBA: 192, 54, 157, 1.0
   HEXA: #c0369dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6bb3e9144ac141cbaf8c3427115d64a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 79, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6bb3e9144ac141cbaf8c3427115d64a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6bb3e9144ac141cbaf8c3427115d64a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6bb3e9144ac141cbaf8c3427115d64a2" class="color" data-tooltip="RGBA: 234, 79, 136, 1.0
   HEXA: #ea4f88ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_118cedbc46d542e885fe256a88b7dc49 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 120, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_118cedbc46d542e885fe256a88b7dc49::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_118cedbc46d542e885fe256a88b7dc49:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_118cedbc46d542e885fe256a88b7dc49" class="color" data-tooltip="RGBA: 250, 120, 118, 1.0
   HEXA: #fa7876ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_486182ddaa9a45789730d9d27d90a639 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 169, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_486182ddaa9a45789730d9d27d90a639::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_486182ddaa9a45789730d9d27d90a639:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_486182ddaa9a45789730d9d27d90a639" class="color" data-tooltip="RGBA: 246, 169, 122, 1.0
   HEXA: #f6a97aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ec7ccb20f06040a4a9d1e264d5b17139 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 217, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ec7ccb20f06040a4a9d1e264d5b17139::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ec7ccb20f06040a4a9d1e264d5b17139:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ec7ccb20f06040a4a9d1e264d5b17139" class="color" data-tooltip="RGBA: 237, 217, 163, 1.0
   HEXA: #edd9a3ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4cf1d88c8fcd41f7850d3b5ac89541b2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4cf1d88c8fcd41f7850d3b5ac89541b2 div { flex: 1 1 0; }
           #_4cf1d88c8fcd41f7850d3b5ac89541b2 div.color { width: 100%; height: 100%; }
           #_4cf1d88c8fcd41f7850d3b5ac89541b2 div.cmap { width: 100%; height: auto; }
           #_4cf1d88c8fcd41f7850d3b5ac89541b2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>blues</strong>
       
       <div id="_4cf1d88c8fcd41f7850d3b5ac89541b2" class="color-map">
           
                           <div>
                   <style>
       #_69c6b53c42cf49eb8acccc071828cbb1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 251, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_69c6b53c42cf49eb8acccc071828cbb1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_69c6b53c42cf49eb8acccc071828cbb1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_69c6b53c42cf49eb8acccc071828cbb1" class="color" data-tooltip="RGBA: 247, 251, 255, 1.0
   HEXA: #f7fbffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1e762e8ce3b24a899552c2a8139af240 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 235, 247, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1e762e8ce3b24a899552c2a8139af240::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1e762e8ce3b24a899552c2a8139af240:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1e762e8ce3b24a899552c2a8139af240" class="color" data-tooltip="RGBA: 222, 235, 247, 1.0
   HEXA: #deebf7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d589063a35ea4d50a976528d9dc10669 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 219, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d589063a35ea4d50a976528d9dc10669::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d589063a35ea4d50a976528d9dc10669:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d589063a35ea4d50a976528d9dc10669" class="color" data-tooltip="RGBA: 198, 219, 239, 1.0
   HEXA: #c6dbefff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_28228fabef2d4d909eee8221981dcf46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 202, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_28228fabef2d4d909eee8221981dcf46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_28228fabef2d4d909eee8221981dcf46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_28228fabef2d4d909eee8221981dcf46" class="color" data-tooltip="RGBA: 158, 202, 225, 1.0
   HEXA: #9ecae1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b3a372b7f6854c60b1e22ea06167238e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 174, 214, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b3a372b7f6854c60b1e22ea06167238e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b3a372b7f6854c60b1e22ea06167238e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b3a372b7f6854c60b1e22ea06167238e" class="color" data-tooltip="RGBA: 107, 174, 214, 1.0
   HEXA: #6baed6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9609fbe566c34e8eb0ecebe76a4a7156 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 146, 198, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9609fbe566c34e8eb0ecebe76a4a7156::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9609fbe566c34e8eb0ecebe76a4a7156:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9609fbe566c34e8eb0ecebe76a4a7156" class="color" data-tooltip="RGBA: 66, 146, 198, 1.0
   HEXA: #4292c6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eebf299088d74d588923761097b24673 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 113, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eebf299088d74d588923761097b24673::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eebf299088d74d588923761097b24673:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eebf299088d74d588923761097b24673" class="color" data-tooltip="RGBA: 33, 113, 181, 1.0
   HEXA: #2171b5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_de82aac6df32477f90b265234cfc5082 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 81, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_de82aac6df32477f90b265234cfc5082::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_de82aac6df32477f90b265234cfc5082:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_de82aac6df32477f90b265234cfc5082" class="color" data-tooltip="RGBA: 8, 81, 156, 1.0
   HEXA: #08519cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c645914e2df045aaafc6b332694aaf6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 48, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c645914e2df045aaafc6b332694aaf6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c645914e2df045aaafc6b332694aaf6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c645914e2df045aaafc6b332694aaf6c" class="color" data-tooltip="RGBA: 8, 48, 107, 1.0
   HEXA: #08306bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_eaa59e399bfc40648d7a5ddfc8d88c13 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_eaa59e399bfc40648d7a5ddfc8d88c13 div { flex: 1 1 0; }
           #_eaa59e399bfc40648d7a5ddfc8d88c13 div.color { width: 100%; height: 100%; }
           #_eaa59e399bfc40648d7a5ddfc8d88c13 div.cmap { width: 100%; height: auto; }
           #_eaa59e399bfc40648d7a5ddfc8d88c13 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bugn</strong>
       
       <div id="_eaa59e399bfc40648d7a5ddfc8d88c13" class="color-map">
           
                           <div>
                   <style>
       #_fcdea8046d9042e89c08e6e8e5a159c2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fcdea8046d9042e89c08e6e8e5a159c2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fcdea8046d9042e89c08e6e8e5a159c2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fcdea8046d9042e89c08e6e8e5a159c2" class="color" data-tooltip="RGBA: 247, 252, 253, 1.0
   HEXA: #f7fcfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be95fbe31a4e4057a50ccc769214dd24 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 245, 249, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be95fbe31a4e4057a50ccc769214dd24::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be95fbe31a4e4057a50ccc769214dd24:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be95fbe31a4e4057a50ccc769214dd24" class="color" data-tooltip="RGBA: 229, 245, 249, 1.0
   HEXA: #e5f5f9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_94cd0634ae9b4b42a8d41cc658cc4c4e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 236, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_94cd0634ae9b4b42a8d41cc658cc4c4e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_94cd0634ae9b4b42a8d41cc658cc4c4e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_94cd0634ae9b4b42a8d41cc658cc4c4e" class="color" data-tooltip="RGBA: 204, 236, 230, 1.0
   HEXA: #ccece6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fd9d354c1c1a45848cac6b295db174d7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 216, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fd9d354c1c1a45848cac6b295db174d7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fd9d354c1c1a45848cac6b295db174d7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fd9d354c1c1a45848cac6b295db174d7" class="color" data-tooltip="RGBA: 153, 216, 201, 1.0
   HEXA: #99d8c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_27d08a4c1f0e4cc6b794ed4b5d69eab0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 194, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_27d08a4c1f0e4cc6b794ed4b5d69eab0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_27d08a4c1f0e4cc6b794ed4b5d69eab0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_27d08a4c1f0e4cc6b794ed4b5d69eab0" class="color" data-tooltip="RGBA: 102, 194, 164, 1.0
   HEXA: #66c2a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_599dafc1b83942d896ebca871c75c328 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 174, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_599dafc1b83942d896ebca871c75c328::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_599dafc1b83942d896ebca871c75c328:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_599dafc1b83942d896ebca871c75c328" class="color" data-tooltip="RGBA: 65, 174, 118, 1.0
   HEXA: #41ae76ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_247e354350e94f838d1d5b79fb8697da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 139, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_247e354350e94f838d1d5b79fb8697da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_247e354350e94f838d1d5b79fb8697da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_247e354350e94f838d1d5b79fb8697da" class="color" data-tooltip="RGBA: 35, 139, 69, 1.0
   HEXA: #238b45ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e4d92d197eed46fba123d8b50229dd74 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 109, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e4d92d197eed46fba123d8b50229dd74::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e4d92d197eed46fba123d8b50229dd74:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e4d92d197eed46fba123d8b50229dd74" class="color" data-tooltip="RGBA: 0, 109, 44, 1.0
   HEXA: #006d2cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6767509ba5364d48a7eba3c7425d04b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 68, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6767509ba5364d48a7eba3c7425d04b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6767509ba5364d48a7eba3c7425d04b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6767509ba5364d48a7eba3c7425d04b3" class="color" data-tooltip="RGBA: 0, 68, 27, 1.0
   HEXA: #00441bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_11e4f33d7d1d47f783b1edbeab623627 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_11e4f33d7d1d47f783b1edbeab623627 div { flex: 1 1 0; }
           #_11e4f33d7d1d47f783b1edbeab623627 div.color { width: 100%; height: 100%; }
           #_11e4f33d7d1d47f783b1edbeab623627 div.cmap { width: 100%; height: auto; }
           #_11e4f33d7d1d47f783b1edbeab623627 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bupu</strong>
       
       <div id="_11e4f33d7d1d47f783b1edbeab623627" class="color-map">
           
                           <div>
                   <style>
       #_285339342b9a43779ca817a104e6d53c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_285339342b9a43779ca817a104e6d53c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_285339342b9a43779ca817a104e6d53c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_285339342b9a43779ca817a104e6d53c" class="color" data-tooltip="RGBA: 247, 252, 253, 1.0
   HEXA: #f7fcfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5565c52a996c45ef986aecbef8a5a71e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 236, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5565c52a996c45ef986aecbef8a5a71e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5565c52a996c45ef986aecbef8a5a71e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5565c52a996c45ef986aecbef8a5a71e" class="color" data-tooltip="RGBA: 224, 236, 244, 1.0
   HEXA: #e0ecf4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bf6cb1797b314cf8b17da6d5f7df8d20 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 211, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf6cb1797b314cf8b17da6d5f7df8d20::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf6cb1797b314cf8b17da6d5f7df8d20:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf6cb1797b314cf8b17da6d5f7df8d20" class="color" data-tooltip="RGBA: 191, 211, 230, 1.0
   HEXA: #bfd3e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c0a57d3930e043aeb58e5290b6f92d76 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 188, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c0a57d3930e043aeb58e5290b6f92d76::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c0a57d3930e043aeb58e5290b6f92d76:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c0a57d3930e043aeb58e5290b6f92d76" class="color" data-tooltip="RGBA: 158, 188, 218, 1.0
   HEXA: #9ebcdaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_93e4b49831f845fe8637c857b93554d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 150, 198, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_93e4b49831f845fe8637c857b93554d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_93e4b49831f845fe8637c857b93554d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_93e4b49831f845fe8637c857b93554d1" class="color" data-tooltip="RGBA: 140, 150, 198, 1.0
   HEXA: #8c96c6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b43e3e496484efc8690ae1582653eef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 107, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b43e3e496484efc8690ae1582653eef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b43e3e496484efc8690ae1582653eef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b43e3e496484efc8690ae1582653eef" class="color" data-tooltip="RGBA: 140, 107, 177, 1.0
   HEXA: #8c6bb1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_62107d29e9c145dcba325b37e46d4680 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 65, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_62107d29e9c145dcba325b37e46d4680::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_62107d29e9c145dcba325b37e46d4680:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_62107d29e9c145dcba325b37e46d4680" class="color" data-tooltip="RGBA: 136, 65, 157, 1.0
   HEXA: #88419dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_45b69b7cbd5d488cacd05194280cdd2d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 15, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_45b69b7cbd5d488cacd05194280cdd2d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_45b69b7cbd5d488cacd05194280cdd2d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_45b69b7cbd5d488cacd05194280cdd2d" class="color" data-tooltip="RGBA: 129, 15, 124, 1.0
   HEXA: #810f7cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dd3d9bbf75794b14b89b9e5fcb274818 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 0, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dd3d9bbf75794b14b89b9e5fcb274818::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dd3d9bbf75794b14b89b9e5fcb274818:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dd3d9bbf75794b14b89b9e5fcb274818" class="color" data-tooltip="RGBA: 77, 0, 75, 1.0
   HEXA: #4d004bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_feb2f19aa111410da666337f6d800296 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_feb2f19aa111410da666337f6d800296 div { flex: 1 1 0; }
           #_feb2f19aa111410da666337f6d800296 div.color { width: 100%; height: 100%; }
           #_feb2f19aa111410da666337f6d800296 div.cmap { width: 100%; height: auto; }
           #_feb2f19aa111410da666337f6d800296 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>gnbu</strong>
       
       <div id="_feb2f19aa111410da666337f6d800296" class="color-map">
           
                           <div>
                   <style>
       #_1f853cb10a5f42fcbbf907a7754604b4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f853cb10a5f42fcbbf907a7754604b4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f853cb10a5f42fcbbf907a7754604b4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f853cb10a5f42fcbbf907a7754604b4" class="color" data-tooltip="RGBA: 247, 252, 240, 1.0
   HEXA: #f7fcf0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d0841c2ebaae4bee8ec9a2c55db6dc6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 243, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d0841c2ebaae4bee8ec9a2c55db6dc6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d0841c2ebaae4bee8ec9a2c55db6dc6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d0841c2ebaae4bee8ec9a2c55db6dc6c" class="color" data-tooltip="RGBA: 224, 243, 219, 1.0
   HEXA: #e0f3dbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2960cd7475214ea581e40df4f30db5e2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 235, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2960cd7475214ea581e40df4f30db5e2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2960cd7475214ea581e40df4f30db5e2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2960cd7475214ea581e40df4f30db5e2" class="color" data-tooltip="RGBA: 204, 235, 197, 1.0
   HEXA: #ccebc5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ebe6c3dab04b49fb9ce9e3f7e62a0fed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 221, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ebe6c3dab04b49fb9ce9e3f7e62a0fed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ebe6c3dab04b49fb9ce9e3f7e62a0fed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ebe6c3dab04b49fb9ce9e3f7e62a0fed" class="color" data-tooltip="RGBA: 168, 221, 181, 1.0
   HEXA: #a8ddb5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bedf66f4070e4e00a7d67d2ba78fbb6e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 204, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bedf66f4070e4e00a7d67d2ba78fbb6e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bedf66f4070e4e00a7d67d2ba78fbb6e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bedf66f4070e4e00a7d67d2ba78fbb6e" class="color" data-tooltip="RGBA: 123, 204, 196, 1.0
   HEXA: #7bccc4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e03d7038fcf483bb7aa3dc77c404320 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(78, 179, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e03d7038fcf483bb7aa3dc77c404320::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e03d7038fcf483bb7aa3dc77c404320:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e03d7038fcf483bb7aa3dc77c404320" class="color" data-tooltip="RGBA: 78, 179, 211, 1.0
   HEXA: #4eb3d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_60ff2d2952604578a1c7d475b702d68a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(43, 140, 190, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60ff2d2952604578a1c7d475b702d68a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60ff2d2952604578a1c7d475b702d68a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60ff2d2952604578a1c7d475b702d68a" class="color" data-tooltip="RGBA: 43, 140, 190, 1.0
   HEXA: #2b8cbeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c55ee81f5a3f4181bc23536750d008df { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 104, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c55ee81f5a3f4181bc23536750d008df::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c55ee81f5a3f4181bc23536750d008df:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c55ee81f5a3f4181bc23536750d008df" class="color" data-tooltip="RGBA: 8, 104, 172, 1.0
   HEXA: #0868acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_88012e3d79484b3399736cd2ef17e831 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 64, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_88012e3d79484b3399736cd2ef17e831::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_88012e3d79484b3399736cd2ef17e831:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_88012e3d79484b3399736cd2ef17e831" class="color" data-tooltip="RGBA: 8, 64, 129, 1.0
   HEXA: #084081ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_d1a533fe78904e1d84f716cb47bb1ab4 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_d1a533fe78904e1d84f716cb47bb1ab4 div { flex: 1 1 0; }
           #_d1a533fe78904e1d84f716cb47bb1ab4 div.color { width: 100%; height: 100%; }
           #_d1a533fe78904e1d84f716cb47bb1ab4 div.cmap { width: 100%; height: auto; }
           #_d1a533fe78904e1d84f716cb47bb1ab4 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>greens</strong>
       
       <div id="_d1a533fe78904e1d84f716cb47bb1ab4" class="color-map">
           
                           <div>
                   <style>
       #_e3cd10f1d20845e1b96e3773e901f020 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3cd10f1d20845e1b96e3773e901f020::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3cd10f1d20845e1b96e3773e901f020:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3cd10f1d20845e1b96e3773e901f020" class="color" data-tooltip="RGBA: 247, 252, 245, 1.0
   HEXA: #f7fcf5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_300b9a35d6804bb59c977b751a2e1bc1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 245, 224, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_300b9a35d6804bb59c977b751a2e1bc1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_300b9a35d6804bb59c977b751a2e1bc1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_300b9a35d6804bb59c977b751a2e1bc1" class="color" data-tooltip="RGBA: 229, 245, 224, 1.0
   HEXA: #e5f5e0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2ee854f0eae46aeab6bcaf2a7b7a959 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 233, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2ee854f0eae46aeab6bcaf2a7b7a959::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2ee854f0eae46aeab6bcaf2a7b7a959:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2ee854f0eae46aeab6bcaf2a7b7a959" class="color" data-tooltip="RGBA: 199, 233, 192, 1.0
   HEXA: #c7e9c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_16f642571b5347bd89ec83e3b1b3ecfc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 217, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_16f642571b5347bd89ec83e3b1b3ecfc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_16f642571b5347bd89ec83e3b1b3ecfc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_16f642571b5347bd89ec83e3b1b3ecfc" class="color" data-tooltip="RGBA: 161, 217, 155, 1.0
   HEXA: #a1d99bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5b30394be04b4317b7a5493e927f9a55 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 196, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5b30394be04b4317b7a5493e927f9a55::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5b30394be04b4317b7a5493e927f9a55:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5b30394be04b4317b7a5493e927f9a55" class="color" data-tooltip="RGBA: 116, 196, 118, 1.0
   HEXA: #74c476ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_797deca0863b4a3a81a554c70c06d45f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 171, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_797deca0863b4a3a81a554c70c06d45f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_797deca0863b4a3a81a554c70c06d45f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_797deca0863b4a3a81a554c70c06d45f" class="color" data-tooltip="RGBA: 65, 171, 93, 1.0
   HEXA: #41ab5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0dc6d0cf2cdc40f2825d8926b94256be { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 139, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0dc6d0cf2cdc40f2825d8926b94256be::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0dc6d0cf2cdc40f2825d8926b94256be:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0dc6d0cf2cdc40f2825d8926b94256be" class="color" data-tooltip="RGBA: 35, 139, 69, 1.0
   HEXA: #238b45ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d40f7df75184abbae87eeb609e723ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 109, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d40f7df75184abbae87eeb609e723ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d40f7df75184abbae87eeb609e723ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d40f7df75184abbae87eeb609e723ca" class="color" data-tooltip="RGBA: 0, 109, 44, 1.0
   HEXA: #006d2cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_58aa41b3bb4d4c23a712d5da70e45f6d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 68, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_58aa41b3bb4d4c23a712d5da70e45f6d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_58aa41b3bb4d4c23a712d5da70e45f6d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_58aa41b3bb4d4c23a712d5da70e45f6d" class="color" data-tooltip="RGBA: 0, 68, 27, 1.0
   HEXA: #00441bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5e5feac8ad874e568805e75592866a36 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5e5feac8ad874e568805e75592866a36 div { flex: 1 1 0; }
           #_5e5feac8ad874e568805e75592866a36 div.color { width: 100%; height: 100%; }
           #_5e5feac8ad874e568805e75592866a36 div.cmap { width: 100%; height: auto; }
           #_5e5feac8ad874e568805e75592866a36 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>greys</strong>
       
       <div id="_5e5feac8ad874e568805e75592866a36" class="color-map">
           
                           <div>
                   <style>
       #_ee456de86b0c4b59ab4b6cc4e7840b0b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee456de86b0c4b59ab4b6cc4e7840b0b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee456de86b0c4b59ab4b6cc4e7840b0b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee456de86b0c4b59ab4b6cc4e7840b0b" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9dba9f61a8814f10a95dc851f3676e3c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 240, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9dba9f61a8814f10a95dc851f3676e3c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9dba9f61a8814f10a95dc851f3676e3c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9dba9f61a8814f10a95dc851f3676e3c" class="color" data-tooltip="RGBA: 240, 240, 240, 1.0
   HEXA: #f0f0f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9505ddcedd148bcbe76bb3d80e9c779 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 217, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9505ddcedd148bcbe76bb3d80e9c779::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9505ddcedd148bcbe76bb3d80e9c779:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9505ddcedd148bcbe76bb3d80e9c779" class="color" data-tooltip="RGBA: 217, 217, 217, 1.0
   HEXA: #d9d9d9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3ab0c44735f54315ab8426c1ec145d9f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 189, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3ab0c44735f54315ab8426c1ec145d9f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3ab0c44735f54315ab8426c1ec145d9f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3ab0c44735f54315ab8426c1ec145d9f" class="color" data-tooltip="RGBA: 189, 189, 189, 1.0
   HEXA: #bdbdbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e7357c29014448109a6175e237166fa3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 150, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e7357c29014448109a6175e237166fa3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e7357c29014448109a6175e237166fa3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e7357c29014448109a6175e237166fa3" class="color" data-tooltip="RGBA: 150, 150, 150, 1.0
   HEXA: #969696ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8cece994574c493b9eb62a47260f3db3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 115, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8cece994574c493b9eb62a47260f3db3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8cece994574c493b9eb62a47260f3db3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8cece994574c493b9eb62a47260f3db3" class="color" data-tooltip="RGBA: 115, 115, 115, 1.0
   HEXA: #737373ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea3c9b4bba6145159559630698d089cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 82, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea3c9b4bba6145159559630698d089cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea3c9b4bba6145159559630698d089cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea3c9b4bba6145159559630698d089cd" class="color" data-tooltip="RGBA: 82, 82, 82, 1.0
   HEXA: #525252ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_898deda2d78347e993fb1ffc0666202f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 37, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_898deda2d78347e993fb1ffc0666202f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_898deda2d78347e993fb1ffc0666202f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_898deda2d78347e993fb1ffc0666202f" class="color" data-tooltip="RGBA: 37, 37, 37, 1.0
   HEXA: #252525ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab6b2844fe9c4685a3dbbe51f0e2ddca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab6b2844fe9c4685a3dbbe51f0e2ddca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab6b2844fe9c4685a3dbbe51f0e2ddca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab6b2844fe9c4685a3dbbe51f0e2ddca" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_88483d315b934008ab5cad86b906c30e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_88483d315b934008ab5cad86b906c30e div { flex: 1 1 0; }
           #_88483d315b934008ab5cad86b906c30e div.color { width: 100%; height: 100%; }
           #_88483d315b934008ab5cad86b906c30e div.cmap { width: 100%; height: auto; }
           #_88483d315b934008ab5cad86b906c30e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>oranges</strong>
       
       <div id="_88483d315b934008ab5cad86b906c30e" class="color-map">
           
                           <div>
                   <style>
       #_13d480fed5ff4dad8981309d51fba8cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 245, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_13d480fed5ff4dad8981309d51fba8cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_13d480fed5ff4dad8981309d51fba8cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_13d480fed5ff4dad8981309d51fba8cd" class="color" data-tooltip="RGBA: 255, 245, 235, 1.0
   HEXA: #fff5ebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_640cc4e19f544f349089e3d4cac96274 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 230, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_640cc4e19f544f349089e3d4cac96274::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_640cc4e19f544f349089e3d4cac96274:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_640cc4e19f544f349089e3d4cac96274" class="color" data-tooltip="RGBA: 254, 230, 206, 1.0
   HEXA: #fee6ceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7a322e95e0cf4db8943318957e2b600a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 208, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7a322e95e0cf4db8943318957e2b600a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7a322e95e0cf4db8943318957e2b600a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7a322e95e0cf4db8943318957e2b600a" class="color" data-tooltip="RGBA: 253, 208, 162, 1.0
   HEXA: #fdd0a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fcb4facf9e574fa09e599f5d9ee72f7d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 174, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fcb4facf9e574fa09e599f5d9ee72f7d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fcb4facf9e574fa09e599f5d9ee72f7d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fcb4facf9e574fa09e599f5d9ee72f7d" class="color" data-tooltip="RGBA: 253, 174, 107, 1.0
   HEXA: #fdae6bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9303e0477b1e4d56a5f25eea0e262028 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 141, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9303e0477b1e4d56a5f25eea0e262028::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9303e0477b1e4d56a5f25eea0e262028:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9303e0477b1e4d56a5f25eea0e262028" class="color" data-tooltip="RGBA: 253, 141, 60, 1.0
   HEXA: #fd8d3cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d5f5b3da777447659c53a77ce87d861d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 105, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d5f5b3da777447659c53a77ce87d861d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d5f5b3da777447659c53a77ce87d861d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d5f5b3da777447659c53a77ce87d861d" class="color" data-tooltip="RGBA: 241, 105, 19, 1.0
   HEXA: #f16913ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86cf8a94695d4af28977d6a159951b70 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 72, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86cf8a94695d4af28977d6a159951b70::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86cf8a94695d4af28977d6a159951b70:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86cf8a94695d4af28977d6a159951b70" class="color" data-tooltip="RGBA: 217, 72, 1, 1.0
   HEXA: #d94801ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e7a3cbfcfc0b4246b9f24a0d0c22fc41 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 54, 3, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e7a3cbfcfc0b4246b9f24a0d0c22fc41::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e7a3cbfcfc0b4246b9f24a0d0c22fc41:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e7a3cbfcfc0b4246b9f24a0d0c22fc41" class="color" data-tooltip="RGBA: 166, 54, 3, 1.0
   HEXA: #a63603ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2cd43e5be5e3417f9077f150ede21439 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 39, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2cd43e5be5e3417f9077f150ede21439::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2cd43e5be5e3417f9077f150ede21439:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2cd43e5be5e3417f9077f150ede21439" class="color" data-tooltip="RGBA: 127, 39, 4, 1.0
   HEXA: #7f2704ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_88e94cb0360f41aca39a57f09b7a0f36 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_88e94cb0360f41aca39a57f09b7a0f36 div { flex: 1 1 0; }
           #_88e94cb0360f41aca39a57f09b7a0f36 div.color { width: 100%; height: 100%; }
           #_88e94cb0360f41aca39a57f09b7a0f36 div.cmap { width: 100%; height: auto; }
           #_88e94cb0360f41aca39a57f09b7a0f36 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>orrd</strong>
       
       <div id="_88e94cb0360f41aca39a57f09b7a0f36" class="color-map">
           
                           <div>
                   <style>
       #_179daaed0ce24d56b31cb78e65c2ca99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_179daaed0ce24d56b31cb78e65c2ca99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_179daaed0ce24d56b31cb78e65c2ca99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_179daaed0ce24d56b31cb78e65c2ca99" class="color" data-tooltip="RGBA: 255, 247, 236, 1.0
   HEXA: #fff7ecff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bbdc258b90c9403b83a3a3ca9d54d3d8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 232, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bbdc258b90c9403b83a3a3ca9d54d3d8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bbdc258b90c9403b83a3a3ca9d54d3d8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bbdc258b90c9403b83a3a3ca9d54d3d8" class="color" data-tooltip="RGBA: 254, 232, 200, 1.0
   HEXA: #fee8c8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1b447c5adbb641f7abfd84db2cea32a5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 212, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1b447c5adbb641f7abfd84db2cea32a5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1b447c5adbb641f7abfd84db2cea32a5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1b447c5adbb641f7abfd84db2cea32a5" class="color" data-tooltip="RGBA: 253, 212, 158, 1.0
   HEXA: #fdd49eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f325e5a959148f5947797e290b2ed0b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 187, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f325e5a959148f5947797e290b2ed0b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f325e5a959148f5947797e290b2ed0b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f325e5a959148f5947797e290b2ed0b" class="color" data-tooltip="RGBA: 253, 187, 132, 1.0
   HEXA: #fdbb84ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_274895d9ad194a1bbfdbbb3fa19ef91a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 141, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_274895d9ad194a1bbfdbbb3fa19ef91a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_274895d9ad194a1bbfdbbb3fa19ef91a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_274895d9ad194a1bbfdbbb3fa19ef91a" class="color" data-tooltip="RGBA: 252, 141, 89, 1.0
   HEXA: #fc8d59ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_52f9d6109fcb41c6bff068aa2478091c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 101, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_52f9d6109fcb41c6bff068aa2478091c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_52f9d6109fcb41c6bff068aa2478091c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_52f9d6109fcb41c6bff068aa2478091c" class="color" data-tooltip="RGBA: 239, 101, 72, 1.0
   HEXA: #ef6548ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5feecf9598de4b438af22b1792c929b8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 48, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5feecf9598de4b438af22b1792c929b8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5feecf9598de4b438af22b1792c929b8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5feecf9598de4b438af22b1792c929b8" class="color" data-tooltip="RGBA: 215, 48, 31, 1.0
   HEXA: #d7301fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6c991c39f19941beace8faa8ba52e269 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6c991c39f19941beace8faa8ba52e269::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6c991c39f19941beace8faa8ba52e269:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6c991c39f19941beace8faa8ba52e269" class="color" data-tooltip="RGBA: 179, 0, 0, 1.0
   HEXA: #b30000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ca453dabeb94addb2e0c1cc5ee7dcd9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ca453dabeb94addb2e0c1cc5ee7dcd9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ca453dabeb94addb2e0c1cc5ee7dcd9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ca453dabeb94addb2e0c1cc5ee7dcd9" class="color" data-tooltip="RGBA: 127, 0, 0, 1.0
   HEXA: #7f0000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_19ed4ba1319e4e8dabf276513bf611f5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_19ed4ba1319e4e8dabf276513bf611f5 div { flex: 1 1 0; }
           #_19ed4ba1319e4e8dabf276513bf611f5 div.color { width: 100%; height: 100%; }
           #_19ed4ba1319e4e8dabf276513bf611f5 div.cmap { width: 100%; height: auto; }
           #_19ed4ba1319e4e8dabf276513bf611f5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>pubu</strong>
       
       <div id="_19ed4ba1319e4e8dabf276513bf611f5" class="color-map">
           
                           <div>
                   <style>
       #_4574dcc4e1564acaa656c19ce3b79676 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4574dcc4e1564acaa656c19ce3b79676::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4574dcc4e1564acaa656c19ce3b79676:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4574dcc4e1564acaa656c19ce3b79676" class="color" data-tooltip="RGBA: 255, 247, 251, 1.0
   HEXA: #fff7fbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a974e161a3784d789ed25234320d367d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 231, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a974e161a3784d789ed25234320d367d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a974e161a3784d789ed25234320d367d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a974e161a3784d789ed25234320d367d" class="color" data-tooltip="RGBA: 236, 231, 242, 1.0
   HEXA: #ece7f2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90748a86231443e7889ea4c4180e75d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 209, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90748a86231443e7889ea4c4180e75d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90748a86231443e7889ea4c4180e75d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90748a86231443e7889ea4c4180e75d9" class="color" data-tooltip="RGBA: 208, 209, 230, 1.0
   HEXA: #d0d1e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_33e00ab699a942b28ce7d71e73501fd9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 189, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_33e00ab699a942b28ce7d71e73501fd9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_33e00ab699a942b28ce7d71e73501fd9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_33e00ab699a942b28ce7d71e73501fd9" class="color" data-tooltip="RGBA: 166, 189, 219, 1.0
   HEXA: #a6bddbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_383daae5b60b4753adab364fe7b84317 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 169, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_383daae5b60b4753adab364fe7b84317::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_383daae5b60b4753adab364fe7b84317:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_383daae5b60b4753adab364fe7b84317" class="color" data-tooltip="RGBA: 116, 169, 207, 1.0
   HEXA: #74a9cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86491fb100ff459fb740f6f3dae87f2f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 144, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86491fb100ff459fb740f6f3dae87f2f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86491fb100ff459fb740f6f3dae87f2f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86491fb100ff459fb740f6f3dae87f2f" class="color" data-tooltip="RGBA: 54, 144, 192, 1.0
   HEXA: #3690c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7b955e6e2c3d4fb687e25615728db764 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 112, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7b955e6e2c3d4fb687e25615728db764::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7b955e6e2c3d4fb687e25615728db764:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7b955e6e2c3d4fb687e25615728db764" class="color" data-tooltip="RGBA: 5, 112, 176, 1.0
   HEXA: #0570b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_907cbab5f34f4468a224434c3e8749e1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 90, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_907cbab5f34f4468a224434c3e8749e1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_907cbab5f34f4468a224434c3e8749e1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_907cbab5f34f4468a224434c3e8749e1" class="color" data-tooltip="RGBA: 4, 90, 141, 1.0
   HEXA: #045a8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4cd9b0ba48a348e6aebdeccfe263d879 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(2, 56, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4cd9b0ba48a348e6aebdeccfe263d879::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4cd9b0ba48a348e6aebdeccfe263d879:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4cd9b0ba48a348e6aebdeccfe263d879" class="color" data-tooltip="RGBA: 2, 56, 88, 1.0
   HEXA: #023858ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5f807153d3204eed9a3733f4b4edfcf0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5f807153d3204eed9a3733f4b4edfcf0 div { flex: 1 1 0; }
           #_5f807153d3204eed9a3733f4b4edfcf0 div.color { width: 100%; height: 100%; }
           #_5f807153d3204eed9a3733f4b4edfcf0 div.cmap { width: 100%; height: auto; }
           #_5f807153d3204eed9a3733f4b4edfcf0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>pubugn</strong>
       
       <div id="_5f807153d3204eed9a3733f4b4edfcf0" class="color-map">
           
                           <div>
                   <style>
       #_e20ac4a89c594ce5a7dba16b361cfbf9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e20ac4a89c594ce5a7dba16b361cfbf9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e20ac4a89c594ce5a7dba16b361cfbf9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e20ac4a89c594ce5a7dba16b361cfbf9" class="color" data-tooltip="RGBA: 255, 247, 251, 1.0
   HEXA: #fff7fbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1d41c6a14d44ee7ba63fe8681441b30 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 226, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1d41c6a14d44ee7ba63fe8681441b30::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1d41c6a14d44ee7ba63fe8681441b30:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1d41c6a14d44ee7ba63fe8681441b30" class="color" data-tooltip="RGBA: 236, 226, 240, 1.0
   HEXA: #ece2f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_567f4714f21c40cfa4811421f631e1b8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 209, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_567f4714f21c40cfa4811421f631e1b8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_567f4714f21c40cfa4811421f631e1b8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_567f4714f21c40cfa4811421f631e1b8" class="color" data-tooltip="RGBA: 208, 209, 230, 1.0
   HEXA: #d0d1e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f9aa15b34ae14139a94c99c6dd90b52d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 189, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f9aa15b34ae14139a94c99c6dd90b52d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f9aa15b34ae14139a94c99c6dd90b52d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f9aa15b34ae14139a94c99c6dd90b52d" class="color" data-tooltip="RGBA: 166, 189, 219, 1.0
   HEXA: #a6bddbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c6d7156b4ec04d79b3d05ff8858421cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 169, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c6d7156b4ec04d79b3d05ff8858421cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c6d7156b4ec04d79b3d05ff8858421cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c6d7156b4ec04d79b3d05ff8858421cd" class="color" data-tooltip="RGBA: 103, 169, 207, 1.0
   HEXA: #67a9cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9a7d74f90114b299f7f2b66fa95aead { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 144, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9a7d74f90114b299f7f2b66fa95aead::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9a7d74f90114b299f7f2b66fa95aead:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9a7d74f90114b299f7f2b66fa95aead" class="color" data-tooltip="RGBA: 54, 144, 192, 1.0
   HEXA: #3690c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_41047fdf0a0c4bb7ba6617816e229038 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(2, 129, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_41047fdf0a0c4bb7ba6617816e229038::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_41047fdf0a0c4bb7ba6617816e229038:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_41047fdf0a0c4bb7ba6617816e229038" class="color" data-tooltip="RGBA: 2, 129, 138, 1.0
   HEXA: #02818aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4e7af95aeaf4fd583c31810e2e38fed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 108, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4e7af95aeaf4fd583c31810e2e38fed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4e7af95aeaf4fd583c31810e2e38fed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4e7af95aeaf4fd583c31810e2e38fed" class="color" data-tooltip="RGBA: 1, 108, 89, 1.0
   HEXA: #016c59ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a579f5037694407f85d08e74b11a37cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 70, 54, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a579f5037694407f85d08e74b11a37cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a579f5037694407f85d08e74b11a37cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a579f5037694407f85d08e74b11a37cc" class="color" data-tooltip="RGBA: 1, 70, 54, 1.0
   HEXA: #014636ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_04186b0582114cdb809c83dcbec92947 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_04186b0582114cdb809c83dcbec92947 div { flex: 1 1 0; }
           #_04186b0582114cdb809c83dcbec92947 div.color { width: 100%; height: 100%; }
           #_04186b0582114cdb809c83dcbec92947 div.cmap { width: 100%; height: auto; }
           #_04186b0582114cdb809c83dcbec92947 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>purd</strong>
       
       <div id="_04186b0582114cdb809c83dcbec92947" class="color-map">
           
                           <div>
                   <style>
       #_7e1349f0048d4856a6a838fc72f54087 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 244, 249, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7e1349f0048d4856a6a838fc72f54087::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7e1349f0048d4856a6a838fc72f54087:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7e1349f0048d4856a6a838fc72f54087" class="color" data-tooltip="RGBA: 247, 244, 249, 1.0
   HEXA: #f7f4f9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_debcd20153014610ba1f4ac7e1816ac8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 225, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_debcd20153014610ba1f4ac7e1816ac8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_debcd20153014610ba1f4ac7e1816ac8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_debcd20153014610ba1f4ac7e1816ac8" class="color" data-tooltip="RGBA: 231, 225, 239, 1.0
   HEXA: #e7e1efff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_23ab3831b17e45b2a73cdc48af01f8f7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 185, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_23ab3831b17e45b2a73cdc48af01f8f7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_23ab3831b17e45b2a73cdc48af01f8f7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_23ab3831b17e45b2a73cdc48af01f8f7" class="color" data-tooltip="RGBA: 212, 185, 218, 1.0
   HEXA: #d4b9daff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9a2b342372954191823cb8e34aae5541 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(201, 148, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9a2b342372954191823cb8e34aae5541::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9a2b342372954191823cb8e34aae5541:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9a2b342372954191823cb8e34aae5541" class="color" data-tooltip="RGBA: 201, 148, 199, 1.0
   HEXA: #c994c7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a914eac89441464bb4478acb5d5a93ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 101, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a914eac89441464bb4478acb5d5a93ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a914eac89441464bb4478acb5d5a93ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a914eac89441464bb4478acb5d5a93ff" class="color" data-tooltip="RGBA: 223, 101, 176, 1.0
   HEXA: #df65b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d4f92b8fdf034403b759e82ebffbac05 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 41, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d4f92b8fdf034403b759e82ebffbac05::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d4f92b8fdf034403b759e82ebffbac05:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d4f92b8fdf034403b759e82ebffbac05" class="color" data-tooltip="RGBA: 231, 41, 138, 1.0
   HEXA: #e7298aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0f852bd644734af290bc8b893fdffce0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(206, 18, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f852bd644734af290bc8b893fdffce0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f852bd644734af290bc8b893fdffce0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f852bd644734af290bc8b893fdffce0" class="color" data-tooltip="RGBA: 206, 18, 86, 1.0
   HEXA: #ce1256ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4d82ef79cc1c4e2bb1d1a5be15bd714d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 0, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d82ef79cc1c4e2bb1d1a5be15bd714d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d82ef79cc1c4e2bb1d1a5be15bd714d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d82ef79cc1c4e2bb1d1a5be15bd714d" class="color" data-tooltip="RGBA: 152, 0, 67, 1.0
   HEXA: #980043ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_54c8fb06a15a49bbab7735e89a5fc485 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_54c8fb06a15a49bbab7735e89a5fc485::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_54c8fb06a15a49bbab7735e89a5fc485:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_54c8fb06a15a49bbab7735e89a5fc485" class="color" data-tooltip="RGBA: 103, 0, 31, 1.0
   HEXA: #67001fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4a626d6a52304869885bebabcb3881f5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4a626d6a52304869885bebabcb3881f5 div { flex: 1 1 0; }
           #_4a626d6a52304869885bebabcb3881f5 div.color { width: 100%; height: 100%; }
           #_4a626d6a52304869885bebabcb3881f5 div.cmap { width: 100%; height: auto; }
           #_4a626d6a52304869885bebabcb3881f5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>purples</strong>
       
       <div id="_4a626d6a52304869885bebabcb3881f5" class="color-map">
           
                           <div>
                   <style>
       #_5984ebd263b54cfd8e7ab88caf736839 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 251, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5984ebd263b54cfd8e7ab88caf736839::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5984ebd263b54cfd8e7ab88caf736839:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5984ebd263b54cfd8e7ab88caf736839" class="color" data-tooltip="RGBA: 252, 251, 253, 1.0
   HEXA: #fcfbfdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9a883ea67e4443b29d46affff5261dd8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 237, 245, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9a883ea67e4443b29d46affff5261dd8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9a883ea67e4443b29d46affff5261dd8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9a883ea67e4443b29d46affff5261dd8" class="color" data-tooltip="RGBA: 239, 237, 245, 1.0
   HEXA: #efedf5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_31e14d865643406985312473484e4497 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 218, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_31e14d865643406985312473484e4497::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_31e14d865643406985312473484e4497:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_31e14d865643406985312473484e4497" class="color" data-tooltip="RGBA: 218, 218, 235, 1.0
   HEXA: #dadaebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44a746f6853940d09c871dc19e09630f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 189, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44a746f6853940d09c871dc19e09630f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44a746f6853940d09c871dc19e09630f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44a746f6853940d09c871dc19e09630f" class="color" data-tooltip="RGBA: 188, 189, 220, 1.0
   HEXA: #bcbddcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_397fa2b183474004ac850108d85ae3e3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 154, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_397fa2b183474004ac850108d85ae3e3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_397fa2b183474004ac850108d85ae3e3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_397fa2b183474004ac850108d85ae3e3" class="color" data-tooltip="RGBA: 158, 154, 200, 1.0
   HEXA: #9e9ac8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34d02ce3ccdd4a7cb3a4521890483106 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 125, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34d02ce3ccdd4a7cb3a4521890483106::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34d02ce3ccdd4a7cb3a4521890483106:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34d02ce3ccdd4a7cb3a4521890483106" class="color" data-tooltip="RGBA: 128, 125, 186, 1.0
   HEXA: #807dbaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fb3ee6308fb046b598f19743667b3a69 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 81, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fb3ee6308fb046b598f19743667b3a69::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fb3ee6308fb046b598f19743667b3a69:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fb3ee6308fb046b598f19743667b3a69" class="color" data-tooltip="RGBA: 106, 81, 163, 1.0
   HEXA: #6a51a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4d13c601490b4599b692c703aef0674a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 39, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d13c601490b4599b692c703aef0674a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d13c601490b4599b692c703aef0674a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d13c601490b4599b692c703aef0674a" class="color" data-tooltip="RGBA: 84, 39, 143, 1.0
   HEXA: #54278fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6a90e1872a5a47a7895da96b7c564103 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 0, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6a90e1872a5a47a7895da96b7c564103::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6a90e1872a5a47a7895da96b7c564103:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6a90e1872a5a47a7895da96b7c564103" class="color" data-tooltip="RGBA: 63, 0, 125, 1.0
   HEXA: #3f007dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f49bf6b18d1842d2aa5f86ebb85649d9 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f49bf6b18d1842d2aa5f86ebb85649d9 div { flex: 1 1 0; }
           #_f49bf6b18d1842d2aa5f86ebb85649d9 div.color { width: 100%; height: 100%; }
           #_f49bf6b18d1842d2aa5f86ebb85649d9 div.cmap { width: 100%; height: auto; }
           #_f49bf6b18d1842d2aa5f86ebb85649d9 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>rdpu</strong>
       
       <div id="_f49bf6b18d1842d2aa5f86ebb85649d9" class="color-map">
           
                           <div>
                   <style>
       #_60dac76789ff4fc9a20433d10bee81cb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 243, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60dac76789ff4fc9a20433d10bee81cb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60dac76789ff4fc9a20433d10bee81cb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60dac76789ff4fc9a20433d10bee81cb" class="color" data-tooltip="RGBA: 255, 247, 243, 1.0
   HEXA: #fff7f3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_74961e5a0af1486b8fdc7258073e7e10 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 224, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_74961e5a0af1486b8fdc7258073e7e10::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_74961e5a0af1486b8fdc7258073e7e10:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_74961e5a0af1486b8fdc7258073e7e10" class="color" data-tooltip="RGBA: 253, 224, 221, 1.0
   HEXA: #fde0ddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_27fbb05fece3453e9c9833b6b25ec2e6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 197, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_27fbb05fece3453e9c9833b6b25ec2e6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_27fbb05fece3453e9c9833b6b25ec2e6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_27fbb05fece3453e9c9833b6b25ec2e6" class="color" data-tooltip="RGBA: 252, 197, 192, 1.0
   HEXA: #fcc5c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d6bc3b4df3314d288b863710af639119 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 159, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d6bc3b4df3314d288b863710af639119::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d6bc3b4df3314d288b863710af639119:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d6bc3b4df3314d288b863710af639119" class="color" data-tooltip="RGBA: 250, 159, 181, 1.0
   HEXA: #fa9fb5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53daeca99687441d96974f2ba657a679 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 104, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53daeca99687441d96974f2ba657a679::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53daeca99687441d96974f2ba657a679:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53daeca99687441d96974f2ba657a679" class="color" data-tooltip="RGBA: 247, 104, 161, 1.0
   HEXA: #f768a1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b38a430ab93e44d787c194337171f693 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 52, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b38a430ab93e44d787c194337171f693::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b38a430ab93e44d787c194337171f693:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b38a430ab93e44d787c194337171f693" class="color" data-tooltip="RGBA: 221, 52, 151, 1.0
   HEXA: #dd3497ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0aa9d52ec54f40ea96adf3c3161b2b7d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 1, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0aa9d52ec54f40ea96adf3c3161b2b7d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0aa9d52ec54f40ea96adf3c3161b2b7d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0aa9d52ec54f40ea96adf3c3161b2b7d" class="color" data-tooltip="RGBA: 174, 1, 126, 1.0
   HEXA: #ae017eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46ab6973b59a413fb9f122d16b52acc8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(122, 1, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46ab6973b59a413fb9f122d16b52acc8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46ab6973b59a413fb9f122d16b52acc8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46ab6973b59a413fb9f122d16b52acc8" class="color" data-tooltip="RGBA: 122, 1, 119, 1.0
   HEXA: #7a0177ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3765c09569b4461c82324ce468d86cce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(73, 0, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3765c09569b4461c82324ce468d86cce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3765c09569b4461c82324ce468d86cce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3765c09569b4461c82324ce468d86cce" class="color" data-tooltip="RGBA: 73, 0, 106, 1.0
   HEXA: #49006aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8d5a890afe20413a836fb4c2ae6683d2 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8d5a890afe20413a836fb4c2ae6683d2 div { flex: 1 1 0; }
           #_8d5a890afe20413a836fb4c2ae6683d2 div.color { width: 100%; height: 100%; }
           #_8d5a890afe20413a836fb4c2ae6683d2 div.cmap { width: 100%; height: auto; }
           #_8d5a890afe20413a836fb4c2ae6683d2 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>reds</strong>
       
       <div id="_8d5a890afe20413a836fb4c2ae6683d2" class="color-map">
           
                           <div>
                   <style>
       #_8fadb00d2eb34adebfc87d9df7fda201 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 245, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8fadb00d2eb34adebfc87d9df7fda201::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8fadb00d2eb34adebfc87d9df7fda201:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8fadb00d2eb34adebfc87d9df7fda201" class="color" data-tooltip="RGBA: 255, 245, 240, 1.0
   HEXA: #fff5f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0a17d55386fb49868cec4c07daf3c0df { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 224, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0a17d55386fb49868cec4c07daf3c0df::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0a17d55386fb49868cec4c07daf3c0df:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0a17d55386fb49868cec4c07daf3c0df" class="color" data-tooltip="RGBA: 254, 224, 210, 1.0
   HEXA: #fee0d2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2bff7ef58dc94b8489bf146f4c611e30 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 187, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2bff7ef58dc94b8489bf146f4c611e30::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2bff7ef58dc94b8489bf146f4c611e30:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2bff7ef58dc94b8489bf146f4c611e30" class="color" data-tooltip="RGBA: 252, 187, 161, 1.0
   HEXA: #fcbba1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_694da395748a461dbf03a50211004898 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 146, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_694da395748a461dbf03a50211004898::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_694da395748a461dbf03a50211004898:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_694da395748a461dbf03a50211004898" class="color" data-tooltip="RGBA: 252, 146, 114, 1.0
   HEXA: #fc9272ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0b37a885987c4823965e90a1ab0109c3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 106, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0b37a885987c4823965e90a1ab0109c3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0b37a885987c4823965e90a1ab0109c3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0b37a885987c4823965e90a1ab0109c3" class="color" data-tooltip="RGBA: 251, 106, 74, 1.0
   HEXA: #fb6a4aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f2b6d4cef83e41f0a62057a7be9d7575 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 59, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f2b6d4cef83e41f0a62057a7be9d7575::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f2b6d4cef83e41f0a62057a7be9d7575:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f2b6d4cef83e41f0a62057a7be9d7575" class="color" data-tooltip="RGBA: 239, 59, 44, 1.0
   HEXA: #ef3b2cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d56ad9ced9445858d714e00d4ba4baf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 24, 29, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d56ad9ced9445858d714e00d4ba4baf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d56ad9ced9445858d714e00d4ba4baf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d56ad9ced9445858d714e00d4ba4baf" class="color" data-tooltip="RGBA: 203, 24, 29, 1.0
   HEXA: #cb181dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_771a09bca8994811b7d326d3461ffdb5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 15, 21, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_771a09bca8994811b7d326d3461ffdb5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_771a09bca8994811b7d326d3461ffdb5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_771a09bca8994811b7d326d3461ffdb5" class="color" data-tooltip="RGBA: 165, 15, 21, 1.0
   HEXA: #a50f15ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_69892a50649e4d6e861feba30ea9c200 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 0, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_69892a50649e4d6e861feba30ea9c200::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_69892a50649e4d6e861feba30ea9c200:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_69892a50649e4d6e861feba30ea9c200" class="color" data-tooltip="RGBA: 103, 0, 13, 1.0
   HEXA: #67000dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0722cbe06c2b4d70a0789cad5aef353b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0722cbe06c2b4d70a0789cad5aef353b div { flex: 1 1 0; }
           #_0722cbe06c2b4d70a0789cad5aef353b div.color { width: 100%; height: 100%; }
           #_0722cbe06c2b4d70a0789cad5aef353b div.cmap { width: 100%; height: auto; }
           #_0722cbe06c2b4d70a0789cad5aef353b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>ylgn</strong>
       
       <div id="_0722cbe06c2b4d70a0789cad5aef353b" class="color-map">
           
                           <div>
                   <style>
       #_656adc0c4b0e416e84767d3e4f50c920 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_656adc0c4b0e416e84767d3e4f50c920::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_656adc0c4b0e416e84767d3e4f50c920:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_656adc0c4b0e416e84767d3e4f50c920" class="color" data-tooltip="RGBA: 255, 255, 229, 1.0
   HEXA: #ffffe5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f876e0c47f34971bb74c39ee6576333 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 252, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f876e0c47f34971bb74c39ee6576333::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f876e0c47f34971bb74c39ee6576333:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f876e0c47f34971bb74c39ee6576333" class="color" data-tooltip="RGBA: 247, 252, 185, 1.0
   HEXA: #f7fcb9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15125b591a09444d8194f5e9c7b09c20 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 240, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15125b591a09444d8194f5e9c7b09c20::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15125b591a09444d8194f5e9c7b09c20:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15125b591a09444d8194f5e9c7b09c20" class="color" data-tooltip="RGBA: 217, 240, 163, 1.0
   HEXA: #d9f0a3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0360c7bde01f41e6b697390655215034 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 221, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0360c7bde01f41e6b697390655215034::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0360c7bde01f41e6b697390655215034:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0360c7bde01f41e6b697390655215034" class="color" data-tooltip="RGBA: 173, 221, 142, 1.0
   HEXA: #addd8eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c97bd45b5aec4614b653c409d2a530eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 198, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c97bd45b5aec4614b653c409d2a530eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c97bd45b5aec4614b653c409d2a530eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c97bd45b5aec4614b653c409d2a530eb" class="color" data-tooltip="RGBA: 120, 198, 121, 1.0
   HEXA: #78c679ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_81987674f7b34b619f2af2c219da0fc7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 171, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_81987674f7b34b619f2af2c219da0fc7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_81987674f7b34b619f2af2c219da0fc7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_81987674f7b34b619f2af2c219da0fc7" class="color" data-tooltip="RGBA: 65, 171, 93, 1.0
   HEXA: #41ab5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3ac2072ea2a34fa7959b66fe81a2e6da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 132, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3ac2072ea2a34fa7959b66fe81a2e6da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3ac2072ea2a34fa7959b66fe81a2e6da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3ac2072ea2a34fa7959b66fe81a2e6da" class="color" data-tooltip="RGBA: 35, 132, 67, 1.0
   HEXA: #238443ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7da769fb16d744f0872bcffc771d4c17 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 104, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7da769fb16d744f0872bcffc771d4c17::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7da769fb16d744f0872bcffc771d4c17:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7da769fb16d744f0872bcffc771d4c17" class="color" data-tooltip="RGBA: 0, 104, 55, 1.0
   HEXA: #006837ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_248797ab47454bc683c59cfa3cc3fbfd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 69, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_248797ab47454bc683c59cfa3cc3fbfd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_248797ab47454bc683c59cfa3cc3fbfd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_248797ab47454bc683c59cfa3cc3fbfd" class="color" data-tooltip="RGBA: 0, 69, 41, 1.0
   HEXA: #004529ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b1e68925d9cd4aba949264d909b2b22c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b1e68925d9cd4aba949264d909b2b22c div { flex: 1 1 0; }
           #_b1e68925d9cd4aba949264d909b2b22c div.color { width: 100%; height: 100%; }
           #_b1e68925d9cd4aba949264d909b2b22c div.cmap { width: 100%; height: auto; }
           #_b1e68925d9cd4aba949264d909b2b22c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>ylgnbu</strong>
       
       <div id="_b1e68925d9cd4aba949264d909b2b22c" class="color-map">
           
                           <div>
                   <style>
       #_db728550b7a94135aef65dae85d21860 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db728550b7a94135aef65dae85d21860::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db728550b7a94135aef65dae85d21860:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db728550b7a94135aef65dae85d21860" class="color" data-tooltip="RGBA: 255, 255, 217, 1.0
   HEXA: #ffffd9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_de5745f507f4430591ca055ae0104c94 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 248, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_de5745f507f4430591ca055ae0104c94::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_de5745f507f4430591ca055ae0104c94:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_de5745f507f4430591ca055ae0104c94" class="color" data-tooltip="RGBA: 237, 248, 177, 1.0
   HEXA: #edf8b1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_295744e679f5469aa1a448f9fca33738 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 233, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_295744e679f5469aa1a448f9fca33738::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_295744e679f5469aa1a448f9fca33738:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_295744e679f5469aa1a448f9fca33738" class="color" data-tooltip="RGBA: 199, 233, 180, 1.0
   HEXA: #c7e9b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_944de53de20a408da8589f24b41bd5fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 205, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_944de53de20a408da8589f24b41bd5fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_944de53de20a408da8589f24b41bd5fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_944de53de20a408da8589f24b41bd5fe" class="color" data-tooltip="RGBA: 127, 205, 187, 1.0
   HEXA: #7fcdbbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15a32a3f3c8d4079b497f579c487da49 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 182, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15a32a3f3c8d4079b497f579c487da49::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15a32a3f3c8d4079b497f579c487da49:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15a32a3f3c8d4079b497f579c487da49" class="color" data-tooltip="RGBA: 65, 182, 196, 1.0
   HEXA: #41b6c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86083f444cb648dbb34ffe8d308d878c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 145, 192, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86083f444cb648dbb34ffe8d308d878c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86083f444cb648dbb34ffe8d308d878c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86083f444cb648dbb34ffe8d308d878c" class="color" data-tooltip="RGBA: 29, 145, 192, 1.0
   HEXA: #1d91c0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0997d5dc2f5c42a89c61ed7306d43bda { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 94, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0997d5dc2f5c42a89c61ed7306d43bda::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0997d5dc2f5c42a89c61ed7306d43bda:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0997d5dc2f5c42a89c61ed7306d43bda" class="color" data-tooltip="RGBA: 34, 94, 168, 1.0
   HEXA: #225ea8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_974fe278cac34ed59c706dfcfa63eaf5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 52, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_974fe278cac34ed59c706dfcfa63eaf5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_974fe278cac34ed59c706dfcfa63eaf5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_974fe278cac34ed59c706dfcfa63eaf5" class="color" data-tooltip="RGBA: 37, 52, 148, 1.0
   HEXA: #253494ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b7ed777351c14e47b332127d85d76b1f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 29, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b7ed777351c14e47b332127d85d76b1f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b7ed777351c14e47b332127d85d76b1f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b7ed777351c14e47b332127d85d76b1f" class="color" data-tooltip="RGBA: 8, 29, 88, 1.0
   HEXA: #081d58ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_d3ee60ecbb2946f481ba4f7dccbac1e0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_d3ee60ecbb2946f481ba4f7dccbac1e0 div { flex: 1 1 0; }
           #_d3ee60ecbb2946f481ba4f7dccbac1e0 div.color { width: 100%; height: 100%; }
           #_d3ee60ecbb2946f481ba4f7dccbac1e0 div.cmap { width: 100%; height: auto; }
           #_d3ee60ecbb2946f481ba4f7dccbac1e0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>ylorbr</strong>
       
       <div id="_d3ee60ecbb2946f481ba4f7dccbac1e0" class="color-map">
           
                           <div>
                   <style>
       #_65e177d8cf354ca4bb6ea8b9bf252bed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_65e177d8cf354ca4bb6ea8b9bf252bed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_65e177d8cf354ca4bb6ea8b9bf252bed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_65e177d8cf354ca4bb6ea8b9bf252bed" class="color" data-tooltip="RGBA: 255, 255, 229, 1.0
   HEXA: #ffffe5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6542cea984874a52a6d361f645f49ed2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 247, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6542cea984874a52a6d361f645f49ed2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6542cea984874a52a6d361f645f49ed2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6542cea984874a52a6d361f645f49ed2" class="color" data-tooltip="RGBA: 255, 247, 188, 1.0
   HEXA: #fff7bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_749d7a8b5ee242e285803293d9665588 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 227, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_749d7a8b5ee242e285803293d9665588::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_749d7a8b5ee242e285803293d9665588:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_749d7a8b5ee242e285803293d9665588" class="color" data-tooltip="RGBA: 254, 227, 145, 1.0
   HEXA: #fee391ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_602e2079296d44b19d112435cfae8ebc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 196, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_602e2079296d44b19d112435cfae8ebc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_602e2079296d44b19d112435cfae8ebc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_602e2079296d44b19d112435cfae8ebc" class="color" data-tooltip="RGBA: 254, 196, 79, 1.0
   HEXA: #fec44fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_baa761edc3a642e3b4b0911277424b71 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 153, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_baa761edc3a642e3b4b0911277424b71::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_baa761edc3a642e3b4b0911277424b71:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_baa761edc3a642e3b4b0911277424b71" class="color" data-tooltip="RGBA: 254, 153, 41, 1.0
   HEXA: #fe9929ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b7ecd8436de846279a00978b8b765e85 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 112, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b7ecd8436de846279a00978b8b765e85::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b7ecd8436de846279a00978b8b765e85:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b7ecd8436de846279a00978b8b765e85" class="color" data-tooltip="RGBA: 236, 112, 20, 1.0
   HEXA: #ec7014ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c240aef371e4de79c94e71c994384b0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 76, 2, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c240aef371e4de79c94e71c994384b0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c240aef371e4de79c94e71c994384b0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c240aef371e4de79c94e71c994384b0" class="color" data-tooltip="RGBA: 204, 76, 2, 1.0
   HEXA: #cc4c02ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_69b2278bd871492bb229fc57ae7e6617 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 52, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_69b2278bd871492bb229fc57ae7e6617::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_69b2278bd871492bb229fc57ae7e6617:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_69b2278bd871492bb229fc57ae7e6617" class="color" data-tooltip="RGBA: 153, 52, 4, 1.0
   HEXA: #993404ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c6ad878950b04fcf98d6120a5e35ef5b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 37, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c6ad878950b04fcf98d6120a5e35ef5b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c6ad878950b04fcf98d6120a5e35ef5b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c6ad878950b04fcf98d6120a5e35ef5b" class="color" data-tooltip="RGBA: 102, 37, 6, 1.0
   HEXA: #662506ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_bc1f4af36eea4d5896108c4032d78695 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_bc1f4af36eea4d5896108c4032d78695 div { flex: 1 1 0; }
           #_bc1f4af36eea4d5896108c4032d78695 div.color { width: 100%; height: 100%; }
           #_bc1f4af36eea4d5896108c4032d78695 div.cmap { width: 100%; height: auto; }
           #_bc1f4af36eea4d5896108c4032d78695 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>ylorrd</strong>
       
       <div id="_bc1f4af36eea4d5896108c4032d78695" class="color-map">
           
                           <div>
                   <style>
       #_c7f0c16e07814beca2ac8c2e7c9da3ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c7f0c16e07814beca2ac8c2e7c9da3ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c7f0c16e07814beca2ac8c2e7c9da3ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c7f0c16e07814beca2ac8c2e7c9da3ac" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e59339b564814e86a34c925ca754f096 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 237, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e59339b564814e86a34c925ca754f096::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e59339b564814e86a34c925ca754f096:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e59339b564814e86a34c925ca754f096" class="color" data-tooltip="RGBA: 255, 237, 160, 1.0
   HEXA: #ffeda0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_782d3571a156405085e3ef5c7a56ea16 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 217, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_782d3571a156405085e3ef5c7a56ea16::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_782d3571a156405085e3ef5c7a56ea16:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_782d3571a156405085e3ef5c7a56ea16" class="color" data-tooltip="RGBA: 254, 217, 118, 1.0
   HEXA: #fed976ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_23de73fc5d5b4b67b3a21a2469806e57 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 178, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_23de73fc5d5b4b67b3a21a2469806e57::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_23de73fc5d5b4b67b3a21a2469806e57:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_23de73fc5d5b4b67b3a21a2469806e57" class="color" data-tooltip="RGBA: 254, 178, 76, 1.0
   HEXA: #feb24cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_200f4450b76e4206b101832612349d58 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 141, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_200f4450b76e4206b101832612349d58::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_200f4450b76e4206b101832612349d58:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_200f4450b76e4206b101832612349d58" class="color" data-tooltip="RGBA: 253, 141, 60, 1.0
   HEXA: #fd8d3cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_48b6dd1fac8b4d11ac28f7be28c49952 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 78, 42, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_48b6dd1fac8b4d11ac28f7be28c49952::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_48b6dd1fac8b4d11ac28f7be28c49952:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_48b6dd1fac8b4d11ac28f7be28c49952" class="color" data-tooltip="RGBA: 252, 78, 42, 1.0
   HEXA: #fc4e2aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_76c00b03d3214f948ef7a0f94e398493 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 26, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_76c00b03d3214f948ef7a0f94e398493::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_76c00b03d3214f948ef7a0f94e398493:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_76c00b03d3214f948ef7a0f94e398493" class="color" data-tooltip="RGBA: 227, 26, 28, 1.0
   HEXA: #e31a1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ecf67bd5189f45799b28b677a9e5eafb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ecf67bd5189f45799b28b677a9e5eafb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ecf67bd5189f45799b28b677a9e5eafb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ecf67bd5189f45799b28b677a9e5eafb" class="color" data-tooltip="RGBA: 189, 0, 38, 1.0
   HEXA: #bd0026ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_79407c2585f74abf91e23bfe1c21a893 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 0, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_79407c2585f74abf91e23bfe1c21a893::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_79407c2585f74abf91e23bfe1c21a893:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_79407c2585f74abf91e23bfe1c21a893" class="color" data-tooltip="RGBA: 128, 0, 38, 1.0
   HEXA: #800026ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0af74b571d854124a5a4586004ae4534 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0af74b571d854124a5a4586004ae4534 div { flex: 1 1 0; }
           #_0af74b571d854124a5a4586004ae4534 div.color { width: 100%; height: 100%; }
           #_0af74b571d854124a5a4586004ae4534 div.cmap { width: 100%; height: auto; }
           #_0af74b571d854124a5a4586004ae4534 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>blues10</strong>
       
       <div id="_0af74b571d854124a5a4586004ae4534" class="color-map">
           
                           <div>
                   <style>
       #_2e0b6f21a2f0475a820102b2c724ebc1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2e0b6f21a2f0475a820102b2c724ebc1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2e0b6f21a2f0475a820102b2c724ebc1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2e0b6f21a2f0475a820102b2c724ebc1" class="color" data-tooltip="RGBA: 229, 255, 255, 1.0
   HEXA: #e5ffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_911958ea37b1461f8ba34017f6187233 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 250, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_911958ea37b1461f8ba34017f6187233::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_911958ea37b1461f8ba34017f6187233:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_911958ea37b1461f8ba34017f6187233" class="color" data-tooltip="RGBA: 204, 250, 255, 1.0
   HEXA: #ccfaffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1595cc7eddb749dbb6915af021f64fa2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 242, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1595cc7eddb749dbb6915af021f64fa2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1595cc7eddb749dbb6915af021f64fa2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1595cc7eddb749dbb6915af021f64fa2" class="color" data-tooltip="RGBA: 178, 242, 255, 1.0
   HEXA: #b2f2ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5747c53c2b244b01acf6f8f8b444e75b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 229, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5747c53c2b244b01acf6f8f8b444e75b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5747c53c2b244b01acf6f8f8b444e75b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5747c53c2b244b01acf6f8f8b444e75b" class="color" data-tooltip="RGBA: 153, 229, 255, 1.0
   HEXA: #99e5ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_455a1f8e993b4602b152744bb5f39874 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 212, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_455a1f8e993b4602b152744bb5f39874::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_455a1f8e993b4602b152744bb5f39874:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_455a1f8e993b4602b152744bb5f39874" class="color" data-tooltip="RGBA: 127, 212, 255, 1.0
   HEXA: #7fd4ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d9cdad008954b789bcc370d9ca833ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 191, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d9cdad008954b789bcc370d9ca833ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d9cdad008954b789bcc370d9ca833ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d9cdad008954b789bcc370d9ca833ac" class="color" data-tooltip="RGBA: 101, 191, 255, 1.0
   HEXA: #65bfffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b612219dbfb14630a36c2a347e71cfd8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 165, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b612219dbfb14630a36c2a347e71cfd8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b612219dbfb14630a36c2a347e71cfd8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b612219dbfb14630a36c2a347e71cfd8" class="color" data-tooltip="RGBA: 76, 165, 255, 1.0
   HEXA: #4ca5ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0935b1a582df4dd39906606c0108c60e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 136, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0935b1a582df4dd39906606c0108c60e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0935b1a582df4dd39906606c0108c60e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0935b1a582df4dd39906606c0108c60e" class="color" data-tooltip="RGBA: 50, 136, 255, 1.0
   HEXA: #3288ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9ba104146ca4b75a2f769dadc8165fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 101, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9ba104146ca4b75a2f769dadc8165fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9ba104146ca4b75a2f769dadc8165fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9ba104146ca4b75a2f769dadc8165fe" class="color" data-tooltip="RGBA: 25, 101, 255, 1.0
   HEXA: #1965ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_364fbebca2a34b2aaf77d57c250147cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 63, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_364fbebca2a34b2aaf77d57c250147cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_364fbebca2a34b2aaf77d57c250147cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_364fbebca2a34b2aaf77d57c250147cc" class="color" data-tooltip="RGBA: 0, 63, 255, 1.0
   HEXA: #003fffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5d0a76be970e41228b9347d23201f868 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5d0a76be970e41228b9347d23201f868 div { flex: 1 1 0; }
           #_5d0a76be970e41228b9347d23201f868 div.color { width: 100%; height: 100%; }
           #_5d0a76be970e41228b9347d23201f868 div.cmap { width: 100%; height: auto; }
           #_5d0a76be970e41228b9347d23201f868 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>blues7</strong>
       
       <div id="_5d0a76be970e41228b9347d23201f868" class="color-map">
           
                           <div>
                   <style>
       #_66a6bb878a4145ea9d56aa2312189f46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66a6bb878a4145ea9d56aa2312189f46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66a6bb878a4145ea9d56aa2312189f46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66a6bb878a4145ea9d56aa2312189f46" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8d2e0036966f4947ac5ca976c3718e36 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 253, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8d2e0036966f4947ac5ca976c3718e36::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8d2e0036966f4947ac5ca976c3718e36:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8d2e0036966f4947ac5ca976c3718e36" class="color" data-tooltip="RGBA: 204, 253, 255, 1.0
   HEXA: #ccfdffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86cd9fb8075d4565818a864dfb611cf3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 248, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86cd9fb8075d4565818a864dfb611cf3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86cd9fb8075d4565818a864dfb611cf3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86cd9fb8075d4565818a864dfb611cf3" class="color" data-tooltip="RGBA: 153, 248, 255, 1.0
   HEXA: #99f8ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3003d143e10f4021afbc66fb16622623 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 239, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3003d143e10f4021afbc66fb16622623::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3003d143e10f4021afbc66fb16622623:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3003d143e10f4021afbc66fb16622623" class="color" data-tooltip="RGBA: 102, 239, 255, 1.0
   HEXA: #66efffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4cbdb79397624e189a2535d4a261cec4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 227, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4cbdb79397624e189a2535d4a261cec4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4cbdb79397624e189a2535d4a261cec4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4cbdb79397624e189a2535d4a261cec4" class="color" data-tooltip="RGBA: 51, 227, 255, 1.0
   HEXA: #33e3ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5a31ae04525f406a92404b9aa16f293d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 170, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5a31ae04525f406a92404b9aa16f293d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5a31ae04525f406a92404b9aa16f293d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5a31ae04525f406a92404b9aa16f293d" class="color" data-tooltip="RGBA: 0, 170, 204, 1.0
   HEXA: #00aaccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_acfab5ce488c4d4fb6daf4ca8914cee8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 122, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_acfab5ce488c4d4fb6daf4ca8914cee8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_acfab5ce488c4d4fb6daf4ca8914cee8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_acfab5ce488c4d4fb6daf4ca8914cee8" class="color" data-tooltip="RGBA: 0, 122, 153, 1.0
   HEXA: #007a99ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8f553d2a062046648b5221c80fc353dd {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8f553d2a062046648b5221c80fc353dd div { flex: 1 1 0; }
           #_8f553d2a062046648b5221c80fc353dd div.color { width: 100%; height: 100%; }
           #_8f553d2a062046648b5221c80fc353dd div.cmap { width: 100%; height: auto; }
           #_8f553d2a062046648b5221c80fc353dd div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>devon</strong>
       
       <div id="_8f553d2a062046648b5221c80fc353dd" class="color-map">
           
                           <div>
                   <style>
       #_85cd891b513648c6859c4a08fa19932a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 26, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_85cd891b513648c6859c4a08fa19932a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_85cd891b513648c6859c4a08fa19932a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_85cd891b513648c6859c4a08fa19932a" class="color" data-tooltip="RGBA: 44, 26, 76, 1.0
   HEXA: #2c1a4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8367bbdd852947cca31fe9443ac082ae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(43, 38, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8367bbdd852947cca31fe9443ac082ae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8367bbdd852947cca31fe9443ac082ae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8367bbdd852947cca31fe9443ac082ae" class="color" data-tooltip="RGBA: 43, 38, 88, 1.0
   HEXA: #2b2658ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1203e3a3f97d4e36a03772db7800aa26 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 51, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1203e3a3f97d4e36a03772db7800aa26::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1203e3a3f97d4e36a03772db7800aa26:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1203e3a3f97d4e36a03772db7800aa26" class="color" data-tooltip="RGBA: 41, 51, 102, 1.0
   HEXA: #293366ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8a797b54f9d5415d91c29a51cf622e45 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 63, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8a797b54f9d5415d91c29a51cf622e45::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8a797b54f9d5415d91c29a51cf622e45:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8a797b54f9d5415d91c29a51cf622e45" class="color" data-tooltip="RGBA: 40, 63, 114, 1.0
   HEXA: #283f72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb411482659242bfa3c3a575e515553b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 78, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb411482659242bfa3c3a575e515553b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb411482659242bfa3c3a575e515553b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb411482659242bfa3c3a575e515553b" class="color" data-tooltip="RGBA: 39, 78, 130, 1.0
   HEXA: #274e82ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7f6471aa62d8485db1fab2e3ef84954a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 91, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7f6471aa62d8485db1fab2e3ef84954a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7f6471aa62d8485db1fab2e3ef84954a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7f6471aa62d8485db1fab2e3ef84954a" class="color" data-tooltip="RGBA: 42, 91, 147, 1.0
   HEXA: #2a5b93ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f02b9987b82345738d425ca2f10dd4e4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 102, 167, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f02b9987b82345738d425ca2f10dd4e4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f02b9987b82345738d425ca2f10dd4e4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f02b9987b82345738d425ca2f10dd4e4" class="color" data-tooltip="RGBA: 50, 102, 167, 1.0
   HEXA: #3266a7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c8645afabdae4c369bceffa525576e62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 112, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c8645afabdae4c369bceffa525576e62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c8645afabdae4c369bceffa525576e62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c8645afabdae4c369bceffa525576e62" class="color" data-tooltip="RGBA: 63, 112, 185, 1.0
   HEXA: #3f70b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b6dd5ab8ff8c461299d58a29f5f472f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(85, 124, 202, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b6dd5ab8ff8c461299d58a29f5f472f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b6dd5ab8ff8c461299d58a29f5f472f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b6dd5ab8ff8c461299d58a29f5f472f8" class="color" data-tooltip="RGBA: 85, 124, 202, 1.0
   HEXA: #557ccaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_48e615d2a4f1451585d4144254f4ce21 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(113, 136, 216, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_48e615d2a4f1451585d4144254f4ce21::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_48e615d2a4f1451585d4144254f4ce21:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_48e615d2a4f1451585d4144254f4ce21" class="color" data-tooltip="RGBA: 113, 136, 216, 1.0
   HEXA: #7188d8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d32192ff61c417db1d3c10c785134e9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(138, 148, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d32192ff61c417db1d3c10c785134e9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d32192ff61c417db1d3c10c785134e9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d32192ff61c417db1d3c10c785134e9" class="color" data-tooltip="RGBA: 138, 148, 225, 1.0
   HEXA: #8a94e1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c55e3357bd44e59a2d1e2b7541fea82 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(162, 160, 234, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c55e3357bd44e59a2d1e2b7541fea82::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c55e3357bd44e59a2d1e2b7541fea82:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c55e3357bd44e59a2d1e2b7541fea82" class="color" data-tooltip="RGBA: 162, 160, 234, 1.0
   HEXA: #a2a0eaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c7f29c8cd3a4c5fa0f16d49bb42e68c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 172, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c7f29c8cd3a4c5fa0f16d49bb42e68c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c7f29c8cd3a4c5fa0f16d49bb42e68c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c7f29c8cd3a4c5fa0f16d49bb42e68c" class="color" data-tooltip="RGBA: 177, 172, 239, 1.0
   HEXA: #b1acefff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_355803ba076e4cb1b5e2b13bc1352fb4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 183, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_355803ba076e4cb1b5e2b13bc1352fb4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_355803ba076e4cb1b5e2b13bc1352fb4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_355803ba076e4cb1b5e2b13bc1352fb4" class="color" data-tooltip="RGBA: 189, 183, 241, 1.0
   HEXA: #bdb7f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_777cd28d68f14423858d64702bb525d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 195, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_777cd28d68f14423858d64702bb525d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_777cd28d68f14423858d64702bb525d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_777cd28d68f14423858d64702bb525d9" class="color" data-tooltip="RGBA: 200, 195, 244, 1.0
   HEXA: #c8c3f4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_84e6c0028d2548929b4af159f48eb2a6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(210, 206, 246, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_84e6c0028d2548929b4af159f48eb2a6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_84e6c0028d2548929b4af159f48eb2a6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_84e6c0028d2548929b4af159f48eb2a6" class="color" data-tooltip="RGBA: 210, 206, 246, 1.0
   HEXA: #d2cef6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4f2bf01a6ecd45b9a71453d75d2cba40 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 219, 248, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4f2bf01a6ecd45b9a71453d75d2cba40::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4f2bf01a6ecd45b9a71453d75d2cba40:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4f2bf01a6ecd45b9a71453d75d2cba40" class="color" data-tooltip="RGBA: 222, 219, 248, 1.0
   HEXA: #dedbf8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f5dd0bd0431f439d8b0c326d60d60114 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(232, 230, 250, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f5dd0bd0431f439d8b0c326d60d60114::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f5dd0bd0431f439d8b0c326d60d60114:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f5dd0bd0431f439d8b0c326d60d60114" class="color" data-tooltip="RGBA: 232, 230, 250, 1.0
   HEXA: #e8e6faff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_73dfa7eadfd4434abf9c1732b1497e32 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 243, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_73dfa7eadfd4434abf9c1732b1497e32::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_73dfa7eadfd4434abf9c1732b1497e32:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_73dfa7eadfd4434abf9c1732b1497e32" class="color" data-tooltip="RGBA: 244, 243, 253, 1.0
   HEXA: #f4f3fdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_db70b9f2f296468f92a6219aa4d37a35 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db70b9f2f296468f92a6219aa4d37a35::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db70b9f2f296468f92a6219aa4d37a35:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db70b9f2f296468f92a6219aa4d37a35" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_1d2b6f4a6e0b436282b1a45c069b7b60 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_1d2b6f4a6e0b436282b1a45c069b7b60 div { flex: 1 1 0; }
           #_1d2b6f4a6e0b436282b1a45c069b7b60 div.color { width: 100%; height: 100%; }
           #_1d2b6f4a6e0b436282b1a45c069b7b60 div.cmap { width: 100%; height: auto; }
           #_1d2b6f4a6e0b436282b1a45c069b7b60 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>lajolla</strong>
       
       <div id="_1d2b6f4a6e0b436282b1a45c069b7b60" class="color-map">
           
                           <div>
                   <style>
       #_713c8903ac164b66865c85dbdeccef97 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_713c8903ac164b66865c85dbdeccef97::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_713c8903ac164b66865c85dbdeccef97:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_713c8903ac164b66865c85dbdeccef97" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8cb6206350a94c5a9b69a3286b2a07df { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 247, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8cb6206350a94c5a9b69a3286b2a07df::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8cb6206350a94c5a9b69a3286b2a07df:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8cb6206350a94c5a9b69a3286b2a07df" class="color" data-tooltip="RGBA: 254, 247, 181, 1.0
   HEXA: #fef7b5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8463458544aa4fcd96993f8ce2335dfc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 237, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8463458544aa4fcd96993f8ce2335dfc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8463458544aa4fcd96993f8ce2335dfc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8463458544aa4fcd96993f8ce2335dfc" class="color" data-tooltip="RGBA: 252, 237, 156, 1.0
   HEXA: #fced9cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ff97b1e2da294bae9c58594442f6b6e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 225, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ff97b1e2da294bae9c58594442f6b6e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ff97b1e2da294bae9c58594442f6b6e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ff97b1e2da294bae9c58594442f6b6e8" class="color" data-tooltip="RGBA: 249, 225, 132, 1.0
   HEXA: #f9e184ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_734f797ad80449eaa399de33cef6f26e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 208, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_734f797ad80449eaa399de33cef6f26e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_734f797ad80449eaa399de33cef6f26e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_734f797ad80449eaa399de33cef6f26e" class="color" data-tooltip="RGBA: 245, 208, 108, 1.0
   HEXA: #f5d06cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_92034aec962144a5aa127ce8d80ac87b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 191, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_92034aec962144a5aa127ce8d80ac87b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_92034aec962144a5aa127ce8d80ac87b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_92034aec962144a5aa127ce8d80ac87b" class="color" data-tooltip="RGBA: 241, 191, 93, 1.0
   HEXA: #f1bf5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_11a84a3b7d584941ad09056cb0f88803 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 173, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_11a84a3b7d584941ad09056cb0f88803::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_11a84a3b7d584941ad09056cb0f88803:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_11a84a3b7d584941ad09056cb0f88803" class="color" data-tooltip="RGBA: 237, 173, 86, 1.0
   HEXA: #edad56ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d3ce5a50a8c74502a20434ce8eb9f660 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(234, 157, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d3ce5a50a8c74502a20434ce8eb9f660::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d3ce5a50a8c74502a20434ce8eb9f660:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d3ce5a50a8c74502a20434ce8eb9f660" class="color" data-tooltip="RGBA: 234, 157, 83, 1.0
   HEXA: #ea9d53ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2127197c43de46c9980dca64846a0b79 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 142, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2127197c43de46c9980dca64846a0b79::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2127197c43de46c9980dca64846a0b79:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2127197c43de46c9980dca64846a0b79" class="color" data-tooltip="RGBA: 230, 142, 82, 1.0
   HEXA: #e68e52ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e5f83e969c354a2baccc7ce470f14f20 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 125, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e5f83e969c354a2baccc7ce470f14f20::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e5f83e969c354a2baccc7ce470f14f20:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e5f83e969c354a2baccc7ce470f14f20" class="color" data-tooltip="RGBA: 225, 125, 80, 1.0
   HEXA: #e17d50ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_452d75151c374163932478742d3a54cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 108, 78, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_452d75151c374163932478742d3a54cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_452d75151c374163932478742d3a54cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_452d75151c374163932478742d3a54cf" class="color" data-tooltip="RGBA: 218, 108, 78, 1.0
   HEXA: #da6c4eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a54438e88b5b4b499f3fe6eaeb97d4f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 91, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a54438e88b5b4b499f3fe6eaeb97d4f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a54438e88b5b4b499f3fe6eaeb97d4f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a54438e88b5b4b499f3fe6eaeb97d4f1" class="color" data-tooltip="RGBA: 202, 91, 75, 1.0
   HEXA: #ca5b4bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c771786bd32428485d5bd8e4dcb94c0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 77, 70, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c771786bd32428485d5bd8e4dcb94c0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c771786bd32428485d5bd8e4dcb94c0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c771786bd32428485d5bd8e4dcb94c0" class="color" data-tooltip="RGBA: 181, 77, 70, 1.0
   HEXA: #b54d46ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7a803f69ea9c491fbea6bafd2fd6b732 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(157, 68, 64, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7a803f69ea9c491fbea6bafd2fd6b732::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7a803f69ea9c491fbea6bafd2fd6b732:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7a803f69ea9c491fbea6bafd2fd6b732" class="color" data-tooltip="RGBA: 157, 68, 64, 1.0
   HEXA: #9d4440ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_11568f7d351444a39f996ad7df90a497 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(132, 61, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_11568f7d351444a39f996ad7df90a497::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_11568f7d351444a39f996ad7df90a497:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_11568f7d351444a39f996ad7df90a497" class="color" data-tooltip="RGBA: 132, 61, 55, 1.0
   HEXA: #843d37ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bdc1c3a8f7e34ad7ba3c1c2d2f02d6e7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 54, 45, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bdc1c3a8f7e34ad7ba3c1c2d2f02d6e7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bdc1c3a8f7e34ad7ba3c1c2d2f02d6e7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bdc1c3a8f7e34ad7ba3c1c2d2f02d6e7" class="color" data-tooltip="RGBA: 110, 54, 45, 1.0
   HEXA: #6e362dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_342c95c30c194161aa948698c92b98ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(86, 47, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_342c95c30c194161aa948698c92b98ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_342c95c30c194161aa948698c92b98ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_342c95c30c194161aa948698c92b98ba" class="color" data-tooltip="RGBA: 86, 47, 33, 1.0
   HEXA: #562f21ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aeea29376de8445a94b78770b5be3e4e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 40, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aeea29376de8445a94b78770b5be3e4e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aeea29376de8445a94b78770b5be3e4e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aeea29376de8445a94b78770b5be3e4e" class="color" data-tooltip="RGBA: 65, 40, 23, 1.0
   HEXA: #412817ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b626b64fb8084f908203bc32cfb7f20b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(43, 33, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b626b64fb8084f908203bc32cfb7f20b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b626b64fb8084f908203bc32cfb7f20b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b626b64fb8084f908203bc32cfb7f20b" class="color" data-tooltip="RGBA: 43, 33, 13, 1.0
   HEXA: #2b210dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_558f894908e14abcad040cec6575a272 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 26, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_558f894908e14abcad040cec6575a272::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_558f894908e14abcad040cec6575a272:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_558f894908e14abcad040cec6575a272" class="color" data-tooltip="RGBA: 26, 26, 1, 1.0
   HEXA: #1a1a01ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a928ebdb3d364bfd820e8a651255ac61 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a928ebdb3d364bfd820e8a651255ac61 div { flex: 1 1 0; }
           #_a928ebdb3d364bfd820e8a651255ac61 div.color { width: 100%; height: 100%; }
           #_a928ebdb3d364bfd820e8a651255ac61 div.cmap { width: 100%; height: auto; }
           #_a928ebdb3d364bfd820e8a651255ac61 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bamako</strong>
       
       <div id="_a928ebdb3d364bfd820e8a651255ac61" class="color-map">
           
                           <div>
                   <style>
       #_a47a0b755bad4b94a0dfd0a8036c6bcc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 64, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a47a0b755bad4b94a0dfd0a8036c6bcc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a47a0b755bad4b94a0dfd0a8036c6bcc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a47a0b755bad4b94a0dfd0a8036c6bcc" class="color" data-tooltip="RGBA: 0, 64, 76, 1.0
   HEXA: #00404cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5d83ba6167ff4d33ab8eb4d660ae2ffa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(9, 69, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5d83ba6167ff4d33ab8eb4d660ae2ffa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5d83ba6167ff4d33ab8eb4d660ae2ffa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5d83ba6167ff4d33ab8eb4d660ae2ffa" class="color" data-tooltip="RGBA: 9, 69, 72, 1.0
   HEXA: #094548ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f129899e003b486786fecfea9e857051 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 74, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f129899e003b486786fecfea9e857051::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f129899e003b486786fecfea9e857051:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f129899e003b486786fecfea9e857051" class="color" data-tooltip="RGBA: 18, 74, 67, 1.0
   HEXA: #124a43ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68557d1f20ec4330b5374efbd281bc03 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 80, 62, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68557d1f20ec4330b5374efbd281bc03::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68557d1f20ec4330b5374efbd281bc03:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68557d1f20ec4330b5374efbd281bc03" class="color" data-tooltip="RGBA: 26, 80, 62, 1.0
   HEXA: #1a503eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_01078aad9f3c4ab99325eced0a834532 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 86, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_01078aad9f3c4ab99325eced0a834532::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_01078aad9f3c4ab99325eced0a834532:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_01078aad9f3c4ab99325eced0a834532" class="color" data-tooltip="RGBA: 36, 86, 56, 1.0
   HEXA: #245638ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_04aca8fac3cb4f2da25dde07de61eb99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(45, 92, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_04aca8fac3cb4f2da25dde07de61eb99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_04aca8fac3cb4f2da25dde07de61eb99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_04aca8fac3cb4f2da25dde07de61eb99" class="color" data-tooltip="RGBA: 45, 92, 50, 1.0
   HEXA: #2d5c32ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_573aae08d32e4807b60dad93956458e3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(55, 99, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_573aae08d32e4807b60dad93956458e3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_573aae08d32e4807b60dad93956458e3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_573aae08d32e4807b60dad93956458e3" class="color" data-tooltip="RGBA: 55, 99, 44, 1.0
   HEXA: #37632cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9390325cf2b542a5a87af825b76639f5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 105, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9390325cf2b542a5a87af825b76639f5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9390325cf2b542a5a87af825b76639f5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9390325cf2b542a5a87af825b76639f5" class="color" data-tooltip="RGBA: 65, 105, 38, 1.0
   HEXA: #416926ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_805c108d0ba648c481fac4dc695c1c4d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 113, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_805c108d0ba648c481fac4dc695c1c4d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_805c108d0ba648c481fac4dc695c1c4d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_805c108d0ba648c481fac4dc695c1c4d" class="color" data-tooltip="RGBA: 76, 113, 32, 1.0
   HEXA: #4c7120ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d54911e8a35a40eb8cb5b910bd1e8e64 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(90, 121, 24, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d54911e8a35a40eb8cb5b910bd1e8e64::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d54911e8a35a40eb8cb5b910bd1e8e64:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d54911e8a35a40eb8cb5b910bd1e8e64" class="color" data-tooltip="RGBA: 90, 121, 24, 1.0
   HEXA: #5a7918ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_05057b10fb8c408abe20ccca3b0ec423 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 130, 16, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_05057b10fb8c408abe20ccca3b0ec423::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_05057b10fb8c408abe20ccca3b0ec423:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_05057b10fb8c408abe20ccca3b0ec423" class="color" data-tooltip="RGBA: 104, 130, 16, 1.0
   HEXA: #688210ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2f6f7de68cb443b0861dad9141f27dbc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 138, 7, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2f6f7de68cb443b0861dad9141f27dbc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2f6f7de68cb443b0861dad9141f27dbc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2f6f7de68cb443b0861dad9141f27dbc" class="color" data-tooltip="RGBA: 121, 138, 7, 1.0
   HEXA: #798a07ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dc8ada5572f1400e9394fe1d47b11049 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(138, 143, 3, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dc8ada5572f1400e9394fe1d47b11049::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dc8ada5572f1400e9394fe1d47b11049:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dc8ada5572f1400e9394fe1d47b11049" class="color" data-tooltip="RGBA: 138, 143, 3, 1.0
   HEXA: #8a8f03ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4dbe8436e18a4cf7b815511f41933060 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 148, 11, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4dbe8436e18a4cf7b815511f41933060::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4dbe8436e18a4cf7b815511f41933060:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4dbe8436e18a4cf7b815511f41933060" class="color" data-tooltip="RGBA: 156, 148, 11, 1.0
   HEXA: #9c940bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7d422360d2864ad3b7571be320172242 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 161, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d422360d2864ad3b7571be320172242::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d422360d2864ad3b7571be320172242:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d422360d2864ad3b7571be320172242" class="color" data-tooltip="RGBA: 180, 161, 32, 1.0
   HEXA: #b4a120ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_26f86cfe13e44f9aa672a72afa2c12cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(201, 178, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26f86cfe13e44f9aa672a72afa2c12cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26f86cfe13e44f9aa672a72afa2c12cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26f86cfe13e44f9aa672a72afa2c12cd" class="color" data-tooltip="RGBA: 201, 178, 56, 1.0
   HEXA: #c9b238ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d453177397ac41c4be9733169cbf8f83 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 193, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d453177397ac41c4be9733169cbf8f83::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d453177397ac41c4be9733169cbf8f83:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d453177397ac41c4be9733169cbf8f83" class="color" data-tooltip="RGBA: 219, 193, 82, 1.0
   HEXA: #dbc152ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d1a983006fca462eab218e48d41721b4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 206, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d1a983006fca462eab218e48d41721b4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d1a983006fca462eab218e48d41721b4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d1a983006fca462eab218e48d41721b4" class="color" data-tooltip="RGBA: 231, 206, 106, 1.0
   HEXA: #e7ce6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1a512710f31f4c338eeb489dd88c7e4a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 218, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1a512710f31f4c338eeb489dd88c7e4a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1a512710f31f4c338eeb489dd88c7e4a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1a512710f31f4c338eeb489dd88c7e4a" class="color" data-tooltip="RGBA: 244, 218, 131, 1.0
   HEXA: #f4da83ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bf09278f2dfa4edf92cc6824bb1af8e7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 229, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf09278f2dfa4edf92cc6824bb1af8e7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf09278f2dfa4edf92cc6824bb1af8e7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf09278f2dfa4edf92cc6824bb1af8e7" class="color" data-tooltip="RGBA: 255, 229, 153, 1.0
   HEXA: #ffe599ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c2fc38d6555d4562af75c1c431f54d14 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c2fc38d6555d4562af75c1c431f54d14 div { flex: 1 1 0; }
           #_c2fc38d6555d4562af75c1c431f54d14 div.color { width: 100%; height: 100%; }
           #_c2fc38d6555d4562af75c1c431f54d14 div.cmap { width: 100%; height: auto; }
           #_c2fc38d6555d4562af75c1c431f54d14 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>davos</strong>
       
       <div id="_c2fc38d6555d4562af75c1c431f54d14" class="color-map">
           
                           <div>
                   <style>
       #_d201ec8b3e384699aa5f1a9d9b9f5d79 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 5, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d201ec8b3e384699aa5f1a9d9b9f5d79::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d201ec8b3e384699aa5f1a9d9b9f5d79:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d201ec8b3e384699aa5f1a9d9b9f5d79" class="color" data-tooltip="RGBA: 0, 5, 74, 1.0
   HEXA: #00054aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34755f131eee425fb916d5208e0f7cc7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(6, 24, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34755f131eee425fb916d5208e0f7cc7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34755f131eee425fb916d5208e0f7cc7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34755f131eee425fb916d5208e0f7cc7" class="color" data-tooltip="RGBA: 6, 24, 93, 1.0
   HEXA: #06185dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bba2a8b0dbed49b3b98476944886cedb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 43, 112, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bba2a8b0dbed49b3b98476944886cedb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bba2a8b0dbed49b3b98476944886cedb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bba2a8b0dbed49b3b98476944886cedb" class="color" data-tooltip="RGBA: 17, 43, 112, 1.0
   HEXA: #112b70ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57b018fccf9647dca7839442ac33a20e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 60, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57b018fccf9647dca7839442ac33a20e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57b018fccf9647dca7839442ac33a20e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57b018fccf9647dca7839442ac33a20e" class="color" data-tooltip="RGBA: 26, 60, 128, 1.0
   HEXA: #1a3c80ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8563a07424cb4dc9a8ddec0a61bcc6ce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 78, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8563a07424cb4dc9a8ddec0a61bcc6ce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8563a07424cb4dc9a8ddec0a61bcc6ce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8563a07424cb4dc9a8ddec0a61bcc6ce" class="color" data-tooltip="RGBA: 38, 78, 143, 1.0
   HEXA: #264e8fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5405d0b9429c4eebb8d487a9375a8a36 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 94, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5405d0b9429c4eebb8d487a9375a8a36::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5405d0b9429c4eebb8d487a9375a8a36:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5405d0b9429c4eebb8d487a9375a8a36" class="color" data-tooltip="RGBA: 50, 94, 152, 1.0
   HEXA: #325e98ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4cd6a5abbeae482988bdc169868811b1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 108, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4cd6a5abbeae482988bdc169868811b1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4cd6a5abbeae482988bdc169868811b1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4cd6a5abbeae482988bdc169868811b1" class="color" data-tooltip="RGBA: 63, 108, 157, 1.0
   HEXA: #3f6c9dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_36ccf8aab57b44df87b92a2614079db1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 119, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_36ccf8aab57b44df87b92a2614079db1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_36ccf8aab57b44df87b92a2614079db1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_36ccf8aab57b44df87b92a2614079db1" class="color" data-tooltip="RGBA: 76, 119, 157, 1.0
   HEXA: #4c779dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50dad7338627481db929f844ebd7bd8d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(88, 129, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50dad7338627481db929f844ebd7bd8d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50dad7338627481db929f844ebd7bd8d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50dad7338627481db929f844ebd7bd8d" class="color" data-tooltip="RGBA: 88, 129, 154, 1.0
   HEXA: #58819aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8976587ce8704498be714b47661f40cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 138, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8976587ce8704498be714b47661f40cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8976587ce8704498be714b47661f40cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8976587ce8704498be714b47661f40cf" class="color" data-tooltip="RGBA: 101, 138, 149, 1.0
   HEXA: #658a95ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f640d89895594324bfd81c7a616476a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 145, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f640d89895594324bfd81c7a616476a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f640d89895594324bfd81c7a616476a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f640d89895594324bfd81c7a616476a0" class="color" data-tooltip="RGBA: 114, 145, 144, 1.0
   HEXA: #729190ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9e2f3e76260c4a399923a6d7490c60de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 154, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e2f3e76260c4a399923a6d7490c60de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e2f3e76260c4a399923a6d7490c60de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e2f3e76260c4a399923a6d7490c60de" class="color" data-tooltip="RGBA: 127, 154, 139, 1.0
   HEXA: #7f9a8bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9a62144f91594fd88c827f36079777d7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 164, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9a62144f91594fd88c827f36079777d7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9a62144f91594fd88c827f36079777d7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9a62144f91594fd88c827f36079777d7" class="color" data-tooltip="RGBA: 141, 164, 136, 1.0
   HEXA: #8da488ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4f66146ce6b145a39312f1797620404f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 177, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4f66146ce6b145a39312f1797620404f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4f66146ce6b145a39312f1797620404f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4f66146ce6b145a39312f1797620404f" class="color" data-tooltip="RGBA: 158, 177, 136, 1.0
   HEXA: #9eb188ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6793827bacdf4d82a603555ec6ad49a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 195, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6793827bacdf4d82a603555ec6ad49a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6793827bacdf4d82a603555ec6ad49a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6793827bacdf4d82a603555ec6ad49a4" class="color" data-tooltip="RGBA: 182, 195, 145, 1.0
   HEXA: #b6c391ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_674206baa1564ecfb4b4b3004dde35fb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 214, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_674206baa1564ecfb4b4b3004dde35fb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_674206baa1564ecfb4b4b3004dde35fb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_674206baa1564ecfb4b4b3004dde35fb" class="color" data-tooltip="RGBA: 207, 214, 162, 1.0
   HEXA: #cfd6a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f4d59fd7185445b3a1fb35011565a024 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 233, 188, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f4d59fd7185445b3a1fb35011565a024::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f4d59fd7185445b3a1fb35011565a024:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f4d59fd7185445b3a1fb35011565a024" class="color" data-tooltip="RGBA: 230, 233, 188, 1.0
   HEXA: #e6e9bcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_256e9da6517b4307b18b34fa46a5548f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 244, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_256e9da6517b4307b18b34fa46a5548f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_256e9da6517b4307b18b34fa46a5548f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_256e9da6517b4307b18b34fa46a5548f" class="color" data-tooltip="RGBA: 243, 244, 212, 1.0
   HEXA: #f3f4d4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_94b0108bb639474d92afecf4020f6a41 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 251, 235, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_94b0108bb639474d92afecf4020f6a41::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_94b0108bb639474d92afecf4020f6a41:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_94b0108bb639474d92afecf4020f6a41" class="color" data-tooltip="RGBA: 251, 251, 235, 1.0
   HEXA: #fbfbebff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc4a5d2a9db34b42ac7987175fd4dbce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 254, 254, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc4a5d2a9db34b42ac7987175fd4dbce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc4a5d2a9db34b42ac7987175fd4dbce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc4a5d2a9db34b42ac7987175fd4dbce" class="color" data-tooltip="RGBA: 254, 254, 254, 1.0
   HEXA: #fefefeff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c615bd5ae78e4aef8e1d7d5f8b25c362 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c615bd5ae78e4aef8e1d7d5f8b25c362 div { flex: 1 1 0; }
           #_c615bd5ae78e4aef8e1d7d5f8b25c362 div.color { width: 100%; height: 100%; }
           #_c615bd5ae78e4aef8e1d7d5f8b25c362 div.cmap { width: 100%; height: auto; }
           #_c615bd5ae78e4aef8e1d7d5f8b25c362 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bilbao</strong>
       
       <div id="_c615bd5ae78e4aef8e1d7d5f8b25c362" class="color-map">
           
                           <div>
                   <style>
       #_06814424f0064d21b8c9d671a6439f47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_06814424f0064d21b8c9d671a6439f47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_06814424f0064d21b8c9d671a6439f47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_06814424f0064d21b8c9d671a6439f47" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7316121f26404dc58e2d5df1c7a27497 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 238, 238, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7316121f26404dc58e2d5df1c7a27497::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7316121f26404dc58e2d5df1c7a27497:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7316121f26404dc58e2d5df1c7a27497" class="color" data-tooltip="RGBA: 238, 238, 238, 1.0
   HEXA: #eeeeeeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9306b2f6de164d07b2bf9920571ff91d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 220, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9306b2f6de164d07b2bf9920571ff91d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9306b2f6de164d07b2bf9920571ff91d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9306b2f6de164d07b2bf9920571ff91d" class="color" data-tooltip="RGBA: 221, 220, 218, 1.0
   HEXA: #dddcdaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ba5a2d149acb4424940fb99323a37017 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 206, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba5a2d149acb4424940fb99323a37017::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba5a2d149acb4424940fb99323a37017:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba5a2d149acb4424940fb99323a37017" class="color" data-tooltip="RGBA: 208, 206, 199, 1.0
   HEXA: #d0cec7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd37ab2e97b940f2b1111060f8194892 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 194, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd37ab2e97b940f2b1111060f8194892::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd37ab2e97b940f2b1111060f8194892:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd37ab2e97b940f2b1111060f8194892" class="color" data-tooltip="RGBA: 198, 194, 179, 1.0
   HEXA: #c6c2b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e92f0f9262f94a43949b50f04aa5fa94 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 186, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e92f0f9262f94a43949b50f04aa5fa94::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e92f0f9262f94a43949b50f04aa5fa94:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e92f0f9262f94a43949b50f04aa5fa94" class="color" data-tooltip="RGBA: 192, 186, 162, 1.0
   HEXA: #c0baa2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95b59320ac9e4a5d8b58cfcf555b264a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(187, 177, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95b59320ac9e4a5d8b58cfcf555b264a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95b59320ac9e4a5d8b58cfcf555b264a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95b59320ac9e4a5d8b58cfcf555b264a" class="color" data-tooltip="RGBA: 187, 177, 144, 1.0
   HEXA: #bbb190ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d44c352136cb4146930653b1c651cade { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 167, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d44c352136cb4146930653b1c651cade::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d44c352136cb4146930653b1c651cade:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d44c352136cb4146930653b1c651cade" class="color" data-tooltip="RGBA: 181, 167, 127, 1.0
   HEXA: #b5a77fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6d47d34f1ff6406ba53bc5a53dd6a398 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(176, 154, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6d47d34f1ff6406ba53bc5a53dd6a398::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6d47d34f1ff6406ba53bc5a53dd6a398:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6d47d34f1ff6406ba53bc5a53dd6a398" class="color" data-tooltip="RGBA: 176, 154, 113, 1.0
   HEXA: #b09a71ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc103af13dbf4d8eb7e2b92bf2f95d7a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 141, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc103af13dbf4d8eb7e2b92bf2f95d7a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc103af13dbf4d8eb7e2b92bf2f95d7a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc103af13dbf4d8eb7e2b92bf2f95d7a" class="color" data-tooltip="RGBA: 172, 141, 104, 1.0
   HEXA: #ac8d68ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5eb9bb10c68d4e889b563c29942036c8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 129, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5eb9bb10c68d4e889b563c29942036c8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5eb9bb10c68d4e889b563c29942036c8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5eb9bb10c68d4e889b563c29942036c8" class="color" data-tooltip="RGBA: 168, 129, 99, 1.0
   HEXA: #a88163ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_948383b02197422a8a25d4809e4efb3d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 117, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_948383b02197422a8a25d4809e4efb3d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_948383b02197422a8a25d4809e4efb3d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_948383b02197422a8a25d4809e4efb3d" class="color" data-tooltip="RGBA: 165, 117, 94, 1.0
   HEXA: #a5755eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4731bd631984cf1bdef989b6593a5ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 105, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4731bd631984cf1bdef989b6593a5ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4731bd631984cf1bdef989b6593a5ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4731bd631984cf1bdef989b6593a5ba" class="color" data-tooltip="RGBA: 161, 105, 89, 1.0
   HEXA: #a16959ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_803ad4dfe23145bc8eb3f7db78cb5e46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(157, 93, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_803ad4dfe23145bc8eb3f7db78cb5e46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_803ad4dfe23145bc8eb3f7db78cb5e46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_803ad4dfe23145bc8eb3f7db78cb5e46" class="color" data-tooltip="RGBA: 157, 93, 83, 1.0
   HEXA: #9d5d53ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a6e06dfa4a7b4150af9f0503ee034071 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 79, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6e06dfa4a7b4150af9f0503ee034071::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6e06dfa4a7b4150af9f0503ee034071:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6e06dfa4a7b4150af9f0503ee034071" class="color" data-tooltip="RGBA: 150, 79, 74, 1.0
   HEXA: #964f4aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_efdeb9a97c7e4c7887e96e3ef72489d0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 64, 62, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_efdeb9a97c7e4c7887e96e3ef72489d0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_efdeb9a97c7e4c7887e96e3ef72489d0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_efdeb9a97c7e4c7887e96e3ef72489d0" class="color" data-tooltip="RGBA: 139, 64, 62, 1.0
   HEXA: #8b403eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e17e43b640f419d8185d276fb23eb92 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 48, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e17e43b640f419d8185d276fb23eb92::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e17e43b640f419d8185d276fb23eb92:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e17e43b640f419d8185d276fb23eb92" class="color" data-tooltip="RGBA: 124, 48, 47, 1.0
   HEXA: #7c302fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b0a1952468341269338d16c38004410 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 33, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b0a1952468341269338d16c38004410::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b0a1952468341269338d16c38004410:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b0a1952468341269338d16c38004410" class="color" data-tooltip="RGBA: 109, 33, 33, 1.0
   HEXA: #6d2121ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e590b5e7d4b14688835994bd0b34473d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(92, 17, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e590b5e7d4b14688835994bd0b34473d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e590b5e7d4b14688835994bd0b34473d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e590b5e7d4b14688835994bd0b34473d" class="color" data-tooltip="RGBA: 92, 17, 19, 1.0
   HEXA: #5c1113ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c3de729580c44295b855e8da70aeb658 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 0, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c3de729580c44295b855e8da70aeb658::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c3de729580c44295b855e8da70aeb658:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c3de729580c44295b855e8da70aeb658" class="color" data-tooltip="RGBA: 77, 0, 1, 1.0
   HEXA: #4d0001ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ab45c4585b2240aebc0c9018a5a055a3 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ab45c4585b2240aebc0c9018a5a055a3 div { flex: 1 1 0; }
           #_ab45c4585b2240aebc0c9018a5a055a3 div.color { width: 100%; height: 100%; }
           #_ab45c4585b2240aebc0c9018a5a055a3 div.cmap { width: 100%; height: auto; }
           #_ab45c4585b2240aebc0c9018a5a055a3 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>nuuk</strong>
       
       <div id="_ab45c4585b2240aebc0c9018a5a055a3" class="color-map">
           
                           <div>
                   <style>
       #_f68aadee85314a1b9aedf57383d87df9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(5, 89, 140, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f68aadee85314a1b9aedf57383d87df9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f68aadee85314a1b9aedf57383d87df9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f68aadee85314a1b9aedf57383d87df9" class="color" data-tooltip="RGBA: 5, 89, 140, 1.0
   HEXA: #05598cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ffabb2fccd3f4f88a653c3166807d74e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 93, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ffabb2fccd3f4f88a653c3166807d74e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ffabb2fccd3f4f88a653c3166807d74e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ffabb2fccd3f4f88a653c3166807d74e" class="color" data-tooltip="RGBA: 25, 93, 136, 1.0
   HEXA: #195d88ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_75721777eeb1497cbc4c639965c3c3ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 98, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_75721777eeb1497cbc4c639965c3c3ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_75721777eeb1497cbc4c639965c3c3ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_75721777eeb1497cbc4c639965c3c3ee" class="color" data-tooltip="RGBA: 40, 98, 132, 1.0
   HEXA: #286284ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e2410bd2974a498cba24792c285dfdd1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(54, 104, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e2410bd2974a498cba24792c285dfdd1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e2410bd2974a498cba24792c285dfdd1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e2410bd2974a498cba24792c285dfdd1" class="color" data-tooltip="RGBA: 54, 104, 130, 1.0
   HEXA: #366882ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b1f51d8c25394f00815c4deb9a06ecef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 112, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b1f51d8c25394f00815c4deb9a06ecef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b1f51d8c25394f00815c4deb9a06ecef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b1f51d8c25394f00815c4deb9a06ecef" class="color" data-tooltip="RGBA: 70, 112, 131, 1.0
   HEXA: #467083ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0619137aac384d4b925b7f346c74bd19 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 121, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0619137aac384d4b925b7f346c74bd19::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0619137aac384d4b925b7f346c74bd19:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0619137aac384d4b925b7f346c74bd19" class="color" data-tooltip="RGBA: 87, 121, 134, 1.0
   HEXA: #577986ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1623c79fa9ba41d094a3787fa267410b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 132, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1623c79fa9ba41d094a3787fa267410b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1623c79fa9ba41d094a3787fa267410b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1623c79fa9ba41d094a3787fa267410b" class="color" data-tooltip="RGBA: 106, 132, 139, 1.0
   HEXA: #6a848bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c1d9d66669da47bf844eae6c7bf1e84b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 142, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1d9d66669da47bf844eae6c7bf1e84b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1d9d66669da47bf844eae6c7bf1e84b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1d9d66669da47bf844eae6c7bf1e84b" class="color" data-tooltip="RGBA: 123, 142, 145, 1.0
   HEXA: #7b8e91ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e50f60a76c614264b70d2005f4188324 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 151, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e50f60a76c614264b70d2005f4188324::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e50f60a76c614264b70d2005f4188324:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e50f60a76c614264b70d2005f4188324" class="color" data-tooltip="RGBA: 139, 151, 149, 1.0
   HEXA: #8b9795ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_323175ce9bb0453799aec04059f42504 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(154, 161, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_323175ce9bb0453799aec04059f42504::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_323175ce9bb0453799aec04059f42504:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_323175ce9bb0453799aec04059f42504" class="color" data-tooltip="RGBA: 154, 161, 152, 1.0
   HEXA: #9aa198ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8a656bbe502d4b3894e9a1c1ab143864 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 169, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8a656bbe502d4b3894e9a1c1ab143864::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8a656bbe502d4b3894e9a1c1ab143864:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8a656bbe502d4b3894e9a1c1ab143864" class="color" data-tooltip="RGBA: 166, 169, 151, 1.0
   HEXA: #a6a997ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_88d8915445f94e1d870004bac59e2ea4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(175, 176, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_88d8915445f94e1d870004bac59e2ea4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_88d8915445f94e1d870004bac59e2ea4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_88d8915445f94e1d870004bac59e2ea4" class="color" data-tooltip="RGBA: 175, 176, 148, 1.0
   HEXA: #afb094ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_05ed0e94188b4cc0a5c34eab5d72602e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 182, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_05ed0e94188b4cc0a5c34eab5d72602e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_05ed0e94188b4cc0a5c34eab5d72602e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_05ed0e94188b4cc0a5c34eab5d72602e" class="color" data-tooltip="RGBA: 182, 182, 144, 1.0
   HEXA: #b6b690ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2ed63a896409477ea99229767047ddc1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(187, 187, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2ed63a896409477ea99229767047ddc1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2ed63a896409477ea99229767047ddc1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2ed63a896409477ea99229767047ddc1" class="color" data-tooltip="RGBA: 187, 187, 139, 1.0
   HEXA: #bbbb8bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e596d28aa7cd424882197e2c1e07bfc9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 193, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e596d28aa7cd424882197e2c1e07bfc9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e596d28aa7cd424882197e2c1e07bfc9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e596d28aa7cd424882197e2c1e07bfc9" class="color" data-tooltip="RGBA: 193, 193, 134, 1.0
   HEXA: #c1c186ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1be79a3b2ba643e5bc3087b4560a6919 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 200, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1be79a3b2ba643e5bc3087b4560a6919::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1be79a3b2ba643e5bc3087b4560a6919:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1be79a3b2ba643e5bc3087b4560a6919" class="color" data-tooltip="RGBA: 200, 200, 131, 1.0
   HEXA: #c8c883ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b060e8adf164b9f9e3b784205a3f44e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 211, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b060e8adf164b9f9e3b784205a3f44e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b060e8adf164b9f9e3b784205a3f44e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b060e8adf164b9f9e3b784205a3f44e" class="color" data-tooltip="RGBA: 211, 211, 133, 1.0
   HEXA: #d3d385ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ba969fb40dae4e3b85e2105d61e3c118 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 225, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba969fb40dae4e3b85e2105d61e3c118::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba969fb40dae4e3b85e2105d61e3c118:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba969fb40dae4e3b85e2105d61e3c118" class="color" data-tooltip="RGBA: 225, 225, 143, 1.0
   HEXA: #e1e18fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a5659e17a1fe400e9c7bf7e188c3bc28 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 241, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a5659e17a1fe400e9c7bf7e188c3bc28::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a5659e17a1fe400e9c7bf7e188c3bc28:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a5659e17a1fe400e9c7bf7e188c3bc28" class="color" data-tooltip="RGBA: 241, 241, 160, 1.0
   HEXA: #f1f1a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3c23de7e45874d4db58475373ceae5f4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 254, 178, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c23de7e45874d4db58475373ceae5f4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c23de7e45874d4db58475373ceae5f4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c23de7e45874d4db58475373ceae5f4" class="color" data-tooltip="RGBA: 254, 254, 178, 1.0
   HEXA: #fefeb2ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_49f445c8cda34b9695a73c058f0995c1 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_49f445c8cda34b9695a73c058f0995c1 div { flex: 1 1 0; }
           #_49f445c8cda34b9695a73c058f0995c1 div.color { width: 100%; height: 100%; }
           #_49f445c8cda34b9695a73c058f0995c1 div.cmap { width: 100%; height: auto; }
           #_49f445c8cda34b9695a73c058f0995c1 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>oslo</strong>
       
       <div id="_49f445c8cda34b9695a73c058f0995c1" class="color-map">
           
                           <div>
                   <style>
       #_c8fd13048df84954adccb32e7694fa08 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 1, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c8fd13048df84954adccb32e7694fa08::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c8fd13048df84954adccb32e7694fa08:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c8fd13048df84954adccb32e7694fa08" class="color" data-tooltip="RGBA: 1, 1, 1, 1.0
   HEXA: #010101ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_204ac977bd2b4beeb3393dce24a35ea3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 15, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_204ac977bd2b4beeb3393dce24a35ea3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_204ac977bd2b4beeb3393dce24a35ea3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_204ac977bd2b4beeb3393dce24a35ea3" class="color" data-tooltip="RGBA: 8, 15, 23, 1.0
   HEXA: #080f17ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_554ef471fb5848a18b19ad5b262d7fd0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 26, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_554ef471fb5848a18b19ad5b262d7fd0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_554ef471fb5848a18b19ad5b262d7fd0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_554ef471fb5848a18b19ad5b262d7fd0" class="color" data-tooltip="RGBA: 13, 26, 40, 1.0
   HEXA: #0d1a28ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b1195d18974d42f7b04ec242eba7fd0a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 36, 57, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b1195d18974d42f7b04ec242eba7fd0a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b1195d18974d42f7b04ec242eba7fd0a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b1195d18974d42f7b04ec242eba7fd0a" class="color" data-tooltip="RGBA: 15, 36, 57, 1.0
   HEXA: #0f2439ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cc66183559b7440f8aafac15f872013b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 48, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cc66183559b7440f8aafac15f872013b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cc66183559b7440f8aafac15f872013b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cc66183559b7440f8aafac15f872013b" class="color" data-tooltip="RGBA: 18, 48, 76, 1.0
   HEXA: #12304cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9fa180f661884b4da4fb441103976d1b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 59, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9fa180f661884b4da4fb441103976d1b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9fa180f661884b4da4fb441103976d1b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9fa180f661884b4da4fb441103976d1b" class="color" data-tooltip="RGBA: 23, 59, 96, 1.0
   HEXA: #173b60ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_83a0821d0c254151bdb910af95eb5dfa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 72, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_83a0821d0c254151bdb910af95eb5dfa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_83a0821d0c254151bdb910af95eb5dfa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_83a0821d0c254151bdb910af95eb5dfa" class="color" data-tooltip="RGBA: 29, 72, 117, 1.0
   HEXA: #1d4875ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_29f585df31a54244a2c5c9623248e86d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 85, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_29f585df31a54244a2c5c9623248e86d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_29f585df31a54244a2c5c9623248e86d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_29f585df31a54244a2c5c9623248e86d" class="color" data-tooltip="RGBA: 37, 85, 137, 1.0
   HEXA: #255589ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_857ab37025e840dab82532e6cff76082 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(49, 98, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_857ab37025e840dab82532e6cff76082::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_857ab37025e840dab82532e6cff76082:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_857ab37025e840dab82532e6cff76082" class="color" data-tooltip="RGBA: 49, 98, 158, 1.0
   HEXA: #31629eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_286550ec1b704f3094fc6402703cf03a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 114, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_286550ec1b704f3094fc6402703cf03a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_286550ec1b704f3094fc6402703cf03a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_286550ec1b704f3094fc6402703cf03a" class="color" data-tooltip="RGBA: 68, 114, 179, 1.0
   HEXA: #4472b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_244c181e402c4deab0e3e6c0b6c84b68 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 130, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_244c181e402c4deab0e3e6c0b6c84b68::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_244c181e402c4deab0e3e6c0b6c84b68:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_244c181e402c4deab0e3e6c0b6c84b68" class="color" data-tooltip="RGBA: 89, 130, 194, 1.0
   HEXA: #5982c2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb94ff8082aa4e7199fd815b16223bca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(110, 144, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb94ff8082aa4e7199fd815b16223bca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb94ff8082aa4e7199fd815b16223bca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb94ff8082aa4e7199fd815b16223bca" class="color" data-tooltip="RGBA: 110, 144, 200, 1.0
   HEXA: #6e90c8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e71213184a7e48ada27919ebe637e29f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(126, 154, 202, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e71213184a7e48ada27919ebe637e29f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e71213184a7e48ada27919ebe637e29f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e71213184a7e48ada27919ebe637e29f" class="color" data-tooltip="RGBA: 126, 154, 202, 1.0
   HEXA: #7e9acaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53d250d79a454495939b57d16b4cc3a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 163, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53d250d79a454495939b57d16b4cc3a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53d250d79a454495939b57d16b4cc3a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53d250d79a454495939b57d16b4cc3a2" class="color" data-tooltip="RGBA: 141, 163, 201, 1.0
   HEXA: #8da3c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fabaf73ae02a4375ae57d94a434b0210 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 174, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fabaf73ae02a4375ae57d94a434b0210::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fabaf73ae02a4375ae57d94a434b0210:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fabaf73ae02a4375ae57d94a434b0210" class="color" data-tooltip="RGBA: 158, 174, 201, 1.0
   HEXA: #9eaec9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_14b8374abc4648cc9f13c00c1f7ba58b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 185, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_14b8374abc4648cc9f13c00c1f7ba58b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_14b8374abc4648cc9f13c00c1f7ba58b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_14b8374abc4648cc9f13c00c1f7ba58b" class="color" data-tooltip="RGBA: 174, 185, 203, 1.0
   HEXA: #aeb9cbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d48ffd065133472792a9cea4ae09f18e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 199, 209, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d48ffd065133472792a9cea4ae09f18e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d48ffd065133472792a9cea4ae09f18e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d48ffd065133472792a9cea4ae09f18e" class="color" data-tooltip="RGBA: 194, 199, 209, 1.0
   HEXA: #c2c7d1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_453a10bd8dc04445a7bed0fad3eb4e05 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 216, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_453a10bd8dc04445a7bed0fad3eb4e05::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_453a10bd8dc04445a7bed0fad3eb4e05:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_453a10bd8dc04445a7bed0fad3eb4e05" class="color" data-tooltip="RGBA: 213, 216, 220, 1.0
   HEXA: #d5d8dcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4d7e1feb9a6e42d89594bb5db7cdb67e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 236, 237, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d7e1feb9a6e42d89594bb5db7cdb67e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d7e1feb9a6e42d89594bb5db7cdb67e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d7e1feb9a6e42d89594bb5db7cdb67e" class="color" data-tooltip="RGBA: 235, 236, 237, 1.0
   HEXA: #ebecedff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_406694114a1d47cdaec2746bdfdd84fd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_406694114a1d47cdaec2746bdfdd84fd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_406694114a1d47cdaec2746bdfdd84fd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_406694114a1d47cdaec2746bdfdd84fd" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_e83752bbc0d7486994ff9a24c3f32241 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_e83752bbc0d7486994ff9a24c3f32241 div { flex: 1 1 0; }
           #_e83752bbc0d7486994ff9a24c3f32241 div.color { width: 100%; height: 100%; }
           #_e83752bbc0d7486994ff9a24c3f32241 div.cmap { width: 100%; height: auto; }
           #_e83752bbc0d7486994ff9a24c3f32241 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>grayc</strong>
       
       <div id="_e83752bbc0d7486994ff9a24c3f32241" class="color-map">
           
                           <div>
                   <style>
       #_7143aecd9e9841c0aa1e5b6d7f964c49 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7143aecd9e9841c0aa1e5b6d7f964c49::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7143aecd9e9841c0aa1e5b6d7f964c49:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7143aecd9e9841c0aa1e5b6d7f964c49" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7caf01a80fcc43968bf418ff1f251d47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 240, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7caf01a80fcc43968bf418ff1f251d47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7caf01a80fcc43968bf418ff1f251d47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7caf01a80fcc43968bf418ff1f251d47" class="color" data-tooltip="RGBA: 240, 240, 240, 1.0
   HEXA: #f0f0f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_96b42daa176d46e19d601016d8c389a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 225, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_96b42daa176d46e19d601016d8c389a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_96b42daa176d46e19d601016d8c389a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_96b42daa176d46e19d601016d8c389a1" class="color" data-tooltip="RGBA: 225, 225, 225, 1.0
   HEXA: #e1e1e1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7ce06cab617b46ae8e8a565e819cf768 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(210, 210, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7ce06cab617b46ae8e8a565e819cf768::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7ce06cab617b46ae8e8a565e819cf768:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7ce06cab617b46ae8e8a565e819cf768" class="color" data-tooltip="RGBA: 210, 210, 210, 1.0
   HEXA: #d2d2d2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fcefd2a612fb4fb0b64755c73ecbeffe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 195, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fcefd2a612fb4fb0b64755c73ecbeffe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fcefd2a612fb4fb0b64755c73ecbeffe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fcefd2a612fb4fb0b64755c73ecbeffe" class="color" data-tooltip="RGBA: 195, 195, 195, 1.0
   HEXA: #c3c3c3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b5c447d7a6894148b93ae2ee87c7a9c8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 181, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b5c447d7a6894148b93ae2ee87c7a9c8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b5c447d7a6894148b93ae2ee87c7a9c8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b5c447d7a6894148b93ae2ee87c7a9c8" class="color" data-tooltip="RGBA: 181, 181, 181, 1.0
   HEXA: #b5b5b5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b448d417ebf7490fa13d135d0de2a076 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 166, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b448d417ebf7490fa13d135d0de2a076::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b448d417ebf7490fa13d135d0de2a076:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b448d417ebf7490fa13d135d0de2a076" class="color" data-tooltip="RGBA: 166, 166, 166, 1.0
   HEXA: #a6a6a6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ba999e715934dd1b67f5fe0314f2fe2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 153, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ba999e715934dd1b67f5fe0314f2fe2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ba999e715934dd1b67f5fe0314f2fe2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ba999e715934dd1b67f5fe0314f2fe2" class="color" data-tooltip="RGBA: 153, 153, 153, 1.0
   HEXA: #999999ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d1082554040f45f2b5d13faa626aa0ef { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 139, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d1082554040f45f2b5d13faa626aa0ef::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d1082554040f45f2b5d13faa626aa0ef:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d1082554040f45f2b5d13faa626aa0ef" class="color" data-tooltip="RGBA: 139, 139, 139, 1.0
   HEXA: #8b8b8bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_51f2d182321249b7a80756dddfc62d57 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(125, 125, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_51f2d182321249b7a80756dddfc62d57::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_51f2d182321249b7a80756dddfc62d57:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_51f2d182321249b7a80756dddfc62d57" class="color" data-tooltip="RGBA: 125, 125, 125, 1.0
   HEXA: #7d7d7dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b4d1f0f4a9f4ee093d789d577d39a25 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(113, 113, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b4d1f0f4a9f4ee093d789d577d39a25::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b4d1f0f4a9f4ee093d789d577d39a25:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b4d1f0f4a9f4ee093d789d577d39a25" class="color" data-tooltip="RGBA: 113, 113, 113, 1.0
   HEXA: #717171ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2fe58698e2954f14b57e50d9e0114192 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 99, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2fe58698e2954f14b57e50d9e0114192::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2fe58698e2954f14b57e50d9e0114192:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2fe58698e2954f14b57e50d9e0114192" class="color" data-tooltip="RGBA: 99, 99, 99, 1.0
   HEXA: #636363ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c51244ce89cd4296b0c57063ab51e896 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 87, 87, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c51244ce89cd4296b0c57063ab51e896::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c51244ce89cd4296b0c57063ab51e896:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c51244ce89cd4296b0c57063ab51e896" class="color" data-tooltip="RGBA: 87, 87, 87, 1.0
   HEXA: #575757ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68142b0232a2452eb2b492968423eb85 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(75, 75, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68142b0232a2452eb2b492968423eb85::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68142b0232a2452eb2b492968423eb85:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68142b0232a2452eb2b492968423eb85" class="color" data-tooltip="RGBA: 75, 75, 75, 1.0
   HEXA: #4b4b4bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c47ac9b8719547ea9c4c8b7ff865fb69 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 62, 62, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c47ac9b8719547ea9c4c8b7ff865fb69::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c47ac9b8719547ea9c4c8b7ff865fb69:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c47ac9b8719547ea9c4c8b7ff865fb69" class="color" data-tooltip="RGBA: 62, 62, 62, 1.0
   HEXA: #3e3e3eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d458d5831c274bd7a3096478fb8b7bbf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 51, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d458d5831c274bd7a3096478fb8b7bbf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d458d5831c274bd7a3096478fb8b7bbf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d458d5831c274bd7a3096478fb8b7bbf" class="color" data-tooltip="RGBA: 51, 51, 51, 1.0
   HEXA: #333333ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_447173ed635345b7af28add9d5c18b96 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(39, 39, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_447173ed635345b7af28add9d5c18b96::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_447173ed635345b7af28add9d5c18b96:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_447173ed635345b7af28add9d5c18b96" class="color" data-tooltip="RGBA: 39, 39, 39, 1.0
   HEXA: #272727ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_afc006a467364b7a907e0c5e581276e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 29, 29, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_afc006a467364b7a907e0c5e581276e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_afc006a467364b7a907e0c5e581276e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_afc006a467364b7a907e0c5e581276e8" class="color" data-tooltip="RGBA: 29, 29, 29, 1.0
   HEXA: #1d1d1dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d4bb49f253ae4ff2947ebcc1c30e6dfb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 17, 17, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d4bb49f253ae4ff2947ebcc1c30e6dfb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d4bb49f253ae4ff2947ebcc1c30e6dfb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d4bb49f253ae4ff2947ebcc1c30e6dfb" class="color" data-tooltip="RGBA: 17, 17, 17, 1.0
   HEXA: #111111ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e22e7308a770461e9b01e4af59bbcc03 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e22e7308a770461e9b01e4af59bbcc03::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e22e7308a770461e9b01e4af59bbcc03:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e22e7308a770461e9b01e4af59bbcc03" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4753448edb2941dd9eeafc245f413a5e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4753448edb2941dd9eeafc245f413a5e div { flex: 1 1 0; }
           #_4753448edb2941dd9eeafc245f413a5e div.color { width: 100%; height: 100%; }
           #_4753448edb2941dd9eeafc245f413a5e div.cmap { width: 100%; height: auto; }
           #_4753448edb2941dd9eeafc245f413a5e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>hawaii</strong>
       
       <div id="_4753448edb2941dd9eeafc245f413a5e" class="color-map">
           
                           <div>
                   <style>
       #_f8b5d5e7c33c42dd80bb76527e85a9c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 2, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f8b5d5e7c33c42dd80bb76527e85a9c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f8b5d5e7c33c42dd80bb76527e85a9c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f8b5d5e7c33c42dd80bb76527e85a9c1" class="color" data-tooltip="RGBA: 140, 2, 115, 1.0
   HEXA: #8c0273ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64079a0f53e94ae58db90494f47d419a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(143, 25, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64079a0f53e94ae58db90494f47d419a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64079a0f53e94ae58db90494f47d419a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64079a0f53e94ae58db90494f47d419a" class="color" data-tooltip="RGBA: 143, 25, 102, 1.0
   HEXA: #8f1966ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_838595fb3c85438085b268d49f870da0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 41, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_838595fb3c85438085b268d49f870da0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_838595fb3c85438085b268d49f870da0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_838595fb3c85438085b268d49f870da0" class="color" data-tooltip="RGBA: 146, 41, 90, 1.0
   HEXA: #92295aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e5524b1465344be6b78c7e5c8565be3c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(147, 54, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e5524b1465344be6b78c7e5c8565be3c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e5524b1465344be6b78c7e5c8565be3c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e5524b1465344be6b78c7e5c8565be3c" class="color" data-tooltip="RGBA: 147, 54, 79, 1.0
   HEXA: #93364fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_069b8f7a6cdc4da0ba2359f790ce5f51 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(149, 68, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_069b8f7a6cdc4da0ba2359f790ce5f51::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_069b8f7a6cdc4da0ba2359f790ce5f51:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_069b8f7a6cdc4da0ba2359f790ce5f51" class="color" data-tooltip="RGBA: 149, 68, 69, 1.0
   HEXA: #954445ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_396649f770364263901d7db42349048b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(151, 81, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_396649f770364263901d7db42349048b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_396649f770364263901d7db42349048b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_396649f770364263901d7db42349048b" class="color" data-tooltip="RGBA: 151, 81, 60, 1.0
   HEXA: #97513cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f2a476ec036e45a18c8dd302a3b9e418 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 95, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f2a476ec036e45a18c8dd302a3b9e418::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f2a476ec036e45a18c8dd302a3b9e418:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f2a476ec036e45a18c8dd302a3b9e418" class="color" data-tooltip="RGBA: 153, 95, 50, 1.0
   HEXA: #995f32ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c07d08fc5854d6ea92c010b67becc02 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(155, 108, 42, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c07d08fc5854d6ea92c010b67becc02::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c07d08fc5854d6ea92c010b67becc02:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c07d08fc5854d6ea92c010b67becc02" class="color" data-tooltip="RGBA: 155, 108, 42, 1.0
   HEXA: #9b6c2aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f0d447b0a1b4460791dbbaf599db00a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 123, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f0d447b0a1b4460791dbbaf599db00a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f0d447b0a1b4460791dbbaf599db00a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f0d447b0a1b4460791dbbaf599db00a1" class="color" data-tooltip="RGBA: 156, 123, 33, 1.0
   HEXA: #9c7b21ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_81c94ac9460f4c1f941963cc0aa92c0f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(157, 141, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_81c94ac9460f4c1f941963cc0aa92c0f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_81c94ac9460f4c1f941963cc0aa92c0f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_81c94ac9460f4c1f941963cc0aa92c0f" class="color" data-tooltip="RGBA: 157, 141, 28, 1.0
   HEXA: #9d8d1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_520194258c03431f93f03d599eba8f1f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(154, 159, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_520194258c03431f93f03d599eba8f1f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_520194258c03431f93f03d599eba8f1f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_520194258c03431f93f03d599eba8f1f" class="color" data-tooltip="RGBA: 154, 159, 32, 1.0
   HEXA: #9a9f20ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_42affb23858143ab9a3f0d5a973c9b51 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(147, 176, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_42affb23858143ab9a3f0d5a973c9b51::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_42affb23858143ab9a3f0d5a973c9b51:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_42affb23858143ab9a3f0d5a973c9b51" class="color" data-tooltip="RGBA: 147, 176, 51, 1.0
   HEXA: #93b033ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_300a756642324643b22e4ea172cc25a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 190, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_300a756642324643b22e4ea172cc25a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_300a756642324643b22e4ea172cc25a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_300a756642324643b22e4ea172cc25a1" class="color" data-tooltip="RGBA: 136, 190, 76, 1.0
   HEXA: #88be4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_841c7635ebe04b8c8b15e37378681fbc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 200, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_841c7635ebe04b8c8b15e37378681fbc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_841c7635ebe04b8c8b15e37378681fbc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_841c7635ebe04b8c8b15e37378681fbc" class="color" data-tooltip="RGBA: 124, 200, 103, 1.0
   HEXA: #7cc867ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c9ce779aeb2483fa78fa42cfdecee41 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 210, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c9ce779aeb2483fa78fa42cfdecee41::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c9ce779aeb2483fa78fa42cfdecee41:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c9ce779aeb2483fa78fa42cfdecee41" class="color" data-tooltip="RGBA: 111, 210, 134, 1.0
   HEXA: #6fd286ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c665aa2283ab45cb851de2d2c38e8129 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(100, 218, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c665aa2283ab45cb851de2d2c38e8129::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c665aa2283ab45cb851de2d2c38e8129:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c665aa2283ab45cb851de2d2c38e8129" class="color" data-tooltip="RGBA: 100, 218, 162, 1.0
   HEXA: #64daa2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2307b5e2d5ba4656abffaacf1f7a60d5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 228, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2307b5e2d5ba4656abffaacf1f7a60d5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2307b5e2d5ba4656abffaacf1f7a60d5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2307b5e2d5ba4656abffaacf1f7a60d5" class="color" data-tooltip="RGBA: 95, 228, 194, 1.0
   HEXA: #5fe4c2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b02ce52122304a1e93b5abf4e3f83b4a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 235, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b02ce52122304a1e93b5abf4e3f83b4a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b02ce52122304a1e93b5abf4e3f83b4a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b02ce52122304a1e93b5abf4e3f83b4a" class="color" data-tooltip="RGBA: 109, 235, 220, 1.0
   HEXA: #6debdcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d59d964d139140b9907226a7c3f81373 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(143, 240, 241, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d59d964d139140b9907226a7c3f81373::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d59d964d139140b9907226a7c3f81373:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d59d964d139140b9907226a7c3f81373" class="color" data-tooltip="RGBA: 143, 240, 241, 1.0
   HEXA: #8ff0f1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1cb05054455540268a1e74660f654293 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 242, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1cb05054455540268a1e74660f654293::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1cb05054455540268a1e74660f654293:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1cb05054455540268a1e74660f654293" class="color" data-tooltip="RGBA: 179, 242, 253, 1.0
   HEXA: #b3f2fdff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_32636d6e2aa6425fb32fba4e538dce7a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_32636d6e2aa6425fb32fba4e538dce7a div { flex: 1 1 0; }
           #_32636d6e2aa6425fb32fba4e538dce7a div.color { width: 100%; height: 100%; }
           #_32636d6e2aa6425fb32fba4e538dce7a div.cmap { width: 100%; height: auto; }
           #_32636d6e2aa6425fb32fba4e538dce7a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>lapaz</strong>
       
       <div id="_32636d6e2aa6425fb32fba4e538dce7a" class="color-map">
           
                           <div>
                   <style>
       #_871653032fcd43c9b05e3bbc4aa9b275 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 12, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_871653032fcd43c9b05e3bbc4aa9b275::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_871653032fcd43c9b05e3bbc4aa9b275:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_871653032fcd43c9b05e3bbc4aa9b275" class="color" data-tooltip="RGBA: 26, 12, 100, 1.0
   HEXA: #1a0c64ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3a162fd37797405888041311eb8a315e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 29, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3a162fd37797405888041311eb8a315e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3a162fd37797405888041311eb8a315e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3a162fd37797405888041311eb8a315e" class="color" data-tooltip="RGBA: 31, 29, 111, 1.0
   HEXA: #1f1d6fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fe20da8cc7fc4a5db499a2ec499eeeff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 44, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fe20da8cc7fc4a5db499a2ec499eeeff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fe20da8cc7fc4a5db499a2ec499eeeff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fe20da8cc7fc4a5db499a2ec499eeeff" class="color" data-tooltip="RGBA: 34, 44, 122, 1.0
   HEXA: #222c7aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_456b405f677d4b0ca51079904046a07b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 58, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_456b405f677d4b0ca51079904046a07b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_456b405f677d4b0ca51079904046a07b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_456b405f677d4b0ca51079904046a07b" class="color" data-tooltip="RGBA: 38, 58, 132, 1.0
   HEXA: #263a84ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f99926631b4746bd9e969a1bfa1ade6d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 73, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f99926631b4746bd9e969a1bfa1ade6d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f99926631b4746bd9e969a1bfa1ade6d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f99926631b4746bd9e969a1bfa1ade6d" class="color" data-tooltip="RGBA: 41, 73, 141, 1.0
   HEXA: #29498dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c315ed1edc04832a0896b680b574547 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 86, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c315ed1edc04832a0896b680b574547::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c315ed1edc04832a0896b680b574547:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c315ed1edc04832a0896b680b574547" class="color" data-tooltip="RGBA: 46, 86, 149, 1.0
   HEXA: #2e5695ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53a95b3e8d76480195fb9f231b4b0bcf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(52, 99, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53a95b3e8d76480195fb9f231b4b0bcf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53a95b3e8d76480195fb9f231b4b0bcf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53a95b3e8d76480195fb9f231b4b0bcf" class="color" data-tooltip="RGBA: 52, 99, 155, 1.0
   HEXA: #34639bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4bced213fe8549aa8ff8b57ee00fa89f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 112, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4bced213fe8549aa8ff8b57ee00fa89f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4bced213fe8549aa8ff8b57ee00fa89f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4bced213fe8549aa8ff8b57ee00fa89f" class="color" data-tooltip="RGBA: 60, 112, 160, 1.0
   HEXA: #3c70a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6dd15096f7ce44ba801e85bb9d81ae95 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(70, 123, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6dd15096f7ce44ba801e85bb9d81ae95::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6dd15096f7ce44ba801e85bb9d81ae95:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6dd15096f7ce44ba801e85bb9d81ae95" class="color" data-tooltip="RGBA: 70, 123, 163, 1.0
   HEXA: #467ba3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_48ee379147924b3d999856558827d739 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 135, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_48ee379147924b3d999856558827d739::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_48ee379147924b3d999856558827d739:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_48ee379147924b3d999856558827d739" class="color" data-tooltip="RGBA: 84, 135, 164, 1.0
   HEXA: #5487a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c63aa643a3f42f6bc2f44697eb0d0b5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 144, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c63aa643a3f42f6bc2f44697eb0d0b5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c63aa643a3f42f6bc2f44697eb0d0b5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c63aa643a3f42f6bc2f44697eb0d0b5" class="color" data-tooltip="RGBA: 99, 144, 162, 1.0
   HEXA: #6390a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_322db37ae7874aae83a18dd633b6d502 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(118, 153, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_322db37ae7874aae83a18dd633b6d502::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_322db37ae7874aae83a18dd633b6d502:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_322db37ae7874aae83a18dd633b6d502" class="color" data-tooltip="RGBA: 118, 153, 159, 1.0
   HEXA: #76999fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd7b3febb2e04cf894414e8f80341aca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 159, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd7b3febb2e04cf894414e8f80341aca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd7b3febb2e04cf894414e8f80341aca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd7b3febb2e04cf894414e8f80341aca" class="color" data-tooltip="RGBA: 135, 159, 155, 1.0
   HEXA: #879f9bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95fe9d40d73b46aa8b33a41976c365da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 164, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95fe9d40d73b46aa8b33a41976c365da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95fe9d40d73b46aa8b33a41976c365da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95fe9d40d73b46aa8b33a41976c365da" class="color" data-tooltip="RGBA: 153, 164, 151, 1.0
   HEXA: #99a497ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cacb2f4c191142e19cfa48c13f8d7350 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 170, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cacb2f4c191142e19cfa48c13f8d7350::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cacb2f4c191142e19cfa48c13f8d7350:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cacb2f4c191142e19cfa48c13f8d7350" class="color" data-tooltip="RGBA: 174, 170, 149, 1.0
   HEXA: #aeaa95ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_11142561ddc947b0a84cb04417b19887 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 180, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_11142561ddc947b0a84cb04417b19887::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_11142561ddc947b0a84cb04417b19887:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_11142561ddc947b0a84cb04417b19887" class="color" data-tooltip="RGBA: 197, 180, 155, 1.0
   HEXA: #c5b49bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2505930d446d42ed819249ce423a2fec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 195, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2505930d446d42ed819249ce423a2fec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2505930d446d42ed819249ce423a2fec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2505930d446d42ed819249ce423a2fec" class="color" data-tooltip="RGBA: 222, 195, 171, 1.0
   HEXA: #dec3abff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0c98133beb144bdc8319335f05eed9bb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 212, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0c98133beb144bdc8319335f05eed9bb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0c98133beb144bdc8319335f05eed9bb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0c98133beb144bdc8319335f05eed9bb" class="color" data-tooltip="RGBA: 240, 212, 194, 1.0
   HEXA: #f0d4c2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_76999195b33841768c1c5eff6c4931f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 229, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_76999195b33841768c1c5eff6c4931f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_76999195b33841768c1c5eff6c4931f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_76999195b33841768c1c5eff6c4931f6" class="color" data-tooltip="RGBA: 250, 229, 220, 1.0
   HEXA: #fae5dcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3323675a7ee14c0d9598452c63ab7de2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 242, 243, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3323675a7ee14c0d9598452c63ab7de2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3323675a7ee14c0d9598452c63ab7de2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3323675a7ee14c0d9598452c63ab7de2" class="color" data-tooltip="RGBA: 254, 242, 243, 1.0
   HEXA: #fef2f3ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_158887f02794430cbe7cc698acc7cb9e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_158887f02794430cbe7cc698acc7cb9e div { flex: 1 1 0; }
           #_158887f02794430cbe7cc698acc7cb9e div.color { width: 100%; height: 100%; }
           #_158887f02794430cbe7cc698acc7cb9e div.cmap { width: 100%; height: auto; }
           #_158887f02794430cbe7cc698acc7cb9e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tokyo</strong>
       
       <div id="_158887f02794430cbe7cc698acc7cb9e" class="color-map">
           
                           <div>
                   <style>
       #_47b46d23fc9b42c8904b6d364d40e340 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 14, 52, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_47b46d23fc9b42c8904b6d364d40e340::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_47b46d23fc9b42c8904b6d364d40e340:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_47b46d23fc9b42c8904b6d364d40e340" class="color" data-tooltip="RGBA: 26, 14, 52, 1.0
   HEXA: #1a0e34ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1afdcc3b6bfe4276bb9d5f81df354e0c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 21, 63, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1afdcc3b6bfe4276bb9d5f81df354e0c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1afdcc3b6bfe4276bb9d5f81df354e0c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1afdcc3b6bfe4276bb9d5f81df354e0c" class="color" data-tooltip="RGBA: 46, 21, 63, 1.0
   HEXA: #2e153fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1c31436fdb2b41e2bad61482f71c6dac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(67, 31, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1c31436fdb2b41e2bad61482f71c6dac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1c31436fdb2b41e2bad61482f71c6dac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1c31436fdb2b41e2bad61482f71c6dac" class="color" data-tooltip="RGBA: 67, 31, 75, 1.0
   HEXA: #431f4bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5532768da57b4b148ebf5cff5c18ba7f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 43, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5532768da57b4b148ebf5cff5c18ba7f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5532768da57b4b148ebf5cff5c18ba7f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5532768da57b4b148ebf5cff5c18ba7f" class="color" data-tooltip="RGBA: 87, 43, 88, 1.0
   HEXA: #572b58ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d81204314e454a4ba8c795ae15f2c425 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 58, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d81204314e454a4ba8c795ae15f2c425::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d81204314e454a4ba8c795ae15f2c425:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d81204314e454a4ba8c795ae15f2c425" class="color" data-tooltip="RGBA: 107, 58, 100, 1.0
   HEXA: #6b3a64ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5a89f7e195c54fdd9b2056f433d59415 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 74, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5a89f7e195c54fdd9b2056f433d59415::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5a89f7e195c54fdd9b2056f433d59415:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5a89f7e195c54fdd9b2056f433d59415" class="color" data-tooltip="RGBA: 121, 74, 110, 1.0
   HEXA: #794a6eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_843622c611cb4dd7839c8732855fef6b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 90, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_843622c611cb4dd7839c8732855fef6b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_843622c611cb4dd7839c8732855fef6b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_843622c611cb4dd7839c8732855fef6b" class="color" data-tooltip="RGBA: 131, 90, 118, 1.0
   HEXA: #835a76ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_55e13c9cc6e74a2f8f174859e943ac99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 103, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_55e13c9cc6e74a2f8f174859e943ac99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_55e13c9cc6e74a2f8f174859e943ac99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_55e13c9cc6e74a2f8f174859e943ac99" class="color" data-tooltip="RGBA: 136, 103, 124, 1.0
   HEXA: #88677cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c0b050e145d5486883f3f8992530ef00 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 116, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c0b050e145d5486883f3f8992530ef00::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c0b050e145d5486883f3f8992530ef00:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c0b050e145d5486883f3f8992530ef00" class="color" data-tooltip="RGBA: 140, 116, 128, 1.0
   HEXA: #8c7480ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7148ec9660ab4a5191cbafe986b63135 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(142, 129, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7148ec9660ab4a5191cbafe986b63135::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7148ec9660ab4a5191cbafe986b63135:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7148ec9660ab4a5191cbafe986b63135" class="color" data-tooltip="RGBA: 142, 129, 132, 1.0
   HEXA: #8e8184ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_13e3a32e4cc342819c6eba0fc9d31913 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(145, 141, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_13e3a32e4cc342819c6eba0fc9d31913::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_13e3a32e4cc342819c6eba0fc9d31913:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_13e3a32e4cc342819c6eba0fc9d31913" class="color" data-tooltip="RGBA: 145, 141, 135, 1.0
   HEXA: #918d87ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_38b370b044904a38a14cd34abc9dac6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(147, 153, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_38b370b044904a38a14cd34abc9dac6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_38b370b044904a38a14cd34abc9dac6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_38b370b044904a38a14cd34abc9dac6c" class="color" data-tooltip="RGBA: 147, 153, 139, 1.0
   HEXA: #93998bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3725beec8e9444dfb2c5e3b6481160d6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(149, 165, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3725beec8e9444dfb2c5e3b6481160d6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3725beec8e9444dfb2c5e3b6481160d6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3725beec8e9444dfb2c5e3b6481160d6" class="color" data-tooltip="RGBA: 149, 165, 142, 1.0
   HEXA: #95a58eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1ee9c201c08429dac818f565e189a08 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 178, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1ee9c201c08429dac818f565e189a08::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1ee9c201c08429dac818f565e189a08:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1ee9c201c08429dac818f565e189a08" class="color" data-tooltip="RGBA: 152, 178, 146, 1.0
   HEXA: #98b292ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_24713fc617cd4742832db2ceda1853e4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(159, 193, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_24713fc617cd4742832db2ceda1853e4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_24713fc617cd4742832db2ceda1853e4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_24713fc617cd4742832db2ceda1853e4" class="color" data-tooltip="RGBA: 159, 193, 151, 1.0
   HEXA: #9fc197ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a133bd13a23e4858a04d75a7bb964a7f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 210, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a133bd13a23e4858a04d75a7bb964a7f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a133bd13a23e4858a04d75a7bb964a7f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a133bd13a23e4858a04d75a7bb964a7f" class="color" data-tooltip="RGBA: 170, 210, 160, 1.0
   HEXA: #aad2a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a37995cc644f4fe590d7885aa22e460a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 229, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a37995cc644f4fe590d7885aa22e460a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a37995cc644f4fe590d7885aa22e460a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a37995cc644f4fe590d7885aa22e460a" class="color" data-tooltip="RGBA: 192, 229, 174, 1.0
   HEXA: #c0e5aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f0d875b1ee95406eadb5ed24963a4f2b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 243, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f0d875b1ee95406eadb5ed24963a4f2b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f0d875b1ee95406eadb5ed24963a4f2b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f0d875b1ee95406eadb5ed24963a4f2b" class="color" data-tooltip="RGBA: 215, 243, 189, 1.0
   HEXA: #d7f3bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c6fef4fbe8f2449b9765e1d90f20e097 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 251, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c6fef4fbe8f2449b9765e1d90f20e097::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c6fef4fbe8f2449b9765e1d90f20e097:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c6fef4fbe8f2449b9765e1d90f20e097" class="color" data-tooltip="RGBA: 237, 251, 204, 1.0
   HEXA: #edfbccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a359e199ad9c48c3848110027422db10 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 254, 216, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a359e199ad9c48c3848110027422db10::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a359e199ad9c48c3848110027422db10:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a359e199ad9c48c3848110027422db10" class="color" data-tooltip="RGBA: 254, 254, 216, 1.0
   HEXA: #fefed8ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_55fc36a9d0d846e192d75c862b25e813 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_55fc36a9d0d846e192d75c862b25e813 div { flex: 1 1 0; }
           #_55fc36a9d0d846e192d75c862b25e813 div.color { width: 100%; height: 100%; }
           #_55fc36a9d0d846e192d75c862b25e813 div.cmap { width: 100%; height: auto; }
           #_55fc36a9d0d846e192d75c862b25e813 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>buda</strong>
       
       <div id="_55fc36a9d0d846e192d75c862b25e813" class="color-map">
           
                           <div>
                   <style>
       #_e9934249b57248feaf075518c6f5c5e5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 1, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9934249b57248feaf075518c6f5c5e5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9934249b57248feaf075518c6f5c5e5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9934249b57248feaf075518c6f5c5e5" class="color" data-tooltip="RGBA: 179, 1, 179, 1.0
   HEXA: #b301b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f12c61b388a74ca1a06d728402fd2b93 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 24, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f12c61b388a74ca1a06d728402fd2b93::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f12c61b388a74ca1a06d728402fd2b93:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f12c61b388a74ca1a06d728402fd2b93" class="color" data-tooltip="RGBA: 179, 24, 168, 1.0
   HEXA: #b318a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1c3203443d04eb0b8363ff5c61c9275 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 41, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1c3203443d04eb0b8363ff5c61c9275::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1c3203443d04eb0b8363ff5c61c9275:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1c3203443d04eb0b8363ff5c61c9275" class="color" data-tooltip="RGBA: 179, 41, 159, 1.0
   HEXA: #b3299fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_790101aa5fdb4f0bb18a3898a4c0aecc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 55, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_790101aa5fdb4f0bb18a3898a4c0aecc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_790101aa5fdb4f0bb18a3898a4c0aecc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_790101aa5fdb4f0bb18a3898a4c0aecc" class="color" data-tooltip="RGBA: 181, 55, 152, 1.0
   HEXA: #b53798ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f4762f068d9249ba941575c4bae8073a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(184, 69, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f4762f068d9249ba941575c4bae8073a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f4762f068d9249ba941575c4bae8073a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f4762f068d9249ba941575c4bae8073a" class="color" data-tooltip="RGBA: 184, 69, 147, 1.0
   HEXA: #b84593ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_580863ba94bc4f2ebbba89fc88c9b64a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 81, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_580863ba94bc4f2ebbba89fc88c9b64a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_580863ba94bc4f2ebbba89fc88c9b64a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_580863ba94bc4f2ebbba89fc88c9b64a" class="color" data-tooltip="RGBA: 188, 81, 143, 1.0
   HEXA: #bc518fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90d65d859c6a4b9695c21bd3f3a1d82f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 93, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90d65d859c6a4b9695c21bd3f3a1d82f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90d65d859c6a4b9695c21bd3f3a1d82f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90d65d859c6a4b9695c21bd3f3a1d82f" class="color" data-tooltip="RGBA: 193, 93, 139, 1.0
   HEXA: #c15d8bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf351228fa204e778eecd74116885bb9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 105, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf351228fa204e778eecd74116885bb9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf351228fa204e778eecd74116885bb9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf351228fa204e778eecd74116885bb9" class="color" data-tooltip="RGBA: 196, 105, 135, 1.0
   HEXA: #c46987ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_55426fb967fe429c9a51e9b70e3500d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 115, 132, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_55426fb967fe429c9a51e9b70e3500d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_55426fb967fe429c9a51e9b70e3500d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_55426fb967fe429c9a51e9b70e3500d9" class="color" data-tooltip="RGBA: 200, 115, 132, 1.0
   HEXA: #c87384ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c5de546c9d249c29b24f5b50aa6e973 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 127, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c5de546c9d249c29b24f5b50aa6e973::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c5de546c9d249c29b24f5b50aa6e973:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c5de546c9d249c29b24f5b50aa6e973" class="color" data-tooltip="RGBA: 204, 127, 128, 1.0
   HEXA: #cc7f80ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eab85080cd6f4d6ba2bf6d1fcf4c86cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 138, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eab85080cd6f4d6ba2bf6d1fcf4c86cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eab85080cd6f4d6ba2bf6d1fcf4c86cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eab85080cd6f4d6ba2bf6d1fcf4c86cd" class="color" data-tooltip="RGBA: 207, 138, 125, 1.0
   HEXA: #cf8a7dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_101f086213cb4b77a290091a2273dcbf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(210, 151, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_101f086213cb4b77a290091a2273dcbf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_101f086213cb4b77a290091a2273dcbf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_101f086213cb4b77a290091a2273dcbf" class="color" data-tooltip="RGBA: 210, 151, 122, 1.0
   HEXA: #d2977aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5387d247467e435298c3381669187503 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 162, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5387d247467e435298c3381669187503::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5387d247467e435298c3381669187503:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5387d247467e435298c3381669187503" class="color" data-tooltip="RGBA: 213, 162, 119, 1.0
   HEXA: #d5a277ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8916ba4438334235a74818cc7c2c1b10 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 173, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8916ba4438334235a74818cc7c2c1b10::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8916ba4438334235a74818cc7c2c1b10:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8916ba4438334235a74818cc7c2c1b10" class="color" data-tooltip="RGBA: 216, 173, 116, 1.0
   HEXA: #d8ad74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a8dea72fb86643aaa13d14b2d5e92262 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 186, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8dea72fb86643aaa13d14b2d5e92262::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8dea72fb86643aaa13d14b2d5e92262:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8dea72fb86643aaa13d14b2d5e92262" class="color" data-tooltip="RGBA: 219, 186, 113, 1.0
   HEXA: #dbba71ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_48a6dbaf846341199434b4951d4ca920 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 198, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_48a6dbaf846341199434b4951d4ca920::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_48a6dbaf846341199434b4951d4ca920:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_48a6dbaf846341199434b4951d4ca920" class="color" data-tooltip="RGBA: 222, 198, 110, 1.0
   HEXA: #dec66eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b7c1e428ece04600b058f32e52479c6e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 211, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b7c1e428ece04600b058f32e52479c6e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b7c1e428ece04600b058f32e52479c6e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b7c1e428ece04600b058f32e52479c6e" class="color" data-tooltip="RGBA: 225, 211, 107, 1.0
   HEXA: #e1d36bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_344dc588bfab46858b56b9ddb8f11bae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 224, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_344dc588bfab46858b56b9ddb8f11bae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_344dc588bfab46858b56b9ddb8f11bae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_344dc588bfab46858b56b9ddb8f11bae" class="color" data-tooltip="RGBA: 229, 224, 104, 1.0
   HEXA: #e5e068ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_41cd959c476d4406bcb32474bc885c0e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 239, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_41cd959c476d4406bcb32474bc885c0e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_41cd959c476d4406bcb32474bc885c0e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_41cd959c476d4406bcb32474bc885c0e" class="color" data-tooltip="RGBA: 240, 239, 102, 1.0
   HEXA: #f0ef66ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1f37dabf226546b38dc74d19caeb1b7e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f37dabf226546b38dc74d19caeb1b7e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f37dabf226546b38dc74d19caeb1b7e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f37dabf226546b38dc74d19caeb1b7e" class="color" data-tooltip="RGBA: 255, 255, 102, 1.0
   HEXA: #ffff66ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4b5b4d50143d42e9bb2fe1901cb0ec97 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4b5b4d50143d42e9bb2fe1901cb0ec97 div { flex: 1 1 0; }
           #_4b5b4d50143d42e9bb2fe1901cb0ec97 div.color { width: 100%; height: 100%; }
           #_4b5b4d50143d42e9bb2fe1901cb0ec97 div.cmap { width: 100%; height: auto; }
           #_4b5b4d50143d42e9bb2fe1901cb0ec97 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>acton</strong>
       
       <div id="_4b5b4d50143d42e9bb2fe1901cb0ec97" class="color-map">
           
                           <div>
                   <style>
       #_8876fe39b8b04e0a8372ab3841d8fe44 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 33, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8876fe39b8b04e0a8372ab3841d8fe44::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8876fe39b8b04e0a8372ab3841d8fe44:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8876fe39b8b04e0a8372ab3841d8fe44" class="color" data-tooltip="RGBA: 46, 33, 77, 1.0
   HEXA: #2e214dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a512d923a15c426bb6d10f9def49d64d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 45, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a512d923a15c426bb6d10f9def49d64d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a512d923a15c426bb6d10f9def49d64d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a512d923a15c426bb6d10f9def49d64d" class="color" data-tooltip="RGBA: 59, 45, 88, 1.0
   HEXA: #3b2d58ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4c4c8e524c640dea1291ab07a02da77 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(74, 58, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4c4c8e524c640dea1291ab07a02da77::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4c4c8e524c640dea1291ab07a02da77:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4c4c8e524c640dea1291ab07a02da77" class="color" data-tooltip="RGBA: 74, 58, 101, 1.0
   HEXA: #4a3a65ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab7ff8cf179746e3b9c24233b82ee819 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 70, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab7ff8cf179746e3b9c24233b82ee819::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab7ff8cf179746e3b9c24233b82ee819:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab7ff8cf179746e3b9c24233b82ee819" class="color" data-tooltip="RGBA: 89, 70, 114, 1.0
   HEXA: #594672ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_66a342747f6c432fac043f1f62113a39 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 82, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66a342747f6c432fac043f1f62113a39::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66a342747f6c432fac043f1f62113a39:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66a342747f6c432fac043f1f62113a39" class="color" data-tooltip="RGBA: 106, 82, 126, 1.0
   HEXA: #6a527eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9dc92f77c75547cd87ffd7d0326a43a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 91, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9dc92f77c75547cd87ffd7d0326a43a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9dc92f77c75547cd87ffd7d0326a43a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9dc92f77c75547cd87ffd7d0326a43a3" class="color" data-tooltip="RGBA: 123, 91, 136, 1.0
   HEXA: #7b5b88ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_14f2974171f54d39a9f741d6399e5bbd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 98, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_14f2974171f54d39a9f741d6399e5bbd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_14f2974171f54d39a9f741d6399e5bbd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_14f2974171f54d39a9f741d6399e5bbd" class="color" data-tooltip="RGBA: 141, 98, 143, 1.0
   HEXA: #8d628fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cad4bbe99b59412bba048a942e3e7d4a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(157, 101, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cad4bbe99b59412bba048a942e3e7d4a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cad4bbe99b59412bba048a942e3e7d4a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cad4bbe99b59412bba048a942e3e7d4a" class="color" data-tooltip="RGBA: 157, 101, 146, 1.0
   HEXA: #9d6592ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_22bda8c61baa467bb3f73cbeedce1687 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 102, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_22bda8c61baa467bb3f73cbeedce1687::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_22bda8c61baa467bb3f73cbeedce1687:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_22bda8c61baa467bb3f73cbeedce1687" class="color" data-tooltip="RGBA: 171, 102, 148, 1.0
   HEXA: #ab6694ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1f8bafff948046c288f90e10d4a9089a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(187, 106, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f8bafff948046c288f90e10d4a9089a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f8bafff948046c288f90e10d4a9089a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f8bafff948046c288f90e10d4a9089a" class="color" data-tooltip="RGBA: 187, 106, 152, 1.0
   HEXA: #bb6a98ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2aa23fb468e14b8f93cd3dfd88d40b8b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 115, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2aa23fb468e14b8f93cd3dfd88d40b8b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2aa23fb468e14b8f93cd3dfd88d40b8b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2aa23fb468e14b8f93cd3dfd88d40b8b" class="color" data-tooltip="RGBA: 202, 115, 159, 1.0
   HEXA: #ca739fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_37d91916e9c94e9bb39966e5c0b4d3ae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 129, 170, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_37d91916e9c94e9bb39966e5c0b4d3ae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_37d91916e9c94e9bb39966e5c0b4d3ae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_37d91916e9c94e9bb39966e5c0b4d3ae" class="color" data-tooltip="RGBA: 211, 129, 170, 1.0
   HEXA: #d381aaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_30ee26e034e24a8a8e204d207c01fc5e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 141, 178, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30ee26e034e24a8a8e204d207c01fc5e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30ee26e034e24a8a8e204d207c01fc5e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30ee26e034e24a8a8e204d207c01fc5e" class="color" data-tooltip="RGBA: 213, 141, 178, 1.0
   HEXA: #d58db2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_576836ee67a947db8fa039994f210993 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 152, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_576836ee67a947db8fa039994f210993::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_576836ee67a947db8fa039994f210993:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_576836ee67a947db8fa039994f210993" class="color" data-tooltip="RGBA: 212, 152, 186, 1.0
   HEXA: #d498baff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9d31588d93664ffb91a203472a170d98 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 164, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9d31588d93664ffb91a203472a170d98::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9d31588d93664ffb91a203472a170d98:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9d31588d93664ffb91a203472a170d98" class="color" data-tooltip="RGBA: 211, 164, 194, 1.0
   HEXA: #d3a4c2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_38fb5e6186d54138a6684eb8b9fc7b7c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 175, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_38fb5e6186d54138a6684eb8b9fc7b7c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_38fb5e6186d54138a6684eb8b9fc7b7c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_38fb5e6186d54138a6684eb8b9fc7b7c" class="color" data-tooltip="RGBA: 213, 175, 203, 1.0
   HEXA: #d5afcbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3ac5b88e3b54cee874fd33043f50eba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 189, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3ac5b88e3b54cee874fd33043f50eba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3ac5b88e3b54cee874fd33043f50eba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3ac5b88e3b54cee874fd33043f50eba" class="color" data-tooltip="RGBA: 215, 189, 212, 1.0
   HEXA: #d7bdd4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2171115771484dff819b6b1e3adfc168 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 202, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2171115771484dff819b6b1e3adfc168::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2171115771484dff819b6b1e3adfc168:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2171115771484dff819b6b1e3adfc168" class="color" data-tooltip="RGBA: 219, 202, 221, 1.0
   HEXA: #dbcaddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4d310d17ca214c21a1aff694c47c5bc0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 216, 231, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d310d17ca214c21a1aff694c47c5bc0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d310d17ca214c21a1aff694c47c5bc0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d310d17ca214c21a1aff694c47c5bc0" class="color" data-tooltip="RGBA: 225, 216, 231, 1.0
   HEXA: #e1d8e7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b577f82d537d40e4a2bbe0ce36c86375 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 230, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b577f82d537d40e4a2bbe0ce36c86375::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b577f82d537d40e4a2bbe0ce36c86375:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b577f82d537d40e4a2bbe0ce36c86375" class="color" data-tooltip="RGBA: 230, 230, 240, 1.0
   HEXA: #e6e6f0ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8d0da0ea836e4ba5beb9f2b3adb25351 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8d0da0ea836e4ba5beb9f2b3adb25351 div { flex: 1 1 0; }
           #_8d0da0ea836e4ba5beb9f2b3adb25351 div.color { width: 100%; height: 100%; }
           #_8d0da0ea836e4ba5beb9f2b3adb25351 div.cmap { width: 100%; height: auto; }
           #_8d0da0ea836e4ba5beb9f2b3adb25351 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>turku</strong>
       
       <div id="_8d0da0ea836e4ba5beb9f2b3adb25351" class="color-map">
           
                           <div>
                   <style>
       #_3b0ceafcdba74ab195ce22e31bcd3ec4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b0ceafcdba74ab195ce22e31bcd3ec4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b0ceafcdba74ab195ce22e31bcd3ec4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b0ceafcdba74ab195ce22e31bcd3ec4" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0426f70c1d594fc095766ed01b9e2145 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(21, 21, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0426f70c1d594fc095766ed01b9e2145::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0426f70c1d594fc095766ed01b9e2145:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0426f70c1d594fc095766ed01b9e2145" class="color" data-tooltip="RGBA: 21, 21, 19, 1.0
   HEXA: #151513ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_70ce4b7b81dc4b31bc046f7c391e284b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 35, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_70ce4b7b81dc4b31bc046f7c391e284b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_70ce4b7b81dc4b31bc046f7c391e284b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_70ce4b7b81dc4b31bc046f7c391e284b" class="color" data-tooltip="RGBA: 35, 35, 31, 1.0
   HEXA: #23231fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68559c8a67e640179de7716be15f7c8d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(48, 48, 42, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68559c8a67e640179de7716be15f7c8d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68559c8a67e640179de7716be15f7c8d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68559c8a67e640179de7716be15f7c8d" class="color" data-tooltip="RGBA: 48, 48, 42, 1.0
   HEXA: #30302aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b6f051d963b44e5a8de762610f651544 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 63, 52, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b6f051d963b44e5a8de762610f651544::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b6f051d963b44e5a8de762610f651544:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b6f051d963b44e5a8de762610f651544" class="color" data-tooltip="RGBA: 63, 63, 52, 1.0
   HEXA: #3f3f34ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ad3034aabe17451eae81d6053c4a91d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 76, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ad3034aabe17451eae81d6053c4a91d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ad3034aabe17451eae81d6053c4a91d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ad3034aabe17451eae81d6053c4a91d2" class="color" data-tooltip="RGBA: 77, 76, 59, 1.0
   HEXA: #4d4c3bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_97e382ca68e549938a1f5ff0d6654cd7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(91, 91, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_97e382ca68e549938a1f5ff0d6654cd7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_97e382ca68e549938a1f5ff0d6654cd7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_97e382ca68e549938a1f5ff0d6654cd7" class="color" data-tooltip="RGBA: 91, 91, 66, 1.0
   HEXA: #5b5b42ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b88a4f29a3154698902a42669a792917 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 104, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b88a4f29a3154698902a42669a792917::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b88a4f29a3154698902a42669a792917:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b88a4f29a3154698902a42669a792917" class="color" data-tooltip="RGBA: 104, 104, 72, 1.0
   HEXA: #686848ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_93a8ddb2b6e540819384e79cdb03ab61 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(119, 117, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_93a8ddb2b6e540819384e79cdb03ab61::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_93a8ddb2b6e540819384e79cdb03ab61:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_93a8ddb2b6e540819384e79cdb03ab61" class="color" data-tooltip="RGBA: 119, 117, 79, 1.0
   HEXA: #77754fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ca775b782aa343ba883f80170e18505e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 132, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ca775b782aa343ba883f80170e18505e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ca775b782aa343ba883f80170e18505e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ca775b782aa343ba883f80170e18505e" class="color" data-tooltip="RGBA: 137, 132, 86, 1.0
   HEXA: #898456ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68bd7a56cdc9445cbead7b76760fa0aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 146, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68bd7a56cdc9445cbead7b76760fa0aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68bd7a56cdc9445cbead7b76760fa0aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68bd7a56cdc9445cbead7b76760fa0aa" class="color" data-tooltip="RGBA: 156, 146, 95, 1.0
   HEXA: #9c925fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_269ba807a3bc46ef961d485d22d98656 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 157, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_269ba807a3bc46ef961d485d22d98656::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_269ba807a3bc46ef961d485d22d98656:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_269ba807a3bc46ef961d485d22d98656" class="color" data-tooltip="RGBA: 178, 157, 106, 1.0
   HEXA: #b29d6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_76e457bc6113425eaac9e0e0db2693c2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 164, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_76e457bc6113425eaac9e0e0db2693c2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_76e457bc6113425eaac9e0e0db2693c2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_76e457bc6113425eaac9e0e0db2693c2" class="color" data-tooltip="RGBA: 196, 164, 116, 1.0
   HEXA: #c4a474ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb2e8fac9c8646a8bacfc3d1720a1a74 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 166, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb2e8fac9c8646a8bacfc3d1720a1a74::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb2e8fac9c8646a8bacfc3d1720a1a74:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb2e8fac9c8646a8bacfc3d1720a1a74" class="color" data-tooltip="RGBA: 211, 166, 127, 1.0
   HEXA: #d3a67fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5c2a62834608456db82bb651c58cbf42 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 169, 140, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5c2a62834608456db82bb651c58cbf42::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5c2a62834608456db82bb651c58cbf42:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5c2a62834608456db82bb651c58cbf42" class="color" data-tooltip="RGBA: 225, 169, 140, 1.0
   HEXA: #e1a98cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab599c79d1974d22afe32c7eeba3527c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 175, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab599c79d1974d22afe32c7eeba3527c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab599c79d1974d22afe32c7eeba3527c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab599c79d1974d22afe32c7eeba3527c" class="color" data-tooltip="RGBA: 237, 175, 156, 1.0
   HEXA: #edaf9cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d10f1caa206b449a8afa1703428030c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 187, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d10f1caa206b449a8afa1703428030c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d10f1caa206b449a8afa1703428030c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d10f1caa206b449a8afa1703428030c9" class="color" data-tooltip="RGBA: 247, 187, 177, 1.0
   HEXA: #f7bbb1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c9f1dfd3bab4e0aa5bb3f5a382c4560 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 200, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c9f1dfd3bab4e0aa5bb3f5a382c4560::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c9f1dfd3bab4e0aa5bb3f5a382c4560:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c9f1dfd3bab4e0aa5bb3f5a382c4560" class="color" data-tooltip="RGBA: 252, 200, 196, 1.0
   HEXA: #fcc8c4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dda4e8bad9624432a75e4cd703cb8948 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 216, 214, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dda4e8bad9624432a75e4cd703cb8948::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dda4e8bad9624432a75e4cd703cb8948:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dda4e8bad9624432a75e4cd703cb8948" class="color" data-tooltip="RGBA: 255, 216, 214, 1.0
   HEXA: #ffd8d6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_80b0289511fd4112b009166c4cee686a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 230, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_80b0289511fd4112b009166c4cee686a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_80b0289511fd4112b009166c4cee686a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_80b0289511fd4112b009166c4cee686a" class="color" data-tooltip="RGBA: 255, 230, 230, 1.0
   HEXA: #ffe6e6ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_fe2113f8910a4687830f963b71f30b7f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_fe2113f8910a4687830f963b71f30b7f div { flex: 1 1 0; }
           #_fe2113f8910a4687830f963b71f30b7f div.color { width: 100%; height: 100%; }
           #_fe2113f8910a4687830f963b71f30b7f div.cmap { width: 100%; height: auto; }
           #_fe2113f8910a4687830f963b71f30b7f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>imola</strong>
       
       <div id="_fe2113f8910a4687830f963b71f30b7f" class="color-map">
           
                           <div>
                   <style>
       #_803cd63cc7d54fa08066daf4e0ca1ed7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 51, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_803cd63cc7d54fa08066daf4e0ca1ed7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_803cd63cc7d54fa08066daf4e0ca1ed7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_803cd63cc7d54fa08066daf4e0ca1ed7" class="color" data-tooltip="RGBA: 26, 51, 179, 1.0
   HEXA: #1a33b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_10ad29a4accc4dd9b68abf6c899d4b48 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 60, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_10ad29a4accc4dd9b68abf6c899d4b48::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_10ad29a4accc4dd9b68abf6c899d4b48:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_10ad29a4accc4dd9b68abf6c899d4b48" class="color" data-tooltip="RGBA: 31, 60, 174, 1.0
   HEXA: #1f3caeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9306fe182419487dadbbd947db963b65 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 70, 169, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9306fe182419487dadbbd947db963b65::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9306fe182419487dadbbd947db963b65:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9306fe182419487dadbbd947db963b65" class="color" data-tooltip="RGBA: 36, 70, 169, 1.0
   HEXA: #2446a9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8c179db1f72341c4b63e555a1ec369eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 78, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8c179db1f72341c4b63e555a1ec369eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8c179db1f72341c4b63e555a1ec369eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8c179db1f72341c4b63e555a1ec369eb" class="color" data-tooltip="RGBA: 40, 78, 165, 1.0
   HEXA: #284ea5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0fe34094ab6a4c909bd597fe59568967 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(45, 87, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0fe34094ab6a4c909bd597fe59568967::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0fe34094ab6a4c909bd597fe59568967:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0fe34094ab6a4c909bd597fe59568967" class="color" data-tooltip="RGBA: 45, 87, 160, 1.0
   HEXA: #2d57a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f81dac698a19462d82b31cce1db4cce2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(49, 96, 156, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f81dac698a19462d82b31cce1db4cce2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f81dac698a19462d82b31cce1db4cce2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f81dac698a19462d82b31cce1db4cce2" class="color" data-tooltip="RGBA: 49, 96, 156, 1.0
   HEXA: #31609cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e6caf8fb7464f34bf79dd18c7fdcc71 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(55, 104, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e6caf8fb7464f34bf79dd18c7fdcc71::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e6caf8fb7464f34bf79dd18c7fdcc71:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e6caf8fb7464f34bf79dd18c7fdcc71" class="color" data-tooltip="RGBA: 55, 104, 150, 1.0
   HEXA: #376896ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6300a02ae8664f0c8ca247440abdac21 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(62, 112, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6300a02ae8664f0c8ca247440abdac21::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6300a02ae8664f0c8ca247440abdac21:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6300a02ae8664f0c8ca247440abdac21" class="color" data-tooltip="RGBA: 62, 112, 143, 1.0
   HEXA: #3e708fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_78e199772f9245c1bca569489b9263f2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 119, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_78e199772f9245c1bca569489b9263f2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_78e199772f9245c1bca569489b9263f2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_78e199772f9245c1bca569489b9263f2" class="color" data-tooltip="RGBA: 69, 119, 136, 1.0
   HEXA: #457788ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_911d1b4227204d3a92a906de93ddbe8b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(78, 129, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_911d1b4227204d3a92a906de93ddbe8b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_911d1b4227204d3a92a906de93ddbe8b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_911d1b4227204d3a92a906de93ddbe8b" class="color" data-tooltip="RGBA: 78, 129, 129, 1.0
   HEXA: #4e8181ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50443b6fceed4584a8d994a90a0be4f5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 139, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50443b6fceed4584a8d994a90a0be4f5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50443b6fceed4584a8d994a90a0be4f5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50443b6fceed4584a8d994a90a0be4f5" class="color" data-tooltip="RGBA: 89, 139, 125, 1.0
   HEXA: #598b7dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a6cdf7bb242142db8972c5db249ed530 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 152, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6cdf7bb242142db8972c5db249ed530::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6cdf7bb242142db8972c5db249ed530:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6cdf7bb242142db8972c5db249ed530" class="color" data-tooltip="RGBA: 102, 152, 122, 1.0
   HEXA: #66987aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac3822550bd64bf5b264777ea88dbca8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 165, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac3822550bd64bf5b264777ea88dbca8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac3822550bd64bf5b264777ea88dbca8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac3822550bd64bf5b264777ea88dbca8" class="color" data-tooltip="RGBA: 114, 165, 118, 1.0
   HEXA: #72a576ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d02fb16108c44073a2dce8030d279871 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 178, 115, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d02fb16108c44073a2dce8030d279871::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d02fb16108c44073a2dce8030d279871:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d02fb16108c44073a2dce8030d279871" class="color" data-tooltip="RGBA: 127, 178, 115, 1.0
   HEXA: #7fb273ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_61c1ed9020b14d7092a94abc9971bf20 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 192, 112, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61c1ed9020b14d7092a94abc9971bf20::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61c1ed9020b14d7092a94abc9971bf20:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61c1ed9020b14d7092a94abc9971bf20" class="color" data-tooltip="RGBA: 141, 192, 112, 1.0
   HEXA: #8dc070ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_643a38c398b44bd8bd3ee80698e62a09 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 206, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_643a38c398b44bd8bd3ee80698e62a09::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_643a38c398b44bd8bd3ee80698e62a09:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_643a38c398b44bd8bd3ee80698e62a09" class="color" data-tooltip="RGBA: 156, 206, 108, 1.0
   HEXA: #9cce6cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cada2ed876e54882bfeb63a9179f4bd3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(175, 222, 105, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cada2ed876e54882bfeb63a9179f4bd3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cada2ed876e54882bfeb63a9179f4bd3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cada2ed876e54882bfeb63a9179f4bd3" class="color" data-tooltip="RGBA: 175, 222, 105, 1.0
   HEXA: #afde69ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d29ef86c0e3c46c0bb8f97744b916c8b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 235, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d29ef86c0e3c46c0bb8f97744b916c8b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d29ef86c0e3c46c0bb8f97744b916c8b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d29ef86c0e3c46c0bb8f97744b916c8b" class="color" data-tooltip="RGBA: 198, 235, 103, 1.0
   HEXA: #c6eb67ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_97be052aaec34cc18e22b0da787bcb1c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 246, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_97be052aaec34cc18e22b0da787bcb1c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_97be052aaec34cc18e22b0da787bcb1c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_97be052aaec34cc18e22b0da787bcb1c" class="color" data-tooltip="RGBA: 228, 246, 102, 1.0
   HEXA: #e4f666ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3c15848525fa4006980febbc5cf73a1b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c15848525fa4006980febbc5cf73a1b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c15848525fa4006980febbc5cf73a1b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c15848525fa4006980febbc5cf73a1b" class="color" data-tooltip="RGBA: 255, 255, 102, 1.0
   HEXA: #ffff66ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_435abf617699451db30ab4cda7561f2c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_435abf617699451db30ab4cda7561f2c div { flex: 1 1 0; }
           #_435abf617699451db30ab4cda7561f2c div.color { width: 100%; height: 100%; }
           #_435abf617699451db30ab4cda7561f2c div.cmap { width: 100%; height: auto; }
           #_435abf617699451db30ab4cda7561f2c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>batlow</strong>
       
       <div id="_435abf617699451db30ab4cda7561f2c" class="color-map">
           
                           <div>
                   <style>
       #_1e3db72b3ed74176b70dfb3d5eeddbbb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 25, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1e3db72b3ed74176b70dfb3d5eeddbbb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1e3db72b3ed74176b70dfb3d5eeddbbb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1e3db72b3ed74176b70dfb3d5eeddbbb" class="color" data-tooltip="RGBA: 1, 25, 89, 1.0
   HEXA: #011959ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fb9422239c974efaae360622a4f81192 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 39, 92, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fb9422239c974efaae360622a4f81192::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fb9422239c974efaae360622a4f81192:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fb9422239c974efaae360622a4f81192" class="color" data-tooltip="RGBA: 8, 39, 92, 1.0
   HEXA: #08275cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_168015a2d83a483a86b8e4e2de26451d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(14, 53, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_168015a2d83a483a86b8e4e2de26451d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_168015a2d83a483a86b8e4e2de26451d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_168015a2d83a483a86b8e4e2de26451d" class="color" data-tooltip="RGBA: 14, 53, 94, 1.0
   HEXA: #0e355eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a35ea95d2bb347f3aad4843ac6451395 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(19, 67, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a35ea95d2bb347f3aad4843ac6451395::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a35ea95d2bb347f3aad4843ac6451395:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a35ea95d2bb347f3aad4843ac6451395" class="color" data-tooltip="RGBA: 19, 67, 96, 1.0
   HEXA: #134360ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1454bf5fc57d4e21999b6f3c0bb649b2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 82, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1454bf5fc57d4e21999b6f3c0bb649b2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1454bf5fc57d4e21999b6f3c0bb649b2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1454bf5fc57d4e21999b6f3c0bb649b2" class="color" data-tooltip="RGBA: 26, 82, 97, 1.0
   HEXA: #1a5261ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_257d14ea8e3146b8bd73125dcd3a4f24 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(38, 95, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_257d14ea8e3146b8bd73125dcd3a4f24::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_257d14ea8e3146b8bd73125dcd3a4f24:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_257d14ea8e3146b8bd73125dcd3a4f24" class="color" data-tooltip="RGBA: 38, 95, 95, 1.0
   HEXA: #265f5fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c39ded658b624165b475a28d3cc32769 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 106, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c39ded658b624165b475a28d3cc32769::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c39ded658b624165b475a28d3cc32769:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c39ded658b624165b475a28d3cc32769" class="color" data-tooltip="RGBA: 56, 106, 88, 1.0
   HEXA: #386a58ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c7f1528c13184aadb3df1f11952bc0c2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(75, 114, 78, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c7f1528c13184aadb3df1f11952bc0c2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c7f1528c13184aadb3df1f11952bc0c2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c7f1528c13184aadb3df1f11952bc0c2" class="color" data-tooltip="RGBA: 75, 114, 78, 1.0
   HEXA: #4b724eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab3b1f85093e464c81b0d0e3f504459b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 120, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab3b1f85093e464c81b0d0e3f504459b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab3b1f85093e464c81b0d0e3f504459b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab3b1f85093e464c81b0d0e3f504459b" class="color" data-tooltip="RGBA: 95, 120, 67, 1.0
   HEXA: #5f7843ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_22bc1a20207e41f1b17f00dd6203c7af { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 126, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_22bc1a20207e41f1b17f00dd6203c7af::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_22bc1a20207e41f1b17f00dd6203c7af:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_22bc1a20207e41f1b17f00dd6203c7af" class="color" data-tooltip="RGBA: 117, 126, 56, 1.0
   HEXA: #757e38ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b3ef0f2536f743468f709c8d9167bfec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 133, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b3ef0f2536f743468f709c8d9167bfec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b3ef0f2536f743468f709c8d9167bfec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b3ef0f2536f743468f709c8d9167bfec" class="color" data-tooltip="RGBA: 139, 133, 47, 1.0
   HEXA: #8b852fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d2011bee44d9473fb7d2e562e5a4d96d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 139, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d2011bee44d9473fb7d2e562e5a4d96d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d2011bee44d9473fb7d2e562e5a4d96d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d2011bee44d9473fb7d2e562e5a4d96d" class="color" data-tooltip="RGBA: 168, 139, 47, 1.0
   HEXA: #a88b2fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3fc002dc60ac4cefa58160f9506f28e9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 145, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3fc002dc60ac4cefa58160f9506f28e9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3fc002dc60ac4cefa58160f9506f28e9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3fc002dc60ac4cefa58160f9506f28e9" class="color" data-tooltip="RGBA: 195, 145, 59, 1.0
   HEXA: #c3913bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_920309eda018458fa9d306f5cdd87825 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 150, 79, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_920309eda018458fa9d306f5cdd87825::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_920309eda018458fa9d306f5cdd87825:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_920309eda018458fa9d306f5cdd87825" class="color" data-tooltip="RGBA: 220, 150, 79, 1.0
   HEXA: #dc964fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7d46be25f51244a0a3d58baa2690ce50 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 157, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d46be25f51244a0a3d58baa2690ce50::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d46be25f51244a0a3d58baa2690ce50:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d46be25f51244a0a3d58baa2690ce50" class="color" data-tooltip="RGBA: 241, 157, 107, 1.0
   HEXA: #f19d6bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_113adc6dfd3940ef8adb0f370d9eb71c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 165, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_113adc6dfd3940ef8adb0f370d9eb71c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_113adc6dfd3940ef8adb0f370d9eb71c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_113adc6dfd3940ef8adb0f370d9eb71c" class="color" data-tooltip="RGBA: 250, 165, 135, 1.0
   HEXA: #faa587ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b8e402be6bc649c58bad2e1b7d69936b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 175, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b8e402be6bc649c58bad2e1b7d69936b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b8e402be6bc649c58bad2e1b7d69936b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b8e402be6bc649c58bad2e1b7d69936b" class="color" data-tooltip="RGBA: 253, 175, 164, 1.0
   HEXA: #fdafa4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7b1d2166a37a4df483285e07fa9bb746 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 184, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7b1d2166a37a4df483285e07fa9bb746::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7b1d2166a37a4df483285e07fa9bb746:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7b1d2166a37a4df483285e07fa9bb746" class="color" data-tooltip="RGBA: 253, 184, 191, 1.0
   HEXA: #fdb8bfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_92e99c653f5e4a79881ef5bafd50e62c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 194, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_92e99c653f5e4a79881ef5bafd50e62c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_92e99c653f5e4a79881ef5bafd50e62c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_92e99c653f5e4a79881ef5bafd50e62c" class="color" data-tooltip="RGBA: 252, 194, 221, 1.0
   HEXA: #fcc2ddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c95260a7845a4603abce43717adb74d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 204, 250, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c95260a7845a4603abce43717adb74d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c95260a7845a4603abce43717adb74d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c95260a7845a4603abce43717adb74d3" class="color" data-tooltip="RGBA: 250, 204, 250, 1.0
   HEXA: #faccfaff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_1dd6e7419f3b45d7adaf343cebd36aa5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_1dd6e7419f3b45d7adaf343cebd36aa5 div { flex: 1 1 0; }
           #_1dd6e7419f3b45d7adaf343cebd36aa5 div.color { width: 100%; height: 100%; }
           #_1dd6e7419f3b45d7adaf343cebd36aa5 div.cmap { width: 100%; height: auto; }
           #_1dd6e7419f3b45d7adaf343cebd36aa5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>oleron</strong>
       
       <div id="_1dd6e7419f3b45d7adaf343cebd36aa5" class="color-map">
           
                           <div>
                   <style>
       #_87f80f1a07f74d2ba55c046c1e1e044f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(26, 38, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_87f80f1a07f74d2ba55c046c1e1e044f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_87f80f1a07f74d2ba55c046c1e1e044f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_87f80f1a07f74d2ba55c046c1e1e044f" class="color" data-tooltip="RGBA: 26, 38, 89, 1.0
   HEXA: #1a2659ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_80a50b9f034b4c9da43361709e5c8f6a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 58, 109, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_80a50b9f034b4c9da43361709e5c8f6a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_80a50b9f034b4c9da43361709e5c8f6a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_80a50b9f034b4c9da43361709e5c8f6a" class="color" data-tooltip="RGBA: 46, 58, 109, 1.0
   HEXA: #2e3a6dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e8f30b2b1a249f8800920a050c60b0c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 80, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e8f30b2b1a249f8800920a050c60b0c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e8f30b2b1a249f8800920a050c60b0c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e8f30b2b1a249f8800920a050c60b0c" class="color" data-tooltip="RGBA: 68, 80, 131, 1.0
   HEXA: #445083ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90920db6fef345a89a5e6362dfcf9b3f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 102, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90920db6fef345a89a5e6362dfcf9b3f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90920db6fef345a89a5e6362dfcf9b3f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90920db6fef345a89a5e6362dfcf9b3f" class="color" data-tooltip="RGBA: 89, 102, 153, 1.0
   HEXA: #596699ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95d96366d535457c8120466eb9c688a8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 126, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95d96366d535457c8120466eb9c688a8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95d96366d535457c8120466eb9c688a8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95d96366d535457c8120466eb9c688a8" class="color" data-tooltip="RGBA: 114, 126, 177, 1.0
   HEXA: #727eb1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e71bc530c7d40a5b0fc62b472085f37 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 150, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e71bc530c7d40a5b0fc62b472085f37::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e71bc530c7d40a5b0fc62b472085f37:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e71bc530c7d40a5b0fc62b472085f37" class="color" data-tooltip="RGBA: 137, 150, 201, 1.0
   HEXA: #8996c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8922571b32164338b4f032ea06ccedf0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(163, 175, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8922571b32164338b4f032ea06ccedf0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8922571b32164338b4f032ea06ccedf0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8922571b32164338b4f032ea06ccedf0" class="color" data-tooltip="RGBA: 163, 175, 225, 1.0
   HEXA: #a3afe1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3328c35b134b47f1b14265e9fbf77143 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 198, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3328c35b134b47f1b14265e9fbf77143::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3328c35b134b47f1b14265e9fbf77143:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3328c35b134b47f1b14265e9fbf77143" class="color" data-tooltip="RGBA: 185, 198, 242, 1.0
   HEXA: #b9c6f2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8915d24171304b74b6f120290d087204 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 216, 248, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8915d24171304b74b6f120290d087204::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8915d24171304b74b6f120290d087204:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8915d24171304b74b6f120290d087204" class="color" data-tooltip="RGBA: 203, 216, 248, 1.0
   HEXA: #cbd8f8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eefbacd75bcd4f2eb554acaa13980af7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 234, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eefbacd75bcd4f2eb554acaa13980af7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eefbacd75bcd4f2eb554acaa13980af7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eefbacd75bcd4f2eb554acaa13980af7" class="color" data-tooltip="RGBA: 222, 234, 253, 1.0
   HEXA: #deeafdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6387bbd53e7d4f538fe73354725d6eae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(42, 81, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6387bbd53e7d4f538fe73354725d6eae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6387bbd53e7d4f538fe73354725d6eae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6387bbd53e7d4f538fe73354725d6eae" class="color" data-tooltip="RGBA: 42, 81, 0, 1.0
   HEXA: #2a5100ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d89ac313e3d460bb9c47db632b8f934 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(73, 90, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d89ac313e3d460bb9c47db632b8f934::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d89ac313e3d460bb9c47db632b8f934:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d89ac313e3d460bb9c47db632b8f934" class="color" data-tooltip="RGBA: 73, 90, 1, 1.0
   HEXA: #495a01ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9cfdd21c83df464bac319cc345a7f699 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 102, 12, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9cfdd21c83df464bac319cc345a7f699::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9cfdd21c83df464bac319cc345a7f699:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9cfdd21c83df464bac319cc345a7f699" class="color" data-tooltip="RGBA: 101, 102, 12, 1.0
   HEXA: #65660cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d879b563bc647eca9bac3927acb059f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 118, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d879b563bc647eca9bac3927acb059f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d879b563bc647eca9bac3927acb059f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d879b563bc647eca9bac3927acb059f" class="color" data-tooltip="RGBA: 131, 118, 40, 1.0
   HEXA: #837628ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_04f300ab4f6a474c85ea60f45d39c506 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 138, 71, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_04f300ab4f6a474c85ea60f45d39c506::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_04f300ab4f6a474c85ea60f45d39c506:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_04f300ab4f6a474c85ea60f45d39c506" class="color" data-tooltip="RGBA: 161, 138, 71, 1.0
   HEXA: #a18a47ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d8edc239c4e54544884a7d2dc462007c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(190, 159, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d8edc239c4e54544884a7d2dc462007c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d8edc239c4e54544884a7d2dc462007c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d8edc239c4e54544884a7d2dc462007c" class="color" data-tooltip="RGBA: 190, 159, 101, 1.0
   HEXA: #be9f65ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f40863adf1b14c4490d4cc35e26d0bf4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 184, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f40863adf1b14c4490d4cc35e26d0bf4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f40863adf1b14c4490d4cc35e26d0bf4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f40863adf1b14c4490d4cc35e26d0bf4" class="color" data-tooltip="RGBA: 222, 184, 134, 1.0
   HEXA: #deb886ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9fca5f28a2274cdc82d1e4103716a3b4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 208, 167, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9fca5f28a2274cdc82d1e4103716a3b4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9fca5f28a2274cdc82d1e4103716a3b4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9fca5f28a2274cdc82d1e4103716a3b4" class="color" data-tooltip="RGBA: 242, 208, 167, 1.0
   HEXA: #f2d0a7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_de4b1d721d734e3fa196a058fe7a278a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 231, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_de4b1d721d734e3fa196a058fe7a278a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_de4b1d721d734e3fa196a058fe7a278a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_de4b1d721d734e3fa196a058fe7a278a" class="color" data-tooltip="RGBA: 249, 231, 199, 1.0
   HEXA: #f9e7c7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d43352f9a15841e0970f8156d621b983 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 253, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d43352f9a15841e0970f8156d621b983::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d43352f9a15841e0970f8156d621b983:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d43352f9a15841e0970f8156d621b983" class="color" data-tooltip="RGBA: 253, 253, 230, 1.0
   HEXA: #fdfde6ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
   </div>


|


----


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

.. raw:: html


   <div id="_132601bab94e48c1ba5bec256e1c8cc1" class="color-swatch">
       <style>
           #_132601bab94e48c1ba5bec256e1c8cc1 {
               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%);
           }
           #_132601bab94e48c1ba5bec256e1c8cc1 div {
               width: 100%;
           }
           #_132601bab94e48c1ba5bec256e1c8cc1 > div.gradient {
               width: 100%;
               height: min(4rem, 100%);
               display: grid;
               gap: 0.2rem;
               grid-template-rows: 1rem auto;
           }
           #_132601bab94e48c1ba5bec256e1c8cc1 .color {
               height: minmax(1.5rem, 100%);
           }
           #_132601bab94e48c1ba5bec256e1c8cc1 > div.gradient > strong {
               margin: 0;
               padding: 0;
           }
           #_132601bab94e48c1ba5bec256e1c8cc1 img {height: 100%;}
       </style>
       
           <div class="gradient">
       <style>
           #_cb559b526a984eaf89a4a156a2499eb5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_cb559b526a984eaf89a4a156a2499eb5 div { flex: 1 1 0; }
           #_cb559b526a984eaf89a4a156a2499eb5 div.color { width: 100%; height: 100%; }
           #_cb559b526a984eaf89a4a156a2499eb5 div.cmap { width: 100%; height: auto; }
           #_cb559b526a984eaf89a4a156a2499eb5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>antique</strong>
       
       <div id="_cb559b526a984eaf89a4a156a2499eb5" class="color-map">
           
                           <div>
                   <style>
       #_8185281d1d5446099a398bd47a3aab90 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 92, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8185281d1d5446099a398bd47a3aab90::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8185281d1d5446099a398bd47a3aab90:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8185281d1d5446099a398bd47a3aab90" class="color" data-tooltip="RGBA: 133, 92, 117, 1.0
   HEXA: #855c75ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a6ef66bdf73b400ea60c393fb66a0f0e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 175, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6ef66bdf73b400ea60c393fb66a0f0e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6ef66bdf73b400ea60c393fb66a0f0e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6ef66bdf73b400ea60c393fb66a0f0e" class="color" data-tooltip="RGBA: 217, 175, 107, 1.0
   HEXA: #d9af6bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_834af49b521b4006ac7ea5838814cdce { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(175, 100, 88, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_834af49b521b4006ac7ea5838814cdce::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_834af49b521b4006ac7ea5838814cdce:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_834af49b521b4006ac7ea5838814cdce" class="color" data-tooltip="RGBA: 175, 100, 88, 1.0
   HEXA: #af6458ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c52174833cce4cefa46857dd3f66a672 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 111, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c52174833cce4cefa46857dd3f66a672::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c52174833cce4cefa46857dd3f66a672:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c52174833cce4cefa46857dd3f66a672" class="color" data-tooltip="RGBA: 115, 111, 76, 1.0
   HEXA: #736f4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_622058af6b6e4dc1831ac5191d2f785d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 106, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_622058af6b6e4dc1831ac5191d2f785d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_622058af6b6e4dc1831ac5191d2f785d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_622058af6b6e4dc1831ac5191d2f785d" class="color" data-tooltip="RGBA: 82, 106, 131, 1.0
   HEXA: #526a83ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_625c70972b6a4b77b9b1f5ca779f0697 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(98, 83, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_625c70972b6a4b77b9b1f5ca779f0697::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_625c70972b6a4b77b9b1f5ca779f0697:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_625c70972b6a4b77b9b1f5ca779f0697" class="color" data-tooltip="RGBA: 98, 83, 119, 1.0
   HEXA: #625377ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_358b6f9c3d444a3bba9858a5fce110d5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 133, 92, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_358b6f9c3d444a3bba9858a5fce110d5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_358b6f9c3d444a3bba9858a5fce110d5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_358b6f9c3d444a3bba9858a5fce110d5" class="color" data-tooltip="RGBA: 104, 133, 92, 1.0
   HEXA: #68855cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_837b5be0ab714f058fa358c5431fe04b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 156, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_837b5be0ab714f058fa358c5431fe04b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_837b5be0ab714f058fa358c5431fe04b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_837b5be0ab714f058fa358c5431fe04b" class="color" data-tooltip="RGBA: 156, 156, 94, 1.0
   HEXA: #9c9c5eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c67b4275b5d041e69839654b3b9b5669 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 97, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c67b4275b5d041e69839654b3b9b5669::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c67b4275b5d041e69839654b3b9b5669:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c67b4275b5d041e69839654b3b9b5669" class="color" data-tooltip="RGBA: 160, 97, 119, 1.0
   HEXA: #a06177ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3eecb5f3b69c4cd48ff9af522421b016 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 120, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3eecb5f3b69c4cd48ff9af522421b016::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3eecb5f3b69c4cd48ff9af522421b016:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3eecb5f3b69c4cd48ff9af522421b016" class="color" data-tooltip="RGBA: 140, 120, 93, 1.0
   HEXA: #8c785dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_064eb4c2e3e74d35bc3550fb4d9c7e4b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_064eb4c2e3e74d35bc3550fb4d9c7e4b div { flex: 1 1 0; }
           #_064eb4c2e3e74d35bc3550fb4d9c7e4b div.color { width: 100%; height: 100%; }
           #_064eb4c2e3e74d35bc3550fb4d9c7e4b div.cmap { width: 100%; height: auto; }
           #_064eb4c2e3e74d35bc3550fb4d9c7e4b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bold</strong>
       
       <div id="_064eb4c2e3e74d35bc3550fb4d9c7e4b" class="color-map">
           
                           <div>
                   <style>
       #_f418a2059f2f433585b592dc46a6529d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 60, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f418a2059f2f433585b592dc46a6529d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f418a2059f2f433585b592dc46a6529d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f418a2059f2f433585b592dc46a6529d" class="color" data-tooltip="RGBA: 127, 60, 141, 1.0
   HEXA: #7f3c8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_904bdc1eb0794d5d83c5b7e1c8122e92 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 165, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_904bdc1eb0794d5d83c5b7e1c8122e92::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_904bdc1eb0794d5d83c5b7e1c8122e92:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_904bdc1eb0794d5d83c5b7e1c8122e92" class="color" data-tooltip="RGBA: 17, 165, 121, 1.0
   HEXA: #11a579ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4ae9a7ab993646799df1df6c5242d03b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 105, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4ae9a7ab993646799df1df6c5242d03b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4ae9a7ab993646799df1df6c5242d03b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4ae9a7ab993646799df1df6c5242d03b" class="color" data-tooltip="RGBA: 57, 105, 172, 1.0
   HEXA: #3969acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0762a02c5b944907a6f3f92b104e8846 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 183, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0762a02c5b944907a6f3f92b104e8846::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0762a02c5b944907a6f3f92b104e8846:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0762a02c5b944907a6f3f92b104e8846" class="color" data-tooltip="RGBA: 242, 183, 1, 1.0
   HEXA: #f2b701ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4d87d9028ee4525ae0e23eac826b681 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 63, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4d87d9028ee4525ae0e23eac826b681::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4d87d9028ee4525ae0e23eac826b681:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4d87d9028ee4525ae0e23eac826b681" class="color" data-tooltip="RGBA: 231, 63, 116, 1.0
   HEXA: #e73f74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_39bee7d8580447fe9652cc2e3bbe4624 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 186, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_39bee7d8580447fe9652cc2e3bbe4624::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_39bee7d8580447fe9652cc2e3bbe4624:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_39bee7d8580447fe9652cc2e3bbe4624" class="color" data-tooltip="RGBA: 128, 186, 90, 1.0
   HEXA: #80ba5aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_237bb97d9a6b44139304c17035c9f6f0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 131, 16, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_237bb97d9a6b44139304c17035c9f6f0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_237bb97d9a6b44139304c17035c9f6f0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_237bb97d9a6b44139304c17035c9f6f0" class="color" data-tooltip="RGBA: 230, 131, 16, 1.0
   HEXA: #e68310ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e465c3b0ebc4f009d40d61cf9553533 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 134, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e465c3b0ebc4f009d40d61cf9553533::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e465c3b0ebc4f009d40d61cf9553533:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e465c3b0ebc4f009d40d61cf9553533" class="color" data-tooltip="RGBA: 0, 134, 149, 1.0
   HEXA: #008695ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9e90ae0dfa37432f986aaf423c345c11 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 28, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9e90ae0dfa37432f986aaf423c345c11::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9e90ae0dfa37432f986aaf423c345c11:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9e90ae0dfa37432f986aaf423c345c11" class="color" data-tooltip="RGBA: 207, 28, 144, 1.0
   HEXA: #cf1c90ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_920ce05c331745f29842e0aad97bdca2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 123, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_920ce05c331745f29842e0aad97bdca2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_920ce05c331745f29842e0aad97bdca2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_920ce05c331745f29842e0aad97bdca2" class="color" data-tooltip="RGBA: 249, 123, 114, 1.0
   HEXA: #f97b72ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a4e7d2feeae8429eb017a8dd863a1f7c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a4e7d2feeae8429eb017a8dd863a1f7c div { flex: 1 1 0; }
           #_a4e7d2feeae8429eb017a8dd863a1f7c div.color { width: 100%; height: 100%; }
           #_a4e7d2feeae8429eb017a8dd863a1f7c div.cmap { width: 100%; height: auto; }
           #_a4e7d2feeae8429eb017a8dd863a1f7c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>pastel</strong>
       
       <div id="_a4e7d2feeae8429eb017a8dd863a1f7c" class="color-map">
           
                           <div>
                   <style>
       #_94eeb2c9abde4038ab081211183bea4b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 197, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_94eeb2c9abde4038ab081211183bea4b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_94eeb2c9abde4038ab081211183bea4b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_94eeb2c9abde4038ab081211183bea4b" class="color" data-tooltip="RGBA: 102, 197, 204, 1.0
   HEXA: #66c5ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9cf9dd030d6e4033adf569893179c011 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 207, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9cf9dd030d6e4033adf569893179c011::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9cf9dd030d6e4033adf569893179c011:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9cf9dd030d6e4033adf569893179c011" class="color" data-tooltip="RGBA: 246, 207, 113, 1.0
   HEXA: #f6cf71ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_84d1555b8fc94601a040a4ddb3aec80c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 156, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_84d1555b8fc94601a040a4ddb3aec80c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_84d1555b8fc94601a040a4ddb3aec80c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_84d1555b8fc94601a040a4ddb3aec80c" class="color" data-tooltip="RGBA: 248, 156, 116, 1.0
   HEXA: #f89c74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_60523f06d8634cc49842f5a77fb0cfdf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 176, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60523f06d8634cc49842f5a77fb0cfdf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60523f06d8634cc49842f5a77fb0cfdf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60523f06d8634cc49842f5a77fb0cfdf" class="color" data-tooltip="RGBA: 220, 176, 242, 1.0
   HEXA: #dcb0f2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_44b75a72e8cd457caffb117072480c77 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 197, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_44b75a72e8cd457caffb117072480c77::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_44b75a72e8cd457caffb117072480c77:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_44b75a72e8cd457caffb117072480c77" class="color" data-tooltip="RGBA: 135, 197, 95, 1.0
   HEXA: #87c55fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_076ad920e06f40a5883273e7fb26a85b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 185, 243, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_076ad920e06f40a5883273e7fb26a85b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_076ad920e06f40a5883273e7fb26a85b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_076ad920e06f40a5883273e7fb26a85b" class="color" data-tooltip="RGBA: 158, 185, 243, 1.0
   HEXA: #9eb9f3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d1332c96e44d45edb6dabb8f7789797c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 136, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d1332c96e44d45edb6dabb8f7789797c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d1332c96e44d45edb6dabb8f7789797c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d1332c96e44d45edb6dabb8f7789797c" class="color" data-tooltip="RGBA: 254, 136, 177, 1.0
   HEXA: #fe88b1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ba7638f8e98743458c1d31126d6d1896 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(201, 219, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba7638f8e98743458c1d31126d6d1896::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba7638f8e98743458c1d31126d6d1896:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba7638f8e98743458c1d31126d6d1896" class="color" data-tooltip="RGBA: 201, 219, 116, 1.0
   HEXA: #c9db74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d05c0fac610c4c9fac7ae8a266d08402 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 224, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d05c0fac610c4c9fac7ae8a266d08402::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d05c0fac610c4c9fac7ae8a266d08402:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d05c0fac610c4c9fac7ae8a266d08402" class="color" data-tooltip="RGBA: 139, 224, 164, 1.0
   HEXA: #8be0a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ea5067bc07084e34a49a975633f344e3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 151, 231, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ea5067bc07084e34a49a975633f344e3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ea5067bc07084e34a49a975633f344e3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ea5067bc07084e34a49a975633f344e3" class="color" data-tooltip="RGBA: 180, 151, 231, 1.0
   HEXA: #b497e7ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0047cf7e75ec4eb9b0bdfbb80467bf8d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0047cf7e75ec4eb9b0bdfbb80467bf8d div { flex: 1 1 0; }
           #_0047cf7e75ec4eb9b0bdfbb80467bf8d div.color { width: 100%; height: 100%; }
           #_0047cf7e75ec4eb9b0bdfbb80467bf8d div.cmap { width: 100%; height: auto; }
           #_0047cf7e75ec4eb9b0bdfbb80467bf8d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>prism</strong>
       
       <div id="_0047cf7e75ec4eb9b0bdfbb80467bf8d" class="color-map">
           
                           <div>
                   <style>
       #_c90a00fc28254074aec90ce9c6f858b6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 70, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c90a00fc28254074aec90ce9c6f858b6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c90a00fc28254074aec90ce9c6f858b6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c90a00fc28254074aec90ce9c6f858b6" class="color" data-tooltip="RGBA: 95, 70, 144, 1.0
   HEXA: #5f4690ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4dc7fe8931644b599579c4bb71175d25 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(29, 105, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4dc7fe8931644b599579c4bb71175d25::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4dc7fe8931644b599579c4bb71175d25:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4dc7fe8931644b599579c4bb71175d25" class="color" data-tooltip="RGBA: 29, 105, 150, 1.0
   HEXA: #1d6996ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5226733d1bef48118760effe74289807 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 166, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5226733d1bef48118760effe74289807::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5226733d1bef48118760effe74289807:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5226733d1bef48118760effe74289807" class="color" data-tooltip="RGBA: 56, 166, 165, 1.0
   HEXA: #38a6a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cddc05059cf8468c8b1138a747e9111f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 133, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cddc05059cf8468c8b1138a747e9111f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cddc05059cf8468c8b1138a747e9111f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cddc05059cf8468c8b1138a747e9111f" class="color" data-tooltip="RGBA: 15, 133, 84, 1.0
   HEXA: #0f8554ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5058927201c443cebce3d7d2b55c97e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 175, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5058927201c443cebce3d7d2b55c97e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5058927201c443cebce3d7d2b55c97e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5058927201c443cebce3d7d2b55c97e0" class="color" data-tooltip="RGBA: 115, 175, 72, 1.0
   HEXA: #73af48ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_83f00a5c9c9b426f811aa1ce98bcb5f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 173, 8, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_83f00a5c9c9b426f811aa1ce98bcb5f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_83f00a5c9c9b426f811aa1ce98bcb5f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_83f00a5c9c9b426f811aa1ce98bcb5f6" class="color" data-tooltip="RGBA: 237, 173, 8, 1.0
   HEXA: #edad08ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c161ea1edb304626b6dbe72d177c594b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 124, 5, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c161ea1edb304626b6dbe72d177c594b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c161ea1edb304626b6dbe72d177c594b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c161ea1edb304626b6dbe72d177c594b" class="color" data-tooltip="RGBA: 225, 124, 5, 1.0
   HEXA: #e17c05ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd11a873345d4ffc8c75a4cbb8a42d6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 80, 62, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd11a873345d4ffc8c75a4cbb8a42d6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd11a873345d4ffc8c75a4cbb8a42d6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd11a873345d4ffc8c75a4cbb8a42d6c" class="color" data-tooltip="RGBA: 204, 80, 62, 1.0
   HEXA: #cc503eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cfa5846de4ba45c9acf3438dfab854ae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(148, 52, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cfa5846de4ba45c9acf3438dfab854ae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cfa5846de4ba45c9acf3438dfab854ae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cfa5846de4ba45c9acf3438dfab854ae" class="color" data-tooltip="RGBA: 148, 52, 110, 1.0
   HEXA: #94346eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef61803d674749d6bee64ac0d2760259 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 64, 112, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef61803d674749d6bee64ac0d2760259::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef61803d674749d6bee64ac0d2760259:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef61803d674749d6bee64ac0d2760259" class="color" data-tooltip="RGBA: 111, 64, 112, 1.0
   HEXA: #6f4070ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_e8688890654043ffa056d89a55c7d204 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_e8688890654043ffa056d89a55c7d204 div { flex: 1 1 0; }
           #_e8688890654043ffa056d89a55c7d204 div.color { width: 100%; height: 100%; }
           #_e8688890654043ffa056d89a55c7d204 div.cmap { width: 100%; height: auto; }
           #_e8688890654043ffa056d89a55c7d204 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>safe</strong>
       
       <div id="_e8688890654043ffa056d89a55c7d204" class="color-map">
           
                           <div>
                   <style>
       #_d861a817914a41e5a3b0264903373923 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 204, 238, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d861a817914a41e5a3b0264903373923::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d861a817914a41e5a3b0264903373923:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d861a817914a41e5a3b0264903373923" class="color" data-tooltip="RGBA: 136, 204, 238, 1.0
   HEXA: #88cceeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_637909e75d814015966270f3d224c21c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 102, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_637909e75d814015966270f3d224c21c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_637909e75d814015966270f3d224c21c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_637909e75d814015966270f3d224c21c" class="color" data-tooltip="RGBA: 204, 102, 119, 1.0
   HEXA: #cc6677ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_efe14f97c58d4b859bcabbc8f37da3f0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 204, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_efe14f97c58d4b859bcabbc8f37da3f0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_efe14f97c58d4b859bcabbc8f37da3f0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_efe14f97c58d4b859bcabbc8f37da3f0" class="color" data-tooltip="RGBA: 221, 204, 119, 1.0
   HEXA: #ddcc77ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd6a44af10ee4fada0ac9d97ab2815ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(17, 119, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd6a44af10ee4fada0ac9d97ab2815ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd6a44af10ee4fada0ac9d97ab2815ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd6a44af10ee4fada0ac9d97ab2815ab" class="color" data-tooltip="RGBA: 17, 119, 51, 1.0
   HEXA: #117733ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cad45ea72b5e481fa05264caaa551a25 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 34, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cad45ea72b5e481fa05264caaa551a25::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cad45ea72b5e481fa05264caaa551a25:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cad45ea72b5e481fa05264caaa551a25" class="color" data-tooltip="RGBA: 51, 34, 136, 1.0
   HEXA: #332288ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ce11f68539b8415796cf3f9d7c740808 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(170, 68, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ce11f68539b8415796cf3f9d7c740808::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ce11f68539b8415796cf3f9d7c740808:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ce11f68539b8415796cf3f9d7c740808" class="color" data-tooltip="RGBA: 170, 68, 153, 1.0
   HEXA: #aa4499ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_952f3768c4ba4101acfc942f12eca578 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 170, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_952f3768c4ba4101acfc942f12eca578::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_952f3768c4ba4101acfc942f12eca578:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_952f3768c4ba4101acfc942f12eca578" class="color" data-tooltip="RGBA: 68, 170, 153, 1.0
   HEXA: #44aa99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0f99aaa009ad44eab204e81a5b858ec8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 153, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f99aaa009ad44eab204e81a5b858ec8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f99aaa009ad44eab204e81a5b858ec8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f99aaa009ad44eab204e81a5b858ec8" class="color" data-tooltip="RGBA: 153, 153, 51, 1.0
   HEXA: #999933ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3404a63643264b9c8d4dfb232a50d90a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(136, 34, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3404a63643264b9c8d4dfb232a50d90a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3404a63643264b9c8d4dfb232a50d90a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3404a63643264b9c8d4dfb232a50d90a" class="color" data-tooltip="RGBA: 136, 34, 85, 1.0
   HEXA: #882255ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b9a0e5e42354ca9b8898ae087bb506f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 17, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b9a0e5e42354ca9b8898ae087bb506f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b9a0e5e42354ca9b8898ae087bb506f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b9a0e5e42354ca9b8898ae087bb506f" class="color" data-tooltip="RGBA: 102, 17, 0, 1.0
   HEXA: #661100ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9df998395e8648b6acc2341a1f1df6db {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9df998395e8648b6acc2341a1f1df6db div { flex: 1 1 0; }
           #_9df998395e8648b6acc2341a1f1df6db div.color { width: 100%; height: 100%; }
           #_9df998395e8648b6acc2341a1f1df6db div.cmap { width: 100%; height: auto; }
           #_9df998395e8648b6acc2341a1f1df6db div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>vivid</strong>
       
       <div id="_9df998395e8648b6acc2341a1f1df6db" class="color-map">
           
                           <div>
                   <style>
       #_9f485cd11ce44ceaa8e5b14bada62ed2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 134, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9f485cd11ce44ceaa8e5b14bada62ed2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9f485cd11ce44ceaa8e5b14bada62ed2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9f485cd11ce44ceaa8e5b14bada62ed2" class="color" data-tooltip="RGBA: 229, 134, 6, 1.0
   HEXA: #e58606ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_728cd2d6739e4c779bbb599177ed8b16 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(93, 105, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_728cd2d6739e4c779bbb599177ed8b16::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_728cd2d6739e4c779bbb599177ed8b16:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_728cd2d6739e4c779bbb599177ed8b16" class="color" data-tooltip="RGBA: 93, 105, 177, 1.0
   HEXA: #5d69b1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7224f3c1462744898d5278494ca9adc4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 188, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7224f3c1462744898d5278494ca9adc4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7224f3c1462744898d5278494ca9adc4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7224f3c1462744898d5278494ca9adc4" class="color" data-tooltip="RGBA: 82, 188, 163, 1.0
   HEXA: #52bca3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_300dfc51bf1241f69a2fe56cab89d8a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 201, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_300dfc51bf1241f69a2fe56cab89d8a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_300dfc51bf1241f69a2fe56cab89d8a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_300dfc51bf1241f69a2fe56cab89d8a0" class="color" data-tooltip="RGBA: 153, 201, 69, 1.0
   HEXA: #99c945ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_544638d86d4f427ba93bcf1b5a4ee0a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 97, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_544638d86d4f427ba93bcf1b5a4ee0a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_544638d86d4f427ba93bcf1b5a4ee0a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_544638d86d4f427ba93bcf1b5a4ee0a0" class="color" data-tooltip="RGBA: 204, 97, 176, 1.0
   HEXA: #cc61b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_74a79e59fd134c8dbe1aa26b3ea4f0c7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 121, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_74a79e59fd134c8dbe1aa26b3ea4f0c7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_74a79e59fd134c8dbe1aa26b3ea4f0c7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_74a79e59fd134c8dbe1aa26b3ea4f0c7" class="color" data-tooltip="RGBA: 36, 121, 108, 1.0
   HEXA: #24796cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4006e544305748ed8d00f6c7588d069e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 165, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4006e544305748ed8d00f6c7588d069e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4006e544305748ed8d00f6c7588d069e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4006e544305748ed8d00f6c7588d069e" class="color" data-tooltip="RGBA: 218, 165, 27, 1.0
   HEXA: #daa51bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c16f47808bfa4af3b357a34233f76632 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 138, 196, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c16f47808bfa4af3b357a34233f76632::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c16f47808bfa4af3b357a34233f76632:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c16f47808bfa4af3b357a34233f76632" class="color" data-tooltip="RGBA: 47, 138, 196, 1.0
   HEXA: #2f8ac4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b77ee94aa9c849dc878a6fb0f7b3209e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(118, 78, 159, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b77ee94aa9c849dc878a6fb0f7b3209e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b77ee94aa9c849dc878a6fb0f7b3209e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b77ee94aa9c849dc878a6fb0f7b3209e" class="color" data-tooltip="RGBA: 118, 78, 159, 1.0
   HEXA: #764e9fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0e420f6b2209490e8c45385e843ec216 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 100, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0e420f6b2209490e8c45385e843ec216::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0e420f6b2209490e8c45385e843ec216:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0e420f6b2209490e8c45385e843ec216" class="color" data-tooltip="RGBA: 237, 100, 90, 1.0
   HEXA: #ed645aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_f99b301e4f3a461fb5e29f78296ca721 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_f99b301e4f3a461fb5e29f78296ca721 div { flex: 1 1 0; }
           #_f99b301e4f3a461fb5e29f78296ca721 div.color { width: 100%; height: 100%; }
           #_f99b301e4f3a461fb5e29f78296ca721 div.cmap { width: 100%; height: auto; }
           #_f99b301e4f3a461fb5e29f78296ca721 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>accent</strong>
       
       <div id="_f99b301e4f3a461fb5e29f78296ca721" class="color-map">
           
                           <div>
                   <style>
       #_581e02aacc6643068f488e1a06add726 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 201, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_581e02aacc6643068f488e1a06add726::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_581e02aacc6643068f488e1a06add726:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_581e02aacc6643068f488e1a06add726" class="color" data-tooltip="RGBA: 127, 201, 127, 1.0
   HEXA: #7fc97fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8e5e88293fab46aba836dfbf7cbdba32 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(190, 174, 212, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e5e88293fab46aba836dfbf7cbdba32::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e5e88293fab46aba836dfbf7cbdba32:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e5e88293fab46aba836dfbf7cbdba32" class="color" data-tooltip="RGBA: 190, 174, 212, 1.0
   HEXA: #beaed4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_48d03a76b673434ead9956e99e00075c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 192, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_48d03a76b673434ead9956e99e00075c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_48d03a76b673434ead9956e99e00075c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_48d03a76b673434ead9956e99e00075c" class="color" data-tooltip="RGBA: 253, 192, 134, 1.0
   HEXA: #fdc086ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50cbb18960804436aaba7300c5e3f254 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50cbb18960804436aaba7300c5e3f254::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50cbb18960804436aaba7300c5e3f254:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50cbb18960804436aaba7300c5e3f254" class="color" data-tooltip="RGBA: 255, 255, 153, 1.0
   HEXA: #ffff99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7c6b7da36c3d4c78a33506308eba1db0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(56, 108, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7c6b7da36c3d4c78a33506308eba1db0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7c6b7da36c3d4c78a33506308eba1db0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7c6b7da36c3d4c78a33506308eba1db0" class="color" data-tooltip="RGBA: 56, 108, 176, 1.0
   HEXA: #386cb0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_df633e6faf6845c1be755b65d5450101 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 2, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_df633e6faf6845c1be755b65d5450101::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_df633e6faf6845c1be755b65d5450101:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_df633e6faf6845c1be755b65d5450101" class="color" data-tooltip="RGBA: 240, 2, 127, 1.0
   HEXA: #f0027fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c9b6b8d371f245a58f53e72cbc3d4409 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 91, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9b6b8d371f245a58f53e72cbc3d4409::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9b6b8d371f245a58f53e72cbc3d4409:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9b6b8d371f245a58f53e72cbc3d4409" class="color" data-tooltip="RGBA: 191, 91, 23, 1.0
   HEXA: #bf5b17ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb2e94352b144ef8a48b425a0272ee97 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb2e94352b144ef8a48b425a0272ee97::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb2e94352b144ef8a48b425a0272ee97:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb2e94352b144ef8a48b425a0272ee97" class="color" data-tooltip="RGBA: 102, 102, 102, 1.0
   HEXA: #666666ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9b46ad094b98426cb216b5582a3dc551 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9b46ad094b98426cb216b5582a3dc551 div { flex: 1 1 0; }
           #_9b46ad094b98426cb216b5582a3dc551 div.color { width: 100%; height: 100%; }
           #_9b46ad094b98426cb216b5582a3dc551 div.cmap { width: 100%; height: auto; }
           #_9b46ad094b98426cb216b5582a3dc551 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>dark2</strong>
       
       <div id="_9b46ad094b98426cb216b5582a3dc551" class="color-map">
           
                           <div>
                   <style>
       #_5487748328e94edfaa6a2bc2a088e095 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 158, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5487748328e94edfaa6a2bc2a088e095::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5487748328e94edfaa6a2bc2a088e095:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5487748328e94edfaa6a2bc2a088e095" class="color" data-tooltip="RGBA: 27, 158, 119, 1.0
   HEXA: #1b9e77ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_260b96bd5ded4d19859584e64b7ffeb0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 95, 2, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_260b96bd5ded4d19859584e64b7ffeb0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_260b96bd5ded4d19859584e64b7ffeb0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_260b96bd5ded4d19859584e64b7ffeb0" class="color" data-tooltip="RGBA: 217, 95, 2, 1.0
   HEXA: #d95f02ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aef5c1f23b7c4b828400bebbc393607c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(117, 112, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aef5c1f23b7c4b828400bebbc393607c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aef5c1f23b7c4b828400bebbc393607c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aef5c1f23b7c4b828400bebbc393607c" class="color" data-tooltip="RGBA: 117, 112, 179, 1.0
   HEXA: #7570b3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b457f046d3a474c9e17ddcdff6bb6ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 41, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b457f046d3a474c9e17ddcdff6bb6ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b457f046d3a474c9e17ddcdff6bb6ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b457f046d3a474c9e17ddcdff6bb6ab" class="color" data-tooltip="RGBA: 231, 41, 138, 1.0
   HEXA: #e7298aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e5c6dbd0e3b045e3bd0773865e48c8e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 166, 30, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e5c6dbd0e3b045e3bd0773865e48c8e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e5c6dbd0e3b045e3bd0773865e48c8e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e5c6dbd0e3b045e3bd0773865e48c8e8" class="color" data-tooltip="RGBA: 102, 166, 30, 1.0
   HEXA: #66a61eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_03b8870c763144ad8b692c82ade514b8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 171, 2, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_03b8870c763144ad8b692c82ade514b8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_03b8870c763144ad8b692c82ade514b8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_03b8870c763144ad8b692c82ade514b8" class="color" data-tooltip="RGBA: 230, 171, 2, 1.0
   HEXA: #e6ab02ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1a76ac4ae36041a49d06feef757b6b5d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 118, 29, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1a76ac4ae36041a49d06feef757b6b5d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1a76ac4ae36041a49d06feef757b6b5d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1a76ac4ae36041a49d06feef757b6b5d" class="color" data-tooltip="RGBA: 166, 118, 29, 1.0
   HEXA: #a6761dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_64b5c89dc6124684afd2b77bda27e3b0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 102, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_64b5c89dc6124684afd2b77bda27e3b0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_64b5c89dc6124684afd2b77bda27e3b0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_64b5c89dc6124684afd2b77bda27e3b0" class="color" data-tooltip="RGBA: 102, 102, 102, 1.0
   HEXA: #666666ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5fe205f19a614ffcb507502162835d9f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5fe205f19a614ffcb507502162835d9f div { flex: 1 1 0; }
           #_5fe205f19a614ffcb507502162835d9f div.color { width: 100%; height: 100%; }
           #_5fe205f19a614ffcb507502162835d9f div.cmap { width: 100%; height: auto; }
           #_5fe205f19a614ffcb507502162835d9f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>paired</strong>
       
       <div id="_5fe205f19a614ffcb507502162835d9f" class="color-map">
           
                           <div>
                   <style>
       #_7b6f0df3c6bc45e797ad5e65a02bec3d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 206, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7b6f0df3c6bc45e797ad5e65a02bec3d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7b6f0df3c6bc45e797ad5e65a02bec3d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7b6f0df3c6bc45e797ad5e65a02bec3d" class="color" data-tooltip="RGBA: 166, 206, 227, 1.0
   HEXA: #a6cee3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4484783247d84e92830f2616f8e92af5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 120, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4484783247d84e92830f2616f8e92af5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4484783247d84e92830f2616f8e92af5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4484783247d84e92830f2616f8e92af5" class="color" data-tooltip="RGBA: 31, 120, 180, 1.0
   HEXA: #1f78b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_93258ad6f1ab497eb5f485b8dfde4564 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(178, 223, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_93258ad6f1ab497eb5f485b8dfde4564::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_93258ad6f1ab497eb5f485b8dfde4564:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_93258ad6f1ab497eb5f485b8dfde4564" class="color" data-tooltip="RGBA: 178, 223, 138, 1.0
   HEXA: #b2df8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_741305e227484b9aa29438efbad36154 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 160, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_741305e227484b9aa29438efbad36154::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_741305e227484b9aa29438efbad36154:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_741305e227484b9aa29438efbad36154" class="color" data-tooltip="RGBA: 51, 160, 44, 1.0
   HEXA: #33a02cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9ee5e9de72d4a94b31408f8ad0cb7e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 154, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9ee5e9de72d4a94b31408f8ad0cb7e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9ee5e9de72d4a94b31408f8ad0cb7e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9ee5e9de72d4a94b31408f8ad0cb7e8" class="color" data-tooltip="RGBA: 251, 154, 153, 1.0
   HEXA: #fb9a99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d5af72ea2ffb42cab2ac99fb100ca4c3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 26, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d5af72ea2ffb42cab2ac99fb100ca4c3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d5af72ea2ffb42cab2ac99fb100ca4c3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d5af72ea2ffb42cab2ac99fb100ca4c3" class="color" data-tooltip="RGBA: 227, 26, 28, 1.0
   HEXA: #e31a1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_03c89175f5bc44f395b16cd427283ff4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 191, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_03c89175f5bc44f395b16cd427283ff4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_03c89175f5bc44f395b16cd427283ff4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_03c89175f5bc44f395b16cd427283ff4" class="color" data-tooltip="RGBA: 253, 191, 111, 1.0
   HEXA: #fdbf6fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c1c89b53ab1e4b9ba85f7414168c9f1e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 127, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c1c89b53ab1e4b9ba85f7414168c9f1e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c1c89b53ab1e4b9ba85f7414168c9f1e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c1c89b53ab1e4b9ba85f7414168c9f1e" class="color" data-tooltip="RGBA: 255, 127, 0, 1.0
   HEXA: #ff7f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e6d6b2c5971347da9df5f446b6bd51a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 178, 214, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e6d6b2c5971347da9df5f446b6bd51a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e6d6b2c5971347da9df5f446b6bd51a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e6d6b2c5971347da9df5f446b6bd51a1" class="color" data-tooltip="RGBA: 202, 178, 214, 1.0
   HEXA: #cab2d6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa1b3adee4ae430a940709b31990d4e7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(106, 61, 154, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa1b3adee4ae430a940709b31990d4e7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa1b3adee4ae430a940709b31990d4e7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa1b3adee4ae430a940709b31990d4e7" class="color" data-tooltip="RGBA: 106, 61, 154, 1.0
   HEXA: #6a3d9aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2b59b0846db64d56a8183b391ea0a618 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2b59b0846db64d56a8183b391ea0a618::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2b59b0846db64d56a8183b391ea0a618:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2b59b0846db64d56a8183b391ea0a618" class="color" data-tooltip="RGBA: 255, 255, 153, 1.0
   HEXA: #ffff99ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c68e11af8ba14d5aafa383fc57521076 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 89, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c68e11af8ba14d5aafa383fc57521076::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c68e11af8ba14d5aafa383fc57521076:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c68e11af8ba14d5aafa383fc57521076" class="color" data-tooltip="RGBA: 177, 89, 40, 1.0
   HEXA: #b15928ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_088f161e4cc34410868f3cc13d11fcad {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_088f161e4cc34410868f3cc13d11fcad div { flex: 1 1 0; }
           #_088f161e4cc34410868f3cc13d11fcad div.color { width: 100%; height: 100%; }
           #_088f161e4cc34410868f3cc13d11fcad div.cmap { width: 100%; height: auto; }
           #_088f161e4cc34410868f3cc13d11fcad div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>pastel1</strong>
       
       <div id="_088f161e4cc34410868f3cc13d11fcad" class="color-map">
           
                           <div>
                   <style>
       #_3dff90a11e2144c0bf30c4f8ba58c50a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 180, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3dff90a11e2144c0bf30c4f8ba58c50a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3dff90a11e2144c0bf30c4f8ba58c50a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3dff90a11e2144c0bf30c4f8ba58c50a" class="color" data-tooltip="RGBA: 251, 180, 174, 1.0
   HEXA: #fbb4aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_93482e00233a4446b02521fe8b667f07 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 205, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_93482e00233a4446b02521fe8b667f07::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_93482e00233a4446b02521fe8b667f07:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_93482e00233a4446b02521fe8b667f07" class="color" data-tooltip="RGBA: 179, 205, 227, 1.0
   HEXA: #b3cde3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb2302f493e7454d96992491bf466b89 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 235, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb2302f493e7454d96992491bf466b89::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb2302f493e7454d96992491bf466b89:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb2302f493e7454d96992491bf466b89" class="color" data-tooltip="RGBA: 204, 235, 197, 1.0
   HEXA: #ccebc5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_66ffe4c9396f4f9bb8fe8fb2447e79d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 203, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_66ffe4c9396f4f9bb8fe8fb2447e79d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_66ffe4c9396f4f9bb8fe8fb2447e79d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_66ffe4c9396f4f9bb8fe8fb2447e79d1" class="color" data-tooltip="RGBA: 222, 203, 228, 1.0
   HEXA: #decbe4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8e685fdb91d348afbfc47e443db83a0a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 217, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8e685fdb91d348afbfc47e443db83a0a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8e685fdb91d348afbfc47e443db83a0a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8e685fdb91d348afbfc47e443db83a0a" class="color" data-tooltip="RGBA: 254, 217, 166, 1.0
   HEXA: #fed9a6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb3b3fcf9f7d4627bfb71d9618b17a7e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb3b3fcf9f7d4627bfb71d9618b17a7e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb3b3fcf9f7d4627bfb71d9618b17a7e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb3b3fcf9f7d4627bfb71d9618b17a7e" class="color" data-tooltip="RGBA: 255, 255, 204, 1.0
   HEXA: #ffffccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e0b9c8edc89e46afa3da3b5e41461b46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 216, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e0b9c8edc89e46afa3da3b5e41461b46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e0b9c8edc89e46afa3da3b5e41461b46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e0b9c8edc89e46afa3da3b5e41461b46" class="color" data-tooltip="RGBA: 229, 216, 189, 1.0
   HEXA: #e5d8bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_02a54554b320493a988fc68b8e5d32da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 218, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_02a54554b320493a988fc68b8e5d32da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_02a54554b320493a988fc68b8e5d32da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_02a54554b320493a988fc68b8e5d32da" class="color" data-tooltip="RGBA: 253, 218, 236, 1.0
   HEXA: #fddaecff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa44c7fff6894fe192470a0f237313f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 242, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa44c7fff6894fe192470a0f237313f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa44c7fff6894fe192470a0f237313f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa44c7fff6894fe192470a0f237313f6" class="color" data-tooltip="RGBA: 242, 242, 242, 1.0
   HEXA: #f2f2f2ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_201e123e6b154191a98324324fad9404 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_201e123e6b154191a98324324fad9404 div { flex: 1 1 0; }
           #_201e123e6b154191a98324324fad9404 div.color { width: 100%; height: 100%; }
           #_201e123e6b154191a98324324fad9404 div.cmap { width: 100%; height: auto; }
           #_201e123e6b154191a98324324fad9404 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>pastel2</strong>
       
       <div id="_201e123e6b154191a98324324fad9404" class="color-map">
           
                           <div>
                   <style>
       #_38e47bf8b75f48e3be72cd09e8919125 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 226, 205, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_38e47bf8b75f48e3be72cd09e8919125::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_38e47bf8b75f48e3be72cd09e8919125:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_38e47bf8b75f48e3be72cd09e8919125" class="color" data-tooltip="RGBA: 179, 226, 205, 1.0
   HEXA: #b3e2cdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0cb3aa5bb8a34bce9036a9589e5a690c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 205, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0cb3aa5bb8a34bce9036a9589e5a690c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0cb3aa5bb8a34bce9036a9589e5a690c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0cb3aa5bb8a34bce9036a9589e5a690c" class="color" data-tooltip="RGBA: 253, 205, 172, 1.0
   HEXA: #fdcdacff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2faac895091e456bbecc4e3050ca0d6b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 213, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2faac895091e456bbecc4e3050ca0d6b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2faac895091e456bbecc4e3050ca0d6b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2faac895091e456bbecc4e3050ca0d6b" class="color" data-tooltip="RGBA: 203, 213, 232, 1.0
   HEXA: #cbd5e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1692ecd831ef447cb4d406031745fd6e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 202, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1692ecd831ef447cb4d406031745fd6e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1692ecd831ef447cb4d406031745fd6e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1692ecd831ef447cb4d406031745fd6e" class="color" data-tooltip="RGBA: 244, 202, 228, 1.0
   HEXA: #f4cae4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a53c2d449a394040ab32d5bdf0e17814 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 245, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a53c2d449a394040ab32d5bdf0e17814::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a53c2d449a394040ab32d5bdf0e17814:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a53c2d449a394040ab32d5bdf0e17814" class="color" data-tooltip="RGBA: 230, 245, 201, 1.0
   HEXA: #e6f5c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_327e3e89c34d4257a2719bd1a98fef16 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 242, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_327e3e89c34d4257a2719bd1a98fef16::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_327e3e89c34d4257a2719bd1a98fef16:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_327e3e89c34d4257a2719bd1a98fef16" class="color" data-tooltip="RGBA: 255, 242, 174, 1.0
   HEXA: #fff2aeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_973f096ddc174efeaf3ae41dfeb1abdd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 226, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_973f096ddc174efeaf3ae41dfeb1abdd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_973f096ddc174efeaf3ae41dfeb1abdd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_973f096ddc174efeaf3ae41dfeb1abdd" class="color" data-tooltip="RGBA: 241, 226, 204, 1.0
   HEXA: #f1e2ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_265074bf5b0c46bbbf79916ff0c6ce25 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 204, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_265074bf5b0c46bbbf79916ff0c6ce25::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_265074bf5b0c46bbbf79916ff0c6ce25:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_265074bf5b0c46bbbf79916ff0c6ce25" class="color" data-tooltip="RGBA: 204, 204, 204, 1.0
   HEXA: #ccccccff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8838b6a2475d46f6b0b450b8cae11b7b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8838b6a2475d46f6b0b450b8cae11b7b div { flex: 1 1 0; }
           #_8838b6a2475d46f6b0b450b8cae11b7b div.color { width: 100%; height: 100%; }
           #_8838b6a2475d46f6b0b450b8cae11b7b div.cmap { width: 100%; height: auto; }
           #_8838b6a2475d46f6b0b450b8cae11b7b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>set1</strong>
       
       <div id="_8838b6a2475d46f6b0b450b8cae11b7b" class="color-map">
           
                           <div>
                   <style>
       #_134e7427ae134ddab7cd62b5ecbe0831 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 26, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_134e7427ae134ddab7cd62b5ecbe0831::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_134e7427ae134ddab7cd62b5ecbe0831:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_134e7427ae134ddab7cd62b5ecbe0831" class="color" data-tooltip="RGBA: 228, 26, 28, 1.0
   HEXA: #e41a1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_70d0e947f55a4f1f8c76e30940ea22cd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(55, 126, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_70d0e947f55a4f1f8c76e30940ea22cd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_70d0e947f55a4f1f8c76e30940ea22cd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_70d0e947f55a4f1f8c76e30940ea22cd" class="color" data-tooltip="RGBA: 55, 126, 184, 1.0
   HEXA: #377eb8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_60b240b08c7746d9b2b9ee638876b28f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 175, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60b240b08c7746d9b2b9ee638876b28f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60b240b08c7746d9b2b9ee638876b28f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60b240b08c7746d9b2b9ee638876b28f" class="color" data-tooltip="RGBA: 77, 175, 74, 1.0
   HEXA: #4daf4aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_11220e3d9ab14940af33fd35ada4ecd5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 78, 163, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_11220e3d9ab14940af33fd35ada4ecd5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_11220e3d9ab14940af33fd35ada4ecd5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_11220e3d9ab14940af33fd35ada4ecd5" class="color" data-tooltip="RGBA: 152, 78, 163, 1.0
   HEXA: #984ea3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2c82bfe94bc240378c89028c8409bfea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 127, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2c82bfe94bc240378c89028c8409bfea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2c82bfe94bc240378c89028c8409bfea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2c82bfe94bc240378c89028c8409bfea" class="color" data-tooltip="RGBA: 255, 127, 0, 1.0
   HEXA: #ff7f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_718519dc47d9492db97f7a93edddcc02 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_718519dc47d9492db97f7a93edddcc02::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_718519dc47d9492db97f7a93edddcc02:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_718519dc47d9492db97f7a93edddcc02" class="color" data-tooltip="RGBA: 255, 255, 51, 1.0
   HEXA: #ffff33ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f612543455c245a2801d349e8b1c4657 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 86, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f612543455c245a2801d349e8b1c4657::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f612543455c245a2801d349e8b1c4657:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f612543455c245a2801d349e8b1c4657" class="color" data-tooltip="RGBA: 166, 86, 40, 1.0
   HEXA: #a65628ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_536f64fae1954b80b792e2e293022a20 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 129, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_536f64fae1954b80b792e2e293022a20::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_536f64fae1954b80b792e2e293022a20:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_536f64fae1954b80b792e2e293022a20" class="color" data-tooltip="RGBA: 247, 129, 191, 1.0
   HEXA: #f781bfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_12a3e4a0cb1e44478f4a3357022d1ef6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 153, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_12a3e4a0cb1e44478f4a3357022d1ef6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_12a3e4a0cb1e44478f4a3357022d1ef6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_12a3e4a0cb1e44478f4a3357022d1ef6" class="color" data-tooltip="RGBA: 153, 153, 153, 1.0
   HEXA: #999999ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_17494708b97b40788919b8f0c18a52e9 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_17494708b97b40788919b8f0c18a52e9 div { flex: 1 1 0; }
           #_17494708b97b40788919b8f0c18a52e9 div.color { width: 100%; height: 100%; }
           #_17494708b97b40788919b8f0c18a52e9 div.cmap { width: 100%; height: auto; }
           #_17494708b97b40788919b8f0c18a52e9 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>set2</strong>
       
       <div id="_17494708b97b40788919b8f0c18a52e9" class="color-map">
           
                           <div>
                   <style>
       #_7d512f955f014d008a37585fe1f35845 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 194, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d512f955f014d008a37585fe1f35845::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d512f955f014d008a37585fe1f35845:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d512f955f014d008a37585fe1f35845" class="color" data-tooltip="RGBA: 102, 194, 165, 1.0
   HEXA: #66c2a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b3d10d4c69fa4d38a72a57f403e1fe4c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 141, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b3d10d4c69fa4d38a72a57f403e1fe4c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b3d10d4c69fa4d38a72a57f403e1fe4c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b3d10d4c69fa4d38a72a57f403e1fe4c" class="color" data-tooltip="RGBA: 252, 141, 98, 1.0
   HEXA: #fc8d62ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3100472621184c9a84e12f253b454b40 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 160, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3100472621184c9a84e12f253b454b40::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3100472621184c9a84e12f253b454b40:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3100472621184c9a84e12f253b454b40" class="color" data-tooltip="RGBA: 141, 160, 203, 1.0
   HEXA: #8da0cbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fc22417d86af48e688fc81e71e24783b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 138, 195, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fc22417d86af48e688fc81e71e24783b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fc22417d86af48e688fc81e71e24783b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fc22417d86af48e688fc81e71e24783b" class="color" data-tooltip="RGBA: 231, 138, 195, 1.0
   HEXA: #e78ac3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e718b72f495436ca8a527844bacca75 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 216, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e718b72f495436ca8a527844bacca75::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e718b72f495436ca8a527844bacca75:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e718b72f495436ca8a527844bacca75" class="color" data-tooltip="RGBA: 166, 216, 84, 1.0
   HEXA: #a6d854ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5308335542e442af95fd15f5497ec481 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 217, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5308335542e442af95fd15f5497ec481::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5308335542e442af95fd15f5497ec481:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5308335542e442af95fd15f5497ec481" class="color" data-tooltip="RGBA: 255, 217, 47, 1.0
   HEXA: #ffd92fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b9acb6339a504bef8678e4324c585571 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 196, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b9acb6339a504bef8678e4324c585571::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b9acb6339a504bef8678e4324c585571:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b9acb6339a504bef8678e4324c585571" class="color" data-tooltip="RGBA: 229, 196, 148, 1.0
   HEXA: #e5c494ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86c39e88bd9b4fff93e1ccec97215e5a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 179, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86c39e88bd9b4fff93e1ccec97215e5a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86c39e88bd9b4fff93e1ccec97215e5a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86c39e88bd9b4fff93e1ccec97215e5a" class="color" data-tooltip="RGBA: 179, 179, 179, 1.0
   HEXA: #b3b3b3ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4e36ed4e6cdd48748fd8e80bd944691d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4e36ed4e6cdd48748fd8e80bd944691d div { flex: 1 1 0; }
           #_4e36ed4e6cdd48748fd8e80bd944691d div.color { width: 100%; height: 100%; }
           #_4e36ed4e6cdd48748fd8e80bd944691d div.cmap { width: 100%; height: auto; }
           #_4e36ed4e6cdd48748fd8e80bd944691d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>set3</strong>
       
       <div id="_4e36ed4e6cdd48748fd8e80bd944691d" class="color-map">
           
                           <div>
                   <style>
       #_504209602ca24f12b6d991341a2d0beb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(141, 211, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_504209602ca24f12b6d991341a2d0beb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_504209602ca24f12b6d991341a2d0beb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_504209602ca24f12b6d991341a2d0beb" class="color" data-tooltip="RGBA: 141, 211, 199, 1.0
   HEXA: #8dd3c7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_461bfcd4d3d64e72a61dc08ff8bd4128 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 179, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_461bfcd4d3d64e72a61dc08ff8bd4128::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_461bfcd4d3d64e72a61dc08ff8bd4128:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_461bfcd4d3d64e72a61dc08ff8bd4128" class="color" data-tooltip="RGBA: 255, 255, 179, 1.0
   HEXA: #ffffb3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7a07c2afc6524c589ff305cdc508245d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(190, 186, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7a07c2afc6524c589ff305cdc508245d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7a07c2afc6524c589ff305cdc508245d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7a07c2afc6524c589ff305cdc508245d" class="color" data-tooltip="RGBA: 190, 186, 218, 1.0
   HEXA: #bebadaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_75179175f6d84afd8fbeca2cb42068e3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 128, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_75179175f6d84afd8fbeca2cb42068e3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_75179175f6d84afd8fbeca2cb42068e3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_75179175f6d84afd8fbeca2cb42068e3" class="color" data-tooltip="RGBA: 251, 128, 114, 1.0
   HEXA: #fb8072ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e75808dcd5d0418db2d910803a249322 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 177, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e75808dcd5d0418db2d910803a249322::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e75808dcd5d0418db2d910803a249322:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e75808dcd5d0418db2d910803a249322" class="color" data-tooltip="RGBA: 128, 177, 211, 1.0
   HEXA: #80b1d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a72eca9ed8094c7185d42e8f8c4cd717 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 180, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a72eca9ed8094c7185d42e8f8c4cd717::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a72eca9ed8094c7185d42e8f8c4cd717:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a72eca9ed8094c7185d42e8f8c4cd717" class="color" data-tooltip="RGBA: 253, 180, 98, 1.0
   HEXA: #fdb462ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3a4a9564e2e94ca7aec71d2991192127 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(179, 222, 105, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3a4a9564e2e94ca7aec71d2991192127::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3a4a9564e2e94ca7aec71d2991192127:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3a4a9564e2e94ca7aec71d2991192127" class="color" data-tooltip="RGBA: 179, 222, 105, 1.0
   HEXA: #b3de69ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_65045591416e42b09ad386f1fed282ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 205, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_65045591416e42b09ad386f1fed282ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_65045591416e42b09ad386f1fed282ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_65045591416e42b09ad386f1fed282ac" class="color" data-tooltip="RGBA: 252, 205, 229, 1.0
   HEXA: #fccde5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c900be092e3e4b5f985825be7a69338c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 217, 217, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c900be092e3e4b5f985825be7a69338c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c900be092e3e4b5f985825be7a69338c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c900be092e3e4b5f985825be7a69338c" class="color" data-tooltip="RGBA: 217, 217, 217, 1.0
   HEXA: #d9d9d9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6c96bd67a7a040c1950e7a9f0d00f129 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 128, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6c96bd67a7a040c1950e7a9f0d00f129::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6c96bd67a7a040c1950e7a9f0d00f129:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6c96bd67a7a040c1950e7a9f0d00f129" class="color" data-tooltip="RGBA: 188, 128, 189, 1.0
   HEXA: #bc80bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3508d36995d94c59a6d656f620629538 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 235, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3508d36995d94c59a6d656f620629538::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3508d36995d94c59a6d656f620629538:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3508d36995d94c59a6d656f620629538" class="color" data-tooltip="RGBA: 204, 235, 197, 1.0
   HEXA: #ccebc5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_55b5bb72c6b8480d9763228cc50011d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 237, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_55b5bb72c6b8480d9763228cc50011d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_55b5bb72c6b8480d9763228cc50011d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_55b5bb72c6b8480d9763228cc50011d3" class="color" data-tooltip="RGBA: 255, 237, 111, 1.0
   HEXA: #ffed6fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
   </div>


|


----


Special
-------

.. raw:: html


   <div id="_d31f086b1a964de5970997f8d5e2d279" class="color-swatch">
       <style>
           #_d31f086b1a964de5970997f8d5e2d279 {
               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%);
           }
           #_d31f086b1a964de5970997f8d5e2d279 div {
               width: 100%;
           }
           #_d31f086b1a964de5970997f8d5e2d279 > div.gradient {
               width: 100%;
               height: min(4rem, 100%);
               display: grid;
               gap: 0.2rem;
               grid-template-rows: 1rem auto;
           }
           #_d31f086b1a964de5970997f8d5e2d279 .color {
               height: minmax(1.5rem, 100%);
           }
           #_d31f086b1a964de5970997f8d5e2d279 > div.gradient > strong {
               margin: 0;
               padding: 0;
           }
           #_d31f086b1a964de5970997f8d5e2d279 img {height: 100%;}
       </style>
       
           <div class="gradient">
       <style>
           #_8e4315beaf1e496cb888bb858553f3d0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8e4315beaf1e496cb888bb858553f3d0 div { flex: 1 1 0; }
           #_8e4315beaf1e496cb888bb858553f3d0 div.color { width: 100%; height: 100%; }
           #_8e4315beaf1e496cb888bb858553f3d0 div.cmap { width: 100%; height: auto; }
           #_8e4315beaf1e496cb888bb858553f3d0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>classic</strong>
       
       <div id="_8e4315beaf1e496cb888bb858553f3d0" class="color-map">
           
                           <div>
                   <style>
       #_b1ab999c9d88401a870ddcdc4a59c6a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b1ab999c9d88401a870ddcdc4a59c6a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b1ab999c9d88401a870ddcdc4a59c6a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b1ab999c9d88401a870ddcdc4a59c6a1" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_28541a90030e414da90bcd7ed177369c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(22, 10, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_28541a90030e414da90bcd7ed177369c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_28541a90030e414da90bcd7ed177369c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_28541a90030e414da90bcd7ed177369c" class="color" data-tooltip="RGBA: 22, 10, 34, 1.0
   HEXA: #160a22ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0fa9ded4f6ff446782fca4d05d89f65e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(24, 32, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0fa9ded4f6ff446782fca4d05d89f65e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0fa9ded4f6ff446782fca4d05d89f65e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0fa9ded4f6ff446782fca4d05d89f65e" class="color" data-tooltip="RGBA: 24, 32, 68, 1.0
   HEXA: #182044ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5023295ac27141eaa484acc21ec06ea6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 62, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5023295ac27141eaa484acc21ec06ea6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5023295ac27141eaa484acc21ec06ea6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5023295ac27141eaa484acc21ec06ea6" class="color" data-tooltip="RGBA: 16, 62, 83, 1.0
   HEXA: #103e53ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cccd8d1907ae498797272a678c8a5003 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(14, 94, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cccd8d1907ae498797272a678c8a5003::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cccd8d1907ae498797272a678c8a5003:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cccd8d1907ae498797272a678c8a5003" class="color" data-tooltip="RGBA: 14, 94, 74, 1.0
   HEXA: #0e5e4aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_511176e9401c49b0854dd0e452cdd075 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 116, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_511176e9401c49b0854dd0e452cdd075::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_511176e9401c49b0854dd0e452cdd075:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_511176e9401c49b0854dd0e452cdd075" class="color" data-tooltip="RGBA: 35, 116, 51, 1.0
   HEXA: #237433ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd55656711694f13a9c267cdd21b3ab9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(80, 125, 35, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd55656711694f13a9c267cdd21b3ab9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd55656711694f13a9c267cdd21b3ab9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd55656711694f13a9c267cdd21b3ab9" class="color" data-tooltip="RGBA: 80, 125, 35, 1.0
   HEXA: #507d23ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f5ac6ef305a14bbfb524d8421be972e8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(138, 122, 45, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f5ac6ef305a14bbfb524d8421be972e8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f5ac6ef305a14bbfb524d8421be972e8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f5ac6ef305a14bbfb524d8421be972e8" class="color" data-tooltip="RGBA: 138, 122, 45, 1.0
   HEXA: #8a7a2dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4f35407d5304aea87e157762ae9823e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(190, 117, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4f35407d5304aea87e157762ae9823e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4f35407d5304aea87e157762ae9823e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4f35407d5304aea87e157762ae9823e" class="color" data-tooltip="RGBA: 190, 117, 85, 1.0
   HEXA: #be7555ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fb5fd4a73aa74e2ebcd49d714e3b29c9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 121, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fb5fd4a73aa74e2ebcd49d714e3b29c9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fb5fd4a73aa74e2ebcd49d714e3b29c9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fb5fd4a73aa74e2ebcd49d714e3b29c9" class="color" data-tooltip="RGBA: 218, 121, 145, 1.0
   HEXA: #da7991ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_72c5f85aa7624322a97d37551254c4bb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 138, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_72c5f85aa7624322a97d37551254c4bb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_72c5f85aa7624322a97d37551254c4bb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_72c5f85aa7624322a97d37551254c4bb" class="color" data-tooltip="RGBA: 219, 138, 203, 1.0
   HEXA: #db8acbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fbaae678aca549709f438455a27f9dd8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 167, 240, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fbaae678aca549709f438455a27f9dd8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fbaae678aca549709f438455a27f9dd8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fbaae678aca549709f438455a27f9dd8" class="color" data-tooltip="RGBA: 204, 167, 240, 1.0
   HEXA: #cca7f0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_45492abafcc64dc8b8af29fbac43fd4a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 201, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_45492abafcc64dc8b8af29fbac43fd4a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_45492abafcc64dc8b8af29fbac43fd4a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_45492abafcc64dc8b8af29fbac43fd4a" class="color" data-tooltip="RGBA: 191, 201, 251, 1.0
   HEXA: #bfc9fbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8314f81081984f10ad71b3e4ef146e6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 229, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8314f81081984f10ad71b3e4ef146e6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8314f81081984f10ad71b3e4ef146e6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8314f81081984f10ad71b3e4ef146e6c" class="color" data-tooltip="RGBA: 195, 229, 244, 1.0
   HEXA: #c3e5f4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3a5d914cd4fc497ebedb086bcc1c69c6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 246, 239, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3a5d914cd4fc497ebedb086bcc1c69c6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3a5d914cd4fc497ebedb086bcc1c69c6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3a5d914cd4fc497ebedb086bcc1c69c6" class="color" data-tooltip="RGBA: 220, 246, 239, 1.0
   HEXA: #dcf6efff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e18f0d6fad4e4ee6ac87751834115625 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e18f0d6fad4e4ee6ac87751834115625::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e18f0d6fad4e4ee6ac87751834115625:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e18f0d6fad4e4ee6ac87751834115625" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ece21fca10b04b668f2fa4f87cf92f00 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ece21fca10b04b668f2fa4f87cf92f00 div { flex: 1 1 0; }
           #_ece21fca10b04b668f2fa4f87cf92f00 div.color { width: 100%; height: 100%; }
           #_ece21fca10b04b668f2fa4f87cf92f00 div.cmap { width: 100%; height: auto; }
           #_ece21fca10b04b668f2fa4f87cf92f00 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>perceptual_rainbow</strong>
       
       <div id="_ece21fca10b04b668f2fa4f87cf92f00" class="color-map">
           
                           <div>
                   <style>
       #_b418304d16d3404d8359fa5d4db42c43 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 59, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b418304d16d3404d8359fa5d4db42c43::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b418304d16d3404d8359fa5d4db42c43:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b418304d16d3404d8359fa5d4db42c43" class="color" data-tooltip="RGBA: 135, 59, 97, 1.0
   HEXA: #873b61ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f516da8af7684fd69d19b258aa02ca86 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(143, 64, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f516da8af7684fd69d19b258aa02ca86::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f516da8af7684fd69d19b258aa02ca86:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f516da8af7684fd69d19b258aa02ca86" class="color" data-tooltip="RGBA: 143, 64, 127, 1.0
   HEXA: #8f407fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef15411821e44fc082b0e2b627d06889 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(143, 72, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef15411821e44fc082b0e2b627d06889::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef15411821e44fc082b0e2b627d06889:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef15411821e44fc082b0e2b627d06889" class="color" data-tooltip="RGBA: 143, 72, 157, 1.0
   HEXA: #8f489dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_495727b8dd4e4aef82c7bdd011fc3b3f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 85, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_495727b8dd4e4aef82c7bdd011fc3b3f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_495727b8dd4e4aef82c7bdd011fc3b3f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_495727b8dd4e4aef82c7bdd011fc3b3f" class="color" data-tooltip="RGBA: 135, 85, 185, 1.0
   HEXA: #8755b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb40f17c456c42218ad37cbe10a212aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 102, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb40f17c456c42218ad37cbe10a212aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb40f17c456c42218ad37cbe10a212aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb40f17c456c42218ad37cbe10a212aa" class="color" data-tooltip="RGBA: 121, 102, 207, 1.0
   HEXA: #7966cfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d0559365717b4bc3b0d328777e092f18 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 123, 220, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d0559365717b4bc3b0d328777e092f18::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d0559365717b4bc3b0d328777e092f18:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d0559365717b4bc3b0d328777e092f18" class="color" data-tooltip="RGBA: 103, 123, 220, 1.0
   HEXA: #677bdcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c238dff1c3f340918f3e64e2e7579154 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 146, 223, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c238dff1c3f340918f3e64e2e7579154::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c238dff1c3f340918f3e64e2e7579154:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c238dff1c3f340918f3e64e2e7579154" class="color" data-tooltip="RGBA: 84, 146, 223, 1.0
   HEXA: #5492dfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d710a6f984514352a37098b6b0a05832 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 170, 215, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d710a6f984514352a37098b6b0a05832::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d710a6f984514352a37098b6b0a05832:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d710a6f984514352a37098b6b0a05832" class="color" data-tooltip="RGBA: 69, 170, 215, 1.0
   HEXA: #45aad7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c3a6c4699a1649cabf5bac990ebd9d58 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 192, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c3a6c4699a1649cabf5bac990ebd9d58::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c3a6c4699a1649cabf5bac990ebd9d58:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c3a6c4699a1649cabf5bac990ebd9d58" class="color" data-tooltip="RGBA: 59, 192, 197, 1.0
   HEXA: #3bc0c5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_df3923e1503740fc95ec331763eadd8a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 210, 172, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_df3923e1503740fc95ec331763eadd8a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_df3923e1503740fc95ec331763eadd8a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_df3923e1503740fc95ec331763eadd8a" class="color" data-tooltip="RGBA: 60, 210, 172, 1.0
   HEXA: #3cd2acff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_761cc2eb927842eb8b48c4c1ca8e57d0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(71, 223, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_761cc2eb927842eb8b48c4c1ca8e57d0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_761cc2eb927842eb8b48c4c1ca8e57d0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_761cc2eb927842eb8b48c4c1ca8e57d0" class="color" data-tooltip="RGBA: 71, 223, 145, 1.0
   HEXA: #47df91ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ba7872c9eb27482e832f2d96a2913a9e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(93, 229, 120, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba7872c9eb27482e832f2d96a2913a9e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba7872c9eb27482e832f2d96a2913a9e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba7872c9eb27482e832f2d96a2913a9e" class="color" data-tooltip="RGBA: 93, 229, 120, 1.0
   HEXA: #5de578ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be265c044bfd405689ae20a711f97b54 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(124, 231, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be265c044bfd405689ae20a711f97b54::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be265c044bfd405689ae20a711f97b54:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be265c044bfd405689ae20a711f97b54" class="color" data-tooltip="RGBA: 124, 231, 103, 1.0
   HEXA: #7ce767ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2ad08513532941d9a9b164ea4de2663a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 227, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2ad08513532941d9a9b164ea4de2663a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2ad08513532941d9a9b164ea4de2663a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2ad08513532941d9a9b164ea4de2663a" class="color" data-tooltip="RGBA: 161, 227, 95, 1.0
   HEXA: #a1e35fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dc2bd4e4a72747b5a34c4b0c2372a713 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 220, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dc2bd4e4a72747b5a34c4b0c2372a713::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dc2bd4e4a72747b5a34c4b0c2372a713:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dc2bd4e4a72747b5a34c4b0c2372a713" class="color" data-tooltip="RGBA: 198, 220, 100, 1.0
   HEXA: #c6dc64ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_041b19d550864ebcab4ceb51cf4f30fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(233, 213, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_041b19d550864ebcab4ceb51cf4f30fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_041b19d550864ebcab4ceb51cf4f30fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_041b19d550864ebcab4ceb51cf4f30fe" class="color" data-tooltip="RGBA: 233, 213, 117, 1.0
   HEXA: #e9d575ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_229789131a30415283f87ec49fe0aaf9 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_229789131a30415283f87ec49fe0aaf9 div { flex: 1 1 0; }
           #_229789131a30415283f87ec49fe0aaf9 div.color { width: 100%; height: 100%; }
           #_229789131a30415283f87ec49fe0aaf9 div.cmap { width: 100%; height: auto; }
           #_229789131a30415283f87ec49fe0aaf9 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>purple</strong>
       
       <div id="_229789131a30415283f87ec49fe0aaf9" class="color-map">
           
                           <div>
                   <style>
       #_d09a5b2472dc49f1862ab14ff10c6de9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d09a5b2472dc49f1862ab14ff10c6de9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d09a5b2472dc49f1862ab14ff10c6de9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d09a5b2472dc49f1862ab14ff10c6de9" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15612d155e094b029dd54be05d85fad1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(15, 14, 35, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15612d155e094b029dd54be05d85fad1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15612d155e094b029dd54be05d85fad1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15612d155e094b029dd54be05d85fad1" class="color" data-tooltip="RGBA: 15, 14, 35, 1.0
   HEXA: #0f0e23ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bf76399ce93f4c5d88740e774b2a92b5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 28, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf76399ce93f4c5d88740e774b2a92b5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf76399ce93f4c5d88740e774b2a92b5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf76399ce93f4c5d88740e774b2a92b5" class="color" data-tooltip="RGBA: 31, 28, 68, 1.0
   HEXA: #1f1c44ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6704e22c884841c6b334f702ebd37825 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 43, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6704e22c884841c6b334f702ebd37825::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6704e22c884841c6b334f702ebd37825:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6704e22c884841c6b334f702ebd37825" class="color" data-tooltip="RGBA: 47, 43, 99, 1.0
   HEXA: #2f2b63ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c320cd05ebd94cf38f80ba1e02e3f115 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 59, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c320cd05ebd94cf38f80ba1e02e3f115::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c320cd05ebd94cf38f80ba1e02e3f115:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c320cd05ebd94cf38f80ba1e02e3f115" class="color" data-tooltip="RGBA: 63, 59, 127, 1.0
   HEXA: #3f3b7fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_19a8cc8cea254ca38bccee0db8cc465d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(79, 75, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_19a8cc8cea254ca38bccee0db8cc465d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_19a8cc8cea254ca38bccee0db8cc465d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_19a8cc8cea254ca38bccee0db8cc465d" class="color" data-tooltip="RGBA: 79, 75, 152, 1.0
   HEXA: #4f4b98ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_92a011061cf64b4890a50dd36ba236a7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(96, 91, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_92a011061cf64b4890a50dd36ba236a7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_92a011061cf64b4890a50dd36ba236a7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_92a011061cf64b4890a50dd36ba236a7" class="color" data-tooltip="RGBA: 96, 91, 174, 1.0
   HEXA: #605baeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_51502cb21ca8497183af3efdcf5e466e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(113, 107, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_51502cb21ca8497183af3efdcf5e466e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_51502cb21ca8497183af3efdcf5e466e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_51502cb21ca8497183af3efdcf5e466e" class="color" data-tooltip="RGBA: 113, 107, 194, 1.0
   HEXA: #716bc2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0ed52a954746404ea29a5645b6b87abb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(130, 124, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0ed52a954746404ea29a5645b6b87abb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0ed52a954746404ea29a5645b6b87abb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0ed52a954746404ea29a5645b6b87abb" class="color" data-tooltip="RGBA: 130, 124, 211, 1.0
   HEXA: #827cd3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4e136e001503458db2f827cde4cebd59 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(147, 142, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4e136e001503458db2f827cde4cebd59::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4e136e001503458db2f827cde4cebd59:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4e136e001503458db2f827cde4cebd59" class="color" data-tooltip="RGBA: 147, 142, 225, 1.0
   HEXA: #938ee1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e081ea80589d4b71a573f7e2b0c77224 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(164, 160, 237, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e081ea80589d4b71a573f7e2b0c77224::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e081ea80589d4b71a573f7e2b0c77224:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e081ea80589d4b71a573f7e2b0c77224" class="color" data-tooltip="RGBA: 164, 160, 237, 1.0
   HEXA: #a4a0edff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bea7b50fdc7b40038178b32baf60bad1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 178, 246, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bea7b50fdc7b40038178b32baf60bad1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bea7b50fdc7b40038178b32baf60bad1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bea7b50fdc7b40038178b32baf60bad1" class="color" data-tooltip="RGBA: 182, 178, 246, 1.0
   HEXA: #b6b2f6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7a2712ecb5c24464bc741f2fe020de51 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 196, 252, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7a2712ecb5c24464bc741f2fe020de51::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7a2712ecb5c24464bc741f2fe020de51:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7a2712ecb5c24464bc741f2fe020de51" class="color" data-tooltip="RGBA: 200, 196, 252, 1.0
   HEXA: #c8c4fcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_896f5f8c9319491f8c3163384f3c8d2b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(218, 215, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_896f5f8c9319491f8c3163384f3c8d2b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_896f5f8c9319491f8c3163384f3c8d2b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_896f5f8c9319491f8c3163384f3c8d2b" class="color" data-tooltip="RGBA: 218, 215, 255, 1.0
   HEXA: #dad7ffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ef44cf136f34b91b42ccb1ce42ebbb9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 235, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ef44cf136f34b91b42ccb1ce42ebbb9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ef44cf136f34b91b42ccb1ce42ebbb9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ef44cf136f34b91b42ccb1ce42ebbb9" class="color" data-tooltip="RGBA: 236, 235, 255, 1.0
   HEXA: #ecebffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ba62c3b2ca574329a32311b73a14d648 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ba62c3b2ca574329a32311b73a14d648::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ba62c3b2ca574329a32311b73a14d648:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ba62c3b2ca574329a32311b73a14d648" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_022af240078b45b5bbd3cf797714a135 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_022af240078b45b5bbd3cf797714a135 div { flex: 1 1 0; }
           #_022af240078b45b5bbd3cf797714a135 div.color { width: 100%; height: 100%; }
           #_022af240078b45b5bbd3cf797714a135 div.cmap { width: 100%; height: auto; }
           #_022af240078b45b5bbd3cf797714a135 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>jim_special</strong>
       
       <div id="_022af240078b45b5bbd3cf797714a135" class="color-map">
           
                           <div>
                   <style>
       #_101d07e098ee4030bf953da200a6fb68 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_101d07e098ee4030bf953da200a6fb68::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_101d07e098ee4030bf953da200a6fb68:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_101d07e098ee4030bf953da200a6fb68" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_da65376d16254356b8c668d3c2b5b0ca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(22, 10, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_da65376d16254356b8c668d3c2b5b0ca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_da65376d16254356b8c668d3c2b5b0ca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_da65376d16254356b8c668d3c2b5b0ca" class="color" data-tooltip="RGBA: 22, 10, 34, 1.0
   HEXA: #160a22ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_43e556f81c894634a2cbb564ad7a1d41 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 25, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_43e556f81c894634a2cbb564ad7a1d41::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_43e556f81c894634a2cbb564ad7a1d41:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_43e556f81c894634a2cbb564ad7a1d41" class="color" data-tooltip="RGBA: 37, 25, 68, 1.0
   HEXA: #251944ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6814526450be431d8bed82bf4a5e5106 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 43, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6814526450be431d8bed82bf4a5e5106::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6814526450be431d8bed82bf4a5e5106:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6814526450be431d8bed82bf4a5e5106" class="color" data-tooltip="RGBA: 47, 43, 99, 1.0
   HEXA: #2f2b63ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fa91f4d526564932a99cc3300749cc3d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(52, 65, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fa91f4d526564932a99cc3300749cc3d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fa91f4d526564932a99cc3300749cc3d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fa91f4d526564932a99cc3300749cc3d" class="color" data-tooltip="RGBA: 52, 65, 125, 1.0
   HEXA: #34417dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_518f4e0da9ad42bca6c54d91d3e807ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(55, 88, 146, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_518f4e0da9ad42bca6c54d91d3e807ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_518f4e0da9ad42bca6c54d91d3e807ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_518f4e0da9ad42bca6c54d91d3e807ff" class="color" data-tooltip="RGBA: 55, 88, 146, 1.0
   HEXA: #375892ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8b33b7175bb0459eb2fbc00711824eab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 112, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8b33b7175bb0459eb2fbc00711824eab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8b33b7175bb0459eb2fbc00711824eab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8b33b7175bb0459eb2fbc00711824eab" class="color" data-tooltip="RGBA: 59, 112, 160, 1.0
   HEXA: #3b70a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b3554d9c3a7f43c297389a35f032ec55 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 137, 169, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b3554d9c3a7f43c297389a35f032ec55::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b3554d9c3a7f43c297389a35f032ec55:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b3554d9c3a7f43c297389a35f032ec55" class="color" data-tooltip="RGBA: 64, 137, 169, 1.0
   HEXA: #4089a9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c56dd46eaafc4375a0d21eb443b5499c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(74, 160, 173, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c56dd46eaafc4375a0d21eb443b5499c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c56dd46eaafc4375a0d21eb443b5499c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c56dd46eaafc4375a0d21eb443b5499c" class="color" data-tooltip="RGBA: 74, 160, 173, 1.0
   HEXA: #4aa0adff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ec434c3ca484788bb0476938e429875 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 181, 175, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ec434c3ca484788bb0476938e429875::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ec434c3ca484788bb0476938e429875:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ec434c3ca484788bb0476938e429875" class="color" data-tooltip="RGBA: 89, 181, 175, 1.0
   HEXA: #59b5afff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ef6241903a74b86b27c151d4f1eace8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 199, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ef6241903a74b86b27c151d4f1eace8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ef6241903a74b86b27c151d4f1eace8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ef6241903a74b86b27c151d4f1eace8" class="color" data-tooltip="RGBA: 109, 199, 177, 1.0
   HEXA: #6dc7b1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0b331082c0524110bc413f5631c8ed1e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(134, 214, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0b331082c0524110bc413f5631c8ed1e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0b331082c0524110bc413f5631c8ed1e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0b331082c0524110bc413f5631c8ed1e" class="color" data-tooltip="RGBA: 134, 214, 180, 1.0
   HEXA: #86d6b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_93fff579f37a496ba7a6d31406da8351 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(163, 227, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_93fff579f37a496ba7a6d31406da8351::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_93fff579f37a496ba7a6d31406da8351:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_93fff579f37a496ba7a6d31406da8351" class="color" data-tooltip="RGBA: 163, 227, 189, 1.0
   HEXA: #a3e3bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_62ed7651e8344f73b757d270629168b8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 237, 203, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_62ed7651e8344f73b757d270629168b8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_62ed7651e8344f73b757d270629168b8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_62ed7651e8344f73b757d270629168b8" class="color" data-tooltip="RGBA: 195, 237, 203, 1.0
   HEXA: #c3edcbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_507fb5a51a68496d8cea216c7aae06d8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(226, 246, 225, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_507fb5a51a68496d8cea216c7aae06d8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_507fb5a51a68496d8cea216c7aae06d8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_507fb5a51a68496d8cea216c7aae06d8" class="color" data-tooltip="RGBA: 226, 246, 225, 1.0
   HEXA: #e2f6e1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a6c8ac16015943ac97817378225f3fbc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6c8ac16015943ac97817378225f3fbc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6c8ac16015943ac97817378225f3fbc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6c8ac16015943ac97817378225f3fbc" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_54146a3bcc834bfdb461193220afae01 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_54146a3bcc834bfdb461193220afae01 div { flex: 1 1 0; }
           #_54146a3bcc834bfdb461193220afae01 div.color { width: 100%; height: 100%; }
           #_54146a3bcc834bfdb461193220afae01 div.cmap { width: 100%; height: auto; }
           #_54146a3bcc834bfdb461193220afae01 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>red</strong>
       
       <div id="_54146a3bcc834bfdb461193220afae01" class="color-map">
           
                           <div>
                   <style>
       #_d16e48554df6458abad865d67cd90147 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d16e48554df6458abad865d67cd90147::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d16e48554df6458abad865d67cd90147:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d16e48554df6458abad865d67cd90147" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_875b996856ae453fad3ba348d02506ad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(19, 12, 35, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_875b996856ae453fad3ba348d02506ad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_875b996856ae453fad3ba348d02506ad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_875b996856ae453fad3ba348d02506ad" class="color" data-tooltip="RGBA: 19, 12, 35, 1.0
   HEXA: #130c23ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_614fe01e0f884bdc8d630f2c13b0f1e7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 22, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_614fe01e0f884bdc8d630f2c13b0f1e7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_614fe01e0f884bdc8d630f2c13b0f1e7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_614fe01e0f884bdc8d630f2c13b0f1e7" class="color" data-tooltip="RGBA: 44, 22, 65, 1.0
   HEXA: #2c1641ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86c542e1491c46a7ab16d57e589804c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(73, 32, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86c542e1491c46a7ab16d57e589804c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86c542e1491c46a7ab16d57e589804c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86c542e1491c46a7ab16d57e589804c1" class="color" data-tooltip="RGBA: 73, 32, 90, 1.0
   HEXA: #49205aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_79647c3206664b3aa7037f7b7b631792 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 41, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_79647c3206664b3aa7037f7b7b631792::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_79647c3206664b3aa7037f7b7b631792:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_79647c3206664b3aa7037f7b7b631792" class="color" data-tooltip="RGBA: 104, 41, 107, 1.0
   HEXA: #68296bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f845233937454964bbab61cf46fe304f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(134, 53, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f845233937454964bbab61cf46fe304f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f845233937454964bbab61cf46fe304f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f845233937454964bbab61cf46fe304f" class="color" data-tooltip="RGBA: 134, 53, 118, 1.0
   HEXA: #863576ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_98e077a375a345e882878287f8a60405 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(162, 67, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_98e077a375a345e882878287f8a60405::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_98e077a375a345e882878287f8a60405:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_98e077a375a345e882878287f8a60405" class="color" data-tooltip="RGBA: 162, 67, 124, 1.0
   HEXA: #a2437cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_965b6992d502409784a1a59fd55dba35 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(185, 83, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_965b6992d502409784a1a59fd55dba35::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_965b6992d502409784a1a59fd55dba35:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_965b6992d502409784a1a59fd55dba35" class="color" data-tooltip="RGBA: 185, 83, 126, 1.0
   HEXA: #b9537eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8be26cb766204272bfe1fc4af14f91d7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 102, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8be26cb766204272bfe1fc4af14f91d7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8be26cb766204272bfe1fc4af14f91d7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8be26cb766204272bfe1fc4af14f91d7" class="color" data-tooltip="RGBA: 204, 102, 128, 1.0
   HEXA: #cc6680ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46f7db1579794e1cbb80d1bb3c2bd79d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 124, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46f7db1579794e1cbb80d1bb3c2bd79d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46f7db1579794e1cbb80d1bb3c2bd79d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46f7db1579794e1cbb80d1bb3c2bd79d" class="color" data-tooltip="RGBA: 216, 124, 130, 1.0
   HEXA: #d87c82ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_98393dc6656845ecbe61996a7282885d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 148, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_98393dc6656845ecbe61996a7282885d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_98393dc6656845ecbe61996a7282885d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_98393dc6656845ecbe61996a7282885d" class="color" data-tooltip="RGBA: 225, 148, 136, 1.0
   HEXA: #e19488ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d8eca4a4bd39419c8525d707f4c1e3fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 172, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d8eca4a4bd39419c8525d707f4c1e3fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d8eca4a4bd39419c8525d707f4c1e3fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d8eca4a4bd39419c8525d707f4c1e3fe" class="color" data-tooltip="RGBA: 229, 172, 147, 1.0
   HEXA: #e5ac93ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_065222115fb34575960ebb13282b6b64 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(232, 196, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_065222115fb34575960ebb13282b6b64::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_065222115fb34575960ebb13282b6b64:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_065222115fb34575960ebb13282b6b64" class="color" data-tooltip="RGBA: 232, 196, 164, 1.0
   HEXA: #e8c4a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_22ab8c48816e4729a11129695beaeb8d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(236, 219, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_22ab8c48816e4729a11129695beaeb8d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_22ab8c48816e4729a11129695beaeb8d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_22ab8c48816e4729a11129695beaeb8d" class="color" data-tooltip="RGBA: 236, 219, 189, 1.0
   HEXA: #ecdbbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f9aed93f2d3e4adca799fd2f378e6735 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 238, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f9aed93f2d3e4adca799fd2f378e6735::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f9aed93f2d3e4adca799fd2f378e6735:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f9aed93f2d3e4adca799fd2f378e6735" class="color" data-tooltip="RGBA: 242, 238, 219, 1.0
   HEXA: #f2eedbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d91d341d08a749d38e66ea4ae5079c40 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d91d341d08a749d38e66ea4ae5079c40::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d91d341d08a749d38e66ea4ae5079c40:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d91d341d08a749d38e66ea4ae5079c40" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_503ea0fec0cf4c208cf9b598da4d26b3 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_503ea0fec0cf4c208cf9b598da4d26b3 div { flex: 1 1 0; }
           #_503ea0fec0cf4c208cf9b598da4d26b3 div.color { width: 100%; height: 100%; }
           #_503ea0fec0cf4c208cf9b598da4d26b3 div.cmap { width: 100%; height: auto; }
           #_503ea0fec0cf4c208cf9b598da4d26b3 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>cubehelix1</strong>
       
       <div id="_503ea0fec0cf4c208cf9b598da4d26b3" class="color-map">
           
                           <div>
                   <style>
       #_aca5b6ad6c0743008d02bb176df39c62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aca5b6ad6c0743008d02bb176df39c62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aca5b6ad6c0743008d02bb176df39c62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aca5b6ad6c0743008d02bb176df39c62" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_52cea4f3168a4fc7afad88c37c406873 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 15, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_52cea4f3168a4fc7afad88c37c406873::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_52cea4f3168a4fc7afad88c37c406873:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_52cea4f3168a4fc7afad88c37c406873" class="color" data-tooltip="RGBA: 27, 15, 0, 1.0
   HEXA: #1b0f00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6bbdce631e9840e7a184cbc7f1ce3334 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 23, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6bbdce631e9840e7a184cbc7f1ce3334::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6bbdce631e9840e7a184cbc7f1ce3334:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6bbdce631e9840e7a184cbc7f1ce3334" class="color" data-tooltip="RGBA: 65, 23, 4, 1.0
   HEXA: #411704ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c2cc559517a419eae6ec32a00688f04 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 27, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c2cc559517a419eae6ec32a00688f04::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c2cc559517a419eae6ec32a00688f04:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c2cc559517a419eae6ec32a00688f04" class="color" data-tooltip="RGBA: 104, 27, 32, 1.0
   HEXA: #681b20ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e167a81099d416a84348361bd161820 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 33, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e167a81099d416a84348361bd161820::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e167a81099d416a84348361bd161820:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e167a81099d416a84348361bd161820" class="color" data-tooltip="RGBA: 133, 33, 75, 1.0
   HEXA: #85214bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7a4533e39f274ac785940df6830d6bf2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(147, 45, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7a4533e39f274ac785940df6830d6bf2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7a4533e39f274ac785940df6830d6bf2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7a4533e39f274ac785940df6830d6bf2" class="color" data-tooltip="RGBA: 147, 45, 126, 1.0
   HEXA: #932d7eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cd5b0b974a2f4810b006b122749e75f5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(144, 66, 175, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cd5b0b974a2f4810b006b122749e75f5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cd5b0b974a2f4810b006b122749e75f5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cd5b0b974a2f4810b006b122749e75f5" class="color" data-tooltip="RGBA: 144, 66, 175, 1.0
   HEXA: #9042afff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c3540fef8be740d196c2e21f79b24d7c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 96, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c3540fef8be740d196c2e21f79b24d7c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c3540fef8be740d196c2e21f79b24d7c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c3540fef8be740d196c2e21f79b24d7c" class="color" data-tooltip="RGBA: 129, 96, 210, 1.0
   HEXA: #8160d2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_68994c6d4ee34bbfb30165f215b1ebf0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 131, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_68994c6d4ee34bbfb30165f215b1ebf0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_68994c6d4ee34bbfb30165f215b1ebf0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_68994c6d4ee34bbfb30165f215b1ebf0" class="color" data-tooltip="RGBA: 111, 131, 227, 1.0
   HEXA: #6f83e3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef966d4484f54a708929fd07c8a58cfe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(99, 166, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef966d4484f54a708929fd07c8a58cfe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef966d4484f54a708929fd07c8a58cfe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef966d4484f54a708929fd07c8a58cfe" class="color" data-tooltip="RGBA: 99, 166, 226, 1.0
   HEXA: #63a6e2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c391006232c54201b701f066c3e9ced5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(101, 197, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c391006232c54201b701f066c3e9ced5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c391006232c54201b701f066c3e9ced5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c391006232c54201b701f066c3e9ced5" class="color" data-tooltip="RGBA: 101, 197, 211, 1.0
   HEXA: #65c5d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0b32ae7adcc04153850c75ba01b646de { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 219, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0b32ae7adcc04153850c75ba01b646de::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0b32ae7adcc04153850c75ba01b646de:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0b32ae7adcc04153850c75ba01b646de" class="color" data-tooltip="RGBA: 120, 219, 194, 1.0
   HEXA: #78dbc2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ad6c673f7314c74bb15747f51f428a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 233, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ad6c673f7314c74bb15747f51f428a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ad6c673f7314c74bb15747f51f428a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ad6c673f7314c74bb15747f51f428a2" class="color" data-tooltip="RGBA: 153, 233, 185, 1.0
   HEXA: #99e9b9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_714ab48470c6444da2ff6ad4078adbc9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 240, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_714ab48470c6444da2ff6ad4078adbc9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_714ab48470c6444da2ff6ad4078adbc9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_714ab48470c6444da2ff6ad4078adbc9" class="color" data-tooltip="RGBA: 193, 240, 191, 1.0
   HEXA: #c1f0bfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ad8089f7ca9647368578044e699103c4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 245, 216, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ad8089f7ca9647368578044e699103c4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ad8089f7ca9647368578044e699103c4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ad8089f7ca9647368578044e699103c4" class="color" data-tooltip="RGBA: 230, 245, 216, 1.0
   HEXA: #e6f5d8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c3e7df70c0484c8c835d3c68dd7747d8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c3e7df70c0484c8c835d3c68dd7747d8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c3e7df70c0484c8c835d3c68dd7747d8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c3e7df70c0484c8c835d3c68dd7747d8" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_eef29d9df68e42ad8d99eb5778bce1a0 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_eef29d9df68e42ad8d99eb5778bce1a0 div { flex: 1 1 0; }
           #_eef29d9df68e42ad8d99eb5778bce1a0 div.color { width: 100%; height: 100%; }
           #_eef29d9df68e42ad8d99eb5778bce1a0 div.cmap { width: 100%; height: auto; }
           #_eef29d9df68e42ad8d99eb5778bce1a0 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>cubehelix2</strong>
       
       <div id="_eef29d9df68e42ad8d99eb5778bce1a0" class="color-map">
           
                           <div>
                   <style>
       #_1aef9ce928a64dc093ef445fcfc05a10 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1aef9ce928a64dc093ef445fcfc05a10::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1aef9ce928a64dc093ef445fcfc05a10:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1aef9ce928a64dc093ef445fcfc05a10" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c4a5f4eae20c4d70ad5533989c4dbe66 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 28, 14, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c4a5f4eae20c4d70ad5533989c4dbe66::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c4a5f4eae20c4d70ad5533989c4dbe66:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c4a5f4eae20c4d70ad5533989c4dbe66" class="color" data-tooltip="RGBA: 0, 28, 14, 1.0
   HEXA: #001c0eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a391280253eb407d88d0b0c481d80006 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 51, 47, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a391280253eb407d88d0b0c481d80006::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a391280253eb407d88d0b0c481d80006:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a391280253eb407d88d0b0c481d80006" class="color" data-tooltip="RGBA: 0, 51, 47, 1.0
   HEXA: #00332fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5663ee90b39d4e59add65c628f2559d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(7, 65, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5663ee90b39d4e59add65c628f2559d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5663ee90b39d4e59add65c628f2559d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5663ee90b39d4e59add65c628f2559d2" class="color" data-tooltip="RGBA: 7, 65, 91, 1.0
   HEXA: #07415bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cfdaad05230740cc9944a8643a8a8a95 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 71, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cfdaad05230740cc9944a8643a8a8a95::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cfdaad05230740cc9944a8643a8a8a95:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cfdaad05230740cc9944a8643a8a8a95" class="color" data-tooltip="RGBA: 35, 71, 135, 1.0
   HEXA: #234787ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d594713550f74a719b4925acc6e9b635 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(78, 72, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d594713550f74a719b4925acc6e9b635::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d594713550f74a719b4925acc6e9b635:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d594713550f74a719b4925acc6e9b635" class="color" data-tooltip="RGBA: 78, 72, 168, 1.0
   HEXA: #4e48a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be4417bd5d4349819406b13805cf47e5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 72, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be4417bd5d4349819406b13805cf47e5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be4417bd5d4349819406b13805cf47e5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be4417bd5d4349819406b13805cf47e5" class="color" data-tooltip="RGBA: 129, 72, 184, 1.0
   HEXA: #8148b8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_075f725b68c0457f850a253afdd12297 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 77, 181, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_075f725b68c0457f850a253afdd12297::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_075f725b68c0457f850a253afdd12297:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_075f725b68c0457f850a253afdd12297" class="color" data-tooltip="RGBA: 177, 77, 181, 1.0
   HEXA: #b14db5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_440d7b23ecd54374a828fdee0bba0fb3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 90, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_440d7b23ecd54374a828fdee0bba0fb3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_440d7b23ecd54374a828fdee0bba0fb3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_440d7b23ecd54374a828fdee0bba0fb3" class="color" data-tooltip="RGBA: 214, 90, 165, 1.0
   HEXA: #d65aa5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d3ff7d73fd224d36b4c7e420445a56ed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 113, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d3ff7d73fd224d36b4c7e420445a56ed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d3ff7d73fd224d36b4c7e420445a56ed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d3ff7d73fd224d36b4c7e420445a56ed" class="color" data-tooltip="RGBA: 235, 113, 143, 1.0
   HEXA: #eb718fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_993e7b2d80ef42dba1459929f46ed3c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 142, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_993e7b2d80ef42dba1459929f46ed3c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_993e7b2d80ef42dba1459929f46ed3c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_993e7b2d80ef42dba1459929f46ed3c1" class="color" data-tooltip="RGBA: 238, 142, 128, 1.0
   HEXA: #ee8e80ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7774677412c74813b2b10a398be38394 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(230, 175, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7774677412c74813b2b10a398be38394::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7774677412c74813b2b10a398be38394:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7774677412c74813b2b10a398be38394" class="color" data-tooltip="RGBA: 230, 175, 127, 1.0
   HEXA: #e6af7fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_660b088517d04e0fba1555f3b068033c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 206, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_660b088517d04e0fba1555f3b068033c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_660b088517d04e0fba1555f3b068033c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_660b088517d04e0fba1555f3b068033c" class="color" data-tooltip="RGBA: 219, 206, 144, 1.0
   HEXA: #dbce90ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d7dc723107ec4243b112f6c8c0372731 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 231, 178, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d7dc723107ec4243b112f6c8c0372731::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d7dc723107ec4243b112f6c8c0372731:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d7dc723107ec4243b112f6c8c0372731" class="color" data-tooltip="RGBA: 216, 231, 178, 1.0
   HEXA: #d8e7b2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a4a05c319f484e0185dba4bb8390cc86 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(226, 247, 219, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4a05c319f484e0185dba4bb8390cc86::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4a05c319f484e0185dba4bb8390cc86:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4a05c319f484e0185dba4bb8390cc86" class="color" data-tooltip="RGBA: 226, 247, 219, 1.0
   HEXA: #e2f7dbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_de76d55c895d49fb869a29345cc8f397 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_de76d55c895d49fb869a29345cc8f397::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_de76d55c895d49fb869a29345cc8f397:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_de76d55c895d49fb869a29345cc8f397" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9bdd3b6d4c0f4e7db7e051eb2d57f61f {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9bdd3b6d4c0f4e7db7e051eb2d57f61f div { flex: 1 1 0; }
           #_9bdd3b6d4c0f4e7db7e051eb2d57f61f div.color { width: 100%; height: 100%; }
           #_9bdd3b6d4c0f4e7db7e051eb2d57f61f div.cmap { width: 100%; height: auto; }
           #_9bdd3b6d4c0f4e7db7e051eb2d57f61f div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>cubehelix3</strong>
       
       <div id="_9bdd3b6d4c0f4e7db7e051eb2d57f61f" class="color-map">
           
                           <div>
                   <style>
       #_edbf539285d2492dbbca2e85ae596e04 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_edbf539285d2492dbbca2e85ae596e04::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_edbf539285d2492dbbca2e85ae596e04:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_edbf539285d2492dbbca2e85ae596e04" class="color" data-tooltip="RGBA: 0, 0, 0, 1.0
   HEXA: #000000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_976f4944a0b443d0bd641f561ff979aa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 39, 12, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_976f4944a0b443d0bd641f561ff979aa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_976f4944a0b443d0bd641f561ff979aa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_976f4944a0b443d0bd641f561ff979aa" class="color" data-tooltip="RGBA: 0, 39, 12, 1.0
   HEXA: #00270cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d6f33935e8ae4a3eb2701aad0b6a87ed { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 68, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d6f33935e8ae4a3eb2701aad0b6a87ed::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d6f33935e8ae4a3eb2701aad0b6a87ed:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d6f33935e8ae4a3eb2701aad0b6a87ed" class="color" data-tooltip="RGBA: 0, 68, 60, 1.0
   HEXA: #00443cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_746a983e4c294cf2a40d3518a5da327f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 80, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_746a983e4c294cf2a40d3518a5da327f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_746a983e4c294cf2a40d3518a5da327f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_746a983e4c294cf2a40d3518a5da327f" class="color" data-tooltip="RGBA: 0, 80, 131, 1.0
   HEXA: #005083ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_83e98bfec39346ba87aaa95c219dc74a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(3, 75, 202, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_83e98bfec39346ba87aaa95c219dc74a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_83e98bfec39346ba87aaa95c219dc74a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_83e98bfec39346ba87aaa95c219dc74a" class="color" data-tooltip="RGBA: 3, 75, 202, 1.0
   HEXA: #034bcaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4e22bfba89964d44bd8246385eb9d27a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(72, 60, 252, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4e22bfba89964d44bd8246385eb9d27a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4e22bfba89964d44bd8246385eb9d27a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4e22bfba89964d44bd8246385eb9d27a" class="color" data-tooltip="RGBA: 72, 60, 252, 1.0
   HEXA: #483cfcff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f8b8e743d8c64e6aa395ab1e1611c8dc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 43, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f8b8e743d8c64e6aa395ab1e1611c8dc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f8b8e743d8c64e6aa395ab1e1611c8dc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f8b8e743d8c64e6aa395ab1e1611c8dc" class="color" data-tooltip="RGBA: 156, 43, 255, 1.0
   HEXA: #9c2bffff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_235c030a1aa44b10862ab1f8bc1e7796 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 36, 244, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_235c030a1aa44b10862ab1f8bc1e7796::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_235c030a1aa44b10862ab1f8bc1e7796:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_235c030a1aa44b10862ab1f8bc1e7796" class="color" data-tooltip="RGBA: 235, 36, 244, 1.0
   HEXA: #eb24f4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e440380f73ef4107bd3898964f494cb3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 45, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e440380f73ef4107bd3898964f494cb3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e440380f73ef4107bd3898964f494cb3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e440380f73ef4107bd3898964f494cb3" class="color" data-tooltip="RGBA: 255, 45, 194, 1.0
   HEXA: #ff2dc2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_35cc53085ad84cc8b28ade38b63dc047 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 73, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_35cc53085ad84cc8b28ade38b63dc047::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_35cc53085ad84cc8b28ade38b63dc047:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_35cc53085ad84cc8b28ade38b63dc047" class="color" data-tooltip="RGBA: 255, 73, 134, 1.0
   HEXA: #ff4986ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_154c010fe27645afa22f3c79b96109ad { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 115, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_154c010fe27645afa22f3c79b96109ad::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_154c010fe27645afa22f3c79b96109ad:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_154c010fe27645afa22f3c79b96109ad" class="color" data-tooltip="RGBA: 255, 115, 86, 1.0
   HEXA: #ff7356ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d168d0fbe1c4e2ba29875cb90c96808 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 164, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d168d0fbe1c4e2ba29875cb90c96808::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d168d0fbe1c4e2ba29875cb90c96808:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d168d0fbe1c4e2ba29875cb90c96808" class="color" data-tooltip="RGBA: 255, 164, 67, 1.0
   HEXA: #ffa443ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95e9ea779d0d47edb5b37723aab5456a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(235, 209, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95e9ea779d0d47edb5b37723aab5456a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95e9ea779d0d47edb5b37723aab5456a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95e9ea779d0d47edb5b37723aab5456a" class="color" data-tooltip="RGBA: 235, 209, 85, 1.0
   HEXA: #ebd155ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ad125ab2a0e74d5b8e064fc298613208 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(211, 241, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ad125ab2a0e74d5b8e064fc298613208::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ad125ab2a0e74d5b8e064fc298613208:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ad125ab2a0e74d5b8e064fc298613208" class="color" data-tooltip="RGBA: 211, 241, 135, 1.0
   HEXA: #d3f187ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a6e97bb9edce414ba917436029ae954f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 255, 200, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a6e97bb9edce414ba917436029ae954f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a6e97bb9edce414ba917436029ae954f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a6e97bb9edce414ba917436029ae954f" class="color" data-tooltip="RGBA: 215, 255, 200, 1.0
   HEXA: #d7ffc8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a912e79c09424d00abafaf04580924cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a912e79c09424d00abafaf04580924cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a912e79c09424d00abafaf04580924cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a912e79c09424d00abafaf04580924cf" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_08cafe1abd624c6ca6ee514d410820d4 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_08cafe1abd624c6ca6ee514d410820d4 div { flex: 1 1 0; }
           #_08cafe1abd624c6ca6ee514d410820d4 div.color { width: 100%; height: 100%; }
           #_08cafe1abd624c6ca6ee514d410820d4 div.cmap { width: 100%; height: auto; }
           #_08cafe1abd624c6ca6ee514d410820d4 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>inferno</strong>
       
       <div id="_08cafe1abd624c6ca6ee514d410820d4" class="color-map">
           
                           <div>
                   <style>
       #_58f7a2e37974456bb14b4c5bfdefa453 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_58f7a2e37974456bb14b4c5bfdefa453::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_58f7a2e37974456bb14b4c5bfdefa453:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_58f7a2e37974456bb14b4c5bfdefa453" class="color" data-tooltip="RGBA: 0, 0, 4, 1.0
   HEXA: #000004ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_31984eb58c1c40399520c62d6b1fd347 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 5, 29, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_31984eb58c1c40399520c62d6b1fd347::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_31984eb58c1c40399520c62d6b1fd347:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_31984eb58c1c40399520c62d6b1fd347" class="color" data-tooltip="RGBA: 8, 5, 29, 1.0
   HEXA: #08051dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5d2f56318e584f07ba36144c62b890b9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(25, 12, 62, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5d2f56318e584f07ba36144c62b890b9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5d2f56318e584f07ba36144c62b890b9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5d2f56318e584f07ba36144c62b890b9" class="color" data-tooltip="RGBA: 25, 12, 62, 1.0
   HEXA: #190c3eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7957733fa67e4edfafefc00523553fda { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(47, 10, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7957733fa67e4edfafefc00523553fda::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7957733fa67e4edfafefc00523553fda:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7957733fa67e4edfafefc00523553fda" class="color" data-tooltip="RGBA: 47, 10, 91, 1.0
   HEXA: #2f0a5bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cdfc07fbb9fb463f9532cbaee52caaa1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(71, 11, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cdfc07fbb9fb463f9532cbaee52caaa1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cdfc07fbb9fb463f9532cbaee52caaa1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cdfc07fbb9fb463f9532cbaee52caaa1" class="color" data-tooltip="RGBA: 71, 11, 106, 1.0
   HEXA: #470b6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_749d701a8c5c4f598b9d9062278cfd7f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(92, 18, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_749d701a8c5c4f598b9d9062278cfd7f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_749d701a8c5c4f598b9d9062278cfd7f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_749d701a8c5c4f598b9d9062278cfd7f" class="color" data-tooltip="RGBA: 92, 18, 110, 1.0
   HEXA: #5c126eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3789bb21d8144b4e904afe6e4f23e0d7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 26, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3789bb21d8144b4e904afe6e4f23e0d7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3789bb21d8144b4e904afe6e4f23e0d7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3789bb21d8144b4e904afe6e4f23e0d7" class="color" data-tooltip="RGBA: 114, 26, 110, 1.0
   HEXA: #721a6eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_46295893e2624e99a74a570ce0013fc5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 33, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_46295893e2624e99a74a570ce0013fc5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_46295893e2624e99a74a570ce0013fc5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_46295893e2624e99a74a570ce0013fc5" class="color" data-tooltip="RGBA: 135, 33, 107, 1.0
   HEXA: #87216bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6c7fc3ba04424969b11486a4577d2fa7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(155, 41, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6c7fc3ba04424969b11486a4577d2fa7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6c7fc3ba04424969b11486a4577d2fa7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6c7fc3ba04424969b11486a4577d2fa7" class="color" data-tooltip="RGBA: 155, 41, 100, 1.0
   HEXA: #9b2964ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_61a92de32e4c43dca8230a10377e4311 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 50, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61a92de32e4c43dca8230a10377e4311::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61a92de32e4c43dca8230a10377e4311:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61a92de32e4c43dca8230a10377e4311" class="color" data-tooltip="RGBA: 177, 50, 90, 1.0
   HEXA: #b1325aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d057765e561047e4a66f95720a52a961 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 60, 78, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d057765e561047e4a66f95720a52a961::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d057765e561047e4a66f95720a52a961:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d057765e561047e4a66f95720a52a961" class="color" data-tooltip="RGBA: 196, 60, 78, 1.0
   HEXA: #c43c4eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b4078aca61e24e499f4b9203a57e4edc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(215, 75, 63, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b4078aca61e24e499f4b9203a57e4edc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b4078aca61e24e499f4b9203a57e4edc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b4078aca61e24e499f4b9203a57e4edc" class="color" data-tooltip="RGBA: 215, 75, 63, 1.0
   HEXA: #d74b3fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_935c2e2559d241638d6204d2b5fdf3ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 92, 48, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_935c2e2559d241638d6204d2b5fdf3ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_935c2e2559d241638d6204d2b5fdf3ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_935c2e2559d241638d6204d2b5fdf3ab" class="color" data-tooltip="RGBA: 229, 92, 48, 1.0
   HEXA: #e55c30ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b8c270c9e4748aeacb987b0f15bd8f3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 111, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b8c270c9e4748aeacb987b0f15bd8f3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b8c270c9e4748aeacb987b0f15bd8f3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b8c270c9e4748aeacb987b0f15bd8f3" class="color" data-tooltip="RGBA: 240, 111, 32, 1.0
   HEXA: #f06f20ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_270cb79c9e204e89b1a0ca6d6391bff7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(248, 135, 14, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_270cb79c9e204e89b1a0ca6d6391bff7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_270cb79c9e204e89b1a0ca6d6391bff7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_270cb79c9e204e89b1a0ca6d6391bff7" class="color" data-tooltip="RGBA: 248, 135, 14, 1.0
   HEXA: #f8870eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c4eb447a031d404c99e1a2ca3fd8084e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 159, 7, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c4eb447a031d404c99e1a2ca3fd8084e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c4eb447a031d404c99e1a2ca3fd8084e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c4eb447a031d404c99e1a2ca3fd8084e" class="color" data-tooltip="RGBA: 252, 159, 7, 1.0
   HEXA: #fc9f07ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7cc16d4748b043ec9ed0a87447791132 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 186, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7cc16d4748b043ec9ed0a87447791132::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7cc16d4748b043ec9ed0a87447791132:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7cc16d4748b043ec9ed0a87447791132" class="color" data-tooltip="RGBA: 251, 186, 31, 1.0
   HEXA: #fbba1fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9dbe004b5c5d40a1853cb113960eff26 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 211, 64, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9dbe004b5c5d40a1853cb113960eff26::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9dbe004b5c5d40a1853cb113960eff26:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9dbe004b5c5d40a1853cb113960eff26" class="color" data-tooltip="RGBA: 247, 211, 64, 1.0
   HEXA: #f7d340ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_374f0f4799d24dd6b8e629232c16e63d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 237, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_374f0f4799d24dd6b8e629232c16e63d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_374f0f4799d24dd6b8e629232c16e63d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_374f0f4799d24dd6b8e629232c16e63d" class="color" data-tooltip="RGBA: 241, 237, 113, 1.0
   HEXA: #f1ed71ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3f9804ac08044087be77946d00cf614e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 255, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3f9804ac08044087be77946d00cf614e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3f9804ac08044087be77946d00cf614e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3f9804ac08044087be77946d00cf614e" class="color" data-tooltip="RGBA: 252, 255, 164, 1.0
   HEXA: #fcffa4ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_7ac2614b724d458ea7e84400e4f34361 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_7ac2614b724d458ea7e84400e4f34361 div { flex: 1 1 0; }
           #_7ac2614b724d458ea7e84400e4f34361 div.color { width: 100%; height: 100%; }
           #_7ac2614b724d458ea7e84400e4f34361 div.cmap { width: 100%; height: auto; }
           #_7ac2614b724d458ea7e84400e4f34361 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>magma</strong>
       
       <div id="_7ac2614b724d458ea7e84400e4f34361" class="color-map">
           
                           <div>
                   <style>
       #_441374f6c37340d1bfc022f954e61cb9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 0, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_441374f6c37340d1bfc022f954e61cb9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_441374f6c37340d1bfc022f954e61cb9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_441374f6c37340d1bfc022f954e61cb9" class="color" data-tooltip="RGBA: 0, 0, 4, 1.0
   HEXA: #000004ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6d71cb13f9464f7ca6476496a4521e79 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(7, 6, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6d71cb13f9464f7ca6476496a4521e79::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6d71cb13f9464f7ca6476496a4521e79:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6d71cb13f9464f7ca6476496a4521e79" class="color" data-tooltip="RGBA: 7, 6, 28, 1.0
   HEXA: #07061cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fbcb0b5625074251a8347d579fab198f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(22, 15, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fbcb0b5625074251a8347d579fab198f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fbcb0b5625074251a8347d579fab198f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fbcb0b5625074251a8347d579fab198f" class="color" data-tooltip="RGBA: 22, 15, 59, 1.0
   HEXA: #160f3bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_649fb03ff02a42a490f40919540ffbe3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 17, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_649fb03ff02a42a490f40919540ffbe3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_649fb03ff02a42a490f40919540ffbe3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_649fb03ff02a42a490f40919540ffbe3" class="color" data-tooltip="RGBA: 41, 17, 90, 1.0
   HEXA: #29115aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b18154fdab141c79b66f710882d18f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(64, 15, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b18154fdab141c79b66f710882d18f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b18154fdab141c79b66f710882d18f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b18154fdab141c79b66f710882d18f6" class="color" data-tooltip="RGBA: 64, 15, 116, 1.0
   HEXA: #400f74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f16bf2f833842628a81452062e62310 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(86, 20, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f16bf2f833842628a81452062e62310::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f16bf2f833842628a81452062e62310:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f16bf2f833842628a81452062e62310" class="color" data-tooltip="RGBA: 86, 20, 125, 1.0
   HEXA: #56147dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d7ceba851b9d4a3081b8097a643a681c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 29, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d7ceba851b9d4a3081b8097a643a681c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d7ceba851b9d4a3081b8097a643a681c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d7ceba851b9d4a3081b8097a643a681c" class="color" data-tooltip="RGBA: 107, 29, 129, 1.0
   HEXA: #6b1d81ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_02e52d7b648e4743af8f0d26f9515086 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 37, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_02e52d7b648e4743af8f0d26f9515086::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_02e52d7b648e4743af8f0d26f9515086:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_02e52d7b648e4743af8f0d26f9515086" class="color" data-tooltip="RGBA: 128, 37, 130, 1.0
   HEXA: #802582ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0a49dd491cb041f4bed3512ebc49c02a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(148, 44, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0a49dd491cb041f4bed3512ebc49c02a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0a49dd491cb041f4bed3512ebc49c02a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0a49dd491cb041f4bed3512ebc49c02a" class="color" data-tooltip="RGBA: 148, 44, 128, 1.0
   HEXA: #942c80ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b81f07763fb6451898bb466b2e39346e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 51, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b81f07763fb6451898bb466b2e39346e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b81f07763fb6451898bb466b2e39346e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b81f07763fb6451898bb466b2e39346e" class="color" data-tooltip="RGBA: 171, 51, 124, 1.0
   HEXA: #ab337cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5aa369b44ad9445d8be21f3bb5945f23 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(192, 58, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5aa369b44ad9445d8be21f3bb5945f23::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5aa369b44ad9445d8be21f3bb5945f23:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5aa369b44ad9445d8be21f3bb5945f23" class="color" data-tooltip="RGBA: 192, 58, 118, 1.0
   HEXA: #c03a76ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ec670e54f894057ae836537123ba43b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 69, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ec670e54f894057ae836537123ba43b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ec670e54f894057ae836537123ba43b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ec670e54f894057ae836537123ba43b" class="color" data-tooltip="RGBA: 214, 69, 108, 1.0
   HEXA: #d6456cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_04f4fc0cd0724e79b1d0f89dbc4107ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(232, 83, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_04f4fc0cd0724e79b1d0f89dbc4107ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_04f4fc0cd0724e79b1d0f89dbc4107ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_04f4fc0cd0724e79b1d0f89dbc4107ea" class="color" data-tooltip="RGBA: 232, 83, 98, 1.0
   HEXA: #e85362ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_991f6f08360449f9b98621c2cf219cd6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 103, 92, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_991f6f08360449f9b98621c2cf219cd6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_991f6f08360449f9b98621c2cf219cd6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_991f6f08360449f9b98621c2cf219cd6" class="color" data-tooltip="RGBA: 244, 103, 92, 1.0
   HEXA: #f4675cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2bae7a049bd340ea931e72e46991e743 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 129, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2bae7a049bd340ea931e72e46991e743::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2bae7a049bd340ea931e72e46991e743:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2bae7a049bd340ea931e72e46991e743" class="color" data-tooltip="RGBA: 250, 129, 95, 1.0
   HEXA: #fa815fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4d131b2fc07a4017a60a1783d9bb8964 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 154, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4d131b2fc07a4017a60a1783d9bb8964::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4d131b2fc07a4017a60a1783d9bb8964:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4d131b2fc07a4017a60a1783d9bb8964" class="color" data-tooltip="RGBA: 253, 154, 106, 1.0
   HEXA: #fd9a6aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_150dcd735b634bcc99117a50ab132e39 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 180, 123, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_150dcd735b634bcc99117a50ab132e39::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_150dcd735b634bcc99117a50ab132e39:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_150dcd735b634bcc99117a50ab132e39" class="color" data-tooltip="RGBA: 254, 180, 123, 1.0
   HEXA: #feb47bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3c290a2e57904879963a0966e408511a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 204, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c290a2e57904879963a0966e408511a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c290a2e57904879963a0966e408511a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c290a2e57904879963a0966e408511a" class="color" data-tooltip="RGBA: 254, 204, 143, 1.0
   HEXA: #fecc8fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_792b73a1dfc6454190160b4208495cc9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 229, 167, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_792b73a1dfc6454190160b4208495cc9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_792b73a1dfc6454190160b4208495cc9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_792b73a1dfc6454190160b4208495cc9" class="color" data-tooltip="RGBA: 253, 229, 167, 1.0
   HEXA: #fde5a7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_df1b74787a304617919795418dc5ff4d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 253, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_df1b74787a304617919795418dc5ff4d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_df1b74787a304617919795418dc5ff4d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_df1b74787a304617919795418dc5ff4d" class="color" data-tooltip="RGBA: 252, 253, 191, 1.0
   HEXA: #fcfdbfff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_56c7873fe63d4dbd9c5571fd766de508 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_56c7873fe63d4dbd9c5571fd766de508 div { flex: 1 1 0; }
           #_56c7873fe63d4dbd9c5571fd766de508 div.color { width: 100%; height: 100%; }
           #_56c7873fe63d4dbd9c5571fd766de508 div.cmap { width: 100%; height: auto; }
           #_56c7873fe63d4dbd9c5571fd766de508 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>plasma</strong>
       
       <div id="_56c7873fe63d4dbd9c5571fd766de508" class="color-map">
           
                           <div>
                   <style>
       #_d29b0f22b7804a3eb4a790e644906005 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(13, 8, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d29b0f22b7804a3eb4a790e644906005::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d29b0f22b7804a3eb4a790e644906005:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d29b0f22b7804a3eb4a790e644906005" class="color" data-tooltip="RGBA: 13, 8, 135, 1.0
   HEXA: #0d0887ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7dc45ab7b136433cbe9f06636d20103f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 5, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7dc45ab7b136433cbe9f06636d20103f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7dc45ab7b136433cbe9f06636d20103f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7dc45ab7b136433cbe9f06636d20103f" class="color" data-tooltip="RGBA: 44, 5, 148, 1.0
   HEXA: #2c0594ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d217eccab804ec8bd713da95f22f9b9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 3, 158, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d217eccab804ec8bd713da95f22f9b9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d217eccab804ec8bd713da95f22f9b9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d217eccab804ec8bd713da95f22f9b9" class="color" data-tooltip="RGBA: 68, 3, 158, 1.0
   HEXA: #44039eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_db0f2c82006d453e81a280b333c71080 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 1, 165, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db0f2c82006d453e81a280b333c71080::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db0f2c82006d453e81a280b333c71080:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db0f2c82006d453e81a280b333c71080" class="color" data-tooltip="RGBA: 89, 1, 165, 1.0
   HEXA: #5901a5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_79b32a8392484be8af82f31d3cef8b0c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 0, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_79b32a8392484be8af82f31d3cef8b0c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_79b32a8392484be8af82f31d3cef8b0c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_79b32a8392484be8af82f31d3cef8b0c" class="color" data-tooltip="RGBA: 111, 0, 168, 1.0
   HEXA: #6f00a8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_88e071319f6942b8b3c17d55aae638db { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 5, 167, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_88e071319f6942b8b3c17d55aae638db::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_88e071319f6942b8b3c17d55aae638db:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_88e071319f6942b8b3c17d55aae638db" class="color" data-tooltip="RGBA: 131, 5, 167, 1.0
   HEXA: #8305a7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1d64d5b342e47f78a9fa41157e03287 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 19, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1d64d5b342e47f78a9fa41157e03287::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1d64d5b342e47f78a9fa41157e03287:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1d64d5b342e47f78a9fa41157e03287" class="color" data-tooltip="RGBA: 150, 19, 161, 1.0
   HEXA: #9613a1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee44e5cbd10a4705b70231537b8ddf4e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 33, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee44e5cbd10a4705b70231537b8ddf4e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee44e5cbd10a4705b70231537b8ddf4e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee44e5cbd10a4705b70231537b8ddf4e" class="color" data-tooltip="RGBA: 167, 33, 151, 1.0
   HEXA: #a72197ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_75e6c53706f446e392034ef1649f6b53 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 48, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_75e6c53706f446e392034ef1649f6b53::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_75e6c53706f446e392034ef1649f6b53:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_75e6c53706f446e392034ef1649f6b53" class="color" data-tooltip="RGBA: 182, 48, 139, 1.0
   HEXA: #b6308bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_760bcb53cb1e44de98b85f98bffba113 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 64, 126, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_760bcb53cb1e44de98b85f98bffba113::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_760bcb53cb1e44de98b85f98bffba113:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_760bcb53cb1e44de98b85f98bffba113" class="color" data-tooltip="RGBA: 197, 64, 126, 1.0
   HEXA: #c5407eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1c6af54722b54d6f96b953d0189b1a53 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 78, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1c6af54722b54d6f96b953d0189b1a53::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1c6af54722b54d6f96b953d0189b1a53:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1c6af54722b54d6f96b953d0189b1a53" class="color" data-tooltip="RGBA: 209, 78, 114, 1.0
   HEXA: #d14e72ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7d21e436effc4147a63096c32c2d5513 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 94, 102, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d21e436effc4147a63096c32c2d5513::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d21e436effc4147a63096c32c2d5513:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d21e436effc4147a63096c32c2d5513" class="color" data-tooltip="RGBA: 221, 94, 102, 1.0
   HEXA: #dd5e66ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_18af8bfd457948358952c484fe4b5ce1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 110, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_18af8bfd457948358952c484fe4b5ce1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_18af8bfd457948358952c484fe4b5ce1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_18af8bfd457948358952c484fe4b5ce1" class="color" data-tooltip="RGBA: 231, 110, 91, 1.0
   HEXA: #e76e5bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_36e2fdab7149431cab4d761cd18d63a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(239, 126, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_36e2fdab7149431cab4d761cd18d63a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_36e2fdab7149431cab4d761cd18d63a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_36e2fdab7149431cab4d761cd18d63a3" class="color" data-tooltip="RGBA: 239, 126, 80, 1.0
   HEXA: #ef7e50ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef5e23293f6a4058a49d951ae3e0df5b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 144, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef5e23293f6a4058a49d951ae3e0df5b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef5e23293f6a4058a49d951ae3e0df5b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef5e23293f6a4058a49d951ae3e0df5b" class="color" data-tooltip="RGBA: 247, 144, 68, 1.0
   HEXA: #f79044ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7355e7f61e464f59a1c9a0ea2abd093a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 162, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7355e7f61e464f59a1c9a0ea2abd093a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7355e7f61e464f59a1c9a0ea2abd093a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7355e7f61e464f59a1c9a0ea2abd093a" class="color" data-tooltip="RGBA: 251, 162, 56, 1.0
   HEXA: #fba238ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_299c0de985c44dd0ae60eb5d38209ca2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 183, 45, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_299c0de985c44dd0ae60eb5d38209ca2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_299c0de985c44dd0ae60eb5d38209ca2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_299c0de985c44dd0ae60eb5d38209ca2" class="color" data-tooltip="RGBA: 254, 183, 45, 1.0
   HEXA: #feb72dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d029df4a71da42eebe8247b07679241e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 203, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d029df4a71da42eebe8247b07679241e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d029df4a71da42eebe8247b07679241e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d029df4a71da42eebe8247b07679241e" class="color" data-tooltip="RGBA: 253, 203, 38, 1.0
   HEXA: #fdcb26ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4e471f231b0948e291d8b2495c89074b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 226, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4e471f231b0948e291d8b2495c89074b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4e471f231b0948e291d8b2495c89074b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4e471f231b0948e291d8b2495c89074b" class="color" data-tooltip="RGBA: 247, 226, 37, 1.0
   HEXA: #f7e225ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_525a3fa35ec14427a3926deaa7e3dcd6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 249, 33, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_525a3fa35ec14427a3926deaa7e3dcd6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_525a3fa35ec14427a3926deaa7e3dcd6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_525a3fa35ec14427a3926deaa7e3dcd6" class="color" data-tooltip="RGBA: 240, 249, 33, 1.0
   HEXA: #f0f921ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_fa73e9c2059d492b840f4193caa88c23 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_fa73e9c2059d492b840f4193caa88c23 div { flex: 1 1 0; }
           #_fa73e9c2059d492b840f4193caa88c23 div.color { width: 100%; height: 100%; }
           #_fa73e9c2059d492b840f4193caa88c23 div.cmap { width: 100%; height: auto; }
           #_fa73e9c2059d492b840f4193caa88c23 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>viridis</strong>
       
       <div id="_fa73e9c2059d492b840f4193caa88c23" class="color-map">
           
                           <div>
                   <style>
       #_3040c889ee58492aa809f99f224b2545 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(68, 1, 84, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3040c889ee58492aa809f99f224b2545::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3040c889ee58492aa809f99f224b2545:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3040c889ee58492aa809f99f224b2545" class="color" data-tooltip="RGBA: 68, 1, 84, 1.0
   HEXA: #440154ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_30cd8adebab449049edac682bef2aed3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(72, 20, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30cd8adebab449049edac682bef2aed3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30cd8adebab449049edac682bef2aed3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30cd8adebab449049edac682bef2aed3" class="color" data-tooltip="RGBA: 72, 20, 103, 1.0
   HEXA: #481467ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_169366985a824b6e9af13b3dcb97610a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(72, 38, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_169366985a824b6e9af13b3dcb97610a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_169366985a824b6e9af13b3dcb97610a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_169366985a824b6e9af13b3dcb97610a" class="color" data-tooltip="RGBA: 72, 38, 119, 1.0
   HEXA: #482677ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cff35497a6d74328b64cbb8defa66574 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 55, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cff35497a6d74328b64cbb8defa66574::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cff35497a6d74328b64cbb8defa66574:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cff35497a6d74328b64cbb8defa66574" class="color" data-tooltip="RGBA: 69, 55, 129, 1.0
   HEXA: #453781ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1f053bcd13ee4ab29f60844b48142af1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 71, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1f053bcd13ee4ab29f60844b48142af1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1f053bcd13ee4ab29f60844b48142af1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1f053bcd13ee4ab29f60844b48142af1" class="color" data-tooltip="RGBA: 63, 71, 136, 1.0
   HEXA: #3f4788ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5795564fa5d74e4ca9004e47833dfdcd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 85, 140, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5795564fa5d74e4ca9004e47833dfdcd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5795564fa5d74e4ca9004e47833dfdcd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5795564fa5d74e4ca9004e47833dfdcd" class="color" data-tooltip="RGBA: 57, 85, 140, 1.0
   HEXA: #39558cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b3ad77458c64482d8c8824622ed087e2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 100, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b3ad77458c64482d8c8824622ed087e2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b3ad77458c64482d8c8824622ed087e2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b3ad77458c64482d8c8824622ed087e2" class="color" data-tooltip="RGBA: 50, 100, 142, 1.0
   HEXA: #32648eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3464f806abdb4a379702f6e577e0851b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(45, 113, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3464f806abdb4a379702f6e577e0851b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3464f806abdb4a379702f6e577e0851b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3464f806abdb4a379702f6e577e0851b" class="color" data-tooltip="RGBA: 45, 113, 142, 1.0
   HEXA: #2d718eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_30d8d86b6f2b4df1abd921ee0f4b7a95 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(40, 125, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30d8d86b6f2b4df1abd921ee0f4b7a95::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30d8d86b6f2b4df1abd921ee0f4b7a95:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30d8d86b6f2b4df1abd921ee0f4b7a95" class="color" data-tooltip="RGBA: 40, 125, 142, 1.0
   HEXA: #287d8eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2c3c5b02ef514c7f897bdeba827510e4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 138, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2c3c5b02ef514c7f897bdeba827510e4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2c3c5b02ef514c7f897bdeba827510e4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2c3c5b02ef514c7f897bdeba827510e4" class="color" data-tooltip="RGBA: 35, 138, 141, 1.0
   HEXA: #238a8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5465d9708abe4d849546da94aa323d05 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 150, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5465d9708abe4d849546da94aa323d05::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5465d9708abe4d849546da94aa323d05:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5465d9708abe4d849546da94aa323d05" class="color" data-tooltip="RGBA: 31, 150, 139, 1.0
   HEXA: #1f968bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5471ca23279c40478f972e65642830a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(32, 163, 134, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5471ca23279c40478f972e65642830a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5471ca23279c40478f972e65642830a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5471ca23279c40478f972e65642830a9" class="color" data-tooltip="RGBA: 32, 163, 134, 1.0
   HEXA: #20a386ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ea25359dab34e6e9c4faf5f4056f75b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 175, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ea25359dab34e6e9c4faf5f4056f75b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ea25359dab34e6e9c4faf5f4056f75b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ea25359dab34e6e9c4faf5f4056f75b" class="color" data-tooltip="RGBA: 41, 175, 127, 1.0
   HEXA: #29af7fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_01966fb1c25941fc84c912f02a5a253f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 187, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_01966fb1c25941fc84c912f02a5a253f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_01966fb1c25941fc84c912f02a5a253f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_01966fb1c25941fc84c912f02a5a253f" class="color" data-tooltip="RGBA: 59, 187, 117, 1.0
   HEXA: #3bbb75ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_077f5bf9d937491a8031e2692a0c5542 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(86, 198, 103, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_077f5bf9d937491a8031e2692a0c5542::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_077f5bf9d937491a8031e2692a0c5542:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_077f5bf9d937491a8031e2692a0c5542" class="color" data-tooltip="RGBA: 86, 198, 103, 1.0
   HEXA: #56c667ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5354fb8e05c94fc095e51423111add4f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(115, 208, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5354fb8e05c94fc095e51423111add4f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5354fb8e05c94fc095e51423111add4f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5354fb8e05c94fc095e51423111add4f" class="color" data-tooltip="RGBA: 115, 208, 86, 1.0
   HEXA: #73d056ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5ee74b6a380b415cb94d4051c5a6ee39 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(149, 216, 64, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5ee74b6a380b415cb94d4051c5a6ee39::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5ee74b6a380b415cb94d4051c5a6ee39:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5ee74b6a380b415cb94d4051c5a6ee39" class="color" data-tooltip="RGBA: 149, 216, 64, 1.0
   HEXA: #95d840ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9f5da6efdf8e431f958982a068c1af3f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(184, 222, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9f5da6efdf8e431f958982a068c1af3f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9f5da6efdf8e431f958982a068c1af3f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9f5da6efdf8e431f958982a068c1af3f" class="color" data-tooltip="RGBA: 184, 222, 41, 1.0
   HEXA: #b8de29ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b840df45a64a446d942833d5a969a6a3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 227, 24, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b840df45a64a446d942833d5a969a6a3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b840df45a64a446d942833d5a969a6a3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b840df45a64a446d942833d5a969a6a3" class="color" data-tooltip="RGBA: 221, 227, 24, 1.0
   HEXA: #dde318ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac7a737cabfe4dcc9eec5b955f4106c7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(253, 231, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac7a737cabfe4dcc9eec5b955f4106c7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac7a737cabfe4dcc9eec5b955f4106c7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac7a737cabfe4dcc9eec5b955f4106c7" class="color" data-tooltip="RGBA: 253, 231, 37, 1.0
   HEXA: #fde725ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_94a33bc89b454ddabdd52c0be66e3b63 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_94a33bc89b454ddabdd52c0be66e3b63 div { flex: 1 1 0; }
           #_94a33bc89b454ddabdd52c0be66e3b63 div.color { width: 100%; height: 100%; }
           #_94a33bc89b454ddabdd52c0be66e3b63 div.cmap { width: 100%; height: auto; }
           #_94a33bc89b454ddabdd52c0be66e3b63 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>cube1</strong>
       
       <div id="_94a33bc89b454ddabdd52c0be66e3b63" class="color-map">
           
                           <div>
                   <style>
       #_20c4c5a00259416e82284b8bc82af0ee { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 0, 133, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_20c4c5a00259416e82284b8bc82af0ee::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_20c4c5a00259416e82284b8bc82af0ee:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_20c4c5a00259416e82284b8bc82af0ee" class="color" data-tooltip="RGBA: 120, 0, 133, 1.0
   HEXA: #780085ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9ac7efe7c1484d62869ab033e83b881a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(130, 9, 170, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9ac7efe7c1484d62869ab033e83b881a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9ac7efe7c1484d62869ab033e83b881a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9ac7efe7c1484d62869ab033e83b881a" class="color" data-tooltip="RGBA: 130, 9, 170, 1.0
   HEXA: #8209aaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf2d0d56919541ee8244f98b00640642 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(129, 42, 208, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf2d0d56919541ee8244f98b00640642::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf2d0d56919541ee8244f98b00640642:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf2d0d56919541ee8244f98b00640642" class="color" data-tooltip="RGBA: 129, 42, 208, 1.0
   HEXA: #812ad0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eeaacbc4e88b4a7e930afe93e59b369c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 77, 237, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eeaacbc4e88b4a7e930afe93e59b369c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eeaacbc4e88b4a7e930afe93e59b369c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eeaacbc4e88b4a7e930afe93e59b369c" class="color" data-tooltip="RGBA: 121, 77, 237, 1.0
   HEXA: #794dedff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e1396e1dfce845f2af5dbfcb9078c81f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 104, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e1396e1dfce845f2af5dbfcb9078c81f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e1396e1dfce845f2af5dbfcb9078c81f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e1396e1dfce845f2af5dbfcb9078c81f" class="color" data-tooltip="RGBA: 107, 104, 253, 1.0
   HEXA: #6b68fdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3c727f0e98cf4064a9666e9c49006a95 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 130, 243, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c727f0e98cf4064a9666e9c49006a95::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c727f0e98cf4064a9666e9c49006a95:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c727f0e98cf4064a9666e9c49006a95" class="color" data-tooltip="RGBA: 95, 130, 243, 1.0
   HEXA: #5f82f3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6f4dadfba1854d27962ae94217f39cdb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(80, 152, 224, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6f4dadfba1854d27962ae94217f39cdb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6f4dadfba1854d27962ae94217f39cdb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6f4dadfba1854d27962ae94217f39cdb" class="color" data-tooltip="RGBA: 80, 152, 224, 1.0
   HEXA: #5098e0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e595d285c65840799db82a9af5104efc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(63, 171, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e595d285c65840799db82a9af5104efc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e595d285c65840799db82a9af5104efc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e595d285c65840799db82a9af5104efc" class="color" data-tooltip="RGBA: 63, 171, 201, 1.0
   HEXA: #3fabc9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7aac8150ba474a89960e3d1ec79aadd6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 188, 174, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7aac8150ba474a89960e3d1ec79aadd6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7aac8150ba474a89960e3d1ec79aadd6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7aac8150ba474a89960e3d1ec79aadd6" class="color" data-tooltip="RGBA: 58, 188, 174, 1.0
   HEXA: #3abcaeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50ec128231fd497ca8ba70fbea324ae9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 202, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50ec128231fd497ca8ba70fbea324ae9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50ec128231fd497ca8ba70fbea324ae9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50ec128231fd497ca8ba70fbea324ae9" class="color" data-tooltip="RGBA: 69, 202, 142, 1.0
   HEXA: #45ca8eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_be04194e78f64cf88e04831b70b18d6d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(77, 212, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_be04194e78f64cf88e04831b70b18d6d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_be04194e78f64cf88e04831b70b18d6d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_be04194e78f64cf88e04831b70b18d6d" class="color" data-tooltip="RGBA: 77, 212, 113, 1.0
   HEXA: #4dd471ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e771cc2c88614646a6c49ac3e450724f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 224, 78, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e771cc2c88614646a6c49ac3e450724f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e771cc2c88614646a6c49ac3e450724f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e771cc2c88614646a6c49ac3e450724f" class="color" data-tooltip="RGBA: 87, 224, 78, 1.0
   HEXA: #57e04eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d65dc118473420aac046563206e5d60 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 232, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d65dc118473420aac046563206e5d60::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d65dc118473420aac046563206e5d60:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d65dc118473420aac046563206e5d60" class="color" data-tooltip="RGBA: 109, 232, 75, 1.0
   HEXA: #6de84bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9636dca290b743869c57d71fc2febb35 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(142, 235, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9636dca290b743869c57d71fc2febb35::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9636dca290b743869c57d71fc2febb35:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9636dca290b743869c57d71fc2febb35" class="color" data-tooltip="RGBA: 142, 235, 82, 1.0
   HEXA: #8eeb52ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_def1f5fd96ef4bea9d2ed279449b79eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(175, 236, 87, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_def1f5fd96ef4bea9d2ed279449b79eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_def1f5fd96ef4bea9d2ed279449b79eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_def1f5fd96ef4bea9d2ed279449b79eb" class="color" data-tooltip="RGBA: 175, 236, 87, 1.0
   HEXA: #afec57ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_36b9471e045048cd9f5b68f955198468 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 236, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_36b9471e045048cd9f5b68f955198468::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_36b9471e045048cd9f5b68f955198468:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_36b9471e045048cd9f5b68f955198468" class="color" data-tooltip="RGBA: 200, 236, 89, 1.0
   HEXA: #c8ec59ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5eaa07432954481a905c6e8bfb4a6032 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 226, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5eaa07432954481a905c6e8bfb4a6032::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5eaa07432954481a905c6e8bfb4a6032:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5eaa07432954481a905c6e8bfb4a6032" class="color" data-tooltip="RGBA: 216, 226, 91, 1.0
   HEXA: #d8e25bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1e33bc25b59c4a8fad55a8833b943d50 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 208, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1e33bc25b59c4a8fad55a8833b943d50::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1e33bc25b59c4a8fad55a8833b943d50:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1e33bc25b59c4a8fad55a8833b943d50" class="color" data-tooltip="RGBA: 231, 208, 93, 1.0
   HEXA: #e7d05dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_56a5bbeb15fc4971984944ccc8e808e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 182, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_56a5bbeb15fc4971984944ccc8e808e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_56a5bbeb15fc4971984944ccc8e808e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_56a5bbeb15fc4971984944ccc8e808e0" class="color" data-tooltip="RGBA: 245, 182, 94, 1.0
   HEXA: #f5b65eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7f580e299e2c48bca9bc033de9a76540 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 150, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7f580e299e2c48bca9bc033de9a76540::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7f580e299e2c48bca9bc033de9a76540:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7f580e299e2c48bca9bc033de9a76540" class="color" data-tooltip="RGBA: 249, 150, 91, 1.0
   HEXA: #f9965bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a78d408548114fd4b607419cba93d516 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a78d408548114fd4b607419cba93d516 div { flex: 1 1 0; }
           #_a78d408548114fd4b607419cba93d516 div.color { width: 100%; height: 100%; }
           #_a78d408548114fd4b607419cba93d516 div.cmap { width: 100%; height: auto; }
           #_a78d408548114fd4b607419cba93d516 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>cubeyf</strong>
       
       <div id="_a78d408548114fd4b607419cba93d516" class="color-map">
           
                           <div>
                   <style>
       #_d97b8696beba4282ae9a48066b66ce34 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 2, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d97b8696beba4282ae9a48066b66ce34::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d97b8696beba4282ae9a48066b66ce34:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d97b8696beba4282ae9a48066b66ce34" class="color" data-tooltip="RGBA: 123, 2, 144, 1.0
   HEXA: #7b0290ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f7b53583578b4fc2862ad66c1495a25a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 13, 177, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f7b53583578b4fc2862ad66c1495a25a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f7b53583578b4fc2862ad66c1495a25a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f7b53583578b4fc2862ad66c1495a25a" class="color" data-tooltip="RGBA: 133, 13, 177, 1.0
   HEXA: #850db1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0983f2fd8bd9496c8833095c8eedfa62 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(133, 45, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0983f2fd8bd9496c8833095c8eedfa62::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0983f2fd8bd9496c8833095c8eedfa62:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0983f2fd8bd9496c8833095c8eedfa62" class="color" data-tooltip="RGBA: 133, 45, 206, 1.0
   HEXA: #852dceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c8ad93114c7d470b879409aebb500f02 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 69, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c8ad93114c7d470b879409aebb500f02::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c8ad93114c7d470b879409aebb500f02:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c8ad93114c7d470b879409aebb500f02" class="color" data-tooltip="RGBA: 127, 69, 230, 1.0
   HEXA: #7f45e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cca402b73a824b5b89a14ca92f330c11 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(113, 91, 251, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cca402b73a824b5b89a14ca92f330c11::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cca402b73a824b5b89a14ca92f330c11:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cca402b73a824b5b89a14ca92f330c11" class="color" data-tooltip="RGBA: 113, 91, 251, 1.0
   HEXA: #715bfbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3c4c2f8437dc4e25be0f0ae330a92336 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 110, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3c4c2f8437dc4e25be0f0ae330a92336::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3c4c2f8437dc4e25be0f0ae330a92336:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3c4c2f8437dc4e25be0f0ae330a92336" class="color" data-tooltip="RGBA: 104, 110, 255, 1.0
   HEXA: #686effff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_db857419c37b4d25bd03d4a9afb1e1e6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 132, 242, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db857419c37b4d25bd03d4a9afb1e1e6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db857419c37b4d25bd03d4a9afb1e1e6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db857419c37b4d25bd03d4a9afb1e1e6" class="color" data-tooltip="RGBA: 94, 132, 242, 1.0
   HEXA: #5e84f2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d13b868c921643298fff4868d74c1edd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(82, 148, 227, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d13b868c921643298fff4868d74c1edd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d13b868c921643298fff4868d74c1edd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d13b868c921643298fff4868d74c1edd" class="color" data-tooltip="RGBA: 82, 148, 227, 1.0
   HEXA: #5294e3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ecf8971d44884bb38e378c19e453d66c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(71, 164, 211, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ecf8971d44884bb38e378c19e453d66c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ecf8971d44884bb38e378c19e453d66c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ecf8971d44884bb38e378c19e453d66c" class="color" data-tooltip="RGBA: 71, 164, 211, 1.0
   HEXA: #47a4d3ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_99ff8bcefb964be2a9a66dedd5b9a8db { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(58, 180, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_99ff8bcefb964be2a9a66dedd5b9a8db::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_99ff8bcefb964be2a9a66dedd5b9a8db:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_99ff8bcefb964be2a9a66dedd5b9a8db" class="color" data-tooltip="RGBA: 58, 180, 189, 1.0
   HEXA: #3ab4bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d56d605d16f4a5597b830a304581db3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 191, 168, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d56d605d16f4a5597b830a304581db3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d56d605d16f4a5597b830a304581db3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d56d605d16f4a5597b830a304581db3" class="color" data-tooltip="RGBA: 60, 191, 168, 1.0
   HEXA: #3cbfa8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2aaa8d343af144718abb996089234b7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(69, 202, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2aaa8d343af144718abb996089234b7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2aaa8d343af144718abb996089234b7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2aaa8d343af144718abb996089234b7b" class="color" data-tooltip="RGBA: 69, 202, 141, 1.0
   HEXA: #45ca8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_999b318f6fdb46b29dc2073559b1ba93 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(76, 211, 118, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_999b318f6fdb46b29dc2073559b1ba93::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_999b318f6fdb46b29dc2073559b1ba93:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_999b318f6fdb46b29dc2073559b1ba93" class="color" data-tooltip="RGBA: 76, 211, 118, 1.0
   HEXA: #4cd376ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_034b53cd14354c9fbcb78ecaffe9c36a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(84, 219, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_034b53cd14354c9fbcb78ecaffe9c36a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_034b53cd14354c9fbcb78ecaffe9c36a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_034b53cd14354c9fbcb78ecaffe9c36a" class="color" data-tooltip="RGBA: 84, 219, 95, 1.0
   HEXA: #54db5fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57d976a5bc114cce8cb9e4fa531cd664 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(92, 227, 73, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57d976a5bc114cce8cb9e4fa531cd664::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57d976a5bc114cce8cb9e4fa531cd664:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57d976a5bc114cce8cb9e4fa531cd664" class="color" data-tooltip="RGBA: 92, 227, 73, 1.0
   HEXA: #5ce349ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_47f8fbec04d14b00b6035717a724998b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(113, 232, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_47f8fbec04d14b00b6035717a724998b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_47f8fbec04d14b00b6035717a724998b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_47f8fbec04d14b00b6035717a724998b" class="color" data-tooltip="RGBA: 113, 232, 76, 1.0
   HEXA: #71e84cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4add0efd13f54bcea876f49bbfa60b05 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(145, 235, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4add0efd13f54bcea876f49bbfa60b05::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4add0efd13f54bcea876f49bbfa60b05:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4add0efd13f54bcea876f49bbfa60b05" class="color" data-tooltip="RGBA: 145, 235, 82, 1.0
   HEXA: #91eb52ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_73afe012d0504edb8f0878f0dc308f89 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 236, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_73afe012d0504edb8f0878f0dc308f89::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_73afe012d0504edb8f0878f0dc308f89:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_73afe012d0504edb8f0878f0dc308f89" class="color" data-tooltip="RGBA: 171, 236, 86, 1.0
   HEXA: #abec56ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_651c53f79e414223b6f02eb1db3d83e0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 236, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_651c53f79e414223b6f02eb1db3d83e0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_651c53f79e414223b6f02eb1db3d83e0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_651c53f79e414223b6f02eb1db3d83e0" class="color" data-tooltip="RGBA: 191, 236, 89, 1.0
   HEXA: #bfec59ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a77b5d0222d047f0bef6508cdb9e7c01 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 235, 91, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a77b5d0222d047f0bef6508cdb9e7c01::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a77b5d0222d047f0bef6508cdb9e7c01:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a77b5d0222d047f0bef6508cdb9e7c01" class="color" data-tooltip="RGBA: 209, 235, 91, 1.0
   HEXA: #d1eb5bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_638c62bf18024dd19c3f568245f87516 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_638c62bf18024dd19c3f568245f87516 div { flex: 1 1 0; }
           #_638c62bf18024dd19c3f568245f87516 div.color { width: 100%; height: 100%; }
           #_638c62bf18024dd19c3f568245f87516 div.cmap { width: 100%; height: auto; }
           #_638c62bf18024dd19c3f568245f87516 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>linearl</strong>
       
       <div id="_638c62bf18024dd19c3f568245f87516" class="color-map">
           
                           <div>
                   <style>
       #_14c6a757b3f94b3e8fab86d9d5f4f258 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(4, 4, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_14c6a757b3f94b3e8fab86d9d5f4f258::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_14c6a757b3f94b3e8fab86d9d5f4f258:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_14c6a757b3f94b3e8fab86d9d5f4f258" class="color" data-tooltip="RGBA: 4, 4, 4, 1.0
   HEXA: #040404ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3285b7705a9b408fb043f9acfc803eb6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(32, 12, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3285b7705a9b408fb043f9acfc803eb6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3285b7705a9b408fb043f9acfc803eb6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3285b7705a9b408fb043f9acfc803eb6" class="color" data-tooltip="RGBA: 32, 12, 28, 1.0
   HEXA: #200c1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d92fec7b2afa4d4db01f678d78ecce25 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 21, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d92fec7b2afa4d4db01f678d78ecce25::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d92fec7b2afa4d4db01f678d78ecce25:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d92fec7b2afa4d4db01f678d78ecce25" class="color" data-tooltip="RGBA: 46, 21, 50, 1.0
   HEXA: #2e1532ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0672065017b64ae0930318ea0347f628 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(45, 28, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0672065017b64ae0930318ea0347f628::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0672065017b64ae0930318ea0347f628:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0672065017b64ae0930318ea0347f628" class="color" data-tooltip="RGBA: 45, 28, 95, 1.0
   HEXA: #2d1c5fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_72a39ff2888c4367916a64d549861a22 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(34, 44, 120, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_72a39ff2888c4367916a64d549861a22::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_72a39ff2888c4367916a64d549861a22:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_72a39ff2888c4367916a64d549861a22" class="color" data-tooltip="RGBA: 34, 44, 120, 1.0
   HEXA: #222c78ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_38d059c5a72945408f28e2cf19264425 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 60, 129, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_38d059c5a72945408f28e2cf19264425::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_38d059c5a72945408f28e2cf19264425:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_38d059c5a72945408f28e2cf19264425" class="color" data-tooltip="RGBA: 27, 60, 129, 1.0
   HEXA: #1b3c81ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e2e5a31549a747eba3656b38cf438d8b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(16, 79, 128, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e2e5a31549a747eba3656b38cf438d8b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e2e5a31549a747eba3656b38cf438d8b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e2e5a31549a747eba3656b38cf438d8b" class="color" data-tooltip="RGBA: 16, 79, 128, 1.0
   HEXA: #104f80ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c04a36b4b8554649933f9e797f603fe1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(1, 98, 111, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c04a36b4b8554649933f9e797f603fe1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c04a36b4b8554649933f9e797f603fe1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c04a36b4b8554649933f9e797f603fe1" class="color" data-tooltip="RGBA: 1, 98, 111, 1.0
   HEXA: #01626fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c16128b39f734086afce4c971bb9bc15 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 115, 95, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c16128b39f734086afce4c971bb9bc15::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c16128b39f734086afce4c971bb9bc15:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c16128b39f734086afce4c971bb9bc15" class="color" data-tooltip="RGBA: 0, 115, 95, 1.0
   HEXA: #00735fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c39c0942c3be436a98288613423ded78 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 133, 73, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c39c0942c3be436a98288613423ded78::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c39c0942c3be436a98288613423ded78:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c39c0942c3be436a98288613423ded78" class="color" data-tooltip="RGBA: 0, 133, 73, 1.0
   HEXA: #008549ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3b2753080218408a944b983148ec6f2b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 150, 56, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b2753080218408a944b983148ec6f2b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b2753080218408a944b983148ec6f2b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b2753080218408a944b983148ec6f2b" class="color" data-tooltip="RGBA: 0, 150, 56, 1.0
   HEXA: #009638ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_205043dfdd304a1e8b3bcd2af9f1d306 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 168, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_205043dfdd304a1e8b3bcd2af9f1d306::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_205043dfdd304a1e8b3bcd2af9f1d306:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_205043dfdd304a1e8b3bcd2af9f1d306" class="color" data-tooltip="RGBA: 0, 168, 34, 1.0
   HEXA: #00a822ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_295c0058d16247a68c5f028f34fb25a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 179, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_295c0058d16247a68c5f028f34fb25a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_295c0058d16247a68c5f028f34fb25a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_295c0058d16247a68c5f028f34fb25a4" class="color" data-tooltip="RGBA: 59, 179, 0, 1.0
   HEXA: #3bb300ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_825796055ac24045864040b81b1a04eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(87, 192, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_825796055ac24045864040b81b1a04eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_825796055ac24045864040b81b1a04eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_825796055ac24045864040b81b1a04eb" class="color" data-tooltip="RGBA: 87, 192, 0, 1.0
   HEXA: #57c000ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a58bc92ca5e54af493a278ce8eb8e839 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(161, 197, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a58bc92ca5e54af493a278ce8eb8e839::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a58bc92ca5e54af493a278ce8eb8e839:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a58bc92ca5e54af493a278ce8eb8e839" class="color" data-tooltip="RGBA: 161, 197, 0, 1.0
   HEXA: #a1c500ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_eb438cef559c48bba54c6fa9d39dd87d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 202, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_eb438cef559c48bba54c6fa9d39dd87d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_eb438cef559c48bba54c6fa9d39dd87d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_eb438cef559c48bba54c6fa9d39dd87d" class="color" data-tooltip="RGBA: 203, 202, 51, 1.0
   HEXA: #cbca33ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b106d808d984112aa2e21233de752ab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 209, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b106d808d984112aa2e21233de752ab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b106d808d984112aa2e21233de752ab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b106d808d984112aa2e21233de752ab" class="color" data-tooltip="RGBA: 231, 209, 151, 1.0
   HEXA: #e7d197ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e77f3ab14ef24c028afa7b07a08f9ebd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 220, 198, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e77f3ab14ef24c028afa7b07a08f9ebd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e77f3ab14ef24c028afa7b07a08f9ebd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e77f3ab14ef24c028afa7b07a08f9ebd" class="color" data-tooltip="RGBA: 247, 220, 198, 1.0
   HEXA: #f7dcc6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1c06f9448fe444919d3e6d788b536c01 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 239, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1c06f9448fe444919d3e6d788b536c01::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1c06f9448fe444919d3e6d788b536c01:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1c06f9448fe444919d3e6d788b536c01" class="color" data-tooltip="RGBA: 247, 239, 232, 1.0
   HEXA: #f7efe8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6bc3f1638b2c4592a69dd0c3904c6ad7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 255, 255, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6bc3f1638b2c4592a69dd0c3904c6ad7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6bc3f1638b2c4592a69dd0c3904c6ad7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6bc3f1638b2c4592a69dd0c3904c6ad7" class="color" data-tooltip="RGBA: 255, 255, 255, 1.0
   HEXA: #ffffffff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_d0edf492131c4ceb9f568c20863f1901 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_d0edf492131c4ceb9f568c20863f1901 div { flex: 1 1 0; }
           #_d0edf492131c4ceb9f568c20863f1901 div.color { width: 100%; height: 100%; }
           #_d0edf492131c4ceb9f568c20863f1901 div.cmap { width: 100%; height: auto; }
           #_d0edf492131c4ceb9f568c20863f1901 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>chevalier</strong>
       
       <div id="_d0edf492131c4ceb9f568c20863f1901" class="color-map">
           
                           <div>
                   <style>
       #_f1f0342f4e5146b9ba18a49fb6e90da0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(53, 82, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1f0342f4e5146b9ba18a49fb6e90da0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1f0342f4e5146b9ba18a49fb6e90da0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1f0342f4e5146b9ba18a49fb6e90da0" class="color" data-tooltip="RGBA: 53, 82, 67, 1.0
   HEXA: #355243ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4c7999e4da8d4e749bd87038dc8563b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 202, 73, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4c7999e4da8d4e749bd87038dc8563b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4c7999e4da8d4e749bd87038dc8563b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4c7999e4da8d4e749bd87038dc8563b3" class="color" data-tooltip="RGBA: 254, 202, 73, 1.0
   HEXA: #feca49ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dc6eeeaa5a904a7fb8c795feff4efcba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(201, 213, 213, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dc6eeeaa5a904a7fb8c795feff4efcba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dc6eeeaa5a904a7fb8c795feff4efcba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dc6eeeaa5a904a7fb8c795feff4efcba" class="color" data-tooltip="RGBA: 201, 213, 213, 1.0
   HEXA: #c9d5d5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d29d678e27fa4ca6bebc3c783bc2b8fe { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(187, 162, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d29d678e27fa4ca6bebc3c783bc2b8fe::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d29d678e27fa4ca6bebc3c783bc2b8fe:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d29d678e27fa4ca6bebc3c783bc2b8fe" class="color" data-tooltip="RGBA: 187, 162, 137, 1.0
   HEXA: #bba289ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_273ac977dd264efd839d74036704ccb7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_273ac977dd264efd839d74036704ccb7 div { flex: 1 1 0; }
           #_273ac977dd264efd839d74036704ccb7 div.color { width: 100%; height: 100%; }
           #_273ac977dd264efd839d74036704ccb7 div.cmap { width: 100%; height: auto; }
           #_273ac977dd264efd839d74036704ccb7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>moonrise1</strong>
       
       <div id="_273ac977dd264efd839d74036704ccb7" class="color-map">
           
                           <div>
                   <style>
       #_1627c20da5fc45db95aa0e1c47452efc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 202, 221, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1627c20da5fc45db95aa0e1c47452efc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1627c20da5fc45db95aa0e1c47452efc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1627c20da5fc45db95aa0e1c47452efc" class="color" data-tooltip="RGBA: 114, 202, 221, 1.0
   HEXA: #72caddff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_76b105c5c69846a3963a91695ee14a72 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 165, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_76b105c5c69846a3963a91695ee14a72::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_76b105c5c69846a3963a91695ee14a72:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_76b105c5c69846a3963a91695ee14a72" class="color" data-tooltip="RGBA: 240, 165, 176, 1.0
   HEXA: #f0a5b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f59b77ce97df4de3b3fd3db7033e5f5c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 133, 54, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f59b77ce97df4de3b3fd3db7033e5f5c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f59b77ce97df4de3b3fd3db7033e5f5c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f59b77ce97df4de3b3fd3db7033e5f5c" class="color" data-tooltip="RGBA: 140, 133, 54, 1.0
   HEXA: #8c8536ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_abf4923fd3584b7299544155923a1147 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(195, 180, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_abf4923fd3584b7299544155923a1147::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_abf4923fd3584b7299544155923a1147:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_abf4923fd3584b7299544155923a1147" class="color" data-tooltip="RGBA: 195, 180, 119, 1.0
   HEXA: #c3b477ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d59429ed249a41d8b3b4df1c355b29b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(250, 208, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d59429ed249a41d8b3b4df1c355b29b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d59429ed249a41d8b3b4df1c355b29b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d59429ed249a41d8b3b4df1c355b29b3" class="color" data-tooltip="RGBA: 250, 208, 99, 1.0
   HEXA: #fad063ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_cf36b2ac06b94e94acaba678b9d3d5da {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_cf36b2ac06b94e94acaba678b9d3d5da div { flex: 1 1 0; }
           #_cf36b2ac06b94e94acaba678b9d3d5da div.color { width: 100%; height: 100%; }
           #_cf36b2ac06b94e94acaba678b9d3d5da div.cmap { width: 100%; height: auto; }
           #_cf36b2ac06b94e94acaba678b9d3d5da div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>mendl</strong>
       
       <div id="_cf36b2ac06b94e94acaba678b9d3d5da" class="color-map">
           
                           <div>
                   <style>
       #_db4317e3edb347e8bb9a904c080a532c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(222, 141, 185, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_db4317e3edb347e8bb9a904c080a532c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_db4317e3edb347e8bb9a904c080a532c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_db4317e3edb347e8bb9a904c080a532c" class="color" data-tooltip="RGBA: 222, 141, 185, 1.0
   HEXA: #de8db9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e9678e7d87274ea7b4dc0d19070906fb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(184, 192, 246, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e9678e7d87274ea7b4dc0d19070906fb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e9678e7d87274ea7b4dc0d19070906fb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e9678e7d87274ea7b4dc0d19070906fb" class="color" data-tooltip="RGBA: 184, 192, 246, 1.0
   HEXA: #b8c0f6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_26540f3dbf2e4565962e40e211ba50f6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 147, 135, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26540f3dbf2e4565962e40e211ba50f6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26540f3dbf2e4565962e40e211ba50f6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26540f3dbf2e4565962e40e211ba50f6" class="color" data-tooltip="RGBA: 207, 147, 135, 1.0
   HEXA: #cf9387ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_36d3cd66788c464fb437dc293490571c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(92, 128, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_36d3cd66788c464fb437dc293490571c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_36d3cd66788c464fb437dc293490571c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_36d3cd66788c464fb437dc293490571c" class="color" data-tooltip="RGBA: 92, 128, 204, 1.0
   HEXA: #5c80ccff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_de078ec0811a417aaa157db3bb5ec0dd {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_de078ec0811a417aaa157db3bb5ec0dd div { flex: 1 1 0; }
           #_de078ec0811a417aaa157db3bb5ec0dd div.color { width: 100%; height: 100%; }
           #_de078ec0811a417aaa157db3bb5ec0dd div.cmap { width: 100%; height: auto; }
           #_de078ec0811a417aaa157db3bb5ec0dd div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>margot1</strong>
       
       <div id="_de078ec0811a417aaa157db3bb5ec0dd" class="color-map">
           
                           <div>
                   <style>
       #_863814ddc5c146b6ad23c3b015ddb714 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 119, 18, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_863814ddc5c146b6ad23c3b015ddb714::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_863814ddc5c146b6ad23c3b015ddb714:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_863814ddc5c146b6ad23c3b015ddb714" class="color" data-tooltip="RGBA: 137, 119, 18, 1.0
   HEXA: #897712ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6fb516b1fd8a4dfea336434bc4eb7184 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(243, 194, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6fb516b1fd8a4dfea336434bc4eb7184::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6fb516b1fd8a4dfea336434bc4eb7184:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6fb516b1fd8a4dfea336434bc4eb7184" class="color" data-tooltip="RGBA: 243, 194, 164, 1.0
   HEXA: #f3c2a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ee78ca7c657a41caaff9cee49483d80a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(246, 159, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ee78ca7c657a41caaff9cee49483d80a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ee78ca7c657a41caaff9cee49483d80a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ee78ca7c657a41caaff9cee49483d80a" class="color" data-tooltip="RGBA: 246, 159, 151, 1.0
   HEXA: #f69f97ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f16134eaae6c4991bb4f826288ea8ad0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 214, 140, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f16134eaae6c4991bb4f826288ea8ad0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f16134eaae6c4991bb4f826288ea8ad0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f16134eaae6c4991bb4f826288ea8ad0" class="color" data-tooltip="RGBA: 254, 214, 140, 1.0
   HEXA: #fed68cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7355235e7d8748509c929ed50f748792 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(98, 144, 117, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7355235e7d8748509c929ed50f748792::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7355235e7d8748509c929ed50f748792:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7355235e7d8748509c929ed50f748792" class="color" data-tooltip="RGBA: 98, 144, 117, 1.0
   HEXA: #629075ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_a29b34c8d017495190cd27dfe6c5adbc {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_a29b34c8d017495190cd27dfe6c5adbc div { flex: 1 1 0; }
           #_a29b34c8d017495190cd27dfe6c5adbc div.color { width: 100%; height: 100%; }
           #_a29b34c8d017495190cd27dfe6c5adbc div.cmap { width: 100%; height: auto; }
           #_a29b34c8d017495190cd27dfe6c5adbc div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>cavalcanti</strong>
       
       <div id="_a29b34c8d017495190cd27dfe6c5adbc" class="color-map">
           
                           <div>
                   <style>
       #_1652ec0dc86a464a8ce35f577d0c6f42 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 170, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1652ec0dc86a464a8ce35f577d0c6f42::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1652ec0dc86a464a8ce35f577d0c6f42:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1652ec0dc86a464a8ce35f577d0c6f42" class="color" data-tooltip="RGBA: 209, 170, 0, 1.0
   HEXA: #d1aa00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a2aa297c65ec4f63860d83a96eeff945 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(8, 50, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a2aa297c65ec4f63860d83a96eeff945::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a2aa297c65ec4f63860d83a96eeff945:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a2aa297c65ec4f63860d83a96eeff945" class="color" data-tooltip="RGBA: 8, 50, 19, 1.0
   HEXA: #083213ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac2efb2d254c4bc9847fc6b390dfb520 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(146, 148, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac2efb2d254c4bc9847fc6b390dfb520::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac2efb2d254c4bc9847fc6b390dfb520:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac2efb2d254c4bc9847fc6b390dfb520" class="color" data-tooltip="RGBA: 146, 148, 96, 1.0
   HEXA: #929460ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7d9412f01d5f46b6bd2827d0bfc1c860 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(111, 152, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7d9412f01d5f46b6bd2827d0bfc1c860::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7d9412f01d5f46b6bd2827d0bfc1c860:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7d9412f01d5f46b6bd2827d0bfc1c860" class="color" data-tooltip="RGBA: 111, 152, 121, 1.0
   HEXA: #6f9879ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e6ec85e4ce384fcd8bd7d61693165792 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(132, 33, 17, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e6ec85e4ce384fcd8bd7d61693165792::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e6ec85e4ce384fcd8bd7d61693165792:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e6ec85e4ce384fcd8bd7d61693165792" class="color" data-tooltip="RGBA: 132, 33, 17, 1.0
   HEXA: #842111ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8c0ea3c1857a45f2b3df89e834073d5d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8c0ea3c1857a45f2b3df89e834073d5d div { flex: 1 1 0; }
           #_8c0ea3c1857a45f2b3df89e834073d5d div.color { width: 100%; height: 100%; }
           #_8c0ea3c1857a45f2b3df89e834073d5d div.cmap { width: 100%; height: auto; }
           #_8c0ea3c1857a45f2b3df89e834073d5d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>moonrise2</strong>
       
       <div id="_8c0ea3c1857a45f2b3df89e834073d5d" class="color-map">
           
                           <div>
                   <style>
       #_a8ed441f7ed2495490065a6e60417599 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 124, 116, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a8ed441f7ed2495490065a6e60417599::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a8ed441f7ed2495490065a6e60417599:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a8ed441f7ed2495490065a6e60417599" class="color" data-tooltip="RGBA: 102, 124, 116, 1.0
   HEXA: #667c74ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_25c51bc424354619b6d22b5d802a2134 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 106, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_25c51bc424354619b6d22b5d802a2134::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_25c51bc424354619b6d22b5d802a2134:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_25c51bc424354619b6d22b5d802a2134" class="color" data-tooltip="RGBA: 181, 106, 39, 1.0
   HEXA: #b56a27ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a8043f62467404296496d826444d0d1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 186, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a8043f62467404296496d826444d0d1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a8043f62467404296496d826444d0d1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a8043f62467404296496d826444d0d1" class="color" data-tooltip="RGBA: 194, 186, 124, 1.0
   HEXA: #c2ba7cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_443f01d69d914b71989346bc18afccb7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 25, 23, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_443f01d69d914b71989346bc18afccb7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_443f01d69d914b71989346bc18afccb7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_443f01d69d914b71989346bc18afccb7" class="color" data-tooltip="RGBA: 31, 25, 23, 1.0
   HEXA: #1f1917ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ae26d0929c904d6ebbbdedd8f3dc4b5d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ae26d0929c904d6ebbbdedd8f3dc4b5d div { flex: 1 1 0; }
           #_ae26d0929c904d6ebbbdedd8f3dc4b5d div.color { width: 100%; height: 100%; }
           #_ae26d0929c904d6ebbbdedd8f3dc4b5d div.cmap { width: 100%; height: auto; }
           #_ae26d0929c904d6ebbbdedd8f3dc4b5d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>margot2</strong>
       
       <div id="_ae26d0929c904d6ebbbdedd8f3dc4b5d" class="color-map">
           
                           <div>
                   <style>
       #_c9614174ecb6482eb95409f163bba41c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(118, 139, 147, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9614174ecb6482eb95409f163bba41c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9614174ecb6482eb95409f163bba41c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9614174ecb6482eb95409f163bba41c" class="color" data-tooltip="RGBA: 118, 139, 147, 1.0
   HEXA: #768b93ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b74e4ada16bb447c91d2e0a3abe553ff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 36, 15, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b74e4ada16bb447c91d2e0a3abe553ff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b74e4ada16bb447c91d2e0a3abe553ff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b74e4ada16bb447c91d2e0a3abe553ff" class="color" data-tooltip="RGBA: 188, 36, 15, 1.0
   HEXA: #bc240fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_576953e3f28d4fce81be7922e63d4b8d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 236, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_576953e3f28d4fce81be7922e63d4b8d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_576953e3f28d4fce81be7922e63d4b8d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_576953e3f28d4fce81be7922e63d4b8d" class="color" data-tooltip="RGBA: 249, 236, 197, 1.0
   HEXA: #f9ecc5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b699061aac0c463fbac497c83a615f99 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(212, 115, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b699061aac0c463fbac497c83a615f99::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b699061aac0c463fbac497c83a615f99:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b699061aac0c463fbac497c83a615f99" class="color" data-tooltip="RGBA: 212, 115, 41, 1.0
   HEXA: #d47329ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_19aba1cea8f54bffa91d79475290fd4c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_19aba1cea8f54bffa91d79475290fd4c div { flex: 1 1 0; }
           #_19aba1cea8f54bffa91d79475290fd4c div.color { width: 100%; height: 100%; }
           #_19aba1cea8f54bffa91d79475290fd4c div.cmap { width: 100%; height: auto; }
           #_19aba1cea8f54bffa91d79475290fd4c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>moonrise3</strong>
       
       <div id="_19aba1cea8f54bffa91d79475290fd4c" class="color-map">
           
                           <div>
                   <style>
       #_75b9820133454c4a831e9ade5dc72f14 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 218, 82, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_75b9820133454c4a831e9ade5dc72f14::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_75b9820133454c4a831e9ade5dc72f14:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_75b9820133454c4a831e9ade5dc72f14" class="color" data-tooltip="RGBA: 242, 218, 82, 1.0
   HEXA: #f2da52ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_099052ae68c74c3ca983f6289a7c06f2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 157, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_099052ae68c74c3ca983f6289a7c06f2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_099052ae68c74c3ca983f6289a7c06f2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_099052ae68c74c3ca983f6289a7c06f2" class="color" data-tooltip="RGBA: 197, 157, 0, 1.0
   HEXA: #c59d00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8da56ce2dcb24daebfc390cd7527f22c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(203, 203, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8da56ce2dcb24daebfc390cd7527f22c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8da56ce2dcb24daebfc390cd7527f22c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8da56ce2dcb24daebfc390cd7527f22c" class="color" data-tooltip="RGBA: 203, 203, 201, 1.0
   HEXA: #cbcbc9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f493742d84ca4dbebe8f1e1144b8c519 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(27, 30, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f493742d84ca4dbebe8f1e1144b8c519::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f493742d84ca4dbebe8f1e1144b8c519:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f493742d84ca4dbebe8f1e1144b8c519" class="color" data-tooltip="RGBA: 27, 30, 20, 1.0
   HEXA: #1b1e14ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_2e96809e34cd45ad8fcd51dc33579cc5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_2e96809e34cd45ad8fcd51dc33579cc5 div { flex: 1 1 0; }
           #_2e96809e34cd45ad8fcd51dc33579cc5 div.color { width: 100%; height: 100%; }
           #_2e96809e34cd45ad8fcd51dc33579cc5 div.cmap { width: 100%; height: auto; }
           #_2e96809e34cd45ad8fcd51dc33579cc5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>grandbudapest1</strong>
       
       <div id="_2e96809e34cd45ad8fcd51dc33579cc5" class="color-map">
           
                           <div>
                   <style>
       #_61b1e154786a4b858955e326b8ea8b98 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(238, 174, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61b1e154786a4b858955e326b8ea8b98::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61b1e154786a4b858955e326b8ea8b98:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61b1e154786a4b858955e326b8ea8b98" class="color" data-tooltip="RGBA: 238, 174, 101, 1.0
   HEXA: #eeae65ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_479a61e32f804e00886c0722bb69c065 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 79, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_479a61e32f804e00886c0722bb69c065::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_479a61e32f804e00886c0722bb69c065:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_479a61e32f804e00886c0722bb69c065" class="color" data-tooltip="RGBA: 251, 79, 85, 1.0
   HEXA: #fb4f55ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_659c50274d45434d807214f3973bde5f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(72, 19, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_659c50274d45434d807214f3973bde5f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_659c50274d45434d807214f3973bde5f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_659c50274d45434d807214f3973bde5f" class="color" data-tooltip="RGBA: 72, 19, 19, 1.0
   HEXA: #481313ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aac767a888034e90979572f5300f050f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 95, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aac767a888034e90979572f5300f050f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aac767a888034e90979572f5300f050f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aac767a888034e90979572f5300f050f" class="color" data-tooltip="RGBA: 204, 95, 39, 1.0
   HEXA: #cc5f27ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_63a731f6bdaa43978ead0b57be22d8ab {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_63a731f6bdaa43978ead0b57be22d8ab div { flex: 1 1 0; }
           #_63a731f6bdaa43978ead0b57be22d8ab div.color { width: 100%; height: 100%; }
           #_63a731f6bdaa43978ead0b57be22d8ab div.cmap { width: 100%; height: auto; }
           #_63a731f6bdaa43978ead0b57be22d8ab div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>moonrise4</strong>
       
       <div id="_63a731f6bdaa43978ead0b57be22d8ab" class="color-map">
           
                           <div>
                   <style>
       #_f13ca746deee4c7d9939628e5629ec0d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 135, 97, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f13ca746deee4c7d9939628e5629ec0d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f13ca746deee4c7d9939628e5629ec0d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f13ca746deee4c7d9939628e5629ec0d" class="color" data-tooltip="RGBA: 123, 135, 97, 1.0
   HEXA: #7b8761ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_33e52830e6084bb78d92db9daa67e237 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(193, 166, 46, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_33e52830e6084bb78d92db9daa67e237::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_33e52830e6084bb78d92db9daa67e237:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_33e52830e6084bb78d92db9daa67e237" class="color" data-tooltip="RGBA: 193, 166, 46, 1.0
   HEXA: #c1a62eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_533359f36ae44a019e29afcda8b18eac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(79, 143, 107, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_533359f36ae44a019e29afcda8b18eac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_533359f36ae44a019e29afcda8b18eac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_533359f36ae44a019e29afcda8b18eac" class="color" data-tooltip="RGBA: 79, 143, 107, 1.0
   HEXA: #4f8f6bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1ccc8c2a09c84f78bb82ca7b8832fe77 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(59, 69, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ccc8c2a09c84f78bb82ca7b8832fe77::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ccc8c2a09c84f78bb82ca7b8832fe77:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ccc8c2a09c84f78bb82ca7b8832fe77" class="color" data-tooltip="RGBA: 59, 69, 60, 1.0
   HEXA: #3b453cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_438248d3036e4e39bd6f6c15306cdd08 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(159, 50, 8, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_438248d3036e4e39bd6f6c15306cdd08::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_438248d3036e4e39bd6f6c15306cdd08:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_438248d3036e4e39bd6f6c15306cdd08" class="color" data-tooltip="RGBA: 159, 50, 8, 1.0
   HEXA: #9f3208ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_fda6cbe5705f4c2ab8584bdd2ddf3ae5 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_fda6cbe5705f4c2ab8584bdd2ddf3ae5 div { flex: 1 1 0; }
           #_fda6cbe5705f4c2ab8584bdd2ddf3ae5 div.color { width: 100%; height: 100%; }
           #_fda6cbe5705f4c2ab8584bdd2ddf3ae5 div.cmap { width: 100%; height: auto; }
           #_fda6cbe5705f4c2ab8584bdd2ddf3ae5 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>zissou</strong>
       
       <div id="_fda6cbe5705f4c2ab8584bdd2ddf3ae5" class="color-map">
           
                           <div>
                   <style>
       #_52b290abd34b4778bb065459a410bb47 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 153, 230, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_52b290abd34b4778bb065459a410bb47::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_52b290abd34b4778bb065459a410bb47:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_52b290abd34b4778bb065459a410bb47" class="color" data-tooltip="RGBA: 0, 153, 230, 1.0
   HEXA: #0099e6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_00db2aaae9574e93a978339b3910d98e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(18, 37, 90, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_00db2aaae9574e93a978339b3910d98e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_00db2aaae9574e93a978339b3910d98e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_00db2aaae9574e93a978339b3910d98e" class="color" data-tooltip="RGBA: 18, 37, 90, 1.0
   HEXA: #12255aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ca4df37b3ec9445cb230ca451e87ee2a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 56, 20, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ca4df37b3ec9445cb230ca451e87ee2a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ca4df37b3ec9445cb230ca451e87ee2a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ca4df37b3ec9445cb230ca451e87ee2a" class="color" data-tooltip="RGBA: 242, 56, 20, 1.0
   HEXA: #f23814ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3ccd8b6a84e34e4da708c4b90073554f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 183, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3ccd8b6a84e34e4da708c4b90073554f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3ccd8b6a84e34e4da708c4b90073554f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3ccd8b6a84e34e4da708c4b90073554f" class="color" data-tooltip="RGBA: 223, 183, 139, 1.0
   HEXA: #dfb78bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1262ad69428846d794c300f8a2e7ba7e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 195, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1262ad69428846d794c300f8a2e7ba7e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1262ad69428846d794c300f8a2e7ba7e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1262ad69428846d794c300f8a2e7ba7e" class="color" data-tooltip="RGBA: 182, 195, 197, 1.0
   HEXA: #b6c3c5ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_52be2e36beab4faa9369e75bd0def534 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_52be2e36beab4faa9369e75bd0def534 div { flex: 1 1 0; }
           #_52be2e36beab4faa9369e75bd0def534 div.color { width: 100%; height: 100%; }
           #_52be2e36beab4faa9369e75bd0def534 div.cmap { width: 100%; height: auto; }
           #_52be2e36beab4faa9369e75bd0def534 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>royal1</strong>
       
       <div id="_52be2e36beab4faa9369e75bd0def534" class="color-map">
           
                           <div>
                   <style>
       #_724418e5b6d74fc19a3f7996c8d63061 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(121, 164, 58, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_724418e5b6d74fc19a3f7996c8d63061::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_724418e5b6d74fc19a3f7996c8d63061:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_724418e5b6d74fc19a3f7996c8d63061" class="color" data-tooltip="RGBA: 121, 164, 58, 1.0
   HEXA: #79a43aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_95320ef7ce0141369321ccf0a52d9d7c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 214, 175, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_95320ef7ce0141369321ccf0a52d9d7c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_95320ef7ce0141369321ccf0a52d9d7c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_95320ef7ce0141369321ccf0a52d9d7c" class="color" data-tooltip="RGBA: 242, 214, 175, 1.0
   HEXA: #f2d6afff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2e0a77ac29ed4847bc5776d1566dfbca { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(94, 72, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2e0a77ac29ed4847bc5776d1566dfbca::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2e0a77ac29ed4847bc5776d1566dfbca:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2e0a77ac29ed4847bc5776d1566dfbca" class="color" data-tooltip="RGBA: 94, 72, 41, 1.0
   HEXA: #5e4829ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_228df34c81404f74a30dfe09966990fb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(24, 20, 1, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_228df34c81404f74a30dfe09966990fb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_228df34c81404f74a30dfe09966990fb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_228df34c81404f74a30dfe09966990fb" class="color" data-tooltip="RGBA: 24, 20, 1, 1.0
   HEXA: #181401ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_1131f95817fb4202865e9aab7d13015c {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_1131f95817fb4202865e9aab7d13015c div { flex: 1 1 0; }
           #_1131f95817fb4202865e9aab7d13015c div.color { width: 100%; height: 100%; }
           #_1131f95817fb4202865e9aab7d13015c div.cmap { width: 100%; height: auto; }
           #_1131f95817fb4202865e9aab7d13015c div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>darjeeling1</strong>
       
       <div id="_1131f95817fb4202865e9aab7d13015c" class="color-map">
           
                           <div>
                   <style>
       #_d19d7c109a7d4209826f944ed6e2edb3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 151, 151, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d19d7c109a7d4209826f944ed6e2edb3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d19d7c109a7d4209826f944ed6e2edb3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d19d7c109a7d4209826f944ed6e2edb3" class="color" data-tooltip="RGBA: 158, 151, 151, 1.0
   HEXA: #9e9797ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f8649cef6eab4b56ba4524968d90f0fb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 142, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f8649cef6eab4b56ba4524968d90f0fb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f8649cef6eab4b56ba4524968d90f0fb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f8649cef6eab4b56ba4524968d90f0fb" class="color" data-tooltip="RGBA: 194, 142, 0, 1.0
   HEXA: #c28e00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_42c4e3a58bbb4745afdfc47c221d09fb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(131, 102, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_42c4e3a58bbb4745afdfc47c221d09fb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_42c4e3a58bbb4745afdfc47c221d09fb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_42c4e3a58bbb4745afdfc47c221d09fb" class="color" data-tooltip="RGBA: 131, 102, 89, 1.0
   HEXA: #836659ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_857f4ebf67834144a974fcb7844bc35d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(156, 90, 51, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_857f4ebf67834144a974fcb7844bc35d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_857f4ebf67834144a974fcb7844bc35d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_857f4ebf67834144a974fcb7844bc35d" class="color" data-tooltip="RGBA: 156, 90, 51, 1.0
   HEXA: #9c5a33ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_405e2557ad8a402998c61165fc317ddd {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_405e2557ad8a402998c61165fc317ddd div { flex: 1 1 0; }
           #_405e2557ad8a402998c61165fc317ddd div.color { width: 100%; height: 100%; }
           #_405e2557ad8a402998c61165fc317ddd div.cmap { width: 100%; height: auto; }
           #_405e2557ad8a402998c61165fc317ddd div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>fantasticfox1</strong>
       
       <div id="_405e2557ad8a402998c61165fc317ddd" class="color-map">
           
                           <div>
                   <style>
       #_2ad5f4f3d26141058c61c0f62bf8ea7b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 219, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2ad5f4f3d26141058c61c0f62bf8ea7b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2ad5f4f3d26141058c61c0f62bf8ea7b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2ad5f4f3d26141058c61c0f62bf8ea7b" class="color" data-tooltip="RGBA: 249, 219, 32, 1.0
   HEXA: #f9db20ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_19a54e2142fc4db3a02039de87017492 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(147, 75, 78, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_19a54e2142fc4db3a02039de87017492::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_19a54e2142fc4db3a02039de87017492:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_19a54e2142fc4db3a02039de87017492" class="color" data-tooltip="RGBA: 147, 75, 78, 1.0
   HEXA: #934b4eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_907ea286331c4afa8fa1109e43c35252 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(66, 23, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_907ea286331c4afa8fa1109e43c35252::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_907ea286331c4afa8fa1109e43c35252:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_907ea286331c4afa8fa1109e43c35252" class="color" data-tooltip="RGBA: 66, 23, 13, 1.0
   HEXA: #42170dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d9d8cccfb6c84f0aab7c5cece37fc0a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 121, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d9d8cccfb6c84f0aab7c5cece37fc0a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d9d8cccfb6c84f0aab7c5cece37fc0a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d9d8cccfb6c84f0aab7c5cece37fc0a0" class="color" data-tooltip="RGBA: 194, 121, 34, 1.0
   HEXA: #c27922ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bf76ce5d85e34bc7b50dbf4d32e2ab06 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(226, 200, 167, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf76ce5d85e34bc7b50dbf4d32e2ab06::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf76ce5d85e34bc7b50dbf4d32e2ab06:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf76ce5d85e34bc7b50dbf4d32e2ab06" class="color" data-tooltip="RGBA: 226, 200, 167, 1.0
   HEXA: #e2c8a7ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9563d60f7a0d4a0ab3c3fe33592c8622 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9563d60f7a0d4a0ab3c3fe33592c8622 div { flex: 1 1 0; }
           #_9563d60f7a0d4a0ab3c3fe33592c8622 div.color { width: 100%; height: 100%; }
           #_9563d60f7a0d4a0ab3c3fe33592c8622 div.cmap { width: 100%; height: auto; }
           #_9563d60f7a0d4a0ab3c3fe33592c8622 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>margot3</strong>
       
       <div id="_9563d60f7a0d4a0ab3c3fe33592c8622" class="color-map">
           
                           <div>
                   <style>
       #_492a3ca3df3c4bd6a63d36ffd1a8657d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(135, 162, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_492a3ca3df3c4bd6a63d36ffd1a8657d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_492a3ca3df3c4bd6a63d36ffd1a8657d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_492a3ca3df3c4bd6a63d36ffd1a8657d" class="color" data-tooltip="RGBA: 135, 162, 164, 1.0
   HEXA: #87a2a4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_435b7e2af7ca45f9913acf7f7b60d6f1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(202, 160, 101, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_435b7e2af7ca45f9913acf7f7b60d6f1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_435b7e2af7ca45f9913acf7f7b60d6f1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_435b7e2af7ca45f9913acf7f7b60d6f1" class="color" data-tooltip="RGBA: 202, 160, 101, 1.0
   HEXA: #caa065ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_26ae0e23b8044206b4016bd572f39249 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 202, 191, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26ae0e23b8044206b4016bd572f39249::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26ae0e23b8044206b4016bd572f39249:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26ae0e23b8044206b4016bd572f39249" class="color" data-tooltip="RGBA: 214, 202, 191, 1.0
   HEXA: #d6cabfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b11daa4b40d945efa3d955c6662cd052 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 160, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b11daa4b40d945efa3d955c6662cd052::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b11daa4b40d945efa3d955c6662cd052:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b11daa4b40d945efa3d955c6662cd052" class="color" data-tooltip="RGBA: 214, 160, 160, 1.0
   HEXA: #d6a0a0ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_718722fbbd2646528c2a199ce4ccef16 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_718722fbbd2646528c2a199ce4ccef16 div { flex: 1 1 0; }
           #_718722fbbd2646528c2a199ce4ccef16 div.color { width: 100%; height: 100%; }
           #_718722fbbd2646528c2a199ce4ccef16 div.cmap { width: 100%; height: auto; }
           #_718722fbbd2646528c2a199ce4ccef16 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>grandbudapest2</strong>
       
       <div id="_718722fbbd2646528c2a199ce4ccef16" class="color-map">
           
                           <div>
                   <style>
       #_1993cea3148a487586178b87313b5728 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 166, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1993cea3148a487586178b87313b5728::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1993cea3148a487586178b87313b5728:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1993cea3148a487586178b87313b5728" class="color" data-tooltip="RGBA: 255, 166, 142, 1.0
   HEXA: #ffa68eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f92ab6a2e3e543038858247a157fd942 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 204, 183, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f92ab6a2e3e543038858247a157fd942::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f92ab6a2e3e543038858247a157fd942:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f92ab6a2e3e543038858247a157fd942" class="color" data-tooltip="RGBA: 251, 204, 183, 1.0
   HEXA: #fbccb7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_57b47bb08c6b4cf3b55733d0e27322b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 17, 8, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_57b47bb08c6b4cf3b55733d0e27322b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_57b47bb08c6b4cf3b55733d0e27322b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_57b47bb08c6b4cf3b55733d0e27322b3" class="color" data-tooltip="RGBA: 140, 17, 8, 1.0
   HEXA: #8c1108ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9c861346e419495081fa7591f1124380 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(41, 11, 4, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9c861346e419495081fa7591f1124380::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9c861346e419495081fa7591f1124380:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9c861346e419495081fa7591f1124380" class="color" data-tooltip="RGBA: 41, 11, 4, 1.0
   HEXA: #290b04ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c94623abf0704bee856c3687f65009c7 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c94623abf0704bee856c3687f65009c7 div { flex: 1 1 0; }
           #_c94623abf0704bee856c3687f65009c7 div.color { width: 100%; height: 100%; }
           #_c94623abf0704bee856c3687f65009c7 div.cmap { width: 100%; height: auto; }
           #_c94623abf0704bee856c3687f65009c7 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>aquatic1</strong>
       
       <div id="_c94623abf0704bee856c3687f65009c7" class="color-map">
           
                           <div>
                   <style>
       #_0dbe2b94360c49d9978568ff00cb90a7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(52, 36, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0dbe2b94360c49d9978568ff00cb90a7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0dbe2b94360c49d9978568ff00cb90a7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0dbe2b94360c49d9978568ff00cb90a7" class="color" data-tooltip="RGBA: 52, 36, 25, 1.0
   HEXA: #342419ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_801712f4fabe4dcb866fef1fbbc6c68a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(28, 64, 39, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_801712f4fabe4dcb866fef1fbbc6c68a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_801712f4fabe4dcb866fef1fbbc6c68a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_801712f4fabe4dcb866fef1fbbc6c68a" class="color" data-tooltip="RGBA: 28, 64, 39, 1.0
   HEXA: #1c4027ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c15fe8aa80e04c2a8b63e58637bf51b8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(241, 201, 14, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c15fe8aa80e04c2a8b63e58637bf51b8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c15fe8aa80e04c2a8b63e58637bf51b8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c15fe8aa80e04c2a8b63e58637bf51b8" class="color" data-tooltip="RGBA: 241, 201, 14, 1.0
   HEXA: #f1c90eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ef4e23bb520d4bc2ab69ee68cfa49155 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 88, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ef4e23bb520d4bc2ab69ee68cfa49155::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ef4e23bb520d4bc2ab69ee68cfa49155:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ef4e23bb520d4bc2ab69ee68cfa49155" class="color" data-tooltip="RGBA: 102, 88, 153, 1.0
   HEXA: #665899ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e6a573396b204fcc97b2dbc1aada3440 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(184, 147, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e6a573396b204fcc97b2dbc1aada3440::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e6a573396b204fcc97b2dbc1aada3440:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e6a573396b204fcc97b2dbc1aada3440" class="color" data-tooltip="RGBA: 184, 147, 130, 1.0
   HEXA: #b89382ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_43d9c6d8b93b48d7b769919a07cb250b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_43d9c6d8b93b48d7b769919a07cb250b div { flex: 1 1 0; }
           #_43d9c6d8b93b48d7b769919a07cb250b div.color { width: 100%; height: 100%; }
           #_43d9c6d8b93b48d7b769919a07cb250b div.cmap { width: 100%; height: auto; }
           #_43d9c6d8b93b48d7b769919a07cb250b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>darjeeling2</strong>
       
       <div id="_43d9c6d8b93b48d7b769919a07cb250b" class="color-map">
           
                           <div>
                   <style>
       #_50bf97b59c68412d86cf88c8a2fbbcb3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 227, 216, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50bf97b59c68412d86cf88c8a2fbbcb3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50bf97b59c68412d86cf88c8a2fbbcb3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50bf97b59c68412d86cf88c8a2fbbcb3" class="color" data-tooltip="RGBA: 213, 227, 216, 1.0
   HEXA: #d5e3d8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1b9144523274a7582e539a7b6078523 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(97, 138, 152, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1b9144523274a7582e539a7b6078523::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1b9144523274a7582e539a7b6078523:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1b9144523274a7582e539a7b6078523" class="color" data-tooltip="RGBA: 97, 138, 152, 1.0
   HEXA: #618a98ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5d421175891d4c09b92b48ae15ca1025 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(249, 218, 149, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5d421175891d4c09b92b48ae15ca1025::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5d421175891d4c09b92b48ae15ca1025:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5d421175891d4c09b92b48ae15ca1025" class="color" data-tooltip="RGBA: 249, 218, 149, 1.0
   HEXA: #f9da95ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a9dbd9e61f9845429eceb5d33748c854 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 75, 22, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a9dbd9e61f9845429eceb5d33748c854::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a9dbd9e61f9845429eceb5d33748c854:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a9dbd9e61f9845429eceb5d33748c854" class="color" data-tooltip="RGBA: 174, 75, 22, 1.0
   HEXA: #ae4b16ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_85ea626c5b22450f869bc10ce1bf0929 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(120, 112, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_85ea626c5b22450f869bc10ce1bf0929::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_85ea626c5b22450f869bc10ce1bf0929:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_85ea626c5b22450f869bc10ce1bf0929" class="color" data-tooltip="RGBA: 120, 112, 100, 1.0
   HEXA: #787064ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9c652003f73a41eaac23dbfaf5f94fc8 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9c652003f73a41eaac23dbfaf5f94fc8 div { flex: 1 1 0; }
           #_9c652003f73a41eaac23dbfaf5f94fc8 div.color { width: 100%; height: 100%; }
           #_9c652003f73a41eaac23dbfaf5f94fc8 div.cmap { width: 100%; height: auto; }
           #_9c652003f73a41eaac23dbfaf5f94fc8 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>fantasticfox2</strong>
       
       <div id="_9c652003f73a41eaac23dbfaf5f94fc8" class="color-map">
           
                           <div>
                   <style>
       #_1c36f2eb927d469481558d142d069e93 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(228, 191, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1c36f2eb927d469481558d142d069e93::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1c36f2eb927d469481558d142d069e93:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1c36f2eb927d469481558d142d069e93" class="color" data-tooltip="RGBA: 228, 191, 68, 1.0
   HEXA: #e4bf44ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d9573e644db14be2a676ebe4185694b3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(198, 87, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d9573e644db14be2a676ebe4185694b3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d9573e644db14be2a676ebe4185694b3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d9573e644db14be2a676ebe4185694b3" class="color" data-tooltip="RGBA: 198, 87, 66, 1.0
   HEXA: #c65742ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4a96c7dcea924f238b63679d48b55872 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(154, 208, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4a96c7dcea924f238b63679d48b55872::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4a96c7dcea924f238b63679d48b55872:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4a96c7dcea924f238b63679d48b55872" class="color" data-tooltip="RGBA: 154, 208, 187, 1.0
   HEXA: #9ad0bbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_064c3e124ebf48fe80e561f70f069dcd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 39, 55, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_064c3e124ebf48fe80e561f70f069dcd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_064c3e124ebf48fe80e561f70f069dcd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_064c3e124ebf48fe80e561f70f069dcd" class="color" data-tooltip="RGBA: 51, 39, 55, 1.0
   HEXA: #332737ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e65cad3f2f8148d4a5cfa88c8c31633c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 161, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e65cad3f2f8148d4a5cfa88c8c31633c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e65cad3f2f8148d4a5cfa88c8c31633c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e65cad3f2f8148d4a5cfa88c8c31633c" class="color" data-tooltip="RGBA: 171, 161, 141, 1.0
   HEXA: #aba18dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8955c2ec7afb498d89430f6c90d1a0d9 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8955c2ec7afb498d89430f6c90d1a0d9 div { flex: 1 1 0; }
           #_8955c2ec7afb498d89430f6c90d1a0d9 div.color { width: 100%; height: 100%; }
           #_8955c2ec7afb498d89430f6c90d1a0d9 div.cmap { width: 100%; height: auto; }
           #_8955c2ec7afb498d89430f6c90d1a0d9 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>grandbudapest3</strong>
       
       <div id="_8955c2ec7afb498d89430f6c90d1a0d9" class="color-map">
           
                           <div>
                   <style>
       #_fe3f873627fc462e9e91930507386a51 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 220, 182, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fe3f873627fc462e9e91930507386a51::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fe3f873627fc462e9e91930507386a51:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fe3f873627fc462e9e91930507386a51" class="color" data-tooltip="RGBA: 255, 220, 182, 1.0
   HEXA: #ffdcb6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e8d3f3e2ef1a431b843dcb7b8edd02d3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(37, 56, 69, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e8d3f3e2ef1a431b843dcb7b8edd02d3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e8d3f3e2ef1a431b843dcb7b8edd02d3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e8d3f3e2ef1a431b843dcb7b8edd02d3" class="color" data-tooltip="RGBA: 37, 56, 69, 1.0
   HEXA: #253845ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f209773b3234488b983f6ef5c38f7ec3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 173, 157, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f209773b3234488b983f6ef5c38f7ec3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f209773b3234488b983f6ef5c38f7ec3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f209773b3234488b983f6ef5c38f7ec3" class="color" data-tooltip="RGBA: 231, 173, 157, 1.0
   HEXA: #e7ad9dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3114ee6b0aae457a97da0be41b78da70 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(102, 117, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3114ee6b0aae457a97da0be41b78da70::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3114ee6b0aae457a97da0be41b78da70:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3114ee6b0aae457a97da0be41b78da70" class="color" data-tooltip="RGBA: 102, 117, 110, 1.0
   HEXA: #66756eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15cf65e3a0a149f68b3fe098451d0c64 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 63, 49, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15cf65e3a0a149f68b3fe098451d0c64::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15cf65e3a0a149f68b3fe098451d0c64:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15cf65e3a0a149f68b3fe098451d0c64" class="color" data-tooltip="RGBA: 139, 63, 49, 1.0
   HEXA: #8b3f31ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2f4a4a619bcc41f19da76999c53b88f7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(150, 109, 53, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2f4a4a619bcc41f19da76999c53b88f7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2f4a4a619bcc41f19da76999c53b88f7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2f4a4a619bcc41f19da76999c53b88f7" class="color" data-tooltip="RGBA: 150, 109, 53, 1.0
   HEXA: #966d35ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_1c5a410c16744667a362d7f8a32db697 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_1c5a410c16744667a362d7f8a32db697 div { flex: 1 1 0; }
           #_1c5a410c16744667a362d7f8a32db697 div.color { width: 100%; height: 100%; }
           #_1c5a410c16744667a362d7f8a32db697 div.cmap { width: 100%; height: auto; }
           #_1c5a410c16744667a362d7f8a32db697 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>royal2</strong>
       
       <div id="_1c5a410c16744667a362d7f8a32db697" class="color-map">
           
                           <div>
                   <style>
       #_a06ff32b7bdf496c9b89669826357aec { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 171, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a06ff32b7bdf496c9b89669826357aec::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a06ff32b7bdf496c9b89669826357aec:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a06ff32b7bdf496c9b89669826357aec" class="color" data-tooltip="RGBA: 194, 171, 186, 1.0
   HEXA: #c2abbaff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_36d4df5fdfbd42c586ea6a637f4b6c60 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 59, 73, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_36d4df5fdfbd42c586ea6a637f4b6c60::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_36d4df5fdfbd42c586ea6a637f4b6c60:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_36d4df5fdfbd42c586ea6a637f4b6c60" class="color" data-tooltip="RGBA: 140, 59, 73, 1.0
   HEXA: #8c3b49ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e7b980bb0628440dac47b6ef1dcab0ae { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(182, 172, 166, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e7b980bb0628440dac47b6ef1dcab0ae::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e7b980bb0628440dac47b6ef1dcab0ae:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e7b980bb0628440dac47b6ef1dcab0ae" class="color" data-tooltip="RGBA: 182, 172, 166, 1.0
   HEXA: #b6aca6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b82d22abf58a4f3baba474866d060c49 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(33, 32, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b82d22abf58a4f3baba474866d060c49::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b82d22abf58a4f3baba474866d060c49:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b82d22abf58a4f3baba474866d060c49" class="color" data-tooltip="RGBA: 33, 32, 83, 1.0
   HEXA: #212053ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e4dc8bf7fe5d420098cc07a2088c2f6c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 211, 213, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e4dc8bf7fe5d420098cc07a2088c2f6c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e4dc8bf7fe5d420098cc07a2088c2f6c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e4dc8bf7fe5d420098cc07a2088c2f6c" class="color" data-tooltip="RGBA: 209, 211, 213, 1.0
   HEXA: #d1d3d5ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ae57e09601994171a4a65dc79b541cba {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ae57e09601994171a4a65dc79b541cba div { flex: 1 1 0; }
           #_ae57e09601994171a4a65dc79b541cba div.color { width: 100%; height: 100%; }
           #_ae57e09601994171a4a65dc79b541cba div.cmap { width: 100%; height: auto; }
           #_ae57e09601994171a4a65dc79b541cba div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>moonrise5</strong>
       
       <div id="_ae57e09601994171a4a65dc79b541cba" class="color-map">
           
                           <div>
                   <style>
       #_732768ed385749128f17e473e41f3d3a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(223, 140, 144, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_732768ed385749128f17e473e41f3d3a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_732768ed385749128f17e473e41f3d3a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_732768ed385749128f17e473e41f3d3a" class="color" data-tooltip="RGBA: 223, 140, 144, 1.0
   HEXA: #df8c90ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e2530c3260494c468633ea966d15179a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 210, 142, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e2530c3260494c468633ea966d15179a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e2530c3260494c468633ea966d15179a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e2530c3260494c468633ea966d15179a" class="color" data-tooltip="RGBA: 216, 210, 142, 1.0
   HEXA: #d8d28eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_56738aec32754d4b8bacfd480e808a43 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(245, 190, 37, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_56738aec32754d4b8bacfd480e808a43::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_56738aec32754d4b8bacfd480e808a43:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_56738aec32754d4b8bacfd480e808a43" class="color" data-tooltip="RGBA: 245, 190, 37, 1.0
   HEXA: #f5be25ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6cdf6ee860d545beafa9211397a5c2a2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(61, 74, 28, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6cdf6ee860d545beafa9211397a5c2a2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6cdf6ee860d545beafa9211397a5c2a2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6cdf6ee860d545beafa9211397a5c2a2" class="color" data-tooltip="RGBA: 61, 74, 28, 1.0
   HEXA: #3d4a1cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_adff4556c98e4f80ac08b6adf002dbaa { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 48, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_adff4556c98e4f80ac08b6adf002dbaa::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_adff4556c98e4f80ac08b6adf002dbaa:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_adff4556c98e4f80ac08b6adf002dbaa" class="color" data-tooltip="RGBA: 209, 48, 96, 1.0
   HEXA: #d13060ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9769fd95c15843a9a00c55c44b8ca6bc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 107, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9769fd95c15843a9a00c55c44b8ca6bc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9769fd95c15843a9a00c55c44b8ca6bc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9769fd95c15843a9a00c55c44b8ca6bc" class="color" data-tooltip="RGBA: 168, 107, 76, 1.0
   HEXA: #a86b4cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_cd322da8fb2a4127b27c6c6cab656f2a {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_cd322da8fb2a4127b27c6c6cab656f2a div { flex: 1 1 0; }
           #_cd322da8fb2a4127b27c6c6cab656f2a div.color { width: 100%; height: 100%; }
           #_cd322da8fb2a4127b27c6c6cab656f2a div.cmap { width: 100%; height: auto; }
           #_cd322da8fb2a4127b27c6c6cab656f2a div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>grandbudapest4</strong>
       
       <div id="_cd322da8fb2a4127b27c6c6cab656f2a" class="color-map">
           
                           <div>
                   <style>
       #_848bbbf525ad4be8be613788725b3828 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(186, 110, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_848bbbf525ad4be8be613788725b3828::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_848bbbf525ad4be8be613788725b3828:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_848bbbf525ad4be8be613788725b3828" class="color" data-tooltip="RGBA: 186, 110, 0, 1.0
   HEXA: #ba6e00ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fdd728bbe5d24eec9ffdb5312463c70d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(80, 32, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fdd728bbe5d24eec9ffdb5312463c70d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fdd728bbe5d24eec9ffdb5312463c70d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fdd728bbe5d24eec9ffdb5312463c70d" class="color" data-tooltip="RGBA: 80, 32, 86, 1.0
   HEXA: #502056ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e09286a750b447d089560f344fd503ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 246, 187, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e09286a750b447d089560f344fd503ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e09286a750b447d089560f344fd503ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e09286a750b447d089560f344fd503ea" class="color" data-tooltip="RGBA: 255, 246, 187, 1.0
   HEXA: #fff6bbff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_201b200465db44c1a961fcb5cfc5b581 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(154, 127, 25, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_201b200465db44c1a961fcb5cfc5b581::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_201b200465db44c1a961fcb5cfc5b581:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_201b200465db44c1a961fcb5cfc5b581" class="color" data-tooltip="RGBA: 154, 127, 25, 1.0
   HEXA: #9a7f19ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9cb40eb37cfa47adb69a3c4176095178 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 18, 27, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9cb40eb37cfa47adb69a3c4176095178::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9cb40eb37cfa47adb69a3c4176095178:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9cb40eb37cfa47adb69a3c4176095178" class="color" data-tooltip="RGBA: 31, 18, 27, 1.0
   HEXA: #1f121bff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4c4ebfabbb164a93bf8b4e32488e327d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4c4ebfabbb164a93bf8b4e32488e327d div { flex: 1 1 0; }
           #_4c4ebfabbb164a93bf8b4e32488e327d div.color { width: 100%; height: 100%; }
           #_4c4ebfabbb164a93bf8b4e32488e327d div.cmap { width: 100%; height: auto; }
           #_4c4ebfabbb164a93bf8b4e32488e327d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>moonrise6</strong>
       
       <div id="_4c4ebfabbb164a93bf8b4e32488e327d" class="color-map">
           
                           <div>
                   <style>
       #_870eef7b181b4c1f887ce5b1ae7eb31c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(191, 81, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_870eef7b181b4c1f887ce5b1ae7eb31c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_870eef7b181b4c1f887ce5b1ae7eb31c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_870eef7b181b4c1f887ce5b1ae7eb31c" class="color" data-tooltip="RGBA: 191, 81, 61, 1.0
   HEXA: #bf513dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4eb6517b253d4b75b6e0556428f60fd5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(201, 162, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4eb6517b253d4b75b6e0556428f60fd5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4eb6517b253d4b75b6e0556428f60fd5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4eb6517b253d4b75b6e0556428f60fd5" class="color" data-tooltip="RGBA: 201, 162, 150, 1.0
   HEXA: #c9a296ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2d5f32aa613b43c6814ef9fb51c46bb7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 193, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2d5f32aa613b43c6814ef9fb51c46bb7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2d5f32aa613b43c6814ef9fb51c46bb7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2d5f32aa613b43c6814ef9fb51c46bb7" class="color" data-tooltip="RGBA: 197, 193, 136, 1.0
   HEXA: #c5c188ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_407c27e3756a4a5a97c4844024f04186 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 177, 145, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_407c27e3756a4a5a97c4844024f04186::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_407c27e3756a4a5a97c4844024f04186:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_407c27e3756a4a5a97c4844024f04186" class="color" data-tooltip="RGBA: 123, 177, 145, 1.0
   HEXA: #7bb191ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f455981b9496455880ce6d65856a3ed8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(217, 174, 48, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f455981b9496455880ce6d65856a3ed8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f455981b9496455880ce6d65856a3ed8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f455981b9496455880ce6d65856a3ed8" class="color" data-tooltip="RGBA: 217, 174, 48, 1.0
   HEXA: #d9ae30ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_132a83f481f2427195785d398353d444 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_132a83f481f2427195785d398353d444 div { flex: 1 1 0; }
           #_132a83f481f2427195785d398353d444 div.color { width: 100%; height: 100%; }
           #_132a83f481f2427195785d398353d444 div.cmap { width: 100%; height: auto; }
           #_132a83f481f2427195785d398353d444 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>grandbudapest5</strong>
       
       <div id="_132a83f481f2427195785d398353d444" class="color-map">
           
                           <div>
                   <style>
       #_6bcba2a8d82e48569ae0c73b0538d8d0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(225, 146, 131, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6bcba2a8d82e48569ae0c73b0538d8d0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6bcba2a8d82e48569ae0c73b0538d8d0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6bcba2a8d82e48569ae0c73b0538d8d0" class="color" data-tooltip="RGBA: 225, 146, 131, 1.0
   HEXA: #e19283ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d1bd73acdab94776aec41f8a0ae50fea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 27, 76, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d1bd73acdab94776aec41f8a0ae50fea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d1bd73acdab94776aec41f8a0ae50fea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d1bd73acdab94776aec41f8a0ae50fea" class="color" data-tooltip="RGBA: 140, 27, 76, 1.0
   HEXA: #8c1b4cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0525f8dd6b0a455199285c53a2f2e0fd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(209, 147, 54, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0525f8dd6b0a455199285c53a2f2e0fd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0525f8dd6b0a455199285c53a2f2e0fd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0525f8dd6b0a455199285c53a2f2e0fd" class="color" data-tooltip="RGBA: 209, 147, 54, 1.0
   HEXA: #d19336ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1a009e7eb7144843ab84435e61559a77 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(231, 199, 190, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1a009e7eb7144843ab84435e61559a77::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1a009e7eb7144843ab84435e61559a77:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1a009e7eb7144843ab84435e61559a77" class="color" data-tooltip="RGBA: 231, 199, 190, 1.0
   HEXA: #e7c7beff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fba964dc9af24c7c9c65094fa5118cd1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(51, 12, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fba964dc9af24c7c9c65094fa5118cd1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fba964dc9af24c7c9c65094fa5118cd1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fba964dc9af24c7c9c65094fa5118cd1" class="color" data-tooltip="RGBA: 51, 12, 0, 1.0
   HEXA: #330c00ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b0045f5e5eb044fbad532edc74a80296 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b0045f5e5eb044fbad532edc74a80296 div { flex: 1 1 0; }
           #_b0045f5e5eb044fbad532edc74a80296 div.color { width: 100%; height: 100%; }
           #_b0045f5e5eb044fbad532edc74a80296 div.cmap { width: 100%; height: auto; }
           #_b0045f5e5eb044fbad532edc74a80296 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>aquatic2</strong>
       
       <div id="_b0045f5e5eb044fbad532edc74a80296" class="color-map">
           
                           <div>
                   <style>
       #_e2b76e25bb494927a8746fb7b1022bd1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 156, 184, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e2b76e25bb494927a8746fb7b1022bd1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e2b76e25bb494927a8746fb7b1022bd1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e2b76e25bb494927a8746fb7b1022bd1" class="color" data-tooltip="RGBA: 139, 156, 184, 1.0
   HEXA: #8b9cb8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8622373290304d6da6ef4c4417519fd5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(233, 229, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8622373290304d6da6ef4c4417519fd5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8622373290304d6da6ef4c4417519fd5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8622373290304d6da6ef4c4417519fd5" class="color" data-tooltip="RGBA: 233, 229, 65, 1.0
   HEXA: #e9e541ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5ce2d56335d843239eb0cbe22120606f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(88, 159, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5ce2d56335d843239eb0cbe22120606f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5ce2d56335d843239eb0cbe22120606f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5ce2d56335d843239eb0cbe22120606f" class="color" data-tooltip="RGBA: 88, 159, 194, 1.0
   HEXA: #589fc2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7cdf6feedb9b4a41bd0dcd79f4d0cd42 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(160, 141, 94, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7cdf6feedb9b4a41bd0dcd79f4d0cd42::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7cdf6feedb9b4a41bd0dcd79f4d0cd42:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7cdf6feedb9b4a41bd0dcd79f4d0cd42" class="color" data-tooltip="RGBA: 160, 141, 94, 1.0
   HEXA: #a08d5eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cb7b57707a664b3e9c81ccb81817ad0b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 185, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cb7b57707a664b3e9c81ccb81817ad0b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cb7b57707a664b3e9c81ccb81817ad0b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cb7b57707a664b3e9c81ccb81817ad0b" class="color" data-tooltip="RGBA: 189, 185, 206, 1.0
   HEXA: #bdb9ceff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_17512092957047d7b742dc87c9aea2b6 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_17512092957047d7b742dc87c9aea2b6 div { flex: 1 1 0; }
           #_17512092957047d7b742dc87c9aea2b6 div.color { width: 100%; height: 100%; }
           #_17512092957047d7b742dc87c9aea2b6 div.cmap { width: 100%; height: auto; }
           #_17512092957047d7b742dc87c9aea2b6 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>royal3</strong>
       
       <div id="_17512092957047d7b742dc87c9aea2b6" class="color-map">
           
                           <div>
                   <style>
       #_96efaf89188841128c654cbdefd93491 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(252, 87, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_96efaf89188841128c654cbdefd93491::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_96efaf89188841128c654cbdefd93491:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_96efaf89188841128c654cbdefd93491" class="color" data-tooltip="RGBA: 252, 87, 108, 1.0
   HEXA: #fc576cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f1ff6ddba5af42b295eb2bafac10319b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 126, 83, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f1ff6ddba5af42b295eb2bafac10319b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f1ff6ddba5af42b295eb2bafac10319b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f1ff6ddba5af42b295eb2bafac10319b" class="color" data-tooltip="RGBA: 237, 126, 83, 1.0
   HEXA: #ed7e53ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9edca4519c12464bb6309809f30e83fd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(226, 153, 139, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9edca4519c12464bb6309809f30e83fd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9edca4519c12464bb6309809f30e83fd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9edca4519c12464bb6309809f30e83fd" class="color" data-tooltip="RGBA: 226, 153, 139, 1.0
   HEXA: #e2998bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3597b5eda9654acea0a36661da4266cc { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(46, 23, 24, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3597b5eda9654acea0a36661da4266cc::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3597b5eda9654acea0a36661da4266cc:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3597b5eda9654acea0a36661da4266cc" class="color" data-tooltip="RGBA: 46, 23, 24, 1.0
   HEXA: #2e1718ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_460d8715562d4dfa82f9187fa99baf41 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(251, 214, 202, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_460d8715562d4dfa82f9187fa99baf41::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_460d8715562d4dfa82f9187fa99baf41:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_460d8715562d4dfa82f9187fa99baf41" class="color" data-tooltip="RGBA: 251, 214, 202, 1.0
   HEXA: #fbd6caff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_6698afa7953a43a0a3b8ff056fd047ca {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_6698afa7953a43a0a3b8ff056fd047ca div { flex: 1 1 0; }
           #_6698afa7953a43a0a3b8ff056fd047ca div.color { width: 100%; height: 100%; }
           #_6698afa7953a43a0a3b8ff056fd047ca div.cmap { width: 100%; height: auto; }
           #_6698afa7953a43a0a3b8ff056fd047ca div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>moonrise7</strong>
       
       <div id="_6698afa7953a43a0a3b8ff056fd047ca" class="color-map">
           
                           <div>
                   <style>
       #_32682335feaa4b7ebe08f20b1ad4ac82 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(35, 35, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_32682335feaa4b7ebe08f20b1ad4ac82::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_32682335feaa4b7ebe08f20b1ad4ac82:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_32682335feaa4b7ebe08f20b1ad4ac82" class="color" data-tooltip="RGBA: 35, 35, 85, 1.0
   HEXA: #232355ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0661e31a5d44406697f45d3913d61465 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(97, 104, 96, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0661e31a5d44406697f45d3913d61465::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0661e31a5d44406697f45d3913d61465:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0661e31a5d44406697f45d3913d61465" class="color" data-tooltip="RGBA: 97, 104, 96, 1.0
   HEXA: #616860ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b2ff06d2861d478791e2d8d5b0a4863f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(167, 91, 68, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b2ff06d2861d478791e2d8d5b0a4863f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b2ff06d2861d478791e2d8d5b0a4863f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b2ff06d2861d478791e2d8d5b0a4863f" class="color" data-tooltip="RGBA: 167, 91, 68, 1.0
   HEXA: #a75b44ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_d0af2a2d8446446f9635ba313f55f52f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(145, 43, 41, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_d0af2a2d8446446f9635ba313f55f52f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_d0af2a2d8446446f9635ba313f55f52f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_d0af2a2d8446446f9635ba313f55f52f" class="color" data-tooltip="RGBA: 145, 43, 41, 1.0
   HEXA: #912b29ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8f8151e8c2ba4d9ebf24493a68fddebd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 227, 143, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8f8151e8c2ba4d9ebf24493a68fddebd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8f8151e8c2ba4d9ebf24493a68fddebd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8f8151e8c2ba4d9ebf24493a68fddebd" class="color" data-tooltip="RGBA: 255, 227, 143, 1.0
   HEXA: #ffe38fff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_7629d05afa7d4845bd0a0e46120e7647 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_7629d05afa7d4845bd0a0e46120e7647 div { flex: 1 1 0; }
           #_7629d05afa7d4845bd0a0e46120e7647 div.color { width: 100%; height: 100%; }
           #_7629d05afa7d4845bd0a0e46120e7647 div.cmap { width: 100%; height: auto; }
           #_7629d05afa7d4845bd0a0e46120e7647 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>aquatic3</strong>
       
       <div id="_7629d05afa7d4845bd0a0e46120e7647" class="color-map">
           
                           <div>
                   <style>
       #_3213a470bda0434088c8df1d77efc3c0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 161, 66, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3213a470bda0434088c8df1d77efc3c0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3213a470bda0434088c8df1d77efc3c0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3213a470bda0434088c8df1d77efc3c0" class="color" data-tooltip="RGBA: 214, 161, 66, 1.0
   HEXA: #d6a142ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_cf4dcbaab1384a25a7a3aaf58d02b49f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(194, 128, 114, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_cf4dcbaab1384a25a7a3aaf58d02b49f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_cf4dcbaab1384a25a7a3aaf58d02b49f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_cf4dcbaab1384a25a7a3aaf58d02b49f" class="color" data-tooltip="RGBA: 194, 128, 114, 1.0
   HEXA: #c28072ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_43dc47624cce4386a27f9384d10d77eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 183, 161, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_43dc47624cce4386a27f9384d10d77eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_43dc47624cce4386a27f9384d10d77eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_43dc47624cce4386a27f9384d10d77eb" class="color" data-tooltip="RGBA: 200, 183, 161, 1.0
   HEXA: #c8b7a1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_17bf43d170f645579b7ecdf8e244b904 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 68, 45, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_17bf43d170f645579b7ecdf8e244b904::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_17bf43d170f645579b7ecdf8e244b904:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_17bf43d170f645579b7ecdf8e244b904" class="color" data-tooltip="RGBA: 189, 68, 45, 1.0
   HEXA: #bd442dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3e847e20da5e469eb370824f19012d54 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(100, 84, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3e847e20da5e469eb370824f19012d54::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3e847e20da5e469eb370824f19012d54:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3e847e20da5e469eb370824f19012d54" class="color" data-tooltip="RGBA: 100, 84, 60, 1.0
   HEXA: #64543cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4fdb25bc4f3249fb9882609eff5ee52b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4fdb25bc4f3249fb9882609eff5ee52b div { flex: 1 1 0; }
           #_4fdb25bc4f3249fb9882609eff5ee52b div.color { width: 100%; height: 100%; }
           #_4fdb25bc4f3249fb9882609eff5ee52b div.cmap { width: 100%; height: auto; }
           #_4fdb25bc4f3249fb9882609eff5ee52b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>darjeeling3</strong>
       
       <div id="_4fdb25bc4f3249fb9882609eff5ee52b" class="color-map">
           
                           <div>
                   <style>
       #_60ee6bc713cf44c8a2ee5c368ef70a89 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 171, 80, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60ee6bc713cf44c8a2ee5c368ef70a89::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60ee6bc713cf44c8a2ee5c368ef70a89:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60ee6bc713cf44c8a2ee5c368ef70a89" class="color" data-tooltip="RGBA: 168, 171, 80, 1.0
   HEXA: #a8ab50ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3d511ec7d55c47ed85f63a0dc2f718ea { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 232, 61, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3d511ec7d55c47ed85f63a0dc2f718ea::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3d511ec7d55c47ed85f63a0dc2f718ea:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3d511ec7d55c47ed85f63a0dc2f718ea" class="color" data-tooltip="RGBA: 255, 232, 61, 1.0
   HEXA: #ffe83dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_691935e654bc41d0a9268481e6ddedc6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(169, 211, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_691935e654bc41d0a9268481e6ddedc6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_691935e654bc41d0a9268481e6ddedc6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_691935e654bc41d0a9268481e6ddedc6" class="color" data-tooltip="RGBA: 169, 211, 210, 1.0
   HEXA: #a9d3d2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fb05266807864c7e9ba68824ae206ee4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(36, 71, 125, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fb05266807864c7e9ba68824ae206ee4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fb05266807864c7e9ba68824ae206ee4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fb05266807864c7e9ba68824ae206ee4" class="color" data-tooltip="RGBA: 36, 71, 125, 1.0
   HEXA: #24477dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_53cf2e467ffe4aa4b3ba384458c81aab { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(90, 145, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_53cf2e467ffe4aa4b3ba384458c81aab::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_53cf2e467ffe4aa4b3ba384458c81aab:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_53cf2e467ffe4aa4b3ba384458c81aab" class="color" data-tooltip="RGBA: 90, 145, 124, 1.0
   HEXA: #5a917cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_8ddb20b6fda14536b43e3daf8b106df3 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_8ddb20b6fda14536b43e3daf8b106df3 div { flex: 1 1 0; }
           #_8ddb20b6fda14536b43e3daf8b106df3 div.color { width: 100%; height: 100%; }
           #_8ddb20b6fda14536b43e3daf8b106df3 div.cmap { width: 100%; height: auto; }
           #_8ddb20b6fda14536b43e3daf8b106df3 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>darjeeling4</strong>
       
       <div id="_8ddb20b6fda14536b43e3daf8b106df3" class="color-map">
           
                           <div>
                   <style>
       #_20ec9a3e13534b8a8b64a770efbdaad6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(116, 103, 104, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_20ec9a3e13534b8a8b64a770efbdaad6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_20ec9a3e13534b8a8b64a770efbdaad6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_20ec9a3e13534b8a8b64a770efbdaad6" class="color" data-tooltip="RGBA: 116, 103, 104, 1.0
   HEXA: #746768ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_54833e6e2692410583109f348340bb8d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(104, 71, 98, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_54833e6e2692410583109f348340bb8d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_54833e6e2692410583109f348340bb8d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_54833e6e2692410583109f348340bb8d" class="color" data-tooltip="RGBA: 104, 71, 98, 1.0
   HEXA: #684762ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3755a2019c714866becb0cb13a423529 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(128, 8, 6, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3755a2019c714866becb0cb13a423529::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3755a2019c714866becb0cb13a423529:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3755a2019c714866becb0cb13a423529" class="color" data-tooltip="RGBA: 128, 8, 6, 1.0
   HEXA: #800806ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_de201d699f094b538c003ede548ecdf9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 132, 14, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_de201d699f094b538c003ede548ecdf9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_de201d699f094b538c003ede548ecdf9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_de201d699f094b538c003ede548ecdf9" class="color" data-tooltip="RGBA: 188, 132, 14, 1.0
   HEXA: #bc840eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_37b09fa046cd4570a17d539b4f5d565f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 89, 92, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_37b09fa046cd4570a17d539b4f5d565f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_37b09fa046cd4570a17d539b4f5d565f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_37b09fa046cd4570a17d539b4f5d565f" class="color" data-tooltip="RGBA: 174, 89, 92, 1.0
   HEXA: #ae595cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ba6b9b4e6a8345d4bbbd716e6685ebf9 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ba6b9b4e6a8345d4bbbd716e6685ebf9 div { flex: 1 1 0; }
           #_ba6b9b4e6a8345d4bbbd716e6685ebf9 div.color { width: 100%; height: 100%; }
           #_ba6b9b4e6a8345d4bbbd716e6685ebf9 div.cmap { width: 100%; height: auto; }
           #_ba6b9b4e6a8345d4bbbd716e6685ebf9 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>isleofdogs1</strong>
       
       <div id="_ba6b9b4e6a8345d4bbbd716e6685ebf9" class="color-map">
           
                           <div>
                   <style>
       #_b0f9b575d4ce44758ca11a2062e978f3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(254, 197, 175, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b0f9b575d4ce44758ca11a2062e978f3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b0f9b575d4ce44758ca11a2062e978f3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b0f9b575d4ce44758ca11a2062e978f3" class="color" data-tooltip="RGBA: 254, 197, 175, 1.0
   HEXA: #fec5afff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15047c19757b44789934c50b5d66b04a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 126, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15047c19757b44789934c50b5d66b04a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15047c19757b44789934c50b5d66b04a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15047c19757b44789934c50b5d66b04a" class="color" data-tooltip="RGBA: 174, 126, 113, 1.0
   HEXA: #ae7e71ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_7f7f252225f94e818930aef018627472 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(210, 103, 50, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7f7f252225f94e818930aef018627472::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7f7f252225f94e818930aef018627472:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7f7f252225f94e818930aef018627472" class="color" data-tooltip="RGBA: 210, 103, 50, 1.0
   HEXA: #d26732ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_998a10d848c84492815ad5dbb001947e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 35, 35, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_998a10d848c84492815ad5dbb001947e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_998a10d848c84492815ad5dbb001947e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_998a10d848c84492815ad5dbb001947e" class="color" data-tooltip="RGBA: 50, 35, 35, 1.0
   HEXA: #322323ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_22e0286cc8844ac0b6d64ae688da41e2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(24, 18, 19, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_22e0286cc8844ac0b6d64ae688da41e2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_22e0286cc8844ac0b6d64ae688da41e2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_22e0286cc8844ac0b6d64ae688da41e2" class="color" data-tooltip="RGBA: 24, 18, 19, 1.0
   HEXA: #181213ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_b94120020a794f618eabdde3238e3f3d {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_b94120020a794f618eabdde3238e3f3d div { flex: 1 1 0; }
           #_b94120020a794f618eabdde3238e3f3d div.color { width: 100%; height: 100%; }
           #_b94120020a794f618eabdde3238e3f3d div.cmap { width: 100%; height: auto; }
           #_b94120020a794f618eabdde3238e3f3d div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>isleofdogs2</strong>
       
       <div id="_b94120020a794f618eabdde3238e3f3d" class="color-map">
           
                           <div>
                   <style>
       #_a4ec4ae970c045708986bfff8877f623 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 108, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a4ec4ae970c045708986bfff8877f623::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a4ec4ae970c045708986bfff8877f623:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a4ec4ae970c045708986bfff8877f623" class="color" data-tooltip="RGBA: 152, 108, 150, 1.0
   HEXA: #986c96ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_927dd2671e1846ffa611c9bdf06f099e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(138, 31, 31, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_927dd2671e1846ffa611c9bdf06f099e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_927dd2671e1846ffa611c9bdf06f099e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_927dd2671e1846ffa611c9bdf06f099e" class="color" data-tooltip="RGBA: 138, 31, 31, 1.0
   HEXA: #8a1f1fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_85b79e3e0f734272aa543ceb7471dc42 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(213, 171, 85, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_85b79e3e0f734272aa543ceb7471dc42::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_85b79e3e0f734272aa543ceb7471dc42:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_85b79e3e0f734272aa543ceb7471dc42" class="color" data-tooltip="RGBA: 213, 171, 85, 1.0
   HEXA: #d5ab55ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_50852623d09d4bdcb4beb0cec261ca20 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(14, 12, 12, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_50852623d09d4bdcb4beb0cec261ca20::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_50852623d09d4bdcb4beb0cec261ca20:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_50852623d09d4bdcb4beb0cec261ca20" class="color" data-tooltip="RGBA: 14, 12, 12, 1.0
   HEXA: #0e0c0cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aae3a3649a654aa59402f8efad2e9540 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 194, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aae3a3649a654aa59402f8efad2e9540::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aae3a3649a654aa59402f8efad2e9540:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aae3a3649a654aa59402f8efad2e9540" class="color" data-tooltip="RGBA: 220, 194, 201, 1.0
   HEXA: #dcc2c9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2e587c8a3a01496c88010403b167eb8f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(130, 114, 108, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2e587c8a3a01496c88010403b167eb8f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2e587c8a3a01496c88010403b167eb8f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2e587c8a3a01496c88010403b167eb8f" class="color" data-tooltip="RGBA: 130, 114, 108, 1.0
   HEXA: #82726cff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_c5179a6118034b39ba289cbfb48651ce {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_c5179a6118034b39ba289cbfb48651ce div { flex: 1 1 0; }
           #_c5179a6118034b39ba289cbfb48651ce div.color { width: 100%; height: 100%; }
           #_c5179a6118034b39ba289cbfb48651ce div.cmap { width: 100%; height: auto; }
           #_c5179a6118034b39ba289cbfb48651ce div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>isleofdogs3</strong>
       
       <div id="_c5179a6118034b39ba289cbfb48651ce" class="color-map">
           
                           <div>
                   <style>
       #_4b460284b0c64d9d94ab547bdd9cd724 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(229, 142, 167, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b460284b0c64d9d94ab547bdd9cd724::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b460284b0c64d9d94ab547bdd9cd724:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b460284b0c64d9d94ab547bdd9cd724" class="color" data-tooltip="RGBA: 229, 142, 167, 1.0
   HEXA: #e58ea7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c2791be421084f639fe41d408c8d43f3 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(224, 193, 160, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c2791be421084f639fe41d408c8d43f3::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c2791be421084f639fe41d408c8d43f3:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c2791be421084f639fe41d408c8d43f3" class="color" data-tooltip="RGBA: 224, 193, 160, 1.0
   HEXA: #e0c1a0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f21c86b7b704732a4b084bd2d48204f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(30, 18, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f21c86b7b704732a4b084bd2d48204f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f21c86b7b704732a4b084bd2d48204f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f21c86b7b704732a4b084bd2d48204f" class="color" data-tooltip="RGBA: 30, 18, 99, 1.0
   HEXA: #1e1263ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_01d6f526b2d44a659fe2a945430301d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 177, 72, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_01d6f526b2d44a659fe2a945430301d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_01d6f526b2d44a659fe2a945430301d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_01d6f526b2d44a659fe2a945430301d2" class="color" data-tooltip="RGBA: 216, 177, 72, 1.0
   HEXA: #d8b148ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_604a8ae5701f4649a1688bf905d7bbb8 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_604a8ae5701f4649a1688bf905d7bbb8 div { flex: 1 1 0; }
           #_604a8ae5701f4649a1688bf905d7bbb8 div.color { width: 100%; height: 100%; }
           #_604a8ae5701f4649a1688bf905d7bbb8 div.cmap { width: 100%; height: auto; }
           #_604a8ae5701f4649a1688bf905d7bbb8 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tableau</strong>
       
       <div id="_604a8ae5701f4649a1688bf905d7bbb8" class="color-map">
           
                           <div>
                   <style>
       #_7795fc83b5a6441e981ca0da68852865 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(31, 119, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_7795fc83b5a6441e981ca0da68852865::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_7795fc83b5a6441e981ca0da68852865:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_7795fc83b5a6441e981ca0da68852865" class="color" data-tooltip="RGBA: 31, 119, 180, 1.0
   HEXA: #1f77b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ae21243a55f9448fad421632aff41250 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 199, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ae21243a55f9448fad421632aff41250::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ae21243a55f9448fad421632aff41250:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ae21243a55f9448fad421632aff41250" class="color" data-tooltip="RGBA: 174, 199, 232, 1.0
   HEXA: #aec7e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_34404ecfe2934673817233a530d20f01 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 127, 14, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_34404ecfe2934673817233a530d20f01::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_34404ecfe2934673817233a530d20f01:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_34404ecfe2934673817233a530d20f01" class="color" data-tooltip="RGBA: 255, 127, 14, 1.0
   HEXA: #ff7f0eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9bb67a8ab2294966a019e0ad66637e68 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 187, 120, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9bb67a8ab2294966a019e0ad66637e68::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9bb67a8ab2294966a019e0ad66637e68:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9bb67a8ab2294966a019e0ad66637e68" class="color" data-tooltip="RGBA: 255, 187, 120, 1.0
   HEXA: #ffbb78ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ecf5d28936c74a8bbada5712762742af { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 160, 44, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ecf5d28936c74a8bbada5712762742af::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ecf5d28936c74a8bbada5712762742af:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ecf5d28936c74a8bbada5712762742af" class="color" data-tooltip="RGBA: 44, 160, 44, 1.0
   HEXA: #2ca02cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fb7ac7ee855741ff8d748487649e280d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 223, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fb7ac7ee855741ff8d748487649e280d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fb7ac7ee855741ff8d748487649e280d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fb7ac7ee855741ff8d748487649e280d" class="color" data-tooltip="RGBA: 152, 223, 138, 1.0
   HEXA: #98df8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e3b9ee8144c54ee0abae7252cba3eddb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(214, 39, 40, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e3b9ee8144c54ee0abae7252cba3eddb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e3b9ee8144c54ee0abae7252cba3eddb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e3b9ee8144c54ee0abae7252cba3eddb" class="color" data-tooltip="RGBA: 214, 39, 40, 1.0
   HEXA: #d62728ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bfe2b2c3747b45b5a7cd276f62e32fa7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 152, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bfe2b2c3747b45b5a7cd276f62e32fa7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bfe2b2c3747b45b5a7cd276f62e32fa7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bfe2b2c3747b45b5a7cd276f62e32fa7" class="color" data-tooltip="RGBA: 255, 152, 150, 1.0
   HEXA: #ff9896ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d9777d3f3ef47cbb254c33c1a969fc8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(148, 103, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d9777d3f3ef47cbb254c33c1a969fc8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d9777d3f3ef47cbb254c33c1a969fc8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d9777d3f3ef47cbb254c33c1a969fc8" class="color" data-tooltip="RGBA: 148, 103, 189, 1.0
   HEXA: #9467bdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b47d150543974691bcbd67bed3043304 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 176, 213, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b47d150543974691bcbd67bed3043304::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b47d150543974691bcbd67bed3043304:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b47d150543974691bcbd67bed3043304" class="color" data-tooltip="RGBA: 197, 176, 213, 1.0
   HEXA: #c5b0d5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_60d93238cc55444f81d29a5a3112ec1a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(140, 86, 75, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_60d93238cc55444f81d29a5a3112ec1a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_60d93238cc55444f81d29a5a3112ec1a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_60d93238cc55444f81d29a5a3112ec1a" class="color" data-tooltip="RGBA: 140, 86, 75, 1.0
   HEXA: #8c564bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_833bf2b80cf3436794d8515dd4bdf2b4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 156, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_833bf2b80cf3436794d8515dd4bdf2b4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_833bf2b80cf3436794d8515dd4bdf2b4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_833bf2b80cf3436794d8515dd4bdf2b4" class="color" data-tooltip="RGBA: 196, 156, 148, 1.0
   HEXA: #c49c94ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_286590e2ae02454bbb25299230bc00ac { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(227, 119, 194, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_286590e2ae02454bbb25299230bc00ac::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_286590e2ae02454bbb25299230bc00ac:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_286590e2ae02454bbb25299230bc00ac" class="color" data-tooltip="RGBA: 227, 119, 194, 1.0
   HEXA: #e377c2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b024f84d06146349271f94f76f2a25e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 182, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b024f84d06146349271f94f76f2a25e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b024f84d06146349271f94f76f2a25e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b024f84d06146349271f94f76f2a25e" class="color" data-tooltip="RGBA: 247, 182, 210, 1.0
   HEXA: #f7b6d2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2ddd17a305484bb2a94efcad15ff13c1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(127, 127, 127, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2ddd17a305484bb2a94efcad15ff13c1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2ddd17a305484bb2a94efcad15ff13c1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2ddd17a305484bb2a94efcad15ff13c1" class="color" data-tooltip="RGBA: 127, 127, 127, 1.0
   HEXA: #7f7f7fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_496ce548f5264d34a38fff59a9cb7910 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 199, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_496ce548f5264d34a38fff59a9cb7910::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_496ce548f5264d34a38fff59a9cb7910:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_496ce548f5264d34a38fff59a9cb7910" class="color" data-tooltip="RGBA: 199, 199, 199, 1.0
   HEXA: #c7c7c7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bf74ab1bc2984fafb0846f53ea9037da { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(188, 189, 34, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bf74ab1bc2984fafb0846f53ea9037da::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bf74ab1bc2984fafb0846f53ea9037da:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bf74ab1bc2984fafb0846f53ea9037da" class="color" data-tooltip="RGBA: 188, 189, 34, 1.0
   HEXA: #bcbd22ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e13109754b8942c981a87da2d87d675e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 219, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e13109754b8942c981a87da2d87d675e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e13109754b8942c981a87da2d87d675e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e13109754b8942c981a87da2d87d675e" class="color" data-tooltip="RGBA: 219, 219, 141, 1.0
   HEXA: #dbdb8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3bbd10f5d62c476893159b7da7103ae4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(23, 190, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3bbd10f5d62c476893159b7da7103ae4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3bbd10f5d62c476893159b7da7103ae4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3bbd10f5d62c476893159b7da7103ae4" class="color" data-tooltip="RGBA: 23, 190, 207, 1.0
   HEXA: #17becfff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_8fbec5f02efb4e92a9b099f91c0fcf0a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 218, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8fbec5f02efb4e92a9b099f91c0fcf0a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8fbec5f02efb4e92a9b099f91c0fcf0a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8fbec5f02efb4e92a9b099f91c0fcf0a" class="color" data-tooltip="RGBA: 158, 218, 229, 1.0
   HEXA: #9edae5ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0c7e1ee2562a4d2688268051deb3c485 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0c7e1ee2562a4d2688268051deb3c485 div { flex: 1 1 0; }
           #_0c7e1ee2562a4d2688268051deb3c485 div.color { width: 100%; height: 100%; }
           #_0c7e1ee2562a4d2688268051deb3c485 div.cmap { width: 100%; height: auto; }
           #_0c7e1ee2562a4d2688268051deb3c485 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tableaulight</strong>
       
       <div id="_0c7e1ee2562a4d2688268051deb3c485" class="color-map">
           
                           <div>
                   <style>
       #_fb6b855d2ce54852afe4860e23cdb3c0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(174, 199, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fb6b855d2ce54852afe4860e23cdb3c0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fb6b855d2ce54852afe4860e23cdb3c0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fb6b855d2ce54852afe4860e23cdb3c0" class="color" data-tooltip="RGBA: 174, 199, 232, 1.0
   HEXA: #aec7e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_26e08e3d718e42daab79db959d868417 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 187, 120, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_26e08e3d718e42daab79db959d868417::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_26e08e3d718e42daab79db959d868417:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_26e08e3d718e42daab79db959d868417" class="color" data-tooltip="RGBA: 255, 187, 120, 1.0
   HEXA: #ffbb78ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_174a617e84ba4077a4dee4ffa29d9114 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 223, 138, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_174a617e84ba4077a4dee4ffa29d9114::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_174a617e84ba4077a4dee4ffa29d9114:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_174a617e84ba4077a4dee4ffa29d9114" class="color" data-tooltip="RGBA: 152, 223, 138, 1.0
   HEXA: #98df8aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_81bc6664ffa04c7582aa65e415356412 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 152, 150, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_81bc6664ffa04c7582aa65e415356412::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_81bc6664ffa04c7582aa65e415356412:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_81bc6664ffa04c7582aa65e415356412" class="color" data-tooltip="RGBA: 255, 152, 150, 1.0
   HEXA: #ff9896ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_840e556efc054d0f8dff06233e1d1968 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(197, 176, 213, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_840e556efc054d0f8dff06233e1d1968::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_840e556efc054d0f8dff06233e1d1968:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_840e556efc054d0f8dff06233e1d1968" class="color" data-tooltip="RGBA: 197, 176, 213, 1.0
   HEXA: #c5b0d5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c971863ea3904164accc460cbdecd0b0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(196, 156, 148, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c971863ea3904164accc460cbdecd0b0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c971863ea3904164accc460cbdecd0b0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c971863ea3904164accc460cbdecd0b0" class="color" data-tooltip="RGBA: 196, 156, 148, 1.0
   HEXA: #c49c94ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bb5986b14b69494daeb2dbfef710de8b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(247, 182, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bb5986b14b69494daeb2dbfef710de8b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bb5986b14b69494daeb2dbfef710de8b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bb5986b14b69494daeb2dbfef710de8b" class="color" data-tooltip="RGBA: 247, 182, 210, 1.0
   HEXA: #f7b6d2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f9e1663657a94b648055867b9d1b801f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(199, 199, 199, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f9e1663657a94b648055867b9d1b801f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f9e1663657a94b648055867b9d1b801f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f9e1663657a94b648055867b9d1b801f" class="color" data-tooltip="RGBA: 199, 199, 199, 1.0
   HEXA: #c7c7c7ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4833ed820901451d9170862a833d6473 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 219, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4833ed820901451d9170862a833d6473::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4833ed820901451d9170862a833d6473:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4833ed820901451d9170862a833d6473" class="color" data-tooltip="RGBA: 219, 219, 141, 1.0
   HEXA: #dbdb8dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2c553465af294e2580e5945e6bbec6a4 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(158, 218, 229, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2c553465af294e2580e5945e6bbec6a4::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2c553465af294e2580e5945e6bbec6a4:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2c553465af294e2580e5945e6bbec6a4" class="color" data-tooltip="RGBA: 158, 218, 229, 1.0
   HEXA: #9edae5ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_5b1782effdba4f3fbd46d7009cc90310 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_5b1782effdba4f3fbd46d7009cc90310 div { flex: 1 1 0; }
           #_5b1782effdba4f3fbd46d7009cc90310 div.color { width: 100%; height: 100%; }
           #_5b1782effdba4f3fbd46d7009cc90310 div.cmap { width: 100%; height: auto; }
           #_5b1782effdba4f3fbd46d7009cc90310 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>tableaumedium</strong>
       
       <div id="_5b1782effdba4f3fbd46d7009cc90310" class="color-map">
           
                           <div>
                   <style>
       #_1ca6f42c743d4f0297341b8f8df56406 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(114, 158, 206, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1ca6f42c743d4f0297341b8f8df56406::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1ca6f42c743d4f0297341b8f8df56406:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1ca6f42c743d4f0297341b8f8df56406" class="color" data-tooltip="RGBA: 114, 158, 206, 1.0
   HEXA: #729eceff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_70a72ae043d343f6a271cd6985e06509 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 158, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_70a72ae043d343f6a271cd6985e06509::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_70a72ae043d343f6a271cd6985e06509:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_70a72ae043d343f6a271cd6985e06509" class="color" data-tooltip="RGBA: 255, 158, 74, 1.0
   HEXA: #ff9e4aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d26d6f42b5c4768ba9c835053b244cf { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(103, 191, 92, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d26d6f42b5c4768ba9c835053b244cf::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d26d6f42b5c4768ba9c835053b244cf:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d26d6f42b5c4768ba9c835053b244cf" class="color" data-tooltip="RGBA: 103, 191, 92, 1.0
   HEXA: #67bf5cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0cf7123e22e740e2b80bb9b5c636abc6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 102, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0cf7123e22e740e2b80bb9b5c636abc6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0cf7123e22e740e2b80bb9b5c636abc6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0cf7123e22e740e2b80bb9b5c636abc6" class="color" data-tooltip="RGBA: 237, 102, 93, 1.0
   HEXA: #ed665dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_24c324c997c34d6ebdd62159a549a5a0 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(173, 139, 201, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_24c324c997c34d6ebdd62159a549a5a0::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_24c324c997c34d6ebdd62159a549a5a0:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_24c324c997c34d6ebdd62159a549a5a0" class="color" data-tooltip="RGBA: 173, 139, 201, 1.0
   HEXA: #ad8bc9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ad9ea310c9af4f268df5df1d62b717f5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(168, 120, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ad9ea310c9af4f268df5df1d62b717f5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ad9ea310c9af4f268df5df1d62b717f5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ad9ea310c9af4f268df5df1d62b717f5" class="color" data-tooltip="RGBA: 168, 120, 110, 1.0
   HEXA: #a8786eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6e324ff4c8a941489f95dc0de0807dd2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(237, 151, 202, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6e324ff4c8a941489f95dc0de0807dd2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6e324ff4c8a941489f95dc0de0807dd2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6e324ff4c8a941489f95dc0de0807dd2" class="color" data-tooltip="RGBA: 237, 151, 202, 1.0
   HEXA: #ed97caff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fa1dec55ea4342bb9ff729116d5c3f1e { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(162, 162, 162, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fa1dec55ea4342bb9ff729116d5c3f1e::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fa1dec55ea4342bb9ff729116d5c3f1e:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fa1dec55ea4342bb9ff729116d5c3f1e" class="color" data-tooltip="RGBA: 162, 162, 162, 1.0
   HEXA: #a2a2a2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3edb96e9c0ad4f82894f863b7dd56f2a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(205, 204, 93, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3edb96e9c0ad4f82894f863b7dd56f2a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3edb96e9c0ad4f82894f863b7dd56f2a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3edb96e9c0ad4f82894f863b7dd56f2a" class="color" data-tooltip="RGBA: 205, 204, 93, 1.0
   HEXA: #cdcc5dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4e56d8c372ad4af79c7ad60220ea721b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(109, 204, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4e56d8c372ad4af79c7ad60220ea721b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4e56d8c372ad4af79c7ad60220ea721b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4e56d8c372ad4af79c7ad60220ea721b" class="color" data-tooltip="RGBA: 109, 204, 218, 1.0
   HEXA: #6dccdaff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_9913c65ce82446ddb8eb3f3f345fc80b {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_9913c65ce82446ddb8eb3f3f345fc80b div { flex: 1 1 0; }
           #_9913c65ce82446ddb8eb3f3f345fc80b div.color { width: 100%; height: 100%; }
           #_9913c65ce82446ddb8eb3f3f345fc80b div.cmap { width: 100%; height: auto; }
           #_9913c65ce82446ddb8eb3f3f345fc80b div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>gray</strong>
       
       <div id="_9913c65ce82446ddb8eb3f3f345fc80b" class="color-map">
           
                           <div>
                   <style>
       #_02dc9819629d4b29a9144db829f2d709 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(96, 99, 106, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_02dc9819629d4b29a9144db829f2d709::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_02dc9819629d4b29a9144db829f2d709:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_02dc9819629d4b29a9144db829f2d709" class="color" data-tooltip="RGBA: 96, 99, 106, 1.0
   HEXA: #60636aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_636ef3329d304d1a95da378013643196 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(165, 172, 175, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_636ef3329d304d1a95da378013643196::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_636ef3329d304d1a95da378013643196:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_636ef3329d304d1a95da378013643196" class="color" data-tooltip="RGBA: 165, 172, 175, 1.0
   HEXA: #a5acafff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_2eeff824461747969e7af989433461eb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(65, 68, 81, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_2eeff824461747969e7af989433461eb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_2eeff824461747969e7af989433461eb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_2eeff824461747969e7af989433461eb" class="color" data-tooltip="RGBA: 65, 68, 81, 1.0
   HEXA: #414451ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_bd8091cc5d0b4760bfbc6455cacd2d11 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(143, 135, 130, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_bd8091cc5d0b4760bfbc6455cacd2d11::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_bd8091cc5d0b4760bfbc6455cacd2d11:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_bd8091cc5d0b4760bfbc6455cacd2d11" class="color" data-tooltip="RGBA: 143, 135, 130, 1.0
   HEXA: #8f8782ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fa1da0623b414f8cb783dc2b328d954b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 207, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fa1da0623b414f8cb783dc2b328d954b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fa1da0623b414f8cb783dc2b328d954b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fa1da0623b414f8cb783dc2b328d954b" class="color" data-tooltip="RGBA: 207, 207, 207, 1.0
   HEXA: #cfcfcfff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_4d3e7b933ab142d2afd5934d92f28537 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_4d3e7b933ab142d2afd5934d92f28537 div { flex: 1 1 0; }
           #_4d3e7b933ab142d2afd5934d92f28537 div.color { width: 100%; height: 100%; }
           #_4d3e7b933ab142d2afd5934d92f28537 div.cmap { width: 100%; height: auto; }
           #_4d3e7b933ab142d2afd5934d92f28537 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>colorblind</strong>
       
       <div id="_4d3e7b933ab142d2afd5934d92f28537" class="color-map">
           
                           <div>
                   <style>
       #_8bc2a2f9acdc43589252ebc595a8d8f8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(0, 107, 164, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_8bc2a2f9acdc43589252ebc595a8d8f8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_8bc2a2f9acdc43589252ebc595a8d8f8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_8bc2a2f9acdc43589252ebc595a8d8f8" class="color" data-tooltip="RGBA: 0, 107, 164, 1.0
   HEXA: #006ba4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c6e71f578dff44ff8c59ff50fa0a93e9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 128, 14, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c6e71f578dff44ff8c59ff50fa0a93e9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c6e71f578dff44ff8c59ff50fa0a93e9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c6e71f578dff44ff8c59ff50fa0a93e9" class="color" data-tooltip="RGBA: 255, 128, 14, 1.0
   HEXA: #ff800eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_40b88e6c40b844bc987e86541d84118a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 171, 171, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_40b88e6c40b844bc987e86541d84118a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_40b88e6c40b844bc987e86541d84118a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_40b88e6c40b844bc987e86541d84118a" class="color" data-tooltip="RGBA: 171, 171, 171, 1.0
   HEXA: #abababff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_61b514bb360c4055925c0c2fb6e0c4e6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(89, 89, 89, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_61b514bb360c4055925c0c2fb6e0c4e6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_61b514bb360c4055925c0c2fb6e0c4e6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_61b514bb360c4055925c0c2fb6e0c4e6" class="color" data-tooltip="RGBA: 89, 89, 89, 1.0
   HEXA: #595959ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_325e68c0843a40e9bb63078861fae19a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 158, 209, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_325e68c0843a40e9bb63078861fae19a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_325e68c0843a40e9bb63078861fae19a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_325e68c0843a40e9bb63078861fae19a" class="color" data-tooltip="RGBA: 95, 158, 209, 1.0
   HEXA: #5f9ed1ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3f52ec5bd6114703bc7656d0b6bac098 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(200, 82, 0, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3f52ec5bd6114703bc7656d0b6bac098::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3f52ec5bd6114703bc7656d0b6bac098:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3f52ec5bd6114703bc7656d0b6bac098" class="color" data-tooltip="RGBA: 200, 82, 0, 1.0
   HEXA: #c85200ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1486b19a12e943678d4f2829dcb9cd0c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(137, 137, 137, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1486b19a12e943678d4f2829dcb9cd0c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1486b19a12e943678d4f2829dcb9cd0c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1486b19a12e943678d4f2829dcb9cd0c" class="color" data-tooltip="RGBA: 137, 137, 137, 1.0
   HEXA: #898989ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_9966a234f5cf4393a32059426f52dead { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(162, 200, 236, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_9966a234f5cf4393a32059426f52dead::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_9966a234f5cf4393a32059426f52dead:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_9966a234f5cf4393a32059426f52dead" class="color" data-tooltip="RGBA: 162, 200, 236, 1.0
   HEXA: #a2c8ecff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f370a3d78dca40609643a736dd6bb39d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 188, 121, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f370a3d78dca40609643a736dd6bb39d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f370a3d78dca40609643a736dd6bb39d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f370a3d78dca40609643a736dd6bb39d" class="color" data-tooltip="RGBA: 255, 188, 121, 1.0
   HEXA: #ffbc79ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fab945df06e84ddd9c71ef25de608e43 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(207, 207, 207, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fab945df06e84ddd9c71ef25de608e43::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fab945df06e84ddd9c71ef25de608e43:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fab945df06e84ddd9c71ef25de608e43" class="color" data-tooltip="RGBA: 207, 207, 207, 1.0
   HEXA: #cfcfcfff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_ce9399094abf4db8bf15943fd4ec71f9 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_ce9399094abf4db8bf15943fd4ec71f9 div { flex: 1 1 0; }
           #_ce9399094abf4db8bf15943fd4ec71f9 div.color { width: 100%; height: 100%; }
           #_ce9399094abf4db8bf15943fd4ec71f9 div.cmap { width: 100%; height: auto; }
           #_ce9399094abf4db8bf15943fd4ec71f9 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>trafficlight</strong>
       
       <div id="_ce9399094abf4db8bf15943fd4ec71f9" class="color-map">
           
                           <div>
                   <style>
       #_4153678dec714b4e955bf55eb5d29cb6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(177, 3, 24, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4153678dec714b4e955bf55eb5d29cb6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4153678dec714b4e955bf55eb5d29cb6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4153678dec714b4e955bf55eb5d29cb6" class="color" data-tooltip="RGBA: 177, 3, 24, 1.0
   HEXA: #b10318ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_15abdfaa22224735ad0f74f42ba3fa0c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 161, 58, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_15abdfaa22224735ad0f74f42ba3fa0c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_15abdfaa22224735ad0f74f42ba3fa0c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_15abdfaa22224735ad0f74f42ba3fa0c" class="color" data-tooltip="RGBA: 219, 161, 58, 1.0
   HEXA: #dba13aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a91ec08e562643fdaaa721565f9f514f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(48, 147, 67, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a91ec08e562643fdaaa721565f9f514f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a91ec08e562643fdaaa721565f9f514f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a91ec08e562643fdaaa721565f9f514f" class="color" data-tooltip="RGBA: 48, 147, 67, 1.0
   HEXA: #309343ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_dc9b0f4fbbe949d29a33ba94671f0872 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 37, 38, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_dc9b0f4fbbe949d29a33ba94671f0872::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_dc9b0f4fbbe949d29a33ba94671f0872:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_dc9b0f4fbbe949d29a33ba94671f0872" class="color" data-tooltip="RGBA: 216, 37, 38, 1.0
   HEXA: #d82526ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_91aede6f096c4306905ad33fade2eedd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 193, 86, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_91aede6f096c4306905ad33fade2eedd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_91aede6f096c4306905ad33fade2eedd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_91aede6f096c4306905ad33fade2eedd" class="color" data-tooltip="RGBA: 255, 193, 86, 1.0
   HEXA: #ffc156ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_45afe7110c904d3a8a426dffe3bc9f6d { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(105, 183, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_45afe7110c904d3a8a426dffe3bc9f6d::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_45afe7110c904d3a8a426dffe3bc9f6d:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_45afe7110c904d3a8a426dffe3bc9f6d" class="color" data-tooltip="RGBA: 105, 183, 100, 1.0
   HEXA: #69b764ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_80bf85a185f640438e8b9b62c499f452 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(242, 108, 100, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_80bf85a185f640438e8b9b62c499f452::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_80bf85a185f640438e8b9b62c499f452:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_80bf85a185f640438e8b9b62c499f452" class="color" data-tooltip="RGBA: 242, 108, 100, 1.0
   HEXA: #f26c64ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_40338aa9560045818ba9b29269b284a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 221, 113, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_40338aa9560045818ba9b29269b284a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_40338aa9560045818ba9b29269b284a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_40338aa9560045818ba9b29269b284a9" class="color" data-tooltip="RGBA: 255, 221, 113, 1.0
   HEXA: #ffdd71ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_90554d6fb2ae4bbc8e53df2443c84f14 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(159, 205, 153, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_90554d6fb2ae4bbc8e53df2443c84f14::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_90554d6fb2ae4bbc8e53df2443c84f14:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_90554d6fb2ae4bbc8e53df2443c84f14" class="color" data-tooltip="RGBA: 159, 205, 153, 1.0
   HEXA: #9fcd99ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_d39114f46e514d3fb2868f5ceee97dcb {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_d39114f46e514d3fb2868f5ceee97dcb div { flex: 1 1 0; }
           #_d39114f46e514d3fb2868f5ceee97dcb div.color { width: 100%; height: 100%; }
           #_d39114f46e514d3fb2868f5ceee97dcb div.cmap { width: 100%; height: auto; }
           #_d39114f46e514d3fb2868f5ceee97dcb div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>purplegray</strong>
       
       <div id="_d39114f46e514d3fb2868f5ceee97dcb" class="color-map">
           
                           <div>
                   <style>
       #_0f87329dc99d42a580324a3326ead60c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(123, 102, 210, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0f87329dc99d42a580324a3326ead60c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0f87329dc99d42a580324a3326ead60c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0f87329dc99d42a580324a3326ead60c" class="color" data-tooltip="RGBA: 123, 102, 210, 1.0
   HEXA: #7b66d2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0d7c662de41540e09f0f930dd85a0a4f { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(166, 153, 232, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0d7c662de41540e09f0f930dd85a0a4f::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0d7c662de41540e09f0f930dd85a0a4f:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0d7c662de41540e09f0f930dd85a0a4f" class="color" data-tooltip="RGBA: 166, 153, 232, 1.0
   HEXA: #a699e8ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_210157f5f0af4c6fbc60ea68550f4268 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(220, 95, 189, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_210157f5f0af4c6fbc60ea68550f4268::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_210157f5f0af4c6fbc60ea68550f4268:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_210157f5f0af4c6fbc60ea68550f4268" class="color" data-tooltip="RGBA: 220, 95, 189, 1.0
   HEXA: #dc5fbdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_5f9039f130a7479fb15bb869181fbbb9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 192, 218, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_5f9039f130a7479fb15bb869181fbbb9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_5f9039f130a7479fb15bb869181fbbb9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_5f9039f130a7479fb15bb869181fbbb9" class="color" data-tooltip="RGBA: 255, 192, 218, 1.0
   HEXA: #ffc0daff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_55992c0b7f614ff088de875b133ba5ba { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(95, 90, 65, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_55992c0b7f614ff088de875b133ba5ba::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_55992c0b7f614ff088de875b133ba5ba:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_55992c0b7f614ff088de875b133ba5ba" class="color" data-tooltip="RGBA: 95, 90, 65, 1.0
   HEXA: #5f5a41ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3b0a780a6b7c494b9fe288136b9b9b15 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(180, 177, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b0a780a6b7c494b9fe288136b9b9b15::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b0a780a6b7c494b9fe288136b9b9b15:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b0a780a6b7c494b9fe288136b9b9b15" class="color" data-tooltip="RGBA: 180, 177, 155, 1.0
   HEXA: #b4b19bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4131a2f1863d409eabfe56453f7682e1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(153, 86, 136, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4131a2f1863d409eabfe56453f7682e1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4131a2f1863d409eabfe56453f7682e1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4131a2f1863d409eabfe56453f7682e1" class="color" data-tooltip="RGBA: 153, 86, 136, 1.0
   HEXA: #995688ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ab4f56730f914f79943a4bec979c8960 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(216, 152, 186, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ab4f56730f914f79943a4bec979c8960::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ab4f56730f914f79943a4bec979c8960:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ab4f56730f914f79943a4bec979c8960" class="color" data-tooltip="RGBA: 216, 152, 186, 1.0
   HEXA: #d898baff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_89c1528083234ecfb2eb0b3bde963aeb { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(171, 106, 213, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_89c1528083234ecfb2eb0b3bde963aeb::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_89c1528083234ecfb2eb0b3bde963aeb:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_89c1528083234ecfb2eb0b3bde963aeb" class="color" data-tooltip="RGBA: 171, 106, 213, 1.0
   HEXA: #ab6ad5ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_597df5ad957241a0a9ad235d65782a35 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(208, 152, 238, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_597df5ad957241a0a9ad235d65782a35::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_597df5ad957241a0a9ad235d65782a35:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_597df5ad957241a0a9ad235d65782a35" class="color" data-tooltip="RGBA: 208, 152, 238, 1.0
   HEXA: #d098eeff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1b1af682f1474e8585bd4505135b830a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(139, 124, 110, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1b1af682f1474e8585bd4505135b830a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1b1af682f1474e8585bd4505135b830a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1b1af682f1474e8585bd4505135b830a" class="color" data-tooltip="RGBA: 139, 124, 110, 1.0
   HEXA: #8b7c6eff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_f4c77e3fe84e4ac9999d266e2a54f0a1 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(219, 212, 197, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_f4c77e3fe84e4ac9999d266e2a54f0a1::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_f4c77e3fe84e4ac9999d266e2a54f0a1:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_f4c77e3fe84e4ac9999d266e2a54f0a1" class="color" data-tooltip="RGBA: 219, 212, 197, 1.0
   HEXA: #dbd4c5ff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_0c435c85dcd04b71b1cf71869fd60d33 {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_0c435c85dcd04b71b1cf71869fd60d33 div { flex: 1 1 0; }
           #_0c435c85dcd04b71b1cf71869fd60d33 div.color { width: 100%; height: 100%; }
           #_0c435c85dcd04b71b1cf71869fd60d33 div.cmap { width: 100%; height: auto; }
           #_0c435c85dcd04b71b1cf71869fd60d33 div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>bluered</strong>
       
       <div id="_0c435c85dcd04b71b1cf71869fd60d33" class="color-map">
           
                           <div>
                   <style>
       #_858d35b545164f17aea8aff2f2d4d55b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(44, 105, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_858d35b545164f17aea8aff2f2d4d55b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_858d35b545164f17aea8aff2f2d4d55b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_858d35b545164f17aea8aff2f2d4d55b" class="color" data-tooltip="RGBA: 44, 105, 176, 1.0
   HEXA: #2c69b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_17d1b71c102f47bda2354b4bd6314bc5 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 200, 226, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_17d1b71c102f47bda2354b4bd6314bc5::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_17d1b71c102f47bda2354b4bd6314bc5:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_17d1b71c102f47bda2354b4bd6314bc5" class="color" data-tooltip="RGBA: 181, 200, 226, 1.0
   HEXA: #b5c8e2ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_4b6568a9605044b1aac8f2365b9b5962 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(240, 39, 32, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_4b6568a9605044b1aac8f2365b9b5962::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_4b6568a9605044b1aac8f2365b9b5962:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_4b6568a9605044b1aac8f2365b9b5962" class="color" data-tooltip="RGBA: 240, 39, 32, 1.0
   HEXA: #f02720ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_33f272394d8245079a8727282817f6d2 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 182, 176, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_33f272394d8245079a8727282817f6d2::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_33f272394d8245079a8727282817f6d2:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_33f272394d8245079a8727282817f6d2" class="color" data-tooltip="RGBA: 255, 182, 176, 1.0
   HEXA: #ffb6b0ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e32e7a4f96834341ac3bbf6fa47045d9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 97, 60, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e32e7a4f96834341ac3bbf6fa47045d9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e32e7a4f96834341ac3bbf6fa47045d9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e32e7a4f96834341ac3bbf6fa47045d9" class="color" data-tooltip="RGBA: 172, 97, 60, 1.0
   HEXA: #ac613cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_fba01fac59004ae8b491a9e9bda33685 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(233, 195, 155, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_fba01fac59004ae8b491a9e9bda33685::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_fba01fac59004ae8b491a9e9bda33685:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_fba01fac59004ae8b491a9e9bda33685" class="color" data-tooltip="RGBA: 233, 195, 155, 1.0
   HEXA: #e9c39bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_a709648f56234ab0b79070613ec09a3b { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(107, 163, 214, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_a709648f56234ab0b79070613ec09a3b::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_a709648f56234ab0b79070613ec09a3b:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_a709648f56234ab0b79070613ec09a3b" class="color" data-tooltip="RGBA: 107, 163, 214, 1.0
   HEXA: #6ba3d6ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_58e0d430185c48e497f5e72bd61e2bc8 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(181, 223, 253, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_58e0d430185c48e497f5e72bd61e2bc8::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_58e0d430185c48e497f5e72bd61e2bc8:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_58e0d430185c48e497f5e72bd61e2bc8" class="color" data-tooltip="RGBA: 181, 223, 253, 1.0
   HEXA: #b5dffdff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_aa8ec4424ef0435e95a8d3711f45bd46 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 135, 99, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_aa8ec4424ef0435e95a8d3711f45bd46::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_aa8ec4424ef0435e95a8d3711f45bd46:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_aa8ec4424ef0435e95a8d3711f45bd46" class="color" data-tooltip="RGBA: 172, 135, 99, 1.0
   HEXA: #ac8763ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ac0481afe6db42d3a43ce1f69538ef54 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(221, 201, 180, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ac0481afe6db42d3a43ce1f69538ef54::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ac0481afe6db42d3a43ce1f69538ef54:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ac0481afe6db42d3a43ce1f69538ef54" class="color" data-tooltip="RGBA: 221, 201, 180, 1.0
   HEXA: #ddc9b4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_30ef095e3e104be98d9e2d46442213b9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(189, 10, 54, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_30ef095e3e104be98d9e2d46442213b9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_30ef095e3e104be98d9e2d46442213b9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_30ef095e3e104be98d9e2d46442213b9" class="color" data-tooltip="RGBA: 189, 10, 54, 1.0
   HEXA: #bd0a36ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_86670785ecee478cac377c1ee8a15063 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(244, 115, 122, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_86670785ecee478cac377c1ee8a15063::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_86670785ecee478cac377c1ee8a15063:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_86670785ecee478cac377c1ee8a15063" class="color" data-tooltip="RGBA: 244, 115, 122, 1.0
   HEXA: #f4737aff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
           <div class="gradient">
       <style>
           #_dd6a5fe6b03444e6beff4028f41f172e {
               display: flex; gap: 0rem; width: 31.25rem;
           }
           #_dd6a5fe6b03444e6beff4028f41f172e div { flex: 1 1 0; }
           #_dd6a5fe6b03444e6beff4028f41f172e div.color { width: 100%; height: 100%; }
           #_dd6a5fe6b03444e6beff4028f41f172e div.cmap { width: 100%; height: auto; }
           #_dd6a5fe6b03444e6beff4028f41f172e div.cmap > img { width: 100%; height: 100%; }
       </style>
       <strong>greenorange</strong>
       
       <div id="_dd6a5fe6b03444e6beff4028f41f172e" class="color-map">
           
                           <div>
                   <style>
       #_c828bb08379041298b54a3c51de29865 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(50, 162, 81, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c828bb08379041298b54a3c51de29865::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c828bb08379041298b54a3c51de29865:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c828bb08379041298b54a3c51de29865" class="color" data-tooltip="RGBA: 50, 162, 81, 1.0
   HEXA: #32a251ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_3b6461e3777640ebb3a8f3c0fe968301 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(172, 217, 141, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_3b6461e3777640ebb3a8f3c0fe968301::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_3b6461e3777640ebb3a8f3c0fe968301:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_3b6461e3777640ebb3a8f3c0fe968301" class="color" data-tooltip="RGBA: 172, 217, 141, 1.0
   HEXA: #acd98dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_6b4d9fc439de4402b2d3468337ba4797 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 127, 15, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_6b4d9fc439de4402b2d3468337ba4797::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_6b4d9fc439de4402b2d3468337ba4797:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_6b4d9fc439de4402b2d3468337ba4797" class="color" data-tooltip="RGBA: 255, 127, 15, 1.0
   HEXA: #ff7f0fff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_0be4d615bbea4d68ab0e3920a87fedc6 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 185, 119, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_0be4d615bbea4d68ab0e3920a87fedc6::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_0be4d615bbea4d68ab0e3920a87fedc6:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_0be4d615bbea4d68ab0e3920a87fedc6" class="color" data-tooltip="RGBA: 255, 185, 119, 1.0
   HEXA: #ffb977ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c253276c2a4c4deab1bc4ec69f7427a9 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(60, 183, 204, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c253276c2a4c4deab1bc4ec69f7427a9::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c253276c2a4c4deab1bc4ec69f7427a9:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c253276c2a4c4deab1bc4ec69f7427a9" class="color" data-tooltip="RGBA: 60, 183, 204, 1.0
   HEXA: #3cb7ccff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c53feb53c7634efd8653415b0888b506 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(152, 217, 228, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c53feb53c7634efd8653415b0888b506::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c53feb53c7634efd8653415b0888b506:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c53feb53c7634efd8653415b0888b506" class="color" data-tooltip="RGBA: 152, 217, 228, 1.0
   HEXA: #98d9e4ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_80cf59091028404eaeef44eea1e989a7 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(184, 90, 13, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_80cf59091028404eaeef44eea1e989a7::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_80cf59091028404eaeef44eea1e989a7:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_80cf59091028404eaeef44eea1e989a7" class="color" data-tooltip="RGBA: 184, 90, 13, 1.0
   HEXA: #b85a0dff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_b4f0a25bad474819bfde48a47e57dcff { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(255, 217, 74, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_b4f0a25bad474819bfde48a47e57dcff::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_b4f0a25bad474819bfde48a47e57dcff:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_b4f0a25bad474819bfde48a47e57dcff" class="color" data-tooltip="RGBA: 255, 217, 74, 1.0
   HEXA: #ffd94aff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_e96f8ef5fe0946389f507a511f80f21a { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(57, 115, 124, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_e96f8ef5fe0946389f507a511f80f21a::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_e96f8ef5fe0946389f507a511f80f21a:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_e96f8ef5fe0946389f507a511f80f21a" class="color" data-tooltip="RGBA: 57, 115, 124, 1.0
   HEXA: #39737cff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_1d9bdf344bd04e4f96bec55e6a9ddcdd { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(134, 180, 169, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_1d9bdf344bd04e4f96bec55e6a9ddcdd::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_1d9bdf344bd04e4f96bec55e6a9ddcdd:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_1d9bdf344bd04e4f96bec55e6a9ddcdd" class="color" data-tooltip="RGBA: 134, 180, 169, 1.0
   HEXA: #86b4a9ff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_c9dd664232984aedb02134b6e0649618 { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(130, 133, 59, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_c9dd664232984aedb02134b6e0649618::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_c9dd664232984aedb02134b6e0649618:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_c9dd664232984aedb02134b6e0649618" class="color" data-tooltip="RGBA: 130, 133, 59, 1.0
   HEXA: #82853bff        "></div>
               </div>
   
           
                           <div>
                   <style>
       #_ff8167d4415c403e999db084ad9df12c { 
           position: relative;
           display: inline-block;
           cursor: pointer;
           background: rgba(204, 201, 77, 1.0);
           width: 2rem; height: 1.5rem;
       }
       #_ff8167d4415c403e999db084ad9df12c::after {
           content: attr(data-tooltip);
           position: absolute;
           bottom: 50%;
           left: 0%;
           transform: translateY(50%);
           padding: 0.125rem;
           white-space: pre;
           font-size: 0.75rem;
           font-family: monospace;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(0.25rem);
           color: white;
           border-radius: 0.25rem;
           opacity: 0;
           pointer-events: none;
           transition: opacity 0.1s ease-in-out;
           z-index: -1;
       }
       #_ff8167d4415c403e999db084ad9df12c:hover::after {
           opacity: 1;
           z-index: 1;
       }
   </style>       
   
                   <div id="_ff8167d4415c403e999db084ad9df12c" class="color" data-tooltip="RGBA: 204, 201, 77, 1.0
   HEXA: #ccc94dff        "></div>
               </div>
   
           
       </div>
       
   </div>
       
   </div>


|


Navigation
----------

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

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