@font-face {
  font-family: "Cascadia Code";
  src: ".fonts/woff2/CascadiaCode.woff2";
}

:root {

  /* # color palette */
  
  --thinkers-mist: #DDE3ED ;
  --onteon-core: #15223D ;
  --full-stack-blue: #516C88  ;
  --azul-maya-remote: #149FDC ;
  --binary-mint: #2CAD69 ;
  --one-instance-yellow: #F79F03 ;
  --onteon-danger: #DC149F ;
  --onteon-core-contrast: #3D1522 ;
  --onteon-core-contrast-light: #D789A2 ;
  --onteon-string: #0a6093;

  --rgb-onteon-core: 20, 33, 61 ;
  --rgb-full-stack-blue: 80, 109, 133 ;
  --rgb-thinkers-mist: 221, 227, 237 ;
  --rgb-azul-maya-remote: 0, 160, 233 ;
  --rgb-binary-mint: 0, 188, 112 ;
  --rgb-one-instance-yellow: 255, 164, 0 ;
  --rgb-onteon-danger: 220, 20, 159 ;
  --rgb-onteon-core-contrast: 61, 21, 34 ;
  --rgb-onteon-core-contrast-light: 215, 137, 162 ;
  --rgb-onteon-string: 10, 96, 147;
  /* custom sizing */
  --sidebar-width: 12rem;

  /* apply fonts */
  --md-code-font: "Cascadia Code";
  --md-code-font-family: "Cascadia Code";
  
}

:root [data-md-color-scheme="onteon"] {

  /* ################################ color overrides ################################ */

  /* ######## material theme colors overrides ######## */

  /* accents */
  --md-accent-fg-color:                rgba(var(--rgb-binary-mint), 0.75);
  --md-accent-fg-color--transparent:   rgba(var(--rgb-azul-maya-remote), 0.71);
  --md-accent-bg-color:                rgba(var(--rgb-binary-mint), 0.9);
  --md-accent-bg-color--light:         rgba(var(--rgb-azul-maya-remote), 0.51);

  /* navbar */
  --md-primary-fg-color:        var(--thinkers-mist);
  --md-primary-bg-color:        var(--full-stack-blue);

  /* background */
  --md-default-bg-color:        var(--thinkers-mist);
  --md-default-fg-color:        rgba(var(--rgb-onteon-core),0.75);

  /* code blocks */
  --md-code-fg-color:           var(--full-stack-blue);
  --md-code-bg-color:           var(--thinkers-mist);
  --md-code-hl-color:           var(--azul-maya-remote);
  --md-code-hl-number-color:    var(--azul-maya-remote);
  --md-code-hl-special-color:   var(--onteon-danger);
  --md-code-hl-function-color:  var(--one-instance-yellow);
  --md-code-hl-constant-color:  var(--onteon-danger);
  --md-code-hl-keyword-color:   var(--binary-mint);
  --md-code-hl-string-color:    rgba(var(--rgb-onteon-string), 0.75);
  --md-code-hl-name-color:      rgba(var(--rgb-onteon-string), .95);
  --md-code-hl-operator-color:  rgba(var(--rgb-onteon-core-contrast), .5);
  --md-code-hl-punctuation-color: rgba(var(--rgb-onteon-core-contrast), .5);
  --md-code-hl-comment-color:   rgba(var(--rgb-full-stack-blue), .75);
  --md-code-hl-generic-color:   rgba(var(--rgb-azul-maya-remote), .75);
  --md-code-hl-variable-color:  rgba(var(--rgb-onteon-danger), .75);

  /* Page title and table background*/
  --md-default-fg-color--light: rgba(var(--full-stack-blue), .9);

  /* Sidebar */
  --md-default-fg-color--lighter: rgba(var(--rgb-azul-maya-remote), .5);


  --md-typeset-color: rgba(var(--rgb-onteon-core),0.85);
  /* --md-typeset-color: #f00; */
  --md-typeset-a-color: var(--azul-maya-remote);
  --md-typeset-mark-color: rgba(var(--rgb-one-instance-yellow),0.5);
  --md-typeset-del-color: var(--onteon-core-contrast);
  --md-typeset-ins-color: rgba(var(--rgb-onteon-core),0.5);
  --md-typeset-kbd-color: var(--full-stack-blue);
  --md-typeset-kbd-accent-color: var(  --thinkers-mist);
  --md-typeset-kbd-border-color: rgba(var(--rgb-full-stack-blue),0.5);
  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);
  
  /* --md-footer-fg-color: rgba(var(--rgb-thinkers-mist),0.85);
  --md-footer-fg-color--light: rgba(var(--rgb-thinkers-mist),0.6);
  --md-footer-fg-color--lighter: rgba(var(--rgb-thinkers-mist),0.3);
  --md-footer-bg-color: var(--onteon-core);
  --md-footer-bg-color--dark: rgba(0,0,0,0.25); */

  --md-footer-fg-color: rgba(var(--rgb-onteon-core),0.85);
  --md-footer-fg-color--light: rgba(var(--rgb-onteon-core),0.6);
  --md-footer-fg-color--lighter: rgba(var(--rgb-onteon-core),0.3);
  --md-footer-bg-color: var(--thinkers-mist);
  --md-footer-bg-color--dark: rgba(var(--rgb-full-stack-blue),0.25);

  /* ######## specific element overrides ######## */
  /* --ovr-theme-background: #EBEBF5; */
  --ovr-theme-background: #F3F3F5;
  --ovr-table-header-bg: var(--full-stack-blue);
  --ovr-table-header-fg: var(--thinkers-mist);
  --ovr-table-body-bg: var(--md-default-bg-color);
  --ovr-sidebar-bg: var(--ovr-theme-background);
  --ovr-sidebar-border-color: var(--md-primary-fg-color);
  --ovr-active-nav-item-bg: rgba(var(--rgb-thinkers-mist), 0.5);
  /* --ovr-active-nav-item-bg: var(--thinkers-mist); */
  --ovr-toc-bg: var(--ovr-active-nav-item-bg);
  --ovr-search-bg: var(--thinkers-mist);
  --ovr-tabbed-bg: rgba(var(--rgb-thinkers-mist),.5);
  --ovr-code-shadowbox-color-rgb: var(--rgb-azul-maya-remote);
}

:root [data-md-color-scheme="onteon-dark"] {

   /* ######## material theme colors overrides ######## */

  /* accents */
  --md-accent-fg-color:                rgba(var(--rgb-binary-mint), 0.75);
  --md-accent-fg-color--transparent:   rgba(var(--rgb-azul-maya-remote), 0.51);
  --md-accent-bg-color:                rgba(var(--rgb-binary-mint), 0.9);
  --md-accent-bg-color--light:         rgba(var(--rgb-azul-maya-remote), 0.71);

  /* navbar */
  --md-primary-fg-color:        var(--full-stack-blue);
  /* --md-primary-bg-color:        var(--thinkers-mist); */
  --md-primary-bg-color:        rgba(var(--rgb-thinkers-mist),0.75);

  /* background */
  --md-default-fg-color:        rgba(var(--rgb-thinkers-mist),0.75);
  --md-default-bg-color:        var(--onteon-core);

  /* code blocks */
  --md-code-fg-color:           var(--full-stack-blue);
  /* --md-code-bg-color:           rgba(50,0,50,0.2); */
  --md-code-bg-color:           rgba(var(--rgb-onteon-core-contrast),0.125);
  --md-code-hl-color:           var(--azul-maya-remote);
  --md-code-hl-number-color:    var(--azul-maya-remote);
  --md-code-hl-special-color:   var(--onteon-danger);
  --md-code-hl-function-color:  var(--binary-mint);
  --md-code-hl-constant-color:  var(--onteon-danger);
  --md-code-hl-keyword-color:   var(--one-instance-yellow);
  --md-code-hl-string-color:    rgba(var(--rgb-binary-mint), .5);
  --md-code-hl-name-color:      rgba(var(--rgb-binary-mint), .75);
  --md-code-hl-operator-color:  rgba(var(--rgb-onteon-core-contrast-light), .50);
  --md-code-hl-punctuation-color: rgba(var(--rgb-onteon-core-contrast-light), .83);
  --md-code-hl-comment-color:   var(--onteon-string);
  --md-code-hl-generic-color:   rgba(var(--rgb-azul-maya-remote), .75);
  --md-code-hl-variable-color:  rgba(var(--rgb-binary-mint), .75);


  /* Page title and table background*/
  --md-default-fg-color--light: rgba(var(--thinkers-mist), .9);

/* some tabel magic */
  --md-default-fg-color--lighter: rgba(var(--rgb-full-stack-blue), .5);
  --md-default-fg-color--lightest: rgba(var(--rgb-thinkers-mist), .5);


  --md-typeset-color: rgba(var(--rgb-thinkers-mist),0.75);
  /* --md-typeset-color: #f00; */
  --md-typeset-a-color: var(--azul-maya-remote);
  --md-typeset-mark-color: rgba(var(--rgb-one-instance-yellow),0.5);
  --md-typeset-del-color: var(--onteon-core-contrast);
  --md-typeset-ins-color: rgba(var(--rgb-onteon-core),0.5);
  --md-typeset-kbd-color: var(--full-stack-blue);
  --md-typeset-kbd-accent-color: var(  --thinkers-mist);
  --md-typeset-kbd-border-color: rgba(var(--rgb-full-stack-blue),0.5);
  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);

  --md-footer-fg-color: var(--thinkers-mist);
  --md-footer-fg-color--light: var(--full-stack-blue);
  --md-footer-fg-color--lighter: rgba(var(--rgb-full-stack-blue),0.5);
  --md-footer-bg-color: var(--full-stack-blue);
  --md-footer-bg-color--dark: rgba(var(--rgb-onteon-core),0.75);

  /* ######## specific element overrides ######## */

  --ovr-theme-background: var(--onteon-core);
  --ovr-table-header-bg: var(--full-stack-blue);
  --ovr-table-header-fg: var(--thinkers-mist);
  --ovr-table-body-bg: rgba(0,0,0,0.25);
  --ovr-sidebar-bg: rgba(0,0,0,0.333);
  --ovr-sidebar-border-color: var(--onteon-core);
  --ovr-active-nav-item-bg: var(--onteon-core);
  --ovr-toc-bg: var(--ovr-active-nav-item-bg);
  --ovr-search-bg: var(--full-stack-blue);
  --ovr-tabbed-bg: rgba(var(--rgb-onteon-core-contrast),0.125);
  --ovr-code-shadowbox-color-rgb: var(--rgb-full-stack-blue);
  --ovr-chromium_sidebar_bug: var(--ovr-theme-background);

  }


  /* Logo size */
.md-header__button.md-logo img, .md-header__button.md-logo svg {
  width: var(--sidebar-width);
  padding: 0rem;
  height: 1.6rem;
}
.md-header__button.md-logo {
  padding: 0rem;
}
.md-grid{
  max-width: 100vw;
  /* max-height: 200rem; */
}

.md-content{
  padding: 3.6%;
  padding-top: 0.5%;
  border-left: 1px solid var(--ovr-sidebar-border-color);
  min-height: calc(100vh - 2.4rem - 151px); /*100% skrin size - header - footer*/
  background-color: var(--ovr-theme-background);
  /* height: 85vh; */
}

.md-main {
  background-color: var(--ovr-sidebar-bg);
}

.md-main__inner{
  margin-top: 0rem;
}

/* Sidebar customization */

.md-sidebar { 
  width: var(--sidebar-width);
  margin: 0 0 0rem;
  min-height: calc(100vh - 2.4rem - 151px);
  max-height: 90vh;
  background-color: rgba(0,0,0,0);
  /* border-color: var(--ovr-sidebar-border-color); */
  border-width: 0px;
  border-top-width: 0px;
  border-bottom-width: 0px;
  border-style: solid;
  /* scrollbar-color: var(--md-default-fg-color--lighter) var(--ovr-chromium_sidebar_bug); */
}

.md-sidebar__scrollwrap { 
  /* scrollbar-color: var(--md-default-fg-color--lighter) var(--ovr-chromium_sidebar_bug); */
  margin: 0 0 0rem;
}

/* .md-typeset__scrollwrap,
.md-sidebar__scrollwrap,
.md-search__scrollwrap,
.md-typeset pre > code {
  scrollbar-color: var(--md-default-fg-color--lighter) var(--ovr-chromium_sidebar_bug);
  scrollbar-width: thin;

  &:hover {
    scrollbar-color: var(--md-accent-fg-color) var(--ovr-chromium_sidebar_bug);
  }
} */

.md-nav {
  line-height: 1.7rem;
}
li.md-nav__item--active{
  background-color: var(--ovr-active-nav-item-bg);
}

.md-nav__link{
  padding-left: 0.7rem;
}
.md-nav__link--active{
    border-left: 4px solid var(--md-typeset-a-color) ;
    /* background-color: rgba(0,0,0,0); */
}
/* Navigation Scrollbar fix for Chromium */

/* .md-nav--integrated .md-nav__link[for="__toc"] ~ .md-nav{
  border-left: .05rem solid var(--md-typeset-a-color);
  display: block;
  margin-bottom: 1.25em;
} */

/* .md-typeset__table > table:nth-child(1) > thead:nth-child(1) {
  background-color: var(--ovr-table-header-bg);
  color: var(--ovr-table-header-fg);
} */

.md-typeset table:not([class]) th {
	background-color: var(--ovr-table-header-bg);
	color: var(--ovr-table-header-fg);
	min-width: 5rem;
	padding: .9375em 1.25em;
	vertical-align: top;
}

.md-typeset table:not([class]) {
	background-color: var(--ovr-table-body-bg);
	border-radius: .1rem;
	box-shadow: 0 .52rem .5rem rgba(var(--rgb-full-stack-blue).15),0 0 .25rem rgba(var(--rgb-full-stack-blue),.21);
	display: inline-block;
	font-size: .64rem;
	max-width: 100%;
	overflow: auto;
	touch-action: auto;
}

/* .md-search-result {
  color: var(--md-default-fg-color);
  background-color: var(--ovr-search-bg);
}

.md-search__inner {
  color: var(--ovr-search-bg);
  background-color: var(--ovr-search-bg);
} */

div.tabbed-set {
  background-color: var(--ovr-tabbed-bg);
}

/* logo in low width mode */

.md-nav__title .md-nav__button.md-logo img, .md-nav__title .md-nav__button.md-logo svg {
	/* fill: currentColor;
	display: block;
	height: 2.4rem; */
	width: 90%;
  position: fixed;
  padding-right: 0.3rem;
}

.md-nav--primary .md-nav__title[for="__drawer"] {
	/* background-color: var(--md-primary-fg-color);
	color: var(--md-primary-bg-color); */
	text-align: center;
}

.md-typeset pre > code{
  box-shadow: 0 0 .2rem rgba(var(--ovr-code-shadowbox-color-rgb),.031),0 .1rem .4rem rgba(var(--ovr-code-shadowbox-color-rgb),.02);
}