/*
 * Miva Merchant
 *
 * This file and the source codes contained herein are the property of
 * Miva, Inc.  Use of this file is restricted to the specific terms and
 * conditions in the License Agreement associated with this file.  Distribution
 * of this file or portions of this file for uses not covered by the License
 * Agreement is not allowed without a written agreement signed by an officer of
 * Miva, Inc.
 *
 * Copyright 1998-2026 Miva, Inc.  All rights reserved.
 * http://www.miva.com
 *
 */

.mm_runtimebranchpreview_datepicker_background
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(15, 22, 38, 0.7);
	display: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2147483646;
}

.mm_runtimebranchpreview_datepicker_dialog
{
	position: fixed;
	display: none;
	top: 50%;
	left: 50%;
	width: 595px;
	height: auto;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	z-index: 2147483647;

	.mm_runtimebranchpreview_datepicker_container
	{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: var(--mm-dialog-radius);
		overflow: hidden;
		box-shadow: var(--mm-dialog-shadow);
		box-sizing: border-box;
	}

	.mm_runtimebranchpreview_datepicker_content_container
	{
		position: relative;
		display: flex;
		margin: 0;
		width: 100%;
		height: 100%;
		flex-direction: column;
		background: var(--mm-dialog-background-color);
		box-sizing: border-box;
		overflow: hidden;
	}

	.mm_runtimebranchpreview_datepicker_header
	{
		position: relative;
		display: flex;
		align-items: start;
		justify-content: space-between;
		flex-shrink: 0;
		overflow: hidden;
	}

	.mm_runtimebranchpreview_datepicker_top_controls
	{
		display: inline-flex;
		margin-right: 12px;
		align-items: center;
		flex-shrink: 0;

		.mm9_skinned_dialog_container &
		{
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	.mm_runtimebranchpreview_datepicker_top_control_button_close
	{
		position: relative;
		display: inline-flex;
		vertical-align: middle;
		margin: 12px 0 0 4px;
		padding: 0;
		width: var(--mm-dialog-top-controls-button-dimension);
		height: var(--mm-dialog-top-controls-button-dimension);
		line-height: 1;
		background-color: var(--mm-dialog-top-controls-button-close-background-color);
		border: var(--mm-dialog-top-controls-button-border);
		border-radius: var(--mm-dialog-top-controls-button-radius);
		box-shadow: var(--mm-dialog-top-controls-button-shadow);
		align-items: center;
		justify-content: center;
		transition: background-color 0.2s linear, border-color 0.2s linear, box-shadow 0.2s linear;
		box-sizing: border-box;
		overflow: hidden;
		cursor: pointer;
		outline: var(--mm-dialog-top-controls-button-outline);
		outline-offset: var(--mm-dialog-top-controls-button-outline-offset);
		user-select: none;

		&.disabled
		{
			cursor: default;
		}

		.mm9_button_image,
		.mm9_button_text,
		.mm9_button_title,
		.mm9_button_title_tooltip,
		.mm9_button_error_icon
		{
			display: none;
		}

		.mm9_button_custom
		{
			display: inline-flex;
			width: var(--mm-dialog-top-controls-button-dimension);
			height: var(--mm-dialog-top-controls-button-dimension);
			align-items: center;
			justify-content: center;
		}

		svg
		{
			width: var(--mm-dialog-top-controls-button-dimension);
			height: var(--mm-dialog-top-controls-button-dimension);
		}

		.mm10_svg_icon_color
		{
			fill: var(--mm-dialog-top-controls-button-close-color);
		}

		&.focus
		{
			--mm-dialog-top-controls-button-close-background-color: var(--mm-dialog-top-controls-button-close-background-color--focus);
			--mm-dialog-top-controls-button-border: var(--mm-dialog-top-controls-button-border--focus);
			--mm-dialog-top-controls-button-shadow: var(--mm-dialog-top-controls-button-shadow--focus);

			.mm10_svg_icon_color
			{
				--mm-dialog-top-controls-button-close-color: var(--mm-dialog-top-controls-button-close-color--focus);
			}
		}

		&.focus:not(.click-focus)
		{
			--mm-dialog-top-controls-button-outline: var(--mm-dialog-top-controls-button-outline--focus);
		}

		&:hover
		{
			--mm-dialog-top-controls-button-close-background-color: var(--mm-dialog-top-controls-button-close-background-color--hover);
			--mm-dialog-top-controls-button-border: var(--mm-dialog-top-controls-button-border--hover);
			--mm-dialog-top-controls-button-shadow: var(--mm-dialog-top-controls-button-shadow--hover);

			.mm10_svg_icon_color
			{
				--mm-dialog-top-controls-button-close-color: var(--mm-dialog-top-controls-button-close-color--hover);
			}
		}

		&.active
		{
			--mm-dialog-top-controls-button-close-background-color: var(--mm-dialog-top-controls-button-close-background-color--active);
			--mm-dialog-top-controls-button-border: var(--mm-dialog-top-controls-button-border--active);
			--mm-dialog-top-controls-button-shadow: var(--mm-dialog-top-controls-button-shadow--active);

			.mm10_svg_icon_color
			{
				--mm-dialog-top-controls-button-close-color: var(--mm-dialog-top-controls-button-close-color--active);
			}
		}

		&.disabled
		{
			--mm-dialog-top-controls-button-close-background-color: var(--mm-dialog-top-controls-button-close-background-color--disabled);
			--mm-dialog-top-controls-button-border: var(--mm-dialog-top-controls-button-border--disabled);
			--mm-dialog-top-controls-button-shadow: var(--mm-dialog-top-controls-button-shadow--disabled);

			.mm10_svg_icon_color
			{
				--mm-dialog-top-controls-button-close-color: var(--mm-dialog-top-controls-button-close-color--disabled);
			}
		}
	}

	.mm_runtimebranchpreview_datepicker_title_container
	{
		display: block;
		flex-grow: 1;
		overflow: hidden;
		cursor: default;
	}

	.mm_runtimebranchpreview_datepicker_title
	{
		--mm-text-color: var(--mm-color-900);
		--mm-text-font-family: var(--mm-typography-display-6-font-family);
		--mm-text-font-size: var(--mm-typography-display-6-font-size);
		--mm-text-font-style: var(--mm-typography-display-6-font-style);
		--mm-text-font-weight: var(--mm-typography-display-6-font-weight);
		--mm-text-line-height: var(--mm-typography-display-6-line-height);
		--mm-text-letter-spacing: var(--mm-typography-display-6-letter-spacing);

		padding: 24px 24px 8px;
	}

	.mm_runtimebranchpreview_datepicker_subtitle
	{
		--mm-text-color: var(--mm-color-600);
		--mm-text-font-family: var(--mm-typography-paragraph-large-font-family);
		--mm-text-font-size: var(--mm-typography-paragraph-large-font-size);
		--mm-text-font-style: var(--mm-typography-paragraph-large-font-style);
		--mm-text-font-weight: var(--mm-typography-paragraph-large-font-weight);
		--mm-text-line-height: var(--mm-typography-paragraph-large-line-height);
		--mm-text-letter-spacing: var(--mm-typography-paragraph-large-letter-spacing);

		position: relative;
		display: block;
		padding: 0 24px 24px 24px;
	}

	.mm_runtimebranchpreview_datepicker_content
	{
		position: relative;
		display: block;
		margin: 0;
		width: 100%;
		box-sizing: border-box;
		overflow: auto;
		flex-grow: 1;
	}

	.mm_runtimebranchpreview_datepicker_content_body
	{
		padding: 6px 24px;
	}

	.mm_runtimebranchpreview_datepicker_actionbar
	{
		position: relative;
		display: flex;
		padding: 24px;
		white-space: nowrap;
		justify-content: flex-end;
		align-items: center;
		overflow: hidden;
		flex-shrink: 0;
		column-gap: 8px;
	}

	.mm_runtimebranchpreview_datepicker_action_button
	{
		position: relative;
		display: var(--mm-button-display);
		vertical-align: middle;
		padding: var(--mm-button-padding-top-bottom) var(--mm-button-padding-left-right);
		height: var(--mm-button-height);
		line-height: var(--mm-button-line-height);
		background: var(--mm-button-base-background);
		border: var(--mm-button-base-border);
		border-radius: var(--mm-button-radius);
		box-shadow: var(--mm-button-base-shadow);
		align-items: var(--mm-button-align-items);
		justify-content: var(--mm-button-justify-content);
		transition: background-color 0.2s linear, border-color 0.2s linear, box-shadow 0.2s linear;
		box-sizing: border-box;
		cursor: pointer;
		outline: none;
		user-select: none;

		&.disabled
		{
			cursor: default;
		}

		.mm9_button_error_icon
		{
			display: none;
		}

		.mm9_button_image,
		.mm9_button_text,
		.mm9_button_custom
		{
			color: var(--mm-button-base-color);
			font-size: var(--mm-button-font-size);
			transition: color 0.2s linear;
		}

		.mm9_button_text
		{
			padding: 0;
		}

		.mm9_button_text,
		.mm9_button_custom
		{
			font-family: var(--mm-button-font-family);
			font-style: var(--mm-button-font-style);
			font-weight: var(--mm-button-font-weight);
			letter-spacing: var(--mm-button-letter-spacing);
		}

		&.focus
		{
			--mm-button-base-background: var(--mm-button-base-background--focus);
			--mm-button-base-border: var(--mm-button-base-border--focus);
			--mm-button-base-shadow: var(--mm-button-base-shadow--focus);
			--mm-button-base-color: var(--mm-button-base-color--focus);
		}

		&.focus:not(.click-focus)
		{
			outline: var(--mm-button-base-outline--focus);
			outline-offset: var(--mm-button-outline-offset);
		}

		&:hover
		{
			--mm-button-base-background: var(--mm-button-base-background--hover);
			--mm-button-base-border: var(--mm-button-base-border--hover);
			--mm-button-base-shadow: var(--mm-button-base-shadow--hover);
			--mm-button-base-color: var(--mm-button-base-color--hover);
		}

		&.active
		{
			--mm-button-base-background: var(--mm-button-base-background--active);
			--mm-button-base-border: var(--mm-button-base-border--active);
			--mm-button-base-shadow: var(--mm-button-base-shadow--active);
			--mm-button-base-color: var(--mm-button-base-color--active);
		}

		&.disabled
		{
			--mm-button-base-background: var(--mm-button-base-background--disabled);
			--mm-button-base-border: var(--mm-button-base-border--disabled);
			--mm-button-base-shadow: var(--mm-button-base-shadow--disabled);
			--mm-button-base-color: var(--mm-button-base-color--disabled);
		}

		&:where(.primary)
		{
			--mm-button-base-color: var(--mm-button-primary-color);
			--mm-button-base-background: var(--mm-button-primary-background);
			--mm-button-base-border: var(--mm-button-primary-border);
			--mm-button-base-shadow: var(--mm-button-primary-shadow);

			--mm-button-base-color--hover: var(--mm-button-primary-color--hover);
			--mm-button-base-background--hover: var(--mm-button-primary-background--hover);
			--mm-button-base-border--hover: var(--mm-button-primary-border--hover);
			--mm-button-base-shadow--hover: var(--mm-button-primary-shadow--hover);

			--mm-button-base-color--active: var(--mm-button-primary-color--active);
			--mm-button-base-background--active: var(--mm-button-primary-background--active);
			--mm-button-base-border--active: var(--mm-button-primary-border--active);
			--mm-button-base-shadow--active: var(--mm-button-primary-shadow--active);

			--mm-button-base-color--focus: var(--mm-button-primary-color--focus);
			--mm-button-base-background--focus: var(--mm-button-primary-background--focus);
			--mm-button-base-border--focus: var(--mm-button-primary-border--focus);
			--mm-button-base-shadow--focus: var(--mm-button-primary-shadow--focus);
			--mm-button-base-outline--focus: var(--mm-button-primary-outline--focus);

			--mm-button-base-color--disabled: var(--mm-button-primary-color--disabled);
			--mm-button-base-background--disabled: var(--mm-button-primary-background--disabled);
			--mm-button-base-border--disabled: var(--mm-button-primary-border--disabled);
			--mm-button-base-shadow--disabled: var(--mm-button-primary-shadow--disabled);
		}

		&:where(.secondary)
		{
			--mm-button-base-color: var(--mm-button-secondary-color);
			--mm-button-base-background: var(--mm-button-secondary-background);
			--mm-button-base-border: var(--mm-button-secondary-border);
			--mm-button-base-shadow: var(--mm-button-secondary-shadow);

			--mm-button-base-color--hover: var(--mm-button-secondary-color--hover);
			--mm-button-base-background--hover: var(--mm-button-secondary-background--hover);
			--mm-button-base-border--hover: var(--mm-button-secondary-border--hover);
			--mm-button-base-shadow--hover: var(--mm-button-secondary-shadow--hover);

			--mm-button-base-color--active: var(--mm-button-secondary-color--active);
			--mm-button-base-background--active: var(--mm-button-secondary-background--active);
			--mm-button-base-border--active: var(--mm-button-secondary-border--active);
			--mm-button-base-shadow--active: var(--mm-button-secondary-shadow--active);

			--mm-button-base-color--focus: var(--mm-button-secondary-color--focus);
			--mm-button-base-background--focus: var(--mm-button-secondary-background--focus);
			--mm-button-base-border--focus: var(--mm-button-secondary-border--focus);
			--mm-button-base-shadow--focus: var(--mm-button-secondary-shadow--focus);
			--mm-button-base-outline--focus: var(--mm-button-secondary-outline--focus);

			--mm-button-base-color--disabled: var(--mm-button-secondary-color--disabled);
			--mm-button-base-background--disabled: var(--mm-button-secondary-background--disabled);
			--mm-button-base-border--disabled: var(--mm-button-secondary-border--disabled);
			--mm-button-base-shadow--disabled: var(--mm-button-secondary-shadow--disabled);
		}
	}

	/* Date / Time Picker specific CSS */

	.mm_runtimebranchpreview_datepicker
	{
		position: relative;
		display: flex;
		align-items: flex-start;
	}

	.mm_runtimebranchpreview_datepicker_time_container
	{
		position: relative;
		margin: 67px 0 0 25px;
		display: inline-flex;
		justify-content: center;
		align-items: flex-end;
		flex-direction: column;
		flex-grow: 1;
	}

	.mm_runtimebranchpreview_datepicker_time_hms_container
	{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		column-gap: 8px;
	}

	.mm_runtimebranchpreview_datepicker_time_label
	{
		--mm-text-color: var(--mm-color-900);
		--mm-text-weight: 500;
		--mm-text-font-family: var(--mm-typography-paragraph-medium-font-family);
		--mm-text-font-size: var(--mm-typography-paragraph-medium-font-size);
		--mm-text-font-style: var(--mm-typography-paragraph-medium-font-style);
		--mm-text-font-weight: var(--mm-typography-paragraph-medium-font-weight);
		--mm-text-line-height: var(--mm-typography-paragraph-medium-line-height);
		--mm-text-letter-spacing: var(--mm-typography-paragraph-medium-letter-spacing);

		position: relative;
		display: inline-block;
		padding: 0;
	}

	.mm_runtimebranchpreview_datepicker_time_period_container
	{
		position: relative;
		display: inline-flex;
		margin-top: 20px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_container
	{
		position: relative;
		display: inline-block;
		vertical-align: top;
		margin-bottom: 1px;
		width: 288px;
		flex-shrink: 0;
		user-select: none;
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector
	{
		position: relative;
		display: flex;
		height: 50px;
		align-items: center;
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_prev,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_next
	{
		position: relative;
		display: inline-flex;
		width: 40px;
		height: 50px;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		cursor: pointer;
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_prev:before
	{
		position: absolute;
		top: 27px;
		left: 19px;
		width: 8px;
		height: 2px;
		background-color: var(--mm-datetimepicker-dialog-calendar-year-select-next-prev-color);
		border-radius: 1px;
		transform: rotate(50deg);
		content: '';
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_prev:after
	{
		position: absolute;
		top: 22px;
		left: 19px;
		width: 8px;
		height: 2px;
		background-color: var(--mm-datetimepicker-dialog-calendar-year-select-next-prev-color);
		border-radius: 1px;
		transform: rotate(-50deg);
		content: '';
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_next:before
	{
		position: absolute;
		top: 27px;
		left: 14px;
		width: 8px;
		height: 2px;
		background-color: var(--mm-datetimepicker-dialog-calendar-year-select-next-prev-color);
		border-radius: 1px;
		transform: rotate(-50deg);
		content: '';
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_next:after
	{
		position: absolute;
		top: 22px;
		left: 14px;
		width: 8px;
		height: 2px;
		background-color: var(--mm-datetimepicker-dialog-calendar-year-select-next-prev-color);
		border-radius: 1px;
		transform: rotate(50deg);
		content: '';
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_prev:hover::before,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_prev:hover::after,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_next:hover::before,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_next:hover::after
	{
		--mm-datetimepicker-dialog-calendar-year-select-next-prev-color: var(--mm-datetimepicker-dialog-calendar-year-select-next-prev-color--hover);
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_prev.disabled,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_next.disabled
	{
		cursor: default;
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_prev.disabled::before,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_prev.disabled::after,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_next.disabled::before,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_next.disabled::after,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_prev.disabled:hover::before,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_prev.disabled:hover::after,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_next.disabled:hover::before,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_next.disabled:hover::after
	{
		--mm-datetimepicker-dialog-calendar-year-select-next-prev-color: var(--mm-datetimepicker-dialog-calendar-year-select-next-prev-color--disabled);
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_title
	{
		position: relative;
		display: inline-flex;
		flex-grow: 1;
		align-items: center;
		justify-content: center;
		padding: 9px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_title_month
	{
		--mm-text-margin-top: 1px;
		--mm-text-color: var(--mm-color-900);
		--mm-text-weight: 500;
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_title_year
	{
		position: relative;
		display: inline-flex;
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_title_year_select
	{
		position: relative;
		display: inline-flex;
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_title_year_select .mm_runtimebranchpreview_datepicker_calendar_month_selector_title_year_select_button
	{
		position: relative;
		display: flex;
		margin-left: 6px;
		padding: 0;
		line-height: 1;
		text-align: left;
		box-sizing: border-box;
		align-items: center;
		cursor: pointer;
		outline: none;
	}

	.mm_runtimebranchpreview_datepicker_calendar_month_selector_title_year_select .mm_runtimebranchpreview_datepicker_calendar_month_selector_title_year_select_button .mm9_button_text,
	.mm_runtimebranchpreview_datepicker_calendar_month_selector_title_year_select.active .mm_runtimebranchpreview_datepicker_calendar_month_selector_title_year_select_button .mm9_button_text
	{
		padding: 0;
		color: var(--mm-datetimepicker-dialog-calendar-year-select-text-color);
		line-height: var(--mm-datetimepicker-dialog-calendar-year-select-line-height);
		font-size: var(--mm-datetimepicker-dialog-calendar-year-select-font-size);
		font-weight: var(--mm-datetimepicker-dialog-calendar-year-select-font-weight);
		text-align: left;
		white-space: nowrap;
		text-decoration-line: var(--mm-datetimepicker-dialog-calendar-year-select-text-decoration-line);
		text-decoration-thickness: var(--mm-datetimepicker-dialog-calendar-year-select-text-decoration-thickness);
		text-underline-offset: var(--mm-datetimepicker-dialog-calendar-year-select-text-underline-offset);
	}

	.mm_runtimebranchpreview_datepicker_calendar_weekday_container
	{
		position: relative;
		display: block;
		height: 48px;
		background-color: var(--mm-datetimepicker-dialog-calendar-header-background-color);
		border-top: var(--mm-datetimepicker-dialog-calendar-border);
		border-right: var(--mm-datetimepicker-dialog-calendar-border);
		border-left: var(--mm-datetimepicker-dialog-calendar-border);
		border-radius: var(--mm-datetimepicker-dialog-calendar-border-radius) var(--mm-datetimepicker-dialog-calendar-border-radius) 0 0;
	}

	.mm_runtimebranchpreview_datepicker_calendar_weekday_title
	{
		position: absolute;
		display: inline-flex;
		width: 40px;
		height: 48px;
		align-items: center;
		justify-content: center;
	}

	.mm_runtimebranchpreview_datepicker_calendar_week_container
	{
		position: relative;
		display: block;
	}

	.mm_runtimebranchpreview_datepicker_calendar_column
	{
		position: absolute;
		top: -1px;
		bottom: -1px;
		width: 42px;
		border: var(--mm-datetimepicker-dialog-calendar-day-border);
		border-top: var(--mm-datetimepicker-dialog-calendar-day-border);
		border-right: var(--mm-datetimepicker-dialog-calendar-day-border);
		border-bottom: var(--mm-datetimepicker-dialog-calendar-border);
		border-left: var(--mm-datetimepicker-dialog-calendar-day-border);
		box-sizing: border-box;
		z-index: 1;
		pointer-events: none;
	}

	.mm_runtimebranchpreview_datepicker_calendar_column_0
	{
		left: 0;
		border-left: var(--mm-datetimepicker-dialog-calendar-border);
		border-radius: 0 0 0 var(--mm-datetimepicker-dialog-calendar-border-radius);
	}

	.mm_runtimebranchpreview_datepicker_calendar_column_1
	{
		left: 41px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_column_2
	{
		left: 82px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_column_3
	{
		left: 123px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_column_4
	{
		left: 164px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_column_5
	{
		left: 205px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_column_6
	{
		left: 246px;
		border-right: var(--mm-datetimepicker-dialog-calendar-border);
		border-radius: 0 0 var(--mm-datetimepicker-dialog-calendar-border-radius) 0;
	}

	.mm_runtimebranchpreview_datepicker_calendar_week
	{
		position: relative;
		display: block;
		height: 36px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_week + .mm_runtimebranchpreview_datepicker_calendar_week
	{
		border-top: var(--mm-datetimepicker-dialog-calendar-day-border);
	}

	.mm_runtimebranchpreview_datepicker_calendar_day
	{
		position: absolute;
		display: inline-flex;
		top: 0;
		bottom: 0;
		width: 40px;
		text-align: center;
		font-size: var(--mm-datetimepicker-dialog-calendar-day-font-size);
		font-weight: var(--mm-datetimepicker-dialog-calendar-day-font-weight);
		line-height: 1;
		color: var(--mm-datetimepicker-dialog-calendar-day-text-color);
		background-color: var(--mm-datetimepicker-dialog-calendar-day-background-color);
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		transition: color 0.15s linear, background-color 0.15s linear;
		cursor: pointer;
	}

	.mm_runtimebranchpreview_datepicker_calendar_week:last-child .mm_runtimebranchpreview_datepicker_calendar_day_0
	{
		border-radius: 0 0 0 var(--mm-datetimepicker-dialog-calendar-border-radius);
	}

	.mm_runtimebranchpreview_datepicker_calendar_week:last-child .mm_runtimebranchpreview_datepicker_calendar_day_6
	{
		border-radius: 0 0 var(--mm-datetimepicker-dialog-calendar-border-radius) 0;
	}

	.mm_runtimebranchpreview_datepicker_calendar_day:hover
	{
		--mm-datetimepicker-dialog-calendar-day-text-color: var(--mm-datetimepicker-dialog-calendar-day-text-color--hover);
		--mm-datetimepicker-dialog-calendar-day-background-color: var(--mm-datetimepicker-dialog-calendar-day-background-color--hover);

		z-index: 1;
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_differentmonth
	{
		--mm-datetimepicker-dialog-calendar-day-text-color: var(--mm-datetimepicker-dialog-calendar-day-text-color--other-month);
		--mm-datetimepicker-dialog-calendar-day-background-color: var(--mm-datetimepicker-dialog-calendar-day-background-color--other-month);
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_noselect,
	.mm_runtimebranchpreview_datepicker_calendar_day_noselect:hover
	{
		--mm-datetimepicker-dialog-calendar-day-text-color: var(--mm-datetimepicker-dialog-calendar-day-text-color--disabled);
		--mm-datetimepicker-dialog-calendar-day-background-color: var(--mm-datetimepicker-dialog-calendar-day-background-color--disabled);

		cursor: default;
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_differentmonth.mm_runtimebranchpreview_datepicker_calendar_day_noselect,
	.mm_runtimebranchpreview_datepicker_calendar_day_differentmonth.mm_runtimebranchpreview_datepicker_calendar_day_noselect:hover
	{
		--mm-datetimepicker-dialog-calendar-day-text-color: var(--mm-datetimepicker-dialog-calendar-day-text-color--other-month);
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_current,
	.mm_runtimebranchpreview_datepicker_calendar_day_current:hover
	{
		--mm-datetimepicker-dialog-calendar-day-text-color: var(--mm-datetimepicker-dialog-calendar-day-text-color--current-day);
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_active,
	.mm_runtimebranchpreview_datepicker_calendar_day_active:hover
	{
		--mm-datetimepicker-dialog-calendar-day-text-color: var(--mm-datetimepicker-dialog-calendar-day-text-color--active);
		--mm-datetimepicker-dialog-calendar-day-background-color: var(--mm-datetimepicker-dialog-calendar-day-background-color--active);
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_0
	{
		left: 1px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_1
	{
		left: 42px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_2
	{
		left: 83px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_3
	{
		left: 124px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_4
	{
		left: 165px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_5
	{
		left: 206px;
	}

	.mm_runtimebranchpreview_datepicker_calendar_day_6
	{
		left: 247px;
	}
}

.mm_runtimebranchpreview_datepicker_menu_container
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	user-select: none;
	pointer-events: none;
	z-index: 2147483647;
}

/* MMIcon Styles */

mm-icon
{
	position: relative;
	display: inline-flex;
	padding: var(--mm-icon-padding);
	background-color: var(--mm-icon-background-color);
	border-radius: var(--mm-icon-border-radius);
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	transition: background-color 0.15s linear;

	svg
	{
		width: var(--mm-icon-dimension--width);
		height: var(--mm-icon-dimension--height);

		.mm10_svg_icon_color
		{
			fill: var(--mm-icon-color);
			transition: fill 0.15s linear;
		}
	}
}

/* MMText Styles */

mm-text
{
	position: relative;
	display: inline-block;
	margin-top: var(--mm-text-margin-top);
	margin-bottom: var(--mm-text-margin-bottom);
	color: var(--mm-text-color);
	font-family: var(--mm-text-font-family);
	font-size: var(--mm-text-font-size);
	font-style: var(--mm-text-font-style);
	font-weight: var(--mm-text-font-weight);
	line-height: var(--mm-text-line-height);
	letter-spacing: var(--mm-text-letter-spacing);
	white-space: normal;
	word-break: break-word;
	transition: color 0.15s linear;
	outline: none;

	&:where([size="full"])
	{
		display: block;
		flex-grow: 1;
	}

	&:where([nowrap])
	{
		padding: 1px 0;
		white-space: nowrap;
		word-break: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1;
	}
}

/* MMSelector Styles */

mm-selector
{
	display: inline-block;
	box-sizing: border-box;
	outline: none;
}

mm-selector[size~="full"]
{
	display: block;
	width: 100%;
	flex-grow: 1;
}

mm-selector .mm_selector
{
	position: relative;
	display: block;
}

mm-selector .mm_selector_content
{
	position: relative;
	display: block;
	height: var(--mm-field-selector-height);
	background-color: var(--mm-field-selector-background-color);
	border: var(--mm-field-selector-border);
	border-radius: var(--mm-field-selector-border-radius);
	box-sizing: border-box;
	cursor: pointer;

	mm-selector:focus &
	{
		--mm-field-selector-border: var(--mm-field-selector-border--focus);
	}

	mm-selector[readonly] &
	{
		--mm-field-selector-border: var(--mm-field-selector-border--readonly);
		--mm-field-selector-background-color: var(--mm-field-selector-background-color--readonly);
		cursor: default;
	}

	mm-selector[readonly]:focus &
	{
		--mm-field-selector-border: var(--mm-field-selector-border--readonly--focus);
	}

	mm-selector:is([invalid], [invalid]:hover, [invalid]:focus, :has(.mm_selector_option:where(.invalid):where(:not(.disabled)))) &
	{
		--mm-field-selector-border: var(--mm-field-selector-border--invalid);
	}

	mm-selector:is([disabled], [disabled]:hover, [disabled]:focus) &
	{
		--mm-field-selector-border: var(--mm-field-selector-border--disabled);
		--mm-field-selector-background-color: var(--mm-field-selector-background-color--disabled);
		cursor: default;
	}
}

mm-selector .mm_selector_content_active
{
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: calc( 100% - 6px );
	background-color: var(--mm-field-selector-option-background-color);
	border-radius: var(--mm-field-selector-option-border-radius);
	box-shadow: var(--mm-field-selector-option-shadow);
	transform: translateY(-50%);

	mm-selector[readonly] &
	{
		--mm-field-selector-option-background-color: var(--mm-field-selector-option-background-color--readonly);
	}

	mm-selector[disabled] &
	{
		--mm-field-selector-option-background-color: var(--mm-field-selector-option-background-color--disabled);
	}
}

mm-selector .mm_selector_content_options
{
	position: relative;
	display: grid;
	margin-top: 1px;
	height: calc( 100% - 2px );
	align-items: center;
	box-sizing: border-box;
}

mm-selector .mm_selector_option
{
	position: relative;
	display: inline-flex;
	height: 100%;
	padding: var(--mm-field-selector-option-padding);
	overflow: hidden;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border-radius: var(--mm-field-selector-option-border-radius);
	outline: var(--mm-field-selector-option-outline);

	.mm_selector_option_text
	{
		position: relative;
		display: inline-block;
		color: var(--mm-field-selector-option-text-color);
		font-family: var(--mm-field-font-family);
		font-size: var(--mm-field-font-size);
		font-style: var(--mm-field-font-style);
		font-weight: var(--mm-field-selector-option-font-weight);
		line-height: var(--mm-field-line-height);
		letter-spacing: var(--mm-field-letter-spacing);
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;

		&:has(svg)
		{
			display: inline-flex;
		}

		svg
		{
			width: var(--mm-field-font-size);
			height: var(--mm-field-font-size);

			.mm10_svg_icon_color
			{
				fill: var(--mm-field-selector-option-text-color);
			}
		}
	}

	&:is(:hover, .selected)
	{
		--mm-field-selector-option-text-color: var(--mm-field-selector-option-text-color--active);
	}

	mm-selector:focus:not([readonly]) .mm_selector:not(.click-focus) &.focus
	{
		--mm-field-selector-option-outline: var(--mm-field-selector-option-outline--focus);
	}

	mm-selector[readonly] &:is(:hover, .focus, &.selected)
	{
		--mm-field-selector-option-text-color: var(--mm-field-selector-option-text-color--readonly);
	}

	&:is(.invalid, .invalid.selected, .invalid:hover, .invalid.selected:hover)
	{
		--mm-field-selector-option-text-color: var(--mm-field-selector-option-text-color--invalid);
	}

	&:is(.disabled, .disabled:hover, .disabled.selected, .disabled.selected:hover),
	mm-selector[disabled] :is(&, &.disabled, &.disabled:hover, &.selected, &.selected:hover, &.disabled:focus)
	{
		--mm-field-selector-option-text-color: var(--mm-field-selector-option-text-color--disabled);
	}
}

mm-selector .mm_selector_error_icon
{
	display: none;

	mm-selector[invalid] &
	{
		position: absolute;
		top: 0;
		right: 0;
		display: inline-block;
		width: var(--mm-field-invalid-icon-dimension);
		height: var(--mm-field-invalid-icon-dimension);
		background-color: #fff;
		border-radius: 50%;
		transform: translate(50%, -50%);

		svg
		{
			width: var(--mm-field-invalid-icon-dimension);
			height: var(--mm-field-invalid-icon-dimension);

			.mm10_svg_icon_color
			{
				fill: var(--mm-field-invalid-icon-color);
			}
		}
	}
}

mm-selector .mm_selector_error_container
{
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}

mm-selector .mm_selector_error_container .mm_selector_error_tail
{
	position: absolute;
	top: 4px;
	left: 50%;
	width: 12px;
	height: 12px;
	background-color: var(--mm-field-invalid-message-background-color);
	transform: translateX(-50%) rotate(45deg);
	z-index: 1;
}

mm-selector .mm_selector_error_container.above .mm_selector_error_tail
{
	top: auto;
	bottom: 4px;
}

mm-selector .mm_selector_error_container .mm_selector_error_message
{
	position: relative;
	display: block;
	margin: 10px;
	padding: 15px;
	background: var(--mm-field-invalid-message-background-color);
	color: var(--mm-field-invalid-message-text-color);
	font-size: 12px;
	word-break: break-word;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	border-radius: var(--mm-field-invalid-message-border-radius);
}

/* MMSelect Styles */

.mm_select_common
{
	position: relative;
	display: inline-block;

	&.fixed_narrow_width
	{
		width: 125px;
	}

	&.fixed_default_width
	{
		width: 250px;
	}

	&.fixed_wide_width
	{
		width: 400px;
	}

	&.auto_width
	{
		display: inline-block;
		width: unset;
	}

	&.whole_width
	{
		display: block;
		width: auto;
		flex-grow: 1;
	}

	&.title_visible
	{
		margin-top: var(--mm-field-select-title-margin-top);
	}
}

.mm_select_common .mm_select_common_button
{
	position: relative;
	display: flex;
	margin: 0;
	padding: var(--mm-field-select-padding);
	height: var(--mm-field-select-height);
	line-height: 1;
	background: var(--mm-field-select-background-color);
	border: var(--mm-field-select-border);
	border-radius: var(--mm-field-select-border-radius);
	box-shadow: var(--mm-field-select-shadow);
	box-sizing: border-box;
	align-items: center;
	transition: border-color 0.15s linear;
	cursor: pointer;
	outline: none;
}

.mm_select_common.title_visible
{
	.mm9_button_title
	{
		position: absolute;
		display: flex;
		top: calc(0px - var(--mm-field-select-title-margin-top));
		left: 0;
		align-items: center;

		.mm9_button_title_text
		{
			font-family: var(--mm-field-prompt-font-family);
			font-size: var(--mm-field-prompt-font-size);
			font-style: var(--mm-field-prompt-font-style);
			font-weight: var(--mm-field-prompt-font-weight);
			line-height: var(--mm-field-prompt-line-height);
			letter-spacing: var(--mm-field-prompt-letter-spacing);
			color: var(--mm-field-prompt-text-color);
			text-transform: none;

			.mm_select_common.required .mm_select_common_button > .mm9_button_title > &::after
			{
				content: '*';
			}
		}
	}

	&.tooltip_visible
	{
		.mm9_button_title_tooltip
		{
			position: relative;
			display: inline-flex;
			margin-left: 6px;
		}
	}
}

.mm_select_common .mm_select_common_button .mm9_button_text,
.mm_select_common.active .mm_select_common_button .mm9_button_text
{
	padding: 0;
	text-align: left;
	color: var(--mm-field-select-text-color);
	font-family: var(--mm-field-font-family);
	font-size: var(--mm-field-font-size);
	font-style: var(--mm-field-font-style);
	font-weight: var(--mm-field-font-weight);
	line-height: var(--mm-field-line-height);
	letter-spacing: var(--mm-field-letter-spacing);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	flex-grow: 1;
}

.mm_select_common_button .mm9_menubutton_dropdown
{
	position: absolute;
	display: block;
	top: 50%;
	right: 15px;
	width: 10px;
	height: 6px;
	border: none;
	background: none;
	transform: translateY(-50%);
}

.mm_select_common_button .mm9_menubutton_dropdown_bg1
{
	position: absolute;
	top: 2px;
	left: 3px;
	width: 7px;
	height: 2px;
	background-color: var(--mm-field-select-dropdown-color);
	border-radius: 1px;
	transform: rotate(-45deg);
	transition: all 0.2s linear;
}

.mm_select_common.active .mm_select_common_button .mm9_menubutton_dropdown_bg1
{
	transform: rotate(45deg);
}

.mm_select_common_button .mm9_menubutton_dropdown_bg2
{
	position: absolute;
	top: 2px;
	left: -1px;
	width: 7px;
	height: 2px;
	background-color: var(--mm-field-select-dropdown-color);
	border-radius: 1px;
	transform: rotate(45deg);
	transition: all 0.2s linear;
}

.mm_select_common.active .mm_select_common_button .mm9_menubutton_dropdown_bg2
{
	transform: rotate(-45deg);
}

.mm9_button_error_icon
{
	display: none;

	.mm_select_common.invalid &
	{
		position: relative;
		display: inline-block;
		margin-left: 10px;
		width: var(--mm-field-invalid-icon-dimension);
		height: var(--mm-field-invalid-icon-dimension);
		flex-shrink: 0;
		background-color: #fff;
		border-radius: 50%;

		svg
		{
			width: var(--mm-field-invalid-icon-dimension);
			height: var(--mm-field-invalid-icon-dimension);

			.mm10_svg_icon_color
			{
				fill: var(--mm-field-invalid-icon-color);
			}
		}
	}
}

.mm_select_common.active,
.mm_select_common_button.focus,
.mm_select_common_button.active
{
	--mm-field-select-border: var(--mm-field-select-border--focus);
	--mm-field-select-shadow: var(--mm-field-select-shadow--focus);
}

.mm_select_common.invalid,
.mm_select_common.invalid.active,
.mm_select_common.invalid .mm_select_common_button.focus,
.mm_select_common.invalid .mm_select_common_button.active
{
	--mm-field-select-border: var(--mm-field-select-border--invalid);
}

.mm_select_common.readonly
{
	--mm-field-select-background-color: var(--mm-field-select-background-color--readonly);
	--mm-field-select-border: var(--mm-field-select-border--readonly);
	--mm-field-select-text-color: var(--mm-field-select-text-color--readonly);
}

.mm_select_common.readonly.active,
.mm_select_common.readonly .mm_select_common_button.focus,
.mm_select_common.readonly .mm_select_common_button.active
{
	--mm-field-select-border: var(--mm-field-select-border--readonly--focus);
	--mm-field-select-shadow: var(--mm-field-select-shadow--readonly--focus);
}

.mm_select_common.invalid,
.mm_select_common.invalid .mm_select_common_button.focus
{
	--mm-field-select-border: var(--mm-field-select-border--invalid);
}

.mm_select_common.invalid.active,
.mm_select_common.invalid .mm_select_common_button.focus,
.mm_select_common.invalid .mm_select_common_button.active
{
	--mm-field-select-shadow: var(--mm-field-select-shadow--invalid--focus);
}

.mm_select_common .mm_select_common_button.disabled,
.mm_select_common .mm_select_common_button.disabled.focus,
.mm_select_common .mm_select_common_button.disabled.invalid.focus
{
	--mm-field-select-background-color: var(--mm-field-select-background-color--disabled);
	--mm-field-select-border: var(--mm-field-select-border--disabled);
	--mm-field-select-text-color: var(--mm-field-select-text-color--disabled);
	--mm-field-select-dropdown-color: var(--mm-field-select-dropdown-color--disabled);
}

.mm_select_common_menu
{
	position: absolute;
	display: none;
	top: 46px;
	right: auto;
	left: 0;
	margin: 8px 0;
	padding: 10px 0;
	text-align: left;
	background: var(--mm-menubutton-common-menu-background-color);
	border: var(--mm-menubutton-common-menu-border);
	border-radius: var(--mm-menubutton-common-menu-border-radius);
	box-shadow: var(--mm-menubutton-common-menu-shadow);
	box-sizing: border-box;
	overflow: auto;
	pointer-events: auto;
	z-index: 2147483647;

	.mm9_menubutton_menu_item
	{
		position: relative;
		display: flex;
		margin: 0 8px;
		padding: 0 12px;
		height: var(--mm-menubutton-common-menu-item-height);
		align-items: center;
		white-space: nowrap;
		text-align: left;
		font-weight: var(--mm-menubutton-common-menu-item-font-weight);
		font-size: var(--mm-menubutton-common-menu-item-font-size);
		letter-spacing: var(--mm-field-letter-spacing);
		line-height: var(--mm-menubutton-common-menu-item-line-height);
		color: var(--mm-menubutton-common-menu-item-text-color);
		background-color: var(--mm-menubutton-common-menu-item-background-color);
		border-radius: var(--mm-menubutton-common-menu-item-border-radius);
		cursor: pointer;

		&.mm9_menubutton_menu_item_disabled
		{
			cursor: default;
		}

		.mm_menubutton_menu_item_content
		{
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			column-gap: 8px;
			flex-grow: 1;

			mm-text
			{
				flex-grow: 1;
			}

			mm-icon[data-icon-selected]
			{
				display: none;
			}
		}

		&.selected_option,
		&.mm9_menubutton_menu_item_toggle_active,
		&.mm10_menubutton_menu_item_persistent_selected
		{
			--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--selected);
			--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--selected);
		}

		&.mm9_menubutton_menu_item_selected
		{
			--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--active);
			--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--active);
		}

		&.mm9_menubutton_menu_item_selected.negative
		{
			--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color-destructive--active);
			--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color-destructive--active);
		}

		&.mm9_menubutton_menu_item_disabled
		{
			--mm-menubutton-common-menu-item-text-color: var(--mm-menubutton-common-menu-item-text-color--disabled);
			--mm-menubutton-common-menu-item-background-color: var(--mm-menubutton-common-menu-item-background-color--disabled);

			cursor: default;
		}

		mm-text
		{
			--mm-text-font-size: var(--mm-menubutton-common-menu-item-font-size);
			--mm-text-font-weight: var(--mm-menubutton-common-menu-item-font-weight);
			--mm-text-line-height: var(--mm-menubutton-common-menu-item-line-height);
			--mm-text-color: var(--mm-menubutton-common-menu-item-text-color);
		}

		mm-icon
		{
			--mm-icon-color: var(--mm-menubutton-common-menu-item-text-color);
			--mm-icon-dimension--width: var(--mm-menubutton-common-menu-item-font-size);
			--mm-icon-dimension--height: var(--mm-menubutton-common-menu-item-font-size);
		}

		.mm_menubutton_menu_item_content
		{
			mm-icon[data-icon-selected]
			{
				--mm-icon-color: var(--mm-menubutton-common-menu-item-selected-icon-color);
				--mm-icon-dimension--width: var(--mm-menubutton-common-menu-item-selected-icon-dimension);
				--mm-icon-dimension--height: var(--mm-menubutton-common-menu-item-selected-icon-dimension);

				display: none;
				margin-left: 20px;

				.mm9_menubutton_menu_item.selected_option &,
				.mm9_menubutton_menu_item.mm10_menubutton_menu_item_persistent_selected &
				{
					display: inline-flex;
				}
			}
		}
	}
}