@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root{
    --vz-body-bg:#f0f0f0;
    --vz-header-bg:#f0f0f0;
    --vz-footer-bg:#f0f0f0;
    --vz-body-color:#000000;
    --vz-body-font-family: 'Inter', sans-serif;
    --vz-vertical-menu-bg:#024dc6;
    --vz-vertical-menu-item-color:#fff;
    --vertical-menu-item-font-family: 'Inter', sans-serif;
    --vz-vertical-menu-item-hover-color:#fff;
    --vz-heading-color: #080707;  
    --panel: #ffffff;    
    --vz-link-color:#1A1A1A;
}

.btn {
  --vz-btn-padding-y: 5px;
  --vz-btn-border-radius:10px;
  --vz-btn-line-height:18px;
}

.btn-primary {
  --vz-btn-bg:#024EC7;
  --vz-btn-hover-color: #ffffff;
  --vz-btn-hover-bg: #024EC7;
}

.btn-outline-primary {
  --vz-btn-color: #024EC7;
  --vz-btn-border-color: #024EC7;
  --vz-btn-hover-color: #ffffff;
  --vz-btn-hover-bg: #024EC7;  
}

:is(.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6) {
  color: var(--vz-heading-color);
  font-family: Inter, sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

.h4 {
  font-size: 20px;
}

.navbar-menu {
    width: 289px;
    border-radius: 40px;
    margin: 22px;
}

.navbar-menu .navbar-nav .nav-link {
    border: solid 1px #fff;
    margin: 5px 15px;
    border-radius: 15px;  
    /* font-size: 16px; */
    font-family: Inter, sans-serif;
    padding: 15px 20px;
    line-height: 21px;
}

.navbar-menu .navbar-nav .nav-link:hover {
  background-color: #013385;
}

:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm"] .navbar-menu {
    margin-left:0;
}

.footer {left:310px}

.jdgridtb thead .select2-selection__arrow {display: none;}

.list-group-item .avatar{
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  object-fit: cover;
}

.sidebar {
  border-radius: 21px;
  padding: .5rem;
  height: 700px;
  overflow: hidden;
}

.sidebar .list-group {
  height: calc(700px - 70px);
  overflow: auto;
  border: 0;
}
.sidebar .list-group-item.active {
  background: rgba(164, 197, 250, 0.52);
  color: var(--vz-list-group-color);
}

.sidebar .list-group-item.active .text-muted {
  color: var(--vz-list-group-color) !important;
}

.sidebar .list-group-item {
  border: 0;
  border-radius: 8px;
  margin: 4px 0;
  font-size: 20px;
  line-height: 22px;
}

.sidebar .list-group-item .small {
  font-size: 14px;
}

.panel {
  background: var(--panel);
  border-radius: 12px;
  padding: 1.25rem;
  height: 700px;
}

.agent-hero {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.agent-hero img {
  width: 113px;
  height: 172px;
  object-fit: cover;
}

.agdesc {
  color: #575757;
  display: block;
  font-size: 12px;
}

.form-select {
  line-height: 12px;
  border:0;
  background-color: #CBDFFF;

}

/* JDGRID */
.jdgridbox {
  padding: 5px 20px !important;
  --vz-card-bg: inherit;
  box-shadow: none;
}

.jdgridtb th, .jdgridtb td {
  background-color: inherit !important;
  font-size: 14px !important;
  padding: 12px 10px !important;
}

.jdgridtb th, .jdgridtb thead td {
  background-color: #f0f0f0 !important;
}

#grid_tb_agents_crud .filterrow, #grid_tb_agents_crud .jdgtoprightbtns, #grid_tb_agents_crud .jdgridtoolbar {
  display: none;
}

.gridlabel {
  line-height: 25px;
}

#btn-widgets-view, #btn-grid-view {
  padding: 7px 9px;
}

.grdtopfilter {
  border-radius: 35px;
  background-color: #D0E1FC;
  padding: 1px 60px 1px 53px;
}

.grdtopfilter #filter-voice, .grdtopfilter #filter-function {
  background-color: #fff;
  border-radius: 20px;
  line-height: 20px;
}

.grdtopfilter .input-group-text {
  border-radius: 20px 0 0 20px;
  background-color: #ffffff !important;
}
.grdtopfilter .input-group-text i {  
  color: #000000 !important;
}
.grdtopfilter #search-agent {
  border-radius: 0 20px 20px 0;
} 


@media (min-width: 768px) {
  #page-topbar {
    left: 310px;
  }
  .main-content {
    margin-left: 310px;
  }
  [data-layout="vertical"]:is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]) #page-topbar {
    left: 69px;
  }
}