*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Inter_Web/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Acumin-Regular';
  src: url('../fonts/acumin/Acumin_Pro_Regular.woff2') format('woff2');
  font-weight: 400 700; /* Specify the range if using variable fonts */
  font-style: normal;
  font-display: swap; /* Recommended for performance */
}
@font-face {
  font-family: 'Acumin-Semibold';
  src: url('../fonts/acumin/AcuminPro-Semibold.woff2') format('woff2');
  font-weight: 400 700; /* Specify the range if using variable fonts */
  font-style: normal;
  font-display: swap; /* Recommended for performance */
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  font-size: 0.9rem;
  background-color: hsl(0, 0%, 98%);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Acumin-Regular', 'Inter', sans-serif;
  font-weight: 500; /* or 600 if you want it bolder */
}
ul{
  list-style: none;
  padding: 0;
}
.form-label {
    font-size: 0.9rem;
}

table th {
  font-family: 'Acumin-Semibold', 'Inter', sans-serif; /* Same as your headings */
  font-weight: 600; /* Semi-bold for emphasis */
  font-size: 0.95rem; /* Slightly bigger than body text (0.9rem) */
  color: #333; /* Darker for readability */
  text-align: left; /* Or center if your table design prefers */
}
table td {
  font-family: 'Inter', sans-serif; /* Regular weight for body text */
  font-weight: 400; /* Normal weight */
  font-size: 0.9rem; /* Consistent with body text */
  color: #555; /* Slightly lighter for less emphasis */
  text-align: left; /* Match the alignment of headers */
}
.simple-line-icons .glyph,
.mind-icons .glyph {
  width: 14.28%;
  text-align: center !important;
  float: left;
  height: 100px; }
  .simple-line-icons .glyph .glyph-icon,
  .simple-line-icons .glyph .fa,
  .mind-icons .glyph .glyph-icon,
  .mind-icons .glyph .fa {
    font-size: 32px;
    text-align: center !important; }
  .simple-line-icons .glyph .author-name,
  .mind-icons .glyph .author-name {
    display: none; }
  .simple-line-icons .glyph .class-name,
  .mind-icons .glyph .class-name {
    font-size: 0.76rem;
    color: #696969 !important;
    text-align: center !important; }

/* header start */
.head-div{
  padding: 5px 35px 5px 20px;
  position: fixed;
  width: 100%;
  height: 80px;
  inset: 0;
  background-color: #fff;
  z-index: 1111111;
  box-shadow: var(--shadow);
  /* border-bottom-left-radius: 25px; */
  border-bottom-right-radius: 25px;
}
/* .logo-sec{
  width: 220px;
  flex-shrink: 0;
} */
.logo-sec{
  width: 90px;
  flex-shrink: 0;
  justify-content: center!important;
  /* border: 1px solid; */
}
.logo{
  width: 160px;
}

.logo-sm{
  display: none;
  width: 60px;
}





.toggle-bar{
  font-size: 18px;
  /* color: var(--color-primary); */
  cursor: pointer;
  fill: #3a3a3a;
    transition: fill .3s;
}

.search-bar{
  border: 1px solid #e5e5e5;
  padding: 5px 15px;
  border-radius:10px;
  position: relative;
  width: 250px;
  height: 35px;
  transition: all var(--transition-time-animate);
}
.search-bar:hover{
  width: 300px;
}
.search-bar i{
  /* color: var(--color-primary); */
}
.search-bar input::placeholder{
  /* font-size: 14px; */
  font-weight: 500;
}
.search-bar input{
  border: none;
  width: 100%;
}
.search-bar input:focus, .search-bar input:visited{
  border: none;
  outline: none;
}

.search-bar .search-drop{
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 11;
  background-color: #ffff;
  width: 300px;
  padding: 10px;
  box-shadow: var(--shadow);
  height: 250px;
  overflow-y: scroll;
  border-radius:var(--radius-15);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-time-animate);
}
.search-bar:hover .search-drop{
  opacity: 1;
  visibility: visible;
  transition-delay: .2s;

}
.search-ul a{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border-radius:var(--radius-15);
}
.search-ul a:hover{
  background-color: var(--color-primary);
  color: #fff;
}
.search-ul i{
  /* font-size: 14px; */
  color: #000;
}
.search-ul a:hover i{
  color: #fff;
}

.icons-head{
  gap: 30px;
}
.dropdown-div{
  position: relative;
}
.dropdown-div i, .icons-head i{
  cursor: pointer;
  /* color: var(--color-primary); */
}
.dropdown-div i{
  /* font-size: 20px; */
}
.dropdown-div-item{
  width: 200px;
  margin: 0;
  padding: 10px;
  list-style: none;
  position: absolute;
  z-index: 2;
  top: 30px;
  right: -20px;
  background-color: #fff;
  box-shadow: 0px 0px 6px 0px rgba(174, 174, 174, 0.38);
  border-radius:var(--radius-15);
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-time-animate);
}
.dropdown-div:hover .dropdown-div-item{
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.dropdown-div-item li{
  margin-bottom: 10px;
}
.dropdown-div-item a{
  border-radius:var(--radius-15);
  padding: 5px 20px;
  width: 100%;
  transition: all .2s;
}
.dropdown-div-item a:hover i, .dropdown-div-item a:hover{
  color: var(--color-primary);
}

.dropdown-div-item li:last-child{
  margin: 0;
}
.dropdown-div-item.notification{
  width: 300px;
  height: 350px;
  overflow-y: auto;
  padding-inline: 0;
}

.dropdown-div-item a{
  display: flex;
  align-items: center;
}
.dropdown-div-item a i{
  /* font-size: 14px; */
  width: 20px;
  margin-right: 10px;
}

.notification-bell-icon{
  position: relative;
}
.notification-bell-icon-ab{
  position: absolute;
  top: -2px;
  right: -5px;
  /* font-size: 10px; */
  background-color: var(--danger-color);
  display: inline-flex;
  width: 15px;
  height: 15px;
  border-radius:var(--radius-15);
  color: #fff;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}


.dropdown-div-item.notification>div{
  padding-inline: 15px;
  /* font-size: 15px; */
}
.notification-details{
  padding: 10px 15px!important;
  border-radius:var(--radius-15);
}
.dropdown-div-item.notification .notification-details:hover{
  background-color: var(--color-primary);
  color: #fff;
}
.custom-badge{
  background-color: var(--light-color);
  color: var(--color-primary);
  /* font-size: 12px; */
  padding: 1px 8px;
  border-radius:var(--radius-15);
  display: inline-flex;
  align-items: center;
}
.notification-details:hover .icon-notification i{
  background-color: inherit;
  color: var(--color-primary);
}
.icon-notification{
  width: 50px;
  height: 50px;
  background-color: var(--light-color);
  border-radius:var(--radius-15);
  display: flex;
  align-items: center;
  justify-content: center!important;
  flex-shrink: 0;
  margin-right: 10px;
}
.notification-details .icon-notification i{
  width: auto;
  /* font-size: 18px; */
  margin-left: 10px;
}
.quick-icon .dropdown-div-item{
  top: 100%;
}

.user-img{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
.dropdown-div-item.user-drop{
  width: 160px;
  top: 35px;
  right: 0;
  padding: 0;
}
.user-div{
  padding: 12px 25px;
  border-bottom: 1px solid #e7e7e7;
}
.user-ul{
  /* margin-block: 20px; */
  padding-inline: 10px;
}
.user-ul li{
  margin-bottom: 0;
}
.logout-div{
  border-top: 1px solid #e7e7e7;
  padding: 8px 15px;
}
.logout-div i{
  /* font-size: 14px; */
}



/*index main body */

.main-body{
  margin-top: 80px;
  width: 100%;
  padding: 20px;
}

/* sidebar open */
.sidebar{
  width: 116px;
  flex-shrink: 0;
  padding: 10px 0px;
  background-color: #fff;
  height: calc(100vh - 80px);
  position: fixed;
  inset: 80px 0 0;
  /* padding-top: 30px; */
  box-shadow: var(--shadow);
  transition: all var(--transition-time-animate);
  overflow-y: scroll;
  z-index: 111111;
}

.sidebar li>a{
    font-family: 'Acumin-Regular';
    font-weight: 900;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}


.sidebar.collapse-div{
  opacity: 0;
  visibility: hidden;
  width: 0;
  overflow-x: hidden;
}
.sidebar.collapse-div ul{
  opacity: 1;
}
.sidebar.collapse-div .collapse-span, .sidebar.collapse-div .sidebar-ul-child{
  display: none;
}
.sidebar.collapse-div a{
  display: flex;
  /* justify-content: center; */
  padding: 10px;
}
.sidebar.collapse-div a i{
  display: flex;
  justify-content: center;
}

.sidebar.collapse-div .submenu.show{
  opacity: 0;
  visibility: hidden;
}


.sidebar-ul{
  transition: all .1s;
  position: relative;
  padding-inline: 8px;
}
.sidebar-ul li{
  margin-bottom: 8px;
  /* border-bottom: 1px solid #e7e7e7; */
}
.sidebar-ul a{

  width: 100%;
  padding: 15px 20px;
  border-radius:var(--radius-15);
  transition: all var(--transition-time-animate);
}
/* //commenting this as conflict with line no.503 */
/* .sidebar-ul a i{
  width: 25px;
} */

.sidebar-li-rl a{
  position: relative;
}
.submenu {
  position: fixed;
  top: 80px;
  left: 116px;
  width: 230px;
  height: 89vh;
  background: #fff;
  border-right: 1px solid #eee;
  padding: 20px 10px;
  border-top-right-radius: var(--radius-15);
  border-bottom-right-radius: var(--radius-15);
  box-shadow: var(--shadow);
  /* box-shadow: 0 3px 30px rgba(0, 0, 0, .1), 0 3px 20px rgba(0, 0, 0, .1); */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-20px);
  transition: all 0.3s ease;
  z-index: -11;
}
.submenu.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.submenu ul{
  margin: 0;
}
.sidebar .submenu li>a{
  align-items: start;
}
.submenu ul li a{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 40px;
  color: #333;
  cursor: pointer;
  transition: var(--transition-time-animate);
  border-radius: 40px;
  margin-bottom: 5px;
}
.submenu li a i{
  line-height: 1.4;
}
.submenu h4{
  display: none;
  color: var(--color-primary);
  font-weight: 600;
  margin-left: 25px;
  margin-bottom: 15px;
}
.submenu ul li a:hover{
  background-color: var(--light-hover-bg);
  color: var(--color-primary);
}








.sidebar-ul li span{
  font-size: 13px;
  color: #3a3a3a;
}
.sidebar-ul li i{
  font-size: 32px;
  margin-bottom: 8px;
}
.sidebar-ul li a{
  /* border: 1px solid; */
  padding: 10px 3px;
  height: 5.5rem;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}
.sidebar-ul li a:hover{
  color: var(--color-primary);
}
.sidebar-ul li.active{
  /* border-left: 4px solid var(--color-primary); */
  background-color: var(--light-hover-bg);
  border-radius: var(--radius-15);
  /* border-top-right-radius: var(--radius-15);
  border-bottom-right-radius: var(--radius-15); */
}
.sidebar-ul li:hover{
  background-color: var(--light-hover-bg);
  border-radius: var(--radius-15);
  transform: scale(1.01);
}
.sidebar-ul li.active a{
  color: var(--color-primary);

}

.user-icon:before{
  content: '\e005';
}



/* sidebar close */

.content{
  width: 100%;
  padding-left: 110px;
  transition: all var(--transition-time-animate);
}
.content.collapse-div{
  /* padding-left: 60px; */
  padding-left: 0px;
}

.breadcrumb{
  /* font-size: 14px; */
  font-weight: 500;
}
.session-row>div{
  display: flex;
  padding-inline: 5px;
  margin-bottom: 10px;
}
.session-card{
  transition: all var(--transition-time-animate);
  width: 100%;
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.session-card:hover{
  border: 1px solid var(--color-primary);
  transform: scale(1.01);
}
.card-img-top{
  width: 60px;
  height: 60px;
  border-radius:50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
}
.card-b .text-secondary{
  /* font-size: 14px; */
}

/* table */

/* table tr th:first-child, table tr td:first-child{
  padding-left: 40px;
} */
table tr:hover{
  background-color: var(--background);
  /* border-color: var(--background); */
}
.table-card{
  background-color: #fff;
  padding: 15px 0px;
  border-radius:var(--radius-15);
  box-shadow: var(--shadow);
}
.icon-btn-div{
  cursor: pointer;
}
#myTable_wrapper div.dt-layout-row:first-of-type, #myTable_wrapper div.dt-layout-row:last-of-type{
  padding-inline: 20px;
}
.dt-type-numeric{
  border: none!important;
}
div.dt-container select.dt-input{
  padding: 5px!important;
}
div.dt-container .dt-search input {
  margin-left: 5px;
}
div.dt-container .dt-search input:focus, div.dt-container .dt-search input:visited, div.dt-container select.dt-input:focus, div.dt-container select.dt-input:visited{
  outline: none;
}
.dt-length label{
  /* margin-left: 8px; */
  display: none;
}
/* .dt-length select.dt-input option:hover{
  accent-color: var(--color-primary)!important;
  background-color: black!important;
} */
/* div.dt-container .dt-paging .dt-paging-button.current {
  background-color: var(--color-primary);
  color: #fff!important;
} */

div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button:active{
  background: var(--color-primary)!important;
  color: #fff!important;
  border: none;
}
div.dt-container .dt-paging .dt-paging-button.current:hover{
  color: #fff!important;
}
div.dt-container .dt-paging .dt-paging-button:hover {
  background-color: var(--color-primary)!important;
  color: #fff!important;
}
.table-bordered>:not(caption)>*>*{
  border: none;
}
table.dataTable > tbody > tr > th, table.dataTable > tbody > tr > td {
  padding-block: 0;
  height: 40px;
}
#myTableIndex thead tr{
  border: none;
}
.filter{
  position: relative;
  /* margin-right: 100px; */
  margin-block: 20px;
  cursor: pointer;
}
.filter-icons i{
  cursor: pointer;
}
.filter>div{
  position: absolute;
  top: 40px;
  right: 0;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  padding: 10px 10px;
  border-radius:var(--radius-15);
  z-index: 11;
}
.ab-filter-data{
  display: none;

}
.ab-filter-data.open{
  display: block;
}
.filter ul{
  list-style: none;
  padding: 0;
}
.filter ul li{
  text-align: left;
  width: 120px;
  padding: 5px 10px;
  border-radius:var(--radius-15);
}
.filter ul li:hover{
  background-color: #dbdbdb;
}
label,input{
  cursor: pointer;
}

.table-plus-icon{
  /* font-size: 12px; */
}
.table-icon-plus-link{
  padding: 20px 10px;
  display: flex;
}

.plus-div{
  border-radius:var(--radius-15);
  padding: 20px;
}
.plus-div td{
  padding: 10px;
  /* font-size: 13px; */
  border: 1px solid var(--light-color)!important;
}

/* table close */




.card-dummy{
  height: 400px;
  border-radius:var(--radius-15);
  box-shadow: var(--shadow);
}




/* daterange picker */
.datepicker{
  z-index: 11111;
}
.daterangepicker .calendar.left{
  margin-right: 20px!important;
}
.daterangepicker .calendar-table{

  padding: 0px;
  margin: 0px;

}
.daterangepicker th {
  font-weight: 600;
  /* font-size: 12px; */
}
.daterangepicker_input i{
  color: #6a6a6a;
}
.daterangepicker .calendar-table .table-condensed{
  border-spacing: 5px;
  border-collapse: separate;
}
.daterangepicker table tbody tr td{
  padding: 3px 6px;
  color: #6d6d6d;
  /* font-size: 14px; */
}

.daterangepicker table thead tr:first-child .month select{
  padding: 5px 10px;
  /* font-size: 13px; */
  /* border-radius:var(--radius-15); */
}
.daterangepicker select.monthselect{
  margin-right: 5px;
}
.daterangepicker select.yearselect{
  width: auto;
}
.daterangepicker table thead tr:last-child{
  color: var(--color-primary);
}
.daterangepicker table thead tr .prev{
  background-color: var(--color-primary);
  color: #fff;
}
.daterangepicker table thead tr .next{
  background-color: var(--color-primary);
  color: #fff;
}
.daterangepicker .input-mini:focus, .daterangepicker .input-mini.active :visited {
  box-shadow: var(--form-shadow);
}
.daterangepicker .input-mini.active{
  border: 1px solid var(--form-border);
  box-shadow: var(--form-shadow);
}

.daterangepicker.ltr .ranges {
  clear: both;
}
.daterangepicker td.active, .daterangepicker td.active:hover, .btn-primary.disabled, .btn-primary:disabled, .daterangepicker td.available:hover, .daterangepicker th.available:hover  {
  background-color: var(--color-primary);
}
/* daterange picker close */

/* datepicker open */

.datepicker--nav, .datepicker--nav-title i, .datepicker--day-name , .datepicker--cell.-current- {
  color: var(--color-primary);
}
.datepicker--cell.-selected-.-current-, .datepicker--cell.-selected-, .datepicker--cell.-selected-.-focus- {
  background-color: var(--color-primary);
}
.datepicker--nav-action path {
  stroke: var(--color-primary);
}
.datepicker--cell-day:hover{
  background-color: var(--color-primary);
  color: #fff;
}
.-selected-.datepicker--cell-day.-other-month-{
  background-color: var(--light-color);
}
.datepicker--day-name{
  font-weight: 600;
}
.daterangepicker td.in-range{
  background-color: var(--background);
}

/* datepicker close */




/* Admission main content  */

.icon-btn-div{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: var(--shadow);
  /* overflow-x: hidden; */

}

.checkbox-input-div{
  position: relative;
  width: 60px;
  justify-content: left;
  cursor: pointer;

}
.checkbox-input{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.checkbox-input-arrow{
  width: 100%;
  height: 100%;
  padding-left: 10px;
}
.checkbox-input-arrow-icon{
  /* font-size: 12px; */
  margin-left: 8px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: var(--color-primary);
  color: #fff;
}
.checkbox-input-arrow-icon i{
  transition: var(--transition-time-animate);
}
.checkbox-input-arrow-open-div{
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 3;
  background-color: #fff;
  box-shadow: var(--shadow);
  padding: 5px 10px;
  width: 150px;
  /* font-size: 15px; */
  border-radius:var(--radius-15);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-time-animate);
  transform: translateY(10px);
}
.checkbox-input-div:hover .checkbox-input-arrow-open-div{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.checkbox-input-div:hover .checkbox-input-arrow-icon i{
  transform: rotate(90deg);
}
.checkbox-input-arrow-open-div li{
  margin-bottom: 3px;
}
.checkbox-input-arrow-open-div li a{
  padding: 8px 10px;
  width: 100%;
  border-radius:var(--radius-15);
  transition: var(--transition-time-animate);
}
.checkbox-input-arrow-open-div li a:hover{
  background-color: var(--color-primary);
  color: #fff;
}

.search-collapse{
  background-color: #fff;
  box-shadow: var(--shadow);
  border-radius:var(--radius-15);
  padding: 20px;
  /* height: 0; */
  overflow: hidden;
  transition: all var(--transition-time-animate);
}
/* .search-collapse.show{
  height: auto;
  padding: 20px;
} */
.search-input-div label{
  margin-bottom: 5px;
  display: block;
}
.search-input-div input{
  background-color: #fff!important;
}



.btn-primary.disabled, .btn-primary:disabled {
  border-color: var(--color-primary);

}
.select2-container li input{
  padding-inline: 10px!important;

}
.select2-container--default .select2-selection--multiple .select2-selection__rendered{
  padding: 0;
}
.select2-results__option:hover, .select2-results__option:active, .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background-color: var(--color-primary);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-left: 10px;
  background-color: var(--color-primary);
  color: #fff;
  padding: 0 10px;

}

.select2-container .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus, .select2-container--default .select2-search--dropdown .select2-search__field:visited{
  outline: 1px solid var(--color-primary);
}

.search-input-div .form-control{
  border: 1px solid var(--form-border);
}

.select2-container--default.select2-container--focus .select2-selection--multiple, .search-input-div .form-control:focus, .search-input-div .form-control:visited{
  outline: none!important;
  /* border: none!important; */
  border-color: var(--form-border)!important;
  box-shadow: var(--form-shadow)!important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
  border: 1px solid var(--color-primary);
}

/* .select2-container--default .select2-search--dropdown .select2-search__field{
  display: none;
} */

select.form-control option:hover{
  background-color: var(--color-primary)!important;
  border: 3px solid!important;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single:focus, .select2-container--default.select2-container--open.select2-container--below .select2-selection--single:visited{
  box-shadow: var(--form-shadow)!important;
}





/* Add Admission Page */


.form-main-div{
  padding: 30px 20px;
}
.form-main-div label{
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  color: var(--text-color);
}
.form-main-div input{
  border-color: var(--form-border);
}

.required-sign{
  color: var(--danger-color);
  margin-left: 3px;
  font-weight: 600;
  font-size: 14px;
}

.addAdmissionPage .form-control:focus, .addAdmissionPage .form-control:visited , .form-control:visited, .form-control:focus{
  box-shadow: var(--form-shadow)!important;
  border-color: var(--form-border)!important;
}

.facility-checkbox{
  width: 15px;
  height: 15px;
}
.facility-div>div{
  display: flex;
  align-items: center;
  gap: 5px;
}
.facility-div>div label{
  margin: 0;
}


/* student details */

.btn-std-icon{
  padding: 0 5px;
}
.std-img{
  width: 150px;
  /* overflow: hidden; */
  /* border: 3px solid var(--color-primary); */
  position: relative;
}
.std-img img{
  box-shadow: var(--form-shadow);
  border-radius: 10px;
}
.camera-icon{
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  color: #fff;
  background-color: var(--color-primary);
  /* padding: 8px; */
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 12px;
}

.std-social-icon a{
  /* padding: 5px 8px; */
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  transition: var(--transition-time);
}
.std-social-icon a:hover{
  background-color: var(--color-primary);
  color: #fff;
}

.pill-data{
  border: 1px solid var(--light-color);
  padding: 10px 15px;
  border-radius: 10px;
}

.dot-link{
  position: relative;
  background-color: #fff;
  padding: 3px 8px;
  display: inline-flex;
  box-shadow: var(--shadow);
  border-radius: 5px;
  color: var(--color-primary);
  cursor: pointer;
}
.dot-link:hover{
  background-color: var(--color-primary);
  color: #fff;
}
.dot-link-ab{
  position: absolute;
  top: 25px;
  right: 0;
  z-index: 1;
  background-color: #fff;
  padding: 10px;
  box-shadow: var(--shadow);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
}
.dot-link-ab.show{
  opacity: 1;
  visibility: visible;
}
.dot-link-ab a{
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  transition: var(--transition-time);
}
.dot-link-ab a:hover{
  background-color: var(--color-primary);
  color: #fff;
}

.std-table thead td{
  font-weight: 500;
}
.std-table {
  border-collapse: separate;
  font-size: 14px;
}
.std-table thead td{
  font-weight: 600;
}
.std-table tr td{
  text-wrap: nowrap;
}
.status > div{
  margin-block: 5px;
}
.upcomming-btn, .dues-btn{
  background-color: var(--danger-color);
  color: #fff;
  font-size: 10px;
  border-radius: 10px;
  text-align: center;
  text-transform: uppercase;
  padding: 5px 10px 3px;
  display: inline-flex;
}
.upcomming-btn{
  background-color: rgb(32, 107, 187);
}

.transaction-card{
  /* height: 500px; */
  position: relative;
  overflow: hidden;
}
.transaction-activity-card{
  max-height: 600px;
  overflow-y: auto;
}
.transaction-line{
  border: 1px solid;
  position: absolute;
  top: 30px;
  left: 40px;
  height: calc(100% - 60px);
  width: 1px;
  border: 1px solid var(--light-color);
  padding-bottom: 10px;
}

.transaction-inline-card{
  position: relative;
  /* height: 200px; */
  /* border: 1px solid black; */
}
.transaction-num{
  border: 1px solid var(--light-color);
  padding: 8px 12px;
  box-shadow: var(--shadow);
  position: absolute;
  top: 20%;
  background-color: var(--color-primary);
  color: #fff;
  transform: translateY(-20%);
  left: 15px;
  border-radius: 10px;
}
.transaction-num::after{
  position: absolute;
  content: " ";
  width: 70px;
  height: 15px;
  border: 1px solid #d0d0d0;
  top: 60%;
  transform: translateY(-60%);
  left: 100%;
  transform: rotate(40deg);
  z-index: 5;
  background-color: #d0d0d0;
  box-shadow: var(--shadow);
}

.transaction-details-card{
  margin-left: 45px;
  /* height: 200px; */
  border-radius: 20px;
  padding: 20px 30px 10px;
}
.text-light-mode{
  color: #999;
  font-size: 15px;
}
.check_details_table{
  text-wrap: nowrap;
  flex-shrink: 0;
}

.accordion-button {
  padding: 6px 10px;
  border: 1px solid;
  border-color: var(--color-slate-500);
  /* color: #fff; */
  border-radius: 4px;
}
.accordion-button:focus, .accordion:active{
  outline: none;
  box-shadow: none;
}
.accordion-button:hover {
  /* color: #fff; */
}
.accordion-button::after {
  content: '\f107';
  color: #000;
  background: none;
  font-family: "Font Awesome 6 Free";
  font-weight: 900; 
}
.accordion-button:not(.collapsed){
  background-color: #fff;
  color: #000;
}
.accordion-button:not(.collapsed):after {
  content: '\f107';
  /* color: #fff; */
  background: none;
  font-family: "Font Awesome 6 Free";
  font-weight: 900; 
}

/* create Role open */
.create-role .accordion{
  border-radius: 10px;
  overflow: hidden;
}
.create-role .accordion-button {
  padding: 10px 10px;
  background-color: #fff;
  color: #000;
  border-radius: 4px;
}
.create-role .accordion-button:focus, .create-role .accordion-button:visited{
  box-shadow: none;
}
.create-role .accordion-button::after {
  content: '\f107';
  color: #999;
  background: none;
  font-family: "Font Awesome 6 Free";
  font-weight: 900; 
}

.create-role .accordion-button:not(.collapsed){
  background-color: var(--color-primary);
  color: #fff;
}
.create-role .accordion-button:not(.collapsed):after {
  content: '\f107';
  color: #fff;
  background: none;
  font-family: "Font Awesome 6 Free";
  font-weight: 900; 
}


.permission-row {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.permission-row div.flex-wrap{
  gap: 10px;
}
.permission-row:last-of-type{
  margin-bottom: 20px;
}
.module-name {
  font-weight: 600;
  width: 150px;
}
.form-switch {
  margin-right: 15px;
}

.lead-cont input:focus, .lead-cont input:visited{
  box-shadow: none;
}
.lead-cont .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* create Role close */

/* Add Template open */
.contentTextarea{
  min-height: 200px!important;
}
.temp-row{
  padding-inline: 30px;
}
.temp-card{
  width: 100%;
  border-radius: 15px;
  box-shadow: var(--shadow);
}
.temp-head{
  font-size: 28px;
  font-weight: 500;
  padding-bottom: 20px;
  border-bottom: 1px solid;
}
.temp-btn{
  width: 150px;
}
/* Add Template close */

/* Gallery open */
.select2-container {
  /* z-index: 9999 !important;  */
  z-index: 9 !important;
}

.folder-card{
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
  box-shadow: var(--shadow);
  border: 1px solid var(--light-color);
  border-radius: 8px;
}
.folder-card .fold-icon{
  width: 40px;
  height: 40px;
  background-color: #ffe17431;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffca28;
  font-size: 20px;
  position: relative;
}
.f-badge{
  position: absolute;
  top: 0%;
  left: 0;
}
.folder-card p{
  margin-bottom: 0;
}
.folder-card .badge{
  font-size: 11px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--light-primary)!important;
}
.file-row {
  min-height: auto;
  max-height: unset;
  overflow-y: unset;
}
.file-row::-webkit-scrollbar{
  display: none;
}
.file-card{
  background-color: #fff;
  box-shadow: var(--shadow);
  position: relative;
}
.img-dot{
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
}
.img-dot-menu{
  display: none;
  position: absolute;
  top: 18px;
  right: -10px;
  width: 140px;
  padding: 5px;
  background-color: #fff;
  z-index: 11;
  box-shadow: var(--shadow);
  border-radius: 8px;
}
.img-dot-menu .menu-item{
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.menu-item:hover{
  background-color: #e2e2e2;
}
.img-dot:hover .img-dot-menu{
  display: block;
}
.preview-modal-dialog{
  max-width: 800px;
}
.modal-img-preview{
  width: 100%;
  aspect-ratio: 16/9;
}
.modal-img-preview img{
  /* object-fit: contain; */
  /* object-fit: fill; */
}

.file-icon{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.file-icon img{
  height: auto;
}
.file-checkbox{
  width: 16px;
  height: 16px;
}
#loading {
  text-align: center;
  padding: 20px;
  display: none;
  font-size: 14px;
  font-weight: bold;
}
/* Gallery close */

/* user */
.user-card-div{
  /* max-width: 400px; */
  box-shadow: var(--shadow)!important;
  position: relative;
  padding: 15px;
  flex-shrink: 0;
  border-radius: 15px;
}
.user-img-div{
  width: 60px;
  height: 60px;
  border-radius: 10px;
  /* border-radius: 50%; */
}
.user-opt-ab{
  position: absolute;
  top: 10px;
  right: 20px;  
}
.user-opt-dot{
  position: relative;
}

.user-opt-select{
  position: absolute;
  top: 100%;
  right: -10px;
  background-color: #fff;
  box-shadow: var(--shadow);
  border-radius: 8px;
  /* padding: 5px; */
  display: none;
  transition: all var(--transition-time);
}

.user-opt-select a{
  padding: 5px 10px;
  border-bottom: 1px solid #eee;
  width: 100%;
  border-radius: 8px;
}
.user-opt-select a:hover{
  background-color: var(--color-primary);
  color: #fff;
}
.user-opt-select a:last-of-type{
  border: none;
}
.user-card-div .form-check-input:checked{
  background-color: var(--color-primary);
}
.user-card-div .form-switch input[type="checkbox"]{
  /* background-color: var(--color-primary); */
  border-color: var(--color-primary);
  color: var(--color-primary);
  height: 20px;
  width: 35px;
}
.user-card-div .form-switch input[type="checkbox"]:focus{
  box-shadow: none;
}
.user-opt-dot:hover .user-opt-select{
  display: block;
  padding: 5px;
}
.form-check.form-switch{
  margin-right: 0;
}


/* feeReceipt open */

.fee-card{
  height: 200px;
}

/* addCommon Receipt */
.payment-card{
  padding: 20px;
}

/* day book */

.day-book-card{
  height: 400px;
  padding: 20px;
}
/* dues Report  */
.summary-card{
  height: 150px;
}

/* integration open */
.icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
}
.integration-card{
  min-height: 100px;
}
.integration-h{
  font-size: 18px;
}
.integration-card a{
  display: flex;
  height: 100%;
}

/* create Installment */
.profile-img{
  width: 100px;
  height: 100px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: #fff;
  border-radius: 20px;
  background-color: var(--color-primary);
}
.info-row{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.info-row:last-child{
  margin-bottom: 10px;
}
.info-row i{
  font-size: 20px;
}
.info-value{
  color: var(--color-primary);
  text-transform: uppercase;
}
.profile-uid{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-primary);
}
.summary-item{
  border: 1px solid #e0e0e0;
  padding: 12px 20px;
  margin-bottom: 15px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
}
.all-transaction .dot-link-ab{
  display: none!important;
  flex-direction: column;
}
.all-transaction:hover .dot-link-ab{
  display: flex!important;
  opacity: 1;
  visibility: visible;

}
.no-installment-card{
 
  max-height: 300px;
  overflow-y: auto;
}

/* module */
.card-module-btn{
  min-height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-module-btn i{
  font-size: 25px;
  margin-bottom: 5px;
}


/* contact */

.profile-img-contact{
  border-radius: 50%;
}
.contact-info{
  background-color: #fff;
  border: none!important;
}
.contact-info:focus{
  outline: none;
  border: none;
}
.contact-info.active{
  border-bottom: 2px solid var(--color-primary)!important;

}
.arrow-btn{
  background-color: #fff;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  color: var(--color-primary);
}
/* .accordion-nav-btn{
  margin-right: 10px;
  background-color: var(--light-color-primary);
} */
.acc-middle-div .accordion-button{
  background-color: #fff;
  color: #000;
  border: 1px solid var(--color-primary);
}
.acc-middle-div .accordion-item{
  box-shadow: var(--shadow);
  border: none!important;
}
.acc-middle-div i{
  color:#fff;
}
.acc-middle-div .accordion-body{
  padding-top: 15px!important;
  background-color: #fff;
  /* border-radius: 20px; */
  border: none;
}
.accordion-collapse{
  border: none;
}

.accordion-nav-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-primary);
    color: white;
    padding: 5px 15px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    border-radius: 4px;
    position: relative;
    margin-right: 6px;
    margin-bottom: 10px!important;
}
.accordion-nav-btn:first-of-type{
  margin-left: 10px;
}
.accordion-nav-btn:focus{
  border: none;
  outline: none;
}
.accordion-nav-btn.active{
  background-color: var(--light-color-primary)!important;
}
.nav-tabs .nav-link.active{
  border: none!important;
  border-bottom: 2px solid var(--color-primary)!important;
  border-color: var(--color-primary);

}
.nav-tab-ul{
  width: 100%;
  
}
.nav-tab-ul li{
  display: flex;
  flex-grow: 1;
}
.nav-tab-ul li button{
  display: flex!important;
  align-items: center;
  width: 100%!important;
  padding: 10px 5px;
  background-color: #fff;
  border: none!important;
  border-bottom: 1px solid #ccc!important;
  /* margin-right: 5px; */
}

.accordion-nav-btn::after {
    content: '';
    position: absolute;
    right: -9px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 10px solid var(--light-color-primary);
}
.accordion-nav-btn::before {
    content: '';
    position: absolute;
    left: -8.5px;
    top: -1px;
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 10px solid var(--color-primary);
}
.accordion-nav-btn span::before {
    content: '';
    position: absolute;
    left: -8.5px;
    bottom: -1px;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 10px solid var(--color-primary);
}

.contact-stepper-line{
  left: 20px;
  /* height: calc(100% - 35%); */
}
.contact-stepper{
  width: 15px;
  height: 15px;
  padding: 0;
  top: 15%;
  left: 10px;
  border-radius: 50%;
}
.contact-stepper::after{
  all: initial;
}
.contact-stepper-body{
  margin-left: 15px;
  border-radius: 10px;
  box-shadow: none;
}
.note-img{
  aspect-ratio: 2/.7;
}
.upcoming-select .select2-container--default .select2-selection--single, .life-cycle-select .select2-container--default .select2-selection--single{
  border: none;
}
.upcoming-select .select2-container--default .select2-selection--single:focus, .life-cycle-select .select2-container--default .select2-selection--single:focus{
  border: none;
  outline: none;
}
.life-cycle-select{
  text-wrap: nowrap;
  align-items: center;
}
.leads-stepper{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.leads-stepper div{
  margin-right: 0px;
  background-color: #eaeced;
  padding: 8px 32px;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  font-weight: 400;
  /* border-radius: 10px; */
}
.leads-stepper div i{
  display: none;
}
.leads-stepper div.fill{
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
.leads-stepper div.fill i{
  display: inline-flex;
}
.leads-stepper div:first-of-type{
  border-radius: 15px 0 0 15px;
}
.leads-stepper div::before{
  position: absolute;
  content: '';
  width: 45px;
  height: 30px;
  top: -1px;
  left: -30px;
  transform: rotate(45deg);
  background-color: #fff;
}
/* .leads-stepper li::after{
  position: absolute;
  content: '';
  width: 45px;
  height: 30px;
  top: -1px;
  right: -30px;
  transform: rotate(45deg);
  background-color: red;
} */
.leads-stepper div:first-of-type::before{
  all: initial;
}
.right-triangle{
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  width: 18px;
  height: 100%;
  /* border: 1px solid; */
  overflow: hidden;
  background-color: #fff;
}
.right-triangle::after{
  position: absolute;
  content: '';
  top: 0;
  right: 6px;
  width: 40px;
  height: 100%;
  transform: rotate(45deg);
  background-color: #eaeced;
}
.leads-stepper div.fill .right-triangle::after{
  background-color: var(--color-primary);
  color: #fff;
}
.social-btn:hover{
  background-color: var(--color-primary);
  color: #fff;
}
.upload-btn{
  border-style: dashed!important;
}
.badge-custom{
  background-color: var(--color-primary);
  /* font-family: 'Acumin-Semibold'; */
  color: #fff;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-right: 1px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  margin-left: 5px;
}
.right-side-userImg{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.btn-custom-close{
  background-color: transparent;
  border: none;
  color: #fff;
  margin-right: 5px;
}
 /* .select2-container--default .select2-selection--single{
  height: 30px;
 }
 .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 30px;
 } */
 .attach-img{
  width: 80px;
 }
 .attach-btn{
  width: 25px;
  height: 25px;
  border: 1px solid #ccc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
 }

 .filter-activity.accordion-button{
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding-top: 8px;
 }
 .filter-activity.accordion-button::after {
    all: initial;
}
.submit-btn-contact{
  border-radius: 50px;
}
.upload-btn{
  position: relative;
}
.upload-btn input[type="file"]{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  /* visibility: hidden; */
}

/* jkanban */

.kanban-board{
  /* background-color: #e9e9e97a; */
  background-color: #fff;
  border-radius: var(--shadow);
  padding: 8px;
  min-height: 100px;
  font-family: 'Acumin-Regular', 'Inter', sans-serif;

}
.kanban-header{
  background-color: #fff;
  padding: 0px 10px;
}
.kanban-img{
  width: 25px;
  height: 25px;
  border-radius: 5px!important;
  overflow: hidden;
  margin-right: 10px;
  flex-shrink: 0;
}
.custom-title{
  /* background-color: var(--color-primary); */
  padding: 0!important;
}
.jkanban-search input{
  width: 300px;
}
.title-card-jkanban{
  font-family: 'Acumin-Semibold';

  font-weight: 600;
  font-size: 17px;
}
.title-card-jkanban a{
    color: #444;
}
.fw-700{
  font-family: 'Acumin-Semibold';
  /* font-weight: 700!important; */
}
  .jkanban-menu-btn{
    position: relative;
  }
  .jkanban-menu-btn button{
    padding: 0px 8px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: var(--shadow);
    border-radius: 5px!important;
  }
  .jkanban-menu-btn ul{
    position: absolute;
    top: 25px;
    right: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: var(--shadow);
    border-radius: 8px;
    padding: 10px 5px;
    /* opacity: 0;
    visibility: hidden;
    z-index: 111; */
    display: none;
  }
  .jkanban-menu-btn ul.show{
    /* opacity: 1;
    visibility: visible; */
    display: block;
  }
.jkanban-menu-btn li{
  padding: 0px 10px;
  margin-bottom: 3px;
  cursor: pointer;
  /* border: 1px solid; */
}
.jkanban-company-name{
  font-size: 13px;
}
#myKanban::-webkit-scrollbar-thumb{
  background-color: #a6a6a6;
  border-radius: 10px;
}
#myKanban::-webkit-scrollbar{
   width: 3px;
  height: 4px;
}
.empty-placeholder{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
/* upload */
.upload-step li{
  flex-grow: 1;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
.upload-step.nav-pills .nav-link.active{
  background-color: #fff;
  color: var(--color-primary);
  border-radius: 0;
  font-weight: 600;
  border-bottom: 3px solid var(--color-primary);
}
.upload-step .nav-item{
  margin-right: 10px;
}
.upload-step .nav-item:first-of-type{
  margin-left: 10px;
}
.upload-step .nav-link{
 text-align: center;
}
.upload-step .nav-link span{
  margin-right: 30px;
  float: left;
}
.upload-step .nav-link.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.check-sign{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  margin-right: 15px;
}
.check-p-div p{
  margin-bottom: 0px;
  line-height: 1.5;
}
.field-mapping{
  max-height: 300px;
  overflow-y: auto;
}


/* workflow */

/* .workflow-condition{
  width: 100px;
  height: 100px;
  background-color: var(--color-primary);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 17px;
}
.while-card{
  display: inline-flex;
  margin-left: 100px;
  min-width: 500px;
  border-radius: 10px;
  padding: 20px;
}
.while-card-div{
  width: 500px;

}
.while-card-div p{
  display: flex;
  flex-shrink: 0;
}
.while-square{
  border-radius: 10px;
  transform: rotate(45deg);
}
.while-square p{
  transform: rotate(-45deg);
}
.add-condition, .num-condition{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ms-200{
  margin-left: 200px;
}
.workflow-parent-rl, .workflow-rl{
  position: relative;
}
.condition-line{
  width: 250px;
  display: inline-flex;
  position: absolute;
  left: 0;
  border: 1px solid var(--color-primary);
  z-index: -1;
}
.workflow-child-line{
  position: absolute;
  display: inline-flex;
  height: 150px;
  border: 1px solid var(--color-primary);
  left: 250px;
  bottom: 0;
  z-index: -1;
}
.workflow-cond-vrtl-line{
  position: absolute;
  height: 150px;
  border: 1px solid var(--color-primary);
  left: 50px;
  top: -80px;
}
.workflow-grand-child-line{
  top: 30px;
}
.workflow-card{
  display: inline-flex;
  margin-left: 100px;
  min-width: 250px;
  border-radius: 10px;
  padding: 20px;
} */



/* highchart */
.chart-card {
  /* background: #fff; */
  /* border-radius: 16px; */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
  width: 100%;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 🔹 Header Section */
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title {
  font-weight: 600;
  font-size: 16px;
  color: #222;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-filters {
  display: flex;
  gap: 10px;
}

.filter-btn {
  border: none;
  background: #f2f4f7;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.filter-btn:hover {
  background: #ddd;
}

.chart-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

#container {
  width: 260px;
  height: 260px;
}

.legend-box {
  display: block;
  width: 50%;
  max-height: 150px;
  padding-right: 15px;
  /* border: 1px solid; */
  overflow-y: auto;
}

.legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}

.legend-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-value {
  font-weight: 500;
}
/* .highcharts-contextbutton {
  display: none !important;
} */

.highchard-card{
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.highchard-card:last-of-type{
  margin-bottom: 0;
}
.highcard-icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f7e9;
  margin-right: 10px;
}
.highcard-icon i{
  color: var(--color-primary);
}

.highcard-total-value-div{
  background: linear-gradient(180deg,rgba(111, 179, 39, 1) 46%, rgba(255, 255, 255, 1) 100%);
  /* background: linear-gradient(180deg,rgba(111, 179, 39, 1) 36%, rgba(184, 230, 135, 1) 100%); */
  /* background: linear-gradient(180deg,rgba(111, 179, 39, 1) 36%, rgba(210, 227, 188, 1) 100%); */
  width: 100%;
  /* aspect-ratio: 1/.6; */
  min-height: 180px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  border-radius: 16px;
}
.highcard-total-value{
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 700;
}


.lead-dashboard-card{
  height: 100%;
  padding: 20px 20px;
  justify-content: center;
}

.highcharts-plot-band, .highcharts-pane{
  fill: #fff;
}


.task-progress-card{
  /* height: 100%; */
  padding: 20px 20px;
}
.progress-bar-container{
  display: flex;
  align-items: center;
}
.progress-bar-container span{
  font-weight: 800;
}

.progress{
  margin-right: 4px;
  height: 30px;
  border-radius: 0;
  flex-direction: column;
  background-color: #fff;
  position: relative;
  /* border: 1px solid; */
  overflow: visible;
}
.progress.completed>div{
  width: 100%;
  height: 5px;
  background-color: #32c48d;
  margin-bottom: 10px;
  position: relative;
  transition: all .3s;
  z-index: 1;
}
/* .progress.completed>div::after{
  position: absolute;
  content: 'Completed';
  padding: 5px 10px;
  background-color: #32c48d;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
} */
/* .progress.completed>div:hover::after{
  opacity: 1;
  visibility: visible;
} */

.progress.inprogress>div {
  width: 100%;
  height: 5px;
  background-color: #a8e063;
  margin-bottom: 10px;
  z-index: 1;
}

.progress.upcoming>div {
  width: 100%;
  height: 5px;
  background-color: #ffb347;
  margin-bottom: 10px;
  z-index: 1;
}
.progress-line{
  position: absolute;
  top: 0;
  left: 10%;
  border: 1px solid;
  height: 20px;
  z-index: 0;
}
.progress-line-first{
  border-color: #32c48d;
}
.progress-circle{
  position: absolute;
  top: 100%;
  left: -12px;
  width: 25px;
  height: 25px;
  font-size: 8px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #32c48d;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.progress-circle.progress-circle-top{
  top: initial;
  bottom: 100%;
  background-color: #a8e063;
  
}
.progress-line-top{
  border-color: #a8e063;
  top: initial;
  bottom: 100%;
}
.progress-line-last{
  border-color: #ffb347;
}
.progress-circle-bottom{
  background-color: #ffb347;
}
.task-card{
  width: 100%;
  /* height: 120px; */
}
.task-card p{
  margin-bottom: 5px;
}
.task-card .icon{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--color-primary);
  background-color: #f1f7e9;
  /* margin-top: 10px; */
  margin-bottom: 10px;
}
.icon.complete-icon{
  background-color: #32c48c59;
}
.icon.progress-icon{
  background-color: #a8e06374;
}
.icon.upcoming-icon{
  background-color: #ffb24760;
}
.upcoming-task-card{
  padding: 15px 20px;
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  /* width: 100%; */
  /* border: 1px solid; */
}
.upcoming-card-in{
  border-radius: 8px;
  flex-direction: row;
  align-items: center;
  width: 200px;
  flex-shrink: 0;
  margin-right: 10px;
}
.upcoming-card-img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 8px;
}
.upcoming-card-heading{
  font-weight: 600;
  color: #333;
}
.upcoming-card-subheading{
  color: #555;
  font-size: 12px;
}




/* table custom */
.table-custom div.dt-layout-row:first-of-type{
  padding-inline: 20px;
}
.table-card.table-custom-card{
  padding-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.table-custom{
  height: 400px;
  overflow: hidden;
  position: relative;
  /* border: 1px solid; */
}
.table-paginated-no{
  position: absolute;
  top: 5px;
  left: 20px;
  width: 50px;
  height: 30px;
}
.table-custom div.dt-container.dt-empty-footer .dt-scroll-body{
  border-bottom: none;
}
.table-custom th{
  text-wrap: nowrap;
  min-width: 150px;
  /* height: 40px; */
}
/* .table-custom tbody{
  height: auto!important;
}
.table-custom tbody tr, .table-custom tbody td{
  height: auto;
  vertical-align: top;
} */
.table-custom th, td {
  white-space: nowrap; 
}