react-date-picker/theme/default.css

A carefully crafted date picker for React

.react-date-field--theme-default {
  border: 1px solid gray; }
  .react-date-field--theme-default.react-date-field--focused {
    border: 1px solid #349aef; }
  .react-date-field--theme-default > .react-date-field__picker {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.34375);
    border: 1px solid #349aef; }
  .react-date-field--theme-default .react-date-field__calendar-icon {
    border: 2px solid gray; }
    .react-date-field--theme-default .react-date-field__calendar-icon:before, .react-date-field--theme-default .react-date-field__calendar-icon:after {
      width: 2px;
      height: 5px;
      top: -5px; }
    .react-date-field--theme-default .react-date-field__calendar-icon:before {
      left: 2px; }
    .react-date-field--theme-default .react-date-field__calendar-icon:after {
      right: 1px;
      left: auto; }
  .react-date-field--theme-default .react-date-field__clear-icon {
    color: gray;
    fill: gray; }
  .react-date-field--theme-default .react-date-field__clear-icon:hover {
    color: #4d4d4d;
    fill: #4d4d4d; }
  .react-date-field--theme-default.react-date-field--focused .react-date-field__clear-icon {
    color: #349aef;
    fill: #349aef; }
  .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:hover {
    border-color: #4d4d4d;
    cursor: pointer; }
    .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:hover:after, .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:hover:before,
    .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:hover .react-date-field__calendar-icon-inner {
      background: #4d4d4d; }
  .react-date-field--theme-default .react-date-field__calendar-icon:after,
  .react-date-field--theme-default .react-date-field__calendar-icon:before {
    background: gray; }
  .react-date-field--theme-default .react-date-field__calendar-icon-inner {
    background: gray; }
  .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon,
  .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:hover,
  .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:active,
  .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:active {
    border-color: #349aef; }
    .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:after, .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:before,
    .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon .react-date-field__calendar-icon-inner,
    .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:hover:after,
    .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:hover:before,
    .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:hover .react-date-field__calendar-icon-inner,
    .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:active:after,
    .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:active:before,
    .react-date-field--theme-default.react-date-field--focused .react-date-field__calendar-icon:active .react-date-field__calendar-icon-inner,
    .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:active:after,
    .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:active:before,
    .react-date-field--theme-default:not(.react-date-field--disabled) .react-date-field__calendar-icon:active .react-date-field__calendar-icon-inner {
      background: #349aef; }

.react-date-picker__clock--theme-default .react-date-picker__clock-hand-second {
  background: red; }

.react-date-picker__clock--theme-default .react-date-picker__clock-center {
  background: #e6e6e6; }

.react-date-picker__clock--theme-default .react-date-picker__clock-overlay {
  background: white;
  border-style: solid;
  border-color: gray; }

.react-date-picker__footer--theme-default {
  padding: 5px; }
  .react-date-picker__footer--theme-default .react-date-picker__footer-button {
    padding: 3px 4px;
    outline: none;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    border: 1px solid gray;
    background: white;
    font-size: 0.9em; }
    .react-date-picker__footer--theme-default .react-date-picker__footer-button:active {
      top: 1px; }
    .react-date-picker__footer--theme-default .react-date-picker__footer-button:not(.react-date-picker__footer-button--disabled) {
      cursor: pointer; }
      .react-date-picker__footer--theme-default .react-date-picker__footer-button:not(.react-date-picker__footer-button--disabled):hover {
        background: #349aef;
        border-color: #349aef;
        color: white; }
  .react-date-picker__footer--theme-default .react-date-picker__footer-button + .react-date-picker__footer-button {
    margin-left: 3px; }

.react-date-picker__date-format-spinner--theme-default {
  border: 1px solid gray; }
  .react-date-picker__date-format-spinner--theme-default input {
    padding: 5px;
    border: none;
    outline: none; }
  .react-date-picker__date-format-spinner--theme-default:not([disabled]).react-date-picker__date-format-spinner--focused {
    border: 1px solid #349aef; }
  .react-date-picker__date-format-spinner--theme-default:not([disabled]) .react-date-picker__date-format-spinner-arrow {
    position: relative;
    cursor: pointer; }
    .react-date-picker__date-format-spinner--theme-default:not([disabled]) .react-date-picker__date-format-spinner-arrow:active {
      fill: #349aef;
      top: 1px; }

.react-date-picker__year-view--theme-default {
  border: 1px solid gray;
  padding: 2px; }
  .react-date-picker__year-view--theme-default .react-date-picker__year-view-month {
    padding: 5px;
    cursor: pointer;
    border: 2px solid transparent; }
    .react-date-picker__year-view--theme-default .react-date-picker__year-view-month--disabled {
      color: #D8D8D8; }
  .react-date-picker__year-view--theme-default .react-date-picker__year-view-month--active {
    border: 2px solid #349aef; }
  .react-date-picker__year-view--theme-default .react-date-picker__year-view-month--value {
    color: white;
    background: #349aef padding-box;
    border: 2px solid #349aef; }
  .react-date-picker__year-view--theme-default .react-date-picker__year-view-month--active.react-date-picker__year-view-month--value {
    background: #4ca6f1 padding-box; }

.react-date-picker__decade-view--theme-default {
  border: 1px solid gray;
  padding: 2px; }
  .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-arrow {
    cursor: pointer;
    position: relative;
    fill: #676767;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-arrow--disabled {
      fill: #C5C5C5; }
    .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-arrow:not(.react-date-picker__decade-view-arrow--disabled):active {
      left: 1px; }
  .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-year {
    padding: 5px;
    cursor: pointer;
    border: 2px solid transparent; }
    .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-year--disabled {
      color: #D8D8D8; }
  .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-year--active {
    border: 2px solid #349aef; }
  .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-year--value {
    color: white;
    background: #349aef padding-box;
    border: 2px solid #349aef; }
  .react-date-picker__decade-view--theme-default .react-date-picker__decade-view-year--active.react-date-picker__decade-view-year--value {
    background: #4ca6f1 padding-box; }

.react-date-picker__history-view--theme-default {
  border: 1px solid gray;
  padding: 2px; }
  .react-date-picker__history-view--theme-default .react-date-picker__year-view--theme-default,
  .react-date-picker__history-view--theme-default .react-date-picker__decade-view--theme-default {
    border: none; }

.react-date-picker__nav-bar .react-date-picker__history-view--theme-default {
  font-size: 0.833em; }

.react-date-picker__nav-bar--theme-default {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 1.2rem; }
  .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-secondary-arrow {
    margin-right: 7px; }
  .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-history-view {
    background: white; }
  .react-date-picker__nav-bar--theme-default.react-date-picker__nav-bar--with-history-view .react-date-picker__nav-bar-date {
    cursor: pointer; }
  .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-arrow {
    position: relative;
    fill: #676767; }
    .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-arrow--disabled {
      fill: #C5C5C5; }
    .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-arrow:not(.react-date-picker__nav-bar-arrow--disabled):hover {
      fill: #9a9a9a; }
    .react-date-picker__nav-bar--theme-default .react-date-picker__nav-bar-arrow:not(.react-date-picker__nav-bar-arrow--disabled):active {
      top: 1px; }

.react-date-picker__calendar--theme-default {
  border: 1px solid gray; }
  .react-date-picker__calendar--theme-default .react-date-picker__month-view--theme-default {
    border: none; }
  .react-date-picker__calendar--theme-default .react-date-picker__clock {
    margin: 10px; }

.react-date-picker__calendar--theme-default,
.react-date-picker__month-view--theme-default,
.react-date-picker__date-field--theme-default,
.react-date-picker__transition-month-view--theme-default {
  font-size: 16px;
  font-size: 1em; }

.react-date-picker__transition-month-view--theme-default {
  border: 1px solid gray; }
  .react-date-picker__transition-month-view--theme-default .react-date-picker__month-view--theme-default,
  .react-date-picker__transition-month-view--theme-default .react-date-picker__multi-month-view--theme-default,
  .react-date-picker__transition-month-view--theme-default .react-date-picker__calendar--theme-default {
    border: none; }

.react-date-picker__navigation-view--theme-default {
  border: 1px solid gray; }
  .react-date-picker__navigation-view--theme-default .react-date-picker__month-view,
  .react-date-picker__navigation-view--theme-default .react-date-picker__multi-month-view {
    border: none; }

.react-date-picker__month-view--theme-default {
  background: white;
  position: relative;
  border: 1px solid gray;
  overflow: hidden; }
  .react-date-picker__month-view--theme-default .react-date-picker__month-view-week-day-names {
    text-transform: uppercase; }
  .react-date-picker__month-view--theme-default .react-date-picker__month-view-week-number {
    color: #B1B1B1;
    font-size: 0.8em; }
  .react-date-picker__month-view--theme-default .react-date-picker__month-view-cell {
    min-width: 40px; }
  .react-date-picker__month-view--theme-default .react-date-picker__month-view-day {
    z-index: 10; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day .react-date-picker__month-view-day-text {
      border: 2px solid transparent;
      border-radius: 50%;
      cursor: pointer;
      text-align: center;
      min-width: 40px;
      min-height: 40px;
      max-width: 40px;
      max-height: 40px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day .react-date-picker__month-view-day-text:hover {
        background: #D8EDFF padding-box; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range {
      overflow: hidden; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text {
        position: relative; }
        .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text:before {
          position: absolute;
          height: 100%;
          top: 0px;
          bottom: 0px;
          width: 500%;
          background: #349aef;
          z-index: -1;
          content: ''; }
        .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text:before {
          right: 50%; }
        .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text:after {
          left: 50%; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--hover-range-start .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--range-start:not(.react-date-picker__month-view-day--in-hover-range) .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--hover-range-start .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--range-start:not(.react-date-picker__month-view-day--in-hover-range) .react-date-picker__month-view-day-text:before {
        display: none; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--hover-range-end .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--range-end:not(.react-date-picker__month-view-day--in-hover-range) .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--hover-range-end .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--range-end:not(.react-date-picker__month-view-day--in-hover-range) .react-date-picker__month-view-day-text:after {
        display: none; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--hover-range-start:not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--hover-range-start:not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text:after {
        display: inherit; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--hover-range-end:not(.react-date-picker__month-view-day--hover-range-start) .react-date-picker__month-view-day-text:before, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--hover-range-end:not(.react-date-picker__month-view-day--hover-range-start) .react-date-picker__month-view-day-text:before {
        display: inherit; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--active:not(.react-date-picker__month-view-day--range-start):not(.react-date-picker__month-view-day--range-end):not(.react-date-picker__month-view-day--hover-range-start):not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--active:not(.react-date-picker__month-view-day--range-start):not(.react-date-picker__month-view-day--range-end):not(.react-date-picker__month-view-day--hover-range-start):not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text {
        background: #93c9f6 padding-box; }
        .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--active:not(.react-date-picker__month-view-day--range-start):not(.react-date-picker__month-view-day--range-end):not(.react-date-picker__month-view-day--hover-range-start):not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--active:not(.react-date-picker__month-view-day--range-start):not(.react-date-picker__month-view-day--range-end):not(.react-date-picker__month-view-day--hover-range-start):not(.react-date-picker__month-view-day--hover-range-end) .react-date-picker__month-view-day-text:hover {
          background: #93c9f6 padding-box; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--value .react-date-picker__month-view-day-text {
      border: 2px solid transparent;
      background: #349aef padding-box;
      color: white; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--value .react-date-picker__month-view-day-text:hover {
        background: #349aef padding-box; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range.react-date-picker__month-view-day--today-highlight .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-range.react-date-picker__month-view-day--today-highlight .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--value.react-date-picker__month-view-day--today-highlight .react-date-picker__month-view-day-text {
      color: #ffccff; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text {
      background: #d9ecfc padding-box; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:after, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--in-hover-range .react-date-picker__month-view-day-text:before {
        background: #d9ecfc; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--hover-range-start .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--hover-range-end .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--range-start .react-date-picker__month-view-day-text, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--range-end .react-date-picker__month-view-day-text {
      background: #63b2f3 padding-box; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--hover-range-start .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--hover-range-end .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--range-start .react-date-picker__month-view-day-text:hover, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--range-end .react-date-picker__month-view-day-text:hover {
        background: #63b2f3 padding-box; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--active .react-date-picker__month-view-day-text {
      border: 2px solid #349aef; }
  .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--prev-month,
  .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--next-month {
    color: #b3b3b3; }
  .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--weekend-highlight {
    color: red; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--weekend-highlight.react-date-picker__month-view-day--prev-month, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--weekend-highlight.react-date-picker__month-view-day--next-month {
      color: #d68e8e; }
  .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--today-highlight {
    color: magenta; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--today-highlight.react-date-picker__month-view-day--prev-month, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--today-highlight.react-date-picker__month-view-day--next-month {
      color: #ff66ff; }
  .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--disabled {
    color: #D8D8D8; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--disabled .react-date-picker__month-view-day-text {
      cursor: default; }
      .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--disabled .react-date-picker__month-view-day-text:hover {
        background: none; }
    .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--disabled.react-date-picker__month-view-day--prev-month, .react-date-picker__month-view--theme-default .react-date-picker__month-view-day--disabled.react-date-picker__month-view-day--next-month {
      color: #D8D8D8; }

.react-date-picker__multi-month-view {
  border: 1px solid gray; }
  .react-date-picker__multi-month-view .react-date-picker__month-view {
    border: none; }