/* -----------------------------------------
   NOOTO DOCS THEME
   Desktop layout only
----------------------------------------- */

@media (min-width:1200px){

  :root{
    --docs-sidebar:510px;
    --docs-topbar:56px;
    --docs-border:rgba(0,0,0,.08);
    --docs-start:calc(var(--docs-sidebar) + 1px);
  }


  *,
  *::before,
  *::after{
    box-sizing:border-box;
  }

  html,
  body{
    margin:0;
    padding:0;
  }

  body{
    background:#fff;
  }

  .wrap{
    display:block;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
  }

  .site-nav{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--docs-sidebar);
    height:100vh;
    max-height:none;
    margin:0;
    padding-left: 150px;
    padding-bottom: 40px;
    border:0;
    border-right:1px solid var(--docs-border);
    border-radius:0 !important;
    background:#fafafa;
    box-shadow:none;
    overflow-y:auto;
    z-index:20;
  }

  .NootoDialog{
    display:block;
    position:static;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    border-radius:0 !important;
    background:transparent;
    box-shadow:none;
  }

  .NootoDialog::backdrop,
  .MenuButton,
  .NootoMenuClose{
    display:none;
  }

  .site-logo{
    margin:0 0 22px;
    padding:0 8px;
  }

  .site-nav a{
    display:block;
    padding:9px 10px;
    border:0;
    border-radius:8px;
    box-shadow:none;
  }

  .site-nav a:hover{

  }


.site-nav a.Active,
.site-nav a[aria-current="page"]{
  position:relative;
  color:var(--site-color);
}

.site-nav a.Active:not(:has(img))::after,
.site-nav a[aria-current="page"]:not(:has(img))::after{
  content:'';
  position:absolute;
  right:12px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--site-color);
  transform:translateY(-50%);
}



  .NootoNavQR{
    padding-top:48px;
    padding-bottom:48px;

  }

/* Search */

.NootoSearchWrap{
  position:fixed;
  top:0;
  left:var(--docs-start);
  right:0;
  height:var(--docs-topbar);

  display:flex;
  align-items:center;

  width:auto;
  margin:0;
  padding:0 15px;

  border-bottom:1px solid var(--docs-border);
  background:#fff;

  z-index:15;
}

#NootoSearch{
  width:280px;
  height:40px;

  padding:0 42px 0 12px;

  background:#f3f3f3;
  border-radius:8px;
  font-size:80%;
}

#NootoSearchClear{
  right:auto;
  left:calc(32px + 280px - 46px);

  width:24px;
  height:24px;

  padding:0;
  font-size:22px;
  line-height:24px;
  color:#777;
}

  main,
  .main,
  .site-main,
  .site-content,
  .page,
  .NootoMain,
  .NootoContent,
  .NootoSections{
    width:auto !important;
    max-width:none !important;
    margin:0 0 0 var(--docs-start) !important;
    padding-top:var(--docs-topbar) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .NootoSection,
  .NootoPage,
  .Page,
  .Section,
  article,
  .NootoArticle,
  .content{
max-width:980px !important;
    padding:46px 0 120px 70px !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }



  .wrap::before,
  .wrap::after,
  .NootoSection::before,
  .NootoSection::after,
  .NootoPage::before,
  .NootoPage::after,
  .NootoContent::before,
  .NootoContent::after,
  .NootoSections::before,
  .NootoSections::after{
    border-radius:0 !important;
  }

  footer,
  .NootoFooter,
  .site-footer{
    border-radius:0 !important;
    box-shadow:none !important;
    padding: 1rem;
  }


/* Sidebar scrollbar */

/* Sidebar scrollbar */

.site-nav{
  overflow-y:auto;
  scrollbar-width:thin; /* Firefox */
  scrollbar-color:transparent transparent;
}

.site-nav:hover{
  scrollbar-color:rgba(0,0,0,.18) transparent;
}

.site-nav::-webkit-scrollbar{
  width:4px;
}

.site-nav::-webkit-scrollbar-track{
  background:transparent;
}

.site-nav::-webkit-scrollbar-thumb{
  background:transparent;
  border-radius:999px;
}

.site-nav:hover::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.18);
}


  .site-nav{
    overflow:hidden !important;
  }

  .NootoDialog{
    height:100dvh;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }





}