body {
  min-height: 100px;
  /* margin-bottom: 100px; */ /* Disabled so that dropdown menus are not cutoff*/

  font-family: "Open Sans";
  font-size: 0.9rem;
  color: #333;
}

a {
  color: #333;
}

div.striped-container > div:nth-of-type(odd) {
  background: #dadada;
}

.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
.btn-outline-primary {
  color: #337ab7;
  background-color: #fff;
  border-color: #337ab7;
}

.text-primary {
  color: #337ab7 !important;
}

.vh100-navbar {
  min-height: calc(100vh - 6rem);
}

.card {
  margin-bottom: 20px;
}

.card-title {
  margin: 0;
  padding: 0;
}

.card-header {
  background-color: #2081c5;
  color: #fff;
}

.navbar-area {
  margin: 0;
  padding: 0;
  color: #ddd;
}

.navbar-light {
  background-color: #181b33 !important;
  border-color: #181b33 !important;
  padding-top: 2px;
  padding-bottom: 2px;
}

.navbar-light a {
  color: #ddd !important;
}

.navbar-light .btn-outline-secondary {
  color: #ddd !important;
  border-color: #ddd !important;
}

.dropdown-menu a {
  color: #333 !important;
}

.dropdown-menu {
  margin-bottom: 1em;
}

.dropdown-login-form {
  min-width: 20rem;
}

.page-sidebar {
  background-color: #2081c5;
  color: #fff;
}

.page-sidebar a {
  color: #fff !important;
}

.sidebar-dropdown-text a {
  color: #333 !important;
}

.sidebar-dropdown-text {
  color: #333 !important;
}

.footer {
  padding: 8px 20px 5px 20px;
  background-color: #2081c5;
  color: #fff;
}
.footer .footer-inner.row a {
  color: #fff !important;
}

/* D3 styles - Dendrogram */
.node circle {
  fill: #999;
}

.node text {
  font: 10px sans-serif;
}

.node--internal circle {
  fill: #333;
}

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.node-link {
  fill: none;
  stroke: #333;
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
}

.node-link-bold {
  fill: none;
  stroke: #222;
  stroke-opacity: 0.8;
  stroke-width: 3px;
}

.lds-dual-ring {
  display: inline-block;
  width: 64px;
  height: 64px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #333;
  border-color: #333 transparent #333 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* PURE css solution for rotating carets based on expanded section */
a[aria-expanded="true"] > .expand_caret {
  transform-origin: center left;
  transform: rotate(90deg);
}

/* Another method for adding carets after any collapsable item using FontAwesome
[data-toggle="collapse"]:after {
display: inline-block;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  content: "\f054";
  transform: rotate(90deg) ;
  transition: all linear 0.25s;
  }   
[data-toggle="collapse"].collapsed:after {
  transform: rotate(0deg) ;
}*/

/* Shift dropdown menu items to the left*/
.transform-calendar-left {
  transform: translate3d(-200px, 18px, 0px);
}

.datepicker-fullwidth {
  display: inline-block !important;
}

.react-date-picker__wrapper {
  border: none !important;
}

/* https://github.com/tomkp/react-split-pane */
.Resizer {
  background: #000;
  opacity: 0.2;
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.Resizer.horizontal {
  height: 11px;
  margin: -5px 0;
  border-top: 5px solid rgba(255, 255, 255, 0);
  border-bottom: 5px solid rgba(255, 255, 255, 0);
  cursor: row-resize;
  width: 100%;
}

.Resizer.horizontal:hover {
  border-top: 5px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255, 255, 255, 0);
  border-right: 5px solid rgba(255, 255, 255, 0);
  cursor: col-resize;
}

.Resizer.vertical:hover {
  border-left: 5px solid rgba(0, 0, 0, 0.5);
  border-right: 5px solid rgba(0, 0, 0, 0.5);
}
.Resizer.disabled {
  cursor: not-allowed;
}
.Resizer.disabled:hover {
  border-color: transparent;
}

.Pane.vertical.Pane2.col-sm-9 {
  padding-bottom: 10em; /* Added so that dropdown menus are not cutoff*/
}

/* 
  Bootstrap dropdowns are not behaving properly with what direction they drop.
  Therefore, I've added these media queries to offset the position of these
  dropdowns in an attempt to ensure they are never cutoff.
  
  */

@media screen and (min-width: 851px) and (max-width: 1300px) {
  .Pane.vertical.Pane2.col-sm-9 {
    padding-bottom: 10em;
  }
  .dropdown-divider {
    margin: 0em 0;
  }
  .dropdown-menu.dropdown-menu-right.dropdown-item {
    top: -1.5em !important;
    padding-bottom: 1em;
  }
  .dropdown-menu {
    top: -1.5em !important;
    padding-bottom: 1.5em;
  }

  .dropdown-item {
    padding: 0.1rem 1.5rem !important;
  }
}

@media screen and (min-width: 0px) and (max-width: 850px) {
  .dropdown-menu.dropdown-menu-right.dropdown-item {
    margin-bottom: 2em;
  }
  .dropdown-menu.dropdown-menu-right {
    top: -2em !important;
  }
  .dropdown-item {
    padding: 0.1rem 1.5rem !important;
  }
  .Pane.vertical.Pane2.col-sm-9 {
    padding-bottom: 10em;
  }
  .dropdown-divider {
    margin: 0em 0;
  }
  .dropdown-menu {
    top: -1.5em !important;
    padding-bottom: 1.5em;
  }
}

.form-control-plaintext {
  border: 1px solid #ced4da;
  border-width: 1px;
  border-radius: 0.25rem;
}

.mce-notification {
  display: none;
}

/* Boolean switch CSS */

.switch-toggle {
  width: none;
}

.switch-toggle label:not(.disabled) {
  cursor: pointer;
}

.react-dropdown-select-dropdown {
  min-width: 100%;
}

.comment-item p {
  margin-top: 0;
  margin-bottom: 0;
}

/* Tabbed report selection */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #495057;
  background-color: #fff;
  border-color: blue;
  border: solid blue 2px;
  border-bottom: none;
}

.tab-content > .active {
  display: block;
  border-top: solid blue 2px;
  border-bottom: solid blue 2px;
  padding-bottom: 1rem;
}

.nav-tabs .nav-link {
  /* border: 1px solid transparent; */
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  background: #ccd9ff;
  border-color: blue;
  border: solid blue 2px;
  border-bottom: none;
}

.nav-link:hover {
  border: solid white 1px;
  border-radius: 0.2rem;
}

.small-circle {
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* horizontal scrollbar start */
.horizontal-scrollbar {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.horizontal-scrollbar::-webkit-scrollbar {
  height: 12px;
}

.horizontal-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.horizontal-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
/* horizontal scrollbar end */

.hover-row:hover {
  background-color: #f5f5f5;
}

td {
  word-break: break-word !important;
  overflow-wrap: break-word;
}