3.0 Navigation Bar

3-0-navigation-bar.markdown

3.0 Navigation Bar

A Pen by Rafael Conde on CodePen.

License.

index.html

<div class="app-container">

  <!-- Navigation bar at the Root level -->
  <div class="navigation-wrapper hidden" id="nav1">
    <div class="navigation-bar level-root">
      <ol class="app-navigation-items">
        <li><a href="#" class="logo"></a></li>
        <li>
          <h5 class="active">Title of the page</h5>
        </li>
      </ol>
      <ol class="account-items">
        <li>
          <div class="dropdown notifications-dropdown">
            <button type="button" class="notifications-icon"></button>
             <ul class="notifications-dropdown"></ul>
          </div>
        </li>
        <li>
          <div class="dropdown account-dropdown">
             <button type="button" class="avatar"></button>
             <ul class="profile-dropdown"></ul>
          </div>
        </li>
      </ol>
    </div>
  </div>

  <!-- Navigation bar at the Team level -->
  <div class="navigation-wrapper hidden" id="nav2">
    <div class="navigation-bar level-team">
      <ol class="app-navigation-items">
        <li><a href="#" class="logo"></a></li>
        <li>
          <div class="dropdown team-swither-dropdown">
            <button type="button" class="button team-switcher">
              Team name
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
                <path fill="#FFF" d="M8.99991268,3.07028102 L6.41857138,5.57471215  C6.17648594,5.80958474 6.17648594,6.19041552 6.41857138,6.42520326 L9,8.92971911 L7.38140903,10.5 L3.18156408,6.42520313 C2.93947864,6.19041539 2.93947864,5.80958461 3.18156408,5.57471202 L7.38149648,1.5 L8.99991268,3.07028102 Z" transform="rotate(-90 4 5)"/>
  </svg>       
            </button>
             <ul class="team-dropdown"></ul>
          </div>
        </li>
      </ol>
      <ul class="navigation-links">
          <li><a href="#"><h5 class="active">Sites</h5></a></li>
          <li><a href="#"><h5>Domains</h5></a></li>
          <li><a href="#"><h5>Builds</h5></a></li>
          <li><a href="#"><h5>Activity</h5></a></li>
          <li><a href="#"><h5>Billing</h5></a></li>
          <li><a href="#"><h5>Settings</h5></a></li>
        </ul>
      <ol class="account-items">
        <li>
          <div class="dropdown notifications-dropdown">
            <button type="button" class="notifications-icon"></button>
             <ul class="notifications-dropdown"></ul>
          </div>
        </li>
        <li>
          <div class="dropdown account-dropdown">
             <button type="button" class="avatar"></button>
             <ul class="profile-dropdown"></ul>
          </div>
        </li>
      </ol>
    </div>
  </div>

  <!-- Navigation bar at Site level -->
  <div class="navigation-wrapper" id="nav3">
    <div class="navigation-bar level-site">
      <ol class="app-navigation-items">
        <li><a href="#" class="logo"></a></li>
        <li>
          <div class="dropdown team-swither-dropdown">
            <button type="button" class="button team-switcher">
              Team name
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
                <path fill="#FFF" d="M8.99991268,3.07028102 L6.41857138,5.57471215  C6.17648594,5.80958474 6.17648594,6.19041552 6.41857138,6.42520326 L9,8.92971911 L7.38140903,10.5 L3.18156408,6.42520313 C2.93947864,6.19041539 2.93947864,5.80958461 3.18156408,5.57471202 L7.38149648,1.5 L8.99991268,3.07028102 Z" transform="rotate(-90 4 5)"/>
  </svg>       
            </button>
             <ul class="team-dropdown"></ul>
          </div>
        </li>
      </ol>
      <ul class="navigation-links">
          <li class="back-link"><a href="#"><h5>Sites</h5></a></li>  
          <li><a href="#"><h5 class="active">site-name-generated-1234</h5></a></li>
        </ul>
      <ol class="account-items">
        <li>
          <div class="dropdown notifications-dropdown">
            <button type="button" class="notifications-icon"></button>
             <ul class="notifications-dropdown"></ul>
          </div>
        </li>
        <li>
          <div class="dropdown account-dropdown">
             <button type="button" class="avatar"></button>
             <ul class="profile-dropdown"></ul>
          </div>
        </li>
      </ol>
    </div>
  </div>
  
  <div class="mock-content">
    <div class="sitebar" id="sitebar"></div>
    <div class="list-of-cards">
      <h1 id="title">Page title</h1>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
  </div>
  
</div>

<!-- Little navigation bar switcher -->
<div class="wrapper">
  <div class="switcher" id="switcher">
      <div class="input-row">
      <input type="radio" name="mode" value="root" id="mode1" class="mode-switcher"/>
      <label for="mode1">
        Root level
        <p class="muted">High level pages, like "Create new team", "Create new site"….<p>
      </label>
    </div>
    <div class="input-row">
      <input type="radio" name="mode" value="team" id="mode2" class="mode-switcher"/>
      <label for="mode2">
        Team level
        <p class="muted">Top level for when a team is selected<p>
      </label>
    </div>
    <div class="input-row">
      <input type="radio" name="mode" value="site" id="mode3" class="mode-switcher" checked/>
      <label for="mode3">
        Site level
        <p class="muted">At a site level, with a SiteBar™ visible <p>
      </label>
    </div>
  </div>
</div>

script.js

var inputs = document.getElementsByClassName('mode-switcher');

for (var i = 0; i < inputs.length; i++) {
  var el = inputs[i];
  el.addEventListener('change', function() {
    defineSetting(this.value);
  })
}

function defineSetting(setting) {
  if (setting == 'root') {
    document.getElementById("nav1").classList.remove('hidden');
    document.getElementById("nav2").classList.add('hidden');
    document.getElementById("nav3").classList.add('hidden');
    document.getElementById("sitebar").classList.add('hidden');
    document.getElementById("title").classList.add('hidden');
  } else if (setting == 'team') {
    document.getElementById("nav1").classList.add('hidden');
    document.getElementById("nav2").classList.remove('hidden');
    document.getElementById("nav3").classList.add('hidden');
    document.getElementById("sitebar").classList.add('hidden');
    document.getElementById("title").classList.add('hidden');
  } else if (setting == 'site') {
    document.getElementById("nav1").classList.add('hidden');
    document.getElementById("nav2").classList.add('hidden');
    document.getElementById("nav3").classList.remove('hidden');
    document.getElementById("sitebar").classList.remove('hidden');
    document.getElementById("title").classList.remove('hidden');
  }
}

style.postcss

@use postcss-nested;
:root {
  --neutral000: #ffffff;
  --neutral100: #F7F8F8;
  --neutral200: #E9EBEB;
  --neutral400: #A3A9AC;
  --neutral500: #7D8589;
  --neutral800: #2D3B41;
  --neutral900: #0E1E25;
  --neutral999: #000000;
  --teal800: #007A70;
  --gold500: #F6BC00;
  --appBackground: #F6FAFB;
  --systemFont: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 14px;
}

body {
  background-color: var(--appBackground);
  width: 100vw;
  height: 100vh;
  font-family: var(--systemFont);
  margin: 0;
}

h1 {
  font-size: 2em;
  font-weight: 700;
  line-height: 40px;
  margin: 0;
  margin-bottom: 16px;
}

h5 {
  font-size: 1.14em;
  font-weight: 600;
  line-height: 24px;
  margin: 0;
}

.app-container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1230px;
  margin: auto;
  padding: 0 8px;
}

.navigation-wrapper {
  position: sticky;
  top: 0;
  display: block;
  padding-top: 8px;
  z-index: 1;
  
  &::before {
    content: "";
    width: 100%;
    height: 16px;
    top: 0;
    position: absolute;
    z-index: -1;
    background-color: var(--appBackground);
    filter: blur(10px);
  }
}

.navigation-bar {
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
  margin-bottom: 24px;
  background-color: var(--neutral900);
  border-radius: 8px;
  color: var(--neutral500);
  box-shadow: 0 2px 2px 0 rgba(14,30,37,0.16);
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 
    "teamArea linksArea profileArea"
    ". . .";
  
  & ul, & ol {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    & li {
      list-style: none;
    }
  }
  & .app-navigation-items > li {
    margin-right: 16px;
  }
  & .account-items > li {
    margin-left: 16px;
  }
}

.navigation-bar.level-site,
.navigation-bar.level-team {
  @media (max-width: 780px) {
    grid-row-gap: 16px;
    grid-template-areas: 
    "teamArea . profileArea"
    "linksArea linksArea linksArea";
  }
}

.app-navigation-items {
  grid-area: teamArea;
}

.account-items {
  grid-area: profileArea;
  justify-self: end;
}

ul.navigation-links {
  grid-area: linksArea;
  justify-self: start;
  
  & > li {
    margin-left: 0;
    margin-right: 8px;
  }
  
  & a {
    display: inline-block;
    background-color: transparent;
    padding: 6px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    
    &:hover,
    &:focus {
      background-color: var(--neutral999);
      cursor: pointer;
    }
  }
  
  @media (max-width: 780px) {
    width: 100%;
    overflow-x: scroll;
    /* Moving the scrollbar away from sight 😎 */
    padding-bottom: 24px;
    margin-bottom: -24px;
    
    & li:last-child {
      padding-right: 40px; /* To make sure you can scroll if enough to be visible (escape the top gradient) */
    }
    
    &::before, &::after {
      display: block;
      content: "";
      position: absolute;
      height: 36px;
    }
    
    &::after {
      width: 64px;
      right: 0;
      background-image: linear-gradient(to right, rgba(14, 30, 37, 0), var(--neutral900) 80%);
    }
    
    &::before {
      width: 24px;
      left: 0;
      background-image: linear-gradient(to left, rgba(14, 30, 37, 0), var(--neutral900) 40%);
    }
  }
}

.level-site .navigation-links {
  white-space: nowrap;
}

.active {
  color: var(--neutral000);
}

.logo {
  display: block;
  height: 36px;
  width: 36px;
  background-image: var(--logo);
  background-position: center 0;
  border-radius: 6px;
  
  &:hover,
  &:active {
    background-color: var(--neutral999);
  }
}

.avatar {
  display: block;
  width: 36px;
  height: 36px;
  padding: 0;
  background-image: var(--avatar); 
  background-size: cover;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--neutral800);
  
  &:hover,
  &:active {
    cursor: pointer;
  }
}

.notifications-icon {
  display: block;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  background-color: transparent;
  background-image: var(--notification-icon);
  background-repeat: no-repeat;
  background-position: center;
  
  &:hover,
  &:active {
    cursor: pointer;  
    background-color: var(--neutral999);
  }
}

.button {
  /* Should extend typographic style of h5.emphasis */
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  color: #0E1E25;
  align-self: center;
  border: none;
  border-radius: 6px;
  outline: 0;
  box-sizing: border-box;
  display: inline-block;
  font-family: inherit;
  padding: 8px;
  min-width: 36px;
  max-height: 36px;
  position: relative;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.team-switcher {
  background-color: var(--neutral800);
  color: var(--neutral000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  &:hover,
  &:active {
   background-color: var(--neutral999);
  }
}

.team-switcher svg {
  position: relative;
  top: -2px;
  margin-left: 4px;
}

.back-link + li::before {
  content: "";
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  right: 0;
  top: 4px;
  margin-right: 8px;
  background-image: var(--caret-right-icon);
  background-position: center;
}

.card {
  background: var(--neutral000);
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(14,30,37,0.12);
}

.mock-content .card {
  display: block;
  width: 100%;
  height: 424px;
  margin-bottom: 16px;
}

.mock-content {
  position: relative;
  display: flex;
  flex-direction: row;
  
  @media (max-width: 780px) {
    flex-direction: column;
  }
}

.sitebar {
  display: block;
  position: sticky;
  top: 104px;
  width: 164px;
  height: 404px;
  margin-right: 40px;
  background: var(--neutral200);
  border-radius: 8px;
  
  @media (max-width: 780px) {
    width: 100%;
    height: 36px;
    margin-bottom: 8px;
  }
}

.list-of-cards {
  display: block;
  width: 100%;
}


/* Unreadable mess */

:root {
  --avatar: url(https://images-na.ssl-images-amazon.com/images/M/MV5BNDgyMDc2NDgtN2JkMy00NjM0LWIzMjQtZGFiZjc1ZDU4ZWU4XkEyXkFqcGdeQXVyMjg5MDk0NTA@._V1_UY256_CR16,0,172,256_AL_.jpg);
  --logo: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOSIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDM5IDQwIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9ImRlZmF1bHQtYiIgd2lkdGg9IjEwMS4zJSIgaGVpZ2h0PSIxMjMuNSUiIHg9Ii0uNyUiIHk9Ii0xMS44JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij4KICAgICAgPGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiIHN0ZERldmlhdGlvbj0iMSIvPgogICAgICA8ZmVDb2xvck1hdHJpeCBpbj0ic2hhZG93Qmx1ck91dGVyMSIgcmVzdWx0PSJzaGFkb3dNYXRyaXhPdXRlcjEiIHZhbHVlcz0iMCAwIDAgMCAwLjA1NDkwMTk2MDggICAwIDAgMCAwIDAuMTE3NjQ3MDU5ICAgMCAwIDAgMCAwLjE0NTA5ODAzOSAgMCAwIDAgMC4xNiAwIi8+CiAgICAgIDxmZU1lcmdlPgogICAgICAgIDxmZU1lcmdlTm9kZSBpbj0ic2hhZG93TWF0cml4T3V0ZXIxIi8+CiAgICAgICAgPGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+CiAgICAgIDwvZmVNZXJnZT4KICAgIDwvZmlsdGVyPgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJkZWZhdWx0LWEiIGN4PSI1MCUiIGN5PSIwJSIgcj0iMTAwLjExJSIgZng9IjUwJSIgZnk9IjAlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAgLjk5ODkgLTEuMTUyIDAgLjUgLS41KSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyMEM2QjciLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNEQ5QUJGIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8ZyBmaWxsPSJ1cmwoI2RlZmF1bHQtYSkiIGZpbHRlcj0idXJsKCNkZWZhdWx0LWIpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQgLTE2KSI+CiAgICA8cGF0aCBkPSJNMTEuNjEwMzE1LDIyLjQ1Mjg2MTkgTDExLjYzMTAxNSwyMi40NjI5NDUyIEMxMS42NDAxMDUsMjIuNDcxMDQ1MiAxMS42NDk0NjUsMjIuNDgyMjA1MiAxMS42NTYzMDUsMjIuNDkyMTk1MiBMMTEuNjU2MzA1LDIyLjQ5MjE5NTIgTDE5Ljc1NDk1NSwzNC4yNDQyMTUyIEMxOS4yMTc4MzUsMzQuNzc2MTE1MiAxOC45MDEwMzUsMzUuMDU3MzY1MiAxOC41NDI3NDUsMzUuMTcwNjc1MiBDMTguMTg5NTg1LDM1LjI4MjM2NTIgMTcuODEwNDE1LDM1LjI4MjM2NTIgMTcuNDU3MjU1LDM1LjE3MDY3NTIgQzE3LjAzODAzNSwzNS4wMzgxMDUyIDE2LjY3NTYwNSwzNC42NzU2NzUyIDE1Ljk1MDgzNSwzMy45NTA4MTUyIEwxNS45NTA4MzUsMzMuOTUwODE1MiBMNy44NTczNjksMjUuODU3Mzg1MiBMOS45NzA5NjUsMjIuNTc4MjM1MiBDOS45ODE0MDUsMjIuNTYyMDM1MiA5Ljk5MDg1NSwyMi41NDczNjUyIDEwLjAwNjYwNSwyMi41MzYyMDUyIEMxMC4wMjk1NTUsMjIuNTE5OTE1MiAxMC4wNjIzMTUsMjIuNTI3NzQ1MiAxMC4wODkxMzUsMjIuNTM2MTE1MiBDMTAuMzA2NjY1LDIyLjYwMzI1NTIgMTAuNTExOTU1LDIyLjYzMDUyNTIgMTAuNzMxMDE1LDIyLjYzMDUyNTIgQzExLjAxMzcwNSwyMi42MzA1MjUyIDExLjI4MjA4NSwyMi41NzQwOTUyIDExLjU2MzUxNSwyMi40NjEyMzUyIEMxMS41ODcyNzUsMjIuNDUxNjk1MiAxMS42MTE5MzUsMjIuNDQ2MDI1MiAxMS42MzEwMTUsMjIuNDYyOTQ1MiBaIE0xMi42NTIwMDg4LDIxLjQ4MjYzMTQgTDEyLjY4NTYzNSwyMS40ODczNDUyIEwyMS42MTQ3MTUsMjMuMzI4NzQ1MiBDMjEuNjM2OTQ1LDIzLjMzMzMzNTIgMjEuNjY3MDA1LDIzLjM0MjY5NTIgMjEuNjgzMjA1LDIzLjM1ODYyNTIgQzIxLjY5NDcyNSwyMy4zNzAxNDUyIDIxLjY5NzE1NSwyMy4zODI2NTUyIDIxLjY5OTg1NSwyMy4zOTY4NzUyIEwyMS43MDE1MiwyMy40MDU1NzE1IEwyMS43MDM3MjUsMjMuNDE0NjA1MiBDMjEuODM0NzY1LDIzLjg3NTk0NTIgMjIuMTcwODI1LDI0LjI3NTAwNTIgMjIuNjI1MjM1LDI0LjQ1NDczNTIgQzIyLjY1MDQzNSwyNC40NjcxNTUyIDIyLjYzOTI3NSwyNC40OTU1OTUyIDIyLjYyNzU3NSwyNC41MjUzODUyIEMyMi42MjIxNzUsMjQuNTM5MDY1MiAyMi42MTY2ODUsMjQuNTUzMDE1MiAyMi42MTQ1MjUsMjQuNTY1Nzk1MiBDMjIuNTAyMjA1LDI1LjI1MDE1NTIgMjEuNTM2ODY1LDMxLjEzMzgxNTIgMjEuMjc3ODQ1LDMyLjcyMjIyNTIgTDIxLjI3Nzg0NSwzMi43MjIyMjUyIEwyMC41NDg1NzUsMzMuNDUxNDk1MiBMMTIuNDg5NjE1LDIxLjgwMzQyNTIgQzEyLjQ4NjY0NSwyMS43OTkxOTUyIDEyLjQ4MzQ5NSwyMS43OTQ5NjUyIDEyLjQ4MDI1NSwyMS43OTA3MzUyIEMxMi40Njc1NjUsMjEuNzc0MDg1MiAxMi40NTQ2MDUsMjEuNzU2ODk1MiAxMi40NTY0OTUsMjEuNzM2NzM1MiBDMTIuNDU3NzU1LDIxLjcyMjE1NTIgMTIuNDY3MDI1LDIxLjcxMDM2NTIgMTIuNDc2Mjk1LDIxLjY5ODY2NTIgTDEyLjQ3NjI5NSwyMS42OTg2NjUyIEwxMi40ODUwMjUsMjEuNjg3MTQ1MiBDMTIuNTA5Njg1LDIxLjY1MTg2NTIgMTIuNTMwNjU1LDIxLjYxNTg2NTIgMTIuNTUzNjA1LDIxLjU3NjM1NTIgQzEyLjU1OTU0NSwyMS41NjYxODUyIDEyLjU2NTU3NSwyMS41NTU3NDUyIDEyLjU3MTg3NSwyMS41NDUwMzUyIEwxMi41NzE4NzUsMjEuNTQ1MDM1MiBMMTIuNTkzMjk1LDIxLjUxMTgxNCBMMTIuNTkzMjk1LDIxLjUxMTgxNCBMMTIuNjE5OTM1LDIxLjQ4ODc4NTIgQzEyLjYzODkyNSwyMS40Nzg3MDUyIDEyLjY2NDU3NSwyMS40ODI5MzUyIDEyLjY4NTYzNSwyMS40ODczNDUyIFogTTI0LjU0NjE1LDIzLjk0OTUwOSBMMjQuNTU5MTU1LDIzLjk1MTA5NTIgTDI5LjExMzg3NSwyNC44ODYxMDUyIEwyMi42NDY0NzUsMzEuMzUzNTA1MiBMMjMuNzU0Mzc1LDI0LjU0OTA1NTIgQzIzLjc1NDgyNSwyNC41NDU5MDUyIDIzLjc1NTI3NSwyNC41NDI3NTUyIDIzLjc1NTYzNSwyNC41Mzk2MDUyIEMyMy43NTY4MDUsMjQuNTMxMDU1MiAyMy43NTc4ODUsMjQuNTIyNTk1MiAyMy43NjEwMzUsMjQuNTE0NDA1MiBDMjMuNzY5Njc1LDI0LjQ5MjUzNTIgMjMuNzkzNDM1LDI0LjQ4MzE3NTIgMjMuODE1OTM1LDI0LjQ3NDI2NTIgQzIzLjgxOTUzNSwyNC40NzI4MjUyIDIzLjgyMzA0NSwyNC40NzE0NzUyIDIzLjgyNjQ2NSwyNC40NzAwMzUyIEMyNC4wNzIyNTUsMjQuMzY3Nzk1MiAyNC4yODA3ODUsMjQuMjA1NTI1MiAyNC40NTIxNDUsMjQuMDA0OTE1MiBDMjQuNDczOTI1LDIzLjk3OTQ0NTIgMjQuNTAwMDI1LDIzLjk1NTY4NTIgMjQuNTMzMTQ1LDIzLjk1MDAxNTIgQzI0LjU0MDUyNSwyMy45NDg3NTUyIDI0LjU1MTc3NSwyMy45NDk1NjUyIDI0LjU1OTE1NSwyMy45NTEwOTUyIFogTTguOTE2NzMyLDIxLjY0OTM0NTIgQzguOTQ3MTE2LDIxLjY0OTM0NTIgOC45NjQ5MDksMjEuNjc5NzY1MiA4Ljk4MTUxNCwyMS43MDgxMTUyIEw4Ljk4MTUxNCwyMS43MDgxMTUyIEw4Ljk5MzcyNywyMS43MjgxODUyIEM5LjAyODcxOSwyMS43ODEzNzUyIDkuMDYzNzAyLDIxLjgyNzcyNTIgOS4wOTg2OTQsMjEuODczODk1MiBMOS4wOTg2OTQsMjEuODczODk1MiBMOS4xMTAyMzIsMjEuODg4MTE1MiBDOS4xMjA2MjcsMjEuOTAzNDE1MiA5LjExMzAxMywyMS45MTgyNjUyIDkuMTAzMDE0LDIxLjkzMzc0NTIgTDkuMTAzMDE0LDIxLjkzMzc0NTIgTDcuMDc2OTI1LDI1LjA3NjkwNTIgTDUuMjE5NjA0LDIzLjIxOTU3NTIgTDguODg2OTYsMjEuNjU1NDY1MiBDOC44OTYzNzQsMjEuNjUxNDE1MiA4LjkwNjQ5OSwyMS42NDkzNDUyIDguOTE2NzMyLDIxLjY0OTM0NTIgWiBNMjYuMjk4MzE1LDE1LjA3ODcxNTIgQzI2LjMyNjY2NSwxNS4wNjUzMDUyIDI2LjM2MTg1NSwxNS4wNzkzNDUyIDI2LjM5MDc0NSwxNS4wOTE0OTUyIEwyNi4zOTA3NDUsMTUuMDkxNDk1MiBMMzUuMDc2NDY1LDE4Ljc2NTAyNTIgQzM0Ljg5NjU1NSwxOS4xMDM0MjUyIDM0LjU0NTczNSwxOS40NTQyNDUyIDMzLjk1MDgzNSwyMC4wNDkyMzUyIEwzMC4wMTg4MjUsMjMuOTgxMTU1MiBMMjQuOTMxODQ1LDIyLjkyMTc2NTIgQzI0LjkyMzM4NSwyMi45MTk5NjUyIDI0LjkxNDIwNSwyMi45MTg1MjUyIDI0LjkwNDkzNSwyMi45MTY5OTUyIEMyNC44NjA0NzUsMjIuOTA5NzA1MiAyNC44MTE3ODUsMjIuOTAxNjk1MiAyNC44MTE3ODUsMjIuODYwNDc1MiBDMjQuNzY1MjU1LDIyLjQzMTE3NTIgMjQuNTYzNjU1LDIyLjA0Nzk1NTIgMjQuMjIyNDY1LDIxLjc4NzQwNTIgQzI0LjIwMTY3NSwyMS43NjY3OTUyIDI0LjIwNzUyNSwyMS43MzQyMTUyIDI0LjIxMjkyNSwyMS43MDQyNDUyIEwyNC4yMTI5MjUsMjEuNzA0MjQ1MiBMMjQuMjE1MDg1LDIxLjY5MTgyNTIgTDI1LjE3MjQxNSwxNS44MTg0MjUyIEMyNS4xNzM0MDUsMTUuODEyMjE1MiAyNS4xNzQzMDUsMTUuODA1NjQ1MiAyNS4xNzUyOTUsMTUuNzk4OTg1MiBDMjUuMTgxNTA1LDE1Ljc1NDE2NTIgMjUuMTg4ODg1LDE1LjcwMTUxNTIgMjUuMjMwNDY1LDE1LjcwMTUxNTIgQzI1LjY1ODMyNSwxNS42NDExMjUyIDI2LjAyNTg4NSwxNS40MzE4NzUyIDI2LjI3MzkyNSwxNS4xMDMxMDUyIEMyNi4yODEzOTUsMTUuMDkzMjk1MiAyNi4yODcyNDUsMTUuMDg0MDI1MiAyNi4yOTgzMTUsMTUuMDc4NzE1MiBaIE0xLjE1ODY5ODcsMTkuMTEwNzE1MiBMOC4zMDAzNzYsMjAuNTkxNjY1MiBMOC4zMDAzNzYsMjAuNTkxNjY1MiBMOC4zMjcxOTYsMjAuNTk2NDM1MiBDOC4zNzE3MDEsMjAuNjAzNjM1MiA4LjQyMDQwOSwyMC42MTE2NDUyIDguNDIwNDA5LDIwLjY1Mjg2NTIgQzguNDIwNDA5LDIwLjY5NzU5NTIgOC4zNjc1NywyMC43MTg1NjUyIDguMzIyNDE3LDIwLjczNjM4NTIgQzguMzE1MjA4LDIwLjczOTI2NTIgOC4zMDgxOTcsMjAuNzQyMDU1MiA4LjMwMTYyNywyMC43NDQ4NDUyIEw4LjMwMTYyNywyMC43NDQ4NDUyIEw0LjM5ODQ0NCwyMi4zOTg0MTUyIEwyLjA0OTE5MiwyMC4wNDkyMzUyIEMxLjY0OTYzNywxOS42NDk2MzUyIDEuMzYwMjEwNSwxOS4zNjAxOTUyIDEuMTU4Njk4NywxOS4xMTA3MTUyIEwxLjE1ODY5ODcsMTkuMTEwNzE1MiBaIE0yMy44NjU3OTUsMTUuMjcyMjE1MiBDMjMuODY1Nzk1LDE1LjI3MjIxNTIgMjMuODgxMzY1LDE1LjI3MjMwNTIgMjMuODk2ODQ1LDE1LjI4NzYwNTIgQzIzLjk1NzQxNSwxNS4zNDczNjUyIDI0LjAwODQ0NSwxNS4zODg1ODUyIDI0LjA1NzQ5NSwxNS40MjU2NjUyIEMyNC4wNjQ3ODUsMTUuNDMxMTU1MiAyNC4wNzMzMzUsMTUuNDM2MTA1MiAyNC4wODE5NzUsMTUuNDQxMTQ1MiBDMjQuMTA0NjU1LDE1LjQ1NDI4NTIgMjQuMTI3Njk1LDE1LjQ2NzY5NTIgMjQuMTI5MjI1LDE1LjQ5MTcyNTIgTDI0LjEyOTIyNSwxNS40OTE3MjUyIEwyNC4xMjc0MjUsMTUuNTE0NDk1MiBMMjMuMTgwMDg1LDIxLjMyOTkzNTIgQzIzLjE3ODgyNSwyMS4zMzczMTUyIDIzLjE3NzgzNSwyMS4zNDUxNDUyIDIzLjE3Njc1NSwyMS4zNTMwNjUyIEMyMy4xNzA3MjUsMjEuMzk4Nzg1MiAyMy4xNjM5NzUsMjEuNDQ5OTk1MiAyMy4xMjE0OTUsMjEuNDQ5OTk1MiBDMjIuNjA3Nzc1LDIxLjQ3OTg3NTIgMjIuMTUzMDA1LDIxLjc3MTY1NTIgMjEuODg2MTU1LDIyLjIxMTkzNTIgQzIxLjg4NDcxNSwyMi4yMTQzNjUyIDIxLjg4MzI3NSwyMi4yMTY3MDUyIDIxLjg4MTgzNSwyMi4yMTkwNDUyIEMyMS44Njk1MDUsMjIuMjM5ODM1MiAyMS44NTc2MjUsMjIuMjU5NzI1MiAyMS44MzU5MzUsMjIuMjcwNjE1MiBDMjEuODE3NjY1LDIyLjI3OTcwNTIgMjEuNzkzMjc1LDIyLjI3NTc0NTIgMjEuNzczMzg1LDIyLjI3MTYwNTIgTDIxLjc3MzM4NSwyMi4yNzE2MDUyIEwxMi45NjAxMzUsMjAuNDUzNDI1MiBDMTIuOTUxNzY1LDIwLjQ1MTcxNTIgMTIuODIyODg1LDE5Ljk4NjQxNTIgMTIuODEzNjE1LDE5Ljk4NDk3NTIgTDEyLjgxMzYxNSwxOS45ODQ5NzUyIFogTTUuMDU2MTAxLDEyLjk0MzkxNTIgQzUuNTUxNTY5LDEzLjY3MTExNTIgOC44MjQzODMsMTguMzk4OTk1MiA5LjIwNjQwNiwxOC45NDYxOTUyIEw5LjIwNjQwNiwxOC45NDYxOTUyIEw5LjIxODM0OSwxOC45NjI1NzUyIEM5LjI0MjczOSwxOC45OTU1MTUyIDkuMjY5NjEzLDE5LjAzMTc4NTIgOS4yNDIzODgsMTkuMDU4Njk1MiBDOS4xMTA2NjQsMTkuMjAzMzI1MiA4Ljk3ODk0LDE5LjM2MTYzNTIgOC44ODYzMywxOS41MzM3MTUyIEM4Ljg3NTM5NSwxOS41NTM5NjUyIDguODYxMzkxLDE5LjU3NzAwNTIgOC44NDE3OCwxOS41ODkxNTUyIEM4LjgyOTg0NiwxOS41OTY1MzUyIDguODE3NjMzLDE5LjU5Mzk1MjQgOC44MDQwMjUsMTkuNTkxMDQ1MiBMOC44MDQwMjUsMTkuNTkxMDQ1MiBMOC44MDE5OTEsMTkuNTkwNjg1MiBMMC43NDgyMTUsMTcuOTAyNzM1MiBDMC43NTYzNTgzOTgsMTcuNzUyMjU1MiAwLjc4MzQwOTA1LDE3LjYwMjU4NTIgMC44MjkzNjY5MiwxNy40NTcyMzUyIEMwLjk2MTkzMDgsMTcuMDM4MTA1MiAxLjMyNDM1MTgsMTYuNjc1Njc1MiAyLjA0OTE5MiwxNS45NTA4MTUyIEwyLjA0OTE5MiwxNS45NTA4MTUyIFogTTE4LjM0NjI3NSwxMS43MTU5NTUyIEMxOC4zNzA3NTUsMTEuNjk2OTY1MiAxOC40MDYzOTUsMTEuNzA2Njg1MiAxOC40MzQ5MjUsMTEuNzE4ODM1MiBMMTguNDM0OTI1LDExLjcxODgzNTIgTDIzLjM0MzA3NSwxMy43OTgxOTUyIEMyMy4zNzExNTUsMTMuODEwMDc1MiAyMy4zOTk4NjUsMTMuODIyMjI1MiAyMy40MTEyOTUsMTMuODUwNDg1MiBDMjMuNDE3MzI1LDEzLjg2NTYwNTIgMjMuNDE0NDQ1LDEzLjg4NTMxNTIgMjMuNDExMzg1LDEzLjkwMTE1NTIgQzIzLjM5NzYxNSwxMy45NzI3MDUyIDIzLjM4NTEwNSwxNC4wNTUzMjUyIDIzLjM4NTEwNSwxNC4xMzc4NTUyIEwyMy4zODUxMDUsMTQuMTM3ODU1MiBMMjMuMzg1MTA1LDE0LjI3NTgyNTIgQzIzLjM4NTEwNSwxNC4zMDk1NzUyIDIzLjM0OTgyNSwxNC4zMjQyNDUyIDIzLjMxNzYwNSwxNC4zMzc0NzUyIEMyMy4zMTQwMDUsMTQuMzM5MDA1MiAyMy4zMTA0MDUsMTQuMzQwNDQ1MiAyMy4zMDY5ODUsMTQuMzQxODg1MiBDMjIuNTI5NjU1LDE0LjY3MzQ0NTIgMTIuMzg5ODA1LDE4Ljk5NzMxNTIgMTIuMzc0ODY1LDE4Ljk5NzMxNTIgQzEyLjM1OTM4NSwxOC45OTczMTUyIDEyLjM0MzkwNSwxOC45OTczMTUyIDEyLjMyODMzNSwxOC45ODIwMTUyIEMxMi4zMDE2MDUsMTguOTU1NTU1MiAxMi4zMjg2MDUsMTguOTE2NzY1MiAxMi4zNTIyNzUsMTguODgyNjU1MiBDMTIuMzU2Njg1LDE4Ljg3NjM1NTIgMTIuMzYxMDA1LDE4Ljg3MDE0NTIgMTIuMzY0ODc1LDE4Ljg2NDIwNTIgTDEyLjM2NDg3NSwxOC44NjQyMDUyIEwxNi4zOTkwMzUsMTIuNjE5MDE1MiBDMTYuNDAxMzc1LDEyLjYxNTQxNTIgMTYuNDAzNzE1LDEyLjYxMTcyNTIgMTYuNDA2MDU1LDEyLjYwODAzNTIgQzE2LjQyOTkwNSwxMi41NzAzMjUyIDE2LjQ1NjYzNSwxMi41MjgyOTUyIDE2LjQ5OTgzNSwxMi41MjgyOTUyIEMxNi41MTM2MDUsMTIuNTMwMTg1MiAxNi41MjcxOTUsMTIuNTMyMTY1MiAxNi41NDA1MTUsMTIuNTM0MDU1MiBDMTYuNjMyMDQ1LDEyLjU0NzI4NTIgMTYuNzEzMjI1LDEyLjU1ODk4NTIgMTYuNzk0NDk1LDEyLjU1ODk4NTIgQzE3LjQwNjU4NSwxMi41NTg5ODUyIDE3Ljk3MzQwNSwxMi4yNjAzNjUyIDE4LjMxNjEyNSwxMS43NTE1OTUyIEMxOC4zMjUyMTUsMTEuNzM4MDk1MiAxOC4zMzM0MDUsMTEuNzI2MDM1MiAxOC4zNDYyNzUsMTEuNzE1OTU1MiBaIE05LjkwMTc1NSw4LjA5ODIxNjIgQzEwLjI4MTY0NSw4LjI2NDQxOTIgMTEuNjY0NDA1LDguODQ4NzYyMiAxMi45MDAzNzUsOS4zNzExMDQyIEMxMy44MzcxODUsOS43NjcwMDUyIDE0LjY5MDAyNSwxMC4xMjc0NTUyIDE0Ljk1NzU5NSwxMC4yNDMwMTUyIEMxNC45ODQ1MDUsMTAuMjU0NjI1MiAxNS4wMDkwNzUsMTAuMjY1MjQ1MiAxNS4wMjA5NTUsMTAuMjkyMDY1MiBDMTUuMDI4MDY1LDEwLjMwODE3NTIgMTUuMDI0NTU1LDEwLjMyOTQxNTIgMTUuMDIwOTU1LDEwLjM0NjY5NTIgQzE0Ljk5MzY4NSwxMC40NzYwMjUyIDE0Ljk4MDA5NSwxMC42MDUzNTUyIDE0Ljk4MDA5NSwxMC43MzQ2ODUyIEMxNC45ODAwOTUsMTEuMjA5ODg1MiAxNS4xNjYyMTUsMTEuNjU0NDg1MiAxNS40OTE4MzUsMTEuOTkxNzE1MiBDMTUuNTE4NjU1LDEyLjAxODE3NTIgMTUuNDkxNTY1LDEyLjA1Njk2NTIgMTUuNDY3ODk1LDEyLjA5MDk4NTIgTDE1LjQ2Nzg5NSwxMi4wOTA5ODUyIEwxNS40NTUzODUsMTIuMTA5NTI1MiBMMTEuMzUyMDE1LDE4LjQ2NjQwNTIgQzExLjM0MDg1NSwxOC40ODM2ODUyIDExLjMzMDY4NSwxOC40OTk1MjUyIDExLjMxMzQwNSwxOC41MTA3NzUyIEMxMS4yOTE2MjUsMTguNTI0OTk1MiAxMS4yNjExMTUsMTguNTE4NjA1MiAxMS4yMzU5MTUsMTguNTEyMjE1MiBDMTEuMDc1OTg1LDE4LjQ3MTcxNTIgMTAuOTA0NjI1LDE4LjQ0NTQzNTIgMTAuNzQ2NTg1LDE4LjQ0NTQzNTIgQzEwLjU5OTcwNSwxOC40NDU0MzUyIDEwLjQzODk2NSwxOC40NzI5NzUyIDEwLjI3NzQxNSwxOC41MDE4NjUyIEwxMC4yNzc0MTUsMTguNTAxODY1MiBDMTAuMjU4NTE1LDE4LjUwNTI4NTIgMTAuMjQyMzE1LDE4LjUwODI1NTIgMTAuMjI3ODI1LDE4LjQ5NzcyNTIgQzEwLjIxMTk4NSwxOC40ODYyOTUyIDEwLjE5ODIxNSwxOC40Njc5MzUyIDEwLjE4NzE0NSwxOC40NTE4MjUyIEwxMC4xODcxNDUsMTguNDUxODI1MiBMNS44NTk2MTIsMTIuMTQwMzk1MiBaIE0zMC40NjIxNjUsMTIuNDYyMjM1MiBMMzQuMTExNzE3OCwxNi4xMTE4NDc3IEMzNC43MzAwMDMzLDE2LjczMTc2OTIgMzUuMDQ4MjMyNywxNy4wNzAzNDYgMzUuMTcwNjA1LDE3LjQ1NzIzNTIgQzM1LjE5MDIyNSwxNy41MTkxNTUyIDM1LjIwNjMzNSwxNy41ODE3OTUyIDM1LjIxOTAyNSwxNy42NDUwNjUyIEwzNS4yMTkwMjUsMTcuNjQ1MDY1MiBMMjYuODgyMTQ1LDE0LjExNDk5NTIgQzI2Ljg3NzkxNSwxNC4xMTMxOTUyIDI2Ljg3MzUwNSwxNC4xMTEzOTUyIDI2Ljg2OTAwNSwxNC4xMDk1OTUyIEMyNi44MzUyNTUsMTQuMDk1OTE1MiAyNi43OTY2NDUsMTQuMDgwMzQ1MiAyNi43OTY2NDUsMTQuMDQ1ODc1MiBDMjYuNzk2NjQ1LDE0LjAxMjAzNTIgMjYuODM2NDI1LDEzLjk5NTc0NTIgMjYuODY5NTQ1LDEzLjk4MjA2NTIgTDI2Ljg2OTU0NSwxMy45ODIwNjUyIEwyNi44Nzk5ODUsMTMuOTc3ODM1MiBMMzAuNDYyMTY1LDEyLjQ2MjIzNTIgWiBNMjYuMzY3MDc1LDguMzY3MDM3MiBMMjkuNjMwMjA1LDExLjYzMDI3NTIgTDI2LjIzNzExNSwxMy4wNzM5NjUyIEMyNi4yMjc3NTUsMTMuMDc4MDE1MiAyNi4yMTc1ODUsMTMuMDgwMDg1MiAyNi4yMDc0MTUsMTMuMDgwMDg1MiBDMjYuMjAwNzU1LDEzLjA4MDA4NTIgMjYuMTk2OTc1LDEzLjA4MDA4NTIgMjYuMTkzNjQ1LDEzLjA3ODkxNTIgQzI2LjE4OTA1NSwxMy4wNzcyOTUyIDI2LjE4NTI3NSwxMy4wNzM1MTUyIDI2LjE3NjM2NSwxMy4wNjQ3ODUyIEMyNi4wNTY0ODUsMTIuOTMxNDA1MiAyNS45MDc2MjUsMTIuODEyNDI1MiAyNS43Mjk3ODUsMTIuNzIxNTI1MiBDMjUuNzI1NTU1LDEyLjcxOTM2NTIgMjUuNzIxNTA1LDEyLjcxNzgzNTIgMjUuNzE3NTQ1LDEyLjcxNjMwNTIgQzI1LjcxMDA3NSwxMi43MTM0MjUyIDI1LjcwMzE0NSwxMi43MTA4MTUyIDI1LjY5NjY2NSwxMi43MDQ2MDUyIEMyNS42NzU2OTUsMTIuNjg0ODA1MiAyNS42Njc0MTUsMTIuNjQ5MjU1MiAyNS42NzIwMDUsMTIuNjIwODE1MiBMMjUuNjcyMDA1LDEyLjYyMDgxNTIgTDI2LjM2NzA3NSw4LjM2NzAzNzIgWiBNMjEuOTczMDk1LDMuOTczMTExMiBMMjUuNDEwMTA1LDcuNDEwMTMwMiBMMjQuNTgyNTU1LDEyLjUzNzU2NTIgTDI0LjU4MjU1NSwxMi41Mzc1NjUyIEwyNC41ODA5MzUsMTIuNTUxNDI1MiBDMjQuNTc5Njc1LDEyLjU2MzIxNTIgMjQuNTc4MjM1LDEyLjU3NjE3NTIgMjQuNTc0MDk1LDEyLjU4NTQ0NTIgQzI0LjU2NTk5NSwxMi42MDM0NDUyIDI0LjU0ODI2NSwxMi42MDc0OTUyIDI0LjUyOTM2NSwxMi42MTE4MTUyIEMyNC41MjI5NzUsMTIuNjEzMjU1MiAyNC41MTY0MDUsMTIuNjE0Nzg1MiAyNC41MTAwMTUsMTIuNjE2ODU1MiBDMjQuMzM1OTU1LDEyLjY3MzczNTIgMjQuMTc0NDk1LDEyLjc1MzgzNTIgMjQuMDM1ODA1LDEyLjg1NzMzNTIgQzI0LjAyOTMyNSwxMi44NjIxOTUyIDI0LjAyMzkyNSwxMi44Njc4NjUyIDI0LjAxODcwNSwxMi44NzMzNTUyIEMyNC4wMDgyNjUsMTIuODg0NDI1MiAyMy45OTg0NTUsMTIuODk0Njg1MiAyMy45ODIzNDUsMTIuODk1Njc1MiBDMjMuOTcxNzI1LDEyLjg5NjMwNTIgMjMuOTUzODE1LDEyLjg5Mzk2NTIgMjMuOTQ0MDA1LDEyLjg4OTczNTIgTDIzLjk0NDAwNSwxMi44ODk3MzUyIEwxOC43MDc2MjUsMTAuNjY0ODQ1MiBDMTguNzA0MjA1LDEwLjY2MzQwNTIgMTguNzAwNjk1LDEwLjY2MTk2NTIgMTguNjk3MDk1LDEwLjY2MDQzNTIgQzE4LjY2Mzk3NSwxMC42NDY4NDUyIDE4LjYyNDI4NSwxMC42MzA0NjUyIDE4LjYyNDI4NSwxMC41OTY2MjUyIEMxOC41OTYwMjUsMTAuMzE2NzI1MiAxOC41MDMwNTUsMTAuMDM2OTE1MiAxOC4zNTczNDUsOS43OTIwMjUyIEMxOC4zNTM2NTUsOS43ODU5MDUyIDE4LjM0OTg3NSw5Ljc3OTY5NTIgMTguMzQ1OTE1LDkuNzczMzk1MiBDMTguMzIwMjY1LDkuNzMyMDg1MiAxOC4yOTI5MDUsOS42ODgyMDEyIDE4LjMxNDE0NSw5LjY0NjIxNjIgTDE4LjMxNDE0NSw5LjY0NjIxNjIgTDIxLjk3MzA5NSwzLjk3MzExMTIgWiBNMTcuNDU3MjU1LDAuODI5MzY3NjQgQzE3LjgxMDQxNSwwLjcxNzY1Nzc1IDE4LjE4OTU4NSwwLjcxNzY1Nzc1IDE4LjU0Mjc0NSwwLjgyOTM2NzczIEMxOC45NjE5NjUsMC45NjE5MzA4IDE5LjMyNDM5NSwxLjMyNDM1MjcgMjAuMDQ5MTY1LDIuMDQ5MTk5MiBMMjEuMTgzMTY1LDMuMTgzMTU0MiBMMTcuNDYxNjY1LDguOTQ3MjQwMiBDMTcuNDUwOTU1LDguOTYzODE4MiAxNy40NDExNDUsOC45Nzg5MjkyIDE3LjQyNDg1NSw4Ljk5MDE0MzIgQzE3LjQwMjM1NSw5LjAwNTYxNDIgMTcuMzcwNDk1LDguOTk4MzI0MiAxNy4zNDQyMTUsOC45OTA4NTQyIEMxNy4xNTU4NDUsOC45MzcyODYyIDE2Ljk2NzM4NSw4LjkxMDUwMjIgMTYuNzc4OTI1LDguOTEwNTAyMiBDMTYuMzYwMjQ1LDguOTEwNTAyMiAxNS45NDE1NjUsOS4wNjM3OTkyIDE1LjYxNTk0NSw5LjMyNDQwMzIgQzE1LjU5MTgyNSw5LjM0ODI0NDIgMTUuNTU1NzM1LDkuMzMzNTQ3MiAxNS41MjQ2ODUsOS4zMjAwNDcyIEMxNS4wMzg2ODUsOS4xMDkwNjAyIDExLjI1ODY4NSw3LjUxMDc0MTIgMTAuNzE3ODc1LDcuMjgyMDk2MiBMMTAuNzE3ODc1LDcuMjgyMDk2MiBMMTYuMTExODQ4MywxLjg4ODMwMDM0IEMxNi43MzE2OTk1LDEuMjY5OTU2MzYgMTcuMDcwMjgyNywwLjk1MTczMzYzNCAxNy40NTcyNTUsMC44MjkzNjc2NCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNiAxNikiLz4KICA8L2c+Cjwvc3ZnPgo="); 
  --notification-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDE2IDIwIj4KICA8cGF0aCBmaWxsPSIjN0Q4NTg5IiBkPSJNMTUsMTkgQzE1LDIwLjY1NyAxMy42NTcsMjIgMTIsMjIgQzEwLjM0MywyMiA5LDIwLjY1NyA5LDE5IEwxNSwxOSBaIE0xOC4xMjkxNjg4LDE3IEw1Ljg3MDUxMTEyLDE3IEM0LjgzNzQ1NjM1LDE3IDQsMTYuMTA0NTY5NSA0LDE1IEM0LDE0LjY1MTk0NjEgNC4wODQ5NDk4NiwxNC4zMDk5MTc1IDQuMjQ2NDUyNjcsMTQuMDA3NzIyMSBMNi4zODgzMDY2MSwxMCBMNi4zODgzMDY2MSw4IEM2LjM4ODMwNjYxLDQuNjg2IDguOTAwNDAzMDQsMiAxMS45OTk4NCwyIEMxNS4wOTkyNzY5LDIgMTcuNjExMzczMyw0LjY4NiAxNy42MTEzNzMzLDggTDE3LjYxMTM3MzMsMTAgTDE5Ljc1MzIyNzMsMTQuMDA3NzIyMSBDMjAuMjY1NzY1OSwxNC45NjY3NTcgMTkuOTU0MTQ0OSwxNi4xODg0NjYzIDE5LjA1NzIwMjIsMTYuNzM2NDg2MyBDMTguNzc0NTcyMywxNi45MDkxNjk0IDE4LjQ1NDY4ODEsMTcgMTguMTI5MTY4OCwxNyBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNCAtMikiLz4KPC9zdmc+Cg==");
  --caret-right-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9ImNhcmV0LXJpZ2h0LWEiIHdpZHRoPSIxMDEuMyUiIGhlaWdodD0iMTIzLjUlIiB4PSItLjclIiB5PSItMTEuOCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+CiAgICAgIDxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIiBzdGREZXZpYXRpb249IjEiLz4KICAgICAgPGZlQ29sb3JNYXRyaXggaW49InNoYWRvd0JsdXJPdXRlcjEiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIiB2YWx1ZXM9IjAgMCAwIDAgMC4wNTQ5MDE5NjA4ICAgMCAwIDAgMCAwLjExNzY0NzA1OSAgIDAgMCAwIDAgMC4xNDUwOTgwMzkgIDAgMCAwIDAuMTYgMCIvPgogICAgICA8ZmVNZXJnZT4KICAgICAgICA8ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSIvPgogICAgICAgIDxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPgogICAgICA8L2ZlTWVyZ2U+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcgZmlsbD0iIzdEODU4OSIgZmlsdGVyPSJ1cmwoI2NhcmV0LXJpZ2h0LWEpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjczIC0yOCkiPgogICAgPHBhdGggZD0iTTExLjk5OTg4MzYsNC4wOTM3MDgwMyBMOC41NTgwOTUxNyw3LjQzMjk0OTUzIEM4LjIzNTMxNDU5LDcuNzQ2MTEyOTggOC4yMzUzMTQ1OSw4LjI1Mzg4NzM2IDguNTU4MDk1MTcsOC41NjY5Mzc2OSBMMTIsMTEuOTA2MjkyMSBMOS44NDE4Nzg3MSwxNCBMNC4yNDIwODU0NCw4LjU2NjkzNzUxIEMzLjkxOTMwNDg1LDguMjUzODg3MTkgMy45MTkzMDQ4NSw3Ljc0NjExMjgxIDQuMjQyMDg1NDQsNy40MzI5NDkzNiBMOS44NDE5OTUzMSwyIEwxMS45OTk4ODM2LDQuMDkzNzA4MDMgWiIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjg3IDI2KSIvPgogIDwvZz4KPC9zdmc+Cg==");
  --circleTeal: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjhweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCA4IDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iT3RoZXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJPdGhlci0vLVJhZGlvLS8tRGlzYWJsZWQtLy1BY3RpdmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02LjAwMDAwMCwgLTYuMDAwMDAwKSIgZmlsbD0iIzAwN0E3MCIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEwIiBjeT0iMTAiIHI9IjQiPjwvY2lyY2xlPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==");
}

/* Unrelated styles for radios and switcher */


p {
  color: var(--neutral900);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.emphasis, strong {
  font-weight: 600;
  color: #0E1E25; 
}

.muted {
  color: #656F74;
}

/* ⭐️Checkbox and Radio Styling ⭐️ */

/* CSS madness, hiding the actual checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked,
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}

/* The actual label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label,
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
  /* Extends h5.emphasis 👇 */
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--neutral900);
}

label p {
  margin: 4px 0 8px 0;
}

/* Basic shape of the checkbox/radio */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px; 
  height: 20px;
}

/* Checkbox only shape */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  border-radius: 6px;
}

/* Radio only shape */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  border-radius: 10px;
}

/* Checked state */

[type="radio"]:checked + label:before {
  background: var(--neutral100);
  box-shadow: inset 0 0 0 6px var(--teal800);
}

/* Default state */
[type="checkbox"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:before{
  background: var(--neutral100);
  box-shadow: inset 0 0 0 2px var(--neutral400);
}

/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before,
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
  box-shadow: none;
}

[type="checkbox"]:disabled:checked + label:before {
  background: var(--neutral200);
  background-image: var(--checkmarkTeal);
  background-size: 11px 8px;
  background-repeat: no-repeat;
  background-position: 5px center;
}

[type="radio"]:disabled:checked + label:before {
  background-image: var(--circleTeal); /* Tried using simple inset box-shadows but there was some artifacts */
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position: center;
}

[type="checkbox"]:disabled:not(:checked) + label:before {
  background: var(--neutral200);
  background-image: var(--uncheckMark);
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Hover/Focus/Active states */
[type="checkbox"]:checked + label:hover:before,
[type="checkbox"]:checked + label:active:before,
[type="checkbox"]:checked + label:focus:before {
  box-shadow: 0 0 0 2px var(--gold500);
}

[type="radio"]:not(:checked) + label:hover:before,
[type="radio"]:not(:checked) + label:active:before,
[type="radio"]:not(:checked) + label:focus:before {
  box-shadow: inset 0 0 0 2px var(--gold500);
}

[type="checkbox"]:not(:checked) + label:hover:before,
[type="checkbox"]:not(:checked) + label:active:before,
[type="checkbox"]:not(:checked) + label:focus:before {
  box-shadow: inset 0 0 0 2px var(--gold500);
}

[type="checkbox"]:disabled:not(:checked) + label:hover:before,
[type="checkbox"]:disabled:checked + label:hover:before,
[type="radio"]:disabled:not(:checked) + label:hover:before,
[type="radio"]:disabled:checked + label:hover:before {
  cursor: not-allowed;
  box-shadow: none;
}

.input-row {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  width: auto;
}

.wrapper {
  position: fixed;
  padding-left: 8px;
  width: 100%;
  bottom: 8px;

}

.switcher {
  display: inline-flex;
  flex-direction: column;
  padding: 16px;
  margin: auto;
  background: var(--neutral000);
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(14,30,37,0.12);
}

.hidden { 
  display: none; 
}