:root { --sidebar-width: 300px; }

/* ----------------------- BODY -----------------------  */
body, h1, h2, h3, h4, h5, h6, .shiny-input-container {
  font-family: 'Roboto', sans-serif;
}
.h2{
color: #1e282c;
}

.skin-blue .main-sidebar,
.skin-blue .main-header .logo { width: var(--sidebar-width); }
.skin-blue .main-header .navbar,
.content-wrapper,
.main-footer {
  margin-left: var(--sidebar-width);
}

@media (max-width: 767px) {
  .skin-blue .main-header .navbar,
  .content-wrapper,
  .sidebarCollapsed {
    margin-left: 0 !important;
  }
  .skin-blue .main-sidebar {
  transform: translate(-300px,0);
  }
}
/*
@media (max-width: 767px) {
  .left-side, .main-sidebar {
    -webkit-transform: translate(-230px,0);
    -ms-transform: translate(-230px,0);
    -o-transform: translate(-230px,0);
    transform: translate(-300px,0);
  }
}
*/
/* ----------------------- NAVBAR -----------------------
.skin-blue .main-header .navbar {
  background-color: #F2F2F2;
  margin-left: var(--sidebar-width);
}

.skin-blue .main-header .navbar .sidebar-toggle,
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: #F2F2F2;
  color: #004462;
}

.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover {
  background-color: #004462;
  color: #F2F2F2;
  border-bottom: 0 solid transparent;
}*/


/* ----------------------- SIDEBAR -----------------------  */

/* button placement */
.sidebar .sidebar-tools { padding: 8px 10px; display:flex; justify-content:flex-end; }
.btn.btn-sidebar-toggle { background:#fff; color:#1e282c; border:none; border-radius:9999px; }
.btn.btn-sidebar-toggle:hover { background:#ecf0f5; }

.sidebar-title {
  font-family: 'Roboto', sans-serif;;
  padding-left: 42.5px;
  padding-bottom: 50px;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.sidebar-logo,
.sidebar-logo:hover {
  background-color: #004462;
  color: #F2F2F2;
  border-bottom: 0 solid transparent;
  padding-left: 50px;
}

.skin-blue .main-sidebar {
  background-color: #004462;
  width: var(--sidebar-width);
}


.skin-blue .sidebar-menu > li > a{
  font-family: 'Roboto', sans-serif;;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

.skin-blue .treeview-menu{
  padding-left: 0;
  background-color: #004462;
}
.skin-blue .treeview-menu > li,
.skin-blue .treeview-menu > li> a:hover {
  margin-top: 0px;
  background-color: #004462;
}

.skin-blue .treeview-menu > li > a {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  padding: 10px 15px 10px 50px;
  color: white;
  background-color: #004462;
}


.skin-blue .sidebar-menu > li.menu-open > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a {
  color: #fff;
  background: #1e282c;
  border-left-color: #ffc400;
}


.skin-blue .treeview-menu > li.active > a{
  color: #fff;
  background: #1e282c;
}

.skin-blue .treeview-menu > li > a:hover {
  color: #ffc400;
  background: #1e282c;
  box-shadow: inset 0 0 0 2px #1e282c;
}


/* ----------------------- BODY -----------------------  */

.content-wrapper {
  min-height: 100%;
  background-color: #F2F2F2;
  z-index: 800;
  min-height: 1398px;
  margin-left: var(--sidebar-width);
  padding-left: 15px;
  padding-right: 15px;
}

/* Also affects DT - make unique */
.indicator-info-box {
  border-radius: 0px 0px 3px 3px;
  padding: 10px;
  font-size: 16px;
}

.box-header .box-title {
  font-size: 18px;
}