Referer:
Issues:
2 Errors 1 Probable Error 5 Warnings
Summary report > Page report
2 Errors
- 2 WCAG2 AA
- 2 E910 - SC 1.4.4: Use relative rather than absolute units. Using relative units helps the page to be rendered correctly at different resolutions and allows people with sight difficulties to 'zoom in' to pages to read them. See Understanding 1.4.4.
1 Use relative rather than absolute units with 'font-size' font-size:20px 1 Use relative rather than absolute units with 'font-size' font-size:12px
- 2 E910 - SC 1.4.4: Use relative rather than absolute units. Using relative units helps the page to be rendered correctly at different resolutions and allows people with sight difficulties to 'zoom in' to pages to read them. See Understanding 1.4.4.
1 Probable Error
- 1 WCAG2 A
- 1 P908 - SC 1.3.1: Do not insert content using CSS. Content inserted using CSS may not appear when CSS is turned off, or the user is using their own accessible style sheet. See WCAG2 Failure F87.
1 Do not insert content using CSS content:"×"
- 1 P908 - SC 1.3.1: Do not insert content using CSS. Content inserted using CSS may not appear when CSS is turned off, or the user is using their own accessible style sheet. See WCAG2 Failure F87.
5 Warnings
- 5 CSS
- 5 W776 - Vendor extension used. Authors should avoid using vendor extensions where possible. See Vendor-specific extensions.
1 A vendor extension has been used: input::-webkit-inner-spin-button .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} 1 A vendor extension has been used: -webkit-appearance -webkit-appearance:none 1 A vendor extension has been used: -moz-appearance -moz-appearance:textfield 1 A vendor extension has been used: -webkit-user-select -webkit-user-select:none 1 A vendor extension has been used: -moz-user-select -moz-user-select:none
- 5 W776 - Vendor extension used. Authors should avoid using vendor extensions where possible. See Vendor-specific extensions.
1 @charset "UTF-8";
1 .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow {
1 border-color:#ccc;
1 border-style:solid;
1 border-width:3px 3px 0 0;
1 content:"";
1 display:block;
1 height:9px;
1 position:absolute;
1 top:6px;
1 width:9px;
1 }
1 .react-datepicker-wrapper {
1 display:inline-block;
1 padding:0;
1 border:0;
1 }
1 .react-datepicker {
1 font-family:Helvetica Neue,helvetica,arial,sans-serif;
1 font-size:.8rem;
1 background-color:#fff;
1 color:#000;
1 border:1px solid #aeaeae;
1 border-radius:.3rem;
1 display:inline-block;
1 position:relative;
1 line-height:normal;
1 }
1 .react-datepicker--time-only .react-datepicker__time-container {
1 border-left:0;
1 }
1 .react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box {
1 border-bottom-left-radius:.3rem;
1 border-bottom-right-radius:.3rem;
1 }
1 .react-datepicker-popper {
1 z-index:1;
1 line-height:0;
1 }
1 .react-datepicker-popper .react-datepicker__triangle {
1 stroke:#aeaeae;
1 }
1 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
1 fill:#f0f0f0;
1 color:#f0f0f0;
1 }
1 .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
1 fill:#fff;
1 color:#fff;
1 }
1 .react-datepicker__header {
1 text-align:center;
1 background-color:#f0f0f0;
1 border-bottom:1px solid #aeaeae;
1 border-top-left-radius:.3rem;
1 padding:8px 0;
1 position:relative;
1 }
1 .react-datepicker__header--time {
1 padding-bottom:8px;
1 padding-left:5px;
1 padding-right:5px;
1 }
1 .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
1 border-top-left-radius:0;
1 }
1 .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
1 border-top-right-radius:.3rem;
1 }
1 .react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select {
1 display:inline-block;
1 margin:0 15px;
1 }
1 .react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__current-month {
1 margin-top:0;
1 color:#000;
1 font-weight:700;
1 font-size:.944rem;
1 }
1 h2.react-datepicker__current-month {
1 padding:0;
1 margin:0;
1 }
1 .react-datepicker-time__header {
1 text-overflow:ellipsis;
1 white-space:nowrap;
1 overflow:hidden;
1 }
1 .react-datepicker__navigation {
1 align-items:center;
1 background:none;
1 display:flex;
1 justify-content:center;
1 text-align:center;
1 cursor:pointer;
1 position:absolute;
1 top:2px;
1 padding:0;
1 border:none;
1 z-index:1;
1 height:32px;
1 width:32px;
1 text-indent:-999em;
1 overflow:hidden;
1 }
1 .react-datepicker__navigation--previous {
1 left:2px;
1 }
1 .react-datepicker__navigation--next {
1 right:2px;
1 }
1 .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
1 right:85px;
1 }
1 .react-datepicker__navigation--years {
1 position:relative;
1 top:0;
1 display:block;
1 margin-left:auto;
1 margin-right:auto;
1 }
1 .react-datepicker__navigation--years-previous {
1 top:4px;
1 }
1 .react-datepicker__navigation--years-upcoming {
1 top:-4px;
1 }
1 .react-datepicker__navigation:hover :before {
1 border-color:#a6a6a6;
1 }
1 .react-datepicker__navigation-icon {
1 position:relative;
1 top:-1px;
1 
E910WCAG2 AA 1.4.4: Use relative rather than absolute units with 'font-size'
Using relative units helps the page to be rendered correctly at different resolutions and allows people with sight difficulties to 'zoom in' to pages to read them. See Understanding 1.4.4.
font-size:20px;
1 width:0;
1 }
1 .react-datepicker__navigation-icon--next {
1 left:-2px;
1 }
1 .react-datepicker__navigation-icon--next:before {
1 transform:rotate(45deg);
1 left:-7px;
1 }
1 .react-datepicker__navigation-icon--previous {
1 right:-2px;
1 }
1 .react-datepicker__navigation-icon--previous:before {
1 transform:rotate(225deg);
1 right:-7px;
1 }
1 .react-datepicker__month-container {
1 float:left;
1 }
1 .react-datepicker__year {
1 margin:.4rem;
1 text-align:center;
1 }
1 .react-datepicker__year-wrapper {
1 display:flex;
1 flex-wrap:wrap;
1 max-width:180px;
1 }
1 .react-datepicker__year .react-datepicker__year-text {
1 display:inline-block;
1 width:4rem;
1 margin:2px;
1 }
1 .react-datepicker__month {
1 margin:.4rem;
1 text-align:center;
1 }
1 .react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text {
1 display:inline-block;
1 width:4rem;
1 margin:2px;
1 }
1 .react-datepicker__input-time-container {
1 clear:both;
1 width:100%;
1 float:left;
1 margin:5px 0 10px 15px;
1 text-align:left;
1 }
1 .react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container {
1 display:inline-block;
1 }
1 .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
1 display:inline-block;
1 margin-left:10px;
1 }
1 .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
1 width:auto;
1 }
1 W776CSS: A vendor extension has been used: input::-webkit-inner-spin-button
Authors should avoid using vendor extensions where possible. See Vendor-specific extensions.
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
1 W776CSS: A vendor extension has been used: -webkit-appearance
Authors should avoid using vendor extensions where possible. See Vendor-specific extensions.
-webkit-appearance:none;
1 margin:0;
1 }
1 .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
1 W776CSS: A vendor extension has been used: -moz-appearance
Authors should avoid using vendor extensions where possible. See Vendor-specific extensions.
-moz-appearance:textfield;
1 }
1 .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
1 margin-left:5px;
1 display:inline-block;
1 }
1 .react-datepicker__time-container {
1 float:right;
1 border-left:1px solid #aeaeae;
1 width:85px;
1 }
1 .react-datepicker__time-container--with-today-button {
1 display:inline;
1 border:1px solid #aeaeae;
1 border-radius:.3rem;
1 position:absolute;
1 right:-87px;
1 top:0;
1 }
1 .react-datepicker__time-container .react-datepicker__time {
1 position:relative;
1 background:#fff;
1 border-bottom-right-radius:.3rem;
1 }
1 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
1 width:85px;
1 overflow-x:hidden;
1 margin:0 auto;
1 text-align:center;
1 border-bottom-right-radius:.3rem;
1 }
1 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
1 list-style:none;
1 margin:0;
1 height:calc(195px + 1.7rem / 2);
1 overflow-y:scroll;
1 padding-right:0;
1 padding-left:0;
1 width:100%;
1 box-sizing:content-box;
1 }
1 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
1 height:30px;
1 padding:5px 10px;
1 white-space:nowrap;
1 }
1 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
1 cursor:pointer;
1 background-color:#f0f0f0;
1 }
1 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
1 background-color:#216ba5;
1 color:#fff;
1 font-weight:700;
1 }
1 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
1 background-color:#216ba5;
1 }
1 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
1 color:#ccc;
1 }
1 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
1 cursor:default;
1 background-color:transparent;
1 }
1 .react-datepicker__week-number {
1 color:#ccc;
1 display:inline-block;
1 width:1.7rem;
1 line-height:1.7rem;
1 text-align:center;
1 margin:.166rem;
1 }
1 .react-datepicker__week-number.react-datepicker__week-number--clickable {
1 cursor:pointer;
1 }
1 .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,.react-datepicker__week-number--keyboard-selected):hover {
1 border-radius:.3rem;
1 background-color:#f0f0f0;
1 }
1 .react-datepicker__week-number--selected {
1 border-radius:.3rem;
1 background-color:#216ba5;
1 color:#fff;
1 }
1 .react-datepicker__week-number--selected:hover {
1 background-color:#1d5d90;
1 }
1 .react-datepicker__week-number--keyboard-selected {
1 border-radius:.3rem;
1 background-color:#2a87d0;
1 color:#fff;
1 }
1 .react-datepicker__week-number--keyboard-selected:hover {
1 background-color:#1d5d90;
1 }
1 .react-datepicker__day-names {
1 white-space:nowrap;
1 margin-bottom:-8px;
1 }
1 .react-datepicker__week {
1 white-space:nowrap;
1 }
1 .react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name {
1 color:#000;
1 display:inline-block;
1 width:1.7rem;
1 line-height:1.7rem;
1 text-align:center;
1 margin:.166rem;
1 }
1 .react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text {
1 cursor:pointer;
1 }
1 .react-datepicker__day:not([aria-disabled=true]):hover,.react-datepicker__month-text:not([aria-disabled=true]):hover,.react-datepicker__quarter-text:not([aria-disabled=true]):hover,.react-datepicker__year-text:not([aria-disabled=true]):hover {
1 border-radius:.3rem;
1 background-color:#f0f0f0;
1 }
1 .react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today {
1 font-weight:700;
1 }
1 .react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted {
1 border-radius:.3rem;
1 background-color:#3dcc4a;
1 color:#fff;
1 }
1 .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
1 background-color:#32be3f;
1 }
1 .react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1 {
1 color:#f0f;
1 }
1 .react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2 {
1 color:green;
1 }
1 .react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays {
1 position:relative;
1 border-radius:.3rem;
1 background-color:#ff6803;
1 color:#fff;
1 }
1 .react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay {
1 position:absolute;
1 bottom:100%;
1 left:50%;
1 transform:translateX(-50%);
1 background-color:#333;
1 color:#fff;
1 padding:4px;
1 border-radius:4px;
1 white-space:nowrap;
1 visibility:hidden;
1 opacity:0;
1 transition:visibility 0s,opacity .3s ease-in-out;
1 }
1 .react-datepicker__day--holidays:not([aria-disabled=true]):hover,.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
1 background-color:#cf5300;
1 }
1 .react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay {
1 visibility:visible;
1 opacity:1;
1 }
1 .react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected,.react-datepicker__month-text--in-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--selected,.react-datepicker__quarter-text--in-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--selected,.react-datepicker__year-text--in-range,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--selected {
1 border-radius:.3rem;
1 background-color:#216ba5;
1 color:#fff;
1 }
1 .react-datepicker__day--in-range:not([aria-disabled=true]):hover,.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__day--selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--selected:not([aria-disabled=true]):hover {
1 background-color:#1d5d90;
1 }
1 .react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected {
1 border-radius:.3rem;
1 background-color:#bad9f1;
1 color:#000;
1 }
1 .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
1 background-color:#1d5d90;
1 }
1 .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range) {
1 background-color:rgba(33,107,165,.5);
1 }
1 .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range) {
1 background-color:#f0f0f0;
1 color:#000;
1 }
1 .react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled {
1 cursor:default;
1 color:#ccc;
1 }
1 .react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay {
1 position:absolute;
1 bottom:70%;
1 left:50%;
1 transform:translateX(-50%);
1 background-color:#333;
1 color:#fff;
1 padding:4px;
1 border-radius:4px;
1 white-space:nowrap;
1 visibility:hidden;
1 opacity:0;
1 transition:visibility 0s,opacity .3s ease-in-out;
1 }
1 .react-datepicker__input-container {
1 position:relative;
1 display:inline-block;
1 width:100%;
1 }
1 .react-datepicker__input-container .react-datepicker__calendar-icon {
1 position:absolute;
1 padding:.5rem;
1 box-sizing:content-box;
1 }
1 .react-datepicker__view-calendar-icon input {
1 padding:6px 10px 5px 25px;
1 }
1 .react-datepicker__month-read-view,.react-datepicker__month-year-read-view,.react-datepicker__year-read-view {
1 border:1px solid transparent;
1 border-radius:.3rem;
1 position:relative;
1 }
1 .react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover,.react-datepicker__year-read-view:hover {
1 cursor:pointer;
1 }
1 .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow {
1 border-top-color:#b3b3b3;
1 }
1 .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow {
1 transform:rotate(135deg);
1 right:-16px;
1 top:0;
1 }
1 .react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown {
1 background-color:#f0f0f0;
1 position:absolute;
1 width:50%;
1 left:25%;
1 top:30px;
1 z-index:1;
1 text-align:center;
1 border-radius:.3rem;
1 border:1px solid #aeaeae;
1 }
1 .react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover,.react-datepicker__year-dropdown:hover {
1 cursor:pointer;
1 }
1 .react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable {
1 height:150px;
1 overflow-y:scroll;
1 }
1 .react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option {
1 line-height:20px;
1 width:100%;
1 display:block;
1 margin-left:auto;
1 margin-right:auto;
1 }
1 .react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type,.react-datepicker__year-option:first-of-type {
1 border-top-left-radius:.3rem;
1 border-top-right-radius:.3rem;
1 }
1 .react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type,.react-datepicker__year-option:last-of-type {
1 W776CSS: A vendor extension has been used: -webkit-user-select
Authors should avoid using vendor extensions where possible. See Vendor-specific extensions.
-webkit-user-select:none;
1 W776CSS: A vendor extension has been used: -moz-user-select
Authors should avoid using vendor extensions where possible. See Vendor-specific extensions.
-moz-user-select:none;
1 user-select:none;
1 border-bottom-left-radius:.3rem;
1 border-bottom-right-radius:.3rem;
1 }
1 .react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover,.react-datepicker__year-option:hover {
1 background-color:#ccc;
1 }
1 .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming {
1 border-bottom-color:#b3b3b3;
1 }
1 .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous {
1 border-top-color:#b3b3b3;
1 }
1 .react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected,.react-datepicker__year-option--selected {
1 position:absolute;
1 left:15px;
1 }
1 .react-datepicker__close-icon {
1 cursor:pointer;
1 background-color:transparent;
1 border:0;
1 outline:0;
1 padding:0 6px 0 0;
1 position:absolute;
1 top:0;
1 right:0;
1 height:100%;
1 display:table-cell;
1 vertical-align:middle;
1 }
1 .react-datepicker__close-icon:after {
1 cursor:pointer;
1 background-color:#216ba5;
1 color:#fff;
1 border-radius:50%;
1 height:16px;
1 width:16px;
1 padding:2px;
1 E910WCAG2 AA 1.4.4: Use relative rather than absolute units with 'font-size'
Using relative units helps the page to be rendered correctly at different resolutions and allows people with sight difficulties to 'zoom in' to pages to read them. See Understanding 1.4.4.
font-size:12px;
1 line-height:1;
1 text-align:center;
1 display:table-cell;
1 vertical-align:middle;
1 P908WCAG2 A 1.3.1: Do not insert content using CSS
Content inserted using CSS may not appear when CSS is turned off, or the user is using their own accessible style sheet. See WCAG2 Failure F87.
content:"×";
1 }
1 .react-datepicker__close-icon--disabled {
1 cursor:default;
1 }
1 .react-datepicker__close-icon--disabled:after {
1 cursor:default;
1 background-color:#ccc;
1 }
1 .react-datepicker__today-button {
1 background:#f0f0f0;
1 border-top:1px solid #aeaeae;
1 cursor:pointer;
1 text-align:center;
1 font-weight:700;
1 padding:5px 0;
1 clear:left;
1 }
1 .react-datepicker__portal {
1 position:fixed;
1 width:100vw;
1 height:100vh;
1 background-color:rgba(0,0,0,.8);
1 left:0;
1 top:0;
1 justify-content:center;
1 align-items:center;
1 display:flex;
1 z-index:2147483647;
1 }
1 .react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name {
1 width:3rem;
1 line-height:3rem;
1 }
1 @media (max-height:550px),(max-width:400px) {
1 .react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name {
1 width:2rem;
1 line-height:2rem;
1 }
1 }
1 .react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month {
1 font-size:1.44rem;
1 }
1 .react-datepicker__children-container {
1 width:13.8rem;
1 margin:.4rem;
1 padding-right:.2rem;
1 padding-left:.2rem;
1 height:auto;
1 }
1 .react-datepicker__aria-live {
1 position:absolute;
1 clip-path:circle(0);
1 border:0;
1 height:1px;
1 margin:-1px;
1 overflow:hidden;
1 padding:0;
1 width:1px;
1 white-space:nowrap;
1 }
1 .react-datepicker__calendar-icon {
1 width:1em;
1 height:1em;
1 vertical-align:-.125em;
1 }