.devsite-article h1:first-of-type {
  display: block;
}

@media screen and (max-width: 840px) {
  .devsite-landing-row-header {
      display: flex;
  }
}

@media screen and (max-width: 400px) {
  .devsite-landing-row-header {
      display: block;
  }
}

.devsite-landing-row-description {
  --devsite-landing-row-description-font-size: 16px;
}

.devsite-landing-row-cards {
  --devsite-description-content-font: var(--devsite-card-summary-font);
  --devsite-h2-font: var(--devsite-card-heading-font);
}

.devsite-landing-row .category-section-card h3,
.devsite-landing-row .category-section-card h4,
.devsite-landing-row .category-section-card-title {
  font: var(--devsite-card-heading-font);
}

.category-section-card-description {
  font: var(--devsite-card-summary-font);
}

.category-section-card-description {
  color: var(--devsite-card-summary-color);
}

.devsite-card .button-flat {
  margin: -8px;
}

.rating-info-section {
  display: flex;
  list-style: none;
  margin-inline-end: 12px;
}

.rating-info-section .rating-star {
  color: var(--devsite-ref-palette--yellow400);
  font-size: 14px;
  line-height: 1.7;
}

.more-info-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
}

.docs-landing-page .more-info-container span {
  color: var(--tenant-secondary-text-color);
  font-size: 12px;
  margin-inline-end: 12px;
}

li + li .devsite-label {
  margin-top: 16px;
}

devsite-filter input[type=text] {
  border-radius: 10px;
  height: 48px;
  max-width: 700px;
  padding: 10px 42px;
}

li[no-matches]{
  display: none;
}

.category-hero,
.getting-started-hero,
.homepage-hero,
.product-hero {
  margin-bottom: 40px;
  padding: 0;
}

.homepage-hero {
  background: url(/docs/images/cloud-docs-hero-image.png) no-repeat top right
    / 36% auto, var(--devsite-ref-palette--green50);
  background: url(/docs/images/cloud-docs-hero-image.png) no-repeat top right
    / 36% auto, linear-gradient(90deg, var(--devsite-ref-palette--blue50) 0%,
      var(--devsite-ref-palette--green50) 100%);
}

.category-hero {
  background: url(/docs/images/category.png) no-repeat top right
    / 46% auto, var(--devsite-ref-palette--green50);
  background: url(/docs/images/category.png) no-repeat top right
    / 46% auto, linear-gradient(90deg, var(--devsite-ref-palette--blue50) 0%,
      var(--devsite-ref-palette--green50) 100%);
}

.product-hero {
  background: url(/docs/images/product.png) no-repeat top right
    / 46% auto, var(--devsite-ref-palette--green50);
  background: url(/docs/images/product.png) no-repeat top right
    / 46% auto, linear-gradient(90deg, var(--devsite-ref-palette--blue50) 0%,
      var(--devsite-ref-palette--green50) 100%);
}

[appearance='dark'] .category-hero,
[appearance='dark'] .homepage-hero,
[appearance='dark'] .product-hero {
  filter: grayscale(33%);
}

@media (prefers-color-scheme: dark) {
  [appearance='device'] .category-hero,
  [appearance='device'] .homepage-hero,
  [appearance='device'] .product-hero {
    filter: grayscale(33%);
  }
}

[appearance='dark'] .homepage-hero {
  background: url(/docs/images/cloud-docs-hero-image.png) no-repeat top right
    / 36% auto, var(--devsite-ref-palette--green400);
  background: url(/docs/images/cloud-docs-hero-image.png) no-repeat top right
    / 36% auto,
    linear-gradient(90deg, var(--devsite-ref-palette--blue400) 0%,
      var(--devsite-ref-palette--green400) 100%);
}

@media (prefers-color-scheme: dark) {
  [appearance='device'] .homepage-hero {
    background: url(/docs/images/cloud-docs-hero-image.png) no-repeat top right
      / 36% auto, var(--devsite-ref-palette--green400);
    background: url(/docs/images/cloud-docs-hero-image.png) no-repeat top right
      / 36% auto,
      linear-gradient(90deg, var(--devsite-ref-palette--blue400) 0%,
        var(--devsite-ref-palette--green400) 100%);
  }
}

[appearance='dark'] .category-hero {
  background: url(/docs/images/category.png) no-repeat top right
    / 46% auto, var(--devsite-ref-palette--green400);
  background: url(/docs/images/category.png) no-repeat top right
    / 46% auto,
    linear-gradient(90deg, var(--devsite-ref-palette--blue400) 0%,
      var(--devsite-ref-palette--green400) 100%);
}

@media (prefers-color-scheme: dark) {
  [appearance='device'] .category-hero {
    background: url(/docs/images/category.png) no-repeat top right
      / 46% auto, var(--devsite-ref-palette--green400);
    background: url(/docs/images/category.png) no-repeat top right
      / 46% auto,
      linear-gradient(90deg, var(--devsite-ref-palette--blue400) 0%,
        var(--devsite-ref-palette--green400) 100%);
  }
}

[appearance='dark'] .product-hero {
  background: url(/docs/images/product.png) no-repeat top right
    / 46% auto, var(--devsite-ref-palette--green400);
  background: url(/docs/images/product.png) no-repeat top right
    / 46% auto,
    linear-gradient(90deg, var(--devsite-ref-palette--blue400) 0%,
      var(--devsite-ref-palette--green400) 100%);
}

@media (prefers-color-scheme: dark) {
  [appearance='device'] .product-hero {
    background: url(/docs/images/product.png) no-repeat top right
      / 46% auto, var(--devsite-ref-palette--green400);
    background: url(/docs/images/product.png) no-repeat top right
      / 46% auto,
      linear-gradient(90deg, var(--devsite-ref-palette--blue400) 0%,
        var(--devsite-ref-palette--green400) 100%);
  }
}

.docs-hero .devsite-landing-row-item-description {
  padding-block: 40px !important;
}

.docs-hero .devsite-landing-row-item-description,
.docs-hero .devsite-landing-row-item-body {
  display: flex;
  justify-content: center;
}

.docs-hero h3 {
  font: var(--devsite-h1-font);
}

.docs-spotlight-card-list .devsite-landing-row-item:first-of-type {
  background: var(--devsite-ref-palette--blue50);
  border-color: var(--devsite-ref-palette--blue300);
}

.docs-spotlight-card-list .devsite-landing-row-item:nth-of-type(2) {
  background: var(--devsite-ref-palette--green50);
  border-color: var(--devsite-ref-palette--green300);
}

[appearance='dark'] .docs-spotlight-card-list .devsite-landing-row-item {
  background: 0;
  border: var(--devsite-card-border);
}

@media (prefers-color-scheme: dark) {
  [appearance='device'] .docs-spotlight-card-list .devsite-landing-row-item:nth-of-type(n) {
    background: 0;
    border: var(--devsite-card-border);
  }
}

/* Category page styling */
.docs-category-page article,
.docs-product-page article {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.docs-category-page .devsite-article-body,
.docs-product-page .devsite-article-body {
  margin-top: 0;
}

.docs-category-page .devsite-banner,
.docs-product-page .devsite-banner {
  margin: 0;
}

.docs-category-page .devsite-article-meta[role='navigation'],
.docs-product-page .devsite-article-meta[role='navigation'] {
  display: none;
}

.docs-category-page h3 button,
.docs-product-page h3 button {
  display: none;
}

.category-expandable h3.expandable-header,
.devsite-landing-row h2 {
  font: 500 28px/36px var(--devsite-heading-font-family);
}

.category-expandable h4.expandable-section-header {
  font: 400 24px/30px var(--devsite-heading-font-family);
}

.category-section devsite-pagination {
  margin-top: 32px;
}

.category-expandable .category-section-description {
  margin-bottom: 24px;
}

.category-section-card-custom-icon:hover {
  filter: invert(39%) sepia(100%) saturate(3258%) hue-rotate(202deg) brightness(93%) contrast(95%);
}

.category-section-card-custom-icon {
  width: 40px;
}

.category-expandable devsite-expandable {
  border: var(--tenant-primary-border);
  border-radius: 8px;
  margin-bottom: 24px;
}

.category-expandable .expandable-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 24px 20px 0 20px !important;
  color: var(--tenant-primary-text-color);
}

.category-expandable .expandable-section-header {
  margin: 40px 20px 0 20px !important;
}

.category-expandable:not(.getting-started-expandable) .expandable-header::before {
  content: none !important;
}

.category-expandable .expandable-header::after {
  content: 'expand_more';
  font: 400 36px 'Material Icons';
  color: var(--devsite-link-color);
}

.category-expandable devsite-expandable[expanded] .expandable-header::after {
  content: 'expand_less';
}

.category-expandable :focus .expandable-header::after {
  background: var(--devsite-link-color);
  border-radius: 50%;
  color: var(--devsite-inverted-text-color);
}

.category-expandable .expandable-description {
  margin: 18px 80px 20px 20px;
  color: var(--tenant-primary-text-color);
  font: 400 16px var(--devsite-primary-font-family);
}

.category-expandable devsite-expandable[expanded] .expandable-cards {
  display: grid !important;
  grid: auto-flow / repeat(auto-fill, minmax(210px, 1fr));
  padding: 20px;
}

.expandable-card {
  display: block !important;
}

.docs-category-page .category-expandable .list {
  display: block;
  width: 100%;
  margin: 16px 0;
}

.category-expandable-search {
  max-width: 100% !important;
  padding: 20px !important;
}

.category-expandable-search + span:before {
  padding-top: 12px;
}

/* Product page styling */
.filter-section-heading button {
  display: none;
}

.filter-section-heading,
.filter-section-description {
  text-align: center;
}

.product-section-filter-card .more-info-container span {
  color: var(--tenant-secondary-text-color);
  font-size: 12px;
  margin-right: 12px;
}

.product-section-filter-card .more-info-container i {
  color: var(--devsite-ref-palette--yellow400);
  font-size: 14px;
  line-height: 1.7;
}

.product-section-filter-card .more-info-container {
  margin-top: 8px;
}

.devsite-landing-row-item-icon-container[background='light-blue'] {
  --devsite-background-color: var(--devsite-ref-palette--blue100);
  --devsite-foreground-color: var(--devsite-ref-palette--blue600);
}

[appearance='dark'] .devsite-landing-row-item-icon-container[background='light-blue'] {
  --devsite-background-color: var(--devsite-ref-palette--grey900);
  --devsite-foreground-color: #fff;
}

@media (prefers-color-scheme: dark) {
  [appearance='device'] .devsite-landing-row-item-icon-container[background='light-blue'] {
    --devsite-background-color: var(--devsite-ref-palette--grey900);
    --devsite-foreground-color: #fff;
  }
}

.devsite-landing-row-item-icon-container[size='medium'] {
  --devsite-icon-canvas-size: 40px;
  --devsite-icon-size: 24px;
  margin-bottom: 20px;
}

.product-section .devsite-card-summary {
  display: block;
  max-height: none;
}

.product-list-card-items {
  list-style: none;
  padding: 0;
}

.product-list-card-item {
  margin: 0;
}

.product-list-card-item a p {
  color: var(--devsite-link-color);
  line-height: normal;
}

.product-filter-hidden-tag {
  display: none;
}

.product-filter-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 20px;
  gap: 12px;
}

.product-filter-section input {
  display: block;
  height: 0;
  opacity: 0;
  width: 0;
}

.product-filter-section label {
  border: var(--devsite-primary-border);
  border-radius: 8px;
  display: block;
  padding: 0 16px;
  font: 500 14px/30px var(--devsite-primary-font-family);
  transition: background-color .2s, border .2s, box-shadow .2s;
  user-select: none;
}

.product-filter-section label:hover {
  background: var(--devsite-background-3);
}

.product-filter-section input:focus + label,
.product-filter-section label:focus,
.product-filter-section label:active {
  background: var(--devsite-background-4);
}

.product-filter-section input:focus + label,
.product-filter-section label:focus {
  border-color: var(--devsite-primary-text-color);
}

.product-filter-section input:checked + label {
  background: var(--devsite-button-primary-background);
  border-color: var(--devsite-button-primary-background);
  color: var(--tenant-inverted-text-color);
}

.product-filter-section input:checked + label:before {
  content: 'check';
  display: inline-block;
  font: 18px 'Material Icons';
  margin-inline: -6px 6px;
  margin-top: -2px;
  vertical-align: middle;
}

.product-filter-section input:checked + label:hover {
  box-shadow: var(--devsite-button-box-shadow-active);
}

.product-filter-section input:checked:focus + label,
.product-filter-section input:checked + label:focus,
.product-filter-section input:checked + label:active {
  background: var(--devsite-button-primary-background-active);
  border-color: var(--devsite-button-primary-background-active);
}

.product-section-cards.list {
  margin-top: 32px;
}

.category-section-card-description .material-icons {
  font-size: 18px;
  margin-inline-start: 4px;
  vertical-align: middle;
}

@media screen and (min-width: 768px) {
  .list:not(.getting-started-list) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    grid-gap: var(--devsite-landing-row-item-gap);
  }
}

@media screen and (max-width: 800px) {
  .docs-hero {
    background: var(--devsite-ref-palette--green50);
    background: linear-gradient(90deg, var(--devsite-ref-palette--blue50) 0%,
      var(--devsite-ref-palette--green50) 100%);
  }

  [appearance='dark'] .docs-hero {
    background: var(--devsite-ref-palette--green400);
    background: linear-gradient(90deg, var(--devsite-ref-palette--blue400) 0%,
      var(--devsite-ref-palette--green400) 100%);
  }

  @media (prefers-color-scheme: dark) {
    [appearance='device'] .docs-hero {
      background: var(--devsite-ref-palette--green400);
      background: linear-gradient(90deg, var(--devsite-ref-palette--blue400) 0%,
        var(--devsite-ref-palette--green400) 100%);
    }
  }
}
