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;
}

.cursor-pointer {
  cursor: "pointer";
}

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 STYLES ==================== */
.navbar-area {
  margin: 0;
  padding: 0;
  color: #e8eaed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1000;
}

.navbar-light {
  background-color: #1a2332 !important;
  border-color: #1a2332 !important;
  padding: 0.75rem 1rem;
  min-height: 60px;
  transition: box-shadow 0.2s ease;
}

/* Navbar brand/logo styling */
.navbar-brand {
  padding: 0.5rem 1rem;
  margin-right: 2rem;
  font-size: 1.25rem;
  transition: opacity 0.2s ease;
}

.navbar-brand:hover {
  opacity: 0.9;
}

/* Navbar links */
.navbar-light .nav-link,
.navbar-light a {
  color: #90caf9 !important;
  padding: 0.5rem 1rem !important;
  margin: 0 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-weight: 400;
  position: relative;
  text-decoration: none !important;
}

.navbar-light .nav-link:hover,
.navbar-light a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.navbar-light .nav-link:active,
.navbar-light a:active {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Active nav item indicator */
.navbar-light .nav-link.active,
.navbar-light a.active {
  color: #ffffff !important;
  background-color: rgba(144, 202, 249, 0.15);
  font-weight: 500;
}

.navbar-light .nav-link.active::after,
.navbar-light a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background-color: #90caf9;
}

/* Navbar buttons */
.navbar-light .btn-outline-secondary {
  color: #90caf9 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-weight: 400;
  text-decoration: none !important;
}

.navbar-light .btn-outline-secondary:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.navbar-light .btn-outline-secondary:active {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  min-width: 12rem;
}

.dropdown-menu a,
.dropdown-menu .dropdown-item {
  color: #333333 !important;
  padding: 0.5rem 1rem !important;
  transition: background-color 0.15s ease;
  display: block;
  text-decoration: none !important;
}

.dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover {
  background-color: rgba(144, 202, 249, 0.1) !important;
  color: #1a2332 !important;
  cursor: pointer;
}

.dropdown-menu .dropdown-divider {
  margin: 0.5rem 0;
  border-color: rgba(0, 0, 0, 0.1);
  cursor: default;
  pointer-events: none;
}

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

/* Navbar toggle button (mobile) */
.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 0.75rem;
  color: #90caf9;
  transition: all 0.2s ease;
}

.navbar-toggler:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(144, 202, 249, 0.3);
}

/* Navbar icons (notification bell, help, etc.) */
.navbar-light .nav-link i,
.navbar-light .nav-link .octicon {
  font-size: 1.25rem;
  vertical-align: middle;
}

/* Improve spacing between nav items */
.navbar-nav {
  align-items: center;
}

.navbar-nav > li {
  margin: 0 0.25rem;
}

/* Dropdown caret */
.navbar-light .dropdown-toggle::after {
  margin-left: 0.5rem;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.navbar-light .dropdown-toggle:hover::after {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .navbar-light {
    padding: 0.5rem 1rem;
  }

  .navbar-brand {
    margin-right: 1rem;
  }

  .navbar-collapse {
    margin-top: 1rem;
  }

  .navbar-light .nav-link,
  .navbar-light a {
    margin: 0.25rem 0;
  }
}

/* Ensure proper z-index layering */
.navbar-light .dropdown-menu {
  z-index: 1050;
}

.page-sidebar {
  background-color: #1a2332;
  color: #e8eaed;
}

.page-sidebar a:not(.alert a):not(.sidebar-dropdown-text *) {
  color: #90caf9 !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.page-sidebar a:hover:not(.alert a):not(.sidebar-dropdown-text *) {
  color: #ffffff !important;
  text-decoration: none;
}

.page-sidebar table,
.page-sidebar table td,
.page-sidebar table th,
.page-sidebar table p,
.page-sidebar table span,
.page-sidebar table div {
  color: #e8eaed !important;
}

.account-tree-table td,
.account-tree-table th {
  margin: 0;
  padding: 6px 8px;
}

/* Row hover states */
.account-tree-table tr:hover > td {
  background-color: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

/* Active/current page highlighting */
.account-tree-table tr.tree-row-active > td {
  background-color: rgba(144, 202, 249, 0.15);
  border-left: 3px solid #90caf9;
  padding-left: 5px;
}

.account-tree-table tr.tree-row-active a:not(.sidebar-dropdown-text *) {
  color: #ffffff !important;
  font-weight: 500;
}

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

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

/* Sidebar search input styling */
.page-sidebar .input-group {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.page-sidebar .input-group:focus-within {
  background-color: rgba(255, 255, 255, 0.15);
}

.page-sidebar .input-group-text {
  background-color: transparent;
  border: none;
  color: #90caf9;
  padding: 0.5rem 0.75rem;
}

.page-sidebar .form-control {
  background-color: transparent;
  border: none;
  color: #ffffff;
  padding: 0.5rem 0.75rem;
}

.page-sidebar .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.page-sidebar .form-control:focus {
  background-color: transparent;
  color: #ffffff;
  box-shadow: none;
  outline: none;
}

.page-sidebar .btn-outline-secondary {
  background-color: transparent;
  border: none;
  color: #90caf9;
  padding: 0.5rem 0.75rem;
}

.page-sidebar .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Smooth transitions for tree expand/collapse */
.account-tree-table tr {
  transition: background-color 0.15s ease;
}

/* Better link styling in tree */
.account-tree-table a {
  display: inline-block;
  padding: 2px 0;
  border-radius: 2px;
  transition: all 0.15s ease;
}

.account-tree-table a:hover {
  padding-left: 4px;
}

/* Tree indent line styling */
.tree-indent-line {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.account-tree-table tr:hover .tree-indent-line {
  opacity: 1;
  border-left-color: rgba(255, 255, 255, 0.4);
}

/* Icons in tree */
.account-tree-table .octicon {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.account-tree-table tr:hover .octicon {
  opacity: 1;
}

/* Sidebar toggle button styling */
.page-sidebar .sidebar-toggle-wrapper {
  flex-shrink: 0;
}

.page-sidebar .sidebar-toggle-btn {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #90caf9;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  min-width: 42px;
  height: 42px;
}

.page-sidebar .sidebar-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: scale(1.05);
}

.page-sidebar .sidebar-toggle-btn:active {
  transform: scale(0.98);
}

.page-sidebar .sidebar-toggle-btn .octicon {
  font-size: 16px;
}

/* Flex gap support (for older browsers) */
.d-flex.gap-2 > * + * {
  margin-left: 0.5rem;
}

.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);
}

/* 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;
}

/* Override bootstraps double arrow for custom selects with a single arrow  */
.custom-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'%3e%3cpath d='M2 5L0 3h4z'/%3e%3c/svg%3e");
}

.custom-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 5L0 3h4z'/%3e%3c/svg%3e");
  background-size: 8px 10px;
  background-position: right 0.5rem center;
}

/* Custom badge colors */
.badge-mild-warning {
  color: black !important;
  background-color: #ff8c00 !important;
}

/* User Profile Dashboard Styles */
.border-left-thick.border-warning {
  border-left: 4px solid #ffc107 !important;
}
.border-left-thick.border-success {
  border-left: 4px solid #28a745 !important;
}
.border-left-thick.border-primary {
  border-left: 4px solid #007bff !important;
}
.border-left-thick.border-info {
  border-left: 4px solid #17a2b8 !important;
}
.badge-lg {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}
.badge-outline-primary {
  color: #007bff;
  border: 1px solid #007bff;
  background-color: transparent;
}
.badge-outline-secondary {
  color: #6c757d;
  border: 1px solid #6c757d;
  background-color: transparent;
}