.app-header { background: #fff;}

/*.modal {
z-index: 1100 !important;*/ /* Ensure this value is higher than the dropdown's z-index */
/*}*/

.dropdown-menu {
	z-index: 1000 !important; /* Typical z-index for dropdowns */
}

/* Adjust Select2 dropdown z-index */
.select2-container--open .select2-dropdown {
	z-index: 1051; /* Adjust this to be lower than your modal */
}

/*#components-reconnect-modal {
	display: none !important;
	}
	
	#blazor-error-ui {
	display: none !important;
}*/

.select2-container--bootstrap5 .select2-dropdown {
	background-color: white;
}

#json-container {
	width: 100%;
	margin: 20px auto;
	background-color: #000;
	padding: 20px;
	border-radius: 10px;
}

.copy-button {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 10px;
	cursor: pointer;
	background-color: #555;
	border: none;
	color: #fff;
	border-radius: 5px;
}

code {
	/*white-space: pre-wrap;*/
	font-family: 'Courier New', monospace;
	font-size: 14px;
	/*color: #00ff00;*/
}

/*.key {
color: #ff0000;*/ /* Red text */
/*}*/

.editorFullScreen {
	z-index: 10000000000000000000;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.editorTextFullScreen {
	height: 100% !important;
	width: 100% !important;
}

/*Start Krajee multiple upload*/
.file-footer-caption {
	display: none;
}

.btnHide {
	display: none;
}


/*User Control - image Upload Start*/
.kv-avatar .file-preview-frame, .kv-avatar .file-preview-frame:hover {
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
	text-align: center;
	width: 100%;
}

.kv-avatar .file-input {
	display: table-cell;
	width: 220px;
}

.kv-file-content {
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.kv-file-content img {
	width: auto !important;
	height: auto !important;
	max-height: 90px !important;
    max-width: 150px !important;
}

.kv-file-content embed {
	width: auto !important;
	height: auto !important;
	max-height: 90px !important;
	max-width: 150px;
}
/*User Control - image Upload End*/
/*[ctrl=ctl00_ContentPlaceHolder1_ucForm_UserGuide] .file-actions {
	display: none;
}*/
/*Start Payment Options*/
.grey-color-bg:first-of-type {
	margin-top: 0px;
}

.grey-color-bg {
	background-color: #ededed;
	display: inline-block;
	padding: 5px 0 10px 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	line-height: 20px;
	margin-top: 10px;
}
/*End Payment Options*/

/*QUICK View*/
.mobiledisplay {
	display: none;
}

.webdisplay {
	display: block;
}

@media (max-width: 767px) {
	.mobiledisplay {
		display: block;
	}
	
	.webdisplay {
		display: none;
	}
	#kt_app_header_container img.h-45px {
		max-width: 150px;
		height: auto !important;
	}
	.app-container {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	.content_main_default {
		padding-top: 5px;
	}
	.card .card-body {
		padding: 1.25rem;
	}
}

/*.lazy {
    opacity: 0;
    transition: opacity 1s;
}*/

.file-live-thumbs .link {
	display: none;
}

.file-live-thumbs .text-warning {
	display: none;
}

.file-live-thumbs .file-thumbnail-footer {
	height: auto !important;
}

.file-caption-icon, .file-input-ajax-new .fileinput-remove-button, .file-input-ajax-new .fileinput-upload-button, .file-input-ajax-new .no-browse .input-group-btn, .file-input-new .close, .file-input-new .file-preview, .file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button, .file-input-new .glyphicon-file, .file-input-new .no-browse .input-group-btn, .file-zoom-dialog .modal-header:after, .file-zoom-dialog .modal-header:before, .hide-content .kv-file-content, .is-locked .fileinput-remove-button, .is-locked .fileinput-upload-button, .kv-hidden {
	display: none;
}

.file-live-thumbs .file-actions {
	margin-top: 59px;
	min-width: 190px;
}

.btn-xs, .btn-group-xs > .btn {
	padding: 5px 5px;
	margin: 2px;
}

/*------------ Edit input-group -------------*/
.input-group span.d-none + input {
	border-top-left-radius: .475rem !important;
	border-bottom-left-radius: .475rem !important;
}

.input-group input:has(+ span.d-none) {
	border-top-right-radius: .475rem !important;
	border-bottom-right-radius: .475rem !important;
}

/*------------ Edit content style -------------*/
.edit-content, .hover-content {
	border: 1px solid transparent;
	border-radius: 1rem;
}

.edit-content:hover, .hover-content:hover {
	background-color: #eee;
}

.edit-content:focus, .hover-content:focus {
	border-color: var(--bs-primary);
	outline: none;
	background-color: #fff;
	padding: 0 5px;
	display: block;
}

.hover-content .edit-content, .edit-content.timeline-text {
	border: none;
}

.hover-content .edit-content:focus, .edit-content.timeline-text:focus {
	outline: none;
	background-color: transparent;
	padding: 0;
}

.hover-content {
	position: relative;
	padding-right: 40px;
}

.hover-content-delete {
	position: absolute;
	top: 0;
	right: 0;
}

.hover-content:hover .hover-content-delete {
	display: block;
}

/*---------tooltips------------*/
.popover {
	max-width: none; /* Remove max-width limit */
	width: auto; /* Adjust width based on content */
}

.popover-body {
	user-select: text; /* Allow text selection inside popover */
}

.bi.tooltipHTML {
	cursor: pointer !important;
}

@media (max-width: 767px) {
	.popover {
		max-width: 96%; /* Remove max-width limit */
		width: 96%; /* Adjust width based on content */
	}
}

/* Start Nestable or Draggable Listing */
.dd-list .dd-item .dd-collapse, .dd-expand {
	display: none !important; /* Hides both the collapse (-) and expand (+) buttons provided by nestable */
}

.expand-collapse-btn {
	margin-right: 10px; /* Add space between button and right content */
}

.expand-icon, .collapse-icon {
	display: inline-block;
	width: 20px; /* Adjust size as needed */
	height: 20px; /* Adjust size as needed */
	line-height: 19px; /* Vertically align text/icons */
	text-align: center;
	cursor: pointer;
	border-radius: 50%; /* Circular button */
	background-color: #f0f0f0; /* Soft background color */
	color: #333; /* Icon color */
	font-size: 16px; /* Icon size */
	transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover and animation */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for a 3D effect */
}

/* Hover effect */
.expand-icon:hover, .collapse-icon:hover {
	background-color: #3e97ff; /* Change background on hover (you can adjust color) */
	color: #fff; /* White icon color on hover */
	transform: scale(1.1); /* Slightly increase the size on hover */
}

/* Active or focused state */
.expand-icon:active, .collapse-icon:active {
	background-color: #3e97ff; /* Darker shade on click */
	transform: scale(0.95); /* Slightly shrink when clicked */
}

/* End Nestable or Draggable Listing */

/*----------- to adjust the filter listing page alignment --------------*/
[id^="_GenericPage_PagePanel_"][id$="_SearchForm"].card-header {
	border-bottom: none;
}
/*[id^="_GenericPage_PagePanel_"][id$="_SearchForm"] + .d-flex {
	padding-left: 2.25rem; padding-right: 2.25rem;
	}
[id^="divBody__GenericPage_PagePanel_"] { padding-left: 2.25rem; padding-right: 2.25rem;}*/

.content-inner-button { padding: .75rem 0; }
.content-inner-button + .card-body { padding-top: 0 !important; }
.multitab-wrapper {  padding: 1.25rem 2.25rem;}
.multitab-wrapper .form.card-header { padding: 0 !important;}
.multitab-wrapper .content-inner-button { padding: .75rem 0;}
.search-criteria + .table_footer, .search-criteria + .dataTables_wrapper { margin-top: .75rem !important;}

/*---------- adjust side menu padding ---------*/
.menu-item .menu-link { padding: .45rem 1rem;}

@media (min-width: 992px) {
	.app-header-menu .app-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/*------ Filter Accordion Style ---------*/

.search-criteria .accordion-button:not(.collapsed) { border: 1px solid var(--bs-primary); border-bottom: 0;}
.search-criteria .accordion-button { border: 1px solid var(--bs-primary);}
.search-criteria .accordion-collapse { border: 1px solid var(--bs-primary); border-top: 0;}
.search-criteria .accordion-button { color: var(--bs-primary);}

/*------ Avatar Upload ---------*/
.custom-file-upload {
	position: relative;
	width: 90px;
	height: 90px;
}

.image-preview-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background: white;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
}

.image-preview {
	width: 90%;
	height: 90%;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
}

.edit-btn, .remove-btn {
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	border: none;
	outline: none;
}

.edit-btn {
	top: -5px;
	right: -5px;
}

.remove-btn {
	bottom: -5px;
	right: -5px;
}

.edit-btn i, .remove-btn i {
	font-size: 12px;
	color: gray;
}

.file-input .btn-file {
	padding: 0.5rem 1rem;
}
.file-input .btn > i {
	font-size: 1.2rem;
	padding-right: 0;
}

/*------ Filter Dropdown Username ---------*/
#kt_header_user_menu_toggle .menu-sub-dropdown .d-flex.flex-column .fs-5 { word-break: break-all;}


/*------ Border Hover ---------*/
.border-hover-primary:hover { border: 1px solid var(--bs-primary);}
.border-hover-success:hover { border: 1px solid var(--bs-success);}
.border-hover-warning:hover { border: 1px solid var(--bs-warning);}
.border-hover-danger:hover { border: 1px solid var(--bs-danger);}
.border-hover-info:hover { border: 1px solid var(--bs-info);}

/*------ required ---------*/
.required:after {
	content: "" !important;
	padding: 0 !important;
}
.required > div:first-child:after {
	content: "*";
	position: relative;
	font-size: inherit;
	color: var(--bs-danger);
	padding-left: 0.25rem;
	font-weight: 600;
}

/*------ disable pointer-event for icon when it in hyperlink ---------*/
a i {
	pointer-events: none !important;
}

/*------ toolbar_search ---------*/
.toolbar_search .fv-plugins-message-container.invalid-feedback {
	position: absolute;
	bottom: -17px;
	font-size: 0.75rem !important;
}
.toolbar_search .row.mb-5, .toolbar_search .row.mb-3 {
	margin-bottom: 0 !important;
	padding-right: 5px;
}
.toolbar_search .input-group > input {
	border-left: 0 !important;
}

/*------ toolbar_search ---------*/
table.dataTable {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/*------ for slider ---------*/
.slider {
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 5px;
	outline: none;
	background: linear-gradient(to right, #00C29F 0%, #00C29F var(--progress, 50%), #ddd var(--progress, 50%), #ddd 100%);
	transition: background 0.15s ease-in-out;
}

.slider::-webkit-slider-thumb {
	appearance: none;
	width: 12px;
	height: 12px;
	background: #00C29F;
	border-radius: 50%;
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	background: #00C29F;
	border-radius: 50%;
	cursor: pointer;
}

.flatpickr-calendar {
	min-width: 500px; /* Adjust width as needed */
}

/*---------- File Upload Style-----------*/
.file-preview {
	border: 1px dashed var(--bs-primary) !important;
	background-color: var(--bs-primary-light) !important;
	border-radius: .475rem !important;
}
.file-drop-zone { 
	border: 1px dashed var(--bs-primary) !important; 
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 150px !important;
	flex-wrap: wrap;
}
.file-drop-zone-title {
	color: #4B5675 !important;
	font-size: 1.2rem !important;
	padding: 10px !important;
	font-weight: 500 !important;
}
.file-drop-zone-title:before {
	content: "\ea14";
	font-family: keenicons-outline !important;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	display: block;
	color: var(--bs-primary);
	font-size: 3.25rem;
	opacity: 0.7;
}
.file-preview-thumbnails { justify-content: center;  display: flex;}
.krajee-default.file-preview-frame { 
	border: 1px solid #ccc !important;  
	box-shadow: 0 0 10px 0 rgba(0,0,0,.05) !important; 
	border-radius: 10px !important; 
	background-color: #fff !important;
}
.krajee-default .file-footer-caption { margin-bottom: 5px !important;}
.krajee-default.file-preview-frame .kv-file-content { width: 160px !important; height: 100px !important;}

/*---------- Modal form adjustment -----------*/
.modal-body .form { padding-left: 0.75rem; padding-right: 0.75rem;}


/*-------- Calendar -----------*/

.flatpickr-day:focus,.flatpickr-day:hover{
	background:#eee !important;
	border-color:#eee !important;
}
.flatpickr-day.today {
	background:#eee !important;	
}

/*------------ text --------------*/
.text-primary i {
	color: var(--bs-text-primary) !important;
}
.text-success i {
	color: var(--bs-text-success) !important;
}
.text-warning i {
	color: var(--bs-text-warning) !important;
}
.text-danger i {
	color: var(--bs-text-danger) !important;
}
.text-info i {
	color: var(--bs-text-info) !important;
}

@media (min-width: 1600px) {
	.col-xxxl {
		flex: 1 0 0%;
	}
	.row-cols-xxxl-auto > * {
		flex: 0 0 auto;
		width: auto;
	}
	.row-cols-xxxl-1 > * {
		flex: 0 0 auto;
		width: 100%;
	}
	.row-cols-xxxl-2 > * {
		flex: 0 0 auto;
		width: 50%;
	}
	.row-cols-xxxl-3 > * {
		flex: 0 0 auto;
		width: 33.3333333333%;
	}
	.row-cols-xxxl-4 > * {
		flex: 0 0 auto;
		width: 25%;
	}
	.row-cols-xxxl-5 > * {
		flex: 0 0 auto;
		width: 20%;
	}
	.row-cols-xxxl-6 > * {
		flex: 0 0 auto;
		width: 16.6666666667%;
	}
	.col-xxxl-auto {
		flex: 0 0 auto;
		width: auto;
	}
	.col-xxxl-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}
	.col-xxxl-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}
	.col-xxxl-3 {
		flex: 0 0 auto;
		width: 25%;
	}
	.col-xxxl-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}
	.col-xxxl-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}
	.col-xxxl-6 {
		flex: 0 0 auto;
		width: 50%;
	}
	.col-xxxl-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}
	.col-xxxl-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}
	.col-xxxl-9 {
		flex: 0 0 auto;
		width: 75%;
	}
	.col-xxxl-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}
	.col-xxxl-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}
	.col-xxxl-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* Datatable Start */
.datatable-hide-before-draw {
	visibility: hidden;
}

div.dataTables_processing, div.dataTables_wrapper div.dataTables_processing {
	background-color: rgba(42, 42, 60, 0.1);
	border-radius: 0.475rem;
	padding-top: 1rem !important;
	color: var(--bs-gray-700);
	font-weight: 600;
	font-size: 15px;
	margin: 1rem !important;
	width: auto;
	padding: 1rem 2rem !important;
	transform: translateX(-50%) translateY(-50%);
	z-index: 9999;
}

div.dataTables_processing > div:last-child > div {
	background: rgba(80, 205, 137, 0.9);
}



.modal-body .scroll-y > .row.g-7 { margin: 0 !important;}
.modal-body .scroll-y > .row.g-7 > div[class*="col-"] { margin: 0 !important; padding: 0 !important;}
.modal-body .scroll-y > .row.g-7 > div[class*="col-"] > .card.card-flush.mb-5 {
	border: none;
	padding: 0;
	box-shadow: none;
	margin: 0 !important;
}

div.dataTables_wrapper div.dataTables_info {
	padding-top: 1rem;
}
div.dataTables_length + div.dataTables_info {
	margin-left: 0;
}
div.dataTables_wrapper div.dataTables_length {
	padding: 1rem;
}
div.dataTables_wrapper div.dataTables_length label {
	color: var(--bs-gray-700);
	font-weight: 500;
}
div.dataTables_wrapper .table-responsive + .row {
	justify-content: space-between;
}
div.dataTables_wrapper .table-responsive + .row > .col-sm-12.col-md-5 {
	width: auto;
	flex-wrap: wrap;
}
div.dataTables_wrapper .table-responsive + .row > .col-sm-12.col-md-7 {
	width: auto;
}
@media (max-width: 768px) {
	div.dataTables_wrapper .table-responsive + .row {
		justify-content: center;
	}
}

table.dataTable td.dataTables_empty {
    text-align: center;
    padding: 40px 0 !important;
    font-size: 16px;
    opacity: 0.8;
	
    /* FORCE full width */
    width: 100%;
}

table.dataTable td.dataTables_empty[colspan] {
    display: table-cell;
}

table.dataTable tbody tr td.dataTables_empty {
    grid-column: 1 / -1; /* in case datatables wrapper uses grid */
}

div.dataTables_processing div,
div.dataTables_processing div div,
div.dataTables_processing .dt-pulse,
div.dataTables_processing .dt-processing,
div.dataTables_processing .dt-pulse:nth-child(1),
div.dataTables_processing .dt-pulse:nth-child(2),
div.dataTables_processing .dt-pulse:nth-child(3) {
	background: none !important;
	box-shadow: none !important;
	animation: none !important;
}

/*div.dataTables_processing {
	background-color: rgba(0,0,0,0.5) !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: bold;
	border-radius: 10px;
	padding: 15px 25px !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
	position: absolute !important;
	z-index: 9999;
}*/

div.dataTables_processing {
	background-color: rgba(0,0,0,0.5) !important;
	/*display: inline-flex !important;*/
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 50px !important;
	min-height: unset !important;
	max-height: unset !important;
	padding: 15px 25px !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
	position: absolute !important;
	z-index: 9999;
}
/* Datatable End */


.generic-image-wrapper {
	width: 80px; 
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.generic-image {
	width: 100%; /* responsive */
	height: auto;
	max-height: 60px;
	object-fit: contain;
	display: block;
}

/* HelpDoc Start */
#kt_helpdoc_body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.helpdoc-scroll {
	overflow-y: auto;
	flex: 1 1 auto;
}

.helpdoc-scroll pre {
	overflow: visible !important;
	max-height: none !important;
}

.helpdoc-scroll code {
	white-space: pre-wrap !important;
	word-break: break-word !important;
}

.highlight-code {
	overflow: visible !important;
	max-height: none !important;
}

.helpdoc-scroll::-webkit-scrollbar {
	width: 8px;
}

.helpdoc-scroll::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}

.helpdoc-menu-scroll {
	overflow-y: auto !important;
	height: 100%;
}

.helpdoc-menu-scroll::-webkit-scrollbar {
	width: 8px;
}

.helpdoc-menu-scroll::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 4px;
}

.json-tab-btn {
	font-weight: 600;
	color: #0d6efd;
	background: rgba(255, 255, 255, 0.05);
	padding: 6px 14px;
	border-radius: 8px;
	border: 1px solid transparent;
	transition: all 0.2s ease;
}

.json-tab-btn.active {
	background: #0d6efd;
	color: white;
	border-color: #0d6efd;
	box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.3);
}

.json-tab-btn:not(.active):hover {
	background: rgba(255, 255, 255, 0.15);
}

.storedproc-tab-btn {
	font-weight: 600;
	color: #0d6efd;
	background: rgba(255, 255, 255, 0.05);
	padding: 6px 14px;
	border-radius: 8px;
	border: 1px solid transparent;
	transition: all 0.2s ease;
}

.storedproc-tab-btn.active {
	background: #0d6efd;
	color: white;
	border-color: #0d6efd;
	box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.3);
}

.storedproc-tab-btn:not(.active):hover {
	background: rgba(255, 255, 255, 0.15);
}

#HelDoc_Menu .menu-link.active {
	background: #e9f3ff !important;
	color: #0d6efd !important;
	border-radius: 6px;
	font-weight: 700;
}

#HelDoc_Menu .menu-link.active .menu-bullet .bullet-dot {
	background-color: #0d6efd;
}

.loading-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
	backdrop-filter: blur(2px);
}

.search-result-panel {
	max-height: 250px;
	overflow-y: auto;
	border-radius: 6px;
}

.search-result-item {
	cursor: pointer;
	border-bottom: 1px solid #f1f1f1;
}

.search-result-item:hover {
	background: #f5f8fa;
}

.flash-highlight {
	background-color: #fff3cd !important;
	transition: background-color 0.5s ease;
}
/* HelpDoc End */

.listing-column-toggle-wrapper {
	display: inline-block !important;
	width: auto !important;
}