.nav-treeview p{
  padding-left: 33px !important;
}
.btn-primary{
  --bs-btn-bg: #327a7f !important;
}
.dataTables_length{
  float: left !important;
}
.dataTables_filter{
  float: right !important;
}
.sidebar-brand img{
  width: 85% !important;
}
#example_info{
  float: left !important;
}
#example_paginate{
  float: right !important;
}
.paginate_button{
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
}
[type=search] {
  margin-left: 10px;
}
.login-logo img{
  width: 90%;
}
.box {
  border-radius: 3px;
  background: #ffffff;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1)
}
.profile{
  padding: 20px 20px;
  border-radius: 10px;
}
.dataTables_wrapper{
  padding-bottom: 25px;
}
.dataTables_info{
  padding-top: 10px;
}
.sorting_desc{
  cursor: n-resize;
}


.info-icon {
    position: relative;
    cursor: pointer;  /* Make it clear the icon is clickable */
    color: #007bff;   /* You can change the color of the icon */
	
}

.info-icon .tooltip-text {
	
	font-size:0.8rem;
    visibility: hidden;  /* Initially hide the tooltip */
    width: 200px;         /* Width of the tooltip */
    background-color: #333;  /* Background color of the tooltip */
    color: #fff;            /* Text color */
    text-align: center;     /* Center align the text */
    border-radius: 5px;     /* Rounded corners */
    padding: 5px;           /* Padding inside the tooltip */
    position: absolute;     /* Positioning */
    z-index: 1;             /* Ensure the tooltip is above other elements */
    bottom: 100%;           /* Position above the icon */
    left: 50%;              /* Center horizontally */
    margin-left: -100px;    /* Adjust to align tooltip correctly */
    opacity: 0;             /* Make it invisible by default */
    transition: opacity 0.3s; /* Smooth fade-in effect */
}

.info-icon:hover .tooltip-text {
	font-weight: normal;
    visibility: visible;    /* Show tooltip when hovering */
    opacity: 1;              /* Make the tooltip visible */
}

label i {
    margin-right: 8px;  /* Space between the icon and the label text */
}

/* captcha */
.captcha-image img {
    max-width: 100%;
    width: 100%; /* Make the image bigger */
    height: auto; /* Maintain aspect ratio */
	padding-bottom: 10px;
}

/* slider bar (for date range selection) */

.noUi-connect {
  background: var(--bs-secondary);
}

.noUi-handle {
  background: var(--bs-primary);
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  cursor: grab;
}

#date-slider {
  height: 20px;
  max-width: 100%;
  margin: 40px auto;
}

.noUi-tooltip {
  font-size: 12px;
  color: #333;
  border: 0px;
}

/* Move the left handle label above */
.noUi-handle[data-handle="0"] .noUi-tooltip {
  top: -25px; /* Move the left tooltip above */
}

/* Move the right handle label below */
.noUi-handle[data-handle="1"] .noUi-tooltip {
  top: 30px; /* Move the right tooltip below */
}

/* Containers for Charts */
.chartCard {
	width: 100%;
	background: rgba(238,237,240,0.2);
	display: flex;
	align-itmes: center;
	justify-content: center;
}
.chartBox{
	width: 100%;
	padding: 10px;
	border-radius: 10px;
	border: solid 2px rgba(1,1,1,0.5);
	background: white;
}
.chartContainer{
	width: 100%;
	max-width: 100%;
	min-height: 200px;
	overflow-x: scroll;
}