@mokcj0825/react-date-picker/dist/Datepicker.css

A customizable date picker component for React applications with locale support and viewport-aware positioning

.react-datepicker-wrapper *{box-sizing:border-box;margin:0;padding:0}.react-datepicker-wrapper select{background:none;border:none;text-align:center}.react-datepicker-wrapper .datepicker{display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:relative}.react-datepicker-wrapper .rhombus{background:#f0f0f0;border-left:1px solid #d1d5db;border-top:1px solid #d1d5db;height:12px;left:20px;position:absolute;top:-6px;transform:rotate(45deg);width:12px;z-index:1001}.react-datepicker-wrapper .dropdownContainer{left:0;position:absolute;top:calc(100% + 10px);z-index:1000}.react-datepicker-wrapper .triggerButton{align-items:center;background:#fff;border:1px solid #d1d5db;border-radius:6px;color:#6c6c6c;cursor:pointer;display:flex;gap:8px;padding:8px 12px;position:relative;transition:border-color .2s}.react-datepicker-wrapper .triggerButton:hover{border-color:#9ca3af}.react-datepicker-wrapper .calendarIcon{color:#6c6c6c}.react-datepicker-wrapper .dropdown{background:#f0f0f0;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);box-sizing:border-box;height:auto;left:0;padding-top:8px;position:relative;top:0;width:253px}.react-datepicker-wrapper .header{align-items:center;box-sizing:border-box;display:flex;height:33px;justify-content:space-between;padding:8px 0}.react-datepicker-wrapper .navigation{align-items:center;display:flex;gap:8px}.react-datepicker-wrapper .navButton{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:32px;justify-content:center;transition:background-color .2s;width:32px}.react-datepicker-wrapper .navButton:disabled{cursor:not-allowed;opacity:.5}.react-datepicker-wrapper .selectors{display:flex;gap:8px}.react-datepicker-wrapper .monthSelect,.react-datepicker-wrapper .yearSelect{background:#fff;border:1px solid #d1d5db;border-radius:4px;font-size:14px;padding:4px 8px}.react-datepicker-wrapper .weekdays{border-bottom:1px solid #aeaeae;display:flex;flex-direction:row;justify-content:center}.react-datepicker-wrapper .weekday{color:#000;font-size:12px;font-weight:500;line-height:1.7rem;margin:.166rem;text-align:center;width:1.7rem}.react-datepicker-wrapper .calendar{background-color:#fff;border-bottom-left-radius:8px;border-bottom-right-radius:8px;display:grid;gap:2px;grid-template-columns:repeat(7,1fr);padding:8px}.react-datepicker-wrapper .calendarDay{align-items:center;background:transparent;border:none;border-radius:4px;cursor:pointer;display:flex;font-size:12.8px;font-weight:400;justify-content:center;line-height:27.2px;transition:background-color .2s;width:27.1875px}.react-datepicker-wrapper .calendarDay:hover:not(.disabled){background-color:#464646;color:#fff}.react-datepicker-wrapper .selected{background-color:#3b82f6!important;color:#fff}.react-datepicker-wrapper .today{border:2px solid #3b82f6}.react-datepicker-wrapper .disabled{color:#d1d5db;cursor:not-allowed}.react-datepicker-wrapper .disabled:hover{background-color:transparent!important}.react-datepicker-wrapper[data-theme=dark] .triggerButton{background:#a5a5a5;border-color:transparent;color:#fff}.react-datepicker-wrapper[data-theme=dark] .calendarIcon,.react-datepicker-wrapper[data-theme=dark] select{color:#fff}.react-datepicker-wrapper[data-theme=dark] .dropdown{background:#464646;border-color:#374151;color:#fff}.react-datepicker-wrapper[data-theme=dark] .rhombus{background:#464646;border-left-color:#374151;border-top-color:#374151}.react-datepicker-wrapper[data-theme=dark] .navButton:not(:disabled){color:#fff}.react-datepicker-wrapper[data-theme=dark] .monthSelect,.react-datepicker-wrapper[data-theme=dark] .yearSelect{background:#374151;border-color:#4b5563;color:#fff}.react-datepicker-wrapper[data-theme=dark] .calendar,.react-datepicker-wrapper[data-theme=dark] .calendarDay:hover:not(.disabled){background-color:#464646;color:#fff}.react-datepicker-wrapper[data-theme=dark] .disabled{color:#4b5563}.react-datepicker-wrapper[data-theme=dark] .weekday{color:#d1d5db}