/* ----------- SpinDateSelectorView ---------- */
#spin-date-picker .picker-bar {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  width: 85%;
  font-size: 8px;
}

#spin-date-picker .picker-bar-gradient {
  -moz-border-top-colors:
    rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3)
    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1)
    rgba(0, 0, 0, 0.05);

  -moz-border-bottom-colors:
    rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3)
    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1)
    rgba(0, 0, 0, 0.05);

  border-top: solid 0.7rem;
  border-bottom: solid 0.7rem;
  border-left:  1px solid #111;
  border-right: 1px solid #111;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -moz-box-sizing: border-box;
}

#spin-date-picker .picker-container {
  width: 100%;
  position: relative;
  padding-top: 8.5rem;
  height: 16rem;
  overflow: hidden;
}

#spin-date-picker .value-indicator-wrapper {
  -moz-border-top-colors:
    rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15)
    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3)  rgba(0, 0, 0, 0.4)
    rgba(0, 0, 0, 0.5);

  -moz-border-bottom-colors:
    rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15)
    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.4)
    rgba(0, 0, 0, 0.5);

  border-top: solid 0.7rem;
  border-bottom: solid 0.7rem;
  position: absolute;
  height: 6rem;
  width: 100%;
  pointer-events: none;
}

#spin-date-picker .value-indicator-hover {
  pointer-events: none;
  background-color: #00A5C5;
  position: absolute;
  width: 100%;
  height: 100%;
  right:0;
}

div.animation-on {
  -moz-transition-duration: 0.5s;
  -moz-transition-property: top, left;
}

.picker-unit {
  position: relative;
  font: 2.5rem/8rem 'MozTT',sans-serif;
  color: #FFF;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 6rem;
  pointer-events: none;
}

#spin-date-picker .picker-bar-background {
  background: url("../themes/default/images/ui/time_pattern.png") repeat scroll left top transparent;
  position: absolute;
  width: 73px;
  height: 100%;
  right: 0;
  top: 0;
}

#spin-date-picker .left-picker-separator {
  position: absolute;
  width: 0.2rem;
  height: 100%;
  top: 0;
  left: 54px;
  background: -moz-linear-gradient(center left, #555 50%, #000 50%);
  pointer-events: none;
}

#spin-date-picker .right-picker-separator {
  position: absolute;
  width: 0.2rem;
  height: 100%;
  top: 0;
  right: 73px;
  background: -moz-linear-gradient(center left, #555 50%, #000 50%);
  pointer-events: none;
}

#spin-date-picker .value-picker-date-wrapper {
  position: absolute;
  width: 54px;
  height: 100%;
  top: 10em;
  left: 0;
}

#spin-date-picker .value-picker-month-wrapper {
  position: absolute;
  width: -moz-calc(100% - 127px);
  height: 100%;
  top: 10em;
  left: 54px;
}

#spin-date-picker .value-picker-year-wrapper {
  position: absolute;
  width: 73px;
  height: 100%;
  top: 10em;
  right: 0px;
}

#spin-date-picker .value-picker-date {
  position: relative;
  -moz-user-select: none;
  text-align: center;
  width: 100%;
}

#spin-date-picker .value-picker-month {
  position: relative;
  -moz-user-select: none;
  width: 100%;
}

#spin-date-picker .value-picker-year {
  position: relative;
  -moz-user-select: none;
  width: 100%;
}

#spin-date-picker .picker-container.YMD .value-picker-year-wrapper {
  right: auto;
  left: 0;
}

#spin-date-picker .picker-container.YMD .value-picker-month-wrapper {
  right: auto;
  left: 73px;
}

#spin-date-picker .picker-container.YMD .value-picker-date-wrapper {
  right: 0;
  left: auto;
}

#spin-date-picker .picker-container.YMD .left-picker-separator {
  right: auto;
  left: 73px;
}

#spin-date-picker .picker-container.YMD .right-picker-separator {
  right: 54px;
  left: auto;
}

#spin-date-picker .picker-container.YMD .picker-bar-background {
  right: auto;
  left: 0px;
}


#spin-date-picker .picker-container.DMY .value-picker-year-wrapper {
  right: 0;
  left: auto;
}

#spin-date-picker .picker-container.DMY .value-picker-month-wrapper {
  right: auto;
  left: 54px;
}

#spin-date-picker .picker-container.DMY .value-picker-date-wrapper {
  right: auto;
  left: 0;
}

#spin-date-picker .picker-container.DMY .left-picker-separator {
  right: auto;
  left: 54px;
}

#spin-date-picker .picker-container.DMY .right-picker-separator {
  right: 73px;
  left: auto;
}

#spin-date-picker .picker-container.DMY .picker-bar-background {
  right: 0px;
  left: auto;
}


#spin-date-picker .picker-container.MDY .value-picker-year-wrapper {
  right: 0;
  left: auto;
}

#spin-date-picker .picker-container.MDY .value-picker-month-wrapper {
  right: auto;
  left: 0px;
}

#spin-date-picker .picker-container.MDY .value-picker-date-wrapper {
  right: auto;
  left: -moz-calc(100% - 127px);
}

#spin-date-picker .picker-container.MDY .left-picker-separator {
  right: auto;
  left: -moz-calc(100% - 127px);
}

#spin-date-picker .picker-container.MDY .right-picker-separator {
  right: 73px;
  left: auto;
}

#spin-date-picker .picker-container.MDY .picker-bar-background {
  right: 0px;
  left: auto;
}