.active-dept {
  background-color: var(--theme-color_secondary) !important;
  font-weight: bold !important;
  color: var(--theme-color_primary) !important;
  font-size: 14px !important;
  border: 2px solid var(--theme-color_primary) !important;
}

.inactive-dept {
  color: #67748e;
  transition: all 0.2s ease;
  font-size: 14px !important;
  border: 1px solid #67748e !important;
  background-color: #fdfdfd;
}

.inactive-dept:hover {
  background-color: #edf4ff;
  color: #222;
}

/* Apply dynamic border-top color via JS or scoped style if needed */

.dept-icon {
  width: 44px;
  height: 44px;
  background-color: var(--theme-color_primary);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 5px 10px !important;
  margin-right: 0px !important;
}

.icon-primary {
    color: var(--theme-color_primary) !important;

}

.dept-icon-inner {
  font-size: 15px;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dept-title {
  color: #555 !important;
  font-weight: 600 !important;
  margin-top: 0px !important;
  font-size: 17px !important;
}

.dept-subtitle {
  color: #444 !important;
  font-size: 13px !important;
  margin-top: -2px !important;
}

.dept-flights {
  color: #777 !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

.card {
  position: relative !important;
  margin-bottom: 16px !important;
  padding: 8px !important;
  background-color: #ffffff !important;
  border: 1px solid #ccc !important;
  border-top: 3px solid var(--theme-color_primary) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

  @media (max-width: 768px) {
    .d-flex.flex-wrap > a {
      flex: 1 1 auto;
      min-width: 120px;
      justify-content: center;
    }
  }


/* Theme-driven department card styles */
.dept-card {
  padding: 0px 12px !important;
  border-radius: 12px !important;
  padding: 8px !important;
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-top: 1px solid #ddd !important;
  /*border-top: 2px solid var(--theme-color_primary);*/
}

.box {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid #ccc !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* Container styles for the row */
.row-flex {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next row */
    gap: 16px; /* Optional: Adds spacing between items */
}

/* Auto-width column */
.col-auto {
    flex: 0 0 auto; /* Adjust width to fit the content */
    margin-bottom: 16px; /* Adds spacing between rows */
}
.d-flex {
    display: flex; /* Makes the element a flex container */
}

.info-box-number {
  display: block;
  font-family: 'Roboto-Bold';
  font-size: 16px;
}

.nav-tabs-custom {
  margin-bottom: 0px !important;
  border: 1px solid  #aaa !important;
/*  border-bottom: none !important;*/
  background: #fff !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}


/* Basic Flexbox Utility Classes */
.flex-wrap {
    flex-wrap: wrap; /* Allows items to wrap */
}

.justify-content-start {
    justify-content: flex-start; /* Aligns items to the start of the container */
}

.justify-content-center {
    justify-content: center; /* Aligns items to the center of the container */
}

.justify-content-end {
    justify-content: flex-end; /* Aligns items to the end of the container */
}

.justify-content-between {
    justify-content: space-between; /* Distributes items with space between */
}

.justify-content-around {
    justify-content: space-around; /* Distributes items with space around */
}

.justify-content-evenly {
    justify-content: space-evenly; /* Distributes items with equal space around */
}

.align-items-start {
    align-items: flex-start; /* Aligns items to the start vertically */
}

.align-items-center {
    align-items: center; /* Aligns items to the center vertically */
}

.align-items-end {
    align-items: flex-end; /* Aligns items to the end vertically */
}

.right-gap {
    margin-right: 1%; /* Small gap between items */
}

/* Additional helpers */
.gap-1 {
    gap: 4px; /* Small gap between items */
}
.gap-2 {
    gap: 8px !important; /* Medium gap */
}
.gap-3 {
    gap: 16px; /* Large gap */
}


.list-group-item{
 padding: 8px 12px !important;
 border-radius: 8px !important; 
 color: var(--tbl-txt-dark) !important;
 border: 1px solid var(--tbl-border-dark) !important;
 margin: 1px !important;
 margin-top: 7px !important;
}

.list-group-item:focus, .list-group-item:hover {
  z-index: 2 !important;
  color: #0084B4 !important;
  background: var(--ghostblue);
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
  z-index: 2 !important;
  font-weight: bold !important;
  border-left-width: 4px !important;
color: #0084b4 !important;
  background: #ecf0f5 !important;
  border-left-color: #0084b4 !important;}




.skin-blue .sidebar-menu > li.active > a {
  padding: 8px  !important;
  font-weight: bold;
}

.skin-blue .sidebar-menu > li > a {
    /*font-size: 14px !important;*/
    padding: 8px  !important;
}

.treeview-menu {
    background-color: #ffffff !important;

    padding: 0px !important;
    margin-bottom: 15px !important;

}

.skin-blue .treeview-menu  {
  margin: 0 8px  !important;
  color: #0084B4  !important;
  margin-top: -8px !important;
  padding: 10px 0px  !important;
  border-radius: 10px;
  background: ghostwhite  !important;
  margin-bottom: 15px !important;
}



.treeview-menu.active {
    background-color: #ffffff !important;
    padding: 0px !important;
    margin-bottom: 15px !important;


}

.skin-blue .treeview-menu > li > a  {
    margin-left: 4px !important;
    margin-right: 5px !important;
    margin-top: 4px !important;
    padding: 1px !important;
    font-size: 98%  !important;
    color: #75798B;
}


.skin-blue .treeview-menu > li.active > a  {

    font-weight: 600 !important;
}


.treeview  .rim {
  font-size: 14px;
  font-weight: normal !important;
  margin: 5px !important;
}


.rim_bold {
  font-weight: bold !important;
}



.skin-blue .treeview-menu > li.active > a .rim {
    font-size: 14px;
    font-weight: bold !important;
    margin: 5px !important;
}





.treeview .fam {
    font-size: 16px;
    margin-right: 2px !important;
    width: 24px !important;
}

.treeview.active {
    border-radius: 8px; /* Adjust the value as needed */
    /*background-color: #f0f0f0; */

    color: #712181 !important;

}

.treeview.active span {
    font-weight: bold !important;

}



.treeview.active a {
    border-radius: 8px; /* Adjust the value as needed */

    color: var(--glidecare_blue); !important;


}

.treeview.active:hover {
    border-radius: 8px !important;/* Adjust the value as needed */
}

.treeview.active a:hover {
    border-radius: 8px !important;/* Adjust the value as needed */
}

.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a{
    border-radius: 8px !important;/* Adjust the value as needed */
}



.icon-large {
    font-size: 12px;
    margin-top: -15px !important;
    margin-bottom: -15px !important;
    /*font-weight: bold;*/ /* normal Removes boldness */
}
.skin-blue .sidebar-menu > li.active > a {
  color: #0084B4;
  background: var(--ghostblue);
  border-left-color: #3399ff;
}


.error {
    color: var(--tbl-red);
    font-size: 0.9em;
}

.error-input {
    border: 2px solid var(--tbl-red) !important;
    background-color: #ffe6e6  !important; /* Optional */
}


.rcorners_green {
    border-radius: 25px !important;
    border: 2px solid #73AD21 !important;
    padding: 35px !important;
}

.rcorners_blue {
    border-radius: 25px !important;
    border: 2px solid #2554C7 !important;
    padding: 35px !important;
}





.main-header .sidebar-session {
    font-family: Rubik, 'Varela Round', sans-serif !important;
    font-weight: normal;
}




.topuser-image {
  float: left;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  margin-right: 15px !important;
  margin-top: -15px  !important;
}

.mains-header {
  background-image: url('<?php echo base_url()?>assets/images/pattern-dg-small.png');
  background-repeat: repeat;
  background-size: 7% auto;
  opacity: 0.3;
}



.remix-small{
    font-size: 15px !important;
    margin-right: 2px !important;
}

.remix-margin{
    margin-right: 6px !important;
}



.tab1 {
    margin-right: 4px !important;
}

.tab2 {
    margin-right: 8px !important;
}

.tab4 {
    margin-right: 16px !important;
}


.info-box-icon-small {
    border-radius: 12px;
    display: block;
    float: left;
    height: 50px;
    width: 50px;
    text-align: center;
    font-size: 24px;
    line-height: 50px;
    background: ghostwhite;
}


/* Default state */
li {
    transform: scale(1); /* Normal size */
    transition: transform 0.8s ease, filter 0.8s ease; /* Smooth transitions */
}

/* Apply the animation */
.zoom-infinite {
  display: inline-block; /* Optional */
  animation: zoomInOut 2s infinite; /* Animation with 2-second duration, looping infinitely */
}

.zoom-once {
  display: inline-block; /* Optional */
  animation: zoomInOut 2s 1; /* Animation with 2-second duration, looping infinitely */
}

/*.active {  
  display: inline-block; 
  animation: zoomInOut 2s 1;
}*/ 


.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
  color: #0084B4;
  font-weight: bold !important;
  background-color: ghostwhite !important;

  border-left-color: #3399ff  !important;
}


.nav.nav-pills li {
  border-right: 1px solid lightgray !important;
/*  border-top-right-radius: 8px !important;
*/  margin-left: 0px !important;
}



.panel {
  border: 1px solid black !important;

  border-top-left-radius: 8px !important;  border-top-right-radius: 8px !important;
}

.panel-title {
  padding: 3px;
}

.panel-body {
    /*background-color: white !important;*/
    border-top: 1px solid black !important;
}


.panel-title {


}

.panel-heading{
    border-top-left-radius: 8px !important;  border-top-right-radius: 8px !important;
}


.nav.nav-pills li.active {
  display: inline-block; /* Optional */
  animation: zoomInOut 1.5s 1; /* Animation with 2-second duration, looping infinitely */
}



.nav.nav-pills  {
   border-bottom: 1px solid gray; !important;

}

.nav.nav-pills li {
  border-right: 1px solid lightgray !important;
  margin-left: 0px !important;
}






/* Define the keyframes for zoom in and zoom out */
@keyframes zoomInOut {
  0% {
    transform: scale(1); /* Normal size */
}
50% {
    transform: scale(1.1); /* Zoom in */
}
100% {
    transform: scale(1); /* Back to normal size (zoom out) */
}
}


.sn-notify-title {
    font-size: 16px !important; /* Larger font size for the title */
    font-weight: bold; /* Make the title bold */
}

.sn-notify-text {
    font-size: 14px !important; /* Specific font size for the text */
}



}


.box {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid rgb(221, 221, 221);
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(221, 221, 221);
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
}

:root {
       --red: hsl(0, 78%, 62%);
       --cyan: hsl(180, 62%, 55%);
       --orange: hsl(34, 97%, 64%);
       --blue: hsl(212, 86%, 64%);
       --green: hsl(120, 78%, 62%);
       --darkgreen: hsl(120, 78%, 40%);
       --lightgreen: hsl(120, 78%, 80%);
       --varyDarkBlue: hsl(234, 12%, 34%);
       --darkBlue: #0e8ed9;
       --grayishBlue: hsl(229, 6%, 66%);
       --veryLightGray: hsl(0, 0%, 98%);
       --weight1: 200;
       --weight2: 400;
       --weight3: 600;
   }
   .box-container {
       padding: 14px;
   }
   .cyan-top {
       border-top: 3px solid var(--cyan) !important;;
   }
   .red-top {
       border-top: 3px solid var(--red) !important;;
   }
   .blue-top {
       border-top: 3px solid var(--blue) !important;;
   }

   .dark-top {
       border-top: 3px solid var(--varyDarkBlue) !important;;
   }

   .box-primary {
       border-top: 3px solid var(--darkBlue) !important;
   }

   .box-success {
       border-top: 3px solid var(--darkgreen) !important;;
   }


   .box-info {
       border-top: 3px solid var(--varyDarkBlue) !important;;
   }


   .orange-top {
       border-top: 3px solid var(--orange) !important;;
   }
   .green-top {
       border-top: 3px solid var(--darkgreen) !important;;
   }