_styles_project.scss

/*

Add styles or override variables from the theme here.

*/

/* START Add Square bracket on footnote number */
a.footnote-ref::before {
  content: "[";
}
a.footnote-ref::after {
  content: "]";
}
/* END Add Square bracket on footnote number */

div.footnotes > ol > li,
div.footnotes > ol > li > p {
  font-size: 0.75rem !important;
}

/* START MARKETING CSS */
/* START Adjust Heading sizes*/

.td-navbar {
  background-color: white !important;
}

/* This ensures there is no padding added to the top logo bar */
.td-navbar .td-navbar-nav-scroll {
  height: unset;
}

.td-navbar .td-navbar-nav-scroll .navbar-nav {
  padding-bottom: unset;
}

.td-navbar .navbar-brand {
  font-family:
    Space Mono,
    sans-serif;
  font-size: 0.833rem;
  line-height: 1.667em;
  letter-spacing: 0.1875rem;
  padding: 5px 8px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  a {
    color: #7a7c80;
  }
}

.navbar-brand .navbar-logo span {
  border-left: 1px solid #e4e4e6;
  margin-left: 0.5rem;
}

.td-navbar .navbar-brand span:last-child {
  vertical-align: middle;
}

#main_navbar {
  display: flex;
  flex-direction: row;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover {
  color: #282829;
}

.td-navbar .navbar-brand svg {
  height: 16px;
  margin: 0;
}

.td-navbar .nav-link {
  font-family:
    Space Mono,
    sans-serif;
  font-weight: 400;
  font-size: 0.833rem;
  line-height: 1.667em;
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  text-decoration: none;
}

h1,
.h1 {
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 2.625rem; // 32pt
  margin-left: 0px;
  font-weight: 500;
  color: #282829;
}

h2,
.h2 {
  font-family:
    Public sans,
    sans-serif;
  font-size: 1.25rem !important; // 20px
  font-weight: 500;
  clear: both;
}

html {
  scroll-padding-top: 2rem;
}

.td-content {
  min-height: 92%;
  max-width: 1000px;
}

.frontpage > h2 {
  margin-top: 1rem;
}

h3,
.h3 {
  font-family:
    space grotesk,
    sans-serif;
  font-size: 1.1667rem !important; // 20pt
  font-weight: 400;
  clear: both;
}

h4,
.h4 {
  font-family:
    space grotesk,
    sans-serif;
  font-size: 1rem !important; // 16pt
  line-height: 1.4375em;
  clear: both;
}

h5,
.h5 {
  font-family:
    space grotesk,
    sans-serif;
  font-size: 0.933rem !important; // 14pt
  clear: both;
}

h6,
.h6 {
  font-size: 0.933rem !important;
  line-height: 1.0625rem; // 12pt
  clear: both;
}

h7,
.h7 {
  font-size: 0.833rem !important;
  line-height: 1.0625rem;
  font-weight: 400;
  font-style: italic;
  clear: both;
}

.td-content > h3 {
  margin-bottom: 0.667rem;
  margin-top: 1.5rem;
}

// The float:left on ol > li::before creates floats that escape the ol's
// block formatting context. Since h3 has clear:both, it clears past those
// floats, creating an oversized gap. flow-root contains the floats in
// the ol's own BFC so they don't affect adjacent elements.
// Zero the last li's margin-bottom because flow-root prevents it from
// collapsing with the ol's margin, which would add unwanted extra space.
.td-content > ol {
  display: flow-root;
}
.td-content > ol > li:last-child {
  margin-bottom: 0;
}

/* END Adjust Heading sizes*/

// Navigation side bar

.td-sidebar {
  /* NAV Panel changes */
  background-color: #ffffff;
}

// TABLE OF CONTENT CHANGES

.td-toc ul li {
  border-left: 2px solid #e4e4e6;
  padding-left: 16px;
  height: fit-content;
}

.td-toc ul li.is-active-li {
  border-left: 2px solid #666666;
}

// .td-toc ul li.toc-active {
//   border-left: 2px solid #666666;
// }

.toc-list,
.td-toc ul ul {
  padding-inline-start: 0;
}

.td-toc ul li ul li {
  margin-left: -18px;
  padding-left: 32px;
  height: fit-content;
  // border can get applied twice - this fixes that.
  border-left: 2px;
}

.td-toc nav ul li ul li {
  border-left: 2px solid #666666;
}

.td-toc ul li a {
  font-size: 0.833rem;
  color: #7a7c80;
  text-decoration: none;
}

.td-toc ul li li a {
  font-size: 0.833rem;
  font-weight: 400;
  color: #666666;
}

.td-sidebar-toc {
  top: 6rem;
  border-left: unset;
  height: calc(100vh - 10rem);
}

// Breadcrumb styling

.breadcrumb {
  font-size: 1rem;
  a {
    text-decoration: none;
  }
}

.breadcrumb-item,
.breadcrumb-item a {
  color: #4e4f52;
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.5rem;
  color: #4e4f52;
  content: ">>";
}

// Link styling

a,
a:hover {
  color: #0000ea;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  h7,
  p {
    color: #4e4f52;
  }
}

a > code {
  color: #0000ea !important;
}

.td-toc #TableOfContents ul li li a > code {
  color: #666666 !important;
}

.td-toc #TableOfContents ul li a > code {
  color: #7a7c80 !important;
}

#TableOfContents ul li ul {
  padding: 0;
}

#TableOfContents ul li ul.is-collapsed {
  display: none;
}

@media (max-width: 665px) {
  file {
    word-break: break-all !important;
  }
}

p,
li {
  color: #000000;
  a {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
}

/* Add margin in front of breadcrumbs on small screens */
@media (max-width: 768px) {
  .td-main main {
    margin-top: 0.5rem;
  }
}

.td-content.tutorials {
  max-width: 1200px;
}

footer.tutorials {
  max-width: 1200px;
}

// START FOOTER STYLING

footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  max-width: 1000px;
}

footer a {
  color: #fff !important;
}

/* sets the footer to black. */
.bg-dark {
  background-color: white !important;
}

footer * small {
  color: black;
}

.text-white,
footer a {
  color: black !important;
}

/* START no whitespace beneath footer */

body footer {
  line-height: 1;
}

footer small {
  line-height: 1.5;
}

/* END no whitespace beneath footer */

// END FOOTER STYLING

// Ensure lists indent properly next to images
.td-content > ul,
.td-content * ul {
  list-style-position: outside;
}

.td-content > ul > li > p {
  display: inline;
}

/* sets the base font heavier than the theme. */
.td-content p,
.td-content li,
.td-content td {
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-weight: normal;
  font-size: 0.938rem !important;
  line-height: 1.625rem !important;
}

/*
END MARKETING CSS
*/

/* START VIDEO SHORTCODE STYLES https://roneo.org/en/hugo-create-a-shortcode-for-local-videos/*/
/* Added margins, changed Preload to 600px. The default was 100% */

.td-content > .video-shortcode,
.video-shortcode {
  margin: 12px 0 12px 0;
  border: solid 1px;
  max-width: 100%;
  width: 600px;
  height: auto;
}

.td-content > .video-shortcode.aligncenter,
.video-shortcode.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* START VIDEO SHORTCODE STYLES https://roneo.org/en/hugo-create-a-shortcode-for-local-videos/ */

.primary-color {
  color: var(--primary-color);
}
.bg-primary-color {
  background-color: var(--primary-color);
}
.hover-bg-primary-color:hover {
  background-color: var(--primary-color);
}

.primary-color-dark {
  color: var(--primary-color-dark);
}
.bg-primary-color-dark {
  background-color: var(--primary-color-dark);
}
.hover-bg-primary-color-dark:hover {
  background-color: var(--primary-color-dark);
}

.primary-color-light {
  color: var(--primary-color-light);
}
.bg-primary-color-light {
  background-color: var(--primary-color-light);
}
.hover-bg-primary-color-light:hover {
  background-color: var(--primary-color-light);
}

.accent-color {
  color: var(--accent-color);
}
.bg-accent-color {
  background-color: var(--accent-color);
}
.hover-bg-accent-color:hover {
  background-color: var(--accent-color);
}

.accent-color-light {
  color: var(--accent-color-light);
}
.hover-accent-color-light:hover {
  color: var(--accent-color-light);
}
.bg-accent-color-light {
  background-color: var(--accent-color-light);
}
.hover-bg-accent-color-light:hover {
  background-color: var(--accent-color-light);
}

.accent-color-dark {
  color: var(--accent-color-dark);
}
.bg-accent-color-dark {
  background-color: var(--accent-color-dark);
}
.hover-bg-accent-color-dark:hover {
  background-color: var(--accent-color-dark);
}

.text-color-primary {
  color: var(--text-color-primary);
}
.text-on-primary-color {
  color: var(--text-on-primary-color);
}
.text-color-secondary {
  color: var(--text-color-secondary);
}
.text-color-disabled {
  color: var(--text-color-disabled);
}
.divider-color {
  color: var(--divider-color);
}
.warn-color {
  color: var(--warn-color);
}

.nested-links a {
  color: var(--primary-color);
  text-decoration: none;
}

/* START CSS FOR NOTES, CAUTIONS, WARNINGS */

// Style alert boxes.

.alert {
  font-weight: $font-weight-medium;
  background-color: whitesmoke;
  color: black;
  border: 1px solid black;
  margin-right: 5px;
  padding: 1rem 1.25rem;
  border-radius: 4px;

  @each $color, $value in $theme-colors {
    &-#{$color} {
      & .alert-heading {
        color: $value;
      }
    }
  }
  p {
    color: black;
  }
}

.alert > ul:last-child,
.alert > p:last-child {
  margin-bottom: 0 !important;
}

.td-content .alert:not(:first-child) {
  margin-top: 37px;
  margin-bottom: 1.5rem;
  clear: both;
}

.alert-heading {
  // left margin for h4 in alerts
  margin-left: 0;
  letter-spacing: 0.0625em;
}
.alert-heading::after {
  // blocks display h4 rules in alerts
  content: " ";
  display: none;
}

.note,
.caution,
.warning {
  border-left-width: 4px;
  border-left-style: solid;
  position: relative;
  border-color: var(--primary-color);
  display: block;
}
.note #exclamation-icon,
.caution #exclamation-icon,
.warning #exclamation-icon {
  fill: var(--primary-color);
  position: absolute;
  top: 35%;
  left: -12px;
}

.admonition-content {
  display: block;
  margin: 0px;
  padding: 0.125em 1em;
  margin-top: 2em;
  margin-bottom: 2em;
  overflow-x: auto;
  background-color: var(--black-05);
}

.alert a {
  text-decoration: none;
}

.alert a:hover {
  text-decoration: underline;
}

.alert.alert-warning {
  border-color: red;
  background-color: rgb(249, 237, 234);
}
.alert.alert-note,
.alert.alert-info {
  border-color: #e4e4e6;
  background-color: #fbfbfc;
}
.alert.alert-caution {
  border-color: #f0b93f;
  background-color: rgb(252, 244, 225);
}
.alert.alert-tip {
  border-color: #e4e4e6;
  background-color: rgb(229, 249, 228);
}

// Overwrite default
.alert-info .alert-heading {
  color: black;
}

/* END CSS FOR NOTES, CAUTIONS, WARNINGS */

/* START CSS FOR EXPANDER */

.expand-label {
  color: #4e4f52;
  font-weight: 300;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  padding: 0.5rem 1rem 0.5rem 1rem;
  i {
    font-size: inherit !important;
  }
  display: flex;
  justify-content: space-between;
}

.expand-label span h5 {
  display: inline;
  font-family:
    Public Sans,
    system-ui;
  font-size: 0.938rem !important;
  font-weight: 300;
}

details[open] > .expand-label {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.expand-content {
  border-top: #d9d9d9 solid 0px;
  border-left: #d9d9d9 solid 1px;
  border-right: #d9d9d9 solid 1px;
  border-bottom: #d9d9d9 solid 1px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 1rem 1rem;
  overflow: auto;
}

// First child is the anchor link
details > div.expand-content *:nth-child(2) {
  margin-top: 0rem;
}

// First child is the anchor link
details > div.expand-content > *:last-child {
  margin-bottom: 0rem;
}

.expand {
  clear: both;
  margin-bottom: 0.75rem;
  margin-top: 0.75rem;
}

.expand i {
  font-size: x-small;
  margin-right: 0.3rem;
  min-width: 16px;
}

.expand-content ol li p {
  margin-bottom: 0;
}

// Expander styling

details * i.fa-chevron-down {
  display: none;
}

details * i.fa-chevron-right {
  display: unset;
}

details * i {
  -webkit-text-stroke: 1px whitesmoke;
}

details[open] * i.fa-chevron-down {
  display: unset;
}
details[open] * i.fa-chevron-right {
  display: none;
}

details summary::-webkit-details-marker {
  display: none;
}

.center-text {
  text-align: center;
}

// Expander anchor styling START
.expander-anchor {
  display: block;
  position: relative;
  top: -130px;
  visibility: hidden;
}

.expand-link-icon {
  float: right;
  visibility: hidden;
}

.expand .expand-label:hover .expand-link-icon {
  color: blue;
  visibility: visible;
}

// Expander anchor styling END

/* END CSS FOR EXPANDER */

/* START CSS for how-to paths */

.expand.howtoexpand {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.expand.howtoexpand summary,
.expand.howtoexpand .expand-content {
  background-color: #eaf9fb;
}

.expand.howtoexpand.light summary,
.expand.howtoexpand.light .expand-content {
  background-color: rgba(200, 249, 183, 1) !important;
}

.expand.howtoexpand.middle summary,
.expand.howtoexpand.middle .expand-content {
  background-color: rgba(189, 234, 196, 1) !important;
}

.expand.howtoexpand.dark summary,
.expand.howtoexpand.dark .expand-content {
  background-color: rgba(163, 203, 178, 1) !important;
}

.howtoexpand .expand-label {
  padding-top: 1rem;
  padding-bottom: 0;
}

.howtoexpand .expand-label > span > div {
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

details.howtoexpand > div.expand-content *:nth-child(2) {
  margin-top: 0.8rem;
}

.howtoexpand .expand-label > span > div > div {
  padding-right: 14px;
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5rem;
}

.howtoexpand .expand-label > span > div > div > div {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

.howtoexpand .expand-label i {
  margin-right: 0.3rem;
  min-width: 16px;
  line-height: 1.4375em;
  margin-top: 4px;
}

.howtoexpand .expand-label h4 {
  margin-bottom: unset;
  align-content: end;
}

.howtoexpand .expand-content {
  padding-top: 0;
  padding-bottom: 0;
}

.howtoexpand .expand-content .card-container {
  margin-bottom: 1rem;
}

@media (min-width: 691px) {
  .max-page
    .howtoexpand
    > .expand-content
    > .card-container
    > div
    > .hover-card {
    max-width: 280px !important;
  }
  .search-panel__results.guides > #hits .hover-card {
    max-width: 280px !important;
  }
}

[open].howtoexpand .expand-label {
  border-bottom: unset;
}

.howtoexpand .hover-card a {
  background-color: #fff;
}

.howtoexpand #tasks {
  font-size: 0.93rem !important;
}

.howtoexpand .hover-card {
  margin: 0.8rem;
}

/* END CSS for how-to paths */

/* card styling START*/

.hover-card {
  display: flex;
  margin: 1rem;
  padding: 0;
}

.card-container {
  margin-bottom: 2rem;
}

// Hover animations and colors

.hover-card > a,
.hover-card > .hovercardcontainer {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 1rem;
  margin: 0px;
  transition: all 0.2s;
  width: 100%;
}

.hover-card.link-with-icon {
  margin: 0.5rem 1rem;
}

.hover-card.link-with-icon > a,
.hover-card.link-with-ico > .hovercardcontainer {
  padding: 0.5rem 1rem;
}

.hover-card:hover > a,
.hover-card:hover > .hovercardcontainer {
  -webkit-transform: translate(-3px, -3px);
  -ms-transform: translate(-3px, -3px);
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 0 #dee2e6;
}

.hover-card.yellow:hover > a {
  box-shadow: 5px 5px 0 0 #ffd400;
}
.hover-card.green:hover > a {
  box-shadow: 5px 5px 0 0 #00ef83;
}
.hover-card.purple:hover > a {
  box-shadow: 5px 5px 0 0 #a51aff;
}
.hover-card.teal:hover > a {
  box-shadow: 5px 5px 0 0 #00e8e8;
}
.hover-card.pink:hover > a {
  box-shadow: 5px 5px 0 0 #ff79ff;
}

// images in hover cards at the top have a margin before text
.hover-card a > .hover-card-img,
.hover-card a > .hover-card-icon {
  margin-bottom: 1rem;
}

// Adjust font size

.hover-card a div > div,
.hover-card div > div {
  font-family:
    space grotesk,
    sans-serif;
  font-size: 1.24rem !important;
  font-weight: 450;
  line-height: 1.4375em;
  color: black;
}

.hover-card a > div {
  color: black;
}

.hover-card div > div {
  margin-bottom: 0.5rem;
}

.hover-card a > div > p {
  margin-bottom: 0rem;
}

.hover-card.link-with-icon a > div > p {
  align-content: center;
}

// adjust for cards that only have a link and an icon

.hover-card.link-with-icon a {
  width: 100%;
}

.hover-card.link-with-icon a > div {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.hover-card.link-with-icon * picture {
  width: 45px;
  height: 45px;
  margin-right: 1em;
}

.hover-card.link-with-icon * img {
  aspect-ratio: unset;
  margin: unset;
  object-fit: fill;
  min-width: 45px;
  width: 45px;
  height: 45px;
  border: unset;
}

// For some reason video elements don't calculate the height correctly. This adjusts for that.
.hover-card-video {
  border: 1px solid white;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.hover-card.landing .hover-card-img {
  padding-bottom: 7px;
}

.hover-card * img,
.hover-card * video {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 0 !important;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
}

.fit-contain.hover-card * img,
.fit-contain.hover-card * video {
  object-fit: contain;
}

.hover-card * img.fill {
  object-fit: fill;
}

.hover-card * .hover-card-icon * img {
  object-fit: contain;
}

// Sizes and types

// Tiny hover card with only title which stays similarly formatted on mobile

@media (max-width: 650px) {
  .hover-card.small {
    min-width: 125px;
    max-width: 28%;
    min-width: 150px;
    max-width: 150px;
  }
}

// Outside media query - applies at larger screen sizes too
.hover-card.small > a div.small-hover-card-div > div {
  font-size: 0.95rem !important;
}

.hover-card.small {
  padding: 0.5rem;
  margin: 0.5rem;
  min-width: 150px;
  max-width: 150px;
}

.hover-card.small a {
  flex-direction: column;
}

.hover-card.small a:hover,
li .hover-card a:hover {
  text-decoration: none;
}

.hover-card.small a > .hover-card-img {
  padding-right: 0;
  max-width: 100%;
}

.hover-card.small * img {
  object-fit: contain;
}

.hover-card.small a div.small-hover-card-div {
  margin-top: 0.5rem;
  width: 100%;
  text-align: center;
}

.hover-card.small a div.small-hover-card-div .title {
  font-size: 1.125rem;
}

// Hover card which turns into a small one on mobile with image on the left

@media (min-width: 650px) {
  .hover-card {
    min-width: 250px;
    max-width: 250px;
  }

  a {
    display: unset;
  }
}

// Hover card which stays similarly formatted on mobile

.hover-card.landing {
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-width: 280px;
  max-width: 400px;
}

// TUTORIAL CARD STYLING START

.hover-card.tutorial {
  background-color: white;
  margin: 1rem 0.8rem 1rem 0.2rem;
}

.hover-card.tutorial > a {
  width: 100%;
  text-decoration: none;
}

// Text is black
.hover-card.tutorial * .small-hover-card-div {
  color: black;
}

.hover-card.tutorial a * img {
  margin-bottom: 0;
}

@media (max-width: 650px) {
  // at least two cards fit next to one another
  .hover-card.tutorial a > video {
    margin-bottom: 0;
  }

  .hover-card {
    // only one card
    min-width: 92%;
    width: 92%;
    max-width: 92%;
  }

  .hover-card > a {
    display: flex;
    padding-right: 1rem;

    .hover-card-video,
    .hover-card-img {
      max-width: 50%;
      min-width: 50%;
      margin: 0 1rem 1rem 0;
      margin: auto;
      padding-right: 1rem;
      display: flex;
      flex: 1;
    }

    .hover-card-video > div {
      margin-bottom: -6px;
    }

    .hover-card-icon {
      max-width: 30%;
      min-width: 30%;
      margin: 0 1rem 1rem 0;
      margin: auto;
      padding-right: 1rem;

      img {
        margin-bottom: 0;
      }
    }

    div.small-hover-card-div {
      min-width: 50%;
    }

    p {
      margin-bottom: 0;
    }
  }
}

// label styling in tutorials START

.hover-card.tutorial * .title {
  margin-bottom: 0.5rem !important;
}

.hover-card * .pills {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.hover-card * .pill {
  background-color: whitesmoke;
  padding: 0.1rem 0.25rem;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  margin: 0.1rem;
  font-size: 0.833rem !important;
  font-weight: 400 !important;
}

.hover-card * .pills > .pill.pill-highlight {
  background-color: #000;
  color: white;
}

.hover-card * .pill.pill-lang {
  border-color: #00e8e8;
}

.hover-card * .pill.pill-component {
  border-color: #a51aff;
}

// label styling in tutorials END

.hover-card.tutorial a {
  display: flex;
  flex-direction: column;
}

@media (max-width: 650px) {
  .hover-card.tutorial a {
    display: flex;
    flex-direction: row;
  }
}

.hover-card.tutorial * .small-hover-card-div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.robot-cost {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: end;
  display: none;
}

.robot-cost > .key {
  min-width: 50px;
  color: #666666;
  margin-right: 0.3rem;
}

// TUTORIAL CARD STYLING END

// fit either all 4 cards, 2 by 2 or each card individually START

// Between 1200 - 1650 we need to restrict the container to 850px to ensure
// the cards go into 2 x 2 formation
@media (min-width: 1200px) {
  div .cards.max-page {
    max-width: 850px !important;
  }
}

@media (min-width: 1651px) {
  div .cards.max-page {
    max-width: 95% !important;
  }
}

// fit either all 4 cards, 2 by 2 or each card individually END

/* card styling END */

.nav-link {
  text-decoration: none;
}

/* CSS to ensure lists within columns of markdown aren't indented START */

td > ul,
td > ol {
  padding-inline-start: 1.5em;
}

/* CSS to ensure lists within columns of markdown aren't indented END */

/* TAB CSS consistency START */

.nav.nav-tabs {
  border-bottom: none; // unset from inherited styles
  gap: 1px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e4e4e6;
  margin-left: 0rem;
}

.horizontalheaders > .nav-tabs,
.horizontalheaders * .nav-tabs {
  justify-content: unset;
  gap: 0px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
  border-bottom: 1px solid #000000;
  font-weight: 600;
}

.horizontalheaders > .nav-tabs,
.horizontalheaders * .nav-tabs {
  background-color: rgb(247, 247, 248);
}

.horizontalheaders > .nav-tabs * .nav-link {
}

.horizontalheaders > .nav-tabs .nav-link:hover {
  background-color: #d7d7d9;
}

.horizontalheaders * .nav-tabs .nav-link.active,
.horizontalheaders * .nav-tabs .nav-link.active:hover {
  border-top: unset;
  border-bottom: 1px solid #f7f7f8;
}

.nav-tabs .nav-link,
.nav-tabs .nav-link:hover {
  border: 0px;
  border-style: solid;
  border-radius: 0;
  padding: 0.25rem 0 0.25rem 0;
  margin-right: 2rem;
  color: #7a7c80;
}

.horizontalheaders .nav-tabs .nav-link,
.horizontalheaders .nav-tabs .nav-link:hover {
  padding: 0.5rem 1rem;
  margin-right: 0;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:hover {
  background-color: inherit !important;
}

.horizontalheaders * .nav-tabs .nav-link,
.horizontalheaders * .nav-tabs .nav-link:hover {
  border-top: unset;
  background-color: rgb(247, 247, 248);
  border-left: 1px solid rgb(209, 213, 219);
  border-bottom: 1px solid rgb(209, 213, 219);
  border-right: 1px solid rgb(209, 213, 219);
}

.horizontalheaders * .nav-tabs > .nav-item,
.horizontalheaders > .nav-tabs > .nav-item {
  margin-bottom: 0rem;
  margin-left: 0rem;
}

.horizontalheaders > .nav-tabs .nav-item > a {
  text-align: unset;
}

.nav-tabs .nav-item > a {
  text-align: center;
  min-width: 2rem;
}

.td-content ol li.nav-item {
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

.tab-content {
  padding: 0.7rem 0;
  background-color: white;
  border-bottom: 1px solid rgb(215, 215, 217);
  max-width: 1000px;
}

.horizontalheaders * .tab-content,
.horizontalheaders > .tab-content {
  border: 1px solid rgb(215, 215, 217);
  border-radius: 4px;
}

/* TAB CSS consistency END */

/* scroll to top and github styling START */

.docsbutton {
  border: 1px solid #e4e4e6;
  border-radius: 4px !important;
  color: black;
  border-radius: 0;
  background-color: #fbfbfc;
  margin: 0.5rem;
  padding: 1rem 1.25rem;
  i {
    color: black;
  }
}

#navsearch > #chatButtonTop {
  padding: 0.125rem 0.75rem;
  margin: 0px;
  margin-right: 1rem;
  height: 40px;
  background-color: black;
  color: white;
  min-width: 70px;
}

#navsearch > #appButton {
  padding: 0.125rem 0.75rem;
  margin: 0px;
  color: #282829;
}

#navsearch > #appButton a {
  color: #282829;
}

#navsearch > #appButton > span > span > i {
  color: #9c9ca4;
}

#navSearchBar {
  margin: 0px;
  min-width: 300px;
  max-width: 300px;
  width: 300px;
}

#scrollButton,
#chatButton {
  position: sticky;
  left: 100%;
  bottom: 1rem;
  border-radius: 0;
  height: 60px;
  width: 60px;
  opacity: 1;
  transition: opacity 0.5s;
  background-color: #fbfbfc;
  color: black;
}

#scrollButton > i,
#chatButton > i {
  color: black;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(5deg);
  }
  95% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#chatButton {
  padding: 6px;
  width: 120px;
  animation: linear 2s wiggle 2s 2;
}

#chatButtonContent {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  i {
    color: white;
  }
}

#edit-on-github,
#rss-feed {
  float: right;
  a {
    color: #515151;
  }
}

/* scroll to top and github styling END */

/* cookie consent message START*/
.alert.cookieconsent-optout-marketing {
  border-color: #a51aff;
  display: block;
}

.embed-responsive.embed-responsive-16by9 {
  border: 1px solid #e4e4e6;
  border-radius: 4px;
}

img.embed-responsive.embed-responsive-16by9 {
  aspect-ratio: 16/9;
  padding: 2rem;
}
/* cookie consent message END */

/* GIFs should have a max width START */

.td-content > video {
  max-width: 100%;
}

.gif > video {
  max-width: 100%;
}

/* GIFs should have a max width END */

// Other styling

.table {
  margin-top: 1.5rem;
}

.td-content img {
  margin-bottom: 1rem;
}

img.frame {
  border: 1px solid #e4e4e6;
}

.td-content > video {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.embed-responsive.embed-responsive-16by9 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Feedback container */

.feedback {
  padding-top: 2rem;
}

.feedback--prompt {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.feedback--question {
  display: inline;
  padding-right: 1em;
}

.feedback--answer {
  padding: 0.5rem 0.625rem;
  margin-right: 0.5rem;
}

.feedback--response {
  display: none;
  margin-top: 1em;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  padding: 1rem;
  max-width: 400px;
  margin: auto;
}

.feedback--answer {
  display: inline-block;
}

.feedback--response__visible {
  display: block;
}

.feedback-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedback-form > button {
  margin-left: 0.5rem;
}

.feedback-form > textarea {
  height: 133px;
  width: 100%;
}

.feedback-ty {
  text-align: center;
}

.feedback-ty > p {
  margin-top: 1rem;
}

// This ensures the gray sidebar covers the area where the sticky buttons are rendered.
@media (min-width: 768px) {
  .td-sidebar {
    // padding-bottom: 76px;
    margin-bottom: -76px;
  }
}

/* END Feedback container */

.glossary-anchor {
  color: black;

  svg {
    visibility: hidden;
  }
}

.glossary-anchor:hover {
  color: black;

  svg {
    color: #0000ea;
    visibility: initial;
  }
}

// Align media to left, center, or right

@media (min-width: 650px) {
  img.alignright {
    padding: 4px;
    margin: 0 0 2px 20px;
    display: inline;
  }
  img.alignleft {
    padding: 4px;
    margin: 0 20px 2px 0;
    display: inline;
  }
  video.alignright {
    padding: 4px;
    margin: 0 0 2px 20px;
    display: inline;
  }
  video.alignleft {
    padding: 4px;
    margin: 0 20px 2px 0;
    display: inline;
  }
  div.alignright {
    padding: 4px;
    margin: 0 0 2px 20px;
    display: inline;
  }
  div.alignleft {
    padding: 4px;
    margin: 0 20px 2px 0;
    display: inline;
  }
  .alignright {
    float: right;
  }
  .alignleft {
    float: left;
  }
  .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

// center on small screens
@media (max-width: 650px) {
  .alignright {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .alignleft {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .center-if-small {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

// Fix page width on full screen to be 90%

.td-content > .code-toolbar,
.td-content > .table,
.td-content > div,
.td-content > img,
.td-content > picture,
.td-content > picture > img {
  @include media-breakpoint-up(lg) {
    max-width: 90%;
  }

  max-width: 100%;
  max-height: 100%;
}

.gif {
  margin-bottom: 1rem;
}

.td-content > img.shadow,
.td-content * img.shadow {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) {
  .td-max-width-on-larger-screens,
  .td-content > pre,
  .td-content > .highlight,
  .td-content > .lead,
  .td-content > h1,
  .td-content > h2,
  .td-content > ul,
  .td-content > ol,
  .td-content > p,
  .td-content > blockquote,
  .td-content > dl dd,
  .td-content .footnotes,
  .td-content > .alert {
    max-width: 90%;
  }
}

// relatedcard styling

.relatedcard {
  display: flex;
  border-radius: 4px !important;
  margin: 0.25rem;
}

.relatedcard.green {
  background-color: #e6f7e6;
}

.relatedcard a {
  display: flex;
  text-decoration: none;
  padding: 0.5rem;
  text-align: left;
  min-width: 250px;
  max-width: 250px;
}

.relatedcard a picture {
  width: 40px;
  margin: 0 0.5rem;
  min-width: 40px;
  align-content: center;
}

.relatedcard a picture img {
  margin-bottom: unset;
}

.relatedcard a:hover {
  background-color: whitesmoke;
}

.relatedcard div {
  margin: auto;
}

.relatedcard p {
  align-content: center;
  margin-bottom: unset;
}

@media (max-width: 800px) {
  .relatedcard {
    width: 100%;
    padding: 0.25rem 0rem;
    min-height: unset;
  }

  .relatedcard a {
    width: 95%;
    text-align: unset;
    padding: 0;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .relatedcard * img {
    width: 45px;
    height: 45px;
    margin: 0rem;
  }

  .relatedcard * p {
    margin-left: 0.75rem;
    margin-bottom: 0;
  }
}

// sectionlist styling

ul.sectionlist {
  padding: 0;
}

ul.sectionlist.horizontal {
  display: flex;
  gap: 50px;
}

ul.sectionlist.horizontal > li {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

ul.sectionlist > li {
  list-style-type: none;
}

ul.sectionlist > li > a {
  text-decoration: none;
}

ul.sectionlist > li > a > div {
  width: 100%;
  padding: 0.25rem 0rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 50px;
}

ul.sectionlist > li * img {
  width: 45px;
  height: 45px;
  margin: 0rem;
}

ul.sectionlist > li * p {
  margin-left: 0.75rem;
  margin-bottom: 0;
}

ul.sectionlist > li:hover {
  background-color: whitesmoke;
}

.col.sectionlist {
  min-width: 280px;
  max-width: 400px;
  padding: 1rem;
  margin: 1rem;
}

.row-no-margin {
  display: flex;
  flex-wrap: wrap;
}

// Carousel styling
.carousel {
  position: relative;
}
.carousel ul {
  overflow: auto;
  display: flex;
  flex-wrap: nowrap;
  scroll-snap-type: x mandatory;
  scroll-snap-points-y: repeat(100%);
  scroll-behavior: smooth;
  background: white;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
}
.carousel ul::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}
.carousel ul li {
  position: relative;
  min-width: 100%;
  list-style: none;
  background: url() center center / cover no-repeat;
  scroll-snap-align: start;
}
.carousel ul li > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.carousel ul li > img {
  object-fit: cover;
}
.carousel ul li > div {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 20px;
}
.carousel ol {
  position: absolute;
  bottom: 15px;
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}
.carousel ol li {
  list-style: none;
  padding: 0 5px;
}
.carousel ol li a {
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid white;
  background: transparent;
  border-radius: 100%;
}
.carousel ol li.selected a {
  background: white;
}
.carousel .prev,
.carousel .next {
  display: none;
  user-select: none;
  cursor: pointer;
  font-size: 50px;
  color: black;
  position: absolute;
  left: 0;
  padding: 15px 15px 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  line-height: 0;
}
.carousel .next {
  left: auto;
  right: 0;
}

#board-carousel {
  padding: 0 1.5rem;
  max-height: 150px;
}

#board-carousel ul {
  max-height: 150px;
}

#board-carousel ul li {
  min-width: 100px;
  min-height: 130px;
}

#board-carousel ul li a {
  text-decoration: none;
  padding: 0rem 0.8rem;
}

#board-carousel ul li img {
  height: 60px;
}

#board-carousel ul li a p {
  font-size: 0.833rem !important;
  line-height: 1.0625rem !important;
  color: black;
  font-weight: 600;
}

#board-carousel div.prev,
#board-carousel div.next {
  padding: 0;
  font-size: 30px;
}

.td-sidebar__toggle {
  float: right;
}

// Tutorials page start

.search-panel__results.card-container {
  max-width: 100%;
  visibility: visible;
  opacity: 1;
  transition:
    opacity 250ms ease-in,
    visibility 0ms ease-in 0ms;
}

#tutorial-menu {
  display: flex;
  flex-direction: column;
  max-width: 850px;
  min-height: 46px;
}

.pill-explainer {
  padding-left: 0.2rem !important;
}

.pill-explainer > li > p {
  font-size: 0.833rem !important;
  margin-bottom: 0 !important;
}

#tutorial-filters,
#tutorial-filter-items {
  display: flex;
  flex-wrap: wrap;
}

#tutorial-filters > .filter,
#platformarea-list .filterbutton {
  text-decoration: none;
  color: black;
  padding: 0.2rem 1rem;
  margin: 0.2rem;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  -moz-border-radius: 4px;
}

#platformarea-list .filterbutton {
  background-color: white;
}

#platformarea-list .filterbutton.refined {
  background-color: black;
  color: white;
}

#platformarea-list ul {
  display: flex;
  list-style-type: none;
  padding-inline-start: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
}

#tutorial-filters > .filter:hover {
  background-color: #e7e5e4;
  cursor: pointer;
}

#tutorial-filters > .filter[aria-expanded="true"] {
  background-color: #e7e5e4;
}

.ais-Hits-item {
  display: flex;
}

.ais-Hits-item > .tutorial .title:after {
  content: "Tutorial";
  background-color: #00ef83;
}

.ais-Hits-item > .blogpost .title:after {
  content: "Blogpost";
  background-color: #ffd400;
}

.ais-Hits-item > .quickstart .title:after {
  content: "Quickstart";
  background-color: #00e8e8;
}

.ais-Hits-item > .how-to .title:after {
  content: "How‑to";
  background-color: #00e8e8;
}

.ais-Hits-item > .codelab .title:after {
  content: "Codelab";
  background-color: #ff7d80;
}

.ais-Hits-item .title:after {
  padding: 0.1rem 0.2rem;
  margin-left: 0.5rem;
  font-size: 0.833rem;
  font-weight: 400;
  text-transform: uppercase;
}

.ais-Hits-item .hover-card-video {
  border: none;
}

.td-content > .table * ol.ais-Hits-list,
.td-content * .table * ol.ais-Hits-list {
  margin-left: 0rem;
}

#hits .ais-Hits-list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.search-panel__filters {
  display: flex;
}

.search-facets {
  width: 540px;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  margin: 0.2rem;
  padding: 0.2rem;
  position: absolute;
  z-index: 1;
  background-color: white;
}

@media (max-width: 800px) {
  .search-facets {
    max-width: 86%;
    width: 445px;
  }
}

.search-facets > ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0.2rem;
  padding: 0;
}

.search-facets * li {
  list-style: none;
  margin: 0.2rem;
}

.search-facets * label {
  margin: 0;
}

.search-facets * input {
  padding: 0.1rem 0.25rem;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  margin: 0.1rem;
  font-size: 0.833rem !important;
  font-weight: 400 !important;
  line-height: 1.4375em;
  background-color: whitesmoke;
  color: black;
  border-radius: 4px;
  -moz-border-radius: 0px;
}

.search-facets * input.refined {
  background-color: #000;
  color: white;
}

#components-list * input,
#services-list * input {
  border-color: #a51aff;
}

#languages-list * input {
  border-color: #00e8e8;
}

.ais-Hits-list {
  padding: 0;
}

.pagination {
  align-self: center;
}

.ais-Pagination-list {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

// Pagination CSS start

#pagination,
#paginationML,
#paginationScripts {
  margin: 2rem auto;
}

.ais-Pagination-item {
  display: inline-block;
  margin: 0.2rem;
}

span.ais-Pagination-link {
  background-color: #e7e5e4;
}

.ais-Pagination-item.ais-Pagination-item--selected > a.ais-Pagination-link {
  background-color: #000;
  color: white;
}

.ais-Pagination-link {
  text-decoration: none;
  color: black;
  padding: 0.2rem 1rem;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
}

a.ais-Pagination-link:hover {
  color: black;
  background-color: #e7e5e4;
}

.ais-Pagination-list {
  text-align: center;
  padding: 0;
}

// Speed up bootstraps transition animations
.search-facets.collapsing {
  transition-duration: 0.000002s;
}

// Pagination CSS end

// Tutorials page end

// Search-autocomplete start

.algolia-autocomplete {
  flex-grow: 1;
}

@media (max-width: 600px) {
  .algolia-autocomplete .ds-dropdown-menu {
    min-width: 90% !important;
  }
}

.ds-dataset-1,
.ds-dataset-2,
.ds-dataset-3 {
  max-height: 500px !important;
}

/* Add margin in front of breadcrumbs on small screens */
@media (max-height: 600px) {
  .ds-dataset-1,
  .ds-dataset-2,
  .ds-dataset-3 {
    max-height: 300px !important;
  }
}

/* Add margin in front of breadcrumbs on small screens */
@media (max-height: 400px) {
  .ds-dataset-1,
  .ds-dataset-2,
  .ds-dataset-3 {
    max-height: 200px !important;
  }
}

// Search-autocomplete end

// Make videos work without js

.no-js * .lozad {
  display: none;
}

// ensure tutorials page is 100% of height

.row.flex-xl-nowrap {
  min-height: 100%;
}

// Search START

#sideSearchBar {
  display: none;
  max-width: 100%;
  width: 100%;
}

#chatButton {
  display: none;
}

@media (max-width: 992px) {
  #navSearchBar {
    display: none;
  }

  #sideSearchBar {
    display: unset;
    margin-right: 0rem;
    margin-left: 1rem;
    margin-top: 0.5rem;
  }

  #chatButton {
    display: unset;
    background-color: #000;
    color: white;
  }

  #scrollButton {
    margin-right: 136px;
  }
}

#mobile-search {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  #mobile-search {
    margin-left: 0rem;
    margin-right: 0rem;
  }

  #sideSearchBar {
    padding-right: 0rem;
    margin-right: 0.75rem;
    margin-left: 1.5rem;
  }

  .td-sidebar-nav > .td-sidebar-nav__section {
    padding-left: 1.25rem;
    // padding-right: 0rem !important;
  }
}

// Search END

// styling for model list from registry

.searchhitsbox {
  margin-bottom: 1rem;
  border: 1px solid rgb(209, 213, 219);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.searchhitsbox#modresources {
  min-height: 650px;
}

.mr-component {
  min-height: 650px;
}

.searchhitsbox#mlmodels {
  min-height: 650px;
}

.searchhitsbox#training-scripts {
  min-height: 500px;
}

.modellist > div {
  display: flex;
  border-bottom: 1px solid #d7d7d9;
}

.modellist * .ais-Hits-list {
  flex-direction: column;
}

.modellist * .ais-Hits.ais-Hits--empty {
  margin: 1rem auto;
  text-align: center;
}

.modellist * .ais-Hits-list,
.modellistheader {
  margin-bottom: 0rem;
  display: flex;
}

.modellist * .ais-Hits-list > .ais-Hits-item {
  width: 100%;
  display: flex;
  border-top: 1px solid #d7d7d9;
  margin-bottom: 0;
}

.modellist * .ais-Hits-list > .ais-Hits-item > div,
.modellistheader > div {
  margin: 1rem;
}

.modellist * .ais-Hits {
  width: 100%;
}

.modellist * .ais-Hits-itm {
  display: flex;
}

.modellist * .ais-Hits-list > .ais-Hits-item:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.modellistheader > .name,
.modellist * .name,
.modellistheader > .type,
.modellist * .type,
.modellistheader > .framework,
.modellist * .framework {
  min-width: 15%;
  max-width: 15%;
}

.modellistheader {
  border-top: 1px solid #d7d7d9;
  border-bottom: 1px solid #d7d7d9;
}

.modellistheader > div {
  font-weight: 600;
}

.modellistheader > .description,
.modellist * .description {
  overflow-wrap: anywhere;
}

#searchbox,
#searchboxScripts,
#searchboxML {
  margin: 1rem 0rem 2rem 0rem;
  min-height: 34px;
}

#searchstats,
#searchstatsScripts,
#searchstatsML {
  min-height: 24px;
}

.ais-SearchBox-input {
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  background-color: white;
  outline-offset: 0px;
  padding: 0.25rem 0.75rem;
  width: 100%;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

.ais-Highlight-highlighted {
  background-color: #f0b93f;
}

// styling for model list from modular resources END

// Glossary tooltips

.glossary-tooltip {
  color: black;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.tooltip {
  pointer-events: none;
}

// Changelog labels

.changelog-outer {
  display: flex;
  justify-content: space-between;
}

.changelog div {
  padding-right: 4px;
}

.changelog .colorbox,
.changelog .datebox {
  text-transform: uppercase;
  padding: 0.1rem 0.25rem;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  margin-right: 0.5em;
}

.box-fit {
  display: flex;
}

.date-fit {
  min-width: fit-content;
}

.changelog-added .colorbox {
  background-color: #00ef83;
}

.changelog-improved .colorbox {
  background-color: #00e8e8;
}

.changelog-changed .colorbox {
  background-color: #ffd400;
}

.changelog-removed .colorbox {
  background-color: #ff0047;
}

// Changelog filtering

#changelog-menu {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  position: relative;
}

#changelog-filters button {
  text-decoration: none;
  color: black;
  padding: 0.2rem 1rem;
  margin: 0.2rem;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
}

#added-button.active,
#added-button:hover {
  background-color: #93f6c9;
}

#improved-button.active,
#improved-button:hover {
  background-color: #92f3f3;
}

#changed-button.active,
#changed-button:hover {
  background-color: #f4eab7;
}

#removed-button.active,
#removed-button:hover {
  background-color: #f68dab;
}

#all-button.active,
#all-button:hover {
  background-color: #d1b4cb;
}

.filterable {
  display: none;
  margin: 1em 0em;
}

div .filterable > p {
  position: relative;
  z-index: 1;
}

// Display only the elements that currently have show class
.show {
  display: block;
}

.hidethisone {
  display: none;
}

// END changelog filtering

.linkcontainer {
  padding: 1rem;
  margin: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.usecase {
  min-width: 280px;
  max-width: 400px;
  margin: 1em;
  padding: 1em;
}

.usecase:hover {
  background-color: whitesmoke;
}

.tablestep {
  clear: both;
  padding: 1rem;
  overflow: auto;
}

// Fix tables in steps and expanders

.tablestep > table,
.expand-content > table {
  min-width: 100% !important;
  max-width: 100% !important;
}

.tablestep > table td,
.tablestep > table th,
.tablestep * table * td,
.tablestep * table * th,
.expand-content > table td,
.expand-content > table th {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #e4e4e6;
}

.expand-content > table {
  width: 100%;
}

.usecase-table .tablestep:nth-of-type(odd) {
  border-top: 1px solid #d7d7d9;
}

.usecase-table .tablestep:nth-of-type(even) {
  border-top: 1px solid #d7d7d9;
}

// Styling for email newsletter

h3.body-header[style] {
  font-family:
    space grotesk,
    sans-serif !important;
  font-size: 2rem !important;
  line-height: 2.667rem !important;
  font-weight: 400 !important;
  clear: both !important;
}

.actions .hs-button.primary.large {
  border: 1px solid #e4e4e6;
  color: black;
  border-radius: 4px;
  background-color: whitesmoke;
  padding: 0.25rem 0.5rem;
  i {
    color: black;
  }
}

.legal-consent-container {
  margin-top: 1rem;
}

.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field {
  display: flex;
}

.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field label::after {
  content: ":";
}

.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field label,
.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field .input {
  margin-right: 1rem;
}

// Front page styling START

.frontpage h2 {
  margin-bottom: 1rem;
}

// Image and text START

.front-card-container {
  margin: auto;
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
}

.hero-container,
.hero-container-small {
  display: flex;
  justify-content: space-between;
}

.hero-container-small .hero {
  margin-top: 3rem;
  max-width: 35%;
}

.hero-text {
  // min-width: 45%;
  max-width: 45%;
}

.hero-text > h1 {
  margin-top: 10rem;
  font-weight: 600;
}

.hero-container .hero {
  margin-top: 3rem;
  min-width: 500px;
  max-width: 500px;
  margin-top: 9rem;
}

@media (max-width: 1200px) {
  .hero-container .hero,
  .hero-container-small .hero {
    display: none;
    max-width: 0;
  }

  .hero-text {
    max-width: 100%;
  }

  .hero-text > h1 {
    margin-top: 2rem;
    font-weight: 600;
    font-size: 2rem;
  }
}

.gray-container {
  margin-top: 3rem;
  background-color: #f7f7f8;
  border-radius: 4px;
  padding: 2rem;
}

// CTA buttons START

.front-card-container > .hover-card.primary,
.front-card-container > .cta.secondary {
  margin-right: 0;
  padding-top: 1rem;
}

.front-card-container > .cta.secondary {
  align-content: center;
  margin: 1rem 0rem 1rem 0rem;
  display: flex;
}

.front-card-container > .hover-card {
  min-width: unset;
  max-width: unset;
  margin-left: unset;
}

.front-card-container > .hover-card > a {
  padding: 1rem 0rem !important;
  align-content: center;
  text-align: center;
  padding: unset;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: "Space Mono", sans-serif;
}

.front-card-container > .cta.secondary > a {
  padding: 0.75rem;
  display: flex;
  align-content: center;
  text-decoration: underline;
  color: black;
}

.front-card-container > .cta.secondary > a:hover {
  font-style: italic;
}

.front-card-container > .cta.secondary > a * p {
  margin-bottom: unset;
  margin-top: 5px;
}

.front-card-container > .hover-card > a > div {
  margin: auto;
  padding: 0 0.75rem;
}

@media (max-width: 650px) {
  .front-card-container > .hover-card {
    width: unset;
  }
}

.td-content > div.max-page,
hr {
  max-width: 1000px !important;
}

hr {
  margin-left: 0;
}

// CTA buttons END

// Image and text END

// Special front page tables START

.table.horizontalheaders {
  display: flex;
  max-width: 100%;
  min-height: 400px;
}

// top-level tabs nav items START

.table.horizontalheaders > ul.nav-tabs {
  min-width: 170px;
  max-width: 170px;
  display: flex;
  flex-direction: column;
  border: 1px solid #d7d7d9;
  border-radius: 4px;
  margin-right: -1px;
}

@media (max-width: 900px) {
  .table.horizontalheaders {
    flex-direction: column;
  }

  .table.horizontalheaders > ul.nav-tabs {
    max-width: 100%;
    border-right: 1px solid #d7d7d9;
    border-bottom: unset;
  }
}

.horizontalheaders > ul.nav-tabs > .navheader {
  text-transform: uppercase;
  color: #aaa;
  padding: 0.45rem 0.75rem;
  font-size: 0.75rem;
  font-family:
    Space Mono,
    sans-serif;
}

.table.horizontalheaders > ul.nav-tabs > li.nav-item {
  border: unset;
}

.table.horizontalheaders > ul.nav-tabs > li.nav-item > a.nav-link {
  border-top: 1px solid #f7f7f8;
  border-bottom: 1px solid #f7f7f8;
  border-left: unset;
  background-color: #f7f7f8;
}

.table.horizontalheaders > ul.nav-tabs > li.nav-item > a.nav-link.active {
  background-color: #d7d7d9;
  color: 1px solid #d7d7d9;
  border-bottom: 1px solid #f7f7f8;
  border-top: 1px solid #f7f7f8;
}

.table.horizontalheaders > ul.nav-tabs > li.nav-item > a.nav-link.active:first {
  border-top: 1px solid #000000;
}

.table.horizontalheaders > ul.nav-tabs > li.nav-item > a.nav-link:hover {
  border: unset;
  background-color: #d7d7d9;
  border-top: 1px solid #f7f7f8;
  border-bottom: 1px solid #f7f7f8;
}

// top-level tabs nav items END

// Tabs inside tabs START

.table.horizontalheaders > .tab-content {
  max-width: calc(100% - 170px);
  min-height: 100%;
  width: 100%;
  padding: 0;
}

.table.horizontalheaders * .tab-content {
  padding: 0;
}

.table.horizontalheaders > .tab-content > div {
  height: 100%;
}

.table.horizontalheaders > .tab-content > div > .innertabcontentcontainer {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  max-width: 100%;
  width: 100%;
}

.table.horizontalheaders
  > .tab-content
  > div
  > .innertabcontentcontainer
  > .table {
  margin-top: unset;
  margin-bottom: unset;
  flex: 1;
  display: flex;
  flex-direction: column;
}

// inner tabs navitems START

.table.horizontalheaders
  *
  .innertabcontentcontainer
  > .table
  > ul
  > li.nav-item:first-child
  > a {
  margin-left: -1px;
}

// inner tabs navitems END

// innter tabs content START

// Ensures code is max-height
.table.horizontalheaders > .tab-content .tab-pane.active {
  min-height: 100%;
  display: flex;
  max-width: 100%;
  justify-content: center;
}

.table.horizontalheaders
  > .tab-content
  > div
  > .innertabcontentcontainer
  > .table
  > .tab-content {
  border: unset;
  flex-grow: 1;
}

.table.horizontalheaders
  > .tab-content
  > div
  > .innertabcontentcontainer
  *
  .code-toolbar {
  margin: 0;
  padding: 0;
  border: unset;
  flex-grow: 1;
  max-width: 100%;
}

.table.horizontalheaders
  > .tab-content
  > div
  > .innertabcontentcontainer
  *
  .code-toolbar
  > pre {
  height: 350px;
  max-height: 350px;
  overflow: auto;
  margin-top: 0;
  padding-top: 12px;
}

.table.horizontalheaders.program
  > .tab-content
  > div
  > .innertabcontentcontainer
  *
  .code-toolbar
  > pre {
  height: 220px;
  max-height: 220px;
}

.table.horizontalheaders > .tab-content > div > .innertabcontentcontainer img {
  flex-grow: 1;
  margin-bottom: 0;
  max-width: 100%;
  max-height: 345px;
  height: 345px;
  width: auto;
  flex: 1;
  align-content: center;
  margin-top: 5px;
}

// innter tabs content END

// Tabs inside tabs END

// Lower explanation text & visual START

div.explanation {
  display: flex;
  flex-direction: row;
  border-top: 1px solid #d7d7d9;
  background-color: rgb(247, 247, 248);
}

div.explanation > .explanationtext {
  min-width: 250px;
  margin: 0.5rem 1rem 0 1rem;
  width: 100%;
}

div.explanation > .explanationvisual {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}

div.explanation > .explanationvisual * video,
div.explanation > .explanationvisual > picture > img {
  min-width: 250px;
  max-width: 250px;
  aspect-ratio: 4/3;
  margin-bottom: unset;
}

div.explanation > .explanationvisual > .gif {
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-content: center;
}

@media (max-width: 1140px) {
  // image fold over
  div.explanation {
    flex-wrap: wrap;
  }

  div.explanation > .explanationvisual {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  @media (min-width: 900px) {
    .horizontalheaders.program * .explanation {
      min-height: 310px;
    }
  }
}

@media (max-width: 900px) {
  div.explanation > .explanationvisual {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
  }

  .table.horizontalheaders > .tab-content {
    max-width: 100%;
    width: 100%;
  }
}

// Lower explanation text & visual END

// Assign min-width to containers to reduce jumping (only on wide screens) START

@media (min-width: 900px) {
  .horizontalheaders.program * .explanation {
    min-height: 190px;
  }

  .horizontalheaders.services * .explanation {
    min-height: 187.5px;
  }

  .horizontalheaders.platform * .explanation {
    min-height: 160px;
  }
}

// Assign min-width to containers to reduce jumping (only on wide screens) END

// Special front page tables END

// Front page styling END

.isHidden {
  display: hidden;
  opacity: 0;
  transition: opacity 250ms ease-out;
}

// Top level nav START
nav {
  display: flex;
  flex-direction: column;
}

.navbar {
  padding: 0;
}

.navcontainer {
  min-width: 100%;
  display: flex;
  padding: 0.25rem 1rem;
  min-height: 50px;
  background-color: white;
}

.td-topbar-sections {
  margin-right: auto !important;
  margin-left: auto !important;
  line-height: unset !important;
}

.td-topbar-sections > ul {
  padding: 0;
  padding-left: 1.25rem;
  margin: 0;
}

.td-topbar-sections > ul > li {
  display: inline-block;
  text-transform: uppercase;
  font-family:
    Roboto Mono Variable,
    Roboto Mono,
    ui-monospace,
    monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.td-topbar-sections > ul > li > a {
  color: black;
  padding-bottom: 4px;
  padding-top: 8px;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.td-topbar-sections > ul > li > a:hover {
  text-decoration: none;
  background-color: rgb(232, 232, 234);
}

@media (min-width: 768px) {
  .td-main main {
    padding-top: 5rem;
  }
}

.td-navbar {
  min-height: 3.5rem;
}


@media (min-width: 992px) {
  .d-lg-block {
    display: flex !important;
  }
}


ul > li.nav-fold > span > span.link-and-toggle {
  display: flex !important;
  flex-direction: row;
}

ul.ul-0 > li.nav-fold:last-child {
  padding-bottom: 0.5rem;
}

@media (min-width: 768px) {

  #landing-page-sidebar {
    display: none;
  }

  nav * ul > li > span > span.link-and-toggle,
  nav * ul > li > a {
    padding-left: 0.5rem;
  }

  li.nav-fold.header-only > span > span {
    color: #000000;
    margin-top: 0.25rem;
  }

  li.nav-fold.header-only:first-child > span > a {
    margin-top: 0.25rem;
  }

  li.nav-fold.header-only * li {
    text-transform: unset;
  }

  li.nav-top-section > span > span.link-and-toggle > a,
  li.nav-top-section > a {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #666;
  }

  li.nav-top-section > span > ul.ul-2 {
    margin-left: 0.5rem;
  }

  ul.ul-2 > li > span > span {
    color: #282829;
    font-weight: 400;
    font-size: 0.833rem;
  }

  ul.ul-2 > li > a {
    font-size: 0.833rem;
  }

  li.header-only > span > ul.ul-3 {
    padding-left: 0.5rem;
    border-left: 1px solid #e4e4e6;
    margin-left: 0.5rem;
  }

  li > span > ul.ul-3 > li > a {
    padding-left: 0.5rem;
  }



  .td-sidebar-nav__section .ul-1 ul.ul-2 {
    padding-left: 0.5rem;
    border-left: 1px solid #e4e4e6;
    margin-left: 0.5rem;
  }

  .td-sidebar-nav__section ul.ul-1 {
    margin-left: 0;
  }

  li.nav-top-section {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e4e4e6;
  }

  li.nav-top-section:last-child {
    border-bottom: none;
  }
}

.menu-toggle {
  display: flex !important;
  align-items: center;
}

a.tree-root {
  display: none;
}

// Top level nav END

// For tutorials, make side nav heading smaller

li.active-path.tutorial-heading > a {
  color: #0000ea;
  margin-top: 1rem;
  font-size: 0.833rem;
  font-weight: 600;
}

// Next page START

#next-page {
  clear: both;
}

#next-page > div {
  flex-direction: row;
}

#next-page > div.right-only {
  flex-direction: row-reverse;
}

#next-page > div > div.hover-card {
  min-width: 250px;
  max-width: unset;
}

#next-page > div > div.hover-card {
  max-width: 100%;
}

#next-page > div > div.hover-card.left {
  float: left;
  margin: 0;
  margin-bottom: 0.5rem;
}

#next-page > div > div.hover-card.right {
  float: right;
  margin: 0;
}

@media (min-width: 569px) {
  #next-page > div > div.hover-card {
    max-width: calc((100% - 1.5rem) / 2);
  }
}

@media (min-width: 545px) {
  #next-page > div > div.hover-card.left {
    margin: 0rem 0.5rem 0rem 0rem;
  }

  #next-page > div > div.hover-card.right {
    margin: 0rem 0rem 0rem 0.5rem;
  }
}

#next-page > div > div.hover-card > a {
  width: 100%;
  color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#next-page > div > div.hover-card > a > div > p {
  font-family:
    space grotesk,
    sans-serif;
  font-size: 1.1667rem !important;
  line-height: 1.4375em;
}

#next-page > div > div.hover-card > a > div {
  display: flex;
  align-items: center;
}

#next-page > div > div.hover-card > a > div.text {
  flex-direction: column;
}

#next-page > div > div.hover-card > a > div.text > p:first-child {
  text-transform: uppercase;
  font-family:
    Space Mono,
    sans-serif;
  color: #aaa;
  font-size: 0.833rem !important;
}

#next-page > div > div.hover-card.left > a > div.text > p:first-child {
  align-self: flex-end;
}

#next-page > div > div.hover-card.right > a > div.text > p:first-child {
  text-transform: uppercase;
  align-self: flex-start;
}

#next-page > div > div.hover-card > a > div > div {
  margin-bottom: 0;
}

#next-page > div > div.hover-card.left > a > div.arrow {
  margin-right: 1.5rem;
}

#next-page > div > div.hover-card.left > a > div {
  text-align: right;
}

#next-page > div > div.hover-card.right > a > div.arrow {
  margin-left: 1.5rem;
}

#next-page > div > div.hover-card.right > a > div {
  text-align: left;
}

// Next page END

// Platform landing pages START

.three-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.three-cards > .col {
  flex: 1;
  max-width: 300px;
  margin: 0 !important;
}

.three-cards > .col:hover {
  background-color: white;
}

.three-cards > .col > div {
  padding: 1rem;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.three-cards > .col > div > p {
  margin-bottom: 0;
}

.three-cards > .col > div > span > h2 {
  font-weight: 600;
}

.three-cards > .col:hover > div {
  transform: unset;
  box-shadow: unset;
  box-shadow: 0px 0px 10px 10px #dee2e6;
}

.three-cards .hover-card a div > div {
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-weight: normal;
  font-size: 1.25rem !important;
}

.imgcontcenter {
  display: flex;
  justify-content: center;
}

.img-overlay-wrap {
  position: relative;
  display: inline-block;
  transition: transform 150ms ease-in-out;
}

.img-overlay-wrap .overview {
  display: inline-block;
}

.img-overlay-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
}

.img-overlay-wrap .overlay-platform {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.col-12.col-md-12.col-xl-12.pl-md-12 {
  display: flex;
  flex-direction: column;
}

#rss-feed {
  align-self: flex-end;
}

.col-12.col-md-12.col-xl-12.pl-md-12 > .td-content {
  display: flex;
  justify-content: center;
}

// Platform landing pages END

// Table styling START

.table-striped tbody tr:nth-of-type(odd),
.td-content > table tbody tr:nth-of-type(odd),
.td-box .row.section > table tbody tr:nth-of-type(odd) {
  background-color: unset;
}

.table th,
.td-content > table th,
.td-content table th,
.td-box .row.section > table th,
.table td,
.td-content > table td,
.td-content table td,
.td-box .row.section > table td {
  border-top: 1px solid #e4e4e6;
  border-right: 1px solid #e4e4e6;
  border-left: 1px solid #e4e4e6;
  border-bottom: 1px solid #e4e4e6;
}

// Table styling END
// Numbered list styling START

.td-content > ol,
.td-content > .table * ol {
  list-style: none;
  counter-reset: item;
  padding-inline-start: 0px;
  list-style-position: outside;
  margin-bottom: 1rem;
  width: calc(100% - 2.5rem);
  margin-left: 2.5rem;
}

.td-content > ol > li,
.td-content > .table * ol > li {
  counter-increment: item;
  margin-bottom: 5px;
  display: block;
}

.td-content > ol > li > ul {
  margin-left: 1rem;
  margin-bottom: 0.5rem;
}

.td-content * ul {
  margin-left: 1rem;
  padding-left: 0rem;
}

.td-content * ol * ul > li,
.td-content > ol * ul > li {
  margin-left: 1.5rem;
}

div.tablestep {
  display: flex;
  flex-direction: row;
  align-items: center;
}

div.tablestep > div.tablestep-number {
  margin-right: 1rem;
  align-self: flex-start;
  background: #f1f1f4;
  border-radius: 100%;
  color: #4e4f52;
  width: 1.625rem;
  height: 1.625rem;
  text-align: center;
  min-width: 1.625rem;
  vertical-align: middle;
  padding-top: 0.125rem;
}

div.tablestep > div.tablestep-content {
  width: 100%;
  overflow: auto;
}

div.tablestep > table,
div.tablestep table {
  border-right: 1px solid #e4e4e6;
  border-left: 1px solid #e4e4e6;
  border-top: 1px solid #e4e4e6;
  margin-bottom: 1rem;
}

div.tablestep > table th,
.td-content > table th,
.td-content table th,
div.tablestep * table * th {
  padding: 0.75rem;
}

div.tablestep > table td,
.td-content > table td,
.td-content table td,
div.tablestep * table * td {
  padding: 0.75rem;
}

.td-content > ol > li:before,
.td-content > .table * ol > li:not(.ais-Hits-item):before {
  margin-right: 10px;
  margin-left: -2.5rem;
  content: counter(item);
  background: #f1f1f4;
  border-radius: 100%;
  color: #4e4f52;
  width: 1.625rem;
  height: 1.625rem;
  text-align: center;
  float: left;
  display: table-cell;
  margin-bottom: 1rem;
}

.td-content > ul li,
.td-content > ol li {
  margin-bottom: 0rem;
}

.td-content > ul li,
.td-content > ol li {
  list-style-position: outside;
  margin-left: 1rem;
}

.td-content * .expand-content > ul li,
.td-content * .expand-content > ol li {
  list-style-position: outside;
  margin-left: 0rem;
}

.td-content > ol li,
.td-content > ul li {
  margin-bottom: 0.5rem;
}

.td-content > ul {
  padding-left: 1rem;
}

/* ensure that, up to a reasonable 4 levels of nesting, including tablesteps, we use distinct ordered list labeling schemes */
.tablestep ol,
ol ol {
  list-style-type: decimal;
}

.tablestep ol ol,
ol ol ol {
  list-style-type: lower-roman;
}

.tablestep ol ol ol,
ol ol ol ol {
  list-style-type: lower-alpha;
}
/* end ordered list labeling styling */

.td-content > .code-toolbar,
.td-content * .code-toolbar {
  margin-top: 1rem;
}

footer.py-5 {
  padding-bottom: 0 !important;
  padding-top: 1rem !important;
  margin-bottom: -2rem !important;
}

.td-main main {
  padding-bottom: 0rem !important;
}

footer {
  min-height: 30px !important;
} // Numbered list styling END

.center-main-landing {
  justify-content: center;
}

.center-main-landing > .pl-md-5,
.center-main-landing > .px-md-5 {
  padding-left: 0rem !important;
  padding-right: 0rem !important;
}

.center-main-landing .col.hover-card {
  margin-left: 0rem !important;
  margin-right: 0rem !important;
}

@media (min-width: 768px) {
  aside.td-sidebar.frontpage {
    border-right: unset;
    display: none;
  }
}

@media (max-width: 767px) {
  .row.flex-xl-nowrap {
    flex-direction: column;
  }
}

.td-main main.frontpage {
  padding-bottom: 0 !important;
  margin: auto;
  margin-top: 2rem;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  display: flex;
  flex-direction: column-reverse;
  align-content: center;
  flex-wrap: wrap;
}

.frontpage .col.hover-card {
  margin-left: auto !important;
  margin-right: auto !important;
}

.copied {
  display: inline-block;
  margin-left: 2rem;
  vertical-align: middle;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.25rem;
  transition: opacity 0.2s ease-in-out;
  padding: 0.2em 0.4em;
  position: absolute;
}

.copied-notification {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-size: 70%;
}

.copied.visible {
  opacity: 1;
}

.force-visible {
  visibility: visible !important;
}

/* Ask AI Dropdown Styles for TOC START */
.ai-dropdown-container-toc {
  position: relative;
  display: block;
  margin-bottom: 1rem;
}

.ai-button-toc {
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-align: left;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  min-height: auto;
}

.ai-button-toc:hover {
  background-color: #f0f0f0;
}

.ai-dropdown-menu-toc {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 180px;
  margin-top: 4px;
}

.ai-dropdown-menu-toc.show {
  display: block;
}

.ai-dropdown-item-toc {
  display: block;
  padding: 0.5rem 0.75rem;
  color: #282829;
  text-decoration: none;
  transition: background-color 0.2s ease;
  font-size: 0.875rem;
}

.ai-dropdown-item-toc:last-child {
  border-bottom: none;
}

.ai-dropdown-item-toc:hover {
  background-color: #f8f9fa;
  color: #282829;
  text-decoration: none;
}

.ai-dropdown-divider {
  height: 1px;
  background-color: #e9ecef;
  margin: 0.5rem 0;
}
/* Ask AI Dropdown Styles for TOC END */

/* Feedback System Styles START */
.feedback-button-toc {
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-align: left;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  min-height: auto;
  margin-top: 0.5rem;
}

.feedback-button-toc:hover {
  background-color: #f0f0f0;
}

.feedback-button-toc.feedback-submitted {
  background-color: #f8fff8;
  border-color: #28a745;
  color: #28a745;
}

.feedback-button-toc.feedback-submitted:hover {
  background-color: #f0fff0;
}

.feedback-form-container {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e4e6;
}

.feedback-highlight-status {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e4e4e6;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.feedback-highlight-status.clickable {
  cursor: pointer;
  border: 2px dashed #000000;
  background-color: #f8f9fa;
}

.feedback-highlight-status.clickable:hover {
  background-color: #f0f0f0;
  border-color: #333333;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.feedback-highlight-status-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #6c757d;
}

.feedback-highlight-status-content i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #000000;
}

.feedback-highlight-status-content span {
  font-size: 0.8rem;
  line-height: 1.3;
}

.feedback-highlight-status-content.selected i {
  color: #28a745;
}

.feedback-highlight-status-content.selected span {
  color: #28a745;
  font-weight: 500;
}

.feedback-input-section {
  margin-bottom: 1rem;
}

.feedback-input-section label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #282829;
  font-size: 0.9rem;
}

.feedback-input-section textarea {
  width: 100%;
  min-height: 100px;
  padding: 0.75rem;
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
  box-sizing: border-box;
}

.feedback-input-section textarea:focus {
  outline: none;
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.feedback-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.feedback-submit {
  border: 1px solid #e4e4e6;
  border-radius: 4px;
  color: black;
  background-color: white;
  margin: 0;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  min-height: auto;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.feedback-submit:hover {
  background-color: #f0f0f0;
}

.feedback-submit:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

/* Highlighting Mode Indicator */
.highlighting-mode-indicator {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  color: white;
  z-index: 10001;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.highlighting-mode-indicator.show {
  display: block;
}

.highlighting-mode-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.highlighting-mode-content i {
  font-size: 1.2rem;
}

.highlighting-mode-content span {
  font-weight: 500;
  font-size: 0.95rem;
}

.highlighting-mode-done {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.highlighting-mode-done:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Highlighting styles for page content */
.feedback-highlight-active {
  cursor: crosshair !important;
}

.feedback-highlight-active * {
  cursor: crosshair !important;
}

.feedback-highlight-selected {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border: 2px solid #000000 !important;
  border-radius: 4px !important;
}

/* Feedback System Styles END */