.dateTimePicker			{ display:inline-block; }

.dateTimeBlockWrapper	{ display: inline-block; position: relative; width: 190px; }

.dateTimePickerInputSkin { width: 185px; pointer-events:none; }

.dateTimeBlock			{ position: absolute; top:50%; transform:translateY(-50%); left:1px; display:inline-block; width:160px; margin-right:26px; color:#bbb; }
.dateInnerTimeBlock		{ float:left; line-height:17px; padding-left:2px; }

.periodSeparator		{ width:3px; display:inline-block; }
.calParent				{ clear:both; position:absolute; color:#000; z-index:1;}
.calBtn					{ float: right; margin-right:-26px; width: 22px; height: 16px; overflow:hidden; background:transparent url(/setup/datepickerbtn.png) no-repeat center top; }
.calBtn:hover			{ background-position:center center; }
.calBtn.active,
.calBtn.active:hover	{ background-position:center bottom; }

.dateTimePicker span	{ padding:0 1px 0 2px; color:#000; }
.dateTimePicker
span:focus				{ outline:#000 dotted 1px; }
.calendarWrapper		{ display:inline-block; padding:8px; }
.calendarWrapper div	{ margin:0 auto; }
.calendarWrapper table	{ width: 100%; }
.calendarWrapper td		{ margin:0px; color:#000; text-align:right; padding-right:5px; }
.calendarWrapper
table:last-child
tr:first-child td		{ text-align: right; }
.previous				{ width:20px; cursor:pointer; background:transparent url(/setup/calendar/previous.png) no-repeat 6px center; }
.next					{ width:20px; cursor:pointer; background:transparent url(/setup/calendar/next.png) no-repeat 16px center; }
.todayCell				{ border:solid 1px gray; }
.selectedCell			{ background-color:Silver; }
.selectableCell			{ cursor:pointer; }
.outsideCell			{ color:Silver; }



/* Tweaks for time-only controls (hide calendar, make shorter) */
.dateTimePicker:not([data-datetimepickertype*="date"]) .dateTimeBlockWrapper  { width:75px; }
.dateTimePicker:not([data-datetimepickertype*="date"]) .dateTimePickerInputSkin  { width:calc(100% - 5px); }
.dateTimePicker:not([data-datetimepickertype*="date"]) .dateTimeBlock { width:calc(100% - 5px); }
.dateTimePicker:not([data-datetimepickertype*="date"]) .calBtn { display: none; }


/* Mergefields */
.dateTimeTextInputWrapper { display: none; }
.dateTimeTextInputWrapper.active { display: inline-block; position:absolute; width:calc(100% - 18px); }
.dateTimeTextInputWrapper input { border: none; margin-top: 1px; background-color:#fff; width:100% }
.dateTimeTextInputWrapper input:focus { outline:none; }





/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
/* BELOW THIS LINE: NEW LAYOUT DESIGN */
/* -------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */



[data-layoutstyle="2017"] .dateTimePicker, 
[data-layoutstyle="2017"] .dateTimePicker *
{
    box-sizing:content-box;
}