#main-app>.card {
	border: 0 !important;
}

#main-app>.card>.card-header {
	border-radius: 0 !important;
}

.loading-spinner {
	animation: spin 2s infinite linear;
}

.text-dim {
	color: #cccccc;
}

.mh-300 {
	max-height: 300px;
}

.mh-400 {
	max-height: 400px;
}

.mh-500 {
	max-height: 500px;
}

.mh-700 {
	max-height: 700px;
}

.mh-30vh {
	max-height: 30vh;
}

.mh-40vh {
	max-height: 40vh;
}

.mh-50vh {
	max-height: 50vh;
}

.mh-60vh {
	max-height: 60vh;
}

.mh-70vh {
	max-height: 70vh;
}

.mh-80vh {
	max-height: 80vh;
}

.mh-90vh {
	max-height: 90vh;
}

.mh-100vh {
	max-height: 100vh;
}

.cursor-pointer {
	cursor: pointer;
}

.spinner {
	position: fixed;
	z-index: 1031;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.border-radius-2rem {
	border-radius: .2rem;
}

.overflow-y-auto {
	overflow-y: auto;
}

.mh-70vh {
	max-height: 70vh;
}

.mh-60vh {
	max-height: 60vh;
}

.card:has(input:focus, textarea:focus, select:focus, button:focus) {
	border-color: #007bff;
}

.btn-xs {
	padding: .20rem .4rem;
	font-size: .7rem;
	line-height: 1.5;
}

.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 577px) {
	.w-xs-100 {
		width: 100% !important;
	}
}

/* #region BS5 gap classes */
.gap-0 {
	gap: 0 !important;
}

.gap-1 {
	gap: 0.25rem !important;
}

.gap-2 {
	gap: 0.5rem !important;
}

.gap-3 {
	gap: 1rem !important;
}

.gap-4 {
	gap: 1.5rem !important;
}

.gap-5 {
	gap: 3rem !important;
}
/* #endregion */

/*
* Split Action Classes
* The split doesn't look good at mobile, so we don't apply the split classes there
*/
@media (min-width: 992px) {
	.split-cards-vertical {
		display: flex;
		flex-direction: column;
	}

	.split-cards-horizontal {
		display: flex;
		flex-direction: row;
	}

	.split-cards-horizontal>.card:not(:last-child) {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.split-cards-horizontal>.card:not(:first-child) {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	.split-cards-vertical>.card:not(:last-child) {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.split-cards-vertical>.card:not(:first-child) {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.gutter {
		background-color: rgb(var(--bs-secondary-bg-rgb));
		background-repeat: no-repeat;
		background-position: 50%;
		border-top: 1px solid rgba(0, 0, 0, 0.125);
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	}

	.gutter.gutter-horizontal {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
		cursor: col-resize;
	}

	.gutter.gutter-vertical {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
		cursor: row-resize;
	}
}

@media (max-width:991.9px) {
	.split-cards-vertical>.card {
		width: 100% !important;
	}

	.split-cards-horizontal>.card {
		width: 100% !important;
	}
}

.row {
	/* 10px is equivalent to BS4's form-row */
	--bs-gutter-x: 10px;
}

.card .list-group-item-action {
	color: var(--bs-card-color);
}

.form-control[readonly] {
	background-color: var(--bs-secondary-bg);
	opacity: 1;
}