<script lang='ts'>
  import { goto } from '$app/navigation';
  import { screenWidth, numberOfUnreadNotification } from '$lib/store';
  import republicanBackground from "$lib/images/bg-republican.png";
  import democraticBackground from "$lib/images/bg-democratic.png";
  import otherBackground from "$lib/images/bg-other.png";
  import { getPartyForPoliticians, abbreviateNumber } from '$lib/utils';
  import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
  import { Chart } from 'svelte-echarts'
  
  import { onMount } from 'svelte';
  
  export let data;
  let isLoaded = false;
  let rawData = data?.getPolitician?.output;
  let displayList = [];
  let optionsData = {};
  
  let name = rawData?.at(0)?.representative ?? 'n/a';
  let numOfTrades = rawData?.length;
  let lastTradedDate = rawData?.at(0)?.transactionDate;
  let buySellRatio = 0
  let totalAmountTraded = 0;
  let politicianImage =  data?.getPolitician?.politicianImage;
  let politicianDistrict = data?.getPolitician?.politicianDistrict;
  let politicianCongress =  data?.getPolitician?.politicianCongress;
  let numOfAssets = new Set(rawData?.map(item => item?.ticker))?.size;
  let politicianParty = data?.getPolitician?.politicianParty;

  
  function getYearFromDate(dateString) {
    return new Date(dateString).getFullYear();
  }
  
  // Function to extract the number from the amount string
  function extractNumberFromAmount(amount) {
    const dashIndex = amount?.indexOf('-');
    if (dashIndex !== -1) {
      const numberAfterDash = amount?.slice(dashIndex + 1);
      const suffix = numberAfterDash?.slice(-1);
      let multiplier = 1;
      if (suffix === 'K') {
        multiplier = 1e3;
      } else if (suffix === 'M') {
        multiplier = 1e6;
      }
      const parsedNumber = parseFloat(numberAfterDash?.replace(/[^\d.]/g, '')) * multiplier;
      return isNaN(parsedNumber) ? 0 : parsedNumber;
    }
    return 0;
  }
  
  // Calculate the total sum
  totalAmountTraded = rawData?.reduce((sum, item) => {
    const amount = item?.amount;
    const parsedAmount = extractNumberFromAmount(amount);
    return sum + parsedAmount;
  }, 0);
  
  
  
  
  async function infiniteHandler({ detail: { loaded, complete } }) 
  {
    if (displayList?.length === rawData?.length) {
        complete();
      } else {
        const nextIndex = displayList?.length;
        const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
        displayList = [...displayList, ...newArticles];
        loaded();
      }
  }
  
  
  function normalizer(value) {
    if (Math?.abs(value) >= 1e12) {
      return { unit: 'T', denominator: 1e12 };
    } else if (Math?.abs(value) >= 1e9) {
      return { unit: 'B', denominator: 1e9 };
    } else if (Math?.abs(value) >= 1e6) {
      return { unit: 'M', denominator: 1e6 };
    } else if (Math?.abs(value) >= 1e5) {
      return { unit: 'K', denominator: 1e5 };
    } else {
      return { unit: '', denominator: 1 };
    }
  }
  
  async function getPlotOptions() {
      // Get unique years from the data
      const uniqueYears = [2017, 2018,2019,2020,2021,2022,2023,2024] //[...new Set(rawData?.map(item => getYearFromDate(item?.transactionDate)))]?.reverse();
      // Initialize boughtList and soldList arrays
      const boughtList = [];
      const soldList = [];
      const dates = [];
  
      // Calculate the total bought and sold amounts for each year
      uniqueYears?.forEach(year => {
        const boughtAmount = rawData
          ?.filter(item => getYearFromDate(item?.transactionDate) === year && item?.type === 'Bought')
          ?.reduce((sum, item) => sum + extractNumberFromAmount(item?.amount), 0);
  
        const soldAmount = rawData
          ?.filter(item => getYearFromDate(item.transactionDate) === year && item?.type === 'Sold')
          ?.reduce((sum, item) => sum + extractNumberFromAmount(item?.amount), 0);
  
        boughtList.push( boughtAmount );
        soldList.push( soldAmount );
  
        const fiscalYear = "FY" + String(year)?.slice(2);
        dates?.push(fiscalYear);
      });
  
      
      const maxBought = Math.max(...boughtList) ?? 0;
      const maxSold = Math.max(...soldList) ?? 0;
      const { unit, denominator } = normalizer(maxBought > maxSold ? maxBought : maxSold);
  
  
  
    const option = {
      silent: true,
      grid: {
          left: $screenWidth < 640 ? '5.2%' : '0.5%',
          right: $screenWidth < 640 ? '5%' : '0.5%',
          bottom: '0%',
          containLabel: true
      },
      xAxis: {
          data: dates,
          type: 'category',
          },
          yAxis: [
          {
              type: 'value',
              splitLine: {
              show: false, // Disable x-axis grid lines
              },
              axisLabel: {
              color: '#6E7079', // Change label color to white
              formatter: function (value) {
                  return '$'+(value / denominator)?.toFixed(0) + unit; // Format value in millions
                  },
              },
          },
          ],
      series: [
          {
              data: boughtList,
              type: 'bar',
              itemStyle: {
                      color: '#69B3A2' // Change bar color to white
                },
              barWidth: '25%',
            },
            
          {
              data: soldList,
              type: 'bar',
              itemStyle: {
                  color: '#E8864D' // Change bar color to white
              },
              barWidth: '25%',
          },
      ]
      };
  
  
  return option;
  }
  
  onMount(async () => {
    isLoaded = false;
    optionsData = await getPlotOptions();
     
    const typeCounts = rawData?.reduce((counts, item) => {
          counts[item?.type] = (counts[item?.type ] || 0) + 1;
          return counts;
      }, {});
      
      buySellRatio = typeCounts['Bought'] > 0 && typeCounts['Sold'] === undefined ? 1 : typeCounts['Bought'] === undefined ? 0 : typeCounts["Bought"]/typeCounts["Sold"];
  
    displayList = rawData?.slice(0,20) ?? [];
      

    isLoaded = true;
  
  });
  
  
  
    let charNumber = 40;
    $: {
      if ($screenWidth < 640)
      {
        charNumber = 15;
      }
      else {
        charNumber = 40;
      }
    }
    
          
    </script>
    
    
  <svelte:head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>
      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''}  Which stocks is {name} trading? · stocknear
  </title>
  <meta name="description" content={`A list of all trades from the US Politician ${name}.`} />
  
  <!-- Other meta tags -->
  <meta property="og:title" content={`Which stocks is ${name} trading? · stocknear`}/>
  <meta property="og:description" content={`A list of all trades from the US Politician ${name}.`} />
  <meta property="og:type" content="website"/>
  <!-- Add more Open Graph meta tags as needed -->
  
  <!-- Twitter specific meta tags -->
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content={`Which stocks is ${name} trading? · stocknear`}/>
  <meta name="twitter:description" content={`A list of all trades from the US Politician ${name}.`} />
  <!-- Add more Twitter meta tags as needed -->
  
  </svelte:head>
  
  
  
    <section class="w-full max-w-6xl overflow-hidden m-auto min-h-screen pt-5 pb-60 sm:px-10 xl:px-0">
  
      <div class="text-sm breadcrumbs ml-4 pb-10">
        <ul>
          <li><a href="/" class="text-gray-300">Home</a></li> 
          <li><a href="/politicians" class="text-gray-300">Politicians</a></li> 
          <li class="text-gray-300">{name}</li>
        </ul>
      </div>
              
              
      <div class="w-full overflow-hidden m-auto px-3 sm:px-0">
        
        <div class="flex justify-center w-full m-auto overflow-hidden">
            <div class="relative flex flex-col sm:flex-row justify-between items-start overflow-hidden w-full">
  
              <aside class="relative fixed w-full sm:w-1/3">        
                  <!--Start Card-->
                  <div class="w-full bg-[#141417] border border-gray-800 rounded-lg h-auto pb-4">
                    <div class="flex flex-col relative ">
                      {#if politicianParty === 'Republican'}
                      <img class="absolute  w-full m-auto rounded-lg " src={republicanBackground} />
                      {:else if politicianParty === 'Democratic'}
                        <img class="absolute w-[500px] m-auto rounded-lg"  src={democraticBackground} />
                      {:else}
                        <img class="absolute w-[500px] m-auto rounded-lg" src={otherBackground} />
                      {/if}
                      <div class="flex flex-col justify-center items-center rounded-2xl ">
  
  
                        <div class="mt-10 rounded-full border border-slate-600 w-24 h-24 relative {politicianParty === 'Republican' ? 'republican-striped bg-[#98272B]' : politicianParty === 'Democratic' ? 'democratic-striped bg-[#295AC7]' : 'other-striped bg-[#20202E]'} flex items-center justify-center">
                          <img style="clip-path: circle(50%);" class="rounded-full w-20"  src={politicianImage} loading="lazy"/>
                        </div>
                        <span class="text-white text-lg sm:text-xl font-medium mt-6 mb-2">
                          {name?.replace('Dr','')}
                        </span>
                        <span class="text-white text-md mb-8">
                          {politicianParty ?? 'n/a'} / {politicianCongress} {#if politicianDistrict !== undefined && politicianDistrict?.length !== 0} / {politicianDistrict} {/if}
                        </span>
  
                      </div>
  
                      <div class="flex flex-row justify-between items-center w-full px-10 pb-4">
                        <label class="cursor-pointer flex flex-col items-center">
                          <span class="text-white text-[1rem] font-semibold">{abbreviateNumber(numOfTrades)}</span>
                          <span class="text-slate-300 font-medium text-sm">Total Trades</span>
                        </label>
    
                        <div class="flex flex-col items-center ">
                          <span class="text-white text-[1rem] font-semibold">
                            {lastTradedDate?.length !== undefined ? new Date(lastTradedDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                          </span>
                          <span class="text-slate-300 font-medium text-sm">Last Traded</span>
                        </div>
                      </div>
  
  
                  </div>
                </div>
                  <!--End Card-->
  
                   <!--Start Widget-->
                   <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
                    <div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
                       <!--Start Total Amount Traded-->  
                       <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] rounded-2xl h-20">
                        <div class="flex flex-col items-start">
                            <span class="font-medium text-gray-200 text-sm ">Total Amount</span>
                            <span class="text-start text-[1rem] font-medium text-white mt-0.5">
                              ${new Intl.NumberFormat("en", {
                                minimumFractionDigits: 0,
                                maximumFractionDigits: 0
                            }).format(totalAmountTraded)}
                            </span>
                        </div>
                        
                    </div>
                    <!--End Total Amount Traded-->
                      <!--Start Buy/Sell-->  
                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#27272A] rounded-2xl h-20">
                        <div class="flex flex-col items-start">
                            <span class="font-medium text-gray-200 text-sm sm:text-[1rem] ">Buy/Sell</span>
                            <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
                              {buySellRatio?.toFixed(3)}
                            </span>
                        </div>
                        <!-- Circular Progress -->
                          <div class="relative size-12 ml-auto">
                            <svg class="size-full w-12 h-12" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                              <!-- Background Circle -->
                              <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#3E3E3E]" stroke-width="3"></circle>
                              <!-- Progress Circle inside a group with rotation -->
                              <g class="origin-center -rotate-90 transform">
                                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current {buySellRatio >=0.5 ? 'text-[#00FC50]' : 'text-[#EE5365]'} " stroke-width="3" stroke-dasharray="100" stroke-dashoffset={(100- buySellRatio*100) >= 0 ? 100-(buySellRatio*100)?.toFixed(2) : 0}></circle>
                              </g>
                            </svg>
                            <!-- Percentage Text -->
                            <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
                              <span class="text-center text-white text-sm">{buySellRatio?.toFixed(2)}</span>
                            </div>
                          </div>
                        <!-- End Circular Progress -->
              
                    </div>
                    <!--End Buy/Sell-->
                    
                      </div>
                    </div>
                  <!--End Widget-->
  
              </aside>
  
  
                <main class="w-full mt-10 sm:mt-0 sm:w-3/4 sm:ml-5">
                
                  {#if isLoaded && Object?.keys(optionsData)?.length !== 0}
                  <div class="p-0 sm:p-10 bg-[#09090B] sm:bg-[#09090B] rounded-lg sm:min-h-[330px] mb-10 sm:mb-6">
  
                    <div class="flex flex-row justify-center sm:justify-start items-center">
                      <svg class="w-7 h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="#849AAE" d="M576 0c17.7 0 32 14.3 32 32v448c0 17.7-14.3 32-32 32s-32-14.3-32-32V32c0-17.7 14.3-32 32-32M448 96c17.7 0 32 14.3 32 32v352c0 17.7-14.3 32-32 32s-32-14.3-32-32V128c0-17.7 14.3-32 32-32m-96 128v256c0 17.7-14.3 32-32 32s-32-14.3-32-32V224c0-17.7 14.3-32 32-32s32 14.3 32 32m-160 64c17.7 0 32 14.3 32 32v160c0 17.7-14.3 32-32 32s-32-14.3-32-32V320c0-17.7 14.3-32 32-32M96 416v64c0 17.7-14.3 32-32 32s-32-14.3-32-32v-64c0-17.7 14.3-32 32-32s32 14.3 32 32"/></svg>
                      <span class="ml-3 text-white text-xl">Trade Amount by Year</span>
                    </div>
                    <div class="app w-full h-[300px] ">
                      <Chart options={optionsData} class="chart" />
                    </div>
  
                    <div class="flex flex-row items-center justify-between mx-auto mt-10 sm:mt-5 w-56 sm:w-80">
                      <div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
                      <div class="h-full bg-[#313131] transform -translate-x-1/2 " aria-hidden="true"></div>
                      <div class="w-3 h-3 bg-[#69B3A2] border-4 box-content border-[#313131] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
                      <span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
                          Bought
                      </span>
                  </div>
                      <div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
                          <div class="h-full bg-[#313131] transform -translate-x-1/2 " aria-hidden="true"></div>
                          <div class="w-3 h-3 bg-[#E8864D] border-4 box-content border-[#313131] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
                          <span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
                          Sold
                          </span>
                      </div>
              
                  
              </div>
  
  
                  </div>
                  {/if}
                <div class="p-0 sm:p-10 bg-[#09090B] sm:bg-[#09090B] rounded-lg sm:min-h-[330px]">
                  <div class="w-full m-auto h-auto sm:max-h-[500px] sm:overflow-y-scroll scroller">
  
  
                    {#if rawData?.length !== 0}
                    <div class="hidden sm:block">
                    <span class="text-[#F5F5F5] font-bold text-2xl">
                      {numOfAssets} Assets
                    </span>
  
                      <table class="-ml-2 table table-sm table-compact table-pin-rows table-pin-cols rounded-none sm:rounded-md w-full bg-[#09090B] m-auto mt-5 ">
                        <!-- head -->
                        <thead>
                          <tr class="bg-[#09090B]">
                            <th class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
                              Name
                            </th>
                            <th class="shadow-md text-start bg-[#09090B]  text-white text-sm font-semibold">
                              Transaction
                            </th>
                            <th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
                              Traded
                            </th>
                            <th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
                              Filed
                            </th>
                          </tr>
                        </thead>
                        <tbody class="p-0">
                          {#each displayList as item}
                              <tr on:click={() => goto(`/${item?.assetType === 'stock' ? 'stocks' : item?.assetType === 'etf' ? 'etf' : 'crypto'}/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#27272A] cursor-pointer">
                                
                                <td class="text-gray-200 pb-3 border-b border-b-[#27272A]">
                                  <div class="flex flex-row items-center">
                                    <div class="flex-shrink-0 rounded-full w-8 h-8 relative bg-[#09090B] flex items-center justify-center">
                                      <img style="clip-path: circle(50%);" class="avatar w-5 h-5" src={`https://financialmodelingprep.com/image-stock/${item?.ticker}.png`} alt="stock logo"/>
                                    </div>
                                    <div class="flex flex-col ml-2">
                                      <span class="text-blue-400">{item?.ticker?.replace('_',' ')}</span>
                                      <span class="text-white text-opacity-80 text-xs">{item?.name?.length > 20 ? item?.name?.slice(0,20)+'...' : item?.name}</span>
                                    </div>
                                  </div>
                                  <!--{item?.firstName} {item?.lastName}-->
                                </td>
  
                                <td class="text-start text-xs sm:text-sm text-white border-b border-b-[#27272A]">
                                  <div class="flex flex-col items-start">
                                    <span class="font-semibold">
                                      {#if item?.type === 'Bought'}
                                        <span class="text-[#57D7BA]">Purchase</span>
                                      {:else if item?.type === 'Sold'}
                                        <span class="text-[#fe5555]">Sale</span>
                                      {:else if item?.type === 'Exchange'}
                                        <span class="text-[#C6A755]">Exchange</span>
                                      {/if}
                                    </span>
                                    <span>
                                      {item?.amount}
                                    </span>
                                  </div>
                                </td>
      
                                  <td class="text-end text-sm text-white border-b border-b-[#27272A]">
                                      {new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                  </td>
  
                                  <td class="text-end text-sm text-white border-b border-b-[#27272A]">
                                    {new Date(item?.disclosureDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                </td>
                              </tr>
                            {/each}
                        </tbody>
                      </table>
                    </div>
                    
  
                    <div class="sm:hidden flex flex-col justify-center w-full m-auto h-full overflow-hidden mt-3">
        
                      <span class="ml-3 text-[#F5F5F5] font-bold text-2xl">
                        {numOfAssets} Assets
                      </span>
  
                      <!-- Content area -->
                      <div class="mt-4 w-full overflow-x-auto scroller">
                        
  
                        <table class="-ml-2 table mt-3 w-screen">
                            <thead>
                              <tr class="">
                                <th class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
                                  Name
                                </th>
                                <th class="shadow-md text-start bg-[#09090B]  text-white text-sm font-semibold">
                                  Transaction
                                </th>
                                <th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
                                  Traded
                                </th>
                                <th class="shadow-md text-end bg-[#09090B] text-white text-sm font-semibold">
                                  Filed
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                              {#each displayList as item,index}
                              <!-- row -->
                              <tr on:click={() => goto(`/${item?.assetType === 'stock' ? 'stocks' : item?.assetType === 'etf' ? 'etf' : 'crypto'}/${item?.ticker}`)} class="w-screen odd:bg-[#27272A] border-b-[#09090B]">
                                
                                <td class="text-gray-200 pb-3 border-b border-b-[#09090B] whitespace-nowrap">
                                  <div class="flex flex-row items-center">
                                    <div class="flex flex-col">
                                      <span class="text-blue-400 text-sm">{item?.ticker?.replace('_',' ')}</span>
                                      <span class="text-white text-opacity-80 text-xs">{item?.name?.length > 15 ? item?.name?.slice(0,15)+'...' : item?.name}</span>
                                    </div>
                                  </div>
                                  <!--{item?.firstName} {item?.lastName}-->
                                </td>
      
                                <td class="text-start text-sm text-white border-b border-b-[#09090B] whitespace-nowrap ">
                                  <div class="flex flex-col items-start">
                                    <span class="font-semibold">
                                      {#if item?.type === 'Bought'}
                                        <span class="text-[#57D7BA]">Purchase</span>
                                      {:else if item?.type === 'Sold'}
                                        <span class="text-[#fe5555]">Sale</span>
                                      {:else if item?.type === 'Exchange'}
                                        <span class="text-[#C6A755]">Exchange</span>
                                      {/if}
                                    </span>
                                    <span>
                                      {item?.amount}
                                    </span>
                                  </div>
                                </td>
      
                                  <td class="text-end text-sm text-white border-b border-b-[#09090B] whitespace-nowrap">
                                      {new Date(item?.transactionDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                  </td>
  
                                  <td class="text-end text-sm text-white border-b border-b-[#09090B] whitespace-nowrap">
                                    {new Date(item?.disclosureDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                </td>
                        
                
                
                              </tr>
                              
                          
                              {/each}
                            </tbody>
                          </table>
                        </div>
          
            
            
                  </div>
              
                      <InfiniteLoading on:infinite={infiniteHandler} />
  
  
                      {:else} 
                      <div class="flex justify-center items-center m-auto sm:mt-24 mt-32 mb-6">
                        <div class="text-gray-100 text-sm sm:text-[1rem] sm:rounded-lg h-auto border border-slate-800 p-4">
                          <svg class="w-5 h-5 inline-block mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
                          No Trading activity found
                        </div>
                      </div>
                      {/if}
  
                      
  
                      
    
                  </div>
                </div>
                </main>
            </div>
        </div>
    
      
      </div>
          
          
      
    </section>
    
    
      
  
  <style>
  .scroller {
    scrollbar-width: thin;
  }
    .app {
        height: 300px;
        max-width: 100%; /* Ensure chart width doesn't exceed the container */
    
        }
    
        @media (max-width: 640px) {
        .app {
            height: 230px;
        }
        }
    
        .chart {
        width: 100%;
        }
    .republican-striped {
      background-image: repeating-linear-gradient(
          -45deg,
          #98272B,
          #98272B 10px,
          #840412 10px,
          #840412 20px
      );
  }
  
  .democratic-striped {
      background-image: repeating-linear-gradient(
          -45deg,
          #295AC7,
          #295AC7 10px,
          #164D9D 10px,
          #164D9D 20px
      );
  }
  
  .other-striped {
      background-image: repeating-linear-gradient(
          -45deg,
          #A4A6A8,
          #A4A6A8 10px,
          #C0C3C5 10px,
          #C0C3C5 20px
      );
  }
    </style>