#content_wrapper {
  position: relative;
  left: 0px;
  margin-left: 280px;
}
/* Transitions */
body.onload-check .navbar,
body.onload-check .navbar-branding,
body.onload-check .header-branding,
body.onload-check #sidebar_left,
body.onload-check #sidebar_right,
body.onload-check #content_wrapper,
body.onload-check #topbar {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
/*===============================================
  LAYOUT SETTINGS
================================================= */
/* If header is fixed modify primary containers padding */
.navbar.navbar-fixed-top + #sidebar_left + #content_wrapper {
  padding-top: 60px;
}
/* Fixed Sidebar */
#sidebar_left.affix {
  position: fixed;
  height: 100%;
}
/* Scrollbar for Sidebars in Fixed Positions */
#sidebar_left.affix > .sidebar-menu {
  overflow-x: hidden;
  position: absolute;
  width: 100%;
  top: 85px;
  bottom: 52px;
  transition: top 0.2s ease-in-out;
}
#sidebar_left.affix > .email-menu + .sidebar-menu {
  overflow-x: hidden;
  position: absolute;
  width: 100%;
  top: 485px;
  bottom: 52px;
  transition: top 0.2s ease-in-out;
}
/* Corrects Pseudo sidebar bg when fixed */
#sidebar_left.affix:before {
  left: 0;
}
body.sidebar-hidden #sidebar_left.affix:before,
body.sidebar-rtl #sidebar_left.affix:before {
  left: -280px;
}
/* Sidebar User Area - Hidden */
.user-info.hidden,
.user-info.hidden + .user-divider {
  display: none;
}
body.usermenu-hidden .user-info,
body.usermenu-hidden .user-info + .user-divider {
  display: none;
}
body.usermenu-hidden #sidebar_left.affix .user-info + .user-divider + .sidebar-menu,
body.usermenu-hidden #sidebar_left.affix .user-info + .user-divider + .user-menu + .sidebar-menu {
  top: 0;
}
#sidebar_left.affix > .user-menu.usermenu-open + .sidebar-menu {
  top: 250px;
}
/* Breadcrumbs fixed state */
#topbar.affix {
  z-index: 1029;
  width: auto;
  left: 0;
  right: 0;
  margin-left: 280px;
  position: fixed;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
/* breadcrumb fixed settings when sidebar is minified */
body.sb-l-m #topbar.affix,
body.sb-l-o.sb-l-m #topbar.affix {
  margin-left: 60px;
}
body.sb-l-c #topbar.affix {
  margin-left: 0px;
}
/* if topbar is fixed grant proper margin spacing */
#topbar.affix + #content {
  margin-top: 51px;
}
/* if navbar is fixed and hidden grant proper margin spacing */
#topbar.affix.hidden + #content {
  margin-top: 0;
}
/* Topbar/Breadcrumbs Area - Hidden */
body.hidden-breadcrumbs #topbar {
  display: none;
}
/* for preview only - no real use in development enviroment */
body.sidebar-collapsed #sidebar:before {
  width: 40px;
}
/* ==============================================
   A. Boxed Layout
     A. Boxed Settings
     B. Content Wrappers
     C. Navbar
     D. Sidebar
     E. COLUMN ADJUSTMENTS - IMPORTANT
=================================================
  A. Boxed Settings
================================================= */
body.boxed-layout {
  width: 1150px !important;
  margin: 0 auto;
  background: #e9e9e9;
}
body.boxed-layout:before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  background: url("../../../img/patterns/topbar-bg.jpg") repeat top center;
}
body.boxed-layout:after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.5);
}
body.boxed-layout #main {
  overflow: hidden;
}
/* hide psuedo background */
body.boxed-layout #main:before {
  display: none;
}
@media (max-width: 1150px) {
  body.boxed-layout #main,
  body.boxed-layout .navbar {
    width: 100% !important;
  }
}
/*===============================================
  B. Content Wrappers
================================================= */
body.boxed-layout #content_wrapper {
  border-left: 1px solid #DDD;
  border-right: 1px solid #DDD;
}
body.boxed-layout .container {
  width: 100% !important;
}
/*===============================================
  C. Navbar
================================================= */
body.boxed-layout .navbar {
  width: 1150px !important;
  margin: 0 auto !important;
  box-shadow: none;
}
body.boxed-layout .navbar .navbar-right {
  width: 355px;
}
/*===============================================
  D. Sidebar
================================================= */
body.boxed-layout #sidebar-search {
  box-shadow: none;
}
body.boxed-layout #sidebar:before {
  margin-left: 1px;
  border-right: 1px solid #CCC;
}
/* sidebar open/close buttons */
body.boxed-layout #toggle_sidemenu_r {
  display: none !important;
}
/*===============================================
  E. COLUMN ADJUSTMENTS - IMPORTANT
================================================= 
 * IMPORTANT - Many pages have had the width of 
 * their columns completely altered. All pages 
 * requiring the same column adjustments have
 * been grouped together and then listed in a 
 * directory(see below). Percentages listed 
 * below refer to the columns new width.
* ---------------------------------------------
   PAGES REQUIRING 100% COLUMNS(in order):
   * DASHBOARD.HTML
   * CHARTS.HTML 
   * TABS.HTML 
   * FORMS.HTML 
   * EDITORS.HTML 
   * MAPS.HTML 
   * ELEMENTS.HTML 
   * VALIDATION.HTML 
   * WIZARD.HTML 
   * PRICING-TABLES.HTML 
   * FILE-MANAGERS.HTML 
   * UPLOAD-TOOLS.HTML 
   * DYNAMIC-GALLERY.HTML 
   * IMAGE-TOOLS.HTML 
   * INVOICE-PAGE.HTML
   * WIDGETS.HTML
   * FAQ.HTML
   * GALLERY.HTML
   * TIMELINE.HTML
--------------------------------------------------
 * Notes: Most columns were targeted using the
 * direct descendant CSS operator as to not effect
 * other columns used further down the page. If 
 * you have changed a columns default 
 * HTML you will need to update this.
-------------------------------------------------*/
body.boxed-layout.dashboard-page .container > .row > .col-md-4,
body.boxed-layout.dashboard-page .container > .row > .col-md-8,
body.boxed-layout.charts-page .container > .row > .col-md-6,
body.boxed-layout.tabs-page .container > .row > .col-md-6,
body.boxed-layout.forms-page .container > .row > .col-md-6,
body.boxed-layout.editors-page .container > .row > .col-md-6,
body.boxed-layout.maps-page .container > .row > .col-md-6,
body.boxed-layout.elements-page .container > .row > .col-md-6,
body.boxed-layout.validation-page .container > .row > .col-md-6,
body.boxed-layout.wizard-page .container > .row > .col-md-10.col-md-offset-1,
body.boxed-layout.pricing-tables-page .container > .row > .col-md-10.col-md-offset-1,
body.boxed-layout.file-manager-page .container > .row > .col-lg-10.col-lg-offset-1,
body.boxed-layout.upload-tools-page .container > .row > .col-md-6,
body.boxed-layout.dynamic-gallery-page .container > .row > .col-md-10.col-md-offset-1,
body.boxed-layout.image-tools-page .container > .row > .col-md-6,
body.boxed-layout.invoice-page .container > .row > .col-lg-11,
body.boxed-layout.widgets-page .container > .row > .col-lg-8,
body.boxed-layout.widgets-page .container > .row > .col-lg-4,
body.boxed-layout.faq-page .container > .row > .col-lg-10,
body.boxed-layout.gallery-page .container > .row > .col-md-10,
body.boxed-layout.timeline-page #timeline {
  width: 100%;
  float: none;
  margin-left: 0;
}
/* ---------------------------------------
   PAGES REQUIRING 90% COLUMNS(in order):
   * EDITABLE.HTML
   * XEDIT.HTML
   * PROFILE.HTML
----------------------------------------*/
body.boxed-layout.editable-page .container > .row .col-md-10.col-md-offset-1,
body.boxed-layout.xedit-page .container > .row .col-md-8,
body.boxed-layout.profile-page .container > .row > .col-lg-4,
body.boxed-layout.profile-page .container > .row > .col-lg-8 {
  width: 90%;
  float: none;
  margin: 0 auto;
}
/* ----------------------------------------
   PAGES REQUIRING 50% COLUMNS(in order):
   * PORTLETS.HTML 
   * TYPOGRAPHY.HTML 
------------------------------------------*/
@media (min-width: 1200px) {
  body.boxed-layout.portlets-page .container > .row > .col-lg-4.col-sm-6,
  body.boxed-layout.typography-page .container > .row > .col-lg-3 {
    width: 50%;
    float: left;
  }
}
/* -----------------------------------------
  PAGES REQUIRING A CUSTOM LAYOUT(in order):
    * SKETCHPAD.HTML - 92%
  * MESSAGES.HTML - 85%
  * ICONS.HTML - 80% + 20% COLUMN
-------------------------------------------*/
body.boxed-layout.sketchpad-page .container > .row > .col-lg-7 {
  width: 92%;
  margin-left: 7%;
}
body.boxed-layout.messages-page .container > .row > .col-lg-4,
body.boxed-layout.messages-page .container > .row > .col-lg-8 {
  width: 85%;
  float: none;
  margin: 0 auto;
}
body.boxed-layout.icons-page .container > .row > .col-md-9 {
  width: 80%;
  margin-left: 0;
  float: left;
}
body.boxed-layout.icons-page .container > .row > .col-md-3 {
  width: 20%;
  float: left;
}
/* ----------------------------------------
 * All column changes have been listed 
 * above. The styles below are for pages 
 * which require adjustments to individual 
 * elements(buttons, backgrounds, etc)
/* ----------------------------------------
   PAGES LISTED BELOW INCLUDE(in order):
   * DASHBOARD/INDEX.HTML
   * TIMELINE.HTML
   * GALLERY.HTML
   * MESSAGES.HTML
   * PROFILE.HTML
   * FAQ.HTML
   * DATATABLES.HTML
   * ICONS.HTML
   * ANIMATIONS.HTML
   * SKETCHPAD.HTML
   * WIDGETS.HTML
   * INVOICE-PAGE.HTML
   * MINIMAL(login, screenlock, etc)
-----------------------------------------*/
/* DASHBOARD.HTML / INDEX.HTML */
body.boxed-layout.dashboard-page .message-widget {
  margin-top: 0;
}
body.boxed-layout.dashboard-page .console-btn-5,
body.boxed-layout.dashboard-page #timeline-widget,
body.boxed-layout.dashboard-page #console-search-btn {
  display: none !important;
}
@media (min-width: 1368px) {
  body.boxed-layout.dashboard-page #console-btns .row > div {
    width: 25%;
    float: left;
  }
}
/* TIMELINE.HTML */
body.boxed-layout.timeline-page #timeline .panel-menu .glyphicons {
  display: none;
}
/* GALLERY.HTML */
body.boxed-layout.gallery-page .container > .row .placeholder {
  height: 50px;
}
/*  MESSAGES.HTML  */
body.boxed-layout.messages-page .container > .row > .col-lg-4 .panel {
  margin-bottom: 20px;
}
body.boxed-layout.messages-page .container > .row table tr:nth-of-type(3),
body.boxed-layout.messages-page .container > .row table tr:nth-of-type(4),
body.boxed-layout.messages-page .container > .row table tr:nth-of-type(5) {
  display: none;
}
/* PROFILE.HTML */
body.boxed-layout.profile-page .container > .row > .col-lg-4 .panel {
  margin-bottom: 20px;
}
body.boxed-layout.profile-page .container > .row .console-btn {
  margin-bottom: 0;
}
body.boxed-layout.profile-page .container > .row .profile-panel .panel-footer {
  padding: 10px 16px 4px;
}
/* FAQ.HTML */
body.boxed-layout.faq-page .faq-panel > .panel-sidemenu {
  display: none;
}
body.boxed-layout.faq-page .faq-panel > .panel-body {
  width: 93%;
  margin: 30px 3.5% 40px;
}
body.boxed-layout.faq-page .faq-panel > .panel-body #search-widget {
  margin-bottom: 30px;
}
/* DATATABLES.HTML */
body.boxed-layout.datatables-page table th:nth-of-type(2),
body.boxed-layout.datatables-page table td:nth-of-type(2),
body.boxed-layout.datatables-page table td:nth-of-type(4),
body.boxed-layout.datatables-page table th:nth-of-type(4) {
  display: none !important;
}
/* ICONS.HTML */
body.boxed-layout.icons-page #icon-nav ul {
  width: 110%;
}
body.boxed-layout.icons-page #icon-nav ul .console-icon {
  display: none;
}
@media (max-width: 1150px) {
  body.boxed-layout.icons-page #icon-nav {
    right: 0;
  }
}
/* ANIMATIONS.HTML */
body.boxed-layout.animations-page .container > .row #animate-me-panel {
  position: fixed;
  max-width: 350px;
}
/* SKETCHPAD.HTML */
body.boxed-layout.sketchpad-page .container > .row > .col-lg-4 {
  display: none !important;
  width: 0;
}
/* WIDGETS.HTML */
body.boxed-layout.widgets-page .container > .row #timeline-widget {
  display: block !important;
}
body.boxed-layout.widgets-page .container > .row .timeline-widget {
  width: 370px;
  margin: 0 auto;
}
/* INVOICE-PAGE.HTML */
body.boxed-layout.invoice-page .container > .row > .col-lg-11 .panel-sidemenu {
  display: none;
}
body.boxed-layout.invoice-page .container > .row > .col-lg-11 #invoice-item {
  width: 95%;
  margin: 40px 2.5% 60px;
}
/*  MINIMAL PAGE
  - coming-soon, login, screen-lock
----------------------------------------*/
body.boxed-layout.coming-soon-page {
  background: #f7f7f7;
}
body.boxed-layout.login-page,
body.boxed-layout.screenlock-page {
  background: url(../img/patterns/5.png) repeat top left #f6f6f6;
}
body.boxed-layout.coming-soon-page #main:after,
body.boxed-layout.login-page #main:after,
body.boxed-layout.screenlock-page #main:after {
  display: none;
}
/* ==============================================
   III. DEMO PAGES
      A. Customizer.html
    B. Upload-tools.html
    C. Timeline.html
    D. Sliders.html
    E. Portlets.html
    F. Maps.html
    G. Gallery.html
    H. Dynamic-gallery.html
    I. Forms.html
    J. Elements.html
    K. Charts.html
    L. Animations.html
    M. Buttons.html
    N. 404/500.html
    O. Icons.html
    P. Global Changes
    
 * This file is reserved for changes required only
 * for the themes demo. These styles may be vital
 * to themes appearance but often times will not
 * be useful in a true production environment.
 
 * For example each slider in sliders.html has a
 * margin of 65px, a large number only needed 
 * because six sliders have been stacked on top 
 * of each other. This would most likely not 
 * happen in a real enviroment.
================================================= 
 A. Misc/Global
================================================= */
.ajax-loading {
  overflow-y: scroll;
}
/*===============================================
  B. Customizer.html
================================================= */
#skin-menu {
  display: block;
}
#skin-toolbox {
  z-index: 999;
  overflow: visible !important;
  position: fixed;
  top: 120px;
  right: -280px;
  width: 280px;
  -webkit-transition: right 0.1s ease-in-out;
  -moz-transition: right 0.1s ease-in-out;
  transition: right 0.1s ease-in-out;
}
#skin-toolbox.toolbox-open {
  right: 0;
}
#skin-toolbox .panel-heading {
  cursor: pointer;
  margin-right: 30px;
  border: 1px solid #DDD;
  width: 274px;
  height: 47px;
  line-height: 42px;
  right: 44px;
  font-size: 14px;
}
#skin-toolbox .panel-heading .panel-title {
  padding-left: 40px;
}
#skin-toolbox .panel-body {
  border: 1px solid #DDD;
  border-top: 0;
  padding: 23px;
}
#skin-toolbox .panel-icon {
  font-size: 22px;
  padding-right: 20px;
  padding-left: 6px;
}
/*===============================================
  B. Upload-tools.html
================================================= */
body.upload-tools-page .dropzone {
  min-height: 405px;
}
body.upload-tools-page .panel-body {
  min-height: 300px;
}
/*===============================================
  C. Timeline.html
================================================= */
body.timeline-page .panel-clone {
  display: none;
}
/*===============================================
  D. Sliders.html
================================================= */
.slider-example .form-horizontal .col-md-9 {
  margin-top: 65px;
}
.slider-example .form-horizontal .col-md-2 {
  margin-top: 62px;
  margin-right: 20px;
}
.slider-example .form-horizontal .form-group.first .col-md-9 {
  margin-top: 45px;
}
.slider-example .form-horizontal .form-group.first .col-md-2 {
  margin-top: 42px;
}
.slider-example .form-horizontal .form-group:last-child {
  margin-bottom: 40px;
}
/*===============================================
  E. Portlets.html
================================================= */
body.portlets-page .panel .tab-content {
  padding: 0;
  border: 0;
  min-height: 95px;
}
body.portlets-page #accordion {
  margin-bottom: 35px;
}
/*===============================================
  F. Maps.html
================================================= */
body.maps-page .map {
  width: 100%;
  height: 400px;
}
body.maps-page .panel-menu button {
  margin-right: 8px;
  min-width: 65px;
}
/*===============================================
  G. Gallery.html
================================================= */
body.gallery-page {
  overflow: scroll;
}
/*===============================================
  J. Elements.html
================================================= */
body.elements-page .panel button {
  margin-right: 6px;
  margin-bottom: 8px;
}
body.elements-page .panel .btn-group button {
  margin-right: 0;
  margin-bottom: 0;
}
body.elements-page .btn-block {
  border-radius: 0;
}
/*===============================================
  K. Charts.html
================================================= */
body.charts-page .panel-menu label {
  font-size: 13px;
  font-weight: 600;
  color: #888;
  margin-right: 5px;
}
body.charts-page .legend table tr td {
  padding: 5px 10px 5px 5px;
}
/*===============================================
  L. Animations.html
================================================= */
.animate-me-btns a {
  margin: 5px 5px 7px;
}
.animate-me-btns .tab-content {
  border: 0;
  padding-bottom: 30px;
}
/*===============================================
  M. Buttons.html
================================================= */
body.buttons-page .panel button {
  margin-right: 6px;
  margin-bottom: 8px;
}
body.buttons-page .panel .btn-group {
  margin-right: 5px;
}
body.buttons-page .panel .btn-group button {
  margin-right: 0;
  margin-bottom: 8px;
}
body.buttons-page .panel .btn-group-vertical button {
  margin-right: 0;
  margin-bottom: 0;
}
body.buttons-page .social-buttons-panel button {
  margin: 10px;
}
body.buttons-page .zocial,
a.zocial {
  min-height: 32px;
  margin: 8px;
}
body.buttons-page .zocial.icon {
  min-height: 28px;
}
body.buttons-page .zocial.icon.facebook:before {
  padding-right: 5px;
}
/*===============================================
  N. 404/500.html
================================================= */
.icon-option-menu li a {
  cursor: pointer;
}
.icon-option-menu li a i {
  padding-right: 6px;
  color: #777;
}
/*===============================================
  N. Editors
================================================= */
/* CKEDITOR BUTTON DISABLES - IMPORTANT */
#cke_8 {
  display: none;
}
.note-editor .note-toolbar > .btn-group.note-para {
  border-right: none;
}
.editor-color-swapper {
  z-index: 1024;
  position: absolute;
  top: 40px;
  right: 22px;
}
/*===============================================
  O. Icons.html
================================================= */
#icon-nav.affix {
  top: 80px;
}
#icon-nav ul {
  width: 220px;
}
#icon-nav li:hover span {
  color: #444;
}
#icon-nav li.active span {
  color: #428bca;
}
.panel-body .page-header {
  color: #428bca;
  font-size: 18px;
}
#glyphicons-icon-list,
#glyphicon-icon-list,
#imoon-icon-list,
.fa-icon-list {
  font-size: 12px;
  padding-left: 0;
  padding-bottom: 1px;
  margin-bottom: 20px;
  list-style: none;
  overflow: hidden;
}
#glyphicons-icon-list li,
#glyphicon-icon-list li,
#imoon-icon-list li,
.fa-icon-list li {
  float: left;
  width: 20%;
  height: 100px;
  padding: 5px;
  line-height: 1.4;
  text-align: center;
}
#glyphicons-icon-list .glyphicons,
#glyphicon-icon-list .glyphicon,
#imoon-icon-list .imoon,
.fa-icon-list .fa {
  display: block;
  margin: 5px auto 15px;
  font-size: 24px;
}
#glyphicons-icon-list li:hover,
#glyphicon-icon-list li:hover,
#imoon-icon-list li:hover,
.fa-icon-list li:hover {
  color: #428bca;
}
/*===============================================
  P. Global Changes
================================================= */
/* Disables hover effect for multi-level menu */
ul.sidebar-nav ul#sideEight.sub-nav > li > a:hover {
  background-color: transparent;
}
.panel-tabs > li > a:hover {
  background-color: #f2f2f2;
}
#return-arrow {
  color: #555;
  padding-left: 15px;
  padding-top: 15px;
  position: fixed;
  opacity: 0.7;
  cursor: pointer;
  display: block;
  z-index: 1050;
}
#return-arrow i.fa {
  float: left;
  padding-top: 2px;
}
#return-arrow span {
  float: left;
  padding-left: 15px;
  padding-top: 0px;
  font-size: 16px;
}
#return-arrow:hover {
  opacity: 1;
}
/*===================================================
  IV. PRINT STYLES - Designed soley for Invoice Page
      Problems will arise if you attempt to use
    these styles globally
=====================================================*/
@media print {
  /* Reset + Hide Primary Page Components */
  header.navbar,
  #sidebar_left,
  #sidebar_right,
  #topbar,
  #skin-toolbox,
  .panel-heading,
  .invoice-buttons {
    display: none !important;
    visibility: hidden;
    width: 0 !important;
    height: 0 !important;
    outline: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }
  /* Modify Primary Container */
  #content_wrapper {
    background: 0;
    margin: 0 auto !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transition: none;
  }
  #content {
    padding: 0;
    background: none;
  }
  #content_wrapper:after {
    margin: 0;
    display: none;
  }
  /* Shorten and center page */
  #main {
    width: 1000px !important;
    margin: 0 auto !important;
  }
  /* Remove all Panel Borders */
  .panel,
  .panel-body {
    border: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  /* Hide Image Logo and reveal Text logo */
  .invoice-logo {
    display: none !important;
  }
  .invoice-logo-text {
    display: block !important;
    visibility: visible !important;
  }
  /* Modify Invoice Container */
  .table-layout > .col-md-10 {
    width: 100% !important;
    padding: 0 !important;
  }
  /* Modify Invoice Panels */
  #invoice-info {
    border-top: 1px dashed #ddd;
    border-bottom: 1px dashed #ddd;
    margin-top: 20px !important;
    margin-bottom: 40px !important;
    background-color: #ddd;
  }
  /* Modify Invoice Panels */
  #invoice-info > .col-md-4 {
    float: none;
    display: inline-block;
    width: 32%;
    padding: 0;
    margin: 0;
  }
  #invoice-info > .col-md-4:nth-child(2) {
    text-align: center;
  }
  #invoice-info > .col-md-4:last-child {
    text-align: right;
    position: relative;
    top: 8px;
  }
  #invoice-info > .col-md-4 .panel-body {
    padding: 10px;
  }
}
/* ==============================================
   III. RESPONSIVE STYLES
      A. Header
    B. Content
    C. Sidebar
    D. Dashboard.html
        
* These styles control various aspects of the
* site which benefit from being responsive 
================================================= 
  B. Content Responsive Styles
================================================= */
#content {
  padding: 15px 8px 40px 11px;
}
/* content padding on large resolutions */
@media (min-width: 1000px) {
  #content {
    padding: 25px 20px 50px 21px;
  }
}
/* Adds top padding to md columns as a spacer
 * when they are mobile stacked */
@media (max-width: 991px) {
  #content .col-md-2 + .col-md-2,
  #content .col-md-2 + .col-md-4,
  #content .col-md-2 + .col-md-6,
  #content .col-md-4 + .col-md-2,
  #content .col-md-4 + .col-md-4,
  #content .col-md-4 + .col-md-6,
  #content .col-md-6 + .col-md-2,
  #content .col-md-6 + .col-md-4,
  #content .col-md-6 + .col-md-6 {
    padding-top: 10px;
  }
}
@media (max-width: 815px) {
  #content .panel .panel-body {
    overflow: hidden !important;
    min-width: 0 !important;
  }
}
/*=============================================== 
  B. Topbar Responsive Styles
================================================= */
@media (max-width: 815px) {
  #topbar {
    padding: 10px 6px 10px 14px !important;
  }
  #topbar .topbar-dropdown {
    display: none !important;
  }
}
/* ==============================================
   Navbar
================================================= */
.navbar {
  z-index: 1030;
  margin-bottom: 0;
  height: 60px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/*navbar menu*/
.navbar .nav {
  margin: 0;
}
.navbar .nav > li {
  float: left;
}
.navbar .nav > li > a {
  color: #777;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 59px;
  max-height: 59px;
}
.navbar .nav > li.open > a,
.navbar .nav > li:hover > a,
.navbar .nav > li:focus > a,
.navbar .nav > li.active > a,
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
  color: #333;
  background-color: #DDD;
}
.navbar .nav > li.dropdown.open .dropdown-menu {
  margin-top: 10px;
  border-top: 3px solid #4a89dc;
  border-radius: 2px;
}
.navbar .nav > li.dropdown.open .dropdown-menu:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  right: 8px;
  bottom: 100%;
  border-width: 0 10px 10px;
  border-bottom-color: #4a89dc;
}
/*navbranding*/
.navbar-branding,
.header-branding {
  position: relative;
  overflow: hidden;
  float: left;
  height: 60px;
  background-color: #1f70a8;
  /*margin-right: 10px;*/
}
.header-branding {
  width: 280px;
  margin-left:-60px;
  text-align:right;
}
.navbar-branding {
  width: 280px;
  z-index: 99999999999;
}
body.sb-l-o .header-branding {
  display:none;
}
body.sb-l-c .header-branding {
  display:block;
}
.navbar-branding a.navbar-brand,
.header-branding a.navbar-brand {
  height: 60px;
  line-height: 60px;
  padding: 0;
  color: #777;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.5px;
}
.navbar-branding a.navbar-brand {
  padding-left: 18px;
}
.header-branding a.navbar-brand {
  padding-right: 18px;
  float:right;
}

/*navbar toggle sidemenu button*/
#toggle_sidemenu_l {
  float: right;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  line-height: 58px;
  max-height: 60px;
  width: 60px;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#toggle_sidemenu_l:hover {
  color: #DDD;
}
/*left nav menu*/
.navbar-nav.navbar-left {
  float: left;
  position: relative;
  max-height: 60px;
}
.navbar-nav.navbar-left > li > a {
  padding-right: 12px;
  padding-left: 12px;
}
/*right nav menu*/
.navbar-nav.navbar-right,
.navbar-nav.navbar-right:last-child {
  float: right;
  margin: 0 15px 0 0;
}
/*navbar forms*/
.navbar-form {
  margin-top: 17px;
  margin-bottom: 17px;
}
.navbar-form.navbar-search input {
  height: 26px;
  padding: 0 12px;
  border-radius: 20px;
  border-color: transparent;
  box-shadow: none;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
/*navbar dropdown, child menu item slide effect*/
.dropdown-item-slide .dropdown-menu li.item-1,
.dropdown-item-slide .dropdown-menu li.item-2,
.dropdown-item-slide .dropdown-menu li.item-3,
.dropdown-item-slide .dropdown-menu li.item-4,
.dropdown-item-slide .dropdown-menu li.item-5 {
  -webkit-transform-origin: 20% 20%;
  -o-transform-origin: 20% 20%;
  transform-origin: 20% 20%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
}
.dropdown-item-slide.slide-open .dropdown-menu li {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition: 0.2s linear 0s;
  -o-transition: 0.2s linear 0s;
  transition: 0.2s linear 0s;
}
.dropdown-item-slide.slide-open .dropdown-menu li.item-2 {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.dropdown-item-slide.slide-open .dropdown-menu li.item-3 {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.dropdown-item-slide.slide-open .dropdown-menu li.item-4 {
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.dropdown-item-slide.slide-open .dropdown-menu li.item-5 {
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
/*navbar dropdown menu item hover effect*/
li.dropdown-hover:hover,
.dropdown-hover li:hover {
  background: #f5f5f5;
  -webkit-transition-delay: 0s !important;
  -o-transition-delay: 0s !important;
  transition-delay: 0s !important;
}
/*navbar dropdown menu item hover border effects*/
li.dropdown-border-hover,
.dropdown-border-hover li {
  border-left: 3px solid transparent;
}
li.dropdown-border-hover:hover,
.dropdown-border-hover li:hover {
  background: #f8f8f8;
  border-left-color: #4a89dc;
  -webkit-transition-delay: 0s !important;
  -o-transition-delay: 0s !important;
  transition-delay: 0s !important;
  -webkit-transition: all linear 0s !important;
  -o-transition: all linear 0s !important;
  transition: all linear 0s !important;
}
/*multiselects in navbar user dropdown menu */
.navbar .dropdown.open .btn-group.open .multiselect-container.dropdown-menu {
  margin-top: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.1);
}
.navbar .dropdown.open .btn-group.open .multiselect-container.dropdown-menu:after {
  display: none;
}
#user-role + .btn-group > button.multiselect {
  overflow: hidden;
  text-overflow: ellipsis;
}
#user-status + .btn-group .multiselect-container.dropdown-menu {
  right: auto !important;
  left: 0 !important;
}
#user-status + .btn-group .multiselect-container.dropdown-menu,
#user-role + .btn-group .multiselect-container.dropdown-menu {
  top: 0 !important;
  position: relative !important;
  margin-top: 9px;
  margin-bottom: 3px;
  width: 212px;
}
#user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child,
#user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child,
#user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child label,
#user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child label {
  cursor: pointer;
  position: relative;
}
#user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child:after,
#user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child:after {
  content: "\f00d";
  font-family: "FontAwesome";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 6px;
  right: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #AAA;
  -webkit-transition: color 0.15s ease;
  transition: color 0.15s ease;
}
#user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child:hover:after,
#user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child:hover:after {
  color: #4a89dc;
}
/* If navbar has a contextual bg we make menu links white*/
.navbar[class*='bg-'] .navbar-brand,
.navbar[class*='bg-'] .nav > li > a,
.navbar[class*='bg-'] .nav > li.open > a {
  color: #fff;
}
.navbar.bg-primary {
  background-color: #4a89dc !important;
  color: #f5f8fd;
}
.navbar.bg-primary.navbar .nav > li.open > a,
.navbar.bg-primary.navbar .nav > li:hover > a,
.navbar.bg-primary.navbar .nav > li:focus > a,
.navbar.bg-primary.navbar .nav > li.active > a,
.navbar.bg-primary.navbar .nav > li > a:hover,
.navbar.bg-primary.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #3078d7;
}
.navbar.bg-primary.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #4a89dc;
}
.navbar.bg-primary.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #4a89dc;
}
.navbar.bg-primary.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #4a89dc;
}
.navbar.bg-success {
  background-color: #70ca63 !important;
  color: #fcfefb;
}
.navbar.bg-success.navbar .nav > li.open > a,
.navbar.bg-success.navbar .nav > li:hover > a,
.navbar.bg-success.navbar .nav > li:focus > a,
.navbar.bg-success.navbar .nav > li.active > a,
.navbar.bg-success.navbar .nav > li > a:hover,
.navbar.bg-success.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #5bc24c;
}
.navbar.bg-success.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #70ca63;
}
.navbar.bg-success.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #70ca63;
}
.navbar.bg-success.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #70ca63;
}
.navbar.bg-info {
  background-color: #3bafda !important;
  color: #e7f5fa;
}
.navbar.bg-info.navbar .nav > li.open > a,
.navbar.bg-info.navbar .nav > li:hover > a,
.navbar.bg-info.navbar .nav > li:focus > a,
.navbar.bg-info.navbar .nav > li.active > a,
.navbar.bg-info.navbar .nav > li > a:hover,
.navbar.bg-info.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #27a2cf;
}
.navbar.bg-info.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #3bafda;
}
.navbar.bg-info.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #3bafda;
}
.navbar.bg-info.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #3bafda;
}
.navbar.bg-warning {
  background-color: #f6bb42 !important;
  color: #ffffff;
}
.navbar.bg-warning.navbar .nav > li.open > a,
.navbar.bg-warning.navbar .nav > li:hover > a,
.navbar.bg-warning.navbar .nav > li:focus > a,
.navbar.bg-warning.navbar .nav > li.active > a,
.navbar.bg-warning.navbar .nav > li > a:hover,
.navbar.bg-warning.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #f5b025;
}
.navbar.bg-warning.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #f6bb42;
}
.navbar.bg-warning.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #f6bb42;
}
.navbar.bg-warning.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #f6bb42;
}
.navbar.bg-danger {
  background-color: #e9573f !important;
  color: #fef7f6;
}
.navbar.bg-danger.navbar .nav > li.open > a,
.navbar.bg-danger.navbar .nav > li:hover > a,
.navbar.bg-danger.navbar .nav > li:focus > a,
.navbar.bg-danger.navbar .nav > li.active > a,
.navbar.bg-danger.navbar .nav > li > a:hover,
.navbar.bg-danger.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #e63f24;
}
.navbar.bg-danger.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #e9573f;
}
.navbar.bg-danger.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #e9573f;
}
.navbar.bg-danger.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #e9573f;
}
.navbar.bg-alert {
  background-color: #967adc !important;
  color: #ffffff;
}
.navbar.bg-alert.navbar .nav > li.open > a,
.navbar.bg-alert.navbar .nav > li:hover > a,
.navbar.bg-alert.navbar .nav > li:focus > a,
.navbar.bg-alert.navbar .nav > li.active > a,
.navbar.bg-alert.navbar .nav > li > a:hover,
.navbar.bg-alert.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #8362d6;
}
.navbar.bg-alert.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #967adc;
}
.navbar.bg-alert.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #967adc;
}
.navbar.bg-alert.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #967adc;
}
.navbar.bg-system {
  background-color: #37bc9b !important;
  color: #cef1e8;
}
.navbar.bg-system.navbar .nav > li.open > a,
.navbar.bg-system.navbar .nav > li:hover > a,
.navbar.bg-system.navbar .nav > li:focus > a,
.navbar.bg-system.navbar .nav > li.active > a,
.navbar.bg-system.navbar .nav > li > a:hover,
.navbar.bg-system.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #30a487;
}
.navbar.bg-system.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #37bc9b;
}
.navbar.bg-system.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #37bc9b;
}
.navbar.bg-system.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #37bc9b;
}
.navbar.bg-dark {
  background-color: #3b3f4f !important;
  color: #9fa4b7;
}
.navbar.bg-dark.navbar .nav > li.open > a,
.navbar.bg-dark.navbar .nav > li:hover > a,
.navbar.bg-dark.navbar .nav > li:focus > a,
.navbar.bg-dark.navbar .nav > li.active > a,
.navbar.bg-dark.navbar .nav > li > a:hover,
.navbar.bg-dark.navbar .nav > li > a:focus {
  color: #FFF;
  background-color: #2e313d;
}
.navbar.bg-dark.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #3b3f4f;
}
.navbar.bg-dark.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #3b3f4f;
}
.navbar.bg-dark.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #3b3f4f;
}
.navbar.bg-light {
  color: #666;
  background-color: #FFF !important;
  border-bottom: 1px solid #E2E2E2;
}
.navbar.bg-light .navbar-branding {
  background-color: #FFF !important;
  border-bottom: 1px solid #E6E6E6;
}
.navbar.bg-light .navbar-form.navbar-search input {
  border-color: #EEE;
}
.navbar.bg-light .navbar-form.navbar-search input:focus {
  background-color: #fafafa;
  border-color: #f0f0f0;
}
.navbar.bg-light .navbar-brand,
.navbar.bg-light .nav > li > a,
.navbar.bg-light .nav > li.open > a {
  color: #666;
}
.navbar.bg-light #toggle_sidemenu_l,
.navbar.bg-light #toggle_sidemenu_l:hover,
.navbar.bg-light #toggle_sidemenu_l:focus {
  color: #666;
}
.navbar.bg-light.navbar .nav > li.open > a,
.navbar.bg-light.navbar .nav > li:hover > a,
.navbar.bg-light.navbar .nav > li:focus > a,
.navbar.bg-light.navbar .nav > li.active > a,
.navbar.bg-light.navbar .nav > li > a:hover,
.navbar.bg-light.navbar .nav > li > a:focus {
  color: #222;
  background-color: #f7f7f7;
}
.navbar.bg-light.navbar .nav > li.dropdown.open .dropdown-menu {
  border-top-color: #999;
}
.navbar.bg-light.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #999;
}
.navbar.bg-light.navbar .nav > li.dropdown.open .dropdown-menu:after {
  border-bottom-color: #999;
}
/* Modify whitespace for user menu dropdown - Firefox alignment bug fix */
.navbar .navbar-right > li:last-child > .dropdown-menu > li > a {
  white-space: inherit;
}
@media (max-width: 1000px) {
  .navbar .navbar-right:last-child {
    margin-right: 5px;
  }
  .navbar .navbar-right > li:last-child > a > img {
    margin-right: 5px !important;
  }
  .navbar .navbar-right > li:last-child > a > span {
    display: none;
  }
  .navbar .navbar-right > li:last-child > a > span.caret {
    display: inline-block;
  }
  .navbar-form.navbar-search {
    padding: 21px 6px 19px;
    margin: 0;
    cursor: pointer;
    width: auto;
    float: left;
  }
  .navbar-form.navbar-search .form-group {
    margin: 0 !important;
  }
  .navbar-form.navbar-search:after {
    content: "\f02e";
    position: relative;
    font: normal normal 16px octicons;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .navbar-form.navbar-search input {
    opacity: 0;
    z-index: -1;
    visibility: hidden;
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 60px;
    margin: 0;
    font-size: 24px;
    color: #AAA;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #EEE;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .navbar-form.navbar-search input:focus,
  .navbar.bg-light .navbar-form.navbar-search input:focus {
    background-color: #FFF;
  }
  .navbar-form.navbar-search.search-open input {
    top: 0;
    opacity: 1;
    visibility: visible;
    z-index: 1040;
  }
  .navbar-form.navbar-search .search-remove {
    display: none;
    z-index: 1040;
    position: absolute;
    color: #AAA;
    top: 0;
    right: 0;
    height: 60px;
    line-height: 59px;
    padding-left: 15px;
    padding-right: 25px;
  }
  .navbar-form.navbar-search .search-remove:after {
    position: relative;
    content: "\e014";
    font-family: 'Glyphicons Halflings';
    text-align: center;
    font-size: 20px;
  }
  .navbar-form.navbar-search.search-open .search-remove:hover {
    color: #ee7f6d;
  }
}
@media (max-width: 599px) {
  .sb-l-m .navbar > .navbar-right,
  .navbar .navbar-nav > li.dropdown {
    position: static !important;
  }
  .navbar .navbar-right:last-child {
    margin-right: 0;
  }
  .navbar-left .dropdown-menu,
  .navbar-right .dropdown-menu,
  .navbar-left .open .dropdown-menu,
  .navbar-right .open .dropdown-menu {
    z-index: 1000;
    margin-top: 0 !important;
    float: left;
    position: absolute;
    top: 100%;
    left: -1px;
    min-width: 101%;
    list-style: none;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  }
  #user-status + .btn-group .multiselect-container.dropdown-menu,
  #user-role + .btn-group .multiselect-container.dropdown-menu {
    top: 34px !important;
    position: absolute !important;
    right: 0;
    left: auto;
  }
}
/* ==============================================
   Content Trays
     A. Trays
     B. Tray Sizes
     C. Tray Bin
     D. Tray Navigation
     E. Tray Hover Settings
=================================================
   A. Content Trays
================================================= */
/*tray table layout*/
#content.table-layout {
  padding: 0;
}
#content.table-layout > div,
#content.table-layout > section {
  padding: 25px 20px 50px;
}
/*trays*/
.tray-left,
.tray-right {
  position: relative;
  width: 250px;
  min-height: 100%;
  border-right: 1px solid #DDD;
  background: #f5f5f5;
  padding: 15px;
}
/*Right tray*/
.tray-right {
  border-left: 1px solid #DDD;
  border-right: 0;
}
/*Top tray*/
.tray-top {
  position: relative;
  width: 100%;
  min-height: 150px;
  border-bottom: 1px solid #DDD;
  background-color: #f2f2f2;
  padding: 15px;
}
.tray-top.light {
  background-color: #fafafa;
}
/*===============================================
   B. Tray Sizes
================================================= */
.tray200 {
  width: 200px;
}
.tray225 {
  width: 225px;
}
.tray250 {
  width: 250px;
}
.tray250 {
  width: 270px;
}
.tray290 {
  width: 290px;
}
.tray320 {
  width: 320px;
}
.tray350 {
  width: 350px;
}
.tray400 {
  width: 400px;
}
/*===============================================
   C. Tray Bin
================================================= */
/*a dashed bin great for organizing buttons and links*/
.tray-bin {
  padding: 7px;
  border: 1px dashed #CCC;
  background: #eee;
  min-height: 65px;
  margin-bottom: 20px;
}
/*If navbar has a contextual bg we make menu links white*/
.tray-bin div[class*='col-'] {
  padding-left: 5px;
  padding-right: 5px;
}
/*traybin divider text. Used primarily in li navs*/
.tray-bin .nav-label {
  text-align: center;
  font-size: 12px;
  color: #999999;
  padding-left: 5px;
  margin-top: 20px;
  margin-bottom: 10px;
}
/*===============================================
   D. Tray Navigation
================================================= */
/* item link */
ul.tray-nav li a {
  width: 100%;
  padding: 11px 15px 11px 30px;
  color: #999;
  font-size: 13px;
  background: #f2f2f2;
  border-top: 1px solid #DDD;
}
/* item icon */
ul.tray-nav li a .fa {
  padding-right: 18px;
}
/* active item  */
ul.tray-nav li.active a {
  color: #666;
  background: #fbfbfb;
  transition: all 0.3s ease;
}
/* active item icon */
ul.tray-nav li.active a .fa {
  color: #4a89dc;
}
/*Tray nav style option - Arrow*/
/* active item bottom border */
ul.tray-nav.tray-nav-arrow li.active:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  top: 1px;
  left: 0;
  border-bottom: 1px solid #DDD;
}
ul.tray-nav.tray-nav-arrow li.active a:before,
ul.tray-nav.tray-nav-arrow li.active a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-left: 20px solid;
  border-left-color: #fbfbfb;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transition: all 0.3s ease;
}
ul.tray-nav.tray-nav-arrow li.active a:before {
  border-left-color: #888;
}
/* item hover */
ul.tray-nav.tray-nav-arrow li:hover a:after {
  border-left-color: #f8f8f8;
}
/*settings for arrows when used on a right aligned tray (.tray-right)*/
/* active item bottom border */
.tray-right ul.tray-nav.tray-nav-arrow li.active:before {
  width: 100%;
  left: auto;
  right: 0;
}
.tray-right ul.tray-nav.tray-nav-arrow li.active a:before,
.tray-right ul.tray-nav.tray-nav-arrow li.active a:after {
  left: auto;
  right: 100%;
  border-right: 20px solid;
  border-left-color: transparent;
  border-right-color: #fbfbfb;
}
.tray-right ul.tray-nav.tray-nav-arrow li.active a:before {
  border-left-color: transparent;
  border-right-color: #888;
}
/* item hover */
.tray-right ul.tray-nav.tray-nav-arrow li:hover a:after {
  border-left-color: transparent;
  border-right-color: #f8f8f8;
}
/*Tray nav style option - Bordered*/
.tray-nav.tray-nav-border li {
  position: relative;
}
.tray-nav.tray-nav-border li a {
  font-size: 14px;
  padding: 12px 15px 12px 30px;
}
.tray-nav.tray-nav-border li:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #CCC;
}
.tray-nav.tray-nav-border li.active:after {
  background: #4a89dc;
}
.tray-nav.tray-nav-border li:hover:after {
  background: #999;
}
/*modifcation for right side trays (.tray-right)*/
.tray-right .tray-nav.tray-nav-border li:after {
  left: 0;
  right: auto;
}
/*border skin contextuals*/
.tray-nav.tray-nav-border li.active.nav-primary:after {
  background: #4a89dc;
}
.tray-nav.tray-nav-border li.active.nav-success:after {
  background: #70ca63;
}
.tray-nav.tray-nav-border li.active.nav-info:after {
  background: #3bafda;
}
.tray-nav.tray-nav-border li.active.nav-warning:after {
  background: #f6bb42;
}
.tray-nav.tray-nav-border li.active.nav-danger:after {
  background: #e9573f;
}
.tray-nav.tray-nav-border li.active.nav-alert:after {
  background: #967adc;
}
.tray-nav.tray-nav-border li.active.nav-system:after {
  background: #37bc9b;
}
.tray-nav.tray-nav-border li.active.nav-dark:after {
  background: #3b3f4f;
}
/*===============================================
   E. Tray Hover Settings

   At <1000 window width javascript will add a 
   "tray-rescale" class to the document body. This
   will shift the menu over out of sight and
   expand it only when the user hovers over the 
   portion that's still visible
================================================= */
body.tray-rescale .tray-left,
body.tray-rescale .tray-right {
  position: fixed;
  z-index: 1;
  opacity: 0.5;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
body.tray-rescale .tray-left,
body.tray-rescale .tray-right {
  right: -275px;
}
body.tray-rescale .tray-left {
  border-left: 1px solid #DDD;
}
/* adjust center tray to fill window width add needed
 padding to offset the partially hidden tray */
body.tray-rescale .tray-center {
  width: 100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding-right: 58px !important;
}
body.tray-rescale .tray-top + .tray-center {
  padding-right: inherit !important;
}
/* adjust depending on tray size */
body.tray-rescale .tray.tray200 {
  right: -155px;
}
body.tray-rescale .tray.tray225 {
  right: -180px;
}
body.tray-rescale .tray.tray250 {
  right: -205px;
}
body.tray-rescale .tray.tray270 {
  right: -225px;
}
body.tray-rescale .tray.tray290 {
  right: -245px;
}
body.tray-rescale .tray.tray320 {
  right: -275px;
}
body.tray-rescale .tray.tray350 {
  right: -305px;
}
body.tray-rescale .tray.tray400 {
  right: -355px;
}
/* on hover open the menus */
body.tray-rescale .tray-left:hover,
body.tray-rescale .tray-right:hover {
  opacity: 1;
  z-index: 999;
}
body.tray-rescale .tray-left:hover,
body.tray-rescale .tray-right:hover {
  right: 0px;
}
/* adjust any bootstrap affix settings if they exist */
body.tray-rescale .tray .tray-nav.affix,
body.tray-rescale .tray .affix-pane.affix {
  top: auto;
}
/* Disable completely on resolutions <600 */
@media (max-width: 600px) {
  body.tray-rescale .tray-left,
  body.tray-rescale .tray-right {
    display: none;
  }
  body.tray-rescale .tray-center {
    padding-right: 13px !important;
  }
  body.tray-rescale #content.table-layout > div,
  body.tray-rescale #content.table-layout > section {
    padding: 10px 13px 40px !important;
  }
}
/* ==============================================
   LEFT SIDEBAR
    A. Default Open State
    B. Sidebar User Area
    C. Left Sidebar Minified
    D. Nano Sidebar Scroller Settings
    E. Sidebar Skins - Default Dark Skin
    F. Sidebar Skins - Light Skin
=================================================
  A. Default Open State
================================================= */
/* Sidebar Left Container */
#sidebar_left {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  min-height: 100%;
  padding-bottom: 40px;
  background-color: #30363e;
}
/* Sidebar Left Menu */
.sidebar-menu {
  padding-bottom: 20px;
}
/* Top Level Menu Items */
.sidebar-menu > li {
  margin: 0;
}
.sidebar-menu > li:first-child {
  padding-top: 4px;
}
/* all menu Links */
.sidebar-menu > li a {
  color: #fff;
}
/* Top level menu Links */
.sidebar-menu > li > a {
  padding: 0;
  line-height: 35px;
  height: 35px;
  overflow: hidden;
}
/* Top Level Menu Icon */
.sidebar-menu > li > a > span:nth-child(1) {
  float: left;
  top: 0;
  line-height: 35px;
  width: 38px;
  font-size: 13px;
  text-align: center;
  padding-left: 13px;
}
/* Top Level Menu Title */
.sidebar-menu > li > a > span:nth-child(2) {
  font-weight: 600;
  padding-left: 6px;
}
/* Menu Item - Tray, used to hold badges and such */
.sidebar-menu li > a > .sidebar-title-tray {
  position: absolute;
  right: 10px;
  top: -2px;
}
.sidebar-menu li > a > .sidebar-title-tray .label {
  padding: .0em .4em .2em;
  font-size: 11px;
}
/* Menu item title caret */
.sidebar-menu li > a > span.caret {
  position: absolute;
  top: 45%;
  right: 13px;
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
/* Open Menu Item Caret - we simply flip the carets border */
.sidebar-menu li > a.menu-open > span.caret {
  border-top: 0;
  border-bottom: 5px solid;
}
/* Sub Level Menu  */
.sidebar-menu > li > ul {
  clear: both;
  display: none;
  width: 280px;
  height: auto;
  background-color: #282d33;
}
.sidebar-menu li > a.menu-open + ul {
  display: block;
}
/* Sub Level Menu Items */
.sidebar-menu > li > ul > li > a {
  color: #d1d1d1;
  padding: 11px 20px 11px 30px;
}
/* Sub Level Menu first and last items */
.sidebar-menu > li > ul > li:first-child > a {
  padding-top: 14px;
}
.sidebar-menu > li > ul > li:last-child > a {
  padding-bottom: 17px;
}
/* Sub Level Menu Item Icon */
.sidebar-menu > li > ul > li > a > span:nth-child(1) {
  margin-right: 10px;
  font-size: 11px;
}
/* Sub Level Menu Item Label */
.sidebar-menu > li > ul > li > a > span.label {
  float: right;
  line-height: 17px;
}
/* Multi Level Menu (submenu inside a submenu and so on) */
.sidebar-menu > li > ul > li ul {
  clear: both;
  display: none;
  width: 280px;
  height: auto;
  background-color: #22262c;
}
/* Multi Level Menu items */
.sidebar-menu > li > ul > li > ul li a {
  padding: 9px 20px 9px 50px;
}
.sidebar-menu > li > ul > li > ul li:last-child a {
  padding-bottom: 13px;
}
/* Multi Level Menu item label */
.sidebar-menu > li > ul > li > ul li a .label.label-xs {
  float: right;
  line-height: 17px;
}
/* Top Menu item active border */
.sidebar-menu > li > a.menu-open:after,
.sidebar-menu > li.active > a:after,
.sidebar-menu > li:hover > a:after,
.sidebar-menu > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: #AAA;
}
/* Sub-Menu Menu item active border */
.sidebar-menu > li > ul > li > a.menu-open:after,
.sidebar-menu > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: #AAA;
}
/* Multi-Menu childen active/hover border */
.sidebar-menu > li > ul > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li:focus > a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 5%;
  height: 90%;
  width: 3px;
  background: #999;
}
/* Sidebar labels */
.sidebar-menu .sidebar-label {
  text-transform: uppercase;
  color: #70829a;
  font-weight: 600;
  padding-left: 18px;
  padding-bottom: 3px;
  font-size: 12px;
}
/* Sidebar pProjects */
/* Sidebar stats */
.sidebar-menu .sidebar-stat .progress {
  clear: both;
  background-color: #26292e;
}
.sidebar-menu .sidebar-stat > a {
  height: auto;
  overflow: visible;
}
/*===============================================
  B. Sidebar User Area
================================================= */
/* User Area Menu - A slide down user menu */
.user-menu {
  display: none;
  position: relative;
  left: 0;
  top: 0;
  height: 130px;
  width: 100%;
  padding: 10px;
  background-color: #282d33;
}
.user-menu a {
  position: relative;
  display: block;
  padding: 12px 5px 12px;
  margin-bottom: 3px;
  transition: all 0.2s ease;
}
.user-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
/* menu icon */
.user-menu a span {
  font-size: 24px;
  transition: all 0.3s ease;
}
.user-menu a:hover span {
  color: #3078d7;
}
/* menu title */
.user-menu a h5 {
  display: none;
}
.user-divider {
  height: 4px;
  width: 100%;
  background-color: #e5e5e5;
  border-bottom: 1px solid #CCC;
}
/*====================================================
  C. Left Sidebar Minified
====================================================== */
/* Sidebar Minified Button */
.sidebar-toggle-mini {
  width: 35px;
  height: 32px;
  padding: 7px 0;
}
.sidebar-toggle-mini a {
  position: absolute;
  right: 0;
  display: block;
  text-align: center;
  padding: 6px 6px 5px;
  border: 1px solid #444;
  border-radius: 2px 0 0 2px;
  background-color: #26292e;
}
.sidebar-toggle-mini:hover span {
  color: #DDD;
  transition: all ease-in-out 0.3s;
}
.sidebar-toggle-mini span {
  position: relative;
  color: #888;
  font-size: 16px;
  transform: rotate(180deg);
}
/* active state */
/* Sidebar Minified State */
body.sb-l-m #sidebar_left {
  z-index: 1028;
  overflow: visible;
  width: 60px;
  height: 100%;
  left: 0;
  background-color: #30363e;
}
body.sb-l-m #sidebar_left:before {
  width: 60px;
}
body.sb-l-m .sidebar-header {
  display: none;
}
body.sb-l-m #sidebar_left .sidebar-label,
body.sb-l-m #sidebar_left .sidebar-title-tray,
body.sb-l-m #sidebar_left .sidebar-title,
body.sb-l-m #sidebar_left .caret {
  display: none;
}
body.sb-l-m #sidebar_left .sidebar-proj,
body.sb-l-m #sidebar_left .sidebar-stat {
  display: none;
}
/* Icon container */
body.sb-l-m .sidebar-menu > li {
  padding: 7px 0;
}
body.sb-l-m .sidebar-menu > li > a {
  overflow: visible;
}
/* Icon */
body.sb-l-m .sidebar-menu > li > a > span:nth-child(1) {
  color: #ccc;
  left: -1px;
  width: 60px;
  font-size: 18px;
  padding-left: 0;
}
/* Active icon */
body.sb-l-m .sidebar-menu > li.active > a > span:nth-child(1) {
  color: #2f87c1;
}
/* Item title */
body.sb-l-m .sidebar-menu > li > a > .sidebar-title {
  position: absolute;
  left: 60px;
  top: -4px;
  width: 180px;
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  padding-left: 15px;
  border-left: 1px solid #222;
  background-color: #282d33;
}
/* Convert submenus to visible only on hover */
body.sb-l-m .sidebar-menu > li > a.menu-open + ul {
  display: none;
}
body.sb-l-m .sidebar-menu > li:hover > a + ul,
body.sb-l-m .sidebar-menu > li:hover > a > .sidebar-title {
  display: block !important;
}
/* Sub-Menus title caret etc */
body.sb-l-m .sidebar-menu > li > ul li a > .caret {
  display: block !important;
}
/* Sub-Menus */
body.sb-l-m .sidebar-menu > li > ul {
  position: absolute;
  left: 60px;
  top: 38px;
  width: 180px;
  height: auto;
  border-left: 1px solid #222;
  padding-bottom: 7px;
  overflow: hidden;
}
body.sb-l-m .sidebar-menu > li > ul > li ul {
  width: 180px;
}
/* catch overflow of multi-level submenus */
body.sb-l-m .sidebar-menu > li > ul > li {
  overflow: hidden;
}
/* first level menu item padding */
body.sb-l-m .sidebar-menu li > ul > li > a {
  padding: 8px 20px 8px 20px;
}
/* multi level menu item padding */
body.sb-l-m .sidebar-menu li > ul > li > ul > li a {
  padding: 8px 20px 8px 35px;
}
/* related page container modifications */
body.sb-l-m #content_wrapper {
  margin-left: 60px;
}
/* If sidebar is hidden and minified */
body.sb-l-c.sb-l-m #content_wrapper {
  margin-left: 0;
}
/* Navbar Branding Mini mode */
body.sb-l-m .navbar-branding {
  width: 60px;
}
body.sb-l-m .navbar-brand {
  display: none;
}
/*===============================================
  D. Nano Sidebar Scroller Settings (Core Plugin)
================================================= */
#sidebar_left.affix.nano .tooltip {
  z-index: 9999 !important;
}
/* If the sidebar is minified we disable nanoscroll via css
 * otherwise nano scroll hides popout menus and the scroll is
 * needed to see submenus with many items */
body.sb-l-m #sidebar_left.nano {
  position: absolute;
}
body.sb-l-m #sidebar_left.nano > .nano-content {
  overflow: visible;
  right: 0 !important;
}
/*=======================================================
  E. Sidebar Skins - Default Dark Skin 
========================================================= */
/* Top Level Menu Item - BG color:hover */
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:focus,
.sidebar-menu > li > a:active {
  background-color: transparent;
}
/* Top Level Item - Border Color:hover */
.sidebar-menu > li:hover > a:after,
.sidebar-menu > li:focus > a:after {
  background: transparent;
}
/* Top Level Active Menu Item - BG Color */
.sidebar-menu > li.active > a {
  background-color: transparent;
}
/* Top Level Active Menu Item - Icon Color */
.sidebar-menu > li.active > a > span:nth-child(1) {
  color: #4a89dc;
}
/* Top Level Active Item - Border Color */
.sidebar-menu > li.active > a:after,
.sidebar-menu > li > a.menu-open:after {
  background: transparent;
}
/* Sub-Menu Item - BG Color */
.sidebar-menu > li > ul {
  background-color: #282d33;
}
/* Sub-Menu Item - BG Color:hover */
.sidebar-menu > li > ul > li > a:hover,
.sidebar-menu > li > ul > li > a:focus {
  background-color: #22262c;
}
/* Sub-Menu Item - Border Color:hover */
.sidebar-menu > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li:focus > a:after {
  background: #4a89dc;
}
/* Sub-Menu Active Item - BG Color */
.sidebar-menu > li > ul > li.active > a {
  background-color: transparent;
}
/* Sub-Menu Active Item - Icon Color */
.sidebar-menu > li > ul > li.active > a > span:nth-child(1),
.sidebar-menu > li > ul > li > a.menu-open > span:nth-child(1) {
  color: #4a89dc;
}
/* Sub-Menu Active Item - Border Color */
.sidebar-menu > li > ul > li.active > a:after,
.sidebar-menu > li > ul > li > a.menu-open:after {
  background: #4a89dc;
}
/* Multi-Menu Item - BG Color */
.sidebar-menu > li > ul > li ul {
  background-color: #22262c;
}
/* Multi-level Item - BG Color:hover */
.sidebar-menu > li > ul > li > ul > li > a:hover,
.sidebar-menu > li > ul > li > ul > li > a:focus {
  background-color: transparent;
}
/* Multi-level Active Item - Border Color:hover */
.sidebar-menu > li > ul > li > ul > li:hover > a:after,
.sidebar-menu > li > ul > li > ul > li:focus > a:after {
  background: #967adc;
}
/* Multi-level Active Item - BG Color */
.sidebar-menu > li > ul > li > ul > li.active > a {
  background: transparent;
}
/* Multi-level Active Item - Icon Color */
.sidebar-menu > li > ul > li > ul > li.active > a > span:nth-child(1),
.sidebar-menu > li > ul > li > ul > li > a.menu-open > span:nth-child(1) {
  color: #ffffff;
}
/* Multi-level Active Item - Border Color */
.sidebar-menu > li > ul > li > ul > li.active > a:after {
  background: #967adc;
}
/* Top Level Menu Item - Label Color */
.sidebar-menu .sidebar-label {
  color: #70829a;
}
/* Top Level Menu Item - Link Color */
.sidebar-menu > li a {
  color: #ffffff;
}
/* Menu item Caret */
.sidebar-menu li > a > span.caret {
  color: #ffffff;
}
/* Open Menu item Caret */
.sidebar-menu li > a.menu-open > span.caret {
  color: #4a89dc;
}
/* Usermenu - BG Color */
.user-menu {
  background-color: #282d33;
}
/* Usermenu - Item Icon Color */
.user-menu a span {
  color: #dddddd;
}
/* Usermenu - BG Color:hover */
.user-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
/* Usermenu - Item Icon Color:hover */
.user-menu a:hover span {
  color: #4a89dc;
}
/*=======================================================
  F. Sidebar Skins - Light Skin
     Applied via class to "#sidebar" 
     eg: <aside id="sidebar_left" class="sidebar-light">
========================================================= */
#sidebar_left.sidebar-light {
  color: #666;
  background-color: #fafafa;
  border-right: 1px solid #DDD;
  font-family: "Roboto";
}
#sidebar_left.sidebar-light .sidebar-menu .sidebar-label {
  color: #AAA;
  font-size: 11px;
  font-weight: 500;
}
#sidebar_left.sidebar-light .sidebar-menu li > a > span.caret {
  color: #BBB;
}
#sidebar_left.sidebar-light .sidebar-menu li > a.menu-open > span.caret {
  color: #999;
}
#sidebar_left.sidebar-light .sidebar-menu > li a {
  color: #888;
}
#sidebar_left.sidebar-light .sidebar-menu > li > a:hover,
#sidebar_left.sidebar-light .sidebar-menu > li > a:focus,
#sidebar_left.sidebar-light .sidebar-menu > li > a:active {
  background-color: transparent;
}
#sidebar_left.sidebar-light .sidebar-menu > li > a > span:nth-child(1) {
  color: #888;
}
#sidebar_left.sidebar-light .sidebar-menu > li > a > span:nth-child(2) {
  color: #555;
  font-weight: 500;
  letter-spacing: 0.4px;
}
#sidebar_left.sidebar-light .sidebar-menu > li.active > a > span:nth-child(1) {
  color: #4a89dc;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul {
  background-color: #f2f2f2;
  box-shadow: 0 1px 0 #e5e5e5 inset, 0 -1px 0 #e5e5e5 inset;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > a:hover,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > a:focus {
  background-color: transparent;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li.active > a > span:nth-child(1),
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > a.menu-open > span:nth-child(1) {
  color: #4a89dc;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li ul {
  background-color: #eaeaea;
  box-shadow: 0 1px 0 #d9d9d9 inset, 0 -1px 0 #d9d9d9 inset;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li > a:hover,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li > a:focus {
  background-color: transparent;
}
#sidebar_left.sidebar-light .sidebar-menu > li > a.menu-open:after,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > a.menu-open:after {
  background: transparent;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > a.menu-open:after,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li > a.menu-open:after {
  background: #3bafda;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li.active > a:after,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li:hover > a:after,
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li > ul > li:focus > a:after {
  background: #f6bb42;
}
#sidebar_left.sidebar-light .sidebar-menu > li > ul > li.active > a > span.caret {
  color: #AAA;
}
#sidebar_left.sidebar-light .sidebar-menu .sidebar-stat .progress {
  background-color: #ddd;
}
#sidebar_left.sidebar-light .sidebar-toggle-mini a {
  background-color: #f7f7f7;
  border-color: #eaeaea;
}
#sidebar_left.sidebar-light.light {
  background-color: #fff;
}
#sidebar_left.sidebar-light.light .sidebar-menu > li > ul {
  background-color: #fbfbfb;
}
#sidebar_left.sidebar-light.light .sidebar-menu > li > ul > li ul {
  background-color: #f5f5f5;
}
#sidebar_left.sidebar-light .user-menu {
  background-color: #f2f2f2;
  box-shadow: 0 -1px 0 #e6e6e6 inset;
}
#sidebar_left.sidebar-light .user-menu a span {
  color: #777;
}
/* minified version of light sidebar */
body.sb-l-m #sidebar_left.sidebar-light {
  background-color: #FAFAFA;
}
body.sb-l-m #sidebar_left.sidebar-light.light {
  background-color: #FFF;
}
body.sb-l-m #sidebar_left.sidebar-light .sidebar-menu > li > a > .sidebar-title,
body.sb-l-m #sidebar_left.sidebar-light .sidebar-menu > li > ul {
  border: 1px solid #DDD;
  border-top: 0;
  background-color: #f8f8f8;
  left: 59px;
  box-shadow: none;
}
body.sb-l-m #sidebar_left.sidebar-light .sidebar-menu > li > a > .sidebar-title {
  border-top: 1px solid #DDD;
}
@media (max-width: 900px) {
  /* Sidebar Minified State */
  body.sb-l-m #sidebar_left {
    width: 45px;
  }
  body.sb-l-m #sidebar_left:before {
    width: 45px;
  }
  /* Menu item icon */
  body.sb-l-m .sidebar-menu > li > a > span:nth-child(1) {
    left: -1px;
    width: 45px;
    font-size: 18px;
  }
  /* menu item title */
  body.sb-l-m .sidebar-menu > li > a > .sidebar-title {
    position: absolute;
    left: 45px;
    top: -4px;
    width: 180px;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    padding-left: 15px;
    border-left: 1px solid #222;
    background-color: #282d33;
  }
  /* Sub-Menus */
  body.sb-l-m .sidebar-menu > li > ul {
    position: absolute;
    left: 45px;
    top: 38px;
    width: 180px;
    height: auto;
    border-left: 1px solid #222;
    padding-bottom: 7px;
    overflow: hidden;
  }
  body.sb-l-m .sidebar-menu > li > ul > li ul {
    width: 180px;
  }
  /* first level menu item padding */
  body.sb-l-m .sidebar-menu li > ul > li > a {
    padding: 8px 20px 8px 20px;
  }
  /* multi level menu item padding */
  body.sb-l-m .sidebar-menu li > ul > li > ul > li a {
    padding: 8px 20px 8px 35px;
  }
  /* related page container modifications */
  body.sb-l-m #content_wrapper {
    margin-left: 45px;
  }
  /* If sidebar is hidden and minified */
  body.sb-l-c.sb-l-m #content_wrapper {
    margin-left: 0;
  }
  /* Navbar brand minified (hide logo) */
  body.sb-l-o .navbar-brand,
  body.sb-l-m .navbar-brand {
    display: none;
  }
  /* Navbar branding minified */
  body.sb-l-o .navbar-branding,
  body.sb-l-m .navbar-branding {
    max-width: 45px;
    margin-right: 5px;
  }
  /* Navbar branding Toggle icon sidebar open */
  body.sb-l-o .navbar #toggle_sidemenu_l {
    transform: rotate(90deg);
  }
  /* Navbar branding toggle icon minified */
  body.sb-l-o.sb-l-m .navbar #toggle_sidemenu_l {
    transform: rotate(0deg);
  }
  /* Navbar branding toggle icon minified */
  body.sb-l-o .navbar #toggle_sidemenu_l,
  body.sb-l-m .navbar #toggle_sidemenu_l {
    width: 45px;
  }
  /* hide sidebar user menu button when the sidebar is
    collapsed. As it's not accessible in this mode*/
  .sb-l-o .navbar .sidebar-menu-toggle,
  .sb-l-c .navbar .sidebar-menu-toggle {
    margin-left: 10px;
    display: none;
  }
  #toggle_sidemenu_r {
    margin-top: 4px;
  }
}
/* ==============================================
   Right Sidebar
     A. Default Closed State
     B. Sidebar Right Panel Menu
     C. Nano Sidebar Scroller Settings
=================================================
  A. Default Closed State
================================================= */
#sidebar_right {
  position: fixed;
  width: 300px;
  height: 100%;
  top: 60px;
  right: -300px;
  border-left: 1px solid #ddd;
  background: #f8f8f8;
}
#sidebar_right .sidebar-right-header {
  width: 100%;
  height: 59px;
  padding: 4px 10px 4px 20px;
}
#sidebar_right .sidebar_right_content a:hover {
  text-decoration: none;
}
/*===============================================
   B. Sidebar Right Panel Menu
================================================= */
.title-divider {
  border-bottom: 1px solid #e8e8e8;
  padding: 0 5px 9px 5px;
}
#sidebar_right .panel {
  -webkit-box-shadow: none;
  box-shadow: none;
}
#sidebar_right .panel-heading {
  height: 51px;
  min-height: 51px;
  overflow: hidden;
}
#sidebar_right .panel-tabs li a {
  padding: 17px 18px;
  border-right: 1px solid transparent;
}
#sidebar_right .panel-tabs li:first-child a {
  border-left: 1px solid transparent;
}
/*===============================================
  C. Nano Sidebar Scroller Settings
================================================= */
#sidebar_right.nano > .nano-pane {
  background: rgba(0, 0, 0, 0.07);
}
#sidebar_right.nano > .nano-pane > .nano-slider {
  background: #444;
  background: #CCC;
}
/* ==============================================
    Sidebar Actions
     A. Sidebar Left Toggle
     B. Sidebar Right Toggle
     C. Left Sidebar Minified Helper
     D. Mobile Menu Modifications
=================================================
  A. Sidebar Left Toggle
================================================= */
/*left sidebar open*/
.sb-l-o #sidebar_left {
  left: 0;
  overflow: hidden;
}
.sb-l-o #content_wrapper {
  margin-left: 280px;
}
/*left sidebar closed*/
.sb-l-c #sidebar_left {
  left: -280px;
  overflow: hidden;
}
.sb-l-c #content_wrapper {
  margin-left: 0;
}
/*adjust navbar branding when closed*/
.sb-l-c .navbar-branding {
  width: 60px;
}
.sb-l-c .navbar-branding .navbar-brand {
  display: none;
}
.sb-l-o .header-branding .navbar-brand {
  display: none;
}
.sb-l-m .header-branding .navbar-brand,
.sb-l-c .header-branding .navbar-brand {
  display: block;
}
/*====================================================
  B. Sidebar Right Toggle
====================================================== */
/*Sidebar Right Open */
.sb-r-o #sidebar_right {
  right: 0;
}
.sb-r-o #content_wrapper {
  margin-right: 300px;
}
/*Sidebar Right Closed*/
.sb-r-c #sidebar_right {
  right: -300px;
}
.sb-r-c #content_wrapper {
  margin-right: 0;
}
/*====================================================
  C. Left Sidebar Minified Helper
====================================================== */
.sb-l-c.sb-l-m #sidebar_left {
  left: -60px;
}
/*hide sidebar user menu button when the sidebar is
collapsed. As it's not accessible in this mode*/
.sb-l-m .navbar .sidebar-menu-toggle,
.sb-l-c .navbar .sidebar-menu-toggle {
  margin-left: 10px;
  display: none;
}
/*===============================================
  D. Mobile Menu Modifications
================================================= */
/* At less than 1000px we collapse any open sidebars via 
Media Queries. Theme Javscript will also add a a
".mobile-view" class so that you can do any needed 
manipulation using an html class aswell */
@media (max-width: 1000px) {
  /* Sidebar Left Open/Default */
  #content_wrapper,
  .sb-l-o #content_wrapper {
    margin-left: 0;
    left: 280px;
  }
  /* Sidebar Left Minified */
  .sb-l-m #content_wrapper {
    left: 0;
  }
  /* Sidebar Left Closed */
  .sb-l-c #content_wrapper {
    margin-left: 0;
    left: 0;
  }
  /* Sidebar Right Open */
  .sb-r-o #content_wrapper {
    margin-right: 0;
    left: -300px;
  }
}
/* ==============================================
   Topbar
     A. Topbar Menu
     B. Topbar DropMenu
=================================================
  A. Topbar Menu
================================================= */
#topbar {
  z-index: 2;
  position: relative;
  width: 100%;
  min-height: 51px;
  padding: 10px 21px;
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
}
.topbar-right {
  float: right;
}
.breadcrumb {
  float: left;
  position: relative;
  padding: 2px 25px 0 0;
  margin-bottom: 0;
  font-size: 14px;
  border-radius: 0;
  background-color: transparent;
}
.breadcrumb > li {
  color: #888;
  font-size: 12px;
}
.breadcrumb > li.crumb-active > a {
  color: #555;
  font-size: 18px;
}
/*Toggle sidemenu button*/
#toggle_sidemenu_r i.fa,
#toggle_sidemenu_r span.glyphicon,
#toggle_sidemenu_r span.glyphicons {
  margin-top: 2px;
}
/* toggle sidemenu button (when menu is open) */
body.sb-r-o #toggle_sidemenu_r i.fa,
body.sb-r-o #toggle_sidemenu_r span.glyphicon,
body.sb-r-o #toggle_sidemenu_r span.glyphicons {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
  color: #999;
}
/*toggle right sidebar badge
*/
.badge.badge-hero {
  position: relative;
  top: -12px;
  margin-left: -10px;
  padding: 2px 5px;
  font-size: 11px;
}
/*===============================================
   B. Topbar Dropmenu
================================================= */
#topbar-dropmenu {
  z-index: 9999;
  overflow: hidden;
  display: none;
  position: relative;
  padding: 17px 20px 10px;
  height: auto;
  width: 100%;
  background: url("../../../img/patterns/topbar-bg.jpg") repeat -60px top;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4) inset;
}
#topbar-dropmenu:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
}
.topbar-menu .metro-tile {
  opacity: 0;
  display: block;
  height: 95px;
  position: relative;
  padding: 15px 5px 0;
  margin-bottom: 8px;
  border-radius: 4px;
  text-align: center;
  background: rgba(255, 255, 255, 0.25) !important;
  transition: background 0.2s ease;
}
.topbar-menu .metro-tile:hover,
.topbar-menu .metro-tile:focus,
.topbar-menu .metro-tile:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.4) !important;
}
.topbar-menu .metro-icon {
  font-size: 44px;
}
.topbar-menu .metro-title {
  position: absolute;
  bottom: 0;
  left: 10px;
  font-size: 11px;
  font-weight: 600;
}
/* topbar menu modal */
.metro-modal {
  cursor: pointer;
  position: fixed;
  display: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.6);
}
@media (max-width: 700px) {
  #topbar .breadcrumb {
    padding-top: 3px;
    padding-left: 2px;
  }
  #topbar .breadcrumb .crumb-active {
    display: none;
  }
  #topbar .breadcrumb > li.crumb-active + li:before {
    display: none;
  }
}
@media (max-width: 900px) {
  body.sb-l-m #topbar.affix,
  body.sb-l-o.sb-l-m #topbar.affix {
    margin-left: 45px;
    width: auto;
  }
  body.sb-l-o #topbar.affix {
    margin-left: 280px;
    width: 100%;
  }
}