/* ROOT */
:root {
    
    --tblr-navbar-border-color: #ededed;
    --tblr-nav-link-hover-bg:#f3f3f3;
    --tblr-btn-hover-border-color: var(--tblr-primary);

    --bs-tertiary-bg-rgb: 248, 249, 250;
    --navbar-height: 48px;
    --page-head-height: 60px;
    --navbar-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --page-head-bg:#fafafa;
    --main-bg: #fafafa;
    --button-bg: #f3f3f3;
}


/* HEADER NAVBAR */
.navbar {
    height: var(--navbar-height);
    background: var(--navbar-bg);
    padding: 0;
    min-height: 0;
}
/* TOOGLE BUTTON ANIMATED */
.nvbar {
  display: inline-block;
  cursor: pointer;
}
.sidebar-toggler {
    border: 0;
    width: 2rem;
    height: 2rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}
.bar1, .bar2, .bar3 {
  width: 16px;
  height: 1.5px;
  background-color: #6b7280; 
  margin: 4px 0;
  transition: 0.7s;
}
.bar1 {
  transform: translate(0, 5.5px) rotate(-45deg);
}
.bar2 {
  opacity: 0;
}
.bar3 {
transform: translate(0, -5.5px) rotate(45deg);
}

.collapsed .bar1 {transform: translate(0, 0) rotate(0deg);}
.collapsed .bar2 {opacity: 1;}
.collapsed .bar3 {transform: translate(0, 0) rotate(0deg);}
/* TOOGLE BUTTON ANIMATED */


/* SIDEBAR */
.sidebar {
    min-height: 150px;
    width: 250px;
    top: 100px;
    bottom: 0;
    height: calc(100vh - 112px);
    overflow-y: auto;
    background: var(--sidebar-bg);
}

/* PAGE HEAD */
.page-head {
    z-index: 6;
    top: 48px;
    height: var(--page-head-height);
    background: var(--page-head-bg);
    transition: 1s top;
    border-bottom: 1px solid var(--tblr-navbar-border-color);
}

.btn {
  background-color: var(--button-bg);
}

/* PAGE BODY */
.page-body {
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  top: 109px;
  background: var(--main-bg);
}

.main-content {
    position: relative;            
    height: calc(100vh - 112px);
    overflow-y: auto; 
}

/* PAGES TAB */
.card-tab {
   z-index: 6;
    position: sticky;
    top: 0px;
    background: var(--navbar-bg);
    transition: .5s top;
    height: var(--navbar-height);
    border-bottom: 0;
}

.card-header-tabs{
  background: var(--navbar-bg);
}