.dtp-root {
  background-color: white;
  border-radius: 3px;
  border: 1px solid hsl(0, 0%, 95%);
  box-shadow: 0 1px 9px hsla(0, 0%, 0%, .4);
  color: hsl(0, 0%, 25%);
  font-size: 14px;
  left: 0;
  overflow: hidden;
  padding: 0 12px;
  position: absolute;
  top: 0;
  user-select: none;
  width: 256px;
}

.dtp-root .material-icons {
  line-height: inherit;
}

.dtp-hover-span {
  border-radius: 4px;
  box-shadow: 0 0 0 hsla(0, 0%, 0%, 0);
  cursor: pointer;
  display: block;
  height: 100%;
  padding: 0 8px;
  transition: box-shadow .1s;
}

.dtp-header,
.dtp-footer {
  align-items: center;
  background-color: hsl(0, 0%, 98%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  display: flex;
  height: 36px;
  justify-content: space-between;
  line-height: 36px;
  margin: 0 -12px;
}

.dtp-footer {
  justify-content: space-around;
}

.dtp-previous-month,
.dtp-next-month {
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
  text-align: center;
  width: 40px;
}

.dtp-header-month,
.dtp-header-year {
  border-radius: 0;
  min-width: 40px;
  padding: 0 12px;
  text-align: center;
  text-transform: uppercase;
}

.dtp-header-month.dtp-selected,
.dtp-header-year.dtp-selected {
  background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}

.dtp-filler {
  flex: 1;
}

.dtp-main-section {
  align-items: center;
  display: flex;
  height: 208px;
  width: 252px;
}

.dtp-main-section.dtp-view-years,
.dtp-main-section.dtp-view-time {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgMjUiIHdpZHRoPSI2MCIgaGVpZ2h0PSI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBmaWxsPSJoc2woMCwgMCUsIDkyJSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwLCAwKSByb3RhdGUoNDUpIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyOCIgaGVpZ2h0PSI1IiByeD0iMi41IiByeT0iMi41IiAvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMjgiIHJ4PSIyLjUiIHJ5PSIyLjUiIC8+CiAgPC9nPgo8L3N2Zz4=),
                    url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgMjUiIHdpZHRoPSI2MCIgaGVpZ2h0PSI0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBmaWxsPSJoc2woMCwgMCUsIDkyJSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwLCAyNSkgcm90YXRlKC0xMzUpIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyOCIgaGVpZ2h0PSI1IiByeD0iMi41IiByeT0iMi41IiAvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMjgiIHJ4PSIyLjUiIHJ5PSIyLjUiIC8+CiAgPC9nPgo8L3N2Zz4=);
  background-position: 50% 10px, 50% 158px;
  background-repeat: no-repeat;
}

.dtp-main-section.dtp-view-time {
  background-position: 50% 22px, 50% 146px;
}

.dtp-table {
  border-collapse: collapse;
  margin: 0;
  max-width: 252px;
  width: 252px;
}

.dtp-table th,
.dtp-table td {
  padding: 0;
}

.dtp-th-day,
.dtp-td-day {
  border: none;
  height: 28px;
  line-height: 28px;
  padding: 0;
  width: 36px;
}

.dtp-select-day {
  cursor: pointer;
}

.dtp-table .dtp-th-day  {
  font-weight: normal;
  padding: 0;
  text-align: center;
  width: 36px;
}

.dtp-th-day .dtp-hover-span,
.dtp-td-day .dtp-hover-span {
  border-radius: 19px;
  display: block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: 28px;
}

.dtp-td-day:hover .dtp-hover-span,
.dtp-td-years .dtp-hover-span:hover,
.dtp-td-months .dtp-hover-span:hover {
  box-shadow: 1px 1px 4px hsla(0, 0%, 0%, .2),
              0 0 2px hsla(0, 0%, 0%, .2);
}

.dtp-selected-day > .dtp-hover-span  {
  background-color: hsl(210, 100%, 50%);
  color: white;
}

.dtp-table .dtp-td-years,
.dtp-table .dtp-td-months {
  height: 32px;
  line-height: 32px;
  padding: 4px 0;
  text-align: center;
  width: 88px;
}

.dtp-time-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.dtp-time-controls {
  display: flex;
  flex-direction: column;
}

.dtp-time-controls .dtp-hover-span {
  height: 32px;
  line-height: 32px;
}

.dtp-digits {
  display: block;
  margin: auto;
}

.dtp-digits circle {
   fill: black;
}

.dtp-digit-display-light {
  fill: white;
}

.dtp-digit-display-light.on {
  fill: black;
}

.dtp-icon-chevron-left::before {
  content: 'chevron_left';
}

.dtp-icon-chevron-right::before {
  content: 'chevron_right';
}

.dtp-icon-arrow-drop-up::before {
  content: 'arrow_drop_up';
}

.dtp-icon-event::before {
  content: 'event';
}

.dtp-icon-schedule::before {
  content: 'schedule';
}

.dtp-icon-adjust::before {
  content: 'adjust';
}

.dtp-icon-cancel::before {
  content: 'cancel';
}

.dtp-icon-expand-less::before {
  content: 'expand_less';
}

.dtp-icon-expand-more::before {
  content: 'expand_more';
}

.dtp-transparent {
  color: transparent;
}