:root,
[data-md-color-scheme=default] {
  --cbx-primary: #1E73F8;
  --cbx-accent: #1E73F8;
  --cbx-border-radius: 6px;
  --cbx-post-navigation-border-color: rgba(0, 0, 0, .1);
  --cbx-box-shadow: 2px 2px 0 0 rgba(0,0,0,.05);
  --cbx-transition-time: .25s;
  --cbx-navigation-color: rgba(28, 29, 31, .64);
  --cbx-max-width: 1500px;
  --cbx-outer-spacing: 32px;
  --cbx-gradient-background: linear-gradient(to left top, #f1f6fd 50%, transparent 50%);
  
  /* Colors */
  --info-primary: #2196F3;
  --info-light: #BBDEFB;

  --warning-primary: rgb(254, 154, 0);
  --warning-light: rgb(255, 245, 236);
  
  --danger-primary: rgb(251, 44, 54);
  --danger-light: rgb(255, 242, 239);

  --success-primary: rgb(0, 200, 83);
  --success-light: rgba(0, 200, 83, 0.1);

  --quote-primary: rgb(158, 158, 158);
  --quote-light: rgba(158, 158, 158, 0.1);
  
  --example-primary: rgb(124, 77, 255);
  --example-light: rgba(124, 77, 255, 0.1);

  --bug-primary: rgb(245, 0, 87);
  --bug-light: rgba(245, 0, 87, 0.1);
  
  --failure-primary: rgb(255, 82, 82);
  --failure-light: rgba(255, 82, 82, 0.1);
  
  --question-primary: rgb(100, 221, 23);
  --question-light: rgba(100, 221, 23, 0.1);

  --tip-primary: rgb(0, 191, 165);
  --tip-light: rgba(0, 191, 165, 0.1);
  
  --abstract-primary: rgba(0, 176, 255);
  --abstract-light: rgba(0, 176, 255, 0.1);

  --note-primary: rgb(68, 138, 255);
  --note-light: rgba(68, 138, 255, 0.1);
  
  --header-bg-color: #fff;
  --header-text-color: #222;
  --header-border-color: rgba(0, 0, 0, 0.1);
  --md-typeset-color: rgb(28, 29, 31) !important;
  

  --md-primary-fg-color: #1E73F8;
  --md-accent-fg-color: #1c63d5;
  --md-primary-fg-color--light: #FFFFFF;
  --md-primary-fg-color--dark: #222;
  
  --md-header-fg-color: #222;
  --md-header-bg-color: #FFFFFF;
  --md-header-shadow: 0 0 0 transparent;
}
@media screen and (max-width: 76.2344em) {
  :root,
  [data-md-color-scheme=default] {
    --cbx-outer-spacing: 20px;
  }
}

/* HEADER */
.md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-typeset-color);
  box-shadow: none !important;
  border-bottom: 1px solid var(--header-border-color);
  height: 64px;
  display: flex;
  align-items: center;
  .md-header__inner {
    flex: 1;;
    max-width: var(--cbx-max-width);
    padding: 0 var(--cbx-outer-spacing);
  }
}

label.md-header__button.md-icon[for="__drawer"] {
  padding-left: 0;
  padding-right: 0;
  margin-right: 12px;
  color: #666;
}
@media screen and (max-width: 59.9844em) {
  label.md-header__button.md-icon[for="__search"] {
    color: #666;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: var(--cbx-border-radius);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      border-color: rgba(0, 0, 0, .2);
      box-shadow: var(--cbx-box-shadow);
    }
  }
}

/* SIDEBAR */
.md-sidebar.md-sidebar {
  width: 288px;
  .md-sidebar__inner.md-sidebar__inner {
    padding-right: 0;
  }
}

.md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-track {
  background-color: transparent !important;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: transparent !important;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-track:focus-within,
.md-sidebar__scrollwrap::-webkit-scrollbar-track:active,
.md-sidebar__scrollwrap:hover::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:focus-within,
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:active,
.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
  background-color: rgba(136, 136, 136, 0.5) !important;
  border-radius: 6px;
}

/* Firefox */
.md-sidebar__scrollwrap {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

.md-sidebar__scrollwrap:focus,
.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:active,
.md-sidebar__scrollwrap:hover {
  scrollbar-color: rgba(136, 136, 136, 0.5) rgba(255, 255, 255, 0.1) !important;
}


/* NAVIGATION */
@media screen and (min-width: 76.2344em) {

  .md-sidebar__scrollwrap {
    .md-nav__icon {
      margin-top: 5px;
      color: rgba(0, 0, 0, .2) !important;
    }
  }

  .md-nav--primary .md-nav__list {
    padding-bottom: 0 !important;
  }

  .md-sidebar__scrollwrap:hover {
    .md-nav__icon {
      color: rgba(0, 0, 0, .45) !important;
    }
  }

  .md-nav__link {
    padding-bottom: 0;
    font-weight: 500;
    font-size: 14px;
    color: var(--cbx-navigation-color);
    margin-top: 0 !important;
    a {
      display: block;
      padding-top: 6px !important;
      padding-bottom: 6px !important;
      margin-top: 0 !important;
    }
  }

  
  a.md-nav__link {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  
  .md-nav__link--active {
    font-weight: 700;
  }
  
  .md-nav__item.md-nav__item a {
    a {
      padding-top: 6px;
      padding-bottom: 6px;
      margin-top: 0 !important;
    }
  }
  
  .md-nav__item--section>.md-nav__link {
      text-transform: uppercase;
      color: var(--md-typeset-color) !important;
      font-size: 12px !important;
      padding-top: 20px;
      padding-bottom: 6px;
      margin-top: 0 !important;
  }
  
  label.md-nav__link {
    font-size: 14px !important;
  }
  
  li li .md-nav[aria-expanded="true"] {
    border-left: 1px solid rgba(0, 0, 0, .1);
    margin-bottom: 6px !important;
  }
}

@media screen and (max-width: 76.2344em) {
  .md-content {
    margin-left: auto;
    margin-right: auto;
  }
}
.md-content {
  max-width: 864px;
  .md-content__inner.md-typeset {
    font-size: 16px;
    line-height: 1.6;
    color: var(--md-typeset-color);
  }
  
  .md-content__inner {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: 700;
      letter-spacing: -.025em;
      color: var(--md-typeset-color);
    }
    h1 {
      font-size: 36px;
    }
    h2 {
      
    }
  }
}


/* LOGO */
.md-header__button.md-logo {
  padding-left: 0;
  padding-right: 0;
  display: block !important;
  img {
    height: 20px;
  }
}

@media screen and (min-width: 76.2344em) {
  
  .md-header__title {
    opacity: 0;
    pointer-events: none;
  }
  
  .md-nav__title {
    display: none;
    font-size: 12px;
    text-transform: uppercase !important;
    font-weight: 700;
    padding-top: 1.5em;
    padding-bottom: 0.5em;
    color: rgba(0, 0, 0, 0.6);
  }
}

[data-md-color-scheme="slate"] .md-nav__title {
  color: rgba(255, 255, 255, 0.6);
}

/* FOOTER */
.md-footer.md-footer {
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, .1);
  padding: var(--cbx-outer-spacing);
  .md-footer-meta {
    background-color: transparent;
  }
  .md-footer-meta__inner {
    padding: 0;
    max-width: var(--cbx-max-width);
  }

  .cbx-footer-info {
    list-style: none;
    font-size: 14px;
    text-align: right;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    a {
      color: var(--md-typeset-color);
      &:hover {
        color: var(--md-typeset-color);
        text-decoration: underline;
      }
    }
  }

  .cbx-footer-link {
    height: 20px;
    margin: 10px;
    img {
      height: 100%;
      display: block;
    }
  }
}

.md-main {
  padding: 0 calc(var(--cbx-outer-spacing) - .6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100vh;
  max-width: var(--cbx-max-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.md-main__inner {
  gap: 3rem;
  max-width: var(--cbx-max-width);
  width: 100%;
  margin-top: calc(.5rem + 11px);
  flex-grow: 1;
}

.md-header__title {
  margin-left: 0 !important;
  .md-header__topic {
    font-size: 16px !important;
    font-weight: 700 !important;
    font-style: normal !important;
  }
} 


/* PAGE NAVIGATION */
.cbx-page-navigation {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 1em 0;
}

@media screen and (max-width: 59.9844em) {
  .cbx-page-navigation {
    flex-direction: column;
    gap: 8px;
  }
}

.cbx-page-navigation__item {
  flex: 1;
  display: flex;
  a {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: var(--cbx-border-radius);
    border: 1px solid var(--cbx-post-navigation-border-color);
    padding: 16px;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    transition: all var(--cbx-transition-time) ease-in-out;
    color: var(--md-typeset-color);
    &:hover {
      color: #666;
      border-color: rgba(0, 0, 0, .25);
      box-shadow: var(--cbx-box-shadow);
    }
    .cbx-page-navigation__item__label {
      font-size: 12px;
      color: #666;
    }
    .navigation__item__text { 
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-right: 10px;
    }
  }
  
  svg {
    width: .85rem;
    stroke: #666;
  }
  
  &.previous {
    a {
      flex-direction: row-reverse;
      text-align: right;
      .navigation__item__text {
        padding-right: 0;
        padding-left: 10px;
      }
    }
  }
}

@media screen and (max-width: 76.2344em) {
  .md-sidebar.md-sidebar {
    width: 80vw;
    .md-nav--primary .md-nav__title {
      background: #fff;
      text-transform: uppercase;
      color: var(--md-typeset-color) !important;
      font-size: 12px !important;
      .md-nav__button.md-logo {
        height: 20px;
        img {
          height: 20px;
        }
      }
    }
    .md-nav__item .md-nav__link {
      font-size: 14px;
      font-weight: 500;
    }
  }
  [dir=ltr] .md-sidebar--primary {
      left: -80vw;
      opacity: 0;
  }
  [data-md-toggle=drawer]:checked~.md-container .md-sidebar--primary {  
    transform: translateX(80vw);
    opacity: 1;
  }
}

/* SEARCH */
.md-search__form {
  border-radius: var(--cbx-border-radius);
  border: 1px solid rgba(0, 0, 0, .1);
  background: #fff;
  color: var(--md-typeset-color);
  height: unset;
  input {
    font-size: 16px;
    padding-left: 1.9rem !important;
    height: 36px;
    transition: all var(--cbx-transition-time) ease-in-out;
    outline: none !important;
    &:hover {
      box-shadow: var(--cbx-box-shadow);
    }
    &:focus {
      box-shadow: var(--cbx-box-shadow) inset;
    }
  }
  input::placeholder {
    color: #999;
  }
  .md-search__suggest {
    display: none;
  }
  .md-search__icon,
  .md-search__options {
    top: .5rem;
    margin-top: -.5rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    svg {
      height: 1rem;
      width: 1rem;
    }
  }
}

.md-search__overlay input {
  outline: none !important;
}

@media screen and (min-width: 60em) {
  .md-search__output {
    top: 40px;
  }
}

.image-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.image-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 
@media (max-width: 768px) {
  .image-grid-container {
    grid-template-columns: 1fr 1fr;
  }
} */

.image-grid-item img {
  width: 100%;
  height: auto;
  cursor: pointer;
  object-fit: cover;
}

.image-grid-item figcaption {
  margin: 0;
  text-align: center;
  font-size: 11px;
  color: rgba(0, 0, 0, .5);
  p {
    margin: 5px 0;
  }
}

/* Hide TOC title */
label[for="__toc"] {
  display: none;
}

@media (max-width: 1363px) {
  .md-sidebar.md-sidebar--secondary[data-md-type="toc"] {
    display: none !important;
  }
}


/* Admonition  */
.admonition.admonition {
  --admonition-color: rgb(120, 120, 120);
  --admonition-background: rgb(247, 247, 247);
  border: none;
  box-shadow: none;
  background-color: var(--admonition-background);
  position: relative;
  padding-left: 50px;
  .admonition-title {
    text-indent: -110vw;
    background-color: unset;
    padding-left: 16px;
    flex: none;
    width: 46px;
    position: absolute;
    left: 10px;
    top: 0;
    &::before {
      top: 0.625rem;
      background-color: var(--admonition-color);
    }
  }
  &.tip {
    --admonition-color: var(--tip-primary);
    --admonition-background: var(--tip-light);
  }
  &.seealso,
  &.hint,
  &.important,
  &.note {
    --admonition-color: var(--note-primary);
    --admonition-background: var(--note-light);
  }
  &.attention,
  &.caution,
  &.warning {
    --admonition-color: var(--warning-primary);
    --admonition-background: var(--warning-light);
  }
  &.success {
    --admonition-color: var(--success-primary);
    --admonition-background: var(--success-light);
  }
  &.error,
  &.danger {
    --admonition-color: var(--danger-primary);
    --admonition-background: var(--danger-light);
  }
}

.flex-it {
  flex: 1;
}

/* DETAILS */
.md-typeset.md-typeset details {
  border: 1px solid rgba(0, 0, 0, .1);
  font-size: 16px;
  color: #666;
  border-radius: 0;
  margin: 0;
  &[open],
  &:hover {
    color: var(--md-typeset-color);
    box-shadow: none;
  }
  summary {
    font-weight: 400;
    padding-top: 16px;
    padding-left: 40px;
    padding-right: 16px;
    padding-bottom: 16px;
    background-color: transparent;
    &::before {
      display: none;
    }
    &::after {
      width: 20px;
      height: 20px;
      top: 1.125em;
      right: unset;
      left: 10px;
      svg {
        width: 20px;
        height: 20px;
      }
    }
  }
  div {
    margin-left: 25px;
    margin-top: -10px;
  }
}
.md-typeset.md-typeset details.cbx-single {
  border-radius: var(--cbx-border-radius);
  margin: 20px 0;
}

/* Styles for the first details element in a group */
.md-typeset.md-typeset details.cbx-first {
  border-radius: var(--cbx-border-radius) var(--cbx-border-radius) 0 0;
  margin-top: 20px;
}

/* Styles for the middle elements in a group */
.md-typeset.md-typeset details.cbx-middle {
  border-top: none;
}

/* Styles for the last details element in a group */
.md-typeset.md-typeset details.cbx-last {
  border-top: none;
  border-radius: 0 0 var(--cbx-border-radius) var(--cbx-border-radius);
  margin-bottom: 20px;
}