@media ( min-width : 1280px) {
	.modal .va-modal-panel.modal-dialog.modal-xlg {
		width: 1200px;
	}
}

.va-modal-panel .modal-content {
	border: 1px solid #999;
	overflow: visible;
}

/* This is to fix mobile scrolling issues
 * NOTE: it is a bit of a cheat to use this technique - it would be better to always have the "overflow-y: auto" on ".va-modal-panel .modal-content" but
 * out current vachoice dropdown forces the modal to scroll which is nasty */
@media ( hover : none), ( pointer : coarse ) {
	.va-modal-panel .modal-content {
		overflow-y: visible;
	}
}

.va-modal-panel.modal-dialog .modal-content .modal-body .va-modal-content:has(.va-table) {
	overflow-x: auto;
}

.va-modal-panel .modal-header {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	background-color: var(--header-background-color, #35263c);
}

.va-modal-panel .modal-header .va-modal-title {
	display: block;
	font-family: inherit;
	font-weight: bold;
	font-size: 1.5em;
	color: var(--header-text-color, #ffffff);
	text-rendering: optimizelegibility;
}

.va-modal-panel .modal-header .va-close {
	margin-top: -8px;
	text-shadow: none;
	color: var(--modal-close-button-color, #ffffff);
	opacity: 1;
	font-size: 30px;
}

.va-modal-panel .modal-body {
	margin: 15px;
	padding: 0;
}

.va-modal-panel .modal-body .va-feedback {
	top: 0;
	margin: -15px;
}