body, html {
	height: 100%;
	width:100%;
	margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    position: absolute;
}

/* Default light mode background */
body {
    background-color: white;
    color: black;
}

.sidebar {
	height: calc(100% - 2rem);
	display:block;
}

.nav-link {
	color: #000;
}

.navbar-brand {
	position: absolute;
	left: 15px;
	top: 15px;
}

.navbar {
	height: 80px;
	background-color: lightslategrey !important;
}

.nav-item {
	/*margin-left:20px;*/
}

.nav-link:hover {
	color: ffc107;
}

.nav-link:hover i {
  transition: color 0.6s ease; /* Add transition effect for icon color */
  color: #ffc107!important;  
}

.navbar-nav .nav-link.active {
	color: #ffc107;
}

.navbar-nav .nav-link.active i {
	color: #ffc107!important;
}

.nav-link:hover {
  color: #ffc107; /* Change the icon color on hover */
}

.table-hover tbody tr:hover {
    background-color: #f5f5f5; /* Set the desired background color for the hovered row */
    cursor: pointer; /* Change the cursor style to indicate interactivity */
}


.bottom-left {
	position: fixed;
	bottom: 0;
	left: 16.6666%;
	padding: 20px;
	z-index: 200;
}

.bottom-right {
    position: fixed;
    bottom: 0;
	z-index: 200;
    right: 20px;
	padding: 20px;
}
.column-list {
    column-count: 4;
    -webkit-column-count: 4;
    -moz-column-count: 4;
}

/* Disable text selection for the DataTables table */
table {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
	
.context-menu {
	display: none;
	position: absolute;
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 5px;
	left: 0; /* Set initial left position to 0 */
	top: 0; /* Set initial top position to 0 */
	transform: translate(-50%, -50%); /* Center the context menu */
}

/* custom.css */
#table_filter {
  float: left;
  text-align:left;
  display: flex;
  align-items: center; /* Align elements vertically in the div */
  margin-bottom: 10px; /* Optional: Add some space below the filters */
}

#table_filter label {
  margin-right: 10px; /* Optional: Add some space between labels and inputs */
}

#table_filter .form-check {
  margin-left: 20px; /* Optional: Add some space between checkboxes */
}

/* Override DataTables filter input styles for the checkboxes */
.custom-switch .form-check-input {
    --bs-form-switch-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e);
    width: 2em;
    margin-left: -2.5em;
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
}

.custom-switch .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Apply custom styles to the DataTables filter input */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 5px;
    background-color: transparent;
    margin-left: 3px;
}


#table .unpaid-row td {
  background-color: rgba(255, 160, 122, 0.5)!important; /* Set your desired color for unpaid rows */
}

#table .unpaid-due-past td {
  background-color: rgba(255, 0, 0, 0.5)!important; /* Set your desired background color for unpaid past due rows */
}

#table .archived-row td {
  background-color: rgba(255, 134, 11, 0.5)!important; /* Set your desired background color for unpaid past due rows */
}

#table .deleted-row td {
  background-color: rgba(178, 34, 34, 0.5) !important; /* Set your desired background color for unpaid past due rows */
}

#key {
  margin-bottom: 10px; /* Adjust as needed */
}

.key-paid {
  margin-right: 20px; /* Adjust as needed */
}

.key-unpaid {
  margin-right: 20px; /* Adjust as needed */
  color: rgba(255, 160, 122, 0.8)!important;
}

.key-archived {
  margin-right: 20px; /* Adjust as needed */
  padding-left: 22px;
  color: rgba(255, 134, 11, 0.8)!important;
}

.key-deleted {
  margin-right: 20px; /* Adjust as needed */
  padding-left: 22px;
  color: rgba(178, 34, 34, 0.8)!important;
}

.key-unpaid-due-past {
  margin-right: 20px; /* Adjust as needed */
  color: rgba(255, 0, 0, 0.8)!important;
}

.center-title {
	text-align: center;
}

/* Custom CSS to increase the font size of the total */
.large-total {
	font-size: 24px; /* Adjust the font size as needed */
	font-weight: bold; /* Optional: Add bold style to the total */
}

.chartjs-size-monitor, .chartjs-size-monitor-expand, .chartjs-size-monitor-shrink {
    position: absolute;
    direction: ltr;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    z-index: -1;
}

/* Basic example with equal border-radius for all corners */
.rounded-border {
  border-radius: 10px; /* Adjust the radius value as needed */
  padding: 10px; /* Adding padding to make the border visible */
}

#wrapper {
	margin-left: 16rem; /* Adjust margin-left to accommodate sidenav width and spacing */
	width:calc(100% - 17rem);
}

.content {
	flex: 1;
	overflow-y: auto; /* Add scrollbar if content exceeds height */
}

.topnav {
	width:calc(100% - 17rem);
	left:16rem;
	z-index:99;
	top:0.5rem;
	position:absolute;
}

/* Media query to hide sidenav on smaller screens */
@media (max-width: 767px) {
    #sidenav {
        display: none; /* Hide sidenav on screens smaller than 767px */
    }
	
	#wrapper {
		margin-left: 1rem; /* Adjust margin-left to accommodate sidenav width and spacing */
		width:calc(100% - 2rem);
	}
	
	.topnav {
		width:calc(100% - 2rem);
		left:1rem;
		z-index:99;
		top:0.5rem;
		position:absolute;
	}
}

@media (min-width: 768px) {
	
	#sidenav {
        display: block!important; /* Hide sidenav on screens smaller than 767px */
    }
	
	#wrapper {
		margin-left: 16rem; /* Adjust margin-left to accommodate sidenav width and spacing */
		width:calc(100% - 17rem);
		display:block!important;
	}
	
	.topnav {
		width:calc(100% - 17rem);
		left:16rem;
		z-index:99;
		top:0.5rem;
		position:absolute;
	}
}

/* CSS */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the alpha value to control the opacity */
    z-index: 9999; /* Ensure the overlay is behind other elements */
    display: none; /* Initially hidden */
}

.context-menu-option {
    display: block;
    text-decoration: none;
}

.context-menu-option:hover {
    color: #ffc107 !important; /* Change to desired color */
    cursor: pointer;
	text-decoration:none;
}

.contextMenu {
	display: none; 
	position: absolute; 
	background-color: #fff; 
	border: 1px solid #ccc; 
	padding: 5px; 
	z-index: 100;
}

/* Dark mode background */
@media (prefers-color-scheme: dark) {
    body {
        background-color: dimgray !important;
        color: white;
	}
	.nav-link {
		color: #fff;
	}
	.bg-white {
		background-color: #000 !important;
	}
	.table>:not(caption)>*>* {
		color: white !important;
	}
	.contextMenu {
		background-color: lightslategrey !important;
		color: white !important;
	}
}