md2-datepicker { position: relative; display: block; max-width: 200px; outline: none; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
md2-datepicker.md2-datepicker-disabled { pointer-events: none; cursor: default; }
.md2-datepicker-input-container { display: block; padding: 18px 0 18px 32px; white-space: nowrap; cursor: pointer; }
.md2-datepicker-calendar-icon { position: absolute; top: 21px; left: 0; display: block; height: 24px; width: 24px; vertical-align: middle; fill: currentColor; color: rgba(0,0,0,0.54); }
.md2-datepicker-input { position: relative; display: block; height: 30px; padding: 2px 26px 1px 2px; margin: 0; line-height: 26px; color: rgba(0,0,0,0.87); vertical-align: middle; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.12); }
.md2-datepicker-input svg { position: absolute; right: 0; top: 2px; fill: currentColor; color: rgba(0,0,0,0.54); }
md2-datepicker.md2-datepicker-disabled .md2-datepicker-input { color: rgba(0,0,0,0.38); border-color: transparent; background-image: linear-gradient(to right, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.38) 33%, transparent 0%); background-position: bottom -1px left 0; background-size: 4px 1px; background-repeat: repeat-x; }
.md2-datepicker-placeholder { position: absolute; right: 26px; bottom: 100%; left: 0; color: rgba(0,0,0,0.38); max-width: 100%; padding-left: 3px; padding-right: 0; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; z-index: 1; transform: translate3d(0,26px,0) scale(1); transition: transform .4s cubic-bezier(.25,.8,.25,1); transform-origin: left top; }
.md2-datepicker-placeholder.has-value,
md2-datepicker:focus .md2-datepicker-placeholder { transform: translate3d(0,6px,0) scale(.75); }
md2-datepicker:focus .md2-datepicker-placeholder { color: #2196f3; }
md2-datepicker:focus .md2-datepicker-placeholder .md2-placeholder-required { color: #f00; }
md2-datepicker.md2-datepicker-disabled:focus .md2-datepicker-placeholder,
md2-datepicker.md2-datepicker-disabled:focus .md2-datepicker-placeholder .md2-placeholder-required { color: rgba(0,0,0,0.38); }
.md2-datepicker-input-text { display: block; font-size: 15px; line-height: 26px; }

.md2-datepicker-wrapper { position: absolute; top: 0; left: 0; display: inline-block; width: 300px; border-radius: 2px; background-color: #fff; z-index: 10; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transform: scale(0); transform-origin: left top; transition: 150ms; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.md2-datepicker-wrapper.active { transform: scale(1); }
.md2-datepicker-header { display: block; padding: 20px; color: #fff; font-size: 28px; line-height: 28px; font-weight: 500; background: #2196f3; box-sizing: border-box; }
.md2-datepicker-year { display: block; height: 16px; margin: 0 0 10px; font-size: 16px; line-height: 16px; opacity: 0.7; cursor: pointer; }
.md2-datepicker-year.active { opacity: 1; pointer-events: none; }
.md2-datepicker-year.hidden { display: none; }
.md2-datepicker-date { cursor: pointer; opacity: 0.7; }
.md2-datepicker-date.active { opacity: 1; pointer-events: none; }
.md2-datepicker-date.hidden { display: none; }
.md2-datepicker-time { display: inline-block; padding-left: 10px; cursor: pointer; opacity: 0.7; }
.md2-datepicker-time.active { opacity: 1; }
.md2-datepicker-time.hidden { display: none; }
.md2-datepicker-hour,
.md2-datepicker-minute { opacity: 1; }
.md2-datepicker-time.active .md2-datepicker-hour,
.md2-datepicker-time.active .md2-datepicker-minute { opacity: 0.7; }
.md2-datepicker-time.active .md2-datepicker-hour.active,
.md2-datepicker-time.active .md2-datepicker-minute.active { opacity: 1; pointer-events: none; }
.md2-datepicker-body { position: relative; width: 100%; height: 300px; overflow: hidden; }
.md2-datepicker-footer { text-align: right; }
.md2-datepicker-footer .md2-button { display: inline-block; min-width: 64px; margin: 4px 8px 8px 0px; padding: 0 12px; font-size: 14px; color: #2196f3; line-height: 36px; text-align: center; text-transform: uppercase; border-radius: 2px; cursor: pointer; box-sizing: border-box; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); }
.md2-datepicker-footer .md2-button:hover { background: #ebebeb; }

.md2-years { position: absolute; top: 10px; right: 100%; bottom: 10px; display: block; width: 100%; line-height: 40px; background: #fff; overflow-x: hidden; overflow-y: auto; transition: 300ms; }
.md2-years.active { right: 0; }
.md2-years .md2-years-wrapper { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.md2-years .md2-year { position: relative; display: block; margin: 0 auto; padding: 0; font-size: 17px; font-weight: 400; text-align: center; cursor: pointer; }
.md2-years .md2-year.selected { color: #2196f3; font-size: 26px; font-weight: 500; }

.md2-datepicker-container { position: absolute; top: 0; left: 100%; display: block; width: 100%; transition: 300ms; }
.md2-datepicker-container.active { left: 0; }

.md2-calendar { position: absolute; right: 100%; display: block; width: 100%; font-size: 12px; font-weight: 400; text-align: center; transition: 300ms; }
.md2-calendar.active { right: 0; }
.md2-calendar-controls { position: relative; display: block; height: 48px; text-align: left; }
.md2-calendar-header { height: 48px; line-height: 48px; font-size: 14px; font-weight: 500; text-align: center; }
.md2-calendar-prev-month,
.md2-calendar-next-month { position: absolute; display: inline-block; width: 48px; height: 48px; padding: 12px; margin: 0 12px; box-sizing: border-box; cursor: pointer; }
.md2-calendar-next-month { right: 0; }
.md2-calendar-prev-month.disabled,
.md2-calendar-next-month.disabled { opacity: 0.25; cursor: default; pointer-events: none; }
.md2-calendar-month { margin: 0 20px; }
.md2-calendar-month th { width: 35px; height: 20px; font-weight: 500; line-height: 15px; opacity: 0.5; }
.md2-calendar-month td { padding: 0; }
.md2-calendar-day { position: relative; display: inline-block; width: 35px; height: 35px; border-radius: 50%; text-align: center; cursor: pointer; line-height: 35px; box-sizing: border-box; }
.md2-calendar-day.today { color: #2196f3; }
.md2-calendar-day:hover,
.md2-calendar-day.focus { background: #e0e0e0; }
.md2-calendar-day.selected,
.md2-calendar-day.selected:hover { color: #fff; background: #2196f3; }
.md2-calendar-day.disabled,
.md2-calendar-day.disabled:hover { color: rgba(0,0,0,0.45); background: transparent; pointer-events: none; }
.md2-calendar-day.prev-month,
.md2-calendar-day.next-month { visibility: hidden; }

.md2-clock { position: absolute; left: 100%; display: block; width: 240px; height: 240px; margin: 30px; font-size: 14px; font-weight: 400; text-align: center; background-color: #e0e0e0; border-radius: 50%; transition: 300ms; }
.md2-clock.active { left: 0; }
.md2-clock-hours,
.md2-clock-minutes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: 350ms; transform: scale(1.2); }
.md2-clock-minutes { transform: scale(0.8); }
.md2-clock-hours.active,
.md2-clock-minutes.active { opacity: 1; visibility: visible; transform: scale(1); }
.md2-clock-hour,
.md2-clock-minute { position: absolute; width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: 50%; cursor: pointer; }
.md2-clock-hour:hover,
.md2-clock-minute:hover { background: #5aaced; }
.md2-clock-hand { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.md2-clock-svg { }
.md2-clock-hand line { stroke: #2196f3; stroke-width: 1; stroke-linecap: round; }
.md2-clock-bg { fill: #5aaced; }
.md2-clock-fg { stroke: none; fill: #2196f3; }
.md2-clock-center { stroke: none; fill: #2196f3; }