@import url('../../../_external/fonts.googleapis.com/css2/index_8ea98bee.html.css');
@import url('../../../_external/fonts.googleapis.com/css2/index_bae8c259.html.css');

:root {
  --md-text-font: "Noto Sans", sans-serif;  /* Body text, headings */
  --md-code-font: "Roboto Mono", monospace; /* Body text, headings */
}

:root,
[data-md-color-scheme=default],
[data-md-color-scheme=slate]{
  /* Primary color (used in both light and dark) */
  --md-primary-fg-color:               #009688;
  --md-primary-fg-color--light:        #009688;
  --md-primary-fg-color--dark:         #00675B;

  /* Accent color */
  --md-accent-fg-color:                #00d4aa;

  --md-typeset-a-color:                var(--md-primary-fg-color--light) !important;

  --md-footer-bg-color:                var(--md-primary-fg-color) !important;
  --md-footer-fg-color:                #FFFFFF;

  /* --md-code-bg-color:                  #F2F2F2; */

  /* Use single color for codes. otherwise some parts gCodes etc. is hard to read */
  /* --md-code-hl-color:                  var(--md-code-fg-color); */
  /* --md-code-hl-number-color:           var(--md-code-fg-color); */
  /* --md-code-hl-special-color:          var(--md-code-fg-color); */
  /* --md-code-hl-function-color:         var(--md-code-fg-color); */
  /* --md-code-hl-constant-color:         var(--md-code-fg-color); *//* variables, gcodes */
  /* --md-code-hl-keyword-color:          var(--md-code-fg-color); */
  /* --md-code-hl-string-color:           var(--md-code-fg-color); */
  /* --md-code-hl-name-color:             var(--md-code-fg-color); */
  /* --md-code-hl-color--light:           var(--md-default-fg-color--light); */
  /* --md-code-hl-operator-color:         var(--md-default-fg-color--light); */
  /* --md-code-hl-punctuation-color:      var(--md-default-fg-color--light); */
  /* --md-code-hl-comment-color:          var(--md-default-fg-color--light); */
  /* --md-code-hl-generic-color:          var(--md-default-fg-color--light); */
  /* --md-code-hl-variable-color:         var(--md-default-fg-color--light); */
}

[data-md-color-scheme=slate]{
  --md-default-bg-color:               #0a0f1a;
  --md-default-fg-color:               #EFEFF0;
  --md-primary-fg-color:               #00675B;
  --md-footer-bg-color--dark:          #00000052;
  --md-code-bg-color:                  #242428;
}

/* /////// HEADER */

/* Reduce vertical margin on logo to make header more compact */
.md-header__button.md-logo {
    margin: 0 .2rem;
}

/* Increase size of logo on header */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    height: 1.6rem;
}

/* Reduce margin between logo and title */
[dir=ltr] .md-header__title {
    margin-left: 0.5rem;
}

/* /////// SIDEBARS */

/* Use bold font on selected navigation bar item */
.md-nav__item .md-nav__link--active {
    font-weight: 600;
}

@media screen and (min-width: 76.25em) {
    /* Hide title on left sidebar */
    .md-nav--primary .md-nav__title[for=__drawer] {
        display:none;
    }
    /* Remove leftover margin for first item*/
	.md-nav--primary>.md-nav__list>.md-nav__item:first-of-type>a{
		margin-top: 0 !important;
	}
}

/* Fixes unnecassary scrollbars on sidebars */
.md-nav {
    margin-bottom: 0;
}

/* remove top margin for page to gain space */
.md-main__inner {
    margin-top: 0;
}

/* /////// TITLES */

/* Use bolder titles */
.md-typeset h1{ font-weight: 550}
.md-typeset h2{ font-weight: 550}
.md-typeset h3{ font-weight: 550}
.md-typeset h4{ font-weight: 700}

/* Match color of titles */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    color:var(--md-typeset-color);
}

/* Reduce margins after headers / titles */
.md-typeset h1 {
	margin-bottom: 0 !important;
	margin-block-end: 0.4em;
}
.md-typeset h2 {
	margin-bottom: 0 !important;
	margin-top: 1.0em !important;
	margin-block-end: 0.4em;
}
.md-typeset h3 {
	margin-bottom: 0 !important;
	margin-top: 1.0em !important;
	margin-block-end: 0.3em;
}
.md-typeset h4 {
	margin-bottom: 0 !important;
	margin-block-end: 0.2em;
}
h1 + p,
h2 + p,
h3 + p,
h4 + p{
    margin-block-start: 0.4em;
}

h1 + ul, h2 + ul, h3 + ul, h4 + ul,
h1 + ol, h2 + ol, h3 + ol, h4 + ol{
    margin-top: 0.4em !important;
}

/* Add thin borders for separation */
.md-typeset  h2,
.md-typeset  h3 {
    display: flex;
    align-items: center;
    width: 100%;
}
.md-typeset  h2::after,
.md-typeset  h3::after {
    content: '';
    flex: 1;
    height: 0.1em;
    background-color: var(--md-typeset-table-color);
    margin-left: 0.2em;
}

/* /////// Images */

/* Vertically align images to make it inline with text */
.md-typeset img {
    vertical-align: middle;
}

img[height="22"] { /* Text icons */
    height: 22px;
}
img[height="45"] { /* Patterns table */
    height: 45px;
}
img[height="200"] { /* Calibrations guide preview */
    height: 200px;
}

/* /////// LINKS */

/* Make hyperlinks slightly bolder */
.md-typeset a{
    font-weight: 500;
}
/* Show underline on links while hovering */
.md-typeset a:hover {
    text-decoration: underline;
}

/* /////// LISTS / BULLETS */

/* Reduce left margin for bullets */
[dir=ltr] .md-typeset ol li,
[dir=ltr] .md-typeset ul li {
    margin-left: 0.5em;
}


/* Reduce line height on lists */
.md-typeset ol li,
.md-typeset ul li {
    margin-bottom: .3em;
}

/* Use circle instead disc as list item marker. just less distracting */
.md-typeset ul {
    list-style-type: circle;
}

/* Use bolder font on list markers */
.md-typeset ol li::marker,
.md-typeset ul li::marker {
    font-weight: 550;
}

/* /////// ANNOTIONS */

:root {
    --md-admonition-icon--recommended: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m-2-12.5v9l6-4.5-6-4.5z"/></svg>');
}

/* Use regular font size on annotions */
.md-typeset .admonition,
.md-typeset details {
    font-size: .8rem;
}

.md-typeset .admonition,
.md-typeset details {
    background-color: var(--md-admonition-bg-color);
    border: none;
    border-left: 0.3rem solid #448aff;
    border-radius: 0;
    margin: 1.2em 0;
}

.md-typeset .admonition-title,
.md-typeset summary {
    background-color: transparent !important;
    padding-bottom: 0 !important;
    padding-top: .2rem !important;
}

.md-typeset .admonition-title:before,
.md-typeset summary:before {
    top: .4em !important;
}

.md-typeset .admonition>:last-child,
.md-typeset details>:last-child {
    margin-bottom: .4rem;
}

.md-typeset .admonition>:last-child,
.md-typeset details>:last-child {
    margin-bottom: 0;
    margin-block-start: 0.3em;
    margin-block-end: 0.2em;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
    border-color: #ff9100;
    background-color: #ff910005;
}

.md-typeset .admonition.warning .admonition-title,
.md-typeset details.warning summary{
    color: #ff9100;
}

.md-typeset .admonition.note,
.md-typeset details.note {
    border-color: #448aff;
    background-color: #448aff05;
}
.md-typeset .admonition.note .admonition-title,
.md-typeset details.note summary{
    color: #448aff;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
    border-color: #00bfa5;
    background-color: #00bfa505;
}
.md-typeset .admonition.tip .admonition-title,
.md-typeset details.tip summary{
    color: #00bfa5;
}

.md-typeset .admonition.recommended,
.md-typeset details.recommended {
    border-color: #43a047;
    background-color: #43a04708;
}

.md-typeset .admonition.tip:has(.orca-video-poster-link),
.md-typeset details.tip:has(.orca-video-poster-link) {
    border-color: #43a047;
    background-color: #43a04708;
}

.md-typeset .admonition.recommended .admonition-title,
.md-typeset details.recommended summary{
    color: #43a047;
}

.md-typeset .admonition.recommended .admonition-title:before,
.md-typeset details.recommended summary:before{
    background-color: #43a047;
    -webkit-mask-image: var(--md-admonition-icon--recommended);
    mask-image: var(--md-admonition-icon--recommended);
}

.md-typeset .admonition.tip:has(.orca-video-poster-link) .admonition-title,
.md-typeset details.tip:has(.orca-video-poster-link) summary {
    display: none;
}

.md-typeset .admonition.tip:has(.orca-video-poster-link)>p:has(.orca-video-title),
.md-typeset details.tip:has(.orca-video-poster-link)>p:has(.orca-video-title) {
    margin: 0;
}

.md-typeset .orca-video-title {
    align-items: center;
    color: #43a047;
    display: flex;
    font-weight: 700;
    gap: .6rem;
    margin: .2rem 0 .8rem;
}

.md-typeset .orca-video-title:before {
    background-color: #43a047;
    content: "";
    display: inline-block;
    flex: 0 0 1.2em;
    height: 1.2em;
    -webkit-mask-image: var(--md-admonition-icon--recommended);
    mask-image: var(--md-admonition-icon--recommended);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 1.2em;
}

.md-typeset .orca-video-description {
    color: var(--md-default-fg-color);
    display: block;
    font-size: .8rem;
    margin: .35rem 0 .8rem;
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
    border-color: #ff1744;
    background-color: #ff174405;
}
.md-typeset .admonition.danger .admonition-title,
.md-typeset details.danger summary{
    color: #ff1744;
}

.md-typeset .orca-video-embed {
    background-color: #000;
    margin: .6rem 0 .2rem;
    overflow: hidden;
    width: 100%;
}

.md-typeset .orca-video-poster-link {
    width: 100%;
}

.md-typeset .orca-video-poster-link {
    background-color: #000;
    display: block;
}

.md-typeset .orca-video-poster-link:focus-visible {
    outline: .12rem solid #43a047;
    outline-offset: .12rem;
}

.md-typeset .orca-video-poster-link img {
    display: block;
    height: auto;
    width: 100%;
}

.md-typeset .orca-video-credit {
    color: var(--md-default-fg-color--light);
    display: block;
    font-size: .72rem;
    margin: .4rem 0 0;
}

/* /////// TABLES */

/* Slighly reduce table cell height */
.md-typeset table:not([class]) td {
    padding: .75em 1.25em;
    vertical-align: middle;
}

.md-typeset table:not([class]) {
    width: auto;
    table-layout: auto;
}

/* Keep names in the first column whole, so the column widens instead of breaking a name mid-word */
.md-typeset table:not([class]) td:first-child code {
    word-break: normal;
    overflow-wrap: normal;
}

/* A second cell split with <br> lines up with the names stacked beside it, so it must not wrap */
.md-typeset table:not([class]) td:nth-child(2):has(br) {
    white-space: nowrap;
}

/* Vertical align table cells so icons sit in the middle */
.md-typeset table td,
.md-typeset table th {
    vertical-align: middle;
}

/* Keep pattern icons fixed at 45px inside tables */
.md-typeset table img[alt^="param_"] {
    max-width: none;
    max-height: none;
    width: auto;
    height: 45px !important;
}

/* /////// SCROLL TO TOP */
.md-top {
    font-size: 0; /* hides text */
    padding: .8rem; /* makes bigger and circle */
    background-color: var(--md-primary-fg-color); /* makes more noticable */
    color: var(--md-primary-bg-color);
}

/* /////// FOOTER */
/* Fixes sidebar content rendering over footer when all items expanded */
.md-footer{
    z-index: 10;
}

/* /////// PAGE SPESIFIC CHANGES */
/* :has selector might not work on old browsers */
/* using ~body required to get elements properly */
head:has(link[rel="canonical"][href$="keyboard_shortcuts.html"])~body td>code {
  background-color: transparent;
  color: var(--md-typeset-color);
  font-weight: 550;
}