body {background-color: #f2f2f2; color: #323232; }
body .navbar-default{background-color: #c5d0e0; background-image: linear-gradient(to bottom, #fff 0px, #c5d0e0 100%);}

body .navbar-default .navbar-nav > .open > a, 
body .navbar-default .navbar-nav > .open > a:focus, 
body .navbar-default .navbar-nav > .open > a:hover,
body .navbar-default .navbar-nav > .active > a, 
body .navbar-default .navbar-nav > .active > a:focus, 
body .navbar-default .navbar-nav > .active > a:hover,
body .navbar-default .navbar-nav > li > a:focus, 
body .navbar-default .navbar-nav > li > a:hover{background-image: linear-gradient(to bottom, #c5d0e0 0px, #747c98 100%); background-color: #747c98; color: white;}

body .navbar-default .navbar-nav > li > a{font-weight: bold; color: #39456d;}

body .navbar-default #user_dropdown{display: flex; align-items: baseline;}
body .navbar-default #user_dropdown #user_name{overflow: hidden; text-overflow: hidden; display: -webkit-inline-flex; display: inline-flex; white-space: nowrap;}
body .navbar-default #user_dropdown #user_carat{align-self: center;}
body .navbar-default #user_dropdown #user_department{position: absolute; bottom: 0px; left: 15px; right: 15px; text-align: center; font-weight: normal; color: var(--fg-info);overflow: hidden; text-overflow: hidden; white-space: nowrap; font-size: .8em;}
body .navbar-default #user_dropdown #user_department{position: absolute; bottom: 0px; left: 15px; right: 15px; text-align: center; font-weight: normal; color: var(--fg-info);overflow: hidden; text-overflow: hidden; white-space: nowrap; font-size: .8em;}
body .navbar-default .dropdown:hover #user_dropdown #user_department{color: white;}

body .dropdown-menu > .active > a, 
body .dropdown-menu > .active > a:focus, 
body .dropdown-menu > .active > a:hover{background-color: #747c98; background-image: linear-gradient(to bottom, #747c98 0px, #39456d 100%);}

img{image-rendering: -webkit-optimize-contrast;}

div#sidebar_content h1,
div#sidebar_content h2,
div#sidebar_content h3,
div#sidebar_content h4,
div#sidebar_content h5,
div#sidebar_content h6,
div#sidebar_content h7,
div#sidebar_content h8{color: #39456d;}

body .footer{background-color: #c5d0e0;}

.disabled_container{
  opacity: 0.5;
  pointer-events: none;
}

table.small_font_table{
  font-size: 90%;
}

.fullscreen:not(:fullscreen) .fullscreen_only, .fullscreen:fullscreen .not_fullscreen_only{
  display: none !important;
}

div.widget:not(.expanded) .expanded_only{
  display: none;
}
/* Add !important if it is a table cell to override the "display: table-cell" that gets added */
div.widget:not(.expanded) td.expanded_only{
  display: none !important;
}
div.widget.expanded .unexpanded_only{
  display: none;
}

/* Sidebar CSS */
div.sidebar-minimize-toggle{
  bottom: 0;
  left: 0px;
  position: absolute;
  top: 0;
  width: 25px;
  z-index: 1000;
  cursor: pointer;
  padding-left: 3px;
}
div.sidebar-minimize-toggle:hover{
  background-image: linear-gradient(to left, rgba(175,175,175,0), rgba(175,175,175,1));
}
div.sidebar-minimize-toggle > span.toggle-icon{
  top: 50%; margin-top: -6px; position: absolute;
}

/*
  So navbar doesn't cover tooltips (if navbar still covers tooltip, try setting
  data-container to "body")
*/
div.tooltip{
  z-index: 20000;
}

/*
Modified from:
https://css-tricks.com/rotated-table-column-headers/

With help from this comment:
https://css-tricks.com/rotated-table-column-headers/#comment-1534716
*/
.slanted_header_table th{
  font-size: 12.5px;
  white-space: nowrap;
}
.slanted_header_table th > div.slanted{
  transform-origin: left bottom;
  box-sizing: border-box;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.slanted_header_table th > div.slanted > span{
  border-bottom: 1px solid #ddd;
  display: inline-block;
  box-sizing: border-box;
}
.slanted_header_table th > div.not_slanted{
  position: relative;
  height: 100%;
  /*
      Because the invisible part of these divs can overlap headers with
      .slanted, this can block interaction with .slanted headers that have
      links if pointer-events are not disabled here
  */
  pointer-events: none;
}
.slanted_header_table th > div.not_slanted > span{
  position: absolute;
  bottom: 0;
  right: 0;
}
.slanted_header_table td > div,
.slanted_header_table td > span,
.slanted_header_table td > a{
  float: right;
  text-align: right;
}

.slanted_header_table td{
  border-right: 1px solid #ddd;
}
.slanted_header_table td:first-child{
  border-left: 1px solid #ddd;
}
.slanted_header_table tbody tr:last-child > td{
  border-bottom: 1px solid #ddd;
}
.slanted_header_table tbody tr:first-child > td{
  border-top: none;
}
.slanted_header_table th{
  border-top: none !important;
}
.slanted_header_table th > div.slanted{
  /* So width not wider than content */
  display: inline-block !important;
}