reactjs-datetime-range-picker/dist/style.css

ReactJS datetime range picker with daily, weekly, monthly, quarterly & yearly levels

:root{--default-rdtrp-primary-color: #f44336;--default-rdtrp-primary-hover-color: #d2190b;--default-rdtrp-primary-text-color: #333333;--default-rdtrp-secondary-text-color: #b3b3b3;--default-rdtrp-icon-color: #cccccc;--default-rdtrp-disabled-color: #e6e6e6;--default-rdtrp-weekdays-color: #ffc266;--default-rdtrp-range-button-background-color: #f2f2f2;--default-rdtrp-range-button-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .08);--default-rdtrp-border-radius: 8px}.default-input-class{border:1px solid #ccc;border-radius:8px;padding:8px}.default-select-class{border:1px solid #ccc;border-radius:8px;padding:4px}.default-button-class{border:1px solid #ccc;border-radius:var(--rdtrp-border-radius, var(--default-rdtrp-border-radius));padding:4px;background-color:var(--rdtrp-range-button-background-color, var(--default-rdtrp-range-button-background-color));color:var(--rdtrp-primary-color, var(--default-rdtrp-primary-color));line-height:30px;margin:0 3px 8px;cursor:pointer}.ngx-datetime-range-picker{position:relative;width:100%!important;font-size:16px}.ngx-datetime-range-picker .full-width{width:100%}.ngx-datetime-range-picker .timezone-info{font-size:95%;position:absolute;right:8px;top:8px;opacity:.6;font-weight:bolder}.ngx-datetime-range-picker .calendar-view{position:absolute;z-index:1;width:-moz-fit-content;width:fit-content;background-color:#fff;padding:12px 8px;margin-top:2px;border-radius:var(--rdtrp-border-radius, var(--default-rdtrp-border-radius));box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.ngx-datetime-range-picker .calendar-view .date-select .date-view{margin:0}.ngx-datetime-range-picker .calendar-view:before,.ngx-datetime-range-picker .calendar-view:after{position:absolute;display:inline-block;content:""}.ngx-datetime-range-picker .timezone-select{font-size:90%;display:flex;margin-bottom:6px;flex-direction:column;align-items:center}.ngx-datetime-range-picker .timezone-select .currentTime{display:inline-block}.ngx-datetime-range-picker .timezone-select .timeZones{display:flex;white-space:nowrap}.ngx-datetime-range-picker .timezone-select .currentTime{white-space:nowrap;right:8px}.ngx-datetime-range-picker .timezone-select .timezone{display:inline-block;cursor:pointer}.ngx-datetime-range-picker .timezone-select .timezone:not(:last-child){margin-right:4px}.ngx-datetime-range-picker .timezone-select .today-text{font-weight:700;text-decoration:underline}.ngx-datetime-range-picker .active-timezone{color:var(--rdtrp-primary-color, var(--default-rdtrp-primary-color));font-weight:bolder}.ngx-datetime-range-picker .dateTitleInput .mdc-text-field--filled:not(.mdc-text-field--disabled),.ngx-datetime-range-picker .date-dropdown-container .mdc-text-field--filled:not(.mdc-text-field--disabled),.ngx-datetime-range-picker .time-item-container .mdc-text-field--filled:not(.mdc-text-field--disabled),.ngx-datetime-range-picker .dateTitleInput .mat-mdc-form-field-focus-overlay,.ngx-datetime-range-picker .date-dropdown-container .mat-mdc-form-field-focus-overlay,.ngx-datetime-range-picker .time-item-container .mat-mdc-form-field-focus-overlay{background-color:transparent}.ngx-datetime-range-picker .dateTitleInput .mdc-text-field--outlined .mat-mdc-form-field-infix,.ngx-datetime-range-picker .date-dropdown-container .mdc-text-field--outlined .mat-mdc-form-field-infix,.ngx-datetime-range-picker .time-item-container .mdc-text-field--outlined .mat-mdc-form-field-infix,.ngx-datetime-range-picker .dateTitleInput .mdc-text-field--no-label .mat-mdc-form-field-infix,.ngx-datetime-range-picker .date-dropdown-container .mdc-text-field--no-label .mat-mdc-form-field-infix,.ngx-datetime-range-picker .time-item-container .mdc-text-field--no-label .mat-mdc-form-field-infix{padding:4px 0;min-height:24px}.ngx-datetime-range-picker .date-dropdown-container,.ngx-datetime-range-picker .time-item-container{display:flex;justify-content:center}.ngx-datetime-range-picker .date-dropdown-container .mat-mdc-form-field,.ngx-datetime-range-picker .time-item-container .mat-mdc-form-field{width:100%}.ngx-datetime-range-picker .date-dropdown-container .mat-mdc-text-field-wrapper,.ngx-datetime-range-picker .time-item-container .mat-mdc-text-field-wrapper{padding:0}.ngx-datetime-range-picker .date-dropdown-container .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix,.ngx-datetime-range-picker .time-item-container .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{border-top:0;width:auto}.ngx-datetime-range-picker .date-dropdown-container .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-select-arrow-wrapper,.ngx-datetime-range-picker .time-item-container .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-select-arrow-wrapper{width:24px;justify-content:center}.ngx-datetime-range-picker .date-dropdown-container .mat-mdc-text-field-wrapper .mdc-line-ripple:before,.ngx-datetime-range-picker .time-item-container .mat-mdc-text-field-wrapper .mdc-line-ripple:before,.ngx-datetime-range-picker .date-dropdown-container .mat-mdc-text-field-wrapper .mdc-line-ripple:after,.ngx-datetime-range-picker .time-item-container .mat-mdc-text-field-wrapper .mdc-line-ripple:after{border-bottom-width:0px}.ngx-datetime-range-picker .date-dropdown-container .date-dropdown,.ngx-datetime-range-picker .time-item-container .date-dropdown{margin:0 4px;width:50%}.ngx-datetime-range-picker .date-select{display:inline-flex}.ngx-datetime-range-picker .ranges{width:180px;margin:0 4px 0 12px;display:flex;flex-direction:column}.ngx-datetime-range-picker .ranges .calendar-range{width:100%;white-space:nowrap;cursor:pointer}.ngx-datetime-range-picker .ranges .active-range{background-color:var(--rdtrp-primary-color, var(--default-rdtrp-primary-color));border:1px solid var(--rdtrp-primary-color, var(--default-rdtrp-primary-color));color:#fff}.ngx-datetime-range-picker .ranges .active-range:hover{color:#fff;background-color:var(--rdtrp-primary-hover-color, var(--default-rdtrp-primary-hover-color));border-color:var(--rdtrp-primary-hover-color, var(--default-rdtrp-primary-hover-color))}.ngx-datetime-range-picker .ranges .range-select-button-container{white-space:nowrap;margin:auto 3px 0;display:flex;width:100%;justify-content:flex-end}.ngx-datetime-range-picker .ranges .range-select-button{width:50%;margin-bottom:0}.ngx-datetime-range-picker .ranges .range-select-button:first-child{margin-right:3px}.ngx-datetime-range-picker .ranges .range-select-button:last-child{margin-left:3px}.ngx-datetime-range-picker .ranges .range-select-apply-button{color:#fff;background-color:var(--rdtrp-primary-color, var(--default-rdtrp-primary-color));border:1px solid var(--rdtrp-primary-color, var(--default-rdtrp-primary-color))}.ngx-datetime-range-picker .calendar-container{display:flex;padding:0;margin:0}.ngx-datetime-range-picker .calendar{float:left;display:flex;flex-direction:column;width:auto}.ngx-datetime-range-picker .calendar:nth-child(2){margin-left:16px}.ngx-datetime-range-picker .calendar.left .calendar-table .calendar-side-container table td.in-range.active{border-top-left-radius:var(--rdtrp-border-radius, var(--default-rdtrp-border-radius));border-bottom-left-radius:var(--rdtrp-border-radius, var(--default-rdtrp-border-radius))}.ngx-datetime-range-picker .calendar.left .calendar-table .calendar-side-container table td.active:not(.in-range){border-radius:var(--rdtrp-border-radius, var(--default-rdtrp-border-radius))}.ngx-datetime-range-picker .calendar.right .calendar-table .calendar-side-container table td.in-range.active{border-top-right-radius:var(--rdtrp-border-radius, var(--default-rdtrp-border-radius));border-bottom-right-radius:var(--rdtrp-border-radius, var(--default-rdtrp-border-radius))}.ngx-datetime-range-picker .calendar.right .calendar-table .calendar-side-container table td.active:not(.in-range){border-radius:var(--rdtrp-border-radius, var(--default-rdtrp-border-radius))}.ngx-datetime-range-picker .calendar .dateTitleInput .dateSelect{text-align:center}.ngx-datetime-range-picker .calendar .dateTitleInput .dateSelect:hover{pointer-events:none;background:transparent;cursor:default}.ngx-datetime-range-picker .calendar .dateTitleInput i{position:absolute!important;top:11px!important;left:10px!important;color:var(--rdtrp-icon-color, var(--default-rdtrp-icon-color))!important}.ngx-datetime-range-picker .calendar .dateTitleInput .mat-mdc-text-field-wrapper .mdc-line-ripple:before,.ngx-datetime-range-picker .calendar .dateTitleInput .mat-mdc-text-field-wrapper .mdc-line-ripple:after{border-bottom-width:1px}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container .calendar-label-container{display:flex;width:100%;align-items:center}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container .calendar-label-container .calendar-label{text-align:center;position:relative;width:100%}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table{table-layout:fixed;min-width:100%;border-spacing:0;border-collapse:collapse}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table th,.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;white-space:nowrap;text-align:center;min-width:36px;padding:5px}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table th.calendar-week-day,.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.calendar-week-day{color:var(--rdtrp-weekdays-color, var(--default-rdtrp-weekdays-color));font-weight:400;font-size:95%}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table th.capitalize,.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.capitalize{text-transform:capitalize}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.active,.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table .fa.active{background-color:var(--rdtrp-primary-color, var(--default-rdtrp-primary-color))!important;color:#fff!important}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.available,.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table th.available{cursor:pointer;color:var(--rdtrp-primary-text-color, var(--default-rdtrp-primary-text-color))}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table th.available{width:32px}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.available:hover,.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table th.available:hover{background-color:#d9d9d9}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td{color:var(--rdtrp-secondary-text-color, var(--default-rdtrp-secondary-text-color))}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td .todayDate{font-size:6px}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.rowNumber{color:#999;font-size:82%;border-right:1px solid #cccccc;width:32px}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.rowNumberPlaceholder{font-size:82%;padding:0!important;min-width:0px!important}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.valid{cursor:pointer}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.in-range{background-color:#f5f5f5;color:var(--rdtrp-primary-color, var(--default-rdtrp-primary-color))}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.today.active div{border-bottom:2px solid #fff}.ngx-datetime-range-picker .calendar .calendar-table .calendar-side-container table td.today:not(.active) div{border-bottom:2px solid var(--rdtrp-primary-color, var(--default-rdtrp-primary-color))}.ngx-datetime-range-picker .disabled{color:var(--rdtrp-disabled-color, var(--default-rdtrp-disabled-color));pointer-events:none}.ngx-datetime-range-picker .month-select,.ngx-datetime-range-picker .year-select,.ngx-datetime-range-picker .timeItem-select{background:#fff;box-shadow:none}.ngx-datetime-range-picker .dropdown-menu{position:absolute;min-width:unset!important;font-size:95%;max-height:100px;overflow:auto}.ngx-datetime-range-picker .hide{display:none}.ngx-datetime-range-picker .show{display:block}.ngx-datetime-range-picker .divider{margin:8px 0;border-top:1px solid #ccc}.ngx-datetime-range-picker .vertical-divider{border-right:2px solid #ccc;margin:0 8px}.ngx-datetime-range-picker .time-picker-container{margin-top:auto;display:flex;flex-direction:column}.ngx-datetime-range-picker .time-picker-container .time-select{position:relative;text-align:center;display:flex;align-items:center}.ngx-datetime-range-picker .time-picker-container .time-select .clock-icon-container{display:flex;align-items:center}.ngx-datetime-range-picker .time-picker-container .time-select .time-item-container{width:50%;margin:0 4px}