:root {
  --theme: background-color: #248AFD;
  --bodybgcolor: #fff;
  --bodytxtcolor: #1f1f1f;
  --bodyfontsize: 1rem;
  --bodyfontfamily: "Nunito", sans-serif;
  --navbarbg: #fff;
  --navbartxtcolor: #1f1f1f;
  --bgcolor: #0091e1;
 

  --sidebarbgcolor: #fff;
  --sidebarddcolor: #0091e1;
  --sidebarhover: #1c9adf;
  

  --cardbgcolor: #F5F7FF;
  --cardradius: 0px;
  --cardbordercolor: 1px solid #e3e3e3;
  --colorwhite: #fff;

  /* pink */
  /* --btnbg: #ff0066;
  --btnhover: #fd3082;
  --btnborder: #fc5d9d; */
  --btnbg: #0091e1;
  --btnhover: #ff0066;
  /* --btnborder: #0091e1; */


  --btnsecondarybg: #d9dde0; 
  --btnsecondaryhover: #91c3df; 
  --btnsecondaryborder: #5caedd;

}

/* Implement variables */

body {
  background-color: var(--bodybgcolor);
  color: var(--bodytxtcolor);
  font-family: var(--bodyfontfamily);
  font-size: var(--bodyfontsize);
}

.card {
  background-color: var(--cardbgcolor);
  border-radius: var(--cardradius);
  border-color: var(--cardbordercolor)
}

/*  Top Nav Bar  */
.navbar .navbar-brand-wrapper, .navbar .navbar-menu-wrapper {
  background-color: var(--navbarbg);
  color: var(--navbartxtcolor);
 }

.sidebar{
    background: var(--sidebarbgcolor);
}

.sidebar .nav .nav-item.active > .nav-link {
  background: var(--sidebarhover);
  color: var(--colorwhite);
}

.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link[aria-expanded="true"] { 
  background: var(--sidebarhover);
  color: var(--colorwhite);
}

.sidebar .nav:not(.sub-menu) > .nav-item.active { 
  background: var(--sidebarhover);
}

.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link, .sidebar .nav:not(.sub-menu) > .nav-item:hover[aria-expanded="true"] {
  background: var(--sidebarhover);
  color: var(--colorwhite);
}

.sidebar .nav.sub-menu {
  background: var(--bgcolor);
}
.sidebar .nav.sub-menu .nav-item::before {
  background: var(--sidebarbgcolor);
}

.sidebar .nav .nav-item .nav-link i.menu-arrow {
  color: var(--colorwhite);
}

@media (min-width: 992px) {
  .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title { 
    background: var(--sidebarhover);
  }
}
 
.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title {
  background: var(--sidebarhover);
}
.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link:hover .menu-title {
  background: var(--sidebarhover);
}


.table.dataTable th, #cost-distribution-table th, #fb-data-table th, #report-data-table th, .fbtable th  {
  background: var(--sidebarhover);
}

.btn-primary, .wizard > .actions a {
  background-color: var(--btnbg);
  color: var(--colorwhite);
  /* border-color: var(--btnborder); */
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  color: var(--colorwhite);
  background-color: var(--btnbg);
  /* border-color: var(--btnborder); */
}

.btn-primary:hover {
  color: var(--colorwhite);
  background-color: var(--btnhover);
  /* border-color: var(--btnborder); */
  border: none;
}
.btn-secondary {
  color: var(--bodytxtcolor);
  background-color: var(--btnsecondarybg);
}

.btn-secondary:hover {
  color: var(--bodytxtcolor);
  background-color: var(--btnsecondaryhover);
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
  /* box-shadow: 0 0 0 0.2rem #ff8bb9; */
}

/* plan css */
.rec-border {
  border-top: 6px solid var(--sidebarhover) !important;
}
.rec-txt {
  position: relative;
  top: -21px;
  left: 20%;
  background: var(--sidebarhover);
  color: #fff;
  width: 60%;
  text-align: center;
  z-index: 2;
  font-size: 12px;
}