:root>* {
  --md-text-font: "NokiaPureText";
  --md-primary-fg-color: #7d33f2;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark: #90030C;

  --md-accent-fg-color: #23ABB6;

  --nokia-heading-font-color: #7d33f2;

  /* get started home button */
  --nokia-get-started-btn-color: #7d33f2;
  --nokia-get-started-text-color: #ffffff;
  --nokia-get-started-hover-text-color: #ffffff;
  --nokia-get-started-hover-btn-color: #23ABB6;

  /* wide annotations */
  --md-tooltip-width: 600px;
}

[data-md-color-scheme="slate"][data-md-color-primary="indigo"] {
  --md-typeset-a-color: #ffffff;
  --md-accent-fg-color: #23ABB6;

  /* --nokia-heading-font-color: #bec8d2; this is a greyish version for comparison */
  --nokia-heading-font-color: #ffffff;
  --nokia-get-started-btn-color: #bec8d2;
  --nokia-get-started-text-color: #000000;
  --nokia-get-started-hover-text-color: #ffffff;
  --nokia-get-started-hover-btn-color: #7d33f2;
}

.md-grid {
  /* a slightly increased width for the main content ~1300px */
  max-width: 65rem;
}

.md-post--excerpt {
  /* a slightly increased width for the main content ~1300px */
  max-width: 40rem;
}

body,
input {
  font-weight: 300;
}

/* colors for headings */
.md-typeset h1,
h2,
h3,
h4 {
  font-family: NokiaPureHeadlineLight;
  color: var(--nokia-heading-font-color)
}

/* on firefox strong was getting font weight 400, which was not bold */
strong,
b {
  font-weight: bold;
}

.md-typeset ul {
  list-style-type: square;
}

/* setting the code font size a bit smaller. This is commented out now, as it breaks linenumbers in code blocks */
/* .md-typeset code {
  font-size: .8em;
}


@media screen and (max-width: 76.1875em) {
  .md-header__button.md-icon[for=__drawer] {
    order: -1
  }

  .md-header__button.md-logo {
    display: block;
  }
}

.md-container.secondary-section {
  border: 0;
}

/* need to have decide if it is better or not
  making the content width bigger
.md-grid {
  max-width: 1440px;
} */

/* Table styling */
/* we hide the tr with the th.hide-th class 
this is needed when we want to use a table without a header
*/
tr:has(th.hide-th) {
  display: none;
}

.md-typeset table:not([class]) th {
  background-color: #9e9e9e;
}

th {
  color: #FFFFFF !important;
}

/* Pumping heart */
.md-typeset .mdx-heart {
  -webkit-animation: heart 1s infinite;
  animation: heart 1s infinite;
  color: #e91e63
}

/* make announce link color always white */
.md-banner__inner a {
  color: #ffffff
}

/* adjust colors in the "not latest version" banner */
.md-banner--warning a strong {
  color: var(--md-default-fg-color);
}

.md-banner--warning a:hover strong {
  color: var(--md-primary-fg-color);
}

/* shadow effect for images and divs for video */
.img-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* styles for inter H1 code <hr> */
.ext-code-divider {
  margin-top: 3em;
  text-align: center;
}

.ext-code-divider a {
  display: inline-block;
  transition: transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), color 125ms;
}

.ext-code-divider a:focus,
.ext-code-divider a:hover {
  transform: scale(1.2);
}

.ext-code-divider hr {
  display: inline-block;
  width: 40px;
  margin: 16px;
  vertical-align: middle;
  background-color: currentColor;
  border: none;
}

/* vertical alignment for svg in h1 divider element */
.ext-code-divider>.vertical-middle {
  vertical-align: middle;
}

/* make 2nd prompt line of srlinux render bold with srlinux-pygments */
:is(.language-srl, .language-srlmin) :is(.n) {
  font-weight: 900;
}

/* classes to make iframe elements responsive */
.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* this is for low-height iframe audio containers */
.iframe-audio2-container {
  position: relative;
  width: 100%;
  padding-bottom: 2rem;
}

.iframe-audio2-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* embedded output for code blocks
  use as
  ```
  echo test
  ```
  <div class="embed-result highlight">
  ```
  test
  ```
  </div>
 */
.md-typeset .embed-result {
  margin-top: -1.125em;
}

/* START border for content tabs 
https://github.com/squidfunk/mkdocs-material/discussions/4157#discussioncomment-8270993
*/
.md-typeset .tabbed-set {
  border: 0.5px solid var(--md-typeset-table-color);
}

.md-typeset .tabbed-content {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

/* END border for content tabs */


/* START scrollable code blocks used in code snippets */
div.highlight.code-scroll-lg pre>code {
  max-height: 80vh;
}

div.highlight.code-scroll-sm pre>code {
  max-height: 50vh;
}

/* END scrollable code blocks used in code snippets */

/* START hide code copy and selection icons until on hover */
/* Hide the nav element by default */
div.highlight .md-code__nav {
  display: none;
}

/* Show the nav element with half opacity when the div is hovered over */
div.highlight:hover .md-code__nav {
  display: flex;
  opacity: 0.2;
  transition: opacity 0.3s ease;
}

/* Make the nav element fully visible when hovered directly */
div.highlight:hover .md-code__nav:hover {
  opacity: 1;
}

/* END hide code copy and selection icons until on hover */

/* START code-example admonition styles */
:root {
  --md-admonition-icon--code-example: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.22 4.97a.75.75 0 0 1 1.06 0l6.5 6.5a.75.75 0 0 1 0 1.06l-6.5 6.5a.749.749 0 0 1-1.275-.326.75.75 0 0 1 .215-.734L21.19 12l-5.97-5.97a.75.75 0 0 1 0-1.06m-6.44 0a.75.75 0 0 1 0 1.06L2.81 12l5.97 5.97a.749.749 0 0 1-.326 1.275.75.75 0 0 1-.734-.215l-6.5-6.5a.75.75 0 0 1 0-1.06l6.5-6.5a.75.75 0 0 1 1.06 0"/></svg>')
}

.md-typeset .admonition.code-example,
.md-typeset details.code-example {
  border-color: #9e9e9e;
}

.md-typeset .code-example>.admonition-title,
.md-typeset .code-example>summary {
  background-color: #9e9e9e1a;
}

.md-typeset .code-example>.admonition-title::before,
.md-typeset .code-example>summary::before {
  background-color: #9e9e9e;
  -webkit-mask-image: var(--md-admonition-icon--code-example);
  mask-image: var(--md-admonition-icon--code-example);
}

.md-typeset .code-example>.admonition-title::after,
.md-typeset .code-example>summary::after {
  background-color: #9e9e9e;
}

/* END code-example admonition styles */

/* START subtle-note admonition styles */
:root {
  --md-admonition-icon--subtle-note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1-2.05-2.05 1-1c.1-.11.24-.16.38-.16m-1.97 1.74 2.06 2.06-6.06 6.06H7.07v-2.06z"/></svg>')
}

.md-typeset .admonition.subtle-note,
.md-typeset details.subtle-note {
  border-color: #9e9e9e;
}

.md-typeset .subtle-note>.admonition-title,
.md-typeset .subtle-note>summary {
  background-color: #9e9e9e1a;
}

.md-typeset .subtle-note>.admonition-title::before,
.md-typeset .subtle-note>summary::before {
  background-color: #9e9e9e;
  -webkit-mask-image: var(--md-admonition-icon--subtle-note);
  mask-image: var(--md-admonition-icon--subtle-note);
}

.md-typeset .subtle-note>.admonition-title::after,
.md-typeset .subtle-note>summary::after {
  background-color: #9e9e9e;
}

/* END subtle-note admonition styles */

/* START subtle-info admonition styles */
:root {
  --md-admonition-icon--subtle-info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"/></svg>')
}

.md-typeset .admonition.subtle-info,
.md-typeset details.subtle-info {
  border-color: #9e9e9e;
}

.md-typeset .subtle-info>.admonition-title,
.md-typeset .subtle-info>summary {
  background-color: #9e9e9e1a;
}

.md-typeset .subtle-info>.admonition-title::before,
.md-typeset .subtle-info>summary::before {
  background-color: #9e9e9e;
  -webkit-mask-image: var(--md-admonition-icon--subtle-info);
  mask-image: var(--md-admonition-icon--subtle-info);
}

.md-typeset .subtle-info>.admonition-title::after,
.md-typeset .subtle-info>summary::after {
  background-color: #9e9e9e;
}

/* END subtle-info admonition styles */

/* START subtle-question admonition styles */
:root {
  --md-admonition-icon--subtle-question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10Z"/></svg>')
}

.md-typeset .admonition.subtle-question,
.md-typeset details.subtle-question {
  border-color: #9e9e9e;
}

.md-typeset .subtle-question>.admonition-title,
.md-typeset .subtle-question>summary {
  background-color: #9e9e9e1a;
}

.md-typeset .subtle-question>.admonition-title::before,
.md-typeset .subtle-question>summary::before {
  background-color: #9e9e9e;
  -webkit-mask-image: var(--md-admonition-icon--subtle-question);
  mask-image: var(--md-admonition-icon--subtle-question);
}

.md-typeset .subtle-question>.admonition-title::after,
.md-typeset .subtle-question>summary::after {
  background-color: #9e9e9e;
}

/* END subtle-question admonition styles */

/* START thin scrollbar styles */
/* First unset all rules that break Chrome styling */
.md-typeset pre>code,
.md-search__scrollwrap,
.md-sidebar__scrollwrap {
  scrollbar-color: unset;
  scrollbar-width: unset;
}

.md-typeset pre>code:hover,
.md-search__scrollwrap:hover,
.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:hover {
  scrollbar-color: unset;
}

.md-tooltip2__inner {
  scrollbar-width: unset;
}

/* Wrap new scrollbar properties in @supports rule for browsers without `::-webkit-scrollbar-*` support */
/* This way chrome won't override `::-webkit-scrollbar-*` selectors */
/* https://developer.chrome.com/docs/css-ui/scrollbar-styling */
@supports not selector(::-webkit-scrollbar) {

  .md-typeset pre>code,
  .md-search__scrollwrap,
  .md-sidebar__scrollwrap {
    scrollbar-color: var(--md-default-fg-color--lighter) #0000;
    scrollbar-width: thin;
  }

  .md-typeset pre>code:hover,
  .md-search__scrollwrap:hover,
  .md-sidebar__scrollwrap:focus-within,
  .md-sidebar__scrollwrap:hover {
    scrollbar-color: var(--md-accent-fg-color) #0000;
  }

  .md-tooltip2__inner {
    scrollbar-width: thin;
  }
}

/* Restore hover color for Chrome */
@supports selector(::-webkit-scrollbar) {

  .md-typeset pre>code:hover::-webkit-scrollbar-thumb,
  .md-search__scrollwrap:hover::-webkit-scrollbar-thumb,
  .md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb,
  .md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
    background-color: var(--md-accent-fg-color);
  }
}

/* END thin scrollbar styles */

/* text next to UI EDA icons */
.icon__text {
  /* font-weight: 700; */
  font-family: NokiaPureText;
  font-size: 0.70rem;
  letter-spacing: 0.005rem;
  margin-left: 0.2rem;
}

.circle_icon__text {
  /* font-weight: 700; */
  font-family: NokiaPureText;
  font-size: 0.70rem;
  letter-spacing: 0.005rem;
  margin-left: 0.2rem;
}

.ui__icon {
  --md-icon-size: 1.125em;
  display: inline-flex;
  height: var(--md-icon-size);
  vertical-align: middle;
  margin-bottom: 0.1rem;
}

/* polka dot background */
.polka {
  background-image:
    radial-gradient(var(--md-steps-border-color) 10%, transparent 10%);
  background-position: 0px 0px;
  background-size: 10px 10px;
}