/* hide dynamically created useless stuff via css */
#nav-footer,
.contributors-sub,
.overheadIndicator.translationInProgress,
#nav-main-search,
.header-search,
.newsletter-container,
.dropdown-container,
.bc-data .bc-github-link,
.signin-link,
.homepage-hero .homepage-hero-search.hide,
.homepage-header__search.hide,
.navigation__search.hide {
  display: none;
}

/* style from article a.new */
article a.mdn-local-red-link {
  color: #900;
}

/* margin-top of Last modified is not needed */
.metadata-content-container .last-modified-date, .article-footer__last-modified {
  margin-top: 0;
}
/* Article actions, with only the language switcher inside */
.button.action.has-icon.article-actions-toggle {
  display: none;
}

/* region old compatibility table */

/* Extracted from kuma, Licensed MPL-2.0 */
/* https://github.com/mdn/kuma */

.htab {
  margin: 0 auto 1em;
}

.htab > ul {
  text-align: left;
  display: inline;
  padding: 0;
  margin: 0 auto;
  position: relative;
  top: 0;
}

.htab > ul > li {
  background-color: #f1f6f8 !important;
  border: 4px solid transparent;
  color: #4d4e53;
  display: inline;
  list-style-type: none;
  margin: auto;
  opacity: .75;
  position: relative;
  padding: 5px 6px 3px 6px;
  text-align: left;
}

.htab > ul > li.selected {
  background-color: #eaeff2 !important;
  border-top-color: #f4f7f8;
  border-top-color: rgba(212, 221, 228, .25);
  font-weight: 700;
  opacity: 1 !important;
  padding-top: 4px;
  position: relative;
  z-index: 10;
}

.htab > ul > li.selected a {
  color: #000
}

.htab > div {
  background-color: #eaeff2;
  margin-top: 0;
  border: none;
  padding: 12px;
  position: relative;
  z-index: 9;
  word-wrap: break-word
}

.htab > ul,
.htab > ul > li,
.htab > ul > li > a {
  cursor: pointer
}

.htab > ul > li > a {
  padding: 2px 18px 4px;
  text-decoration: none
}

.htab > ul > li > a:focus,
.htab > ul > li > a:hover {
  text-decoration: underline
}

/*noinspection CssOverwrittenProperties*/
table.compat-table {
  border-color: #fff;
  border-color: transparent;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

table.compat-table td {
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #f4f7f8;
  border-color: rgba(212, 221, 228, .25);
  background: #fff;
  vertical-align: top;
  word-wrap: break-word
}

table.compat-table td.header,
table.compat-table th {
  border: none;
  background: 0 0;
  padding: 2px 4px 8px;
  line-height: 1;
}

/* endregion old compatibility table */

/* region yari browser-compatibility-table */
.bc-history.bc-hidden {
  display: none;
}

@media screen and (min-width: 426px) {
  .bc-table tr.bc-history-desktop.bc-hidden {
    display: none;
  }
}

.only-icon > i.ic-prefix::before {
  font-size: 1rem;
  width: 28px;
}

/* endregion yari browser-compatibility-table */


/* region yari mask-image to background fix */
/* https://github.com/website-local/mdn-local/issues/785 */

.mask-fix a.external::after {
  background-size: cover;
  background-color: transparent;
}

[data-theme="dark"] .mask-fix a.external::after {
  filter: invert(1);
}

@media screen and (min-width: 1200px) {
  .mask-fix .main-wrapper .toc {
    background-image: none;
    mask-image: linear-gradient(180deg,transparent 0,#000 10% 90%,transparent);
  }
  .mask-fix .sidebar-container .toc-container {
    background-image: none;
    mask-image: linear-gradient(180deg,transparent 0,#000 3rem calc(100% - 3rem),transparent);
  }
}

/* icons in sidebars */
.mask-fix :is(:is(.left-sidebar details) summary)::before,
/* icon breadcrumbs */
.mask-fix :is(.breadcrumbs li):not(:last-child)::after {
  background-color: transparent;
}
[data-theme="dark"] .mask-fix :is(:is(.left-sidebar details) summary)::before,
[data-theme="dark"] .mask-fix :is(.breadcrumbs li):not(:last-child)::after{
  filter: invert(1);
}
.mask-fix .icon-experimental,
.mask-fix .icon-nonstandard {
  background-color: transparent;
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(200deg) brightness(0.9);
}

.mask-fix .icon-deprecated {
  background-color: transparent;
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(340deg) brightness(0.9);
}

.mask-fix .notecard::before {
  background-color: transparent;
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(200deg) brightness(0.9);
}

.mask-fix .notecard.warning::before,
.mask-fix .notecard.error::before,
.mask-fix .notecard.negative::before,
.mask-fix .notecard.deprecated::before,
.mask-fix .notecard.nonstandard::before {
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(340deg) brightness(0.9);
}

.mask-fix .notecard.success::before{
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(340deg) brightness(0.9);
}

.mask-fix .bc-legend-item-dt .icon,
.mask-fix .bc-table .icon,
.mask-fix .bc-table :is(.bc-table-row-header .bc-icons) .icon {
  background-color: transparent;
  filter: opacity(0.8);
}
[data-theme="dark"] .mask-fix .bc-legend-item-dt .icon,
[data-theme="dark"] .mask-fix .bc-table .icon,
[data-theme="dark"] .mask-fix .bc-table :is(.bc-table-row-header .bc-icons) .icon {
  filter: invert(1) opacity(0.8);
}
.mask-fix .icon.icon-no {
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(340deg) brightness(0.9) !important;
}
.mask-fix .bc-notes-list .bc-supports-dd .icon {
  background-color: var(--border-primary);
  filter: none;
}
.mask-fix .bc-level-preview.icon {
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(200deg) brightness(0.9) !important;
}
.mask-fix .bc-notes-list .bc-level-yes.icon.icon-yes {
  background-color: transparent;
  filter: contrast(0.5) sepia(2) sepia(2) saturate(50) hue-rotate(120deg) brightness(0.6);
}
[data-theme="dark"] .mask-fix .bc-notes-list .bc-level-yes.icon.icon-yes {
  filter: none;
}
.mask-fix abbr[title] {
  text-decoration: none;
}
.mask-fix .example-bad::after,
.mask-fix .example-good::after,
.mask-fix .example-bad::before,
.mask-fix .example-good::before {
  background-color: transparent;
  background-size: cover;
}
.mask-fix .example-bad::after,
.mask-fix .example-bad::before {
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(340deg) brightness(0.9);
}
.mask-fix .example-good::after,
.mask-fix .example-good::before {
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(150deg);
}
.mask-fix .breadcrumbs-container li .breadcrumb::after {
  filter: invert(1);
  background-color: transparent;
}
[data-theme="dark"] .mask-fix .breadcrumbs-container li .breadcrumb::after {
  filter: none;
}
.mask-fix .icon.icon-theme-os-default,
.mask-fix .icon.icon-theme-light,
.mask-fix .icon.icon-theme-dark,
.mask-fix .icon.icon-sidebar,
.mask-fix .icon.icon-cancel,
.mask-fix .icon.icon-sidebar {
  background-color: transparent;
}
.mask-fix .icon.icon-cancel {
  filter: invert(1);
}
[data-theme="dark"] .mask-fix .icon.icon-theme-os-default,
[data-theme="dark"] .mask-fix .icon.icon-theme-light,
[data-theme="dark"] .mask-fix .icon.icon-theme-dark,
[data-theme="dark"] .mask-fix .icon.icon-sidebar,
[data-theme="dark"] .mask-fix .icon.icon-sidebar {
  filter: invert(1);
}
[data-theme="dark"] .mask-fix .icon.icon-cancel {
  filter: none;
}
.mask-fix .icon.icon-unknown {
  filter: invert(0.2);
}
[data-theme="dark"] .mask-fix .icon.icon-unknown {
  filter: invert(1);
}
.mask-fix .languages-switcher-menu > .button .button-wrap::after,
.mask-fix .theme-switcher-menu > .button .button-wrap::after {
  background-color: transparent;
  filter: invert(1) opacity(0.6);
}
[data-theme="dark"] .mask-fix .languages-switcher-menu > .button .button-wrap::after,
[data-theme="dark"] .mask-fix .theme-switcher-menu > .button .button-wrap::after {
  filter: opacity(0.6);
}
.mask-fix .top-navigation-main .menu-toggle::after {
  background-color: transparent;
  filter: invert(1);
}
[data-theme="dark"] .mask-fix .top-navigation-main .menu-toggle::after {
  filter: none;
}
.mask-fix .featured-articles .article-tile p::after {
  background-image: none;
  mask-image: linear-gradient(90deg,transparent,#000 75%);
}
/* 20230716 baseline icons */
/* https://github.com/website-local/mdn-local/issues/848 */
.mask-fix .baseline-indicator summary .browsers .engine .browser::after {
  background-color: transparent;
}
.mask-fix .icon.icon-chevron {
  background-color: transparent;
  filter: invert(1);
}
[data-theme="dark"] .mask-fix .icon.icon-chevron {
  filter: none;
}
/* 20230716 playground copy icons */
.mask-fix .code-example .copy-icon {
  background-color: transparent;
  filter: opacity(0.6);
}
[data-theme="dark"] .mask-fix .code-example .copy-icon {
  filter: invert(1) opacity(0.6);
}
/* 20230716 process: masked icons in blogs */
@media screen and (min-width: 769px) {
  .mask-fix .blog-container .previous-next a.next::after,
  .mask-fix .blog-container .previous-next a.next::before,
  .mask-fix .blog-container .previous-next a.previous::after,
  .mask-fix .blog-container .previous-next a.previous::before {
    background-color: transparent;
  }
  [data-theme="dark"] .mask-fix .blog-container .previous-next a.next::after,
  [data-theme="dark"] .mask-fix .blog-container .previous-next a.next::before,
  [data-theme="dark"] .mask-fix .blog-container .previous-next a.previous::after,
  [data-theme="dark"] .mask-fix .blog-container .previous-next a.previous::before {
    filter: invert(1);
  }
}
@media screen and (min-width: 1441px) {
  .mask-fix .blog-post-container > .toc-container .place.side,
  .mask-fix .blog-post-container > .toc-container .toc {
    background: none;
  }
}
@media screen and (min-width: 1200px) {
  .mask-fix .sidebar-container .toc-container,
  .mask-fix .sidebar-container.toc-container {
    background: none;
  }
}
@media screen and (min-width: 769px) {
  .mask-fix .sidebar-container .sidebar {
    background: none;
  }
}

.mask-fix .category-home .button .icon {
  background-color: transparent;
  filter: none;
}
/* endregion yari mask-image to background fix */

/* This padding is not needed */
div > section.place {
  min-height: 0;
}

aside.article-footer {
  padding: 0.5rem;
}

.article-footer .article-footer-inner p.last-modified-date {
  font-size: var(--type-tiny-font-size);
  margin: 0;
}

.article-footer__inner {
  font-size: calc(0.8 * var(--font-size-small));
  margin: 0;
}
.article-footer {
  padding: 0.5rem;
}
.article-footer__inner p {
  margin: 0;
}

/* https://github.com/website-local/mdn-local/issues/1071 */
.curriculum-content-container.curriculum-module .curriculum-content scrim-inline[url],
.curriculum-content-container.curriculum-overview .curriculum-content scrim-inline[url],
:is(:is(:is(.curriculum-content-container.curriculum-landing .landing-about-container) .landing-about) .scrim-wrapper) mdn-scrim-inline,
:is(:is(.curriculum-content-container.curriculum-overview, .curriculum-content-container.curriculum-module) .curriculum-content) mdn-scrim-inline {
  aspect-ratio: auto;
  margin: 0;
}

/* sidebar filter */
.mask-fix .sidebar-filter-container .sidebar-filter-label .icon {
  filter: invert(1) opacity(0.6);
  background-color: transparent;
}

.mask-fix .sidebar-filter-container .sidebar-filter.has-input .sidebar-filter-label .icon {
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(200deg) brightness(0.9);
  background-color: transparent;
}

[data-theme="dark"] .mask-fix .sidebar-filter-container .sidebar-filter-label .icon {
  filter: opacity(0.6);
}

.sidebar-inner > section.place:empty {
  display: none;
}

/* New compat table */
.bc-table button {
  appearance: none;
  background: none;
  border: medium;
}

.bc-table a:link {
  color: var(--color-link-normal);
}

.bc-table a:visited {
  color: var(--color-link-visited);
}

.bc-table a:hover {
  text-decoration: none;
}

.bc-table code {
  background-color: var(--color-background-secondary);
  padding: 0.125rem 0.25rem;
  width: fit-content;
}

table.bc-table {
  display: grid;
  grid-auto-flow: dense;
}

:is(table.bc-table thead) tr {
  display: contents;
}

:is(:is(table.bc-table thead) tr) td, :is(:is(table.bc-table thead) tr) th {
  display: grid;
  grid-template-columns: subgrid;
}

:is(:is(table.bc-table tbody) tr) td, :is(:is(table.bc-table tbody) tr) th, :is(table.bc-table tbody) tr, table.bc-table tbody {
  display: contents;
}

:is(:is(:is(table.bc-table tbody) tr) th, :is(:is(table.bc-table tbody) tr) td) button {
  display: grid;
  grid-template-columns: subgrid;
}

:is(:is(:is(table.bc-table tbody) tr) th, :is(:is(table.bc-table tbody) tr) td) .timeline {
  grid-column: 1 / -1;
}

.content-section table.bc-table {
  border: 1px solid var(--color-border-primary);
  border-collapse: initial;
  border-radius: 0.25rem;
  border-spacing: 0px;
  margin: 0px;
  overflow-x: auto;
  width: 100%;
}

:is(.content-section table.bc-table) td, :is(.content-section table.bc-table) th {
  border-bottom: 1px solid var(--color-border-primary);
  border-left: 1px solid var(--color-border-primary);
  border-right: 0 solid var(--color-border-primary);
  border-top: 0 solid var(--color-border-primary);
  font-weight: 500;
  padding: 0.4rem;
}

:is(.content-section table.bc-table) td,
:is(.content-section table.bc-table) th,
:is(.bc-table td, .bc-table th) code {
  font-size: var(--font-size-small);
}
:is(.content-section table.bc-table) tr,:is(.content-section table.bc-table) th {
  background: transparent;
}
:is(.content-section table.bc-table) th {
  /*background: var(--color-background-primary);*/
  padding: 0.4rem;
  vertical-align: bottom;
}

:is(.content-section table.bc-table) thead {
  line-height: var(--font-line-ui);
  white-space: nowrap;
}

:is(.bc-table tbody) tr {
  height: 3rem;
}

@media (426px < width) {
  :is(:is(.bc-table tbody) tr):last-child td, :is(:is(.bc-table tbody) tr):last-child th {
    border-bottom-width: 0px;
  }
}

:is(:is(.bc-table tbody) tr) th {
  border-left-width: 0px;
  vertical-align: middle;
}

:is(.bc-table tbody) .bc-support {
  vertical-align: top;
}

:is(:is(.bc-table tbody) .bc-support) button {
  cursor: pointer;
  width: 100%;
}

.bc-supports-no:is(:is(.bc-table tbody) .bc-support) > button > span {
  color: var(--color-text-red);
}

.bc-supports-partial:is(:is(.bc-table tbody) .bc-support) > button > span {
  color: var(--color-text-yellow);
}

.bc-supports-preview:is(:is(.bc-table tbody) .bc-support) > button > span {
  color: var(--color-text-blue);
}

.bc-supports-yes:is(:is(.bc-table tbody) .bc-support) > button > span {
  color: var(--color-text-green);
}

.bc-table .bc-supports {
  margin-bottom: 1rem;
}

:is(.bc-table .bc-supports) .icon-wrap {
  background: var(--color-background-page);
  padding-bottom: 2px;
}

:is(.bc-table .bc-supports.bc-supports-removed-partial) .bcd-cell-text-copy {
  color: var(--color-text-yellow);
}

:is(.bc-table .icon-wrap) .bc-support-level {
  border: 0px !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0px !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

:is(.bc-table .bc-support) > button > .icon-wrap {
  display: block;
}

:is(.bc-table .bc-support.bc-supports-removed-partial) .bcd-cell-text-copy {
  color: var(--color-text-red);
}

.bc-table .bc-feature {
  align-items: center;
  border: medium;
  display: flex;
  text-align: left;
  width: 100%;
}

:is(.bc-table .bc-feature) > * {
  border: medium !important;
  flex-basis: max-content;
}

.bc-table .bc-feature-depth-2, :is(.content-section table.bc-table) th.bc-feature-depth-2 {
  border-left: 7px solid var(--color-border-primary);
}

.bc-table .bc-feature-depth-3, :is(.content-section table.bc-table) th.bc-feature-depth-3 {
  border-left: 15px solid var(--color-border-primary);
}

.bc-head-txt-label {
  line-height: var(--font-line-ui);
  text-orientation: sideways;
  transform: rotate(180deg);
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.bc-support {
  text-align: center;
  vertical-align: middle;
}

.bc-level-no {
  background-color: var(--color-text-red);
}

.bc-level-partial {
  background-color: var(--color-text-yellow);
}

.bc-level-preview {
  background-color: var(--color-text-blue);
}

.bc-legend-items-container {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.bc-legend-tip {
  font-size: var(--font-size-small);
  font-style: italic;
  font-variation-settings: "slnt" -10;
  margin-bottom: 1rem;
  margin-top: 0px;
}

@media print {
  .bc-legend-tip {
    display: none !important;
  }
}

.bc-legend-item {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.bc-legend-item-dt {
  display: flex;
}

.bc-legend-item-dt .icon {
  background-color: var(--color-border-secondary);
}

:is(.content-section table.bc-table) .bc-platforms th {
  align-items: center;
  display: flex;
  justify-content: center;
}

:is(.content-section table.bc-table) .bc-platforms td {
  border: medium;
}

:is(.content-section table.bc-table) .bc-browsers th {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: end;
  vertical-align: bottom;
}

:is(.content-section table.bc-table) .bc-browsers td {
  border-width: 0px 0px 1px;
}

.bc-notes-list {
  margin: 0.5rem 0px;
  position: relative;
  text-align: left;
  width: 100%;
}

.bc-notes-list::before {
  background: var(--color-border-primary);
  bottom: 4px;
  content: "";
  left: 7px;
  margin-top: 0.25rem;
  position: absolute;
  top: 0px;
  width: 3px;
  z-index: -1;
}

.bc-notes-list .bc-notes-wrapper:last-child dd:last-child {
  position: relative;
}

:is(.bc-notes-list .bc-notes-wrapper:last-child dd:last-child)::before {
  background: var(--color-background-page);
  bottom: 0px;
  content: "";
  left: 7px;
  position: absolute;
  top: 3px;
  width: 3px;
  z-index: -1;
}

:is(.bc-notes-list .bc-supports-dd) .icon-wrap {
  background-color: var(--color-background-page);
  padding-bottom: 2px;
}

.bc-notes-list .bc-version-label {
  display: inline;
}

.bc-notes-list abbr {
  margin-right: 4px;
  text-decoration: none;
}

.bc-notes-list dd {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  text-indent: -1.5rem;
}

:is(.bc-notes-list dd):last-child {
  margin-bottom: 2rem;
}

.bc-notes-wrapper {
  color: var(--color-border-secondary);
  margin-bottom: 1rem;
}

.bc-notes-wrapper:last-child {
  margin-bottom: 0px;
}

dl.bc-notes-list dt.bc-supports {
  margin-top: 1rem;
}

:is(dl.bc-notes-list dt.bc-supports):first-child {
  margin-top: 0px;
}

dl.bc-notes-list dd.bc-supports-dd {
  margin-bottom: 1rem;
}

:is(dl.bc-notes-list dd.bc-supports-dd):last-child {
  margin-bottom: 0px;
}

.only-icon span {
  border: 0px !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0px !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.bc-table-row-header {
  padding: 0.25em;
  text-align: left;
  width: 100%;
}

.bc-table-row-header code {
  overflow: hidden;
}

.bc-table-row-header .bc-icons {
  display: inline-flex;
  gap: 0.5ch;
  margin-left: 0.5ch;
  vertical-align: text-top;
}

:is(.bc-table-row-header .bc-icons) .icon {
  background-color: var(--color-text-secondary);
}

:is(.main-page-content .bc-legend) dd, :is(.main-page-content .bc-legend) dt {
  margin-bottom: 0px;
  margin-left: 0px;
  margin-top: 0px;
}

.main-page-content .bc-supports-dd {
  margin: 0px;
}

@media (width <= 426px) {
  .bc-table {
    grid-template-columns: auto;
  }

  .bc-table thead {
    display: none;
  }

  :is(.bc-table tr) td.bc-support {
    border-right: medium;
    border-bottom: medium;
    border-left: medium;
    border-image: none;
    border-top: 1px solid var(--color-border-primary);
    display: block;
  }

  :is(:is(.bc-table tr) td.bc-support):last-child {
    border-bottom: 1px solid var(--color-border-primary);
  }

  .bc-table .timeline {
    margin-left: 0.25rem;
  }

  .bc-table tr:not(:first-of-type) .bc-feature {
    border-top: 2px solid var(--color-border-primary);
  }

  .bc-table .bc-feature, .bc-table .bc-support > button {
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .table-container {
    overflow-x: auto;
  }
}

@media (426px < width) {
  .bc-table {
    grid-template-columns: minmax(20vw, min-content) repeat(var(--compat-browser-count), auto);
  }

  .bc-table thead {
    display: contents;
  }

  :is(:is(.bc-table thead) .bc-platforms) th {
    vertical-align: revert;
  }

  .bc-table tbody {
    --border: 1px solid var(--color-border-primary);
  }

  :is(:is(.bc-table tbody) tr):not(:first-child) .bc-feature, :is(:is(:is(.bc-table tbody) tr):not(:first-child) th, :is(:is(.bc-table tbody) tr):not(:first-child) td) > * {
    border-top: var(--border);
  }

  :is(:is(:is(.bc-table tbody) tr) th:not(:first-child), :is(:is(.bc-table tbody) tr) td:not(:first-child)) > * {
    border-left: var(--border);
  }

  :is(.content-section table.bc-table) td, :is(.content-section table.bc-table) th {
    background: inherit;
    padding: 0.25rem;
  }

  .bc-table td.bc-support {
    padding: 0px;
  }

  :is(.bc-table td.bc-support) > button {
    padding: 0.25rem;
  }

  button[aria-expanded="false"] ~ .timeline {
    display: none;
  }

  .bc-table .timeline {
    border-left: medium !important;
    border-top: var(--border);
  }

  :is(.bc-table .bc-has-history) > button[aria-expanded="true"] {
    --padding-bottom-offset: -2px;
    border-bottom: 2px solid var(--color-border-primary);
  }

  :is(.bc-table .bc-has-history) > button:hover {
    background: var(--color-background-secondary);
  }

  .table-container-inner {
    position: relative;
  }

  .table-container-inner::after {
    bottom: 0px;
    content: "";
    height: 10px;
    position: absolute;
    right: 0px;
    width: 10px;
  }

  .bcd-cell-text-wrapper .bc-browser-name, .bcd-cell-text-wrapper .bc-support-level {
    display: none;
  }

  .bc-notes-list {
    margin-left: 20%;
    max-width: 80vw;
    width: auto;
  }

  .bc-support .bc-support-level {
    display: none;
  }
}

@media (769px < width) {
  .bc-table {
    grid-template-columns: minmax(25%, max-content) repeat(var(--compat-browser-count), calc(75% / var(--compat-browser-count)));
  }

  .bc-table .icon {
    --size: calc(1rem + 1px);
  }
}

@media (1200px < width) {
  .bc-table {
    grid-template-columns: minmax(33%, max-content) repeat(var(--compat-browser-count), calc(67% / var(--compat-browser-count)));
  }
}

.bcd-cell-text-wrapper {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

@media (426px < width) {
  .bcd-cell-text-wrapper {
    align-items: center;
    flex-direction: column;
  }
}

.bcd-timeline-cell-text-wrapper {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
}

.bcd-cell-text-copy {
  color: var(--color-text-primary);
}

.bc-supports-yes .bcd-cell-text-copy {
  color: var(--color-text-green);
}

.bc-supports-partial .bcd-cell-text-copy {
  color: var(--color-text-yellow);
}

.bc-supports-no .bcd-cell-text-copy {
  color: var(--color-text-red);
}

.bcd-cell-icons {
  display: flex;
  gap: 0.5rem;
}

@media (426px < width) {
  .bcd-cell-icons {
    display: block;
  }

  .bc-table td.bc-support > button {
    padding-bottom: calc(.5rem + var(--padding-bottom-offset, 0px));
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.5rem;
  }
}

.lazy-compat-table .table-container-inner {
  margin: 0;
}

/* compat table icons */

.lazy-compat-table .icon, .bc-table .icon {
  --size: var(--icon-size,1rem);
  background-color: var(--color-border-secondary);
  display: inline-block;
  flex-shrink: 0;
  height: var(--size);
  mask-size: cover;
  background-size: cover;
  vertical-align: middle;
  width: var(--size);
}

/** Platform icons. */
.lazy-compat-table .icon.icon-desktop {
  mask-image: url("./icon/monitor.svg");
}

.lazy-compat-table .icon.icon-mobile {
  mask-image: url("./icon/smartphone.svg");
}

.lazy-compat-table .icon.icon-server {
  mask-image: url("./icon/server.svg");
}

/** Browser icons. */

.lazy-compat-table .icon.icon-bun {
  mask-image: url("./icon/browser/bun.svg");
}

.lazy-compat-table .icon.icon-chrome {
  mask-image: url("./icon/browser/chrome.svg");
}

.lazy-compat-table .icon.icon-deno {
  mask-image: url("./icon/browser/deno.svg");
}

.lazy-compat-table .icon.icon-edge {
  mask-image: url("./icon/browser/edge.svg");
}

.lazy-compat-table .icon.icon-firefox {
  mask-image: url("./icon/browser/firefox.svg");
}

.lazy-compat-table .icon.icon-edge {
  mask-image: url("./icon/browser/edge.svg");
}

.lazy-compat-table .icon.icon-nodejs {
  mask-image: url("./icon/browser/nodejs.svg");
}

.lazy-compat-table .icon.icon-opera {
  mask-image: url("./icon/browser/opera.svg");
}

.lazy-compat-table .icon.icon-safari {
  mask-image: url("./icon/browser/safari.svg");
}

.lazy-compat-table .icon.icon-samsunginternet {
  mask-image: url("./icon/browser/samsung-internet.svg");
}

.lazy-compat-table .icon.icon-webview {
  mask-image: url("./icon/browser/webview.svg");
}

/** Status icons. */

.lazy-compat-table .icon.icon-no {
  mask-image: url("./icon/circle-x.svg");
}

.lazy-compat-table .icon.icon-partial {
  mask-image: url("./icon/circle-slash.svg");
}

.lazy-compat-table .icon.icon-yes {
  mask-image: url("./icon/check.svg");
}

.lazy-compat-table .icon.icon-yes-circle {
  mask-image: url("./icon/circle-check.svg");
}

.lazy-compat-table .icon.icon-experimental {
  mask-image: url("./icon/flask-conical.svg");
}

.lazy-compat-table .icon.icon-deprecated {
  mask-image: url("./icon/trash-2.svg");
}

.lazy-compat-table .icon.icon-nonstandard {
  mask-image: url("./icon/triangle-alert.svg");
}

.lazy-compat-table .icon.icon-footnote {
  mask-image: url("./icon/asterisk.svg");
}

.lazy-compat-table .icon.icon-unknown {
  mask-image: url("./icon/circle-help.svg");
}

.lazy-compat-table .icon.icon-prefix {
  mask-image: url("./icon/mdn-prefix.svg");
}

.lazy-compat-table .icon.icon-altname {
  mask-image: url("./icon/git-fork.svg");
}

.lazy-compat-table .icon.icon-disabled {
  mask-image: url("./icon/flag.svg");
}

.lazy-compat-table .icon.icon-more {
  mask-image: url("./icon/ellipsis.svg");
}

.lazy-compat-table .icon.icon-preview {
  mask-image: url("./icon/flask-conical.svg");
}

:is(.lazy-compat-table .bc-support) .icon.icon-removed-partial {
  background-color: var(--color-text-red);
  mask-image: url("./icon/circle-x.svg");
}

:is(.lazy-compat-table .bc-support) .timeline .icon.icon-removed-partial {
  background-color: var(--color-text-yellow);
  mask-image: url("./icon/circle-slash.svg");
}

.bc-notes-list .bc-level-yes.icon.icon-yes {
  background-color: var(--color-text-green);
  mask-image: url("./icon/circle-check.svg");
}

:is(.bc-notes-list .bc-supports-dd) .icon {
  background-color: var(--color-text-secondary);
  mask-image: url("./icon/circle.svg");
}

/** Platform icons. */
.mask-fix .lazy-compat-table .icon.icon-desktop {
  mask-image: none;background-image: url("./icon/monitor.svg");
}

.mask-fix .lazy-compat-table .icon.icon-mobile {
  mask-image: none;background-image: url("./icon/smartphone.svg");
}

.mask-fix .lazy-compat-table .icon.icon-server {
  mask-image: none;background-image: url("./icon/server.svg");
}

/** Browser icons. */

.mask-fix .lazy-compat-table .icon.icon-bun {
  mask-image: none;background-image: url("./icon/browser/bun.svg");
}

.mask-fix .lazy-compat-table .icon.icon-chrome {
  mask-image: none;background-image: url("./icon/browser/chrome.svg");
}

.mask-fix .lazy-compat-table .icon.icon-deno {
  mask-image: none;background-image: url("./icon/browser/deno.svg");
}

.mask-fix .lazy-compat-table .icon.icon-edge {
  mask-image: none;background-image: url("./icon/browser/edge.svg");
}

.mask-fix .lazy-compat-table .icon.icon-firefox {
  mask-image: none;background-image: url("./icon/browser/firefox.svg");
}

.mask-fix .lazy-compat-table .icon.icon-edge {
  mask-image: none;background-image: url("./icon/browser/edge.svg");
}

.mask-fix .lazy-compat-table .icon.icon-nodejs {
  mask-image: none;background-image: url("./icon/browser/nodejs.svg");
}

.mask-fix .lazy-compat-table .icon.icon-opera {
  mask-image: none;background-image: url("./icon/browser/opera.svg");
}

.mask-fix .lazy-compat-table .icon.icon-safari {
  mask-image: none;background-image: url("./icon/browser/safari.svg");
}

.mask-fix .lazy-compat-table .icon.icon-samsunginternet {
  mask-image: none;background-image: url("./icon/browser/samsung-internet.svg");
}

.mask-fix .lazy-compat-table .icon.icon-webview {
  mask-image: none;background-image: url("./icon/browser/webview.svg");
}

/** Status icons. */

.mask-fix .lazy-compat-table .icon.icon-no {
  mask-image: none;background-image: url("./icon/circle-x.svg");
}

.mask-fix .lazy-compat-table .icon.icon-partial {
  mask-image: none;background-image: url("./icon/circle-slash.svg");
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(35deg) brightness(0.9);
}

.mask-fix .lazy-compat-table .icon.icon-yes {
  mask-image: none;background-image: url("./icon/check.svg");
}

.mask-fix .lazy-compat-table .icon.icon-yes-circle {
  mask-image: none;background-image: url("./icon/circle-check.svg");
}

.mask-fix .lazy-compat-table .icon.icon-experimental {
  mask-image: none;background-image: url("./icon/flask-conical.svg");
}

.mask-fix .lazy-compat-table .icon.icon-deprecated {
  mask-image: none;background-image: url("./icon/trash-2.svg");
}

.mask-fix .lazy-compat-table .icon.icon-nonstandard {
  mask-image: none;background-image: url("./icon/triangle-alert.svg");
}

.mask-fix .lazy-compat-table .icon.icon-footnote {
  mask-image: none;background-image: url("./icon/asterisk.svg");
}

.mask-fix .lazy-compat-table .icon.icon-unknown {
  mask-image: none;background-image: url("./icon/circle-help.svg");
}

.mask-fix .lazy-compat-table .icon.icon-prefix {
  mask-image: none;background-image: url("./icon/mdn-prefix.svg");
}

.mask-fix .lazy-compat-table .icon.icon-altname {
  mask-image: none;background-image: url("./icon/git-fork.svg");
}

.mask-fix .lazy-compat-table .icon.icon-disabled {
  mask-image: none;background-image: url("./icon/flag.svg");
}

.mask-fix .lazy-compat-table .icon.icon-more {
  mask-image: none;background-image: url("./icon/ellipsis.svg");
}

.mask-fix .lazy-compat-table .icon.icon-preview {
  mask-image: none;background-image: url("./icon/flask-conical.svg");
}

.mask-fix :is(.lazy-compat-table .bc-support) .icon.icon-removed-partial {
  background-color: transparent;
  mask-image: none;background-image: url("./icon/circle-x.svg");
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(35deg) brightness(0.9);
}

.mask-fix :is(.lazy-compat-table .bc-support) .timeline .icon.icon-removed-partial {
  background-color: transparent;
  mask-image: none;background-image: url("./icon/circle-slash.svg");
}

.mask-fix .bc-notes-list .bc-level-yes.icon.icon-yes {
  background-color: transparent;
  mask-image: none;background-image: url("./icon/circle-check.svg");
}

.mask-fix :is(.bc-notes-list .bc-supports-dd) .icon {
  background-color: transparent;
  mask-image: none;background-image: url("./icon/circle.svg");
}

:is(.content-section .lazy-compat-table dl) dd {
  margin-left: 0;
}

/* misc icons */
@media (width <= 1006px) {
  .mask-fix .navigation__button::before {
    background-color: transparent;
  }
  [data-theme="dark"] .mask-fix .navigation__button::before {
    filter: invert(1);
  }
}

.mask-fix .example-bad:is(.code-example pre)::after,
.mask-fix .example-good:is(.code-example pre)::after {
  background-color: transparent;
}
.mask-fix .menu__tab-button::after,
.mask-fix :is(:is([data-section="learn"], [data-section="tools"]) .menu__tab-button)::before {
  background-color: transparent;
}
[data-theme="dark"] .mask-fix .menu__tab-button::after,
[data-theme="dark"] .mask-fix :is(:is([data-section="learn"], [data-section="tools"]) .menu__tab-button)::before,
.mask-fix [data-scheme="dark"] .menu__tab-button::after,
.mask-fix [data-scheme="dark"] :is(:is([data-section="learn"], [data-section="tools"]) .menu__tab-button)::before{
  filter: invert(1);
}

.mask-fix .featured-articles__summary::after {
  background-image: none;
  mask-image: linear-gradient(90deg,#0000,#000 75%);
}

.mask-fix .prev:is(.prev-next li) a::before,
.mask-fix .next:is(.prev-next li) a::after {
  background-color: transparent;
  filter: contrast(0.1) sepia(2) sepia(2) saturate(50) hue-rotate(200deg) brightness(0.9);
}

.mask-fix :is(.blog-post-previous-next__previous:is(.blog-post-previous-next a),
 .blog-post-previous-next__next:is(.blog-post-previous-next a))::after,
.mask-fix :is(.blog-post-previous-next__previous:is(.blog-post-previous-next a),
 .blog-post-previous-next__next:is(.blog-post-previous-next a))::before {
  background-color: transparent;
}

[data-theme="dark"] .mask-fix :is(.blog-post-previous-next__previous:is(.blog-post-previous-next a),
 .blog-post-previous-next__next:is(.blog-post-previous-next a))::after,
[data-theme="dark"] .mask-fix :is(.blog-post-previous-next__previous:is(.blog-post-previous-next a),
 .blog-post-previous-next__next:is(.blog-post-previous-next a))::before {
  filter: invert(1);
}

.mask-fix .menu__panel-icon[data-icon="mdn-m"]::before,
.mask-fix .menu__panel-icon[data-icon="users"]::before,
.mask-fix .menu__panel-icon[data-icon="chart-no-axes-combined"]::before,
.mask-fix .menu__panel-icon[data-icon="github"]::before {
  background-color: transparent;
}

.code-example iframe, .code-example mdn-play-runner {
  width: 100%;
}