react-calendar-range-picker/lib/react-calendar-range-picker.css

A react component for date time range picker.

:root{--item-width:25px;--item-height:25px}.react-calendar-range-picker-calendar--range{display:inline-block;vertical-align:top}.react-calendar-range-picker{background-color:#fff;box-shadow:1px 1px 4px 0 rgba(0,0,0,.1),0 0 4px 0 rgba(0,0,0,.08);display:inline-block;opacity:0;padding:20px;position:relative;transform:translateY(-1em) perspective(600px) rotateX(10deg);transition:all .3s}.react-calendar-range-picker.visible{opacity:1;transform:translateY(0) perspective(600px) rotateX(0);z-index:1}.react-calendar-range-picker__calendar{display:inline-block;margin-bottom:40px;position:relative;vertical-align:top}.react-calendar-range-picker__calendar:before{content:"";display:inline-block;height:100%;vertical-align:middle}.react-calendar-range-picker__close{color:#adb5bd;cursor:pointer;position:absolute;right:10px;top:10px}.react-calendar-range-picker__clear.disabled{cursor:not-allowed}.react-calendar-range-picker__clear{color:#adb5bd;cursor:pointer;position:absolute;right:2%;top:50%;transform:translateY(-50%)}@media only screen and (max-width:900px){.react-calendar-range-picker-calendar--range,.react-minimal-datetime-date-picker__divider{display:block}}.react-calendar-range-picker-dropdown{display:block;position:relative}.react-calendar-range-picker-dropdown.visible .react-calendar-range-picker-dropdown-calendar__menu{opacity:1;padding:10px;transform:translate3d(-50%,0,0) scaleX(1);transform:translate(-50%) scale(1)\9;z-index:1000}.react-calendar-range-picker-dropdown.visible .react-calendar-range-picker-dropdown-calendar__menu-no-effect{display:block}.react-calendar-range-picker-dropdown .react-calendar-range-picker-dropdown-calendar__menu{background-color:#fff;box-shadow:0 2px 8px 0 rgba(0,0,0,.3),0 0 1px 0 rgba(0,0,0,.12);left:50%;margin-top:30px;opacity:0;position:absolute;text-align:center;transform:translate3d(-50%,0,0) scaleY(0);transform:translate(-50%) scaleY(0)\9;transform-origin:0 0;transition:transform .4s,opacity .2s;width:280px;will-change:transform,opacity}.react-calendar-range-picker-dropdown .react-calendar-range-picker-dropdown-calendar__container{border-radius:3px;margin-top:10px;overflow:hidden}.react-calendar-range-picker-dropdown .react-calendar-range-picker-dropdown-calendar__item{cursor:pointer;display:block;line-height:20px;padding:1px 4px;transition:background-color .4s}.react-calendar-range-picker-dropdown-calendar__month{zoom:1;background-color:#fff;border-bottom:1px solid #f2f2f2;display:block}.react-calendar-range-picker-dropdown-calendar__month:after{clear:both;content:"\200B";display:block;height:0}.react-calendar-range-picker-dropdown-calendar__month-item{background-color:#fff;cursor:pointer;float:left;width:33.3%}.react-calendar-range-picker-dropdown-calendar__month-item>div{background-color:#fff;display:block;font-size:12px;margin:5px;padding:10px 2px;transition:all .3s}.react-calendar-range-picker-dropdown-calendar__month-item>div:hover{background-color:#74c0fc;color:#fff}.react-calendar-range-picker-dropdown-calendar__month-item.active>div{background-color:#339af0;color:#fff}.react-calendar-range-picker-dropdown .react-calendar-range-picker-dropdown-calendar__item:hover{background-color:#eee}.react-calendar-range-picker-dropdown-calendar__year{background-color:#fff;display:block;height:100%;overflow:hidden;position:absolute;width:100%}.react-calendar-range-picker-dropdown-calendar__year-item{background-color:#fff;cursor:pointer;display:table;float:left;height:100%;width:20%}.react-calendar-range-picker-dropdown-calendar__year-item>span{background-color:#fff;display:table-cell;font-size:12px;font-size:14px;height:100%;margin:2px;transition:all .3s;vertical-align:middle}.react-calendar-range-picker-dropdown-calendar__year-item>span:hover{background-color:#74c0fc;color:#fff}.react-calendar-range-picker-dropdown-calendar__year-item.active>span{background-color:#339af0;color:#fff}.react-calendar-range-picker-calendar__default-day,.react-calendar-range-picker-calendar__today{font-size:12px;margin-top:10px}.react-calendar-range-picker-calendar__today{left:0}.react-calendar-range-picker-calendar__default-day{right:0}.react-calendar-range-picker-calendar__default-day .react-calendar-range-picker-calendar__icon,.react-calendar-range-picker-calendar__today .react-calendar-range-picker-calendar__icon{font-size:15px}.react-calendar-range-picker-calendar__clicker{cursor:pointer}.react-calendar-range-picker__col{display:inline-block;vertical-align:middle}.react-calendar-range-picker-calendar__title{color:var(--oc-gray-8);cursor:pointer;line-height:17px;position:absolute;width:100%}.react-calendar-range-picker-calendar__title:hover{color:#74c0fc}.react-calendar-range-picker-calendar__inline-span span{display:inline-block;vertical-align:middle}.react-calendar-range-picker-calendar__inline-span:before{content:"";display:inline-block;height:100%;vertical-align:middle}.react-calendar-range-picker-calendar__content{display:block}.react-calendar-range-picker-calendar__icon{cursor:pointer;font-size:20px}.react-calendar-range-picker__col-0-5{width:5%}.react-calendar-range-picker__col-9{width:90%}.react-calendar-range-picker__col-3{width:25%}.react-calendar-range-picker__col-6{width:50%}.react-calendar-range-picker-calendar__header{display:block;text-align:center}.react-calendar-range-picker--inline-block{display:inline-block;vertical-align:middle}.react-calendar-range-picker-calendar__table{border-collapse:initial!important;border-collapse:collapse;display:table;margin:0 auto;width:100%}@media (-ms-high-contrast:none){.react-calendar-range-picker-calendar__table{border-collapse:separate;border-collapse:initial}}@supports (-ms-ime-align:auto){.react-calendar-range-picker-calendar__table{border-collapse:separate;border-collapse:initial}}.react-calendar-range-picker-calendar__table-row{display:table-row}.react-calendar-range-picker-calendar__table-cel{background-color:#fff;color:var(--oc-gray-7);cursor:default;display:table-cell;font-size:12px;height:25px;height:var(--item-height);padding:6px;text-align:center;transition:all .3s;vertical-align:middle;width:25px;width:var(--item-width)}.react-calendar-range-picker-calendar__table-cel.disabled{color:#adb5bd}.react-calendar-range-picker-calendar__table-cel.today{color:#fc7474}.react-calendar-range-picker-calendar__table-cel.marked{position:relative}.react-calendar-range-picker-calendar__table-cel.marked:after{background-color:#ced4da;border-radius:50%;bottom:3px;content:"";height:5px;left:50%;position:absolute;transform:translateX(-50%);width:5px}.react-calendar-range-picker-calendar__table-cel.active:not(.today){background-color:#74c0fc;color:#fff}.react-calendar-range-picker-calendar__table-cel.active.range.today{background-color:#74c0fc;color:#fff;text-decoration:underline}.react-calendar-range-picker-calendar__table-cel.highlight{background-color:#d0ebff}.react-calendar-range-picker-calendar__table-cel.no-border{border:1px solid transparent}.react-calendar-range-picker-calendar__table-cel.react-calendar-range-picker-calendar__date-item{position:relative}.react-calendar-range-picker-calendar__table-cel.react-calendar-range-picker-calendar__date-item:not(.disabled){cursor:pointer}.react-calendar-range-picker-calendar__table-cel.react-calendar-range-picker-calendar__date-item:not(.disabled):hover{background-color:#74c0fc;color:#fff}.react-calendar-range-picker-calendar__table-cel.react-calendar-range-picker-calendar__date-item .react-calendar-range-picker-calendar__icon{bottom:0;font-size:12px;position:absolute;right:0}.react-calendar-range-picker-calendar__table-caption{color:var(--oc-gray-7)}.react-calendar-range-picker-calendar__mask{background-color:rgba(0,0,0,.3);filter:alpha(opacity=0);height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:-1}.react-calendar-range-picker-calendar__mask.visible{background-color:rgba(0,0,0,.3)!important;filter:alpha(opacity=100);opacity:1!important;z-index:1!important}.react-calendar-range-picker-check{bottom:0;font-size:12px;position:absolute;right:0}.react-calendar-range-picker__icon-fill{fill:var(--oc-gray-8)}.today.active .react-calendar-range-picker-check__path{fill:#fc7474}.active .react-calendar-range-picker-check__path,.today:hover .react-calendar-range-picker-check__path{fill:#fff}.react-calendar-range-picker-calendar__button{background-color:#fff;border:1px solid #ced4da;bottom:-40px;color:var(--oc-gray-6);cursor:pointer;display:inline-block;padding:5px 10px;position:absolute;transition:all .3s}.react-calendar-range-picker-calendar__button:hover{background-color:#4dabf7;border:1px solid #4dabf7;color:#fff}.forwardEnter{opacity:1;transform:translate3d(100%,0,0);transition:opacity .5s ease-in,transform .3s;will-change:transform}.forwardEnter.forwardEnterActive{transform:translateZ(0)}.forwardLeave{opacity:1;transition:opacity .5s ease-in}.forwardLeave.forwardLeaveActive{opacity:0}.backwardLeave{transform:translate3d(100%,0,0);transition:transform .3s ease-in;will-change:transform,opacity}.react-calendar-range-picker-calendar__title-container{display:block;height:18px;overflow:hidden;position:relative;text-align:center;width:100%}.react-calendar-range-picker-calendar__selector-panel-year-set-container{display:block;height:24px;margin:0 auto;overflow:hidden;position:relative;text-align:center;width:100%}.react-calendar-range-picker-calendar__body-container{display:block;overflow:hidden;position:relative;text-align:center;transition:height .3s}.slide{position:absolute}.slide-enter{transform:translateX(100%);transition:transform .3s ease-in-out}.slide-enter-active,.slide-exit{transform:translateX(0)}.slide-exit{transition:transform .3s ease-in-out}.slide-exit-active{transform:translateX(-100%)}.forward-enter{transform:translateX(100%);transition:transform .3s ease-in-out}.forward-enter-active,.forward-exit{transform:translateX(0)}.forward-exit{transition:transform .3s ease-in-out}.backward-enter,.forward-exit-active{transform:translateX(-100%)}.backward-enter{transition:transform .3s ease-in-out}.backward-enter-active,.backward-exit{transform:translateX(0)}.backward-exit{transition:transform .3s ease-in-out}.backward-exit-active{transform:translateX(100%)}.react-calendar-range-picker__range-input-wrapper{background-color:#fff;border:1px solid #d9d9d9;border-radius:4px;color:rgba(0,0,0,.65);display:inline-block;height:32px;padding:4px 0;position:relative;transition:all .3s;width:100%}.react-calendar-range-picker__range-input-wrapper.disabled{background:#f8f8f8;border:1px solid #ccc;color:#ccc;cursor:not-allowed}.react-calendar-range-picker__range-input-wrapper input.react-calendar-range-picker__range-input.disabled{cursor:not-allowed}.react-calendar-range-picker__range-input-wrapper input.react-calendar-range-picker__range-input{background-color:transparent;border:none;height:95%;outline:0;text-align:center;width:44%}.react-calendar-range-picker__range-input-wrapper .react-calendar-range-picker__range-input-separator{display:inline-block;min-width:10px;pointer-events:none;text-align:center;vertical-align:middle;white-space:nowrap}.react-calendar-range-picker__range .react-calendar-range-picker{position:absolute}.react-calendar-range-picker__button-wrapper{display:block;text-align:right}.react-calendar-range-picker__button{border-radius:4px;cursor:pointer;display:inline-block;font-size:12px;margin-right:10px;padding:2px 5px}.react-calendar-range-picker__button--type{color:#74c0fc}.react-calendar-range-picker__button--type.disabled{color:#adb5bd;cursor:not-allowed}.react-calendar-range-picker__button--confirm{background-color:#74c0fc;border:1px solid #4dabf7;color:#fff}.react-calendar-range-picker__button--confirm.disabled{background-color:#f1f3f5;border:1px solid #ced4da;color:#adb5bd;cursor:not-allowed}.react-minimal-datetime-date-picker{position:relative}.react-minimal-datetime-date-picker__divider{display:inline-block;width:30px}.react-calendar-range-picker__time-piker{background-color:#fff;bottom:0;display:block;left:0;position:absolute;right:0;top:0}.react-calendar-range-picker__time-select-wrapper{display:block;height:100%}.react-calendar-range-picker__date{border-bottom:1px solid #f2f2f2;display:inline-block;font-weight:600;margin-bottom:10px;padding-bottom:5px;text-align:center;width:50%}.react-calendar-range-picker__time-select-options-wrapper,.react-calendar-range-picker__time-select-options-wrapper_no-leftbrdr{border:1px solid #f2f2f2;display:inline-block;height:83%;overflow:hidden;text-align:center;width:24.5%}.react-calendar-range-picker__time-select-options-header{border-bottom:1px solid #f2f2f2;display:block;font-weight:600;padding:5px 0}.react-calendar-range-picker__time-select-options{display:block;height:87%;overflow-y:auto}.react-calendar-range-picker__time-select-options-wrapper_no-leftbrdr{border-left:0!important}.react-calendar-range-picker__time-select-wrapper--single{text-align:center}.react-calendar-range-picker__time-select-wrapper--single .react-calendar-range-picker__time-select-options-wrapper{width:50%}.react-calendar-range-picker__time-select-option{cursor:pointer;display:block;padding:2px 5px}.react-calendar-range-picker__time-select-option:hover{background-color:#d0ebff}.react-calendar-range-picker__time-select-option.active{background-color:#74c0fc;color:#fff}.ranges-selector{margin:0 20px 0 auto}.ranges-selector ul{list-style:none;margin:0 auto;padding:0;width:100%}.ranges-selector ul li{font-size:12px;list-style-type:none;text-align:left}.ranges-selector ul li .selector-button{background:none;border:none;cursor:pointer;padding:8px 12px;text-align:left}.ranges-selector ul .active,.ranges-selector ul li .active{background-color:#339af0;color:#fff}.react-calendar-range-picker__time-select-wrapper-header{display:block}.react-calendar-range-picker__time-select-options::-webkit-scrollbar{display:none}.date-cell.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}

/*# sourceMappingURL=react-calendar-range-picker.css.map*/