:root {
  --sidebar-width: 320px;
  --sidebar-mini-width: 130px;
  --sidebar-font-size: 14px;
  --header-height: 100px;
  --background-color: #F9FBFC;
}

#sidebar_main .badge {
  height: 59px;
  position: absolute;
  top: 0;
  left: -5px;
  z-index: 1;
  background-color: transparent;
  display: block !important;
}

#sidebar_main #sidebar_content {
  width: var(--sidebar-width);
  position: fixed;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 981;
  background: #fff;
}

.sidebar_main_swipe.sidebar_mini #sidebar_switcher_toggle {
  left: calc(var(--sidebar-mini-width) + 0px);

}

.sidebar_main_swipe #sidebar_switcher_toggle {
  left: calc(var(--sidebar-width) + 0px);
}

#sidebar_main .menu_section > ul > li > a {
  font-size: var(--sidebar-font-size);
  color: rgba(0, 0, 0, .7);
}

#sidebar_main .menu_section > ul > li > a:hover, #sidebar_main .menu_section > ul li.current_section > a {
  color: var(--secondary-color);
}

#sidebar_switcher_toggle {
  top: 320px !important;
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--portal-dark-color);
  border-left: 0;
  cursor: pointer;
  padding: 0 4px;
  width: 10px;
  height: 66px;
  z-index: 981;
}

.sidebar_main_swipe #page_content {
  padding-left: var(--sidebar-width);
  padding-top: var(--header-height);
  transition: 0.5s;
}

/*Sidebar close*/
.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #page_content {
  padding-left: 0;
  transition: 0.5s;
}

.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_main #sidebar_content {
  display: none;
  width: 0;
}

.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_switcher_toggle {
  left: 10px;
}

/*Sidebar mini*/
.sidebar_main_swipe.sidebar_mini #page_content {
  padding-left: var(--sidebar-mini-width);
  transition: 0.5s;
}

.sidebar_mini #sidebar_main #sidebar_content {
  width: var(--sidebar-mini-width);
}

#sidebar_main .menu_section > ul > li > a {
  display: block;
}

#sidebar_main #sidebar_content {
  border-right: 1px solid var(--portal-dark-color);
}

#page_content {
  min-height: calc(100vh - var(--header-height));
  background-color: var(--background-color);
}

#page_content_inner {
  padding: 50px 50px 100px 50px;
}

navbar > * {
  background-color: var(--background-color);
}