.clickMe {
	cursor: pointer;
}

.form-floating > label {
	text-overflow: initial;
}

.form-control:disabled, .form-select:disabled, .form-floating > :disabled ~ label:after {
	background-color: initial !important;
}
	
.form-check-input:disabled ~ .form-check-label {
	opacity: 1;
}

.validation-summary-errors ul {
	margin: 0;
	list-style-type: none;
}

div.required > label:after, .input-group.required .input-group-text:after {
	color: red;
	font-family: 'FontAwesome';
	font-weight: normal;
	font-size: 8px;
	content: "\f069" !important;
	position: relative !important;
	top: -5px !important;
	left: 3px !important;
}

.accordion-button:disabled::after {
	background-image: none;
}

/*https://stackoverflow.com/questions/66863242/bootstrap-5-floating-label-for-a-textarea-overlaps-with-input-on-scroll/67334114#67334114*/
/*https://github.com/twbs/bootstrap/issues/37539*/
.form-floating:has(textarea)::before {
	content: '';
	position: absolute;
	top: 1px;
	left: 10px;
	width: calc(100% - 50px); /* to show scrollbar */
	height: 28px;
}

@media screen and (max-width: 767px) {
	.dt-paging-button:has(.first) {
		display: none;
	}

	.dt-paging-button:has(.last) {
		display: none;
	}
}