.dt-entity-id {
	width: 90px !important;
	max-width: 90px !important;
	min-width: 90px !important;
	text-align: left !important;
}

@media (max-width: 768px) {
	.dt-entity-id
	{
		width: 60px !important;
		max-width: 60px !important;
		min-width: 60px !important;
		text-align: left !important;
	}
}

.dt-force-word-wrap {
	word-break: break-word;
	word-wrap: break-word;
}

.donorbureau-common-ui-environment-header,
.donorbureau-common-ui-environment-header-warning {
	background-color: lightsteelblue;
	text-align: center;
	font-weight: bold;
	font-size: 0.8em;
}

.donorbureau-common-ui-environment-header-warning {
	background-color: yellow;
}

.donorbureau-common-ui .modal-header {
	padding: 0.25em 1em
}

.donorbureau-common-ui .modal-xl {
	max-width: 95%;
}

.donorbureau-common-ui .modal-body {
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}

.donorbureau-common-ui .processing-log-status-error {
	color: red;
}

.donorbureau-common-ui .processing-log-status-success {
	color: green;
}

.donorbureau-common-ui .processing-log-status-running {
	color: blue;
}

/* The following was ripped from Bootstrap 5 - we are not ready to migrate but wanted the checkbox switch */
.form-switch {
	padding-left: 2.5em;
}

.form-check {
	display: block;
	min-height: 1.5rem;
	padding-left: 1.5em;
	margin-bottom: 0.125rem;
}

.form-switch .form-check-input {
	font-size: 1.5em !important;
	width: 2em;
	margin-left: -2.5em;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(0, 0, 0, 0.25)'/></svg>");
	background-position: left center;
	border-radius: 2em !important;
	transition: background-position .15s ease-in-out;
}

.form-switch .form-check-input:checked {
	background-position: right center;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(255, 255, 255, 1)'/></svg>");
}

.form-check-input[type=checkbox] {
	border-radius: 0.25em;
}

.form-check .form-check-input {
	float: left;
	margin-left: -1.0em;
}

.form-check-input {
	width: 1em;
	height: 1em;
	margin-top: 0.25em;
	vertical-align: top;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border: 1px solid rgba(0,0,0,.25);
	-webkit-appearance: none;
	-moz-appearance: none;
	-appearance: none;
	-webkit-print-color-adjust: exact;
	color-adjust: exact;
}

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

/* Force the Processing... message on full screen datatables to be in the visible area */
#indexTable_wrapper .dt-processing {
	position: fixed !important;
	top: 50% !important;
}

/* CodeMirror editor*/
.CodeMirror {
	font-size: 0.8em;
	resize: vertical;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* DataTablesTreeView Plugin */

.dt-tree-group td {
	background-color: #f0f0f0 !important;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.dt-tree-group:hover td {
	background-color: #e4e4e4 !important;
}

.dt-tree-toggle {
	display: inline-block;
	width: 1em;
	text-align: center;
	margin-right: 4px;
	font-size: 0.85em;
}

.dt-tree-child-count {
	color: #999;
	font-weight: normal;
	font-size: 0.9em;
	margin-left: 6px;
}

.dt-tree-indent {
	display: inline-block;
	flex-shrink: 0;
}

/* Force the column selector buttons to be slightly more obvious */
.dt-button-active {
	background-color: #eeeeee;
}

.whats-this-wrapper {
	position: relative;
	display: inline-block;
	cursor: pointer;
	margin-left: 8px;
	float: right;
}

.whats-this-wrapper-heading {
	float: none !important;
}

.whats-this-icon {
	color: #6c757d; 
	transition: color 0.3s ease;
}

.whats-this-icon:hover {
	color: #007bff; 
}

.whats-this-popover {
	min-width: 70vw;
	max-height: 600px;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: lightgoldenrodyellow;
}

@media (min-width: 1200px) {
	.whats-this-popover {
		min-width: 800px !important;
	}
}

.text-muted pre { 
	color: inherit; 
}

.btn-keep-visible-float {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 12px 17px;
	border-radius: 50%;
	border: none;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	opacity: 0.6;
}

.btn-keep-visible-float:hover {
	opacity: 1.0;
}

/* Security rule input styling */
.btn-securityrule {
	border-color: #ced4da;
	background-color: #fff;
	color: #6c757d;
}

.btn-securityrule:hover {
	border-color: #adb5bd;
	background-color: #f8f9fa;
	color: #495057;
}

.btn-securityrule:focus {
	border-color: #80bdff;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Fix Bootstrap 4 validation icon overlap issues with select elements */

/* Remove validation icons from regular form-control selects */
select.form-control.is-invalid,
select.form-control.is-valid {
	background-image: none !important;
	padding-right: 0.75rem !important; /* Reset padding to normal */
}

/* Remove validation icons from custom-select elements */
.custom-select.is-invalid,
.custom-select.is-valid,
.was-validated .custom-select:invalid,
.was-validated .custom-select:valid {
	/* Keep only the dropdown arrow, remove validation icon */
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px !important;
	padding-right: 2.25rem !important; /* Only account for dropdown arrow */
}

/* Remove validation icons from multiple selects entirely */
select[multiple].form-control.is-invalid,
select[multiple].form-control.is-valid,
select[multiple].custom-select.is-invalid,
select[multiple].custom-select.is-valid {
	background-image: none !important;
	padding-right: 0.75rem !important;
}

[v-cloak] {
	opacity: 0; /* Make hidden but don't remove real-estate that the object takes (display: none also breaks the v-slide) */
}

/* Bootstrap-style Radio Button styling */

.custom-radio {
	appearance: none;
	width: 16px;
	height: 16px;
	border: 2px solid #6c757d;
	border-radius: 50%;
	background-color: white;
	cursor: pointer;
	position: relative;
	transition: all 0.2s ease;
}

.custom-radio:hover {
	border-color: #0056b3;
	box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.1);
}

.custom-radio:checked {
	background-color: #6c757d;
	border-color: #6c757d;
}

.custom-radio:checked::after {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}