:root {
  --ray-example-gallery-gap-x: 18px;
  --ray-example-gallery-gap-y: 22px;
  --sidebar-top: 5em;
}

#site-navigation {
  width: 330px !important;
  border-right: none;
  margin-left: 32px;
  overflow-y: auto;
  max-height: calc(100vh - var(--sidebar-top));
  position: sticky;
  top: var(--sidebar-top) !important;
  z-index: 1000;
}

#site-navigation h5 {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

#site-navigation h6 {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
}

/* Hide the default sidebar content */
#site-navigation > div.bd-sidebar__content {
  display: none;
}
#site-navigation > div.rtd-footer-container {
  display: none;
}

.searchDiv {
  margin-bottom: 2em;
}

#searchInput {
  width: 100%;
  color: #5F6469;
  border: 1px solid #D2DCE6;
  height: 50px;
  border-radius: 4px;
  background-color: #F9FAFB;
  background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Systems / search-line' clip-path='url(%23clip0_1_150)'%3E%3Crect width='24' height='24' transform='translate(0.398529 0.0546875)' fill='%23F9FAFB'/%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M18.4295 16.6717L22.7125 20.9537L21.2975 22.3687L17.0155 18.0857C15.4223 19.3629 13.4405 20.0576 11.3985 20.0547C6.43053 20.0547 2.39853 16.0227 2.39853 11.0547C2.39853 6.08669 6.43053 2.05469 11.3985 2.05469C16.3665 2.05469 20.3985 6.08669 20.3985 11.0547C20.4014 13.0967 19.7068 15.0784 18.4295 16.6717ZM16.4235 15.9297C17.6926 14.6246 18.4014 12.8751 18.3985 11.0547C18.3985 7.18669 15.2655 4.05469 11.3985 4.05469C7.53053 4.05469 4.39853 7.18669 4.39853 11.0547C4.39853 14.9217 7.53053 18.0547 11.3985 18.0547C13.219 18.0576 14.9684 17.3488 16.2735 16.0797L16.4235 15.9297V15.9297Z' fill='%238C9196'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_150'%3E%3Crect width='24' height='24' fill='white' transform='translate(0.398529 0.0546875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position-x: 0.5em;
  background-position-y: center;
  background-size: 1.5em;
  padding-left: 3em;
}

#searchInput::placeholder {
  color: #5F6469;
  opacity: 1;
}

.tag {
    margin-bottom: 5px;
    font-size: small;
    color: #000000;
    border: 1px solid #D2DCE6;
    border-radius: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    gap: 1em;
}

.tag.btn-outline-primary {
  color: #000000;
  padding: 3px 12px 3px 12px;
  line-height: 20px;
}

.tag-btn-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}

div.sd-container-fluid.docutils > div {
  gap: var(--ray-example-gallery-gap-y) var(--ray-example-gallery-gap-x);
  display: grid;
  grid-template-columns: 1fr;
}

/* Reflow to a 2-column format for normal screens */
@media screen and (min-width: 768px) {
  div.sd-container-fluid.docutils > div {
    grid-template-columns: 1fr 1fr;
  }
}

div.gallery-item {
  width: auto;
}

div.gallery-item > div.sd-card {
  border-radius: 8px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05) !important;
}

/* Example gallery "Tutorial" title */
div.sd-card-title > span.sd-bg-success.sd-bg-text-success {
  color: #2F80ED !important;
  font-weight: 500;
  background: linear-gradient(180deg, rgba(25, 177, 226, 0.2) 0%, rgba(0, 109, 255, 0.2) 100%);
  background-color: initial !important;
}

/* Example gallery "Code example" title */
div.sd-card-title > span.sd-bg-secondary.sd-bg-text-secondary {
  color: #219653 !important;
  font-weight: 500;
  background: linear-gradient(180deg, rgba(29, 151, 108, 0.2) 0%, rgba(0, 226, 147, 0.2) 100%);
  background-color: initial !important;
}

/* Example gallery "Blog" title */
div.sd-card-title > span.sd-bg-primary.sd-bg-text-primary {
  color: #F2994A !important;
  font-weight: 500;
  background: linear-gradient(180deg, rgba(255, 230, 5, 0.2) 0%, rgba(255, 185, 80, 0.2) 100%);
  background-color: initial !important;
}

/* Example gallery "Video" title */
div.sd-card-title > span.sd-bg-warning.sd-bg-text-warning {
  color: #EB5757 !important;
  font-weight: 500;
  background: linear-gradient(180deg, rgba(150, 7, 7, 0.2) 0%, rgba(255, 115, 115, 0.2) 100%);
  background-color: initial !important;
}

/* Example gallery "Course" title */
div.sd-card-title > span.sd-bg-info.sd-bg-text-info {
  color: #7A64FF !important;
  font-weight: 500;
  background: linear-gradient(180deg, rgba(53, 25, 226, 0.2) 0%, rgba(183, 149, 255, 0.2) 100%);
  background-color: initial !important;
}

div.sd-card-body > p.sd-card-text > a {
  text-align: initial;
}

div.sd-card-body > p.sd-card-text > a > span {
  color: rgb(81, 81, 81);
}

#main-content {
  max-width: 100%;
}

#noMatches {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#noMatchesInnerContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#noMatches.hidden,.gallery-item.hidden {
  display: none !important;
}

.btn-primary {
  color: #004293;
  background: rgba(61, 138, 233, 0.20);
  padding: 3px 12px 3px 12px;
  border: 1px solid #D2DCE6;
}

button.try-anyscale {
  background-color: initial !important;
  width: fit-content;
  padding: 0 !important;
  margin-left: auto !important;
  float: initial !important;
}

button.try-anyscale > svg {
  display: none;
}

button.try-anyscale > i {
  display: none;
}

button.try-anyscale > span {
  margin: 0;
  text-decoration-line: underline;
  font-weight: 500;
  color: #000;
}

.top-nav-content {
  justify-content: initial;
}

/* Hide nav bar that has github, fullscreen, and print icons */
div.header-article.row.sticky-top.noprint {
  display: none !important;
}

/* Hide the footer with 'prev article' and 'next article' buttons */
.footer-article.hidden {
  display: none !important;
}
