body {
}

/* Custom css to make the label background fit the container background */
.mud-background-gray {
	--mud-palette-surface: var(--mud-palette-background-gray);
}

/* Custom css to avoid tooltip offsetting the button group */
.uicrafter-tooltip-buttongroup > .mud-tooltip-root {
	display: inline-flex;
}

/* Custom css to align switch left despite LabelPosition = start */
.uicrafter-switch .mud-switch.flex-row-reverse {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	margin-left: unset;
}

/* Custom css to make the switch-track changed color when its active */
/* Style utilizes that .mud-switch-base gains .mud-checked when its toggled on */
.uicrafter-switch .mud-switch-base.mud-checked + .mud-switch-track {
	background-color: var(--mud-palette-primary);
}

/* Custom css to remove standard padding & margin in a dialog */
.uicrafter-dialog .mud-dialog-content {
	margin: 0px;
	padding: 0px;
}

.center-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.center-loading-fixed {
	position: fixed;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.uicrafter-preview-container {
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	height: 100%;
	width: 100%;
}

	.uicrafter-preview-container .top,
	.uicrafter-preview-container .middle,
	.uicrafter-preview-container .bottom {
		overflow: scroll;
	}

.uicrafter-preview-flex-grow,
.uicrafter-preview-flex-grow > .mud-input-control-input-container,
.uicrafter-preview-flex-grow > .mud-input-control-input-container > .mud-input {
	flex-grow: 1;
}


.uicrafter-preview-pre {
	height: 100%;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.responsive-youtube-iframe {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

	.responsive-youtube-iframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}