/* ==========================================================================
   Page chrome: body, wrapper, top bar, logo header, navbar, main panel,
   page header and footer.

   Consolidated out of theme.css / theme-override.css. Loads immediately after
   theme-override.css, before components/, so every rule keeps the relative
   cascade position it had before the move.
   ========================================================================== */

/* ----- from theme.css ----- */
/*!
# [Color codes]

body-text-color: #575962
white-color: #ffffff
black-color: #191919
transparent-bg : transparent
default-color : #282a3c
primary-color : #177dff
secondary-color : #716aca
info-color : #36a3f7
success-color : #35cd3a
warning-color : #ffa534
danger-color : #f3545d

-------------------------------------------------------------------
*/
*:focus {
  outline: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important; }

body {
  font-size: 14px;
  font-weight: var(--font-weight-body);
  letter-spacing: var(--body-tracking);
  /* Inherits, and currentColor re-resolves per element, so one declaration
     thickens every glyph on the page in whatever colour it is drawn. */
  -webkit-text-stroke: var(--text-stroke) currentColor;
  color: #2A2F5B; }

a {
  color: var(--color-blue);
}
  a:hover, a:focus {
    color: var(--color-blue);
  }

.page-title {
  font-size: 23px;
  font-weight: 600;
  color: #444444;
  line-height: 30px;
  margin-bottom: 20px; }

/*    Layouts     */
body {
  min-height: 100vh;
  position: relative;
  background: var(--page-bg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat; }

.wrapper {
  min-height: 100vh;
  position: relative;
  top: 0;
  height: 100vh; }

/* The topbar's height, declared once because things that are not the topbar
   have to clear it: it is `position: fixed` over the page and outranks almost
   everything on z-index, so anything landing under it is simply lost. Read by
   the fixed-dropdown placement in js/main.js as well as by the rules below. */
:root {
  --topbar-h: 62px; }

.main-header {
  background: var(--chrome-surface);
  min-height: var(--topbar-h);
  width: 100%;
  position: fixed;
  z-index: 1001;
  box-shadow: 0px 0px 5px rgba(18, 23, 39, 0.5); }
  .main-header .navbar-header {
    min-height: var(--topbar-h); }

.logo-header {
  float: left;
  width: 250px;
  height: var(--topbar-h);
  line-height: 60px;
  color: #333333;
  z-index: 1001;
  font-size: 17px;
  font-weight: 400;
  padding-left: 25px;
  padding-right: 25px;
  z-index: 1001;
  display: flex;
  align-items: center;
  position: relative;
  transition: all .3s; }
  .logo-header .logo {
    color: #2A2F5B;
    opacity: 1;
    position: relative;
    height: 100%; }
    .logo-header .logo:hover {
      text-decoration: none; }
    .logo-header .logo .navbar-brand {
      padding-top: 0px;
      padding-bottom: 0px;
      margin-right: 0px; }
  .logo-header .navbar-toggler {
    padding-left: 0px;
    padding-right: 0px;
    opacity: 0;
    display: none; }
    .logo-header .navbar-toggler .navbar-toggler-icon {
      height: 1em;
      width: 1em;
      color: #545454;
      font-size: 22px; }
  .logo-header .more {
    background: transparent;
    border: 0;
    font-size: 22px;
    padding: 0;
    opacity: 0;
    width: 0;
    display: none; }.main-panel {
  position: relative;
  width: calc(100% - 250px);
  height: 100vh;
  min-height: 100%;
  float: right;
  transition: all .3s; }
  .main-panel > .container {
    padding: 0px !important;
    min-height: calc(100% - 123px);
    margin-top: 61px;
    overflow: hidden;
    width: 100%;
    max-width: unset; }
  .main-panel .page-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    margin-top: 20px;
    margin-left: 12px; }
    .main-panel .page-header .page-title {
      margin-bottom: 0px; }

/*      Page Wrapper      */

@media (min-width: 576px) {
  .page-inner {
    padding-right: 1rem;
    padding-left: 1rem; } }
@media (min-width: 992px) {
  .page-inner {
    padding-right: 2rem;
    padding-left: 2rem; } }

.footer {
  border-top: 1px solid #eee;
  padding: 15px;
  background: #ffffff;
  position: absolute;
  margin-top: 30px;
  width: 100%; }
  .footer .container, .footer .container-fluid {
    display: flex;
    align-items: center; }

.main-header .navbar-header[data-background-color] .navbar-nav .nav-item .nav-link {
  color: #ffffff !important; }
  .main-header .navbar-header[data-background-color] .navbar-nav .nav-item .nav-link:hover, .main-header .navbar-header[data-background-color] .navbar-nav .nav-item .nav-link:focus {
    background: rgba(31, 30, 30, 0.12); }
.main-header .navbar-header[data-background-color] .navbar-nav .nav-item.active .nav-link {
  background: rgba(31, 30, 30, 0.12); }

.main-header .navbar-header[data-background-color="dark"] .navbar-nav .nav-item .nav-link:hover, .main-header .navbar-header[data-background-color="dark"] .navbar-nav .nav-item .nav-link:focus, .main-header .navbar-header[data-background-color="dark2"] .navbar-nav .nav-item .nav-link:hover, .main-header .navbar-header[data-background-color="dark2"] .navbar-nav .nav-item .nav-link:focus {
  background: rgba(185, 185, 185, 0.18) !important; }
.main-header .navbar-header[data-background-color="dark"] .navbar-nav .nav-item.active .nav-link, .main-header .navbar-header[data-background-color="dark2"] .navbar-nav .nav-item.active .nav-link {
  background: rgba(185, 185, 185, 0.18) !important; }
.main-header .navbar-header[data-background-color="white"] .navbar-nav .nav-item .nav-link {
  color: var(--text-secondary) !important; }
  .main-header .navbar-header[data-background-color="white"] .navbar-nav .nav-item .nav-link:hover, .main-header .navbar-header[data-background-color="white"] .navbar-nav .nav-item .nav-link:focus {
    background: var(--surface-2) !important; }
.main-header .navbar-header[data-background-color="white"] .navbar-nav .nav-item.active .nav-link {
  background: var(--surface-2) !important; }

.logo-header[data-background-color] .navbar-toggler .navbar-toggler-icon {
  color: #ffffff !important; }
.logo-header[data-background-color] .more {
  color: #ffffff !important; }

.logo-header[data-background-color="white"] {
  background: var(--chrome-surface) !important; }

.navbar-header[data-background-color="white"] {
  background: var(--chrome-surface) !important; }

.logo-header[data-background-color="dark"] {
  background: var(--chrome-base) !important; }

.logo-header[data-background-color="dark2"] {
  background: #24252a9c !important;
}

.navbar-header[data-background-color="dark"] {
  background: var(--chrome-base) !important; }

.navbar-header[data-background-color="dark2"] {
  background: #24252a9c !important; }

/*     Navbar     */
.navbar .navbar-nav .nav-item {
  margin-right: 10px; }
  /*.navbar .navbar-nav .nav-item:last-child {*/
  /*  margin-right: 0px; }*/
  .navbar .navbar-nav .nav-item .nav-link {
    display: inline-block;
    vertical-align: middle;
    color: #666;
    letter-spacing: 0.04em;
    padding: 10px;
    border-radius: 3px;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    text-align: center; }
    .navbar .navbar-nav .nav-item .nav-link:hover, .navbar .navbar-nav .nav-item .nav-link:focus {
      background: #eee; }
    .navbar .navbar-nav .nav-item .nav-link i {
      font-size: 17px;
      vertical-align: middle;
      line-height: 1 !important; }
  .navbar .navbar-nav .nav-item.active .nav-link {
    background: #eee; }

.navbar .navbar-nav .notification {
  position: absolute;
  background-color: #31CE36;
  text-align: center;
  border-radius: 10px;
  min-width: 17px;
  height: 17px;
  font-size: 10px;
  color: #ffffff;
  font-weight: 300;
  line-height: 17px;
  top: 3px;
  right: 3px;
  letter-spacing: -1px; }

.navbar-header {
  padding: 0px 0px; }
  .navbar-header .container-fluid {
    min-height: inherit; }

.profile-pic:hover, .profile-pic:focus {
  text-decoration: none; }

.profile-pic span {
  font-size: 14px; }

.navbar[class*="bg-"] {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important; }
  .navbar[class*="bg-"] .navbar-brand {
    color: #ffffff; }
  .navbar[class*="bg-"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
  .navbar[class*="bg-"] .navbar-nav > .nav-item > .nav-link {
    color: #ffffff; }
    .navbar[class*="bg-"] .navbar-nav > .nav-item > .nav-link.disabled {
      color: #d8d8d8 !important; }
    .navbar[class*="bg-"] .navbar-nav > .nav-item > .nav-link:hover {
      background: rgba(255, 255, 255, 0.22) !important; }
  .navbar[class*="bg-"] .navbar-nav > .nav-item.active > .nav-link {
    background: rgba(255, 255, 255, 0.22) !important; }

.nav-link.disabled {
  color: #6c757d !important; }
@media screen and (min-width: 991px) {

  .logo-header {
    line-height: 57px; }
}

@media screen and (max-width: 991px) {
  .main-header[data-background-color] .navbar-header {
    border-top: 1px solid rgba(0, 0, 0, 0.1); }

  .main-header {
    transition: all .5s; }

  .main-panel {
    width: 100%;
    transition: all .5s; }

  .page-inner {
    padding-right: 1px;
    padding-left: 1px;
    margin-right: auto;
    margin-left: auto; }

  .logo-header {
    display: flex;
    width: 100% !important;
    text-align: left;
    position: relative;
    padding-left: 15px;
    padding-right: 15px; }
    .logo-header .logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%); }
    .logo-header .navbar-toggler {
      height: 100%;
      margin-left: 0px !important;
      opacity: 1;
      display: block;
      order: 1; }
    .logo-header .more {
      opacity: 1;
      color: #545454;
      cursor: pointer;
      display: inline-block;
      line-height: 56px;
      order: 3;
      width: unset;
      margin-left: auto; }
    .logo-header .navbar-brand {
      position: unset !important;
      margin-right: 0px; }

  .navbar-header {
    position: absolute;
    width: 100%;
    transform: translate3d(0, -250px, 0) !important;
    transition: all .5s; }

  .profile-pic span {
    display: none; }

  .page-title {
    font-size: 18px; }
}

@media screen and (max-width: 767px) {

  .main-panel .page-header {
    flex-direction: column;
    align-items: normal;
    position: relative;
    min-height: 43px;
    justify-content: center; }

  .footer .container-fluid {
    flex-direction: column; }
}

/*     	Page 404     */

/* 	 Background Body */
body {
  background: var(--page-bg); }

  body[data-background-color="dark"] {
    background: var(--chrome-base); }
    body[data-background-color="dark"] .main-header {
      box-shadow: 0px 0px 5px #121727; }

    body[data-background-color="dark"] .footer {
      border-top: 1px solid #293247;
      background: #24252a9c; }
/* ----- from theme-override.css ----- */

#id-page-header-wrapper {
    margin-right: 6px;
    padding-top: 4px;
}

.main-panel .page-header {
    margin-left: 0;
    margin-bottom: 0;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 0;
    border-left: 0;
    margin-top: 0;
}
.main-panel .page-header .d-flex .page-title {
    padding-top: 5px;
}

/* Scrollbars come in two treatments.

   The page furniture — the document's own two bars — is GitHub-style: a
   slim rounded thumb inset in a tinted track, a seam on the content side
   so the scrollbar column reads as its own strip, and step arrows at both
   ends. These sit at the window edge where the eye goes looking for them,
   so they are sized to be found.

   Every other scroller — modal bodies, panels, menus, any box that
   overflows inside the page — gets the compact treatment below: a bare
   thumb on a transparent track, no chrome and no arrows, so an inner box
   never sprouts a second slab of window furniture inside the content. A
   table pane sits between the two and tunes it from there; see
   components/table-pane.css. */

/* --- Inner scrollers: the default -------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}
::-webkit-scrollbar-button {
    display: none;
}
/* Firefox has no per-part pseudo-elements, so the same split is drawn with
   the two standard properties. Both inherit, hence the universal selector:
   the page treatment on html would otherwise flow into every inner
   scroller. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* --- The document bars ------------------------------------------------- */
/* Thumb/arrow colour routes through --sb-thumb so the locked (disabled)
   state below can dim everything in one place. */
html {
    --sb-thumb: var(--page-scrollbar-thumb);
    --sb-thumb-hover: var(--page-scrollbar-thumb-hover);
    /* Track width and the transparent margin around the thumb. */
    --sb-size: 14px;
    --sb-thumb-inset: 3px;
    scrollbar-width: auto;
    scrollbar-color: var(--page-scrollbar-thumb) var(--page-scrollbar-track);
}
html::-webkit-scrollbar {
    width: var(--sb-size);
    height: var(--sb-size);
}
html::-webkit-scrollbar-track {
    background-color: var(--page-scrollbar-track);
    border-left: 1px solid var(--chrome-seam);
}
html::-webkit-scrollbar-track:horizontal {
    border-left: none;
    border-top: 1px solid var(--chrome-seam);
}
html::-webkit-scrollbar-corner {
    background-color: var(--page-scrollbar-track);
}
html::-webkit-scrollbar-thumb {
    background-color: var(--sb-thumb);
    border-radius: 8px;
    border: var(--sb-thumb-inset) solid transparent;
    background-clip: content-box;
}
html::-webkit-scrollbar-thumb:hover {
    background-color: var(--sb-thumb-hover);
}
/* Step arrows. Drawn with conic-gradient wedges instead of image assets
   so they follow the colour tokens like everything else. border-box
   origin so `center` is the centre of the full button — the same axis the
   thumb is centred on — instead of the box left over after the seam
   border. Arrows sit a shade wider than the thumb's ink column, the way
   GitHub draws theirs, and use the same colour as the thumb. */
html::-webkit-scrollbar-button:single-button:vertical {
    display: block;
    height: var(--sb-size);
    background-color: var(--page-scrollbar-track);
    border-left: 1px solid var(--chrome-seam);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 6px;
}
html::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: conic-gradient(from 150deg at 50% 0%, var(--sb-thumb) 0 60deg, transparent 0);
}
html::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: conic-gradient(from 330deg at 50% 100%, var(--sb-thumb) 0 60deg, transparent 0);
}
html::-webkit-scrollbar-button:single-button:horizontal {
    display: block;
    width: var(--sb-size);
    background-color: var(--page-scrollbar-track);
    border-top: 1px solid var(--chrome-seam);
    background-origin: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 6px 9px;
}
html::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-image: conic-gradient(from 60deg at 0% 50%, var(--sb-thumb) 0 60deg, transparent 0);
}
html::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-image: conic-gradient(from 240deg at 100% 50%, var(--sb-thumb) 0 60deg, transparent 0);
}
html::-webkit-scrollbar-button:single-button:hover {
    --sb-thumb: var(--sb-thumb-hover);
}

/* While the mobile drawer, a modal or a swal2 popup is open the page scroll
   is locked in JS (main.js) but the scrollbar stays visible so nothing pops
   in and out — thumb and arrows just fade to read as disabled. */
html.nav_open,
html:has(body.modal-open),
html:has(body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown)) {
    --sb-thumb: var(--page-scrollbar-thumb-disabled);
    --sb-thumb-hover: var(--page-scrollbar-thumb-disabled);
}


/* css class overlay "disables" the page, used by "disableScreen" function */
.overlay {
    background-color:#EFEFEF;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
    opacity: .1; /* in FireFox */
    filter: alpha(opacity=50); /* in IE */
}

.page-inner .container-fluid {
    padding-left: 10px;
    padding-right: 10px
}

/* fix modal overflow issue */
.main-header {
    position: fixed !important;
}

body {
    overflow-y: auto;
    overflow-x: hidden;
}
/* Line the topbar's edge items up with the content gutter
   (#id-main-content > .container-fluid). The parent .navbar contributes
   its own 1rem, so this stacks on top of that. */
#topNavBar {
    margin-right: 0;
    padding: 0 40px;
}

body.modal-open #topNavBar .navbar-nav .nav-item:last-child {
    margin-right: auto;
}

.page-inner {
    margin-left: 0 !important;
    padding: 5px 0 1px 0;
}
body[data-background-color="dark"] {
    background: var(--chrome-base);
}

.navbar-header[data-background-color="dark"] {
    background: var(--chrome-base) !important;
}

/* The theme's "dark2" swatch is a 61%-alpha #24252a, so the logo block
   lets page content scroll through it and reads a different hue than the
   rail below it. Paint it the same opaque gradient-over-base surface as
   .sidebar so the two read as one column when the sidebar is expanded.
   (Collapsed, sidebar.css repaints it flat to blend into the top bar.) */
.logo-header[data-background-color="dark2"] {
    background: var(--chrome-panel) !important;
}

body[data-background-color="dark"] .main-header {
    box-shadow: unset;
    border-bottom: 1px solid var(--chrome-seam);
}

/* Theme adds a stray light border-top to the mobile navbar drawer. */
@media screen and (max-width: 991px) {
    .main-header[data-background-color] .navbar-header {
        border-top: none;
    }
}
body[data-compact-page="true"] .content {
    max-width: 1920px;
}

#topNavBar .navbar-nav .nav-item:last-child {
    margin-right: 0;
}
#topNavBar .navbar-nav .nav-item:first-child {
    margin-left: 0;
}
body[data-compact-page="true"] .navbar-header {
    max-width: 1920px;
}

body[data-compact-page]:not([data-compact-page="true"]) #topNavBar {
    padding: 0 40px !important;
}

/* The open-trigger ring (`[data-pop][aria-expanded="true"]`, pop-menu.css) is drawn on
   this <a>. Left inline, its box is a sliver beside the avatar and the ring shows as a
   stray shard to its left; a 34px round box puts the ring on the avatar's own edge. */
.profile-pic {
    display: inline-flex;
    border-radius: 50%;
}

.topbar-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    font-size: 13px;
    color: var(--avatar-fg);
    background: var(--avatar-bg);
    box-shadow: var(--avatar-shadow);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.topbar-avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-green);
    border: 2px solid var(--chrome-surface);
}

.profile-pic:hover .topbar-avatar,
.profile-pic[aria-expanded="true"] .topbar-avatar {
    background: var(--avatar-bg-hover);
    box-shadow: var(--avatar-shadow-hover);
}

.topbar-avatar-masquerade::after {
    background: var(--color-red);
    animation: masquerade-dot-pulse 1.6s ease-out infinite;
}
body[data-compact-page="true"] #id-page-header-wrapper {
    max-width: 1920px;
}

/* The horizontal gutter #id-main-content reserves, declared once here and
   applied in layouts/default.html. Anything positioning against the page
   chrome reads it. Never drop below 15px: a Bootstrap .row carries margin: 0 -15px, so a
   smaller gutter lets any top-level row hang past the content box and give
   the page a few pixels of horizontal scroll. At 15px the row pulls back
   exactly to the container edge and its columns' padding puts the content
   back on the same line as a non-row page. */
:root {
    --content-gutter: 40px;
}

@media screen and (max-width: 991px) {
    :root {
        --content-gutter: 15px;
    }
}

.main-panel {
    color: var(--panel-text);
    top: var(--topbar-h);
    min-height: calc(100vh - var(--topbar-h));
    height: calc(100% - var(--topbar-h));
}

@media screen and (max-width: 991px)  {
    #topNavBar .page-header {
        display: none;
    }
    .main-panel .page-header {
        display: flex !important;
    }
}
.wrapper {
    height: auto;
}

.content {
    height: 100%;
    min-height: calc(100vh - var(--topbar-h));
    width: 100%;
    border-top: none;
}

/* ============================================
   LINKS
   ============================================ */

a {
    color: var(--color-blue);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-blue-hover);
}

/* Section titles */
.section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Small uppercase eyebrow heading — the quiet section label used on the home
   dashboard and the Location hub. Pairs with .section-title, overriding its
   size/colour. Shared here so both pages render an identical heading. */
.home-section-heading {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
}
#id-page-header-wrapper {
    margin-right: 0;
    margin-bottom: .25rem;
}

@media screen and (max-width: 991px) {
    .logo-header .logo .navbar-brand {
        padding-bottom: 3px;
        padding-top: 3px;
    }
}

/* ---- shared page chrome: header, underline tabs, toolbar buttons ---- */
/* The approved schedule-redesign chrome, landed as app-wide vocabulary.
   Page header: an 18px title over one muted subtitle line. */
.page-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--text-primary);
}

/* --- Theme toggle is a <button> restyled as a topbar nav-link: this only
   strips the native button chrome — sizing, color, and the hover pill all
   come from the shared navbar nav-link rules, so it aligns with the other
   topbar icons. --- */
/* Topbar controls read as muted gray, brightening on hover — the theme's
   stock rule forces stark white (!important, hence the override here). */
.main-header .navbar-header[data-background-color] .navbar-nav .nav-item .nav-link {
    color: var(--text-quiet) !important;
}
.main-header .navbar-header[data-background-color] .navbar-nav .nav-item .nav-link:hover,
.main-header .navbar-header[data-background-color] .navbar-nav .nav-item .nav-link:focus {
    color: var(--text-primary) !important;
}

/* ======================================================================
   Merged in from theme.css / theme-override.css.
   These loaded earlier than this file; appended here because nothing above
   targets the same selectors.
   ====================================================================== */

/* ----- from theme.css ----- */
#search-nav {
  flex: 1;
  max-width: 300px;
  transition: all .4s; }
  #search-nav.focus {
    max-width: 400px; }.logo-header[data-background-color="white"] .navbar-toggler .navbar-toggler-icon, .logo-header[data-background-color="white"] .more, .logo-header[data-background-color="white"] .btn-toggle {
  color: var(--text-secondary) !important; }
@media screen and (min-width: 991px) {
  .main-panel.full-height > .container {
    margin-top: 0; }
  .main-panel.full-height .navbar-header {
    min-height: var(--topbar-h); }

  #search-nav {
    display: block !important; }
}
@media screen and (max-width: 991px) {

  /* No overflow lock or wrapper clip here: hiding the page scrollbar
     reflows the page, and overflow-x on .wrapper makes it paint its own
     vertical scrollbar while the drawer is open (it existed for the old
     push-translate animation, neutralized in sidebar.css). Drawer scroll
     is frozen in JS (main.js) with the page scrollbar left visible. */
    .nav_open .main-panel, .nav_open .main-header {
      -webkit-transform: translate3d(250px, 0, 0);
      -moz-transform: translate3d(250px, 0, 0);
      -o-transform: translate3d(250px, 0, 0);
      -ms-transform: translate3d(250px, 0, 0);
      transform: translate3d(250px, 0, 0) !important; }

  #search-nav {
    margin: 0 auto !important; }

  .topbar_open .logo-header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1); }

  .topbar_open .navbar-header {
    transform: translate3d(0, 61px, 0) !important;
  }
    .topbar_open .navbar-header .navbar-nav > .nav-item .nav-link i {
      font-size: 16px; }
    .topbar_open .navbar-header .navbar-nav > .nav-item:last-child .nav-link {
      padding: 0px !important; }

  .topbar_open #search-nav {
    text-align: center;
    width: 100%;
    padding: 10px 15px 0px;
    order: 1; }
  .topbar_open .main-panel {
    transform: translate3d(0, var(--topbar-h), 0) !important; }
  .topbar_open > .content {
    margin-top: 0px !important; }

  .nav_open.topbar_open .main-panel {
    transform: translate3d(250px, 60px, 0) !important; }

  .navbar-header .topbar-nav {
    flex-direction: row;
    justify-content: center;
    margin-left: 0 !important;
    margin-top: 2px;
    position: relative; }
}


@media screen and (max-width: 767px) {
    .main-panel .page-header .breadcrumbs {
      margin-left: 0px;
      padding-top: 15px;
      padding-left: 5px;
      padding-bottom: 0px;
      border-left: 0px; }
    .main-panel .page-header .btn-group-page-header {
      position: absolute;
      right: 0px; }
    .footer .container-fluid .copyright {
      margin-left: 0 !important;
      margin-top: 10px;
      margin-bottom: 15px; }
}body[data-background-color="dark"] .main-panel label {
        color: #fff;
      }
/* ----- from theme-override.css ----- */
.topbar-nav .nav-item {
    margin-right: 0 !important;
}