_styles_project.scss

@import "fonts_project.scss";
@import "content_project.scss";
@import "image-modal_project.scss";
@import "elements_project.scss";
@import "footer_project.scss";
@import "variables_project.scss";
@import "landing_project.scss";
@import "_navbar_project.scss";
@import "tax_project.scss";
@import "search_project.scss";
@import "_videos_project.scss";
@import "subscription.scss";
@import "rest-api-reference.scss";
@import "rest-api-interactive.scss";
@import "_video-landing_project.scss";
@import "elements_project";
@import "summary.scss";
@import "_kanvas-corner-popup.scss";

.navbar-dark {
  min-height: 5rem;
  padding: 0 5rem;
  border-bottom: 1px solid #333;
  background-color: $dark !important;

  .dropdown-menu {
    background-color: $dark;
    box-shadow: 0px 4px 20px 0px rgba(0, 211, 169, 0.2);

    .dropdown-item {
      color: $white;

      &:hover {
        background: $primary;
      }
    }

    .dropdown-divider {
      margin: 0;
      border-top: 1px solid $primary;
    }
  }
}

.nav-link.active {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to bottom,
      rgba($dark, 0.2) 30%,
      rgba($primary, 0.3) 60%,
      $primary 90% 100%) 1;
  padding-bottom: 0.3rem;
  align-items: center;
  justify-content: center;
  align-self: center;
  display: flex;
  align-content: center;
  padding: auto;
  margin: auto;
  // background-color: linear-gradient(to right, rgba($dark,.2) 30%, rgba($primary,.3) 60%, $primary 90% 100%) 1;
}

// Page Layout Sections
.td-home {
  background-color: $dark;
  overflow-x: hidden;
}

// .td-cover-block--height-full {
//   min-height: 90vh;

// }

//main sections
.td-outer {
  margin-top: 0;
}

.td-main main {
  @include media-breakpoint-up(md) {
    padding-top: 4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

body {
  overflow-x: hidden;
  padding-top: 5.5rem;
}

// Main Middle Body
.td-content {
  h2 {
    color: $casper;
  }

  // Inline code
  p code,
  li>code,
  table code {
    color: inherit;
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    word-break: normal;
    background-color: rgba($black, 0.05);
    border-radius: $border-radius;

    br {
      display: none;
    }
  }

  // Code blocks
  pre {
    word-wrap: normal;
    background-color: $gray-900;
    padding: $spacer;

    >code {
      background-color: inherit !important;
      padding: 0;
      margin: 0;
      font-size: 100%;
      word-break: normal;
      white-space: pre;
      border: 0;
    }
  }

  img,
  .md__image img,
  img.md-image-responsive {
    display: block;
    width: auto;
    max-width: clamp(320px, 100%, 700px);
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    box-sizing: border-box;
  }

  overflow-x: hidden;
}
.td-content .card img {
  width: 100% ;
}

// Links

a {
  color: $primary;
  text-decoration: none;
}

a:hover {
  color: $white;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

// Taxonomy
.article-meta-bg {
  background-color: $gray-900;
  padding: 0.5rem;
  padding-left: 1rem;
}

.taxonomy {
  // .taxonomy-terms-cloud

  .taxonomy-term {

    border-width: 0;
    border-radius: 0 3px 3px 0;
    display: inline-block;
    font-size: 1em;
    line-height: 1.5em;
    min-height: 1.5em;
    max-width: 100%;
    padding: 0 0.5em 0 1em;
    position: relative;
    margin: 0 0.5em 0.2em 0;
    text-decoration: none;
    transition: color 0.2s;
    clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);


    &:hover {
      background-color: $primary;
      color: $white;

    }

  }

  .article-teaser {
    &.card {
      padding: 1em;
      margin-bottom: 1.5em;
      background-color: $dark;
    }

    .breadcrumb {
      margin-bottom: 0em;
      font-size: 0.85rem;
    }

    .article-meta-bg {
      margin-bottom: 0em;
    }
  }
}

// Footer
.td-footer {
  background-color: $black;
  // bottom: 0%;
  z-index: 5;
}

.td-sidebar {
  background-image: linear-gradient(to top,
      #1e2117,
      #1d1912,
      #18120e,
      #0f0a09,
      #000000);
  position: sticky;
  height: calc(100vh - 5.5rem);
  top: 5.5rem;
  overflow-y: auto;
  padding-top: 1rem;
  margin-top: 0;
  overflow-x: hidden;
  &__inner {
    @include media-breakpoint-up(md) {
      @supports (position: sticky) {
        position: static;
      }
    }
  }
}

.td-sidebar #td-sidebar-menu,
.td-sidebar .td-sidebar__search {
  padding-top: 0;
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .td-sidebar {
    position: relative;
    height: auto;
    top: 0;
    padding-top: 0;
  }
}

// Left sidebar
.td-sidebar-nav {
  overflow: hidden;
  padding: 0px;

  &__section-title {
    a {
      color: $gray-400;
      font-weight: $font-weight-bold;
    }
  }

  .td-sidebar-link {
    &__page {
      color: $gray-400;
      font-weight: $font-weight-light;
    }

    &__section {
      margin-top: 1rem;
      font-family:
        "Qanelas Soft",
        sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
    }
  }

  a {
    &:hover {
      color: $white;
      text-decoration: none;
    }

    &.active:not(.tree-root) {
      border-width: 1px;
      border-style: solid;
      border-image: linear-gradient(to left,
          rgba($dark, 0) 30%,
          rgba($primary, 0.3) 60%,
          $primary 90% 100%) 1;
      background-image: linear-gradient(to left,
          rgba($dark, 0.2) 30%,
          rgba($primary, 0.3) 60%,
          $primary 90% 100%) 1;
      padding: 0.25rem;
      padding-left: 0.5rem !important;
      // background-image: linear-gradient(to left, rgba($dark,.33),rgba($dark,.5),rgba($dark,.75),#1e2117, #31412b, #3b6447, #378b6d, #00b39f);
      // background-color: rgba($primary, .05);
      color: $secondary;
    }

    &.active.tree-root {
      border: 2px solid $lightslategray !important;
      padding: 0.25rem;
      padding-left: 0.5rem !important;
      background-color: rgba($lightslategray, 0.1);
      color: $white;
    }
  }
}

// Right sidebar
.td-sidebar-toc {
  margin-top: 0rem;
  line-height: 1.25rem;
  border-left: 1px solid $border-color;
  background-image: linear-gradient(to top,
      #1e2117,
      #1d1912,
      #18120e,
      #0f0a09,
      #000000);

  @supports (position: sticky) {
    position: sticky;
    top: 5.5rem;
    padding-top: 1rem;
    height: calc(100vh - 5.5rem);
    overflow-y: auto;
  }

  .taxo-categories {
    margin-top: 2rem;
  }
}

.td-page-meta {
  a {
    display: block;
    color: $gray-400;
    line-height: 1.65rem;
    font-weight: $font-weight-medium;

    &:hover {
      color: $white;
      text-decoration: none;
    }
  }

  .td-page-meta--project-issue {
    visibility: hidden;
  }
}

.td-toc {
  margin-top: 2rem;

  #TableOfContents {
    a {
      color: $lightslategray;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      transition: background-color 0.2s ease, color 0.2s ease;

      &:hover,
      &:focus-visible {
        color: $white;
        text-decoration: none;
        background-color: rgba($primary, 0.15);
      }
    }
  }
}

// pageinfo
.pageinfo {
  font-weight: $font-weight-medium;
  background: $black;
  font-family: "Open Sans";
  border-style: solid;
  border-color: #00b39f;
}

// front-matter
.matterinfo {
  font-weight: $font-weight-medium;
  background: $black;
  font-family: "Qanelas Soft";
  border-color: #00b39f;
  border-radius: 10px;
}

.heading {
  font-size: 1.2rem;
  color: #00b39f;
}

.matterheader {
  font-size: 1.2rem;
  color: $casper;
}

.matterinfo .plan-support {
  padding: .5rem;
  border: .5px solid $border-color;
  display: flex;
  align-items: center;
  color: $casper;
  &:hover {
    background-color: rgba($primary, 0.3)
  }
}

.matterinfo .plan-support .support-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.plan-icon {
  display: inline-block;
}

.tier {
  font-weight: bold;
  padding: 0 5px;
  color: $casper;
}


// Style alert boxes.

.alert {
  font-weight: $font-weight-medium;
  background: $gray-900;
  color: inherit;
  border-radius: 0;

  &.alert-custom {
    background-color: $gray-900;
    border-style: solid;
    border-width: 0 0 0 4px;
  }
}

// Dashboard

.l5btn {
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 4px solid rgba(0, 179, 159, 0.4);
  background: #000;
  color: $white;
  transition: color 0.8s;
  transition: background-color 0.8s;

  >img {
    width: 2rem;
    margin-right: 0.5rem;
  }

  >img:hover {
    filter: brightness(0) invert(1);
  }

  @media (max-width: 768px) {
    width: 277px;
  }
}

.td-content figure,
.td-content figure {
  width: max-content;
  max-width: clamp(320px, 100%, 700px);
  margin: 0 auto 2rem auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.td-content figure > img {
  width: auto;
  max-width: 100%;
  border-radius: .5rem .5rem 0 0;
  box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4);
  transition: box-shadow 0.2s;
}

.td-content figure > figcaption {
  width: 100%;
  text-align: center;
  padding: 0.5rem 1rem;
  background-color: rgba($lightslategray, 1);
  color: $dark;
  border-radius: 0 0 .5rem .5rem;
  box-sizing: border-box;
}

.dashboard {
  font-weight: 800;
  margin-bottom: 4rem;
  font-size: 5rem;
  text-align: left;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, .9) 0px, rgb(0, 211, 169) 34%, rgb(235, 192, 23) 71%, rgb(255,243,197) 100%);
  background-position:
    0% 0%,
    0% 0%;
  background-size: 200%;
  box-sizing: auto;
  color: transparent;
  display: block;
  text-rendering: optimizelegibility;
  background-clip: text;
  -webkit-background-clip: text;
  animation: color-shift 8s linear infinite;

  @media (max-width: 768px) {
    font-size: 4rem;
  }

  @media (max-width: 768px) {
    font-size: 3rem;
    text-align: center;
  }
}

@keyframes color-shift {
  to {
    background-position: -200%;
  }
}


.dash-tangle {
  width: 78.14231rem;
  height: 74.72rem;
  transform: rotate(-55.68deg);
  flex-shrink: 0;
  overflow: hidden;
  background-image: linear-gradient(180deg,
      rgba(0, 179, 115, 0) 0%,
      rgba(0, 179, 159, 0.3) 100%);
  position: absolute;
  top: -18rem;
  right: -32rem;
  z-index: -5;
  background-clip: content-box;
  -webkit-background-clip: padding-box;

  @media (max-width: 1440px) {
    top: -5rem;
    right: -28rem;
    position: fixed;
  }

  @media (max-width: 768px) {
    width: 129.14rem;
    top: 7rem;
    right: -70rem;
    position: fixed;
  }
}

.dash-ircle-container {
  height: calc(74.125rem - 8rem);
  position: absolute;
  top: 8rem;
  left: -24rem;
  overflow: hidden;

  >.dash-ircle {
    width: 74.125rem;
    height: 74.125rem;
    flex-shrink: 0;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(0, 179, 159, 0.2) 0%,
        rgba(0, 179, 159, 0) 100%);
    position: absolute;
    overflow: hidden;
    background-clip: border-box;

    z-index: -5;
  }
}

@keyframes tipsy {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }

  100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}

.dash-sign-container {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  text-align: right;

  h1.dashboard {
    max-width: 70%;        
    text-align: left;
    flex-shrink: 0;
    @media (max-width: 768px) {
      max-width: 60%;
    }
  }

  @media (max-width: 768px) {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;

    h1.dashboard {
      max-width: 100%;
      text-align: center;
    }
  }

  a.dash-sign {
    color: #fffbf1;
    text-shadow:
      0 20px 25px #2e2e31,
      0 40px 60px #2e2e31;
    font-size: 28px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0px;
    position: relative;
    width: auto;
    white-space: nowrap;
    padding: 2rem;
    margin: 0;
    transform: translateX(0%) translateY(0%);

    &:hover {
      color: #EBC017;
    }

    @media (max-width: 768px) {
      margin: 2rem 0 0 0;
    }
  }

  a.dash-sign:before,
  a.dash-sign:after {
    content: "";
    padding: 0.9em 0.4em;
    position: absolute;
    left: 50%;
    width: 100%;
    top: 50%;
    display: block;
    border: 8px solid $primary;
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    animation: 6s alternate ease-in-out tipsy;
  }

  a.dash-sign:before {
    border-color: $primary $secondary rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    z-index: -1;
  }

  a.dash-sign:after {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) $primary $secondary;
    box-shadow: 25px 25px 25px rgba(46, 46, 49, 0.8);
  }

  a.dash-sign:visited {
    color: $white;
  }

  a.dash-sign:hover {
    color: #ebc017;
  }
}

// Cards
.card {
  background-color: $dark;
}

.card-header {
  font-weight: bold;
  font-size: larger;
}

.card-header .bg-white {
  background-color: $dark;
}

.bg-dark {
  background-color: $dark;
}

.sc-imWYAI.sc-fTFjTM.dCEJze.hRziAa {
  color: red;
}

.click-to-copy button {
  aspect-ratio: 1;
  top: 6px !important;
  right: 10px !important;
  color: $lightslategray !important;
  background-color: $dark !important;

  &:hover {
    color: $body-color !important;
  }
}

.tooltip .tooltip-inner {
  background-color: $dark;
  color: $body-color;
}

.nav-tabs {
  border: none;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.nav-tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.nav-tabs .nav-item {
  margin-bottom: 0;
  margin-right: 0;
}

.nav-tabs .nav-link {
  position: relative;
  border: 1px solid transparent;
  border-bottom: 1px solid $lightslategray;
  border-radius: 5px 5px 0 0;
  color: $primary;
  padding: 0.6rem 1.2rem;
  white-space: nowrap;
}

.nav-tabs .nav-link:not(.active):hover {
  background-color: lighten($dark, 10%);
  color: lighten($primary, 15%);
  border-bottom-color: lighten($lightslategray, 20%);
}

.nav-tabs .nav-link.active {
  background-color: $body-bg;
  color: $primary;
  font-weight: 500;
  border-color: $lightslategray $lightslategray;
  border-bottom: 1px solid $body-bg;
  z-index: 1;
}

.tab-content .tab-pane {
  border: 1px solid $lightslategray;
  margin-top: -1px;
  padding: 1.5rem;
  border-radius: 0 0 5px 5px;
  background-color: $body-bg;
}

html {
  scroll-padding-top: 5rem;
  scroll-behavior: smooth;
}

// Max-width constraint for large screens to prevent layout stretch
@media (min-width: $site-max-width) {
  .td-navbar {
    > .container-fluid {
      max-width: $site-max-width;
      margin-left: auto;
      margin-right: auto;
    }
  }

  .container-fluid.td-outer {
    > .td-main {
      max-width: $site-max-width;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 1rem;
}

@media (max-width: 767px) {
  .td-navbar {
    top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  body {
    padding-top: 0;
  }
}