@start-base/react-form-elements/DateRangePicker/styles.css

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

.SUI-CalendarRoot-module-calendar-YEe-7{margin:0!important}.SUI-CalendarRoot-module-months--6KTQ{background:var(--rfe-background)!important;border:1px solid var(--rfe-border);border-radius:var(--rfe-border-radius)!important;color:var(--rfe-color)!important;display:flex;gap:var(--rfe-spacing);padding:1rem!important;transition:all .25s;width:fit-content}.SUI-CalendarRoot-module-months--6KTQ>div{margin:0}@media (max-width:576px){.SUI-CalendarRoot-module-months--6KTQ{flex-direction:column}}.SUI-CalendarRoot-module-month-aa13w{background:var(--rfe-background)!important;border:1px solid var(--rfe-border);border-radius:var(--rfe-border-radius)!important;color:var(--rfe-color)!important;display:block;padding:1rem!important;transition:all .25s}.SUI-CalendarRoot-module-captionLabel-Q-PII{z-index:unset}.SUI-CalendarRoot-module-disabled-LmYOQ{background:var(--rfe-background-disabled)!important;color:var(--rfe-color);cursor:not-allowed}.SUI-CalendarRoot-module-error-qiefI{border-color:var(--rfe-color-error)!important}.SUI-DateRangePicker-module-root-X5Idk{margin-bottom:var(--rfe-spacing)}.SUI-DateRangePicker-module-inputRoot-a4oLq{position:relative}.SUI-DateRangePicker-module-calendar-1WfVD{margin:var(--rfe-label-spacing) 0!important}.SUI-DateRangePicker-module-label-9sAmO{color:var(--rfe-color);cursor:text;font-size:var(--rfe-font-size);left:16px;line-height:1;margin-bottom:0;position:absolute;top:-2px;transform:translateY(calc((var(--rfe-input-height) - 14px)/2));transition:all .25s}.SUI-DateRangePicker-module-label-9sAmO.SUI-DateRangePicker-module-disableShrink-CgC-O{color:var(--rfe-color);display:block;margin-bottom:var(--rfe-label-spacing);position:static;transform:none}.SUI-DateRangePicker-module-prepend-kzKtg~.SUI-DateRangePicker-module-placeholder-iy03l{padding:24px 16px 0 60px!important}.SUI-DateRangePicker-module-placeholder-iy03l{padding:19px 16px 0!important}.SUI-DateRangePicker-module-disabledLabel-3GOR9{cursor:not-allowed;pointer-events:none}.SUI-DateRangePicker-module-labelPlaceholder-M9NrH{font-size:var(--rfe-focused-font-size);top:0;transform:translateY(9px)}.SUI-DateRangePicker-module-input-nIcF2{background:var(--rfe-background);border:1px solid var(--rfe-border);border-radius:var(--rfe-border-radius);color:var(--rfe-color);font-family:var(--rfe-font-family);height:var(--rfe-input-height);line-height:24px;padding:19px 30px 0 16px;transition:all .25s;width:100%}.SUI-DateRangePicker-module-input-nIcF2:focus{box-shadow:var(--rfe-focus)}.SUI-DateRangePicker-module-input-nIcF2::placeholder{color:var(--rfe-color-placeholder);font-size:var(--rfe-placeholder-font-size)}.SUI-DateRangePicker-module-input-nIcF2:-webkit-autofill:not(.SUI-DateRangePicker-module-disableShrink-CgC-O)~.SUI-DateRangePicker-module-label-9sAmO,.SUI-DateRangePicker-module-input-nIcF2:focus:not(.SUI-DateRangePicker-module-disableShrink-CgC-O)~.SUI-DateRangePicker-module-label-9sAmO,.SUI-DateRangePicker-module-input-nIcF2:not([value=""],.SUI-DateRangePicker-module-disableShrink-CgC-O)~.SUI-DateRangePicker-module-label-9sAmO{font-size:var(--rfe-focused-font-size);transform:translateY(9px)}.SUI-DateRangePicker-module-input-nIcF2.SUI-DateRangePicker-module-disableShrink-CgC-O{padding:16px}.SUI-DateRangePicker-module-append-cbiFl,.SUI-DateRangePicker-module-prepend-kzKtg{align-items:center;color:var(--rfe-color);display:flex;justify-content:center;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.SUI-DateRangePicker-module-prepend-kzKtg{border-right:1px solid var(--rfe-border);font-size:var(--rfe-placeholder-font-size);height:var(--rfe-input-height);left:16px;line-height:16px;padding-right:13px}.SUI-DateRangePicker-module-prepend-kzKtg~.SUI-DateRangePicker-module-label-9sAmO{left:62px}.SUI-DateRangePicker-module-prepend-kzKtg~div>.SUI-DateRangePicker-module-input-nIcF2{padding:20px 16px 0 60px}.SUI-DateRangePicker-module-prepend-kzKtg~div>.SUI-DateRangePicker-module-disableShrink-CgC-O{padding:16px 16px 16px 60px}.SUI-DateRangePicker-module-append-cbiFl{height:56px;min-width:36px;right:0}.SUI-DateRangePicker-module-append-cbiFl~.SUI-DateRangePicker-module-input-nIcF2{padding:19px 56px 0 16px}.SUI-DateRangePicker-module-append-cbiFl~.SUI-DateRangePicker-module-input-nIcF2.SUI-DateRangePicker-module-disableShrink-CgC-O{padding:0 50px 0 16px}.SUI-DateRangePicker-module-appendDisabledShrink--WbKG,.SUI-DateRangePicker-module-prependDisabledShrink-fVbDB{top:26px;transform:none}.SUI-DateRangePicker-module-errorLabel-3-6Y8{color:var(--rfe-color-error);font-size:var(--rfe-error-font-size);margin-top:var(--rfe-label-spacing);pointer-events:none}.SUI-DateRangePicker-module-inputError-cTfUr{border-color:var(--rfe-color-error)!important}.SUI-DateRangePicker-module-disabled-f0zmt{background:var(--rfe-background-disabled);color:var(--rfe-color);cursor:not-allowed;opacity:1}.SUI-DateRangePicker-module-focused-Kl-ad{box-shadow:var(--rfe-focus)}.SUI-DateRangePicker-module-icon-LvoL0{align-items:center;background:none;border:0;cursor:pointer;display:flex;height:100%;justify-content:center;margin:0 8px;pointer-events:all}.SUI-DateRangePicker-module-popper-pCU1S{z-index:1000}