// styles in src/style directory are applied to the whole page

.navbar {
    background: rgba(255,255,255,0.95);
  }
  
  .bd-booticon {
    margin: 1.25rem;
    width: 256px;
    height: 256px;
  }
  
  .bd-masthead, .jumbotron {
    background-color: #0143A3;
    background: linear-gradient(135deg, #0143A3, #0273D4);
  }
  
  .bd-masthead {
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 4rem;
    text-align: center;
    color: #efefef;
  
    .lead {
      margin-right: auto;
      margin-bottom: 2rem;
      margin-left: auto;
      width: 80%;
      font-size: 2rem;
      color: #fff;
    }
  
    .btn {
      color: #fff;
      border-color: #fff;
      &:hover {
        background-color: #f7f7f7;
        color: #0273D4;
      }
    }
  }
  
  .jumbotron {
    color: #fff;
    border-radius: 0;
  }
  
  .github-buttons {
  
    header & {
      margin-bottom: 0;
      margin-top: 4px;
      padding-left: 0;
    }
  
    ngbd-default & {
      text-align: center;
      margin-top: 2rem;
    }
  }
  
  @media (min-width: 768px) {
    .bd-sidebar {
      padding-left: 1rem;
  
      display: inline-block;
      position: -webkit-sticky;
      position: sticky;
      top: 1rem;
    }
  }
  
  .bd-toc-link {
    display: block;
    padding: .25rem .75rem;
    color: #55595c;
  }
  
  .bd-toc-link:focus,
  .bd-toc-link:hover {
    color: #0275d8;
    text-decoration: none;
  }
  
  .active > .bd-toc-link {
    font-weight: 500;
    color: #373a3c;
  }
  
  .bd-toc-item.active {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  
  .bd-toc-item:first-child {
    margin-top: 0;
  }
  
  .bd-toc-item:last-child {
    margin-bottom: 2rem;
  }
  
  .bd-sidebar .nav > li > a {
    display: block;
    padding: .25rem .75rem;
    font-size: 90%;
    color: #99979c;
  }
  
  .bd-sidebar .nav > li > a:focus,
  .bd-sidebar .nav > li > a:hover {
    color: #0275d8;
    text-decoration: none;
    background-color: transparent;
  }
  
  .bd-sidebar .nav > .active:focus > a,
  .bd-sidebar .nav > .active:hover > a,
  .bd-sidebar .nav > .active > a {
    font-weight: 500;
    color: #373a3c;
    background-color: transparent;
  }
  
  div.api-doc-component {
    margin-bottom: 3rem;
  
    > h2, > h3 {
      .github-link {
        transition: opacity .5s;
        opacity: .3;
      }
  
      &:hover {
        .github-link {
          opacity: 1;
        }
        & > .title-fragment {
          opacity: 1;
        }
      }
    }
  
    section {
      margin-top: 3rem;
      h4 {
        margin-top: 2rem;
        margin-bottom: 1rem;
      }
  
      .meta {
        font-size: .8rem;
        margin-bottom: 1rem;
        > div {
          margin-bottom: .5rem;
        }
      }
    }
  }
  
  a.title-fragment {
    opacity: 0;
    transition: opacity 125ms ease;
    line-height: inherit;
    position: absolute;
    margin-left: -1.2em;
    padding-right: 0.5em;
  
    & > img {
      width: 1em;
      height: 1em;
    }
  }
  
  div.component-demo {
    margin-bottom: 3rem;
    h2 {
      margin-bottom: 1rem;
  
      .plunker {
        opacity: 0.3;
        transition: opacity .5s;
      }
      &:hover {
        .plunker {
          opacity: 1;
        }
      }
    }
  
    .tabset-code {
      .nav {
        margin: 0;
        padding: .5rem 1.25rem 0;
        font-size: 80%;
  
        .nav-link.active {
          background-color: #f5f2f0;
          border-bottom: 1px solid #f5f2f0;
        }
  
        .nav-link:not(.active) {
          color: #999;
          &:hover {
            color: #666;
          }
        }
      }
  
      .tab-content {
        overflow: hidden;
      }
  
      pre {
        margin: 0;
      }
    }
  }
  
  .examples-legend {
    font-size: 80%;
  }
  
  .bd-footer {
    padding: 3rem 0;
    margin-top: 3rem;
    font-size: 85%;
    background-color: #f7f7f7;
    text-align: left;
  
    p {
      margin-bottom: 0;
    }
  
    a {
      font-weight: 500;
      color: #55595c;
    }
  }
  
  ngbd-api-docs, ngbd-api-docs-class, ngbd-api-docs-config {
    display: block;
  
    &:not(:first-child) {
      margin-top: 3rem;
      border-top: 1px solid #999;
      padding-top: 1rem;
    }
  }
  
  
  
  // override prism theme background color to inline it with bootstrap colors
  code[class*="language-"],
  pre[class*="language-"] {
    background-color: #f5f5f5; // same as bootstrap card header
  }
  
  span.token.tag {
    font-size: 1em;
    padding: 0;
  }
  
  ngbd-component-wrapper, ngbd-page-wrapper {
    .jumbotron {
      border-radius: 0;
    }
  }
  
  .root-nav {
    $offset: 73px;
    > .nav-tabs {
      transform: translateY(-$offset);
  
      .nav-link:not(.active) {
        color: #f9f9f9;
      }
  
      .nav-link:not(.active):hover {
        background-color: rgba(255,255,255, 0.15);
        border-color: rgba(255,255,255, 0.15);
      }
    }
  
    > .tab-content {
      transform: translateY(-$offset / 2);
    }
  }
  
  @mixin center-nav-tab-on-small-screens() {
    .jumbotron > .container {
      margin-bottom: 2rem;
      h1 {
        text-align: center;
      }
    }
  
    .root-nav {
      ul {
        justify-content: center !important;
      }
    }
  }
  
  @media (max-width: 768px) and (orientation:portrait) {
    @include center-nav-tab-on-small-screens();
  }
  
  @media (max-width: 568px) and (max-height: 320px)  {
    @include center-nav-tab-on-small-screens();
  }