html, body {
  height: 100vh; width: 100vw;
}

body {
  font-size: 11px;
  font-family: sans-serif, system-ui;
  margin: 0;
  overflow: hidden;
  background-color: #F3F3F3;

  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 44px 1fr;
  grid-template-areas: 
    "head head"
    "navi cont";
}

body.styles {
  background-color: #fff;
  grid-template-columns: 1fr;
  grid-template-rows: 44px 1fr;
  grid-template-areas: 
    "head"
    "styl";
}

body.styles #styles {
  display: block;
}

body.styles #compNav,
body.styles #compReadme {
  display: none !important;
}

  /*===============START HEADER====================*/
  #header {
    height: 44px;
    background-color: #63A70A;
    color: #fff;

    background-image: url('data:image/svg+xml;utf8,<svg width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M53.089 33.1764C50.303 31.2421 47.5678 31.3408 43.8884 32.3533C38.2191 33.9008 22.2017 44.7786 12.8021 47.3879C6.33674 49.1782 3.30093 47.9682 3.30093 47.9682C7.13274 53.866 13.0985 58.3644 20.1609 60.4429C20.7071 56.286 24.4373 53.047 28.8661 53.047C33.2949 53.047 36.9743 56.2366 37.5713 60.4429C45.9292 57.9776 52.7418 51.981 56.4212 44.6345C58.5594 40.6217 56.7684 35.6417 53.089 33.1764Z" fill="white"/><path d="M38.6973 2.88797C38.101 7.0306 34.4256 10.2135 30.0016 10.2135C25.5777 10.2135 21.8516 7.0347 21.306 2.84285C12.9571 5.29972 6.15204 11.2758 2.37518 18.5972C0.290082 22.5962 2.12564 27.5592 5.80523 30.1145C8.58817 32.0423 11.3204 31.9438 14.9957 30.9348C20.6589 29.3926 36.6587 18.552 46.048 15.9516C52.5063 14.1674 55.5388 15.3733 55.5388 15.3733C51.7112 9.44645 45.752 4.96749 38.6973 2.89207V2.88797Z" fill="white"/></svg>');
    background-size: 26px 26px;
    background-repeat: no-repeat;
    background-position: right 12px center;

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;

    position: relative;
    z-index: 100;
    box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.25);

    grid-area: head;
  }

    .mainNav-item {
      position: relative;
      color: rgba(255,255,255,0.7);
      font-size: 13px;
      font-weight: 500;

      padding: 0 20px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;

      text-transform: uppercase;
      cursor: pointer;
      cursor: hand;
      text-decoration: none;
    }
      .mainNav-item:hover {
        background-color: #76BB1C;
      }

      .mainNav-item.selected {
        color: rgba(255,255,255,1);
      }

      .mainNav-item.selected::after {
        content: " ";
        width: 100%; height: 4px;
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background-color: white;
      }

    .mainNav-version {
      font-size: 10px;
      color: rgba(255,255,255,0.5);

      margin-right: 12px;
      padding-top: 4px;

      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }
    
    .mainNav-title {
      font-size: 14px;
      color: white;
      margin-right: 60px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }
  /*================END HEADER===================*/


  #compNav {
    grid-area: navi;
    overflow-y: auto;

    padding: 20px 10px;
    background-color: #fff;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }

    .navItem {
      color: #000;
      font-size: 12px;
      margin-bottom: 4px;
      position: relative;
      padding: 6px 10px;
      display: block;
      border-radius: 4px;
      text-align: left;
      border: 0;
      background-color: rgba(0,0,0,0);
      text-decoration: none;
    }

      .navItem::hover {
        content: " ";
        background-color: #efefef;
        border-radius: 4px;
      }

      .navItem.selected {
        content: " ";
        background-color: #eee;
        
      }

  #compReadme {
    grid-area: cont;
    overflow-y: auto;
    position: relative;
  }

  #compReadme::-webkit-scrollbar {
      width: 12px;
  }
    
  #compReadme::-webkit-scrollbar-track {
      background-color: rgba(0,0,0,0); 
  }
    
  #compReadme::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #bbb; 
      border: 4px solid #F3F3F3;
  }

    #readMeContent {
      padding: 40px 40px;
      max-width: 800px;
      margin: 0 auto;

      --border: 1px solid #ccc;
    }
    
      .compHeader {
        box-sizing: border-box; 
        width: 100%; padding: 20px; 
        background-color: #fff;
        border-radius: 4px 4px 0 0;
        border-top: var( --border );
        border-left: var( --border );
        border-right: var( --border );
        border-bottom: var( --border );
        margin-top: 20px;
      }
        .compExampleTitle {
          font-size: 18px;
        }
        .compExampleDescription {
          font-size: 12px;
          margin-top: 4px;
          color: #666;
        }
      .compExample {
        box-sizing: border-box; 
        width: 100%; padding: 40px; 
        background-color: #eee;
        border-radius: 0;
        border-left: var( --border );
        border-right: var( --border );
      }
      .compExampleCode {
        font-size: 12px;
        box-sizing: border-box; 
        width: 100%; padding: 20px; 
        background-color: #F5F5F5;
        border-radius: 0 0 4px 4px;
        border-top: var( --border );
        border-bottom: var( --border );
        border-left: var( --border );
        border-right: var( --border );
        position: relative;

        cursor: pointer;
      }
        .compExampleCode:hover {
          background-color: #eee;
        }
        .compExampleCode:hover:after {
          content: "copy";
          color: #666;
          position: absolute;
          right: 10px;
          top: calc( 50% - 8px );
        }

    #styles {
      border: 0;
      display: none;
      grid-area: styl;
      width: 100%;
      height: 100%;
    }

    .readme table {
      border-collapse: collapse;
    }
      .readme th { 
        padding: 6px;
        text-align: left;
      }
      .readme td { 
        padding: 6px;
        border: 1px solid #aaa;
      }