.pickerChrono {
	--modelBorderColor: #bbbbbb;
	--modelBorderRadius: 10px;
	--modelBorderWidth: 1px;
	--modelGroundColor: #ffffff;
	--modelShadowColor: #00000044;
	--modelShadowWidth: 5px;

	--buttonBorderRadius: 5px;
	--buttonBorderWidth: 1px;
	--buttonTextSize: 13px;
	--buttonBasicBorderColor: #c1c1c1;
	--buttonBasicGroundColor: #f3f3f3;
	--buttonBasicTextColor: #333333;
	--buttonEngageBorderColor: var(--themeAccentMarker);
	--buttonEngageGroundColor: var(--themeAccentGround);
	--buttonEngageTextColor: #ffffff;

	--selectBorderColor: #cccccc;
	--selectBorderRadius: 5px;
	--selectBorderWidth: 1px;
	--selectGroundColor: #ffffff;
	--selectGroundColorDisabled: #eeeeee;
	--selectTextColor: #333333;
	--selectTextColorDisabled: #999999;
	--selectTextSize: 12px;

	--selectOptionGroundColor: var(--selectGroundColor);
	--selectOptionGroundColorDisabled: var(--selectGroundColor);
	--selectOptionGroundColorSelected: var(--themeAccentGround);
	--selectOptionTextColor: var(--selectTextColor);
	--selectOptionTextColorDisabled: var(--selectTextColorDisabled);
	--selectOptionTextColorSelected: #ffffff;
}

.pickerChrono { display: none; position: absolute; width: 278px; z-index: 3001; background-color: var(--modelGroundColor); border: solid var(--modelBorderWidth) var(--modelBorderColor); border-radius: var(--modelBorderRadius); box-shadow: 0 0 var(--modelShadowWidth) var(--modelShadowColor);
	font-family: arial;
	font-size: 15px;
}
.pickerChrono:after { display: inline-block; position: absolute; content: ''; border-left: solid 6px transparent; border-right: solid 6px transparent; }
.pickerChrono:before { display: inline-block; position: absolute; content: ''; border-left: solid 7px transparent; border-right: solid 7px transparent; }
.pickerChrono.hangXC:after { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; }
.pickerChrono.hangXC:before { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; }
.pickerChrono.hangXL:after { left: 10px; }
.pickerChrono.hangXL:before { left: 9px; }
.pickerChrono.hangXR:after { right: 10px; }
.pickerChrono.hangXR:before { right: 9px; }
.pickerChrono.hangYB { margin-top: 7px; }
.pickerChrono.hangYB:after { top: -6px; border-bottom: solid 6px var(--modelGroundColor); }
.pickerChrono.hangYB:before { top: -7px; border-bottom: solid 7px var(--modelBorderColor); }
.pickerChrono.hangYT { margin-top: -7px; }
.pickerChrono.hangYT:after { bottom: -6px; border-top: solid 6px var(--modelGroundColor); }
.pickerChrono.hangYT:before { bottom: -7px; border-top: solid 7px var(--modelBorderColor); }

.pickerChrono > .panels { display: flex; flex-direction: row; }
.pickerChrono > .panels > .panel { display: none; max-width: 270px; }
.pickerChrono > .panels > .panel.solo { padding: 8px; }
.pickerChrono > .panels > .panel.many.left { padding: 8px 0 8px 8px; }
.pickerChrono > .panels > .panel.many.right { padding: 8px; }

.pickerChrono > .panels > .panel > .date .divider { margin: 0 5px; }

.pickerChrono > .panels > .panel > .time { display: flex; flex-direction: row; justify-content: center; padding: 5px; }
.pickerChrono > .panels > .panel > .time > .divider { margin: 0 5px; }
.pickerChrono > .panels > .panel > .time > .select.hour { width: 45px; }
.pickerChrono > .panels > .panel > .time > .select.minute { width: 45px; }
.pickerChrono > .panels > .panel > .time > .select.second { width: 45px; }

.pickerChrono > .actions { display: flex; flex-direction: row; padding: 8px; border-top: 1px solid var(--modelBorderColor); }
.pickerChrono > .actions > .summary { width: 100%; margin: 0 8px; font-family: Arial; font-size: 12px; }

.pickerChrono .button { padding: 4px 8px; border: solid var(--buttonBorderWidth); border-radius: var(--buttonBorderRadius, 5px); transition: filter .2s; }
.pickerChrono .button:disabled { filter: brightness( 80% ); }
.pickerChrono .button:enabled { cursor: pointer; }
.pickerChrono .button:enabled:active { filter: brightness( 90% ); }
.pickerChrono .button:enabled:hover { filter: brightness( 110% ); }
.pickerChrono .button.basic { background-color: var(--buttonBasicGroundColor); border-color: var(--buttonBasicBorderColor); }
.pickerChrono .button.basic > .text { color: var(--buttonBasicTextColor); }
.pickerChrono .button.engage { background-color: var(--buttonEngageGroundColor); border-color: var(--buttonEngageBorderColor); }
.pickerChrono .button.engage > .text { color: var(--buttonEngageTextColor); }
.pickerChrono .button > .text { font-family: arial; font-size: var(--buttonTextSize); }

.pickerChrono .select { padding: 2px; border: solid var(--selectBorderWidth) var(--selectBorderColor); border-radius: var(--selectBorderRadius); font-family: arial; font-size: var(--selectTextSize); color: var(--selectTextColor); text-align: center; transition: filter .2s; }
.pickerChrono .select:disabled { background-color: var(--selectGroundColorDisabled); color: var(--selectTextColorDisabled); cursor: not-allowed; }
.pickerChrono .select:enabled { background-color: var(--selectGroundColor); cursor: pointer; }
.pickerChrono .select:enabled:focus { filter: brightness( 95% ); }
.pickerChrono .select:enabled:hover { filter: brightness( 95% ); }
.pickerChrono .select option { background-color: var(--selectOptionGroundColor); color: var(--selectOptionTextColor); }
.pickerChrono .select option:disabled { background-color: var(--selectOptionGroundColorDisabled); color: var(--selectOptionTextColorDisabled); }
.pickerChrono .select option[selected] { background-color: var(--selectOptionGroundColorSelected); color: var(--selectOptionTextColorSelected); }









.pickerChrono .panel.solo .date { border: none; }

.pickerChrono .panel .date { background-color: #ffffff; border: 1px solid #ffffff; border-radius: 4px; }
.pickerChrono .panel .date table { width: 100%; margin: 0; border-spacing: 0; border-collapse: collapse; }
.pickerChrono .panel .date .select.month { width: 60px; }
.pickerChrono .panel .date .select.year { width: 70px; }

.pickerChrono .panel .date .next span, .pickerChrono .panel .date .prev span {
	color: #ffffff;
	border: solid black;
	border-width: 0 2px 2px 0;
	border-radius: 0;
	display: inline-block;
	padding: 3px;
}

.pickerChrono .panel .date .next span { transform: rotate(-45deg); }
.pickerChrono .panel .date .prev span { transform: rotate(135deg); }






.model .actions { display: flex; flex-direction: row; justify-content: center; padding: var(--modelActionsPadding, 8px); background-color: var(--modelActionsGroundColor, #f0f0f0); border-top: solid var(--modelActionsBorderWidth, 1px) var(--modelActionsBorderColor, #d1d1d1); border-radius: 0 0 var(--modelBorderRadius, 5px) var(--modelBorderRadius, 5px); }
.model .actions .action { margin: var(--modelActionMargin, 0 5px); padding: var(--modelActionPadding, 4px 10px); transition: filter .2s; }

.pickerChrono.solo .pickerChrono .ranges, .pickerChrono.solo .panel { float: none; }
.pickerChrono.show-calendar .panel { display: block; }

.pickerChrono .panel .date th, .pickerChrono .panel .date td {
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
	min-width: 32px;
	width: 32px;
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
}

.pickerChrono td.available:hover, .pickerChrono th.available:hover { background-color: #eeeeee; border-color: transparent; color: inherit; }
.pickerChrono td.week, .pickerChrono th.week { color: #cccccc; }
.pickerChrono td.off, .pickerChrono td.off.in-range, .pickerChrono td.off.start-date, .pickerChrono td.off.end-date { background-color: #ffffff; border-color: transparent; color: #999999; }
.pickerChrono td.in-range { background-color: #ebf4f8; border-color: transparent; color: #000000; border-radius: 0; }
.pickerChrono td.start-date { border-radius: 4px 0 0 4px; }
.pickerChrono td.end-date { border-radius: 0 4px 4px 0; }
.pickerChrono td.start-date.end-date { border-radius: 4px; }
.pickerChrono td.active, .pickerChrono td.active:hover { background-color: var(--themeAccentGround); border-color: transparent; color: #ffffff; }
.pickerChrono th.month { width: auto; }
.pickerChrono td.disabled { color: #999999; cursor: not-allowed; text-decoration: line-through; }


.pickerChrono.show-ranges.solo.rtl .panel.left { border-right: 1px solid #dddddd; }
.pickerChrono.show-ranges.solo.ltr .panel.left { border-left: 1px solid #dddddd; }
.pickerChrono.show-ranges.rtl .panel.right { border-right: 1px solid #dddddd; }
.pickerChrono.show-ranges.ltr .panel.left { border-left: 1px solid #dddddd; }

.pickerChrono .ranges { float: none; text-align: left; margin: 0; }
.pickerChrono.show-calendar .ranges { margin-top: 8px; }
.pickerChrono .ranges ul { list-style: none; margin: 0 auto; padding: 0; width: 100%; }
.pickerChrono .ranges li { font-size: 12px; padding: 8px 12px; cursor: pointer; }
.pickerChrono .ranges li.active { background-color: var(--themeAccentGround); color: #ffffff; }
.pickerChrono .ranges li:hover { background-color: #eeeeee; }

@media (min-width: 564px) {
	.pickerChrono { width: auto; }
	.pickerChrono .ranges ul { width: 140px; }
	.pickerChrono.solo .ranges ul { width: 100%; }
	.pickerChrono.solo .panel.left { clear: none; }
	.pickerChrono.solo .ranges, .pickerChrono.solo .panel { float: left; }
	.pickerChrono { direction: ltr; text-align: left; }
	.pickerChrono .panel.left { clear: left; margin-right: 0; }
	.pickerChrono .panel.left .panel .date { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
	.pickerChrono .panel.right { margin-left: 0; }
	.pickerChrono .panel.right .panel .date { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
	.pickerChrono .panel.left .panel .date { padding-right: 8px; }
	.pickerChrono .ranges, .pickerChrono .panel { float: left; }
}

@media (min-width: 730px) {
	.pickerChrono .ranges { width: auto; }
	.pickerChrono .ranges { float: left; }
	.pickerChrono.rtl .ranges { float: right; }
	.pickerChrono .panel.left { clear: none !important; }
}