.tribe-editor__day-picker-input.DayPickerInput { & > input { border: 1px solid #e1e3e6; color: #545d66; font-size: 16px; line-height: 24px; padding: 7px 15px; width: 100%; height: 40px; &:disabled { color: #AEB4BB; } } } /* ----------------------------------------------------------- DayPicker Input Calender Styles ----------------------------------------------------------- */ .tribe-editor__day-picker-input { .DayPickerInput-Overlay { padding: 20px; z-index: 10; } .DayPicker { width: 100%; } .DayPicker-Month { margin: 0; } .DayPicker-Caption > div, .DayPicker-Weekday, .DayPicker-Day { color: #545d66; font-family: 'Helvetica', 'sans-serif'; font-weight: normal; } .DayPicker-Caption > div { font-size: 16px; margin-bottom: 12px; text-align: center; } .DayPicker-Weekday { font-size: 12px; } .DayPicker-Day { font-size: 14px; &:hover { color: #007bb4; background-color: #ffffff; } } .DayPicker-Day--today { color: #545D66; } .DayPicker-Day--disabled { pointer-events: none; color: #cccccc; } .DayPicker-Day--selected:not(.DayPicker-Day--outside) { border-radius: 0; background-color: #009fd4; color: #ffffff; &:hover { background-color: #007bb4; color: #ffffff; } } .DayPicker-NavButton--prev { left: 0; top: 0; } .DayPicker-NavButton--next { right: 0; top: 0; } .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside) { &:hover { background-color: #ffffff; } } .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) { background-color: #e7f5fa; color: #545d66; &:hover { color: #007bb4; } } }