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

body {
  font-size: 11px;
  font-family: sans-serif, system-ui;
  margin: 0;
  overflow: hidden;
  background-color: var( --color-grey-10-color );

  /*display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas: 
    "head"
    "cont";*/

  --header-height: var( --spacing-7 );
}

body.styles {
  background-color: #fff;
  grid-template-columns: 1fr;
  grid-template-rows: 44px 1fr;
  grid-template-areas: 
    "head"
    "styl";
}
  /*===============START HEADER====================*/
  #header {
    display: fixed;
    height: var( --header-height );
    background-color: var( --color-primary-color );
    color: var( --color-grey-10-color );

    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;*/
  }

    body.s_page_styles #styles-link,
    body.s_page_reference #reference-link,
    body.s_page_components #components-link,
    body.s_page_history #history-link {
      color: rgba(255,255,255,1);
    }

    body.s_page_styles #styles-link::after,
    body.s_page_reference #reference-link::after,
    body.s_page_components #components-link::after,
    body.s_page_history #history-link::after {
      content: " ";
      width: 100%; height: 4px;
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background-color: white;
    }

  
    /* pages... */
    body.s_page_reference #reference {
      display: block;
    }
    body.s_page_styles #styles {
      display: block;
    }
    body.s_page_components #components {
      display: grid;
    }
    body.s_page_history #history {
      display: block;
    }

    .mainNav-item {
      position: relative;

      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-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;
    }
      .beta {
        color: var( --color-error-color );
      }

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

  #components {
    display: none;
    grid-area: cont;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
      "navi comp";

    position: absolute;
    top: var( --header-height ); left: 0; right: 0; bottom: 0;
  }

  #compNav {
    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: var( --color-grey-10-color );
      text-decoration: none;
      cursor: pointer;
    }

      .navItem::hover {
        content: " ";
        background-color: var( --color-grey-095-color );
        border-radius: 4px;
      }

      .navItem.selected {
        content: " ";
        background-color: var( --color-grey-092-color );
      }

      #reference code {
        /*padding: var( --spacing-1 );*/
        background-color: var( --color-grey-092-color );
        display: block;
        border-radius: 4px;
        font-size: var( --type-text-05-font-size );
        margin: var( --spacing-2 ) 0 ;
        white-space: pre;
      }

      #reference a {
        text-decoration: none;
        color: var( --color-primary-text-lightest-color );
      }

  #componentsContent {
    grid-area: comp;
    overflow-y: scroll;
    position: relative;
    background-color: var( --color-grey-095-color );
  }
    
    .compNavItem {
      padding: var( --spacing-1 ) var( --spacing-2 );
      cursor: pointer;
    }
      .compNavItem:hover {
        background-color: var( --color-grey-092-color );
      }
      .compNavItem.selected::after {
        content: " ";
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background-color: var( --color-grey-06-color );
        height: 2px;
      }

      .s_compPage_overview .compNavItem.overview::after,
      .s_compPage_code .compNavItem.code::after,
      .s_compPage_states .compNavItem.states::after {
        content: " ";
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background-color: var( --color-grey-06-color );
        height: 2px;
      }

      .compContent {
        display: none;
      }
      .s_compPage_overview .compContent.overview,
      .s_compPage_code .compContent.code,
      .s_compPage_states .compContent.states {
        display: block;
      }

      .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 {
      display: none;
      position: absolute;
      top: var( --header-height ); left: 0; right: 0; bottom: 0;
      padding: 0px;
    }
      #styles iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }

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

  #reference {
    display: none;
    position: absolute;
    top: var( --header-height ); left: 0; right: 0; bottom: 0;
    overflow-y: auto;
  }

  #history {
    display: none;
    position: absolute;
    top: var( --header-height ); left: 0; right: 0; bottom: 0;
    overflow-y: auto;
  }

  #main-icon {
    margin-right: 8px;
  }
    .version {
      margin-bottom: 40px;
    }

    ul {
      padding-left: 30px;
    }
      li {
        margin: 8px 0;
      }
      li > * {
        vertical-align: text-top;
      }


/* SCROLL BAR */
#componentsContent::-webkit-scrollbar,
#reference::-webkit-scrollbar,
#history::-webkit-scrollbar,
#compNav::-webkit-scrollbar {
  width: 12px;
}
  
#componentsContent::-webkit-scrollbar-track,
#reference::-webkit-scrollbar-track,
#history::-webkit-scrollbar-track,
#compNav::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0); 
}
  
#componentsContent::-webkit-scrollbar-thumb,
#reference::-webkit-scrollbar-thumb,
#history::-webkit-scrollbar-thumb,
#compNav::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #bbb; 
  border: 4px solid #F3F3F3;
}