/**
 * google-material-color v1.2.6
 * https://github.com/danlevan/google-material-color
 */
.underlined {
  margin-bottom: 0px; }
  .underlined > span {
    position: relative; }
    .underlined > span:after {
      content: "";
      position: absolute;
      left: 0px;
      right: 0px;
      bottom: -5px;
      border-bottom: 1px solid; }

.row {
  display: flex;
  align-items: center;
  width: 0;
  flex-wrap: wrap; }
  .row.full {
    width: 100%; }
  .row .col-0 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 0%;
    overflow-x: hidden; }
    .row .col-0.left, .row .col-0.left-when-small {
      text-align: left; }
    .row .col-0.right {
      text-align: right; }
    .row .col-0.center {
      text-align: center; }
    .row .col-0.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-0-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 0%;
      overflow-x: hidden; }
      .row .col-0-when-small.left, .row .col-0-when-small.left-when-small {
        text-align: left; }
      .row .col-0-when-small.right {
        text-align: right; }
      .row .col-0-when-small.center {
        text-align: center; }
      .row .col-0-when-small.middle {
        align-self: baseline; } }
  .row .col-10 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 10%;
    overflow-x: hidden; }
    .row .col-10.left, .row .col-10.left-when-small {
      text-align: left; }
    .row .col-10.right {
      text-align: right; }
    .row .col-10.center {
      text-align: center; }
    .row .col-10.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-10-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 10%;
      overflow-x: hidden; }
      .row .col-10-when-small.left, .row .col-10-when-small.left-when-small {
        text-align: left; }
      .row .col-10-when-small.right {
        text-align: right; }
      .row .col-10-when-small.center {
        text-align: center; }
      .row .col-10-when-small.middle {
        align-self: baseline; } }
  .row .col-20 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 20%;
    overflow-x: hidden; }
    .row .col-20.left, .row .col-20.left-when-small {
      text-align: left; }
    .row .col-20.right {
      text-align: right; }
    .row .col-20.center {
      text-align: center; }
    .row .col-20.middle {
      align-self: baseline;
      overflow: hidden; }
  @media (max-width: 800px) {
    .row .col-20-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 20%;
      overflow-x: hidden; }
      .row .col-20-when-small.left, .row .col-20-when-small.left-when-small {
        text-align: left; }
      .row .col-20-when-small.right {
        text-align: right; }
      .row .col-20-when-small.center {
        text-align: center; }
      .row .col-20-when-small.middle {
        align-self: baseline; } }
  .row .col-30 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 30%;
    overflow-x: hidden; }
    .row .col-30.left, .row .col-30.left-when-small {
      text-align: left; }
    .row .col-30.right {
      text-align: right; }
    .row .col-30.center {
      text-align: center; }
    .row .col-30.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-30-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 30%;
      overflow-x: hidden; }
      .row .col-30-when-small.left, .row .col-30-when-small.left-when-small {
        text-align: left; }
      .row .col-30-when-small.right {
        text-align: right; }
      .row .col-30-when-small.center {
        text-align: center; }
      .row .col-30-when-small.middle {
        align-self: baseline; } }
  .row .col-40 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 40%;
    overflow-x: hidden; }
    .row .col-40.left, .row .col-40.left-when-small {
      text-align: left; }
    .row .col-40.right {
      text-align: right; 
      overflow: hidden;
      position: fixed;
      right: 0; }
    .row .col-40.center {
      text-align: center; }
    .row .col-40.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-40-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 40%;
      overflow-x: hidden; }
      .row .col-40-when-small.left, .row .col-40-when-small.left-when-small {
        text-align: left; }
      .row .col-40-when-small.right {
        text-align: right; }
      .row .col-40-when-small.center {
        text-align: center; }
      .row .col-40-when-small.middle {
        align-self: baseline; } }
  .row .col-45 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 45%;
    overflow-x: hidden; }
    .row .col-45.left, .row .col-45.left-when-small {
      text-align: left; }
    .row .col-45.right {
      text-align: right; }
    .row .col-45.center {
      text-align: center; }
    .row .col-45.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-45-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 45%;
      overflow-x: hidden; }
      .row .col-45-when-small.left, .row .col-45-when-small.left-when-small {
        text-align: left; }
      .row .col-45-when-small.right {
        text-align: right; }
      .row .col-45-when-small.center {
        text-align: center; }
      .row .col-45-when-small.middle {
        align-self: baseline; } }
  .row .col-50 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 50%;
    overflow-x: hidden; }
    .row .col-50.left, .row .col-50.left-when-small {
      text-align: left; }
    .row .col-50.right {
      text-align: right; }
    .row .col-50.center {
      text-align: center; }
    .row .col-50.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-50-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 50%;
      overflow-x: hidden; }
      .row .col-50-when-small.left, .row .col-50-when-small.left-when-small {
        text-align: left; }
      .row .col-50-when-small.right {
        text-align: right; }
      .row .col-50-when-small.center {
        text-align: center; }
      .row .col-50-when-small.middle {
        align-self: baseline; } }
  .row .col-60 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 60%;
    overflow-x: hidden; }
    .row .col-60.left, .row .col-60.left-when-small {
      text-align: left; }
    .row .col-60.right {
      text-align: right; }
    .row .col-60.center {
      text-align: center; }
    .row .col-60.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-60-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 60%;
      overflow-x: hidden; }
      .row .col-60-when-small.left, .row .col-60-when-small.left-when-small {
        text-align: left; }
      .row .col-60-when-small.right {
        text-align: right; }
      .row .col-60-when-small.center {
        text-align: center; }
      .row .col-60-when-small.middle {
        align-self: baseline; } }
  .row .col-70 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 70%;
    overflow-x: hidden; }
    .row .col-70.left, .row .col-70.left-when-small {
      text-align: left; }
    .row .col-70.right {
      text-align: right; }
    .row .col-70.center {
      text-align: center; }
    .row .col-70.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-70-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 70%;
      overflow-x: hidden; }
      .row .col-70-when-small.left, .row .col-70-when-small.left-when-small {
        text-align: left; }
      .row .col-70-when-small.right {
        text-align: right; }
      .row .col-70-when-small.center {
        text-align: center; }
      .row .col-70-when-small.middle {
        align-self: baseline; } }
  .row .col-80 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 80%;
    overflow-x: hidden; }
    .row .col-80.left, .row .col-80.left-when-small {
      text-align: left; }
    .row .col-80.right {
      text-align: right; }
    .row .col-80.center {
      text-align: center; }
    .row .col-80.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-80-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 80%;
      overflow-x: hidden; }
      .row .col-80-when-small.left, .row .col-80-when-small.left-when-small {
        text-align: left; }
      .row .col-80-when-small.right {
        text-align: right; }
      .row .col-80-when-small.center {
        text-align: center; }
      .row .col-80-when-small.middle {
        align-self: baseline; } }
  .row .col-90 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 90%;
    overflow-x: hidden; }
    .row .col-90.left, .row .col-90.left-when-small {
      text-align: left; }
    .row .col-90.right {
      text-align: right; }
    .row .col-90.center {
      text-align: center; }
    .row .col-90.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-90-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 90%;
      overflow-x: hidden; }
      .row .col-90-when-small.left, .row .col-90-when-small.left-when-small {
        text-align: left; }
      .row .col-90-when-small.right {
        text-align: right; }
      .row .col-90-when-small.center {
        text-align: center; }
      .row .col-90-when-small.middle {
        align-self: baseline; } }
  .row .col-100 {
    flex: 1;
    flex-grow: 0;
    flex-shrink: 1;
    box-sizing: border-box;
    position: relative;
    min-height: 24px;
    flex-basis: 100%;
    overflow-x: hidden; }
    .row .col-100.left, .row .col-100.left-when-small {
      text-align: left; }
    .row .col-100.right {
      text-align: right; }
    .row .col-100.center {
      text-align: center; }
    .row .col-100.middle {
      align-self: baseline; }
  @media (max-width: 800px) {
    .row .col-100-when-small {
      flex: 1;
      flex-grow: 0;
      flex-shrink: 1;
      box-sizing: border-box;
      position: relative;
      min-height: 24px;
      flex-basis: 100%;
      overflow-x: hidden; }
      .row .col-100-when-small.left, .row .col-100-when-small.left-when-small {
        text-align: left; }
      .row .col-100-when-small.right {
        text-align: right; }
      .row .col-100-when-small.center {
        text-align: center; }
      .row .col-100-when-small.middle {
        align-self: baseline; } }
  @media (max-width: 800px) {
    .row .col-0-when-small {
      display: none; } }

.markdown-to-html code.inline {
  background-color: rgba(211, 211, 211, 0.22);
  border-radius: 2px;
  padding: 2px; }
.markdown-to-html code:not(.inline) {
  background-color: #333333;
  color: lightgrey;
  padding: 10px;
  display: block; }
.markdown-to-html table {
  font-size: 0.9em;
  font-weight: 300;
  border-collapse: collapse; }
  .markdown-to-html table td, .markdown-to-html table th {
    border: 1px solid #DCEDC8;
    padding: 5px 10px; }
  .markdown-to-html table th {
    text-align: center;
    background-color: #AED581;
    font-weight: 300;
    font-size: 0.9em;
    color: white; }
  .markdown-to-html table tr:nth-child(even) {
    background-color: rgba(219, 237, 196, 0.3); }
  .markdown-to-html table td {
    height: 50px; }

body, html {
  font-family: Roboto,'Helvetica Neue',sans-serif; }

h1, h2, h3, h4, h5, h6 {
  color: #7CB342;
  font-weight: 300; }

h1 {
  font-size: 3em; }

h2 {
  font-size: 1.8em; }

p {
  font-weight: 400;
  font-size: 14px;
  text-align: justify;
  line-height: 1.3em; }

a {
  text-decoration: none;
  font-weight: 300;
  color: #7CB342;
  border-bottom: 1px solid; }
  a:hover {
    color: #33691E; }
  a.quiet {
    color: #BDBDBD;
    font-weight: 100;
    border-bottom: 1px dashed; }
  a.bright {
    color: white; }
  a.tiny {
    font-size: 0.8em; }
  a.active {
    position: relative; }
    a.active:after {
      content: '';
      position: absolute;
      left: 0px;
      right: 0px;
      height: 2px;
      background-color: #7CB342;
      bottom: -9px; }

a.button, button {
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  outline: none;
  height: 30px;
  border: none;
  font-size: 1em;
  line-height: 1.9em;
  padding: 8px 10px;
  font-weight: 300;
  user-select: none;
  -webkit-user-select: none;
  background-color: white;
  color: #7CB342; }
  a.button.primary, button.primary {
    color: white;
    background-color: #7CB342;
    border-radius: 2px; }

.codepen-form .codepen-button {
  width: 32px;
  white-space: nowrap;
  overflow: hidden;
  height: 32px;
  opacity: 0.4; }
.codepen-form:hover .codepen-button {
  width: initial;
  opacity: 1; }

body, html {
  margin: 0;
  padding: 0; }

.header-bar {
  position: fixed;
  width: 100%;
  background-color: #F5F5F5;
  height: 50px;
  z-index: 10;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
  .header-bar > [class^="col"] {
    padding: 0px 20px; }
  .header-bar .header-title {
    font-size: 1.1em;
    border-bottom: none; }
  .header-bar .logo {
    background: url("assets/n3-charts-v2_logo.png") no-repeat center top;
    background-position: center center;
    height: 100px;
    width: 100px;
    background-size: 100px;
    -webkit-transition: height 0.1s ease-in-out, width 0.1s ease-in-out, background-size 0.1s ease-in-out;
    -moz-transition: height 0.1s ease-in-out, width 0.1s ease-in-out, background-size 0.1s ease-in-out;
    -o-transition: height 0.1s ease-in-out, width 0.1s ease-in-out, background-size 0.1s ease-in-out;
    transition: height 0.1s ease-in-out, width 0.1s ease-in-out, background-size 0.1s ease-in-out;
    display: inline-block; }
  .header-bar a {
    border: none; }
    .header-bar a:not(:last-child) {
      margin-right: 15px; }

.content .banner {
  padding-top: 80px;
  background-color: #F6F6F6;
  background: linear-gradient(0deg, #7CB342, #AED581);
  padding-bottom: 10px; }
  .content .banner h1, .content .banner h3 {
    text-align: center;
    color: white; }
.content .section {
  width: calc(100% - 100px); }
  .content .section:not(.credits) {
    margin: 100px auto; }
  .content .section[id] {
    padding-top: 45px;
    margin-top: -45px; }

.home .banner .chart {
  height: 250px; }
  .home .banner .chart .container .overlay .tooltip-line {
    stroke: white; }
  .home .banner .chart .grid .tick > line {
    stroke: rgba(255, 255, 255, 0.3); }
  .home .banner .chart .axis > path {
    stroke: rgba(255, 255, 255, 0.3); }
  .home .banner .chart .axis > .tick > text {
    fill: white; }
  .home .banner .chart .axis > .tick > line {
    stroke: rgba(255, 255, 255, 0.3); }
.home .banner .chart-legend {
  display: none; }
.home .banner .tell-us {
  padding-top: 40px; }

.examples .header-bar .logo {
  height: 50px;
  width: 50px;
  background-size: 50px; }
.examples .banner .links {
  text-align: center; }
  .examples .banner .links .link {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    border: 1px solid white;
    border-radius: 10px;
    padding: 2px 10px; }
    .examples .banner .links .link:hover {
      border: 1px solid transparent;
      background-color: white; }
      .examples .banner .links .link:hover a {
        color: #7CB342; }
    .examples .banner .links .link a {
      border: none; }
.examples .example .codepen-form {
  display: inline-block;
  font-size: 0.6em; }
  .examples .example .codepen-form button {
    color: #BDBDBD; }
.examples .example .row .chart-container {
  padding-bottom: 20px; }
  .examples .example .row .chart-container .chart {
    height: 350px;
    padding-right: 20px; }
    .examples .example .row .chart-container .chart .container .overlay .tooltip-line {
      stroke: lightgrey; }
    .examples .example .row .chart-container .chart .grid .tick > line {
      stroke: rgba(0, 0, 0, 0.3); }
    .examples .example .row .chart-container .chart .axis > path {
      stroke: rgba(0, 0, 0, 0.3); }
    .examples .example .row .chart-container .chart .axis > .tick > text {
      fill: lightgrey; }
    .examples .example .row .chart-container .chart .axis > .tick > line {
      stroke: rgba(0, 0, 0, 0.3); }
.examples .example .row .options {
  padding-left: 20px;
  border-left: 5px solid lightgrey; }
  @media (max-width: 800px) {
    .examples .example .row .options {
      margin-top: 30px;
      border-left-width: 0px; } }

.docs .header-bar .logo {
  height: 50px;
  width: 50px;
  background-size: 50px; }
.docs .banner .links {
  text-align: center; }
  .docs .banner .links .link {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 2px 10px; }
    .docs .banner .links .link:hover {
      background-color: white; }
      .docs .banner .links .link:hover a {
        color: #7CB342; }
    .docs .banner .links .link a {
      border: none; }

.migration .header-bar .logo {
  height: 50px;
  width: 50px;
  background-size: 50px; }
.migration .banner .links {
  text-align: center; }
  .migration .banner .links .link {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 2px 10px; }
    .migration .banner .links .link:hover {
      background-color: white; }
      .migration .banner .links .link:hover a {
        color: #7CB342; }
    .migration .banner .links .link a {
      border: none; }

.credits {
  margin-bottom: 10px;
  font-size: 0.8em;
  font-weight: 100;
  text-align: center;
  padding-top: 10px;
  color: #BDBDBD; }