@namespace url(http://www.w3.org/1999/xhtml);

input.picking {
  color: white;
  background: rgb(51, 153, 255);
}

.pickerButton {
  color: rgb(67, 105, 131);
  cursor: pointer;
}

input:disabled + .pickerButton {
  cursor: default;
  opacity: 0.5;
}

.picker {
  display: block;
  position: absolute;
  color: black;
  background: white;
  z-index: 999999;
  text-align: left;
  white-space: normal;
  font-weight: normal;
  border: 1px solid black;
  border-radius: 1em;
  border-top-left-radius: 0;
  padding: 0.5em;
  box-shadow: 0.5ex 0.5ex 0.5ex 0 rgba(0, 0, 0, 0.6);
  cursor: default;
  outline: none;
}

.picker .swiping {
  border-radius: 0.5em;
  box-shadow: 0 0 0.5em rgb(0, 255, 0);
}

.picker .commands {
  display: block;
  margin-left: 0.7ex;
  margin-bottom: 0.7ex;
}

.picker .command {
  display: block;
  margin-top: 0.5em;
}

.picker .command * {
  color: rgb(67, 105, 131);
  cursor: pointer;
}

.date.picker {
  width: 12em;
}

.date.picker .scrollZone {
  display: block;
}

.date.picker .month {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 120%;
}

.date.picker .month .prev {
  float: left;
}

.date.picker .month .next {
  float: right;
}

.date.picker .calendar {
  clear: both;
  display: table;
  width: 100%;
  margin-top: 0.4em;
  margin-bottom: 0.3em;
}

.date.picker .calendar .weekDays,
.date.picker .calendar .week {
  display: table-row;
}

.date.picker .calendar .weekDay,
.date.picker .calendar .day {
  display: table-cell;
  text-align: right;
  padding-right: 0.5ex;
  vertical-align: middle;
}

.date.picker .calendar .weekDay {
  font-weight: bold;
}

.date.picker .month .prev,
.date.picker .month .next,
.date.picker .calendar .day:not(.blank) {
  cursor: pointer;
}

.date.picker .calendar .day.selected {
  color: white;
  background: rgb(51, 153, 255);
  border-radius: 0.5em;
}

.time.picker,
.duration.picker {
  width: 12em;
}

.time.picker .clock,
.duration.picker .clock {
  width: 100%;
  display: table;
}

.time.picker .clock > *,
.duration.picker .clock > * {
  display: table-cell;
  text-align: center;
}

.time.picker .clock .component .current,
.time.picker .clock .separator,
.duration.picker .clock .component .current,
.duration.picker .clock .separator {
  font-size: 200%;
}

.time.picker .clock.twentyFour .component:not(.hour),
.time.picker .clock.twentyFour .separator {
  color: grey;
}

.time.picker .clock .component,
.duration.picker .clock .component {
  width: 24.167%;
  position: relative;
  padding-top: 1.1em;
  padding-bottom: 1.1em;
}

.time.picker .clock .separator,
.duration.picker .clock .separator {
  width: 6.25%;
}

.time.picker .clock .component .inc,
.time.picker .clock .component .dec,
.duration.picker .clock .component .inc,
.duration.picker .clock .component .dec {
  position: absolute;
  left: 0;
  right: 0;
}

.time.picker .clock .component .inc,
.duration.picker .clock .component .inc {
  top: 0;
}

.time.picker .clock .component .dec,
.duration.picker .clock .component .dec {
  bottom: 0;
}

.time.picker .clock .component .inc *,
.time.picker .clock .component .dec *,
.duration.picker .clock .component .inc *,
.duration.picker .clock .component .dec * {
  line-height: 1;
  cursor: pointer;
}

.time.picker .clock.twentyFour .component:not(.hour) .inc *,
.time.picker .clock.twentyFour .component:not(.hour) .dec * {
  cursor: default;
}

.time.picker .clock .pick,
.duration.picker .clock .pick {
  cursor: pointer;
  vertical-align: middle;
  color: rgb(0, 204, 0);
  font-weight: bold;
  width: 15%;
}