Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- codepen.io/nonsalant/pen/jOPQRrE.html -->
<!--
  https://cdpn.io/e/jOPQRrE
  https://2020pandemic.netlify.app/
  https://github.com/nonsalant/2020pandemic
-->

  <div class="container" ontouchstart="javascript: return 0;">

    <section class="section">
      <h1 class="logo">
        <span class="virus">๐Ÿฆ </span>
        <span class="logo-text">Live Coronavirus
          Containment Stats</span>
      </h1> 
    </section>
    
    <!-- hero section -->
    <section class="section">
      <h4>
        <span class="numeral">1.</span> 
        COVID-19
          โ€œinactivationโ€
        <sup class="tooltip-info" 
             style="font-size:.7em; border:solid 2px #fff; width:1.75em; display:none;">
          <span>i</span>
          </sup>
        as a % of the total number&nbsp;of&nbsp;cases
      </h4>
      
      <br>
      
            
      <p id="hero-local-label">
        <button class="has-tooltip-right no-button-styles"
                data-tooltip="The virus becomes inactivated 
when people who have it die 
or recover.">
          <em>Inactivated</em>
        </button>
         virus</p>
      
      <h3 id="hero-local" class="percentage" style="margin:1.5em 0; margin-top:.5em;">
        <div class="percentage-bar">
          &nbsp;&nbsp;โ€ฆ%
        </div>
        <small class="percentage-empty">
          โ€ฆ% ๐Ÿฆ  ACTIVE CASES
        </small>
      </h3>
      
      <p id="hero-global-label">
        <button class="has-tooltip-right no-button-styles"
                data-tooltip="The virus becomes inactivated 
when people who have it die 
or recover.">
          <em>Inactivated</em>
        </button> virus, worldwide:
      </p>
      <h3 id="hero-global" class="percentage" style="margin:1.5em 0; margin-top:.5em;">
        <div class="percentage-bar">
          &nbsp;&nbsp;โ€ฆ%
        </div>
        <small class="percentage-empty">
          โ€ฆ% ๐Ÿฆ  ACTIVE CASES
        </small>
      </h3>

      <hr style="margin-top:3em; margin-bottom:1em;">
      
    </section>
    <!-- hero section --> 
    
    


    <section class="section" style="padding-top:0;">
      <h4 style="padding:1em 0; padding-top:0;" class="">
        <span class="numeral">2.</span> How different countries have dealt with the pandemic&nbsp;so&nbsp;far
      </h4>
      
      <section class="cr-section">
        
        <p style="clear:both;">
          The <i>Containment Ratio</i> (<i>C. R<small>ATIO</small></i>)
          represents the proportion
          of cases where the coronavirus has become unable to spread because the person carrying it has either died or recovered.
        </p>
        
        <h2 class="section" style="display: flex; justify-content: flex-end;">

          <small class="after-equals">
            <span style="border-bottom: solid; padding-bottom: .5em; margin-bottom: .5em;">
            <span class="green" style="background:#fafffacc;">
            Recoveries</span>
            +
            <span class="deaths" style="margin:0 .25em;">
             Deaths</span>
            </span>

            <span style="text-align: center;">
              <span class="red" style="background:#fffafacc;">
                Total Cases
              </span>
            </span>
          </small>
          
          <b style="line-height:3em;">
            = C<small>.</small>
          R<small>atio</small></b>
          
        </h2>
        
      </section>

      <figure class="section" style="margin:0; margin-top:.5em; padding:0;">
        <small class="legend">
          <button 
          class="tooltip-info has-tooltip-right" 
          style="outline:none;"
          data-tooltip="Tap/hover the names & numbers below for more info">
            <span>i</span>
          </button>
          (
          <button title="order by"
                  onclick="sortList('.recovered', true);">
            <span class="green" style="background:#fafffacc;">
              Recoveries
            </span>
          </button>
          +
          <button title="order by"
                  onclick="sortList('.deaths', true);">
            <span class="deaths">
              Deaths
            </span>
          </button>
          ) /
          <button title="order by"
                  onclick="sortList('.cases', true);">
            <span class="red" style="background:#fffafacc;">
             Cases
            </span>
          </button>
          =
          <button title="order by" style="margin-right: 0.65em;"
                  onclick="sortList('.c-ratio', true);">
            <span class="gray">
              C. Ratio
            </span>
          </button>
        </small>
        <main class="country-stats">
          <div id="Algeria" class="block"></div>
          <div id="Andorra" class="block"></div>
          <div id="Argentina" class="block"></div>
          <div id="Armenia" class="block"></div>
          <div id="Australia" class="block"></div>
          <div id="Austria" class="block"></div>
          <div id="Azerbaijan" class="block"></div>
          <div id="Bahrain" class="block"></div>
          <div id="Belarus" class="block"></div>
          <div id="Belgium" class="block"></div>
          <div id="Bosnia%20and%20Herzegovina" class="block"></div>
          <div id="Brazil" class="block"></div>
          <div id="Bulgaria" class="block"></div>
          <div id="Cameroon" class="block"></div>
          <div id="Canada" class="block"></div>
          <div id="Chile" class="block"></div>
          <div id="China" class="block"></div>
          <div id="Colombia" class="block"></div>
          <div id="Croatia" class="block"></div>
          <div id="Czechia" class="block"></div>
          <div id="Denmark" class="block"></div>
          <div id="Diamond%20Princess" class="block"></div>
          <div id="Dominican%20Republic" class="block"></div>
          <div id="Ecuador" class="block"></div>
          <div id="Egypt" class="block"></div>
          <div id="Estonia" class="block"></div>
          <div id="Finland" class="block"></div>
          <div id="France" class="block"></div>
          <div id="Germany" class="block"></div>
          <div id="Greece" class="block"></div>
          <div id="Hong%20Kong" class="block"></div>
          <div id="Hungary" class="block"></div>
          <div id="Iceland" class="block"></div>
          <div id="India" class="block"></div>
          <div id="Indonesia" class="block"></div>
          <div id="Iran" class="block"></div>
          <div id="Iraq" class="block"></div>
          <div id="Ireland" class="block"></div>
          <div id="Israel" class="block"></div>
          <div id="Italy" class="block"></div>
          <div id="Japan" class="block"></div>
          <div id="Kazakhstan" class="block"></div>
          <div id="Kuwait" class="block"></div>
          <div id="Latvia" class="block"></div>
          <div id="Lithuania" class="block"></div>
          <div id="Luxembourg" class="block"></div>
          <div id="Malaysia" class="block"></div>
          <div id="Mexico" class="block"></div>
          <div id="Moldova" class="block"></div>
          <div id="Morocco" class="block"></div>
          <div id="Netherlands" class="block"></div>
          <div id="New%20Zealand" class="block"></div>
          <div id="North%20Macedonia" class="block"></div>
          <div id="Norway" class="block"></div>
          <div id="Pakistan" class="block"></div>
          <div id="Panama" class="block"></div>
          <div id="Peru" class="block"></div>
          <div id="Philippines" class="block"></div>
          <div id="Poland" class="block"></div>
          <div id="Portugal" class="block"></div>
          <div id="Qatar" class="block"></div>
          <div id="Romania" class="block"></div>
          <div id="Russia" class="block"></div>
          <div id="S.%20Korea" class="block"></div>
          <div id="Saudi%20Arabia" class="block"></div>
          <div id="Serbia" class="block"></div>
          <div id="Singapore" class="block"></div>
          <div id="Slovakia" class="block"></div>
          <div id="Slovenia" class="block"></div>
          <div id="South%20Africa" class="block"></div>
          <div id="Spain" class="block"></div>
          <div id="Sweden" class="block"></div>
          <div id="Switzerland" class="block"></div>
          <div id="Thailand" class="block"></div>
          <div id="Tunisia" class="block"></div>
          <div id="Turkey" class="block"></div>
          <div id="UAE" class="block"></div>
          <div id="UK" class="block"></div>
          <div id="USA" class="block"></div>
          <div id="Ukraine" class="block"></div>
          <div id="Global" class="block"></div>
        </main><!-- .contry-stats -->
      </figure>

      <small class="autorefresh-container section">
        <input onclick="toggle_auto_refresh(this.checked)"
               type="checkbox" id="autorefresh" name="autorefresh">
        <label 
               data-tooltip="Pull new data every 3 sec."
               for="autorefresh"><b>&thinsp;&nbsp;&nbsp;<u>Auto-refresh data</u></b></label>
      </small>

      <div class="chart-options">
        <button class="button danger" style="margin-bottom:1em;" 
                onclick="toggle_close_buttons(this)" id="toggle_close_buttons">Delete countriesโ€ฆ</button>
        <button class="button danger" style="margin-bottom:1em;" 
                onclick="remove_all_countries()">Delete all</button>
        <span style="margin-bottom:1em;" class="add-country has-tooltip-bottom"
              data-tooltip="Type above or use โ€œโ–ผโ€ to select from dropdown">
          <label for="country-list-choice"><small>โž•</small> <u><b>Add</b></u>:</label>&nbsp;
          <input placeholder=" countryโ€ฆ" list="country-list" id="country-list-choice" name="country-list-choice" />
          <datalist id="country-list">
            <option value="๐Ÿ‡ฆ๐Ÿ‡ซ Afghanistan">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡ฑ Albania">
            </option><option value="๐Ÿ‡ฉ๐Ÿ‡ฟ Algeria">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡ฉ Andorra">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡ด Angola">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡ฎ Anguilla">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡ฌ Antigua and Barbuda">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡ท Argentina">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡ฒ Armenia">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡ผ Aruba">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡บ Australia">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡น Austria">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡ฟ Azerbaijan">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ธ Bahamas">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ญ Bahrain">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ฉ Bangladesh">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ง Barbados">
            </option><option value="๐Ÿ‡ง๐Ÿ‡พ Belarus">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ช Belgium">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ฟ Belize">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ฏ Benin">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ฒ Bermuda">
            </option><option value="๐Ÿ‡ง๐Ÿ‡น Bhutan">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ด Bolivia">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ฆ Bosnia and Herzegovina">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ผ Botswana">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ท Brazil">
            </option><option value="๐Ÿ‡ป๐Ÿ‡ฌ British Virgin Islands">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ณ Brunei">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ฌ Bulgaria">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ซ Burkina Faso">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ซ CAR">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ป Cabo Verde">
            </option><option value="๐Ÿ‡ฐ๐Ÿ‡ญ Cambodia">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ฒ Cameroon">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ฆ Canada">
            </option><option value="๐Ÿ‡ฐ๐Ÿ‡พ Cayman Islands">
            </option><option value="๐Ÿ‡น๐Ÿ‡ฉ Chad">
            </option><option value="&nbsp;&nbsp;&nbsp;&thinsp; Channel Islands">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ฑ Chile">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ณ China">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ด Colombia">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ฌ Congo">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ท Costa Rica">
            </option><option value="๐Ÿ‡ญ๐Ÿ‡ท Croatia">
            </option><option value="๐Ÿ‡จ๐Ÿ‡บ Cuba">
            </option><option value="๐Ÿ‡จ๐Ÿ‡พ Cyprus">

            </option><option value="๐Ÿ‡จ๐Ÿ‡ฟ Czechia">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ฉ DRC">
            </option><option value="๐Ÿ‡ฉ๐Ÿ‡ฐ Denmark">
            </option><option value="๐Ÿšข Diamond Princess">
            </option><option value="๐Ÿ‡ฉ๐Ÿ‡ฏ Djibouti">
            </option><option value="๐Ÿ‡ฉ๐Ÿ‡ฒ Dominica">
            </option><option value="๐Ÿ‡ฉ๐Ÿ‡ด Dominican Republic">
            </option><option value="๐Ÿ‡ช๐Ÿ‡จ Ecuador">
            </option><option value="๐Ÿ‡ช๐Ÿ‡ฌ Egypt">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ป El Salvador">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ถ Equatorial Guinea">
            </option><option value="๐Ÿ‡ช๐Ÿ‡ท Eritrea">
            </option><option value="๐Ÿ‡ช๐Ÿ‡ช Estonia">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ฟ Eswatini">
            </option><option value="๐Ÿ‡ช๐Ÿ‡น Ethiopia">
            </option><option value="๐Ÿ‡ซ๐Ÿ‡ด Faeroe Islands">
            </option><option value="๐Ÿ‡ซ๐Ÿ‡ฏ Fiji">
            </option><option value="๐Ÿ‡ซ๐Ÿ‡ฎ Finland">
            </option><option value="๐Ÿ‡ซ๐Ÿ‡ท France">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ซ French Guiana">
            </option><option value="๐Ÿ‡ต๐Ÿ‡ซ French Polynesia">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ฆ Gabon">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ฒ Gambia">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ช Georgia">
            </option><option value="๐Ÿ‡ฉ๐Ÿ‡ช Germany">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ญ Ghana">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ฎ Gibraltar">
            </option><option value="๐ŸŒŽ Global">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ท Greece">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ฑ Greenland">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ฉ Grenada">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ต Guadeloupe">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡น Guatemala">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ณ Guinea">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ผ Guinea-Bissau">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡พ Guyana">
            </option><option value="๐Ÿ‡ญ๐Ÿ‡น Haiti">
            </option><option value="๐Ÿ‡ญ๐Ÿ‡ณ Honduras">
            </option><option value="๐Ÿ‡ญ๐Ÿ‡ฐ Hong Kong">
            </option><option value="๐Ÿ‡ญ๐Ÿ‡บ Hungary">
            </option><option value="๐Ÿ‡ฎ๐Ÿ‡ธ Iceland">
            </option><option value="๐Ÿ‡ฎ๐Ÿ‡ณ India">
            </option><option value="๐Ÿ‡ฎ๐Ÿ‡ฉ Indonesia">
            </option><option value="๐Ÿ‡ฎ๐Ÿ‡ท Iran">
            </option><option value="๐Ÿ‡ฎ๐Ÿ‡ถ Iraq">
            </option><option value="๐Ÿ‡ฎ๐Ÿ‡ช Ireland">
            </option><option value="๐Ÿ‡ฎ๐Ÿ‡ฒ Isle of Man">
            </option><option value="๐Ÿ‡ฎ๐Ÿ‡ฑ Israel">
            </option><option value="๐Ÿ‡ฎ๐Ÿ‡น Italy">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ฎ Ivory Coast">
            </option><option value="๐Ÿ‡ฏ๐Ÿ‡ฒ Jamaica">
            </option><option value="๐Ÿ‡ฏ๐Ÿ‡ต Japan">
            </option><option value="๐Ÿ‡ฏ๐Ÿ‡ด Jordan">
            </option><option value="๐Ÿ‡ฐ๐Ÿ‡ฟ Kazakhstan">
            </option><option value="๐Ÿ‡ฐ๐Ÿ‡ช Kenya">
            </option><option value="๐Ÿ‡ฐ๐Ÿ‡ผ Kuwait">
            </option><option value="๐Ÿ‡ฐ๐Ÿ‡ฌ Kyrgyzstan">
            </option><option value="๐Ÿ‡ฑ๐Ÿ‡ฆ Laos">
            </option><option value="๐Ÿ‡ฑ๐Ÿ‡ป Latvia">
            </option><option value="๐Ÿ‡ฑ๐Ÿ‡ง Lebanon">
            </option><option value="๐Ÿ‡ฑ๐Ÿ‡ท Liberia">
            </option><option value="๐Ÿ‡ฑ๐Ÿ‡พ Libya">
            </option><option value="๐Ÿ‡ฑ๐Ÿ‡ฎ Liechtenstein">
            </option><option value="๐Ÿ‡ฑ๐Ÿ‡น Lithuania">
            </option><option value="๐Ÿ‡ฑ๐Ÿ‡บ Luxembourg">
            </option><option value="๐Ÿšข MS Zaandam">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ด Macao">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ฌ Madagascar">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡พ Malaysia">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ป Maldives">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ฑ Mali">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡น Malta">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ถ Martinique">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ท Mauritania">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡บ Mauritius">
            </option><option value="๐Ÿ‡พ๐Ÿ‡น Mayotte">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ฝ Mexico">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ฉ Moldova">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡จ Monaco">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ณ Mongolia">

            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ช Montenegro">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ธ Montserrat">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ฆ Morocco">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ฟ Mozambique">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ฒ Myanmar">
            </option><option value="๐Ÿ‡ณ๐Ÿ‡ฆ Namibia">
            </option><option value="๐Ÿ‡ณ๐Ÿ‡ต Nepal">
            </option><option value="๐Ÿ‡ณ๐Ÿ‡ฑ Netherlands">
            </option><option value="๐Ÿ‡ณ๐Ÿ‡จ New Caledonia">
            </option><option value="๐Ÿ‡ณ๐Ÿ‡ฟ New Zealand">
            </option><option value="๐Ÿ‡ณ๐Ÿ‡ฎ Nicaragua">
            </option><option value="๐Ÿ‡ณ๐Ÿ‡ช Niger">
            </option><option value="๐Ÿ‡ณ๐Ÿ‡ฌ Nigeria">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ฐ North Macedonia">
            </option><option value="๐Ÿ‡ณ๐Ÿ‡ด Norway">
            </option><option value="๐Ÿ‡ด๐Ÿ‡ฒ Oman">
            </option><option value="๐Ÿ‡ต๐Ÿ‡ฐ Pakistan">
            </option><option value="๐Ÿ‡ต๐Ÿ‡ธ Palestine">
            </option><option value="๐Ÿ‡ต๐Ÿ‡ฆ Panama">
            </option><option value="๐Ÿ‡ต๐Ÿ‡ฌ Papua New Guinea">
            </option><option value="๐Ÿ‡ต๐Ÿ‡พ Paraguay">
            </option><option value="๐Ÿ‡ต๐Ÿ‡ช Peru">
            </option><option value="๐Ÿ‡ต๐Ÿ‡ญ Philippines">
            </option><option value="๐Ÿ‡ต๐Ÿ‡ฑ Poland">
            </option><option value="๐Ÿ‡ต๐Ÿ‡น Portugal">
            </option><option value="๐Ÿ‡ถ๐Ÿ‡ฆ Qatar">
            </option><option value="๐Ÿ‡ท๐Ÿ‡ด Romania">
            </option><option value="๐Ÿ‡ท๐Ÿ‡บ Russia">
            </option><option value="๐Ÿ‡ท๐Ÿ‡ผ Rwanda">
            </option><option value="๐Ÿ‡ฐ๐Ÿ‡ท S. Korea">
            </option><option value="๐Ÿ‡ฐ๐Ÿ‡ณ Saint Kitts and Nevis">
            </option><option value="๐Ÿ‡ฑ๐Ÿ‡จ Saint Lucia">
            </option><option value="๐Ÿ‡ฒ๐Ÿ‡ซ Saint Martin">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ฒ San Marino">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ฆ Saudi Arabia">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ณ Senegal">
            </option><option value="๐Ÿ‡ท๐Ÿ‡ธ Serbia">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡จ Seychelles">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ฌ Singapore">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ฝ Sint Maarten">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ฐ Slovakia">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ฎ Slovenia">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ด Somalia">
            </option><option value="๐Ÿ‡ฟ๐Ÿ‡ฆ South Africa">
            </option><option value="๐Ÿ‡ช๐Ÿ‡ธ Spain">
            </option><option value="๐Ÿ‡ฑ๐Ÿ‡ฐ Sri Lanka">
            </option><option value="๐Ÿ‡ง๐Ÿ‡ฑ St. Barth">
            </option><option value="๐Ÿ‡ป๐Ÿ‡จ St. Vincent Grenadines">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ฉ Sudan">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ท Suriname">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡ช Sweden">
            </option><option value="๐Ÿ‡จ๐Ÿ‡ญ Switzerland">
            </option><option value="๐Ÿ‡ธ๐Ÿ‡พ Syria">
            </option><option value="๐Ÿ‡น๐Ÿ‡ผ Taiwan">
            </option><option value="๐Ÿ‡น๐Ÿ‡ฟ Tanzania">
            </option><option value="๐Ÿ‡น๐Ÿ‡ญ Thailand">
            </option><option value="๐Ÿ‡น๐Ÿ‡ฑ Timor-Leste">
            </option><option value="๐Ÿ‡น๐Ÿ‡ฌ Togo">
            </option><option value="๐Ÿ‡น๐Ÿ‡น Trinidad and Tobago">
            </option><option value="๐Ÿ‡น๐Ÿ‡ณ Tunisia">
            </option><option value="๐Ÿ‡น๐Ÿ‡ท Turkey">
            </option><option value="๐Ÿ‡น๐Ÿ‡จ Turks and Caicos">
            </option><option value="๐Ÿ‡ฆ๐Ÿ‡ช UAE">
            </option><option value="๐Ÿ‡ฌ๐Ÿ‡ง UK">
            </option><option value="๐Ÿ‡บ๐Ÿ‡ธ USA">
            </option><option value="๐Ÿ‡บ๐Ÿ‡ฌ Uganda">
            </option><option value="๐Ÿ‡บ๐Ÿ‡ฆ Ukraine">
            </option><option value="๐Ÿ‡บ๐Ÿ‡พ Uruguay">
            </option><option value="๐Ÿ‡บ๐Ÿ‡ฟ Uzbekistan">
            </option><option value="๐Ÿ‡ป๐Ÿ‡ฆ Vatican City">
            </option><option value="๐Ÿ‡ป๐Ÿ‡ช Venezuela">
            </option><option value="๐Ÿ‡ป๐Ÿ‡ณ Vietnam">
            </option><option value="๐Ÿ‡ฟ๐Ÿ‡ฒ Zambia">
            </option><option value="๐Ÿ‡ฟ๐Ÿ‡ผ Zimbabwe">
            </option>
            <!-- <option value="๐Ÿ‡ท๐Ÿ‡ช Rรฉunion"> -->
            <!-- <option value="๐Ÿ‡จ๐Ÿ‡ผ Curaรงao"> -->
          </datalist><!-- #country-list -->
        </span>
        <button 
          data-tooltip="Takes 5-10 sec."
          class="button has-tooltip-bottom" style="margin-bottom:1em;" onclick="add_all_countries()">
          Add all
        </button>
      </div><!-- .chart-options -->
    </section>
    
    
    <section class="section" style="padding-top:0">
      
      <section class="section" style="padding-top:0">
        <h4>info & privacy</h4>
        <p class="small" style="margin-top:.5em">
          You can add or remove countries above
          and the chart will be saved locally.
          Any changes you make will be stored
          in your web browser,
          and  on your device <i>only</i>,
          and should persist if you close and
          reopen the chart later
          (assuming you're using the same device
          and haven't cleared your browser's local data).
          <br>
          <span style="margin-top:.5em; display:block;">Removing all items in the chart and refreshing the page
            will reset it to a default list.</span>
        </p>
      </section>
    
      
      <section class="section">
        <h4>sources</h4>
        <ul class="small">
        <li>
          Local government websites and health departments
        </li>
        <li>Data via worldometers.info and
          <a href="https://coronavirus-19-api.herokuapp.com/">coronavirus-19-api.herokuapp.com</a>
        </li>
      </ul>
      </section>
      
      <hr>
      
      <section class="section">
        <h4>
          other links
        </h4>
        <ul class="small">
          <li>
            <a href="https://youtu.be/Z9O5BiS79DU">
              <b>Will Coronavirus Destroy US Economy?</b> 
              Lessons From Spanish Flu Pandemic
            </a>
            [6&nbsp;min.&nbsp;Youtube&nbsp;Video]
          </li>
          <li>
            <a href="https://youtu.be/wJtaOzW-Fqo">
              <b>How Long Will Social Distancing Last?</b>
              It's Complicated
            </a>
            [7&nbsp;min.&nbsp;Youtube&nbsp;video]

          </li>
          <li>
            <a href="https://aatishb.com/covidtrends/">
              <b>Covid Trends:</b> 
              Trajectory of COVID-19 Confirmed Cases
            </a>
            [timelapse&nbsp;charts]
            (or&nbsp;<a href="https://youtu.be/54XLXg4fYsc">watch&nbsp;the&nbsp;7&nbsp;min.&nbsp;video</a>&nbsp;first)
          </li>
          <li style="margin-top:.25em;">
            <a href="https://youtu.be/gxAaO2rsdIs">
              <b>Simulating an Epidemic:</b>
              Experiments with toy SRI models
            </a>
            [23&nbsp;min.&nbsp;Youtube&nbsp;video]
          </li>
        </ul>
      </section>
    </section>

  </div>
  <!-- /.container -->
              
            
!

CSS

              
                /* codepen.io/nonsalant/pen/jOPQRrE.css */

:root {
  --grain-pattern: url("data:image/png;base64,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");
  --ui-font : system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

body {
  font-family: Helvetica, sans-serif;
  background: var(--grain-pattern) repeat scroll center center #b3b3b3;
  background-color: rgba(255, 255, 0, 0.03);
  background-blend-mode: soft-light;
  font-family: "Open Sans", sans-serif;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  font-size:19px;
  padding:0;
  
}


.contain {
  max-width: 35em;
  max-width: 42rem;
  max-width:unset;
  margin: auto;
  color: #111;
  /* margin-bottom: 2em; */
}

.container {
    max-width: 38em;
  flex-grow: 1;
  margin: 0 auto;
  position: relative;
  width: auto;
}

.section {
    padding: 3rem 1.5rem;
    padding: 1.5rem 1rem;
}
.section .section {
  padding: 1.5rem 0;
}

a {
  color: #000066;
  color: hsla(41, 88%, 35%, 1);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  font-family: "Open Sans Condensed", sans-serif;
}

h2 {
  font-size: 1.35em;
}

h4 {
    text-transform: uppercase;
    color: #222;
    font-size: 1.15em;
}

hr {
  opacity: 0.5;
  background-color: hsla(0, 0%, 85%, 1);
}

.small {
  font-size:.75em;
  line-height:1.75em;
}

li {
  list-style: disc;
  list-style-position: inside;
}

@media (min-width: 1000px) {
  .block,
  .legend {
    font-size:1.15em;
  }
}

@media (max-width: 600px) {
  body { font-size:16px; }
  .block,
  .legend {
    font-size:.9em;
    font-size:1em;
  }
}
@media (max-width: 500px) {
  .block,
  .legend {
    font-size: .75em;
    font-size:.9em;
  }
}
@media (max-width: 400px) {
  .block,
  .legend {
    font-size: .65em;
    font-size:.75em;
  }
}
@media (max-width: 350px) {
  .block,
  .legend {
    font-size: .65em;
    font-size:.65em;
  }
}

/* 
SVG underline
https://codepen.io/nonsalant/pen/MxoQgR
*/
u {
  position: relative;
  text-decoration: none;
  color: inherit;
}
u::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 0.75rem;
  z-index: -1;
  background-image: url("https://2020pandemic.netlify.com/underline.svg");
  background-repeat: no-repeat;
  background-size: cover;
  /*   opacity:.3; */
  filter: sepia(.75);
}
p > u {
  font-weight: 400;
}
p > u::after {
  bottom: -0.2rem;
  height: 0.5rem;
  left: -0.25rem;
  right: -0.25rem;
}
/* /SVG underline */


/* Box/card shadows */

.box-shadow,
.percentage {
  box-shadow: 0.2em 0.2em 0.5em #eeeec9, 
            -0.2em -0.2em 0.5em #ffffff;
}

.country-stats,
.virus::before,
.legend,
.tooltip-info {
  box-shadow: 0 1px 3px #44444411, 
            0 -1px 3px #ffffff;
}

.legend {
  border-radius:.3em !important;
}


.logo {
  color: #333;
  color: #111;
  /* text-transform: uppercase; */
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.025em;
  font-weight: normal;
  margin-top: 1em;
  font-size: 1.55em;
  line-height: 1.15em;
  display: flex;
  align-items: center;
  padding-top: 0;
}

.virus {
    background: #fff6f6;
    background: #ffff00;
    background: none;
    /* border: dashed 1px #ddd; */
    border-radius: 100%;
    width: 1.75em;
    height: 1.475em;
  display: block;
  float: left;
  font-size:    1.5em;
  margin-left: -.25em;
  margin-right: .25em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.logo-text {
  font-size: 1.15em;
}


.percentage {
  color: #ffcccc;
  width: 100%;
  display: block;
  overflow: visible;
  color: #222;
  border-radius: 0.25em;
  font-weight: normal;
  border: solid 2px #cccccc88;
  padding: 0 0.2em 0 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 2em;
  
  background: var(--grain-pattern) repeat scroll center center #ffff1155;
  background: var(--grain-pattern) repeat scroll center center hsla(41, 100%, 90%, 1);
}

/* #hero-local-label:before, */
#hero-local-label:after {
  content: "โ€ฆ";
}

#hero-global-label:before {
  content: "๐ŸŒŽ ";
}

.percentage-bar {
  transition: all 0.5s ease-in-out;
  min-width: 1.5em;
  min-width:3em;
  float: left;
  text-align: center;
  background-color: #ddd;
  color: #222;
  border-radius: .25rem .25em .25em .25rem;
  font-weight: normal;
  padding: 0 0.2em;
  margin: 0;
  margin-right: 0.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: flex-start;
  padding-left: 1.25em;
  flex-direction: column;
  line-height: 0.75em;
  height: 2.1em;

  background: linear-gradient(145deg, #c3bbaa, #e8dfca);
  box-shadow: 1px 0 0px 1px rgba(187, 187, 187, 0.87);
}

.percentage-empty {
  font-size: 0.75em;
  line-height: 1em;
  float: left;
  display: block;
  margin: 0.3em 0 0.3em 0.3em;
  opacity: 0.75;
}


/* .cr-section */
.cr-section { padding-top:0; }

@media (max-width:500px) {
  .cr-section { margin-top:-.5em; }
}

.cr-section h2 {
  padding-top:0;
  text-transform:uppercase;
  display: flex;
  align-items: center; 
  flex-wrap:wrap;
}
.cr-section .after-equals {
  display: inline-flex;
  flex-direction: column;
  margin-right: .5em;
  font-weight: normal;
  font-family: 'Open Sans Condensed', sans-serif;
}

/* Autorefresh */

.autorefresh-container {
  margin-top: -0em;
  margin-bottom: 1em;
  margin-bottom: .25em;
  display: flex;
  align-items: center;
}

.autorefresh-container input[type="checkbox"] { margin-left:0; }

/* @media (min-width:1000px) {
  .autorefresh-container {
      margin-bottom: -2em;
      margin-top: 0;
  }
  .autorefresh-container input[type="checkbox"] { margin-left:.5em; }
}
 */

/**/

.country-stats .block button {
  color: hsla(200, 26%, 15%, 1);
}


.country-stats .block:not(#Global) button,
.country-stats .block#Global button.c-ratio-wrapper {
  text-decoration:underline;
  text-decoration-color:#eee;
  text-decoration-color:#f0f0f0;
  text-decoration-thickness:1px;
}

.country-stats .block:not(#Global):hover button:focus,
.country-stats .block:not(#Global) button:focus,
.country-stats .block#Global:hover button.c-ratio-wrapper:focus,
.country-stats .block#Global button.c-ratio-wrapper:focus {
  text-decoration: underline;
  text-decoration-color: hsla(200, 26%, 15%, .25);
}


.country-stats .block:not(#Global) button.deaths {
  text-decoration-color:rgba(238, 238, 238, 0.2);
}
.country-stats .block:not(#Global) button.deaths:focus {
  text-decoration-color:rgba(238, 238, 238, 0.4);
}


.block[id]:empty:after {
  content: "๐Ÿฆ  โ€ฆ " attr(id);
  margin-left: .75em;
  display: block;
}

.block:first-child:empty {
  display: none;
}


.block-data,
.legend {
  text-align: right;
  display: block;
  
  /*   margin-bottom: 0.5em; */

  min-height: 2em;
}
    .block-data > *,
    .legend > * {
      margin-left: 0.5em;
      margin-right: 0.5em;
      text-align: left;
    }

.block::before {
    color: #999;
    font-weight: normal; font-size:.75em;
    font-family: "Open Sans", sans-serif;
    content: counter(list_counter) ".";
    margin: 0;
    display: inline-block;
    text-align: right;
    width: 1.65em;
}

/**
* {
 outline: solid 4px rgba(0,0,100,.25);
}
/**/

.block {
  counter-increment: list_counter;
  transition:all .3s ease-out;
  
  border-radius:.3em;
  
  border-bottom: solid 1px #ccc;
  padding: 0.25em;
  background: #ffffff;
  
  min-height:3em;
  
  margin:0 !important;
  
  /*display: list-item;
  list-style: decimal;
  margin-left: 1.5em;
  padding-left:0; */  
  
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  
}

.block-data {
  width:calc(100% - 1.65em);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}



.legend {
  min-height: 3.5em;
  border-radius: .1em .1em 0 0;
  font-family: "Open Sans Condensed", sans-serif;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;

  border: solid 1px #888;
  border-width: 0px 0;
  padding: 0.25em;
  background: none;
  color: #333;
  padding: 0.5em 0.8em 0.5em 0.2em;
  
  
  /*background: var(--grain-pattern) repeat scroll center center #cccccc44; */
  background-color: #cccccc44;
  border-bottom: solid 1px #aaa;
  /**/
  position: sticky;
  top: 0px;
  z-index:5;
  background-color: rgba(204, 204, 204, 1);
  background: var(--grain-pattern) repeat scroll center center rgba(245, 245, 245, 1);
  /**/
}

.legend button,
.block button {
  background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  text-transform: inherit;
}
/* .legend button:hover,
.block button:hover {
  filter: sepia(1);
  z-index:5;
} */
.legend button:hover {
  filter: sepia(1);
}

.legend button:focus {
  filter: none;
  outline: solid #22222255;
}
.legend .c-ratio {
  margin-right: -2.35em;
  margin-right: .275em;
}


.country-name {
    margin-right: auto;
    text-align: left;
}
@media (max-width:500px) {
  .country-name { max-width: 7em; }
}

.country-stats {
    font-family: "Open Sans Condensed", sans-serif;
    display: flex;
    flex-direction: column;
}

.country-stats button {
  cursor: default !important;
}

#Global {
  order: 999;
  background:#ccc;
  background: hsla(60, 0%, 95%, 0.53);
  list-style:none;
}
#Global:before {
  /*display: none;*/
  opacity: 0;
}
#Global button:not(.c-ratio) {
  cursor:default;
}
#Global button:not(.c-ratio-wrapper):before,
#Global button:not(.c-ratio-wrapper):after {
  display:none;
}


.gray,
.red,
.green {
  background-color: #ddd;
  background-color: #ddddddee;
  color: #222;
  border-radius: 0.1em;
  font-weight: normal;
  padding: 0 0.2em;
}
.red {
  color: red;
  border: solid 0px red;
  background: #ffcccc88;
}
.green {
  color: green;
  border: solid 0px green;
  background: #ccffccff;
}

body .block .deaths,
body .legend .deaths,
.deaths {
  background-color: #111;
  color: #eee;
  border-radius: 0.1em;
  padding: 0 0.2em;
  font-weight: normal;
}

input, button {
  font-size: 16px;
  font-family: var(--ui-font);
  border-radius: .25rem;
  
/*   padding-top: .25rem;
  padding-bottom: .4rem; */
  line-height:2rem;
}

input[type="checkbox"],
input[list],
input[type="text"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  padding-left:.25em;
  border:solid 1px #ddd;
  box-shadow: 0 1px 2px 1px #dddddddd;
}

.close {
  padding-bottom: .2em;
  background: none;
  border: none;
  opacity: .75;
  transition: all .2s ease-out;
  font-size: .8em !important;
  text-decoration:none !important;
}
.close:hover {
  opacity: 1;
  transform:scale(1.15);
}
.close:focus {
  opacity: 1;
  outline: solid #22222255;
}

.add-country {
  /*white-space:nowrap; */
  margin-left:.3em;
}
/* @media (max-width:500px) {
  .add-country,
  #toggle_close_buttons {
    float:none;
    margin-left:auto; margin-right:auto;
    
  }
} */
@media (min-width:500px) {
  .add-country {
    float:right;
  }
}

.numeral {
    display: inline-flex; display:none;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    margin-bottom: .5em;
    border: solid 2px #ffffffdd;
    border-radius: 50%;
    font-size: .5em;
    line-height: 1em;
    font-family: "Open Sans", sans-serif;
    font-weight: normal;
    vertical-align: middle;
    margin-right: .3em;
    background: #FBEBCA;
    transform: scale(1.2);
/*     z-index: -1; */
}
/* #hero-global-label:before,
#hero-local-label:before {
  font-size: .6em;
} */

input::-webkit-calendar-picker-indicator {
  opacity: 100;
}


.button {
  padding-left: 1rem;
  padding-right: 1rem;
  /**
  padding-top: .25rem;
  padding-bottom: .4rem; 
  /**/
  font-weight: 700; 
  border-radius: .25rem;
  font-weight: 600;
  border: solid 1px #4299e1;
  background: rgba(255,255,255,.75);
  cursor: pointer;
  transition:all .175s ease-out;
  font-family: var(--ui-font);
  
  color: #2b6cb0;
  color: hsla(41, 88%, 25%, 1);
  border: solid 1px #ccaba8;
}
.button:hover {
  background-color: hsla(41, 55%, 30%, 1);
  color: #fff;
}

.button.danger {
  color: #f44336;
  border: solid 1px #ccaba8;
}
.button.danger:hover{
  background-color:#f44336;
  color: #fff;
}
.button.danger:focus {
  color: #f44336;
  background:rgba(255,255,255,.75);
  border: solid 1px #ccaba8;
}

[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="checkbox"] {
  -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex-shrink: 0;
    height: 1em;
    width: 1em;
    color: #4299e1; color:hsla(60, 34%, 24%, 1);
    background-color: #fff;
    border-color: #e2e8f0; border-color: #F8D68F;
    border-width: 1px;
    border-radius: 0.25rem;
}

input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media not print {
  input[type="checkbox"]::-ms-check {
    border-width: 1px;
    color: transparent;
    background: inherit;
    border-color: inherit;
    border-radius: inherit;
  }
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  border-color: #63b3ed;
}


/**
https://codepen.io/nonsalant/pen/95690772b88a45da7b85eef8b5998157
https://github.com/Wikiki/bulma-tooltip/blob/master/dist/css/bulma-tooltip.min.css
**/
@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}[data-tooltip]:not(.is-disabled),[data-tooltip]:not(.is-loading),[data-tooltip]:not([disabled]){cursor:pointer;overflow:visible;position:relative}[data-tooltip]:not(.is-disabled)::after,[data-tooltip]:not(.is-disabled)::before,[data-tooltip]:not(.is-loading)::after,[data-tooltip]:not(.is-loading)::before,[data-tooltip]:not([disabled])::after,[data-tooltip]:not([disabled])::before{box-sizing:border-box;color:#fff;display:inline-block;font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:.75rem;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;opacity:0;overflow:hidden;pointer-events:none;position:absolute;visibility:hidden;z-index:1020}[data-tooltip]:not(.is-disabled)::after,[data-tooltip]:not(.is-loading)::after,[data-tooltip]:not([disabled])::after{content:'';border-style:solid;border-width:6px;border-color:rgba(74,74,74,.9) transparent transparent transparent;margin-bottom:-5px}[data-tooltip]:not(.is-disabled)::after,[data-tooltip]:not(.is-loading)::after,[data-tooltip]:not([disabled])::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled)::before,[data-tooltip]:not(.is-loading)::before,[data-tooltip]:not([disabled])::before{background:rgba(74,74,74,.9);border-radius:2px;content:attr(data-tooltip);padding:.5rem 1rem;text-overflow:ellipsis;white-space:pre}[data-tooltip]:not(.is-disabled)::before,[data-tooltip]:not(.is-loading)::before,[data-tooltip]:not([disabled])::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}[data-tooltip]:not(.is-disabled).has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-bottom::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-bottom::before,[data-tooltip]:not(.is-loading).has-tooltip-bottom::before,[data-tooltip]:not([disabled]).has-tooltip-bottom::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}[data-tooltip]:not(.is-disabled).has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-left::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-left::before,[data-tooltip]:not(.is-loading).has-tooltip-left::before,[data-tooltip]:not([disabled]).has-tooltip-left::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}[data-tooltip]:not(.is-disabled).has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-right::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-right::before,[data-tooltip]:not(.is-loading).has-tooltip-right::before,[data-tooltip]:not([disabled]).has-tooltip-right::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}[data-tooltip]:not(.is-disabled).has-tooltip-multiline::before,[data-tooltip]:not(.is-loading).has-tooltip-multiline::before,[data-tooltip]:not([disabled]).has-tooltip-multiline::before{height:auto;width:15rem;max-width:15rem;text-overflow:clip;white-space:normal;word-break:keep-all}[data-tooltip]:not(.is-disabled).has-tooltip-white.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-white.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-white.has-tooltip-bottom::after{border-color:transparent transparent rgba(255,255,255,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-white.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-white.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-white.has-tooltip-left::after{border-color:transparent transparent transparent rgba(255,255,255,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-white.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-white.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-white.has-tooltip-right::after{border-color:transparent rgba(255,255,255,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-white:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-white:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-white:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-white:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-white:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-white:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-white:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-white:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-white:not(.has-tooltip-right)::after{border-color:rgba(255,255,255,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-white:before,[data-tooltip]:not(.is-loading).has-tooltip-white:before,[data-tooltip]:not([disabled]).has-tooltip-white:before{background-color:rgba(255,255,255,.9);color:#0a0a0a}[data-tooltip]:not(.is-disabled).has-tooltip-black.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-black.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-black.has-tooltip-bottom::after{border-color:transparent transparent rgba(10,10,10,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-black.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-black.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-black.has-tooltip-left::after{border-color:transparent transparent transparent rgba(10,10,10,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-black.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-black.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-black.has-tooltip-right::after{border-color:transparent rgba(10,10,10,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-black:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-black:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-black:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-black:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-black:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-black:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-black:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-black:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-black:not(.has-tooltip-right)::after{border-color:rgba(10,10,10,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-black:before,[data-tooltip]:not(.is-loading).has-tooltip-black:before,[data-tooltip]:not([disabled]).has-tooltip-black:before{background-color:rgba(10,10,10,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-light.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-light.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-light.has-tooltip-bottom::after{border-color:transparent transparent rgba(245,245,245,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-light.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-light.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-light.has-tooltip-left::after{border-color:transparent transparent transparent rgba(245,245,245,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-light.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-light.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-light.has-tooltip-right::after{border-color:transparent rgba(245,245,245,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-light:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-light:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-light:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-light:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-light:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-light:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-light:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-light:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-light:not(.has-tooltip-right)::after{border-color:rgba(245,245,245,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-light:before,[data-tooltip]:not(.is-loading).has-tooltip-light:before,[data-tooltip]:not([disabled]).has-tooltip-light:before{background-color:rgba(245,245,245,.9);color:#363636}[data-tooltip]:not(.is-disabled).has-tooltip-dark.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-dark.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-dark.has-tooltip-bottom::after{border-color:transparent transparent rgba(54,54,54,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-dark.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-dark.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-dark.has-tooltip-left::after{border-color:transparent transparent transparent rgba(54,54,54,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-dark.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-dark.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-dark.has-tooltip-right::after{border-color:transparent rgba(54,54,54,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-dark:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-dark:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-dark:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-dark:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-dark:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-dark:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-dark:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-dark:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-dark:not(.has-tooltip-right)::after{border-color:rgba(54,54,54,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-dark:before,[data-tooltip]:not(.is-loading).has-tooltip-dark:before,[data-tooltip]:not([disabled]).has-tooltip-dark:before{background-color:rgba(54,54,54,.9);color:#f5f5f5}[data-tooltip]:not(.is-disabled).has-tooltip-primary.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-primary.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-primary.has-tooltip-bottom::after{border-color:transparent transparent rgba(0,209,178,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-primary.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-primary.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-primary.has-tooltip-left::after{border-color:transparent transparent transparent rgba(0,209,178,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-primary.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-primary.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-primary.has-tooltip-right::after{border-color:transparent rgba(0,209,178,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-primary:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-primary:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-primary:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-primary:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-primary:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-primary:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-primary:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-primary:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-primary:not(.has-tooltip-right)::after{border-color:rgba(0,209,178,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-primary:before,[data-tooltip]:not(.is-loading).has-tooltip-primary:before,[data-tooltip]:not([disabled]).has-tooltip-primary:before{background-color:rgba(0,209,178,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-link.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-link.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-link.has-tooltip-bottom::after{border-color:transparent transparent rgba(50,115,220,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-link.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-link.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-link.has-tooltip-left::after{border-color:transparent transparent transparent rgba(50,115,220,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-link.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-link.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-link.has-tooltip-right::after{border-color:transparent rgba(50,115,220,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-link:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-link:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-link:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-link:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-link:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-link:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-link:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-link:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-link:not(.has-tooltip-right)::after{border-color:rgba(50,115,220,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-link:before,[data-tooltip]:not(.is-loading).has-tooltip-link:before,[data-tooltip]:not([disabled]).has-tooltip-link:before{background-color:rgba(50,115,220,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-info.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-info.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-info.has-tooltip-bottom::after{border-color:transparent transparent rgba(32,156,238,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-info.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-info.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-info.has-tooltip-left::after{border-color:transparent transparent transparent rgba(32,156,238,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-info.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-info.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-info.has-tooltip-right::after{border-color:transparent rgba(32,156,238,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-info:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-info:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-info:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-info:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-info:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-info:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-info:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-info:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-info:not(.has-tooltip-right)::after{border-color:rgba(32,156,238,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-info:before,[data-tooltip]:not(.is-loading).has-tooltip-info:before,[data-tooltip]:not([disabled]).has-tooltip-info:before{background-color:rgba(32,156,238,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-success.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-success.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-success.has-tooltip-bottom::after{border-color:transparent transparent rgba(35,209,96,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-success.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-success.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-success.has-tooltip-left::after{border-color:transparent transparent transparent rgba(35,209,96,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-success.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-success.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-success.has-tooltip-right::after{border-color:transparent rgba(35,209,96,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-success:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-success:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-success:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-success:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-success:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-success:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-success:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-success:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-success:not(.has-tooltip-right)::after{border-color:rgba(35,209,96,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-success:before,[data-tooltip]:not(.is-loading).has-tooltip-success:before,[data-tooltip]:not([disabled]).has-tooltip-success:before{background-color:rgba(35,209,96,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-warning.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-warning.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-warning.has-tooltip-bottom::after{border-color:transparent transparent rgba(255,221,87,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-warning.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-warning.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-warning.has-tooltip-left::after{border-color:transparent transparent transparent rgba(255,221,87,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-warning.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-warning.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-warning.has-tooltip-right::after{border-color:transparent rgba(255,221,87,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-warning:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-warning:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-warning:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-warning:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-warning:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-warning:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-warning:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-warning:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-warning:not(.has-tooltip-right)::after{border-color:rgba(255,221,87,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-warning:before,[data-tooltip]:not(.is-loading).has-tooltip-warning:before,[data-tooltip]:not([disabled]).has-tooltip-warning:before{background-color:rgba(255,221,87,.9);color:rgba(0,0,0,.7)}[data-tooltip]:not(.is-disabled).has-tooltip-danger.has-tooltip-bottom::after,[data-tooltip]:not(.is-loading).has-tooltip-danger.has-tooltip-bottom::after,[data-tooltip]:not([disabled]).has-tooltip-danger.has-tooltip-bottom::after{border-color:transparent transparent rgba(255,56,96,.9) transparent}[data-tooltip]:not(.is-disabled).has-tooltip-danger.has-tooltip-left::after,[data-tooltip]:not(.is-loading).has-tooltip-danger.has-tooltip-left::after,[data-tooltip]:not([disabled]).has-tooltip-danger.has-tooltip-left::after{border-color:transparent transparent transparent rgba(255,56,96,.9)}[data-tooltip]:not(.is-disabled).has-tooltip-danger.has-tooltip-right::after,[data-tooltip]:not(.is-loading).has-tooltip-danger.has-tooltip-right::after,[data-tooltip]:not([disabled]).has-tooltip-danger.has-tooltip-right::after{border-color:transparent rgba(255,56,96,.9) transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-danger:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-disabled).has-tooltip-danger:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-disabled).has-tooltip-danger:not(.has-tooltip-right)::after,[data-tooltip]:not(.is-loading).has-tooltip-danger:not(.has-tooltip-bottom)::after,[data-tooltip]:not(.is-loading).has-tooltip-danger:not(.has-tooltip-left)::after,[data-tooltip]:not(.is-loading).has-tooltip-danger:not(.has-tooltip-right)::after,[data-tooltip]:not([disabled]).has-tooltip-danger:not(.has-tooltip-bottom)::after,[data-tooltip]:not([disabled]).has-tooltip-danger:not(.has-tooltip-left)::after,[data-tooltip]:not([disabled]).has-tooltip-danger:not(.has-tooltip-right)::after{border-color:rgba(255,56,96,.9) transparent transparent transparent}[data-tooltip]:not(.is-disabled).has-tooltip-danger:before,[data-tooltip]:not(.is-loading).has-tooltip-danger:before,[data-tooltip]:not([disabled]).has-tooltip-danger:before{background-color:rgba(255,56,96,.9);color:#fff}[data-tooltip]:not(.is-disabled).has-tooltip-active::after,[data-tooltip]:not(.is-disabled).has-tooltip-active::before,[data-tooltip]:not(.is-disabled):focus::after,[data-tooltip]:not(.is-disabled):focus::before,[data-tooltip]:not(.is-disabled):hover::after,[data-tooltip]:not(.is-disabled):hover::before,[data-tooltip]:not(.is-loading).has-tooltip-active::after,[data-tooltip]:not(.is-loading).has-tooltip-active::before,[data-tooltip]:not(.is-loading):focus::after,[data-tooltip]:not(.is-loading):focus::before,[data-tooltip]:not(.is-loading):hover::after,[data-tooltip]:not(.is-loading):hover::before,[data-tooltip]:not([disabled]).has-tooltip-active::after,[data-tooltip]:not([disabled]).has-tooltip-active::before,[data-tooltip]:not([disabled]):focus::after,[data-tooltip]:not([disabled]):focus::before,[data-tooltip]:not([disabled]):hover::after,[data-tooltip]:not([disabled]):hover::before{opacity:1;visibility:visible}[data-tooltip]:not(.is-disabled).has-tooltip-fade::after,[data-tooltip]:not(.is-disabled).has-tooltip-fade::before,[data-tooltip]:not(.is-loading).has-tooltip-fade::after,[data-tooltip]:not(.is-loading).has-tooltip-fade::before,[data-tooltip]:not([disabled]).has-tooltip-fade::after,[data-tooltip]:not([disabled]).has-tooltip-fade::before{transition:opacity .3s linear,visibility .3s linear}@media screen and (max-width:768px){.has-tooltip-top-mobile::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-mobile::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:769px),print{.has-tooltip-top-tablet::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-tablet::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:769px) and (max-width:1087px){.has-tooltip-top-tablet-only::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-tablet-only::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (max-width:1087px){.has-tooltip-top-touch::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-touch::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:1088px){.has-tooltip-top-desktop::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-desktop::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:1088px) and (max-width:1279px){.has-tooltip-top-desktop-only::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-desktop-only::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (max-width:1279px){.has-tooltip-top-until-widescreen::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-until-widescreen::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:1280px){.has-tooltip-top-widescreen::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-widescreen::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:1280px) and (max-width:1471px){.has-tooltip-top-widescreen-only::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-widescreen-only::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (max-width:1471px){.has-tooltip-top-until-fullhd::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-until-fullhd::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (min-width:1472px){.has-tooltip-top-fullhd::after{top:0;right:auto;bottom:auto;left:50%;margin-top:-5px;margin-right:auto;margin-bottom:auto;margin-left:-5px;border-color:rgba(74,74,74,.9) transparent transparent transparent}.has-tooltip-top-fullhd::before{top:0;right:auto;bottom:auto;left:50%;top:0;margin-top:-5px;margin-bottom:auto;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}}@media screen and (max-width:768px){.has-tooltip-right-mobile::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-mobile::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:769px),print{.has-tooltip-right-tablet::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-tablet::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:769px) and (max-width:1087px){.has-tooltip-right-tablet-only::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-tablet-only::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (max-width:1087px){.has-tooltip-right-touch::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-touch::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:1088px){.has-tooltip-right-desktop::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-desktop::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:1088px) and (max-width:1279px){.has-tooltip-right-desktop-only::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-desktop-only::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (max-width:1279px){.has-tooltip-right-until-widescreen::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-until-widescreen::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:1280px){.has-tooltip-right-widescreen::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-widescreen::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:1280px) and (max-width:1471px){.has-tooltip-right-widescreen-only::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-widescreen-only::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (max-width:1471px){.has-tooltip-right-until-fullhd::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-until-fullhd::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (min-width:1472px){.has-tooltip-right-fullhd::after{top:auto;right:0;bottom:50%;left:auto;margin-top:auto;margin-right:-11px;margin-bottom:-6px;margin-left:auto;border-color:transparent rgba(74,74,74,.9) transparent transparent}.has-tooltip-right-fullhd::before{top:auto;right:-11px;bottom:50%;left:auto;margin-top:auto;-webkit-transform:translate(100%,50%);transform:translate(100%,50%)}}@media screen and (max-width:768px){.has-tooltip-bottom-mobile::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-mobile::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:769px),print{.has-tooltip-bottom-tablet::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-tablet::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:769px) and (max-width:1087px){.has-tooltip-bottom-tablet-only::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-tablet-only::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (max-width:1087px){.has-tooltip-bottom-touch::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-touch::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:1088px){.has-tooltip-bottom-desktop::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-desktop::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:1088px) and (max-width:1279px){.has-tooltip-bottom-desktop-only::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-desktop-only::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (max-width:1279px){.has-tooltip-bottom-until-widescreen::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-until-widescreen::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:1280px){.has-tooltip-bottom-widescreen::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-widescreen::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:1280px) and (max-width:1471px){.has-tooltip-bottom-widescreen-only::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-widescreen-only::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (max-width:1471px){.has-tooltip-bottom-until-fullhd::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-until-fullhd::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (min-width:1472px){.has-tooltip-bottom-fullhd::after{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-right:auto;margin-bottom:-5px;margin-left:-5px;border-color:transparent transparent rgba(74,74,74,.9) transparent}.has-tooltip-bottom-fullhd::before{top:auto;right:auto;bottom:0;left:50%;margin-top:auto;margin-bottom:-5px;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}}@media screen and (max-width:768px){.has-tooltip-left-mobile::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-mobile::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:769px),print{.has-tooltip-left-tablet::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-tablet::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:769px) and (max-width:1087px){.has-tooltip-left-tablet-only::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-tablet-only::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (max-width:1087px){.has-tooltip-left-touch::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-touch::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:1088px){.has-tooltip-left-desktop::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-desktop::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:1088px) and (max-width:1279px){.has-tooltip-left-desktop-only::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-desktop-only::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (max-width:1279px){.has-tooltip-left-until-widescreen::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-until-widescreen::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:1280px){.has-tooltip-left-widescreen::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-widescreen::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:1280px) and (max-width:1471px){.has-tooltip-left-widescreen-only::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-widescreen-only::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (max-width:1471px){.has-tooltip-left-until-fullhd::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-until-fullhd::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}@media screen and (min-width:1472px){.has-tooltip-left-fullhd::after{top:auto;right:auto;bottom:50%;left:0;margin-top:auto;margin-right:auto;margin-bottom:-6px;margin-left:-11px;border-color:transparent transparent transparent rgba(74,74,74,.9)}.has-tooltip-left-fullhd::before{top:auto;right:auto;bottom:50%;left:-11px;-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}}

[data-tooltip]:not(.is-disabled)::after,
[data-tooltip]:not(.is-disabled)::before,
[data-tooltip]:not(.is-loading)::after,
[data-tooltip]:not(.is-loading)::before,
[data-tooltip]:not([disabled])::after,
[data-tooltip]:not([disabled])::before {
  z-index: 4;
/*   text-align: right; */
}
[data-tooltip]:not(.is-disabled).has-tooltip-fade::after,
[data-tooltip]:not(.is-disabled).has-tooltip-fade::before,
[data-tooltip]:not(.is-loading).has-tooltip-fade::after,
[data-tooltip]:not(.is-loading).has-tooltip-fade::before,
[data-tooltip]:not([disabled]).has-tooltip-fade::after,
[data-tooltip]:not([disabled]).has-tooltip-fade::before {
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
[data-tooltip]:not([disabled])::before {
  background: rgba(74, 74, 74, 0.9);
  background: hsla(200, 26%, 15%, .97);
  background: hsl(40, 86%, 89%);
  border: solid 1px #222;
  color: #222;
  border-radius: 2px;
  box-sizing: border-box;
}


/* Tooltip arrows -- experimental (and using !important) */
/* [data-tooltip]:not([disabled]):not(.has-tooltip-bottom):not(.has-tooltip-top):not(.has-tooltip-left):not(.has-tooltip-right)::after {
  border-top-color: hsla(200, 26%, 15%, .97);
  border-bottom-color: hsl(40, 86%, 89%) !important;
}
[data-tooltip]:not([disabled]).has-tooltip-bottom::after {
  border-top-color: hsl(40, 86%, 89%) !important;
}
[data-tooltip]:not([disabled]).has-tooltip-top::after {
  border-bottom-color: hsl(40, 86%, 89%) !important;
}
[data-tooltip]:not([disabled]).has-tooltip-left::after {
  border-right-color: hsl(40, 86%, 89%) !important;
}
[data-tooltip]:not([disabled]).has-tooltip-right::after {
  border-left-color: hsl(40, 86%, 89%) !important;
} */
[data-tooltip]:not([disabled])::after,
[data-tooltip]:not(.is-disabled)::after {
    opacity: .75 !important;
}


button:focus[data-tooltip]:not([disabled])::before {
  font-weight: bold;
}


body .container .tooltip-info {
  cursor: default;
  margin-right:auto;text-transform:none;text-align:left;filter:none;
  background: #f3f3b6; 
  background: #FBEBCA;
  border: solid 2px #ffffffaa;
  display: inline-flex;
  font-size:80%;
  width: 1.5em;
  width: 1.75em;
  /* height: 1.5em; */
  border-radius: 50%;
  align-items: center; justify-content: center;
}
.tooltip-info span {
  font-style: italic; 
  font-family: serif; 
  font-weight: bold;
}
.tooltip-info::before {
  transform:none;
  z-index:5;
}

/**/

.chart-options {
  width:100%; 
  max-width: calc(100vw - 6em);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.no-button-styles {
  font:inherit; text-align:left; border:0;margin:0;padding:0; background:none;
  color: inherit;
  cursor: help !important;
  outline: none;
  -webkit-appearance: none;
  border-radius:0;
  -webkit-border-radius:0;
}

.no-button-styles em {
  text-decoration:underline; 
  text-decoration-style:dotted; 
  text-decoration-color:#bbb;
  font-style: normal;
}

.no-button-styles:focus em {
  /* outline: solid #22222255; */
  text-decoration-style:solid;
}

/* Special tooltips */

.tooltip-info {
  cursor: help !important;
}

.no-button-styles[data-tooltip]:not([disabled])::before,
.tooltip-info[data-tooltip]:not([disabled])::before,
.chart-options [data-tooltip]:not([disabled])::before {
  background: hsl(40, 86%, 89%);
  border: solid 2px #22222255;
  color: #222;
  border-radius: 5px;
  box-sizing: border-box;
  max-width: calc(100vw - 5em);
}

.no-button-styles[data-tooltip]:not([disabled])::after,
.tooltip-info[data-tooltip]:not([disabled])::after,
.chart-options [data-tooltip]:not([disabled])::after {
  opacity:.5 !important;
}

button.no-button-styles:focus[data-tooltip]:not([disabled])::before,
button.tooltip-info:focus[data-tooltip]:not([disabled])::before,
.chart-options button:focus[data-tooltip]:not([disabled])::before {
    font-weight: unset;
}
              
            
!

JS

              
                /* codepen.io/nonsalant/pen/jOPQRrE.js */

// Open external links in new tabs
let links = document.links;
for (let i = 0, linksLength = links.length; i < linksLength; i++) {
  if (links[i].hostname != window.location.hostname) {
    links[i].target = '_blank';
    links[i].rel = 'noopener';
  } 
}

localStorageInit();

render_stuff();
//let auto_refresh = setInterval(render_stuff, 3000);


function render_stuff() {  
  fetch('//www.cloudflare.com/cdn-cgi/trace')
    .then((response) => {
      return response.text();
    })
    .then((data) => { 
      let value = data.split('\n')[8].split('loc=')[1];
      if (value=="US")
        value = "USA";
      value = getCountryName(value);
      document.getElementById("hero-local").id= "hero-"+value;
      //console.log("hero-"+value);
      render_hero(("hero-"+value));
    
      render_hero();
      render_blocks();
    });
} 

function toggle_auto_refresh(checked) {
  if (checked) {
    auto_refresh = setInterval(render_stuff, 3000);
    document.querySelectorAll('.legend')[0].style.backgroundColor='#F3F3B6';
    if (document.querySelector('#Global')) document.querySelector('#Global').style.backgroundColor="hsla(60, 60%, 85%, 0.53)";
  } else {
    clearInterval(auto_refresh);
    document.querySelectorAll('.legend')[0].style.backgroundColor='rgba(245, 245, 245, 1)';
    if (document.querySelector('#Global')) document.querySelector('#Global').style.backgroundColor="hsla(60, 0%, 95%, 0.53)";
  }
}

function render_hero(id="hero-global") {
  let url, country;
  
  if (id == "hero-global") {
    country = "Global";
    url = "https://coronavirus-19-api.herokuapp.com/all/";
    
  } else {
    if (id.startsWith("hero-")) {
      country=id.split("hero-")[1].replace(/ /g, "%20");
      url = "https://coronavirus-19-api.herokuapp.com/countries/" + country;
      //console.log(url)
    }
  }
  
  fetch(url).then((response)=>{return response.json();})
    .then((data) => {
      let recovered = Number(data.recovered.toFixed(0));
      let deaths = Number(data.deaths.toFixed(0));
      let cases = Number(data.cases.toFixed(0));

      let percentage = (((recovered + deaths) / cases) * 100).toFixed(0);
      let percentageEmpty = 100 - percentage;
    
      let cr_precise = ((recovered + deaths) / cases);
      let cr = cr_precise.toFixed(2); 
    
      let extra_css;
    
      if (country == "Global") {
        extra_css = `
        <style>
        .virus::before {
          /* Grab Google image graph (pie chart) */
          background: url("https://chart.googleapis.com/chart?cht=p&chd=t:${percentage},${percentageEmpty}&chs=200x200&chco=DCD3C0,ffefcc") center center no-repeat;
          background-size: contain;
          opacity: .90;
          content: "";
          position: absolute;
          width: 1.5em;
          height: 1.5em;
          border-radius: 100%; border:0; padding:0;
          display: block;
        }

        #hero-global-label::before {
          content: "๐ŸŒŽ ";
        }
        </style>
        `;
      } else {
        extra_css = `
        <style>
        #hero-local-label::before {
          content: "${flag_emoji(country)} ";
        }
        #hero-local-label::after {
          content: " in ${country}:";
        }
        <style>
        `
      }

      document.getElementsByTagName('body')[0].innerHTML+=extra_css;

      document.getElementById(id).innerHTML = `
      <div class="percentage-bar" style="width:${percentage}%;
        background: var(--grain-pattern) repeat scroll center center rgba(187, 187, 187, 0.4);">
        <button class="no-button-styles has-tooltip-right"
        style="cursor: default !important;"
        data-tooltip="C. RATIO = ${cr_precise.toFixed(4)}"
        >
        ${percentage}%
        </button>
      </div>
      <small class="percentage-empty">
          ${percentageEmpty}% ๐Ÿฆ  ACTIVE CASES
      </small>
      `;
    });
  
}

function render_blocks() {
  let blocks = document.getElementsByClassName("block");
  for (let i = 0; i < blocks.length; i++) {
    render(blocks[i].id); 
    let blocks_array=[];
    blocks_array[i]=blocks[i].id;
    //console.log(blocks_array[i]);
  } 
  
}

function render(id) {
  
  if (!id) return;
  
  let url = ""; //let txt = '{"cases":422966,"deaths":18906,"recovered":109143}';
  if (id === "Global") {
    url = "https://coronavirus-19-api.herokuapp.com/all/";
  } else {
    url = "https://coronavirus-19-api.herokuapp.com/countries/" + id;
  }
  //console.log(url);
  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let recovered, deaths, cases, cr_precise, percentage;
      if(data.recovered) recovered = Number(data.recovered.toFixed(0));
      else recovered = 0;
      if (data.deaths) deaths = Number(data.deaths.toFixed(0));
      else deaths = 0;
      if (data.cases) {
        cases = Number(data.cases.toFixed(0));
        cr_precise = ((recovered + deaths) / cases);
        percentage = (((recovered + deaths) / cases) * 100).toFixed(0);
      } else {
        cases = 0;
        cr_precise = 0;
        percentage = 0;
      }
      
      let cr = cr_precise.toFixed(2);
      
      let percentageEmpty = 100 - percentage;
    
      function color_change(cr) {
        let colorClass = "gray";
        if (Number(cr) < 0.1) {
          colorClass = "red";
        }
        if (Number(cr) > 0.3) {
          colorClass = "green";
        }
        return colorClass;
      }

      document.getElementById(id).innerHTML = `
      <div class="block-data">
          <button class="close" onclick="remove_country(this)" style="display:none;">
            โŒ
          </button>
          <button class="country-name has-tooltip-right" 
          data-tooltip="Cases per 1 million: ${data.casesPerOneMillion} 
  Deaths per 1 million: ${data.deathsPerOneMillion}"
          >
            ${unescape(id)}:
          </button>&nbsp;
          ( 
          <button 
          data-tooltip="Tests per 1 million: ${data.testsPerOneMillion}"
         class="recovered has-tooltip-bottom" style="color:green">${recovered}</button>
          +
          <button 
          data-tooltip="Deaths today: ${data.todayDeaths}"
          class="deaths has-tooltip-bottom">${deaths}</button> ) 
          /
          <button 
          data-tooltip="Cases today: ${data.todayCases}"
          class="cases has-tooltip-bottom" style="color:red">${cases}</button> 
          = 
          <button 
          data-tooltip="${cr_precise.toFixed(3)} (${percentage}% )"
          class="c-ratio-wrapper has-tooltip-bottom">
            <b class="c-ratio ${color_change(cr)}">
              ${cr}
            </b>
          </button>
          <span class="flag" style="width:1em; text-align:center;">
            ${flag_emoji(id)}
          </span>
      </div> <!-- /.block-data -->
      `;
    })
    .then(() => {
      sortList();
    });
}

function sortList(sortBy=".cases", stopRefreshing = false) {
  let i, switching, b, shouldSwitch;
  switching = true;
  
  if(stopRefreshing) stop_auto_refresh();
  
  while (switching) {
    switching = false;
    b = document.querySelectorAll(".country-stats .block:not(#Global)");
    for (i = 0; i < (b.length - 1); i++) {
      shouldSwitch = false;
      if ( b[i].querySelector(sortBy) && b[i+1].querySelector(sortBy) ) {
        if ( Number(b[i].querySelector(sortBy).innerHTML) < Number(b[i + 1].querySelector(sortBy).innerHTML) ) {
          //console.log(b[i].querySelector(sortBy).innerHTML);
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}

function stop_auto_refresh() {
  if(document.getElementById('autorefresh').checked) {
    document.getElementById('autorefresh').checked=false;
    toggle_auto_refresh(false);
  }
}


function toggle_close_buttons(element) {
  let close_buttons = document.querySelectorAll('.close');
  
  if (!close_buttons) return;
  
  if (typeof(close_buttons[0]) != 'undefined' && close_buttons != null) {
    if (close_buttons[0].style.display == 'none') {
      
      stop_auto_refresh();

      element.innerHTML = '&nbsp;&nbsp;&nbsp;Done deleting.&nbsp;&nbsp;';
      for (let i=0; i<close_buttons.length; i++) {
        close_buttons[i].style.display = 'block';
      }
    } else if (close_buttons[0].style.display == 'block') {
      element.innerHTML = 'Delete countriesโ€ฆ';

      for (let i=0; i<close_buttons.length; i++) {
        close_buttons[i].style.display = 'none';
      } 
    }
  } else {
    element.innerHTML = 'Delete countriesโ€ฆ';
    
  } 
  
}



document.querySelector('#country-list-choice').addEventListener('change', (event) => {
  let new_country = document.getElementById('country-list-choice').value;
  new_country = new_country.split(' ');
  new_country.shift();
  new_country = new_country.join(' '); 
  if (new_country && !document.getElementById(escape(new_country)) ) {
    console.log(new_country +" added.");
    add_country(new_country);
  } else if ( document.getElementById(escape(new_country)) ) {
    alert(new_country+' is already shown.')
  }
  document.getElementById('country-list-choice').value = '';
});




// localStorage

function localStorageInit() {
  let pandemicSavedCountries = localStorage.getItem('pandemicSavedCountries');
  if (!pandemicSavedCountries || pandemicSavedCountries === '{}') {
    let aaa = document.querySelectorAll('.country-stats .block');
    // let bb = aaa.map(x => x.id); 
    let aa = '';
    for (let i=0; i<aaa.length; i++) {
      aa += aaa[i].id;
      if (i<(aaa.length-1) && aaa[i].id && aaa[i].id!=='') {
          aa+=',';
      }
    }
    localStorage.setItem('pandemicSavedCountries', aa);
  } else {
    let bbb = pandemicSavedCountries.split(',');
    let bb='';
    for (let i=0; i<bbb.length; i++) {
      bb+=`
      <div id="${bbb[i]}" class="block"></div>
      `;
    }
    document.querySelector('.country-stats').innerHTML = bb;
  }
}

function remove_all_countries() {
  document.querySelector('.country-stats').innerHTML = '';
  localStorage.setItem('pandemicSavedCountries','');
}

function add_all_countries() {
  let countryOptions = document.querySelectorAll('#country-list option');
  remove_all_countries();
  for(let i=0; i<countryOptions.length; i++) {
    let new_country = countryOptions[i].value;
    new_country = new_country.split(' ');
    new_country.shift();
    new_country = new_country.join(' '); 
    if (new_country && !document.getElementById(escape(new_country)) ) {
      console.log(new_country +" added.");
      add_country(new_country, false);
    } else if ( document.getElementById(escape(new_country)) ) {
      alert(new_country+' is already shown.')
    }
  }
}

/*
////sort_options();
// function sort_options() {
//   let i, switching, b, shouldSwitch;
//   switching = true;
//   while (switching) {
//     switching = false;
//     b = document.querySelectorAll("#country-list option");
//     for (i = 0; i < (b.length - 1); i++) {
//       shouldSwitch = false; 
//       if ( b[i].value && b[i+1].value ) {
//         let current = b[i].value.split(' ');
//         current.shift();
//         current = current.join(' ');
//         let next = b[i+1].value.split(' ');
//         next.shift();
//         next = next.join(' ');
//         if ( current > next ) {
//           shouldSwitch = true;
//           break;
//         }
//       }
//     }
//     if (shouldSwitch) {
//       b[i].parentNode.insertBefore(b[i + 1], b[i]);
//       switching = true;
//     }
//   }
// }
*/

function remove_country(el) {
  el.parentNode.parentNode.remove(); 
  console.log(unescape(el.parentNode.parentNode.id)+' removed.')
  
  let pandemicSavedCountries = localStorage.getItem('pandemicSavedCountries');
  let bbb = pandemicSavedCountries.split(',');
  let bb='';
  for (let i=0; i<bbb.length; i++) {
    if(bbb[i]==el.parentNode.parentNode.id) {
        bbb.splice(i, 1);
       }
  }
  localStorage.setItem( 'pandemicSavedCountries', bbb.join() );
}

// add_country('Diamond Princess');
function add_country(country) { 
  //console.log('test');
  document.querySelector('.country-stats').innerHTML += `
    <div id="${escape(country)}" class="block"></div>
  `;
  render(escape(country));
  //let pandemicSavedCountries = localStorage.getItem( 'pandemicSavedCountries');
  //if (pandemicSavedCountries && pandemicSavedCountries !== '{}') {
  let pandemicSavedCountries = localStorage.getItem('pandemicSavedCountries');
  let bbb=[];
  if (pandemicSavedCountries === null) {
    country=escape(country);
    bbb = [country];
  } else {
    let pandemicSavedCountries = localStorage.getItem('pandemicSavedCountries');
    bbb = pandemicSavedCountries.split(','); 
    bbb.push(escape(country));
  }
  localStorage.setItem( 'pandemicSavedCountries', bbb.join() );
}

// flag_emoji function by Stefan Matei
function flag_emoji(country) {
  switch (country) {
    case "Romania":
      return "๐Ÿ‡ท๐Ÿ‡ด";
    case "USA":
      return "๐Ÿ‡บ๐Ÿ‡ธ";
    case "Global":
      return "๐ŸŒŽ";
    case "China":
      return "๐Ÿ‡จ๐Ÿ‡ณ";
    case "Italy":
      return "๐Ÿ‡ฎ๐Ÿ‡น";
    case "Spain":
      return "๐Ÿ‡ช๐Ÿ‡ธ";
    case "S.%20Korea":
      return "๐Ÿ‡ฐ๐Ÿ‡ท";
    case "Moldova":
      return "๐Ÿ‡ฒ๐Ÿ‡ฉ";
    case "Bulgaria":
      return "๐Ÿ‡ง๐Ÿ‡ฌ";
    case "Switzerland":
      return "๐Ÿ‡จ๐Ÿ‡ญ";
    case "UK":
      return "๐Ÿ‡ฌ๐Ÿ‡ง";
    case "Iran":
      return "๐Ÿ‡ฎ๐Ÿ‡ท";
    case "France":
      return "๐Ÿ‡ซ๐Ÿ‡ท";
    case "Germany":
      return "๐Ÿ‡ฉ๐Ÿ‡ช";
    case "Japan":
      return "๐Ÿ‡ฏ๐Ÿ‡ต";
    case "Belgium":
      return "๐Ÿ‡ง๐Ÿ‡ช";
    case "Netherlands":
      return "๐Ÿ‡ณ๐Ÿ‡ฑ";
    case "Turkey":
      return "๐Ÿ‡น๐Ÿ‡ท";
    case "Austria":
      return "๐Ÿ‡ฆ๐Ÿ‡น";
    case "Canada":
      return "๐Ÿ‡จ๐Ÿ‡ฆ";
    case "Portugal":
      return "๐Ÿ‡ต๐Ÿ‡น";
    case "Norway":
      return "๐Ÿ‡ณ๐Ÿ‡ด";
    case "Brazil":
      return "๐Ÿ‡ง๐Ÿ‡ท";
    case "Israel":
      return "๐Ÿ‡ฎ๐Ÿ‡ฑ";
    case "Australia":
      return "๐Ÿ‡ฆ๐Ÿ‡บ";
    case "Sweden":
      return "๐Ÿ‡ธ๐Ÿ‡ช";
    case "Czechia":
      return "๐Ÿ‡จ๐Ÿ‡ฟ";
    case "Malaysia":
      return "๐Ÿ‡ฒ๐Ÿ‡พ";
    case "Ireland":
      return "๐Ÿ‡ฎ๐Ÿ‡ช";
    case "Denmark":
      return "๐Ÿ‡ฉ๐Ÿ‡ฐ";
    case "Chile":
      return "๐Ÿ‡จ๐Ÿ‡ฑ";
    case "Luxembourg":
      return "๐Ÿ‡ฑ๐Ÿ‡บ";
    case "Poland":
      return "๐Ÿ‡ต๐Ÿ‡ฑ";
    case "Ecuador":
      return "๐Ÿ‡ช๐Ÿ‡จ";
    case "Russia":
      return "๐Ÿ‡ท๐Ÿ‡บ";
    case "Pakistan":
      return "๐Ÿ‡ต๐Ÿ‡ฐ";
    case "Philippines":
      return "๐Ÿ‡ต๐Ÿ‡ญ";
    case "Thailand":
      return "๐Ÿ‡น๐Ÿ‡ญ";
    case "Saudi%20Arabia":
      return "๐Ÿ‡ธ๐Ÿ‡ฆ";
    case "Indonesia":
      return "๐Ÿ‡ฎ๐Ÿ‡ฉ";
    case "Finland":
      return "๐Ÿ‡ซ๐Ÿ‡ฎ";
    case "South%20Africa":
      return "๐Ÿ‡ฟ๐Ÿ‡ฆ";
    case "Greece":
      return "๐Ÿ‡ฌ๐Ÿ‡ท";
    case "Iceland":
      return "๐Ÿ‡ฎ๐Ÿ‡ธ";
    case "India":
      return "๐Ÿ‡ฎ๐Ÿ‡ณ";
    case "Mexico":
      return "๐Ÿ‡ฒ๐Ÿ‡ฝ";
    case "Panama":
      return "๐Ÿ‡ต๐Ÿ‡ฆ";
    case "Dominican%20Republic":
      return "๐Ÿ‡ฉ๐Ÿ‡ด";
    case "Singapore":
      return "๐Ÿ‡ธ๐Ÿ‡ฌ";
    case "Peru":
      return "๐Ÿ‡ต๐Ÿ‡ช";
    case "Argentina":
      return "๐Ÿ‡ฆ๐Ÿ‡ท";
    case "Croatia":
      return "๐Ÿ‡ญ๐Ÿ‡ท";
    case "Serbia":
      return "๐Ÿ‡ท๐Ÿ‡ธ";
    case "Slovenia":
      return "๐Ÿ‡ธ๐Ÿ‡ฎ";
    case "Estonia":
      return "๐Ÿ‡ช๐Ÿ‡ช";
    case "Diamond%20Princess":
      return "๐Ÿšข";
    case "Colombia":
      return "๐Ÿ‡จ๐Ÿ‡ด";
    case "Qatar":
      return "๐Ÿ‡ถ๐Ÿ‡ฆ";
    case "Hong%20Kong":
      return "๐Ÿ‡ญ๐Ÿ‡ฐ";
    case "UAE":
      return "๐Ÿ‡ฆ๐Ÿ‡ช";
    case "Egypt":
      return "๐Ÿ‡ช๐Ÿ‡ฌ";
    case "New%20Zealand":
      return "๐Ÿ‡ณ๐Ÿ‡ฟ";
    case "Algeria":
      return "๐Ÿ‡ฉ๐Ÿ‡ฟ";
    case "Iraq":
      return "๐Ÿ‡ฎ๐Ÿ‡ถ";
    case "Morocco":
      return "๐Ÿ‡ฒ๐Ÿ‡ฆ";
    case "Bahrain":
      return "๐Ÿ‡ง๐Ÿ‡ญ";
    case "Lithuania":
      return "๐Ÿ‡ฑ๐Ÿ‡น";
    case "Armenia":
      return "๐Ÿ‡ฆ๐Ÿ‡ฒ";
    case "Ukraine":
      return "๐Ÿ‡บ๐Ÿ‡ฆ";
    case "Hungary":
      return "๐Ÿ‡ญ๐Ÿ‡บ";
    case "Lebanon":
      return "๐Ÿ‡ฑ๐Ÿ‡ง";
    case "Latvia":
      return "๐Ÿ‡ฑ๐Ÿ‡ป";
    case "Bosnia%20and%20Herzegovina":
      return "๐Ÿ‡ง๐Ÿ‡ฆ";
    case "Slovakia":
      return "๐Ÿ‡ธ๐Ÿ‡ฐ";
    case "Andorra":
      return "๐Ÿ‡ฆ๐Ÿ‡ฉ";
    case "Costa%20Rica":
      return "๐Ÿ‡จ๐Ÿ‡ท";
    case "Tunisia":
      return "๐Ÿ‡น๐Ÿ‡ณ";
    case "Uruguay":
      return "๐Ÿ‡บ๐Ÿ‡พ";
    case "Taiwan":
      return "๐Ÿ‡น๐Ÿ‡ผ";
    case "Kazakhstan":
      return "๐Ÿ‡ฐ๐Ÿ‡ฟ";
    case "North%20Macedonia":
      return "๐Ÿ‡ฒ๐Ÿ‡ฐ";
    case "Azerbaijan":
      return "๐Ÿ‡ฆ๐Ÿ‡ฟ";
    case "Kuwait":
      return "๐Ÿ‡ฐ๐Ÿ‡ผ";
    case "Jordan":
      return "๐Ÿ‡ฏ๐Ÿ‡ด";
    case "San%20Marino":
      return "๐Ÿ‡ธ๐Ÿ‡ฒ";
    case "Cyprus":
      return "๐Ÿ‡จ๐Ÿ‡พ";
    case "Rรฉunion":
      return "๐Ÿ‡ท๐Ÿ‡ช";
    case "Albania":
      return "๐Ÿ‡ฆ๐Ÿ‡ฑ";
    case "Burkina%20Faso":
      return "๐Ÿ‡ง๐Ÿ‡ซ";
    case "Vietnam":
      return "๐Ÿ‡ป๐Ÿ‡ณ";
    case "Oman":
      return "๐Ÿ‡ด๐Ÿ‡ฒ";
    case "Afghanistan":
      return "๐Ÿ‡ฆ๐Ÿ‡ซ";
    case "Cuba":
      return "๐Ÿ‡จ๐Ÿ‡บ";
    case "Faeroe%20Islands":
      return "๐Ÿ‡ซ๐Ÿ‡ด";
    case "Faroe%20Islands":
      return "๐Ÿ‡ซ๐Ÿ‡ด";
    case "Ivory%20Coast":
      return "๐Ÿ‡จ๐Ÿ‡ฎ";
    case "Senegal":
      return "๐Ÿ‡ธ๐Ÿ‡ณ";
    case "Malta":
      return "๐Ÿ‡ฒ๐Ÿ‡น";
    case "Ghana":
      return "๐Ÿ‡ฌ๐Ÿ‡ญ";
    case "Belarus":
      return "๐Ÿ‡ง๐Ÿ‡พ";
    case "Uzbekistan":
      return "๐Ÿ‡บ๐Ÿ‡ฟ";
    case "Channel%20Islands":
      return "&nbsp;&nbsp;&nbsp;&thinsp;";
    case "Cameroon":
      return "๐Ÿ‡จ๐Ÿ‡ฒ";
    case "Honduras":
      return "๐Ÿ‡ญ๐Ÿ‡ณ";
    case "Venezuela":
      return "๐Ÿ‡ป๐Ÿ‡ช";
    case "Mauritius":
      return "๐Ÿ‡ฒ๐Ÿ‡บ";
    case "Brunei":
      return "๐Ÿ‡ง๐Ÿ‡ณ";
    case "Sri%20Lanka":
      return "๐Ÿ‡ฑ๐Ÿ‡ฐ";
    case "Palestine":
      return "๐Ÿ‡ต๐Ÿ‡ธ";
    case "Nigeria":
      return "๐Ÿ‡ณ๐Ÿ‡ฌ";
    case "Cambodia":
      return "๐Ÿ‡ฐ๐Ÿ‡ญ";
    case "Guadeloupe":
      return "๐Ÿ‡ฌ๐Ÿ‡ต";
    case "Georgia":
      return "๐Ÿ‡ฌ๐Ÿ‡ช";
    case "Bolivia":
      return "๐Ÿ‡ง๐Ÿ‡ด";
    case "Kyrgyzstan":
      return "๐Ÿ‡ฐ๐Ÿ‡ฌ";
    case "Martinique":
      return "๐Ÿ‡ฒ๐Ÿ‡ถ";
    case "Montenegro":
      return "๐Ÿ‡ฒ๐Ÿ‡ช";
    case "Trinidad%and%Tobago":
      return "๐Ÿ‡น๐Ÿ‡น";
    case "Mayotte":
      return "๐Ÿ‡พ๐Ÿ‡น";
    case "DRC":
      return "๐Ÿ‡จ๐Ÿ‡ฉ";
    case "Rwanda":
      return "๐Ÿ‡ท๐Ÿ‡ผ";
    case "Gibraltar":
      return "๐Ÿ‡ฌ๐Ÿ‡ฎ";
    case "Paraguay":
      return "๐Ÿ‡ต๐Ÿ‡พ";
    case "Liechtenstein":
      return "๐Ÿ‡ฑ๐Ÿ‡ฎ";
    case "Kenya":
      return "๐Ÿ‡ฐ๐Ÿ‡ช";
    case "Aruba":
      return "๐Ÿ‡ฆ๐Ÿ‡ผ";
    case "Bangladesh":
      return "๐Ÿ‡ง๐Ÿ‡ฉ";
    case "Isle%20of%20Man":
      return "๐Ÿ‡ฎ๐Ÿ‡ฒ";
    case "Monaco":
      return "๐Ÿ‡ฒ๐Ÿ‡จ";
    case "French%20Guiana":
      return "๐Ÿ‡ฌ๐Ÿ‡ซ";
    case "Madagascar":
      return "๐Ÿ‡ฒ๐Ÿ‡ฌ";
    case "Macao":
      return "๐Ÿ‡ฒ๐Ÿ‡ด";
    case "Guatemala":
      return "๐Ÿ‡ฌ๐Ÿ‡น";
    case "Jamaica":
      return "๐Ÿ‡ฏ๐Ÿ‡ฒ";
    case "French%20Polynesia":
      return "๐Ÿ‡ต๐Ÿ‡ซ";
    case "Zambia":
      return "๐Ÿ‡ฟ๐Ÿ‡ฒ";
    case "Barbados":
      return "๐Ÿ‡ง๐Ÿ‡ง";
    case "Uganda":
      return "๐Ÿ‡บ๐Ÿ‡ฌ";
    case "Togo":
      return "๐Ÿ‡น๐Ÿ‡ฌ";
    case "El%20Salvador":
      return "๐Ÿ‡ธ๐Ÿ‡ป";
    case "Mali":
      return "๐Ÿ‡ฒ๐Ÿ‡ฑ";
    case "Ethiopia":
      return "๐Ÿ‡ช๐Ÿ‡น";
    case "Niger":
      return "๐Ÿ‡ณ๐Ÿ‡ช";
    case "Bermuda":
      return "๐Ÿ‡ง๐Ÿ‡ฒ";
    case "Guinea":
      return "๐Ÿ‡ฌ๐Ÿ‡ณ";
    case "Congo":
      return "๐Ÿ‡จ๐Ÿ‡ฌ";
    case "Tanzania":
      return "๐Ÿ‡น๐Ÿ‡ฟ";
    case "Djibouti":
      return "๐Ÿ‡ฉ๐Ÿ‡ฏ";
    case "Maldives":
      return "๐Ÿ‡ฒ๐Ÿ‡ป";
    case "Saint%20Martin":
      return "๐Ÿ‡ฒ๐Ÿ‡ซ";
    case "Haiti":
      return "๐Ÿ‡ญ๐Ÿ‡น";
    case "New%20Caledonia":
      return "๐Ÿ‡ณ๐Ÿ‡จ";
    case "Bahamas":
      return "๐Ÿ‡ง๐Ÿ‡ธ";
    case "Myanmar":
      return "๐Ÿ‡ฒ๐Ÿ‡ฒ";
    case "Cayman%20Islands":
      return "๐Ÿ‡ฐ๐Ÿ‡พ";
    case "Equatorial%20Guinea":
      return "๐Ÿ‡ฌ๐Ÿ‡ถ";
    case "Eritrea":
      return "๐Ÿ‡ช๐Ÿ‡ท";
    case "Mongolia":
      return "๐Ÿ‡ฒ๐Ÿ‡ณ";
    case "Curaรงao":
      return "๐Ÿ‡จ๐Ÿ‡ผ";
    case "Dominica":
      return "๐Ÿ‡ฉ๐Ÿ‡ฒ";
    case "Namibia":
      return "๐Ÿ‡ณ๐Ÿ‡ฆ";
    case "Greenland":
      return "๐Ÿ‡ฌ๐Ÿ‡ฑ";
    case "Syria":
      return "๐Ÿ‡ธ๐Ÿ‡พ";
    case "Grenada":
      return "๐Ÿ‡ฌ๐Ÿ‡ฉ";
    case "Saint%20Lucia":
      return "๐Ÿ‡ฑ๐Ÿ‡จ";
    case "Eswatini":
      return "๐Ÿ‡ธ๐Ÿ‡ฟ";
    case "Guyana":
      return "๐Ÿ‡ฌ๐Ÿ‡พ";
    case "Guinea-Bissau":
      return "๐Ÿ‡ฌ๐Ÿ‡ผ";
    case "Laos":
      return "๐Ÿ‡ฑ๐Ÿ‡ฆ";
    case "Libya":
      return "๐Ÿ‡ฑ๐Ÿ‡พ";
    case "Mozambique":
      return "๐Ÿ‡ฒ๐Ÿ‡ฟ";
    case "Seychelles":
      return "๐Ÿ‡ธ๐Ÿ‡จ";
    case "Suriname":
      return "๐Ÿ‡ธ๐Ÿ‡ท";
    case "Angola":
      return "๐Ÿ‡ฆ๐Ÿ‡ด";
    case "Gabon":
      return "๐Ÿ‡ฌ๐Ÿ‡ฆ";
    case "Zimbabwe":
      return "๐Ÿ‡ฟ๐Ÿ‡ผ";
    case "Antigua%20and%20Barbuda":
      return "๐Ÿ‡ฆ๐Ÿ‡ฌ";
    case "Saint%20Kitts%20and%20Nevis":
      return "๐Ÿ‡ฐ๐Ÿ‡ณ";
    case "Sudan":
      return "๐Ÿ‡ธ๐Ÿ‡ฉ";
    case "Cabo%20Verde":
      return "๐Ÿ‡จ๐Ÿ‡ป";
    case "Cape%20Verde":
      return "๐Ÿ‡จ๐Ÿ‡ป";
    case "Benin":
      return "๐Ÿ‡ง๐Ÿ‡ฏ";
    case "Vatican%20City":
      return "๐Ÿ‡ป๐Ÿ‡ฆ";
    case "St.%20Barth":
      return "๐Ÿ‡ง๐Ÿ‡ฑ";
    case "Sint%20Maarten":
      return "๐Ÿ‡ธ๐Ÿ‡ฝ";
    case "Nepal":
      return "๐Ÿ‡ณ๐Ÿ‡ต";
    case "Chad":
      return "๐Ÿ‡น๐Ÿ‡ฉ";
    case "Fiji":
      return "๐Ÿ‡ซ๐Ÿ‡ฏ";
    case "Mauritania":
      return "๐Ÿ‡ฒ๐Ÿ‡ท";
    case "Montserrat":
      return "๐Ÿ‡ฒ๐Ÿ‡ธ";
    case "Turks%20and%20Caicos":
      return "๐Ÿ‡น๐Ÿ‡จ";
    case "Gambia":
      return "๐Ÿ‡ฌ๐Ÿ‡ฒ";
    case "Nicaragua":
      return "๐Ÿ‡ณ๐Ÿ‡ฎ";
    case "Bhutan":
      return "๐Ÿ‡ง๐Ÿ‡น";
    case "Belize":
      return "๐Ÿ‡ง๐Ÿ‡ฟ";
    case "CAR":
      return "๐Ÿ‡จ๐Ÿ‡ซ";
    case "Liberia":
      return "๐Ÿ‡ฑ๐Ÿ‡ท";
    case "Somalia":
      return "๐Ÿ‡ธ๐Ÿ‡ด";
    case "MS%20Zaandam":
      return "๐Ÿšข";
    case "Anguilla":
      return "๐Ÿ‡ฆ๐Ÿ‡ฎ";
    case "British%20Virgin%20Islands":
      return "๐Ÿ‡ป๐Ÿ‡ฌ";
    case "Papua%20New%20Guinea":
      return "๐Ÿ‡ต๐Ÿ‡ฌ";
    case "St.%20Vincent%20Grenadines":
      return "๐Ÿ‡ป๐Ÿ‡จ";
    case "Timor-Leste":
      return "๐Ÿ‡น๐Ÿ‡ฑ";
    case "Botswana":
      return "๐Ÿ‡ง๐Ÿ‡ผ";
  }
  return "&nbsp;&nbsp;&nbsp;&thinsp;";
}


var isoCountries = {
    'AF' : 'Afghanistan',
    'AX' : 'Aland Islands',
    'AL' : 'Albania',
    'DZ' : 'Algeria',
    'AS' : 'American Samoa',
    'AD' : 'Andorra',
    'AO' : 'Angola',
    'AI' : 'Anguilla',
    'AQ' : 'Antarctica',
    'AG' : 'Antigua And Barbuda',
    'AR' : 'Argentina',
    'AM' : 'Armenia',
    'AW' : 'Aruba',
    'AU' : 'Australia',
    'AT' : 'Austria',
    'AZ' : 'Azerbaijan',
    'BS' : 'Bahamas',
    'BH' : 'Bahrain',
    'BD' : 'Bangladesh',
    'BB' : 'Barbados',
    'BY' : 'Belarus',
    'BE' : 'Belgium',
    'BZ' : 'Belize',
    'BJ' : 'Benin',
    'BM' : 'Bermuda',
    'BT' : 'Bhutan',
    'BO' : 'Bolivia',
    'BA' : 'Bosnia And Herzegovina',
    'BW' : 'Botswana',
    'BV' : 'Bouvet Island',
    'BR' : 'Brazil',
    'IO' : 'British Indian Ocean Territory',
    'BN' : 'Brunei Darussalam',
    'BG' : 'Bulgaria',
    'BF' : 'Burkina Faso',
    'BI' : 'Burundi',
    'KH' : 'Cambodia',
    'CM' : 'Cameroon',
    'CA' : 'Canada',
    'CV' : 'Cape Verde',
    'KY' : 'Cayman Islands',
    'CF' : 'Central African Republic',
    'TD' : 'Chad',
    'CL' : 'Chile',
    'CN' : 'China',
    'CX' : 'Christmas Island',
    'CC' : 'Cocos (Keeling) Islands',
    'CO' : 'Colombia',
    'KM' : 'Comoros',
    'CG' : 'Congo',
    'CD' : 'Congo, Democratic Republic',
    'CK' : 'Cook Islands',
    'CR' : 'Costa Rica',
    'CI' : 'Cote D\'Ivoire',
    'HR' : 'Croatia',
    'CU' : 'Cuba',
    'CY' : 'Cyprus',
    'CZ' : 'Czech Republic',
    'DK' : 'Denmark',
    'DJ' : 'Djibouti',
    'DM' : 'Dominica',
    'DO' : 'Dominican Republic',
    'EC' : 'Ecuador',
    'EG' : 'Egypt',
    'SV' : 'El Salvador',
    'GQ' : 'Equatorial Guinea',
    'ER' : 'Eritrea',
    'EE' : 'Estonia',
    'ET' : 'Ethiopia',
    'FK' : 'Falkland Islands (Malvinas)',
    'FO' : 'Faroe Islands',
    'FJ' : 'Fiji',
    'FI' : 'Finland',
    'FR' : 'France',
    'GF' : 'French Guiana',
    'PF' : 'French Polynesia',
    'TF' : 'French Southern Territories',
    'GA' : 'Gabon',
    'GM' : 'Gambia',
    'GE' : 'Georgia',
    'DE' : 'Germany',
    'GH' : 'Ghana',
    'GI' : 'Gibraltar',
    'GR' : 'Greece',
    'GL' : 'Greenland',
    'GD' : 'Grenada',
    'GP' : 'Guadeloupe',
    'GU' : 'Guam',
    'GT' : 'Guatemala',
    'GG' : 'Guernsey',
    'GN' : 'Guinea',
    'GW' : 'Guinea-Bissau',
    'GY' : 'Guyana',
    'HT' : 'Haiti',
    'HM' : 'Heard Island & Mcdonald Islands',
    'VA' : 'Holy See (Vatican City State)',
    'HN' : 'Honduras',
    'HK' : 'Hong Kong',
    'HU' : 'Hungary',
    'IS' : 'Iceland',
    'IN' : 'India',
    'ID' : 'Indonesia',
    'IR' : 'Iran, Islamic Republic Of',
    'IQ' : 'Iraq',
    'IE' : 'Ireland',
    'IM' : 'Isle Of Man',
    'IL' : 'Israel',
    'IT' : 'Italy',
    'JM' : 'Jamaica',
    'JP' : 'Japan',
    'JE' : 'Jersey',
    'JO' : 'Jordan',
    'KZ' : 'Kazakhstan',
    'KE' : 'Kenya',
    'KI' : 'Kiribati',
    'KR' : 'Korea',
    'KW' : 'Kuwait',
    'KG' : 'Kyrgyzstan',
    'LA' : 'Lao People\'s Democratic Republic',
    'LV' : 'Latvia',
    'LB' : 'Lebanon',
    'LS' : 'Lesotho',
    'LR' : 'Liberia',
    'LY' : 'Libyan Arab Jamahiriya',
    'LI' : 'Liechtenstein',
    'LT' : 'Lithuania',
    'LU' : 'Luxembourg',
    'MO' : 'Macao',
    'MK' : 'Macedonia',
    'MG' : 'Madagascar',
    'MW' : 'Malawi',
    'MY' : 'Malaysia',
    'MV' : 'Maldives',
    'ML' : 'Mali',
    'MT' : 'Malta',
    'MH' : 'Marshall Islands',
    'MQ' : 'Martinique',
    'MR' : 'Mauritania',
    'MU' : 'Mauritius',
    'YT' : 'Mayotte',
    'MX' : 'Mexico',
    'FM' : 'Micronesia, Federated States Of',
    'MD' : 'Moldova',
    'MC' : 'Monaco',
    'MN' : 'Mongolia',
    'ME' : 'Montenegro',
    'MS' : 'Montserrat',
    'MA' : 'Morocco',
    'MZ' : 'Mozambique',
    'MM' : 'Myanmar',
    'NA' : 'Namibia',
    'NR' : 'Nauru',
    'NP' : 'Nepal',
    'NL' : 'Netherlands',
    'AN' : 'Netherlands Antilles',
    'NC' : 'New Caledonia',
    'NZ' : 'New Zealand',
    'NI' : 'Nicaragua',
    'NE' : 'Niger',
    'NG' : 'Nigeria',
    'NU' : 'Niue',
    'NF' : 'Norfolk Island',
    'MP' : 'Northern Mariana Islands',
    'NO' : 'Norway',
    'OM' : 'Oman',
    'PK' : 'Pakistan',
    'PW' : 'Palau',
    'PS' : 'Palestinian Territory, Occupied',
    'PA' : 'Panama',
    'PG' : 'Papua New Guinea',
    'PY' : 'Paraguay',
    'PE' : 'Peru',
    'PH' : 'Philippines',
    'PN' : 'Pitcairn',
    'PL' : 'Poland',
    'PT' : 'Portugal',
    'PR' : 'Puerto Rico',
    'QA' : 'Qatar',
    'RE' : 'Rรฉunion',
    'RO' : 'Romania',
    'RU' : 'Russian Federation',
    'RW' : 'Rwanda',
    'BL' : 'Saint Barthelemy',
    'SH' : 'Saint Helena',
    'KN' : 'Saint Kitts And Nevis',
    'LC' : 'Saint Lucia',
    'MF' : 'Saint Martin',
    'PM' : 'Saint Pierre And Miquelon',
    'VC' : 'Saint Vincent And Grenadines',
    'WS' : 'Samoa',
    'SM' : 'San Marino',
    'ST' : 'Sao Tome And Principe',
    'SA' : 'Saudi Arabia',
    'SN' : 'Senegal',
    'RS' : 'Serbia',
    'SC' : 'Seychelles',
    'SL' : 'Sierra Leone',
    'SG' : 'Singapore',
    'SK' : 'Slovakia',
    'SI' : 'Slovenia',
    'SB' : 'Solomon Islands',
    'SO' : 'Somalia',
    'ZA' : 'South Africa',
    'GS' : 'South Georgia And Sandwich Isl.',
    'ES' : 'Spain',
    'LK' : 'Sri Lanka',
    'SD' : 'Sudan',
    'SR' : 'Suriname',
    'SJ' : 'Svalbard And Jan Mayen',
    'SZ' : 'Swaziland',
    'SE' : 'Sweden',
    'CH' : 'Switzerland',
    'SY' : 'Syrian Arab Republic',
    'TW' : 'Taiwan',
    'TJ' : 'Tajikistan',
    'TZ' : 'Tanzania',
    'TH' : 'Thailand',
    'TL' : 'Timor-Leste',
    'TG' : 'Togo',
    'TK' : 'Tokelau',
    'TO' : 'Tonga',
    'TT' : 'Trinidad And Tobago',
    'TN' : 'Tunisia',
    'TR' : 'Turkey',
    'TM' : 'Turkmenistan',
    'TC' : 'Turks And Caicos Islands',
    'TV' : 'Tuvalu',
    'UG' : 'Uganda',
    'UA' : 'Ukraine',
    'AE' : 'United Arab Emirates',
    'GB' : 'United Kingdom',
    'US' : 'United States',
    'UM' : 'United States Outlying Islands',
    'UY' : 'Uruguay',
    'UZ' : 'Uzbekistan',
    'VU' : 'Vanuatu',
    'VE' : 'Venezuela',
    'VN' : 'Viet Nam',
    'VG' : 'Virgin Islands, British',
    'VI' : 'Virgin Islands, U.S.',
    'WF' : 'Wallis And Futuna',
    'EH' : 'Western Sahara',
    'YE' : 'Yemen',
    'ZM' : 'Zambia',
    'ZW' : 'Zimbabwe'
};

document.querySelector('.add-country').style.display = 'none';
/*** 
.add-country hidden because
the following func breaks the "add_country" functionality 
without showing any error in the console: 
***/

function getCountryName(countryCode) {
    if (isoCountries.hasOwnProperty(countryCode)) {
        return isoCountries[countryCode];
    } else {
        return countryCode;
    }
}
              
            
!
999px

Console