body, html {
	height: 100%;
	margin: 0;
	/*overflow: hidden;*/
	overflow-y: scroll;
	/*font-family: 'Roboto', sans-serif;*/
	font-family: 'Inter', sans-serif;
	background-color: #f0f2f5;
	scroll-behavior: smooth;
}

.row {
	/*gap: 10px!important;*/
	flex-wrap: nowrap!important;
}

.mainBox{
	background: #fff;
	border-radius: 20px;
	padding: 20px;
	border: 1px solid #e0e0e0;
}

.form-label{
	margin-bottom: 0;
}

.badge{
	padding: 8px 6px;
}

.no-border{
	border: none!important;
}

.circle-border{
	border-radius: 50%!important;
}

.no-pad-left{
	padding-left: 0!important;
}

.no-pad-right{
	padding-right: 0!important;
}

.pad10{
	padding: 10px!important;
}

.navbar-my{
	font-size: 40px;
	align-items: center;
	font-weight: lighter;
	display: flex;
	/*gap: 10px;*/
	justify-content: center;
}

.mb-20{
	margin-bottom: 20px!important;
}

.mt-20{
	margin-top: 20px!important;
}

/* Sidebar Styling */
/*
.sidebar {
	width: 260px;
	height: 100vh;
	background-color: #343a40;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 20px;
	transition: transform 0.3s ease;
	z-index: 1000;
}*/

.sidebar {
	border-radius: 8px;
	width: 240px;
	height: 95vh;
	/*background-color: #343a40;*/
	background-image: linear-gradient(135deg, #343a40, #1d2124);
	color: #fff;
	position: fixed;
	top: 19px;
	left: 20px;
	padding-top: 20px;
	transition: transform 0.3s ease;
	z-index: 1000;
	overflow-y: scroll;
}
.sidebar .nav-link {
	color: #adb5bd;
	padding: 10px 20px;
	font-weight: 500;
	transition: background-color 0.2s, color 0.2s;
}
.sidebar .nav-link:hover, .sidebar .nav-link.active {
	color: #ffffff;
	background-color: #495057;
}
.sidebar .nav-item .bi {
	margin-right: 10px;
}

.sidebar hr{
	border: 0.5px solid #484847;
	opacity: unset;
}



/* Main content area */
.content {
	margin-left: 260px;
	transition: margin-left 0.3s ease;
	padding: 20px;
}
.content.expanded {
	margin-left: 0;
}

/* Top Navbar */
.navbar-custom {
	height: 60px;
	background-color: #ffffff;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 999;
}
.navbar-custom .toggle-btn {
	font-size: 24px;
	color: #343a40;
	cursor: pointer;
}

.navbar-custom a i {
	font-size: 24px;
	color: #343a40;
	cursor: pointer;
}

/* Breadcrumbs and Header */
.breadcrumbs {
	margin-top: 20px;
	color: #6c757d;
	font-size: 0.9rem;
}
.page-title {
	font-size: 1.5rem;
	margin: 10px 0;
	font-weight: 600;
	color: #343a40;
	margin-top: 20px;
}
.page-title-invoice-new {
	font-size: 1.5rem;
	font-weight: 600;
	color: #343a40;
	margin-top: 20px;
}
.page-title-box .btn-primary,
.page-title-box .btn-danger{
	height: 38px;
	margin-top: 10px;
}

/* Dark mode */
.dark-bg {
	background-color: #212529;
}

.collapsed {
	transform: translateX(-260px);
}

.box {
	width: 100%;
	background-color: #fff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.boxHalf {
	width: 49%;
	background-color: #fff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.box2-5 {
	width: 42%;
	background-color: #fff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.box3-5 {
	width: 55%;
	background-color: #fff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.flex {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.breadcrumb-item {
	font-size: 0.8rem;
}

.breadcrumb-item a {
	color: #404040;
	text-decoration: none;
	transition: color 0.2s;
}

.breadcrumb-item.active a {
	font-weight: 600;
}

label{
	font-size: 14px;
	/*font-weight: 700;*/
	font-weight: 500;
}

.searchInput{
	width: 300px;
	height: 40px;
}

.flex-end{
	display: flex;
	justify-content: flex-end;
}

.dashUnpaid{
	height: 130px;
	/*background-color: #7d343b;*/
	background-image: linear-gradient(135deg, #7d343b, #4a1a1f);
	color: #fff;
}

.dashPaid{
	height: 130px;
	/*background-color: #315d3b;*/
	background-image: linear-gradient(135deg, #315d3b, #1a3a1f);
	color: #fff;
}

.dashTax{
	height: 130px;
	/*background-color: #8b1391;*/
	background-image: linear-gradient(135deg, #8b1391, #4a0a48);
	color: #fff;
}

.dashProfit{
	height: 130px;
	/*background-color: #115096;*/
	background-image: linear-gradient(135deg, #115096, #0a2c48);
	color: #fff;
}

#pendingInvoicesExistsModal .modal-header {
	/*background-color: #a90a0a;*/
	background-image: linear-gradient(135deg, #6c0505, #a90a0a);
	color: #fff;
}

#InvoiceItemsTable, #OfferItemsTable {
	border-collapse: collapse;
	width: 100%;
}

#InvoiceItemsTable input, #OfferItemsTable input{
	height: 40px;
}

#InvoiceItemsTable thead, #OfferItemsTable thead{
	border-style: hidden;
}

#InvoiceItemsTable tbody tr, #OfferItemsTable tbody tr {
	border: none;
	padding: 0;
}

#InvoiceItemsTable td, #InvoiceItemsTable th,
#OfferItemsTable td, #OfferItemsTable th{
	border: 0;
}

#InvoiceItemsTable thead th, #InvoiceItemsTable tbody td,
#OfferItemsTable thead th, #OfferItemsTable tbody td{
	padding: 1px;
}

#InvoiceItemsTable .form-select, #OfferItemsTable .form-select{
	padding: 7px;
	font-size: 14px;
	height: 40px;
}

#InvoiceItemsTable .form-control, #OfferItemsTable .form-control{
	padding: 3px;
}

#InvoiceItemsTable input, #OfferItemsTable input {
	font-size: 14px;
}

#InvoiceItemsTable .select2-container--default .select2-selection--single .select2-selection__rendered,
#OfferItemsTable .select2-container--default .select2-selection--single .select2-selection__rendered{
	font-size: 14px;
}

.select2, .select2-container, .select2-container--default{
	width: 100%!important;
}


#InvoiceItemsTable input[type="number"], #OfferItemsTable input[type="number"] {
	text-align: right;
}

input:focus {
	border: 1px solid #007bff; /* Maintain the same thickness */
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Slightly larger blur, lower opacity */
}

#sendInvoiceToEmailsInput input[type="text"] {
	margin-top: 10px;
	font-size: 14px;
	height: 40px;
}

#issueInvoice .alert-danger {
	padding: 10px;
	color: white;
	background: linear-gradient(to right, #5a1100, #aa0000);
}

.collapse i.bi{
	margin-left: 30px;
}

.nav-item i.ms-auto{
	margin-right: -10px!important;
	float: right;
}

.g1{
	gap: 10px;
}

.g2{
	gap: 20px;
}

.g3{
	gap: 30px;
}

.form-check input {
	width: 20px;
	height: 20px;
}

.form-check label {
	font-size: 14px;
	font-weight: 500;
}

.form-check input[type="checkbox"]:checked {
	/*background-color: #0073e6;*/
}

.form-check input[type="checkbox"]:checked:after {
	content: '';
	display: block;
	width: 10px;
	height: 5px;
	position: absolute;
	top: 3px;
	left: 6px;
}


.form-check {
	display: flex;
	align-items: center;
	padding-left: 0;
}

.form-check input {
	margin-right: 10px;
}

.form-switch {
	padding-left: 2.5em;
	margin-bottom: 20px;
}

/* General styling for the nav pills */
.nav-pills .nav-link {
	color: #666; /* Inactive tab text color */
	background-color: #f8f9fa; /* Light background for inactive tabs */
	border: 1px solid transparent; /* Optional border */
	transition: all 0.3s ease;
}

.nav-pills .nav-link:hover {
	color: #333; /* Darker color on hover */
	background-color: #e2e6ea; /* Slightly darker background on hover */
}

/* Active tab styling */
.nav-pills .nav-link.active {
	color: #000; /* Dark text for active tab */
	background-color: #fff; /* White background for active tab */
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
	border-color: #ddd; /* Border for the active tab */
}

/* Adding margin to separate tabs */
.nav-pills .nav-item {
	margin-right: 5px;
}

.notificationsCounter {
	background-color: #ff0000;
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	width: 28px;
	right: -20px;
	top: 5px;
}


.course-question{
	margin-top: 20px;
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
}

.course-items{
	font-size: 15px;
}

.course-items b{
	font-weight: bold;
}

.vertical-tabs{
	font-size: 14px;
	border-bottom: none!important;
}

.vertical-tabs .nav-link{
	width: 100%;
	/*border: 0!important;*/
	border-radius: 0!important;
	/*
	border-bottom-left-radius: 20px!important;
	border-top-left-radius: 20px!important;

	 */
	/*border-top-right-radius: 0!important;*/
	text-align: left;
	color: #3e3e3e;
	font-weight: normal;
	border-right: 1px solid gray!important;

	margin-top: 1px;
	background: #f5f6ff;
}

.vertical-tabs button:hover{
	background: #f0f0f0;
	/* little darker border */
	border-bottom-left-radius: 5px!important;
	border-top-left-radius: 5px!important;
	border: 1px solid gray!important;
}

.vertical-tabs button.active{
	background: #f0f0f0;
	color: #3e3e3e!important;
	font-weight: bold;
	/* little darker border */
	border-bottom-left-radius: 5px!important;
	border-top-left-radius: 5px!important;
	border-top: 1px solid gray!important;
	border-bottom: 1px solid gray!important;
	border-left: 1px solid gray!important;
	border-right: none!important;
}

.vertical-tabs button.delimiter {
	border-bottom-left-radius: 5px !important;
	border-top-left-radius: 5px !important;
	border: 1px solid gray !important;
	background: linear-gradient(to right, #ffffff, #aaaaaa);
}

.tippy-box[data-animation="scale"] {
	transform: scale(1.4); /* Initial scale size */
	transition-timing-function: ease-out; /* Smooth easing */
}

.tippy-box[data-theme~='tomato'] {
	background-color: tomato;
	color: yellow;
}

.tippy-box[data-theme~='darkmode'] {
	background-color: #252525;
	color: white;
}

.dt-rowReorder-float-parent{
	/*display: none;*/
}

.modal .form-check .form-check-input{
	margin-left: 0px;
}

#myTable tr{
	cursor: pointer;
}

.badge{
	width: 110px;
	/* upper case */
	text-transform: uppercase;
}

.btn{
	border-radius: 5px;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
}

.bg-primary{
	background: linear-gradient(to right, #0073e6, #0059b3);
}

.bg-secondary{
	/* gray like success */
	background: linear-gradient(to right, #2d2d2d, #4d4d4d);
}

.bg-success{
	background: linear-gradient(to right, #2dd100, #1beb00);
}

.bg-danger{
	background: linear-gradient(to right, #d10000, #eb0000);
}

.bg-warning{
	background: linear-gradient(to right, #d1b800, #ebc100);
}

.bg-info{
	background: linear-gradient(to right, #00d1d1, #00ebeb);
}

.btn-primary{
	background: linear-gradient(to right, #0073e6, #0059b3);
	border: none;
}

.btn-primary:hover{
	background: linear-gradient(to right, #0059b3, #0073e6);
}

.btn-secondary{
	background: linear-gradient(to right, #2d2d2d, #4d4d4d);
	border: none;
}

.btn-secondary:hover{
	background: linear-gradient(to right, #4d4d4d, #2d2d2d);
}

.btn-success{
	background: linear-gradient(to right, #2dd100, #1beb00);
	border: none;
}

.btn-success:hover{
	background: linear-gradient(to right, #1beb00, #2dd100);
}

.btn-danger{
	background: linear-gradient(to right, #d10000, #eb0000);
	border: none;
}

.btn-danger:hover{
	background: linear-gradient(to right, #eb0000, #d10000);
}

.btn-warning{
	background: linear-gradient(to right, #d1b800, #ebc100);
	border: none;
}

.btn-warning:hover{
	background: linear-gradient(to right, #ebc100, #d1b800);
}

.btn-info{
	background: linear-gradient(to right, #00d1d1, #00ebeb);
	border: none;
}

.btn-info:hover{
	background: linear-gradient(to right, #00ebeb, #00d1d1);
}

.btn-outline-primary{
	color: #0073e6;
	border: 1px solid #0073e6;
}

.btn-outline-primary:hover{
	color: #fff;
	background: linear-gradient(to right, #0059b3, #0073e6);
}

.btn-outline-secondary{
	color: #2d2d2d;
	border: 1px solid #2d2d2d;
}

.btn-outline-secondary:hover{
	color: #fff;
	background: linear-gradient(to right, #4d4d4d, #2d2d2d);
}

.btn-outline-success{
	color: #2dd100;
	border: 1px solid #2dd100;
}

.btn-outline-success:hover{
	color: #fff;
	background: linear-gradient(to right, #1beb00, #2dd100);
}

.btn-outline-danger{
	color: #d10000;
	border: 1px solid #d10000;
}

.btn-outline-danger:hover{
	color: #fff;
	background: linear-gradient(to right, #eb0000, #d10000);
}

.btn-outline-warning{
	color: #d1b800;
	border: 1px solid #d1b800;
}

.btn-outline-warning:hover{
	color: #fff;
	background: linear-gradient(to right, #ebc100, #d1b800);
}

.btn-outline-info{
	color: #00d1d1;
	border: 1px solid #00d1d1;
}

.btn-outline-info:hover{
	color: #fff;
	background: linear-gradient(to right, #00ebeb, #00d1d1);
}

.text-left{
	text-align: left;
}

.pointer{
	cursor: pointer;
}

.card-text{
	font-size: 20px;
}

.request-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	transform: translate(50%, -50%);
	background-color: #dc3545;
	color: white;
	border-radius: 50%;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: bold;
}