@syncfusion/ej2-angular-calendars 19.4.55 → 20.1.52

package/styles/daterangepicker/tailwind-dark.css

@@ -3,6 +3,9 @@
 /*! component icons */
 .e-input-group-icon.e-range-icon,
 *.e-control-wrapper .e-input-group-icon.e-range-icon {
+  border-bottom-right-radius: 0;
+  border-right: 0;
+  border-top-right-radius: 0;
   font-size: 16px;
   margin: 0;
   min-height: 18px;
@@ -12,7 +15,7 @@
 
 .e-input-group-icon.e-range-icon::before,
 *.e-control-wrapper .e-input-group-icon.e-range-icon::before {
-  content: '\e718';
+  content: '\e74c';
   font-family: 'e-icons';
 }
 
@@ -23,27 +26,27 @@
 }
 
 .e-daterangepicker .e-calendar .e-header .e-date-icon-next::before {
-  content: '\e7b7';
+  content: '\e748';
 }
 
 .e-daterangepicker .e-calendar .e-header .e-date-icon-prev::before {
-  content: '\e70f';
+  content: '\e765';
 }
 
 .e-daterangepicker .e-change-icon::before {
-  content: '\e7a8';
+  content: '\e7f9';
 }
 
 .e-daterangepicker .e-calendar.e-rtl .e-header .e-date-icon-next::before {
-  content: '\e70f';
+  content: '\e765';
 }
 
 .e-daterangepicker .e-calendar.e-rtl .e-header .e-date-icon-prev::before {
-  content: '\e7b7';
+  content: '\e748';
 }
 
 .e-daterangepicker.e-rtl .e-start-end .e-change-icon::before {
-  content: '\e7a5';
+  content: '\e773';
 }
 
 .e-bigger .e-input-group-icon.e-range-icon,
@@ -93,7 +96,7 @@
 .e-daterangepicker.e-popup,
 .e-bigger.e-small .e-daterangepicker.e-popup {
   border: 1px solid #4b5563;
-  border-radius: 0;
+  border-radius: 6px;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   max-height: 500px;
   max-width: 730px;
@@ -119,6 +122,7 @@
   background: #232e3e;
   padding: 8px 0;
   width: auto;
+  border-radius: 6px 6px 0 0;
 }
 
 .e-daterangepicker.e-popup .e-range-header .e-start-label,
@@ -127,7 +131,7 @@
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-end-label {
   cursor: default;
   display: inline-block;
-  font-size: 18px;
+  font-size: 16px;
   overflow: hidden;
   text-align: center;
   text-decoration: none;
@@ -141,7 +145,7 @@
 
 .e-daterangepicker.e-popup .e-range-header .e-change-icon,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-change-icon {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 500;
   text-align: center;
   width: 4%;
@@ -166,7 +170,7 @@
       align-items: center;
   display: -ms-flexbox;
   display: flex;
-  height: 35px;
+  height: 34px;
 }
 
 .e-daterangepicker.e-popup .e-separator,
@@ -179,7 +183,7 @@
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
   border: none;
   margin: 0;
-  padding: 0 8px;
+  padding: 0 8px 8px;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-content table,
@@ -190,18 +194,18 @@
 .e-daterangepicker.e-popup .e-calendar .e-header .e-title,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-title {
   cursor: pointer;
+  line-height: 24px;
+  width: auto;
   float: none;
   font-weight: normal;
-  line-height: 24px;
   margin-left: 0;
-  width: auto;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-header.e-month, .e-daterangepicker.e-popup .e-calendar .e-header.e-year, .e-daterangepicker.e-popup .e-calendar .e-header.e-decade,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header.e-month,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header.e-year,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header.e-decade {
-  padding: 10px 5px;
+  padding: 8px 6px;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-header .e-next,
@@ -219,7 +223,7 @@
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-next,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-prev {
   height: 24px;
-  width: 20px;
+  width: 24px;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-header .e-next span,
@@ -231,12 +235,12 @@
 
 .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover {
-  border-radius: 50% 0 0 50%;
+  border-radius: 4px 0 0 4px;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 0 50% 50% 0;
+  border-radius: 0 4px 4px 0;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
@@ -256,7 +260,8 @@
   display: flex;
   -ms-flex-direction: row-reverse;
       flex-direction: row-reverse;
-  height: 48px;
+  height: 47px;
+  border-radius: 0 0 6px 6px;
 }
 
 .e-daterangepicker.e-popup .e-footer .e-btn,
@@ -300,6 +305,7 @@
 .e-daterangepicker.e-popup .e-calendar-container .e-left-container,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar-container .e-left-container {
   border-right: 1px solid #232e3e;
+  border-right: none;
 }
 
 .e-daterangepicker.e-popup .e-presets,
@@ -358,6 +364,7 @@
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-left-container {
   border-left: 1px solid #232e3e;
   border-right: 0;
+  border-left: none;
 }
 
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-next,
@@ -372,12 +379,12 @@
 
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-start-date.e-selected.e-range-hover {
-  border-radius: 0 50% 50% 0;
+  border-radius: 0 4px 4px 0;
 }
 
 .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-date-range-container .e-calendar .e-end-date.e-selected.e-range-hover {
-  border-radius: 50% 0 0 50%;
+  border-radius: 4px 0 0 4px;
 }
 
 .e-daterangepicker.e-rtl .e-footer,
@@ -412,7 +419,22 @@
 }
 
 .e-bigger.e-small .e-daterangepicker .e-calendar {
-  max-width: 246px;
+  max-width: 275px;
+}
+
+.e-bigger .e-daterangepicker.e-popup .e-start-label,
+.e-bigger .e-daterangepicker.e-popup .e-end-label,
+*.e-bigger.e-daterangepicker.e-popup .e-start-label,
+*.e-bigger.e-daterangepicker.e-popup .e-end-label,
+*.e-device.e-daterangepicker.e-popup .e-start-label,
+*.e-device.e-daterangepicker.e-popup .e-end-label {
+  font-size: 18px;
+}
+
+.e-bigger .e-daterangepicker.e-popup .e-day-span,
+*.e-bigger.e-daterangepicker.e-popup .e-day-span,
+*.e-device.e-daterangepicker.e-popup .e-day-span {
+  font-size: 14px;
 }
 
 .e-bigger .e-daterangepicker.e-popup.e-preset-wrapper,
@@ -431,9 +453,16 @@
 .e-bigger .e-daterangepicker.e-popup .e-range-header,
 *.e-bigger.e-daterangepicker.e-popup .e-range-header,
 *.e-device.e-daterangepicker.e-popup .e-range-header {
+  padding: 12px 0;
   width: auto;
 }
 
+.e-bigger .e-daterangepicker.e-popup .e-range-header .e-change-icon,
+*.e-bigger.e-daterangepicker.e-popup .e-range-header .e-change-icon,
+*.e-device.e-daterangepicker.e-popup .e-range-header .e-change-icon {
+  font-size: 20px;
+}
+
 .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end,
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end,
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end {
@@ -461,8 +490,8 @@
   box-shadow: none;
   font-size: 14px;
   font-weight: 500;
-  height: 36px;
-  line-height: 34px;
+  height: 38px;
+  line-height: 36px;
   max-width: 116px;
   overflow: hidden;
   padding: 1px 6px;
@@ -553,7 +582,7 @@
 *.e-bigger.e-daterangepicker .e-calendar,
 *.e-device.e-daterangepicker .e-calendar {
   max-width: 296px;
-  padding: 0 8px;
+  padding: 0 16px 12px;
 }
 
 .e-bigger .e-daterangepicker .e-calendar .e-content table,
@@ -568,8 +597,8 @@
 *.e-bigger.e-daterangepicker .e-calendar .e-header .e-prev,
 *.e-device.e-daterangepicker .e-calendar .e-header .e-next,
 *.e-device.e-daterangepicker .e-calendar .e-header .e-prev {
-  height: 24px;
-  width: 24px;
+  height: 28px;
+  width: 28px;
 }
 
 .e-bigger .e-daterangepicker .e-calendar .e-header .e-next span,
@@ -585,7 +614,7 @@
 *.e-bigger.e-daterangepicker .e-calendar .e-header .e-title,
 *.e-device.e-daterangepicker .e-calendar .e-header .e-title {
   cursor: pointer;
-  line-height: 24px;
+  line-height: 28px;
 }
 
 .e-bigger .e-daterangepicker .e-calendar .e-header.e-month, .e-bigger .e-daterangepicker .e-calendar .e-header.e-year, .e-bigger .e-daterangepicker .e-calendar .e-header.e-decade,
@@ -595,13 +624,13 @@
 *.e-device.e-daterangepicker .e-calendar .e-header.e-month,
 *.e-device.e-daterangepicker .e-calendar .e-header.e-year,
 *.e-device.e-daterangepicker .e-calendar .e-header.e-decade {
-  padding: 10px 5px;
+  padding: 8px 8px;
 }
 
 .e-bigger .e-daterangepicker .e-footer,
 *.e-bigger.e-daterangepicker .e-footer,
 *.e-device.e-daterangepicker .e-footer {
-  height: 58px;
+  height: 63px;
 }
 
 .e-bigger .e-daterangepicker .e-footer .e-btn,
@@ -647,25 +676,27 @@
 .e-bigger .e-daterangepicker.e-device.e-popup,
 *.e-bigger.e-daterangepicker.e-device.e-popup,
 *.e-device.e-daterangepicker.e-device.e-popup {
-  max-width: 286px;
+  max-width: 300px;
 }
 
 .e-bigger .e-daterangepicker.e-device.e-popup .e-range-header,
 *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header,
 *.e-device.e-daterangepicker.e-device.e-popup .e-range-header {
   margin: 0;
-  padding: 12px;
+  padding: 12px 37px;
 }
 
 .e-bigger .e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
 *.e-bigger.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span,
 *.e-device.e-daterangepicker.e-device.e-popup .e-range-header .e-day-span {
-  margin: 10px 0;
+  height: 24px;
+  line-height: 24px;
+  margin: 8px 0 0;
 }
 
 .e-small .e-daterangepicker.e-popup .e-range-header,
 *.e-small.e-daterangepicker.e-popup .e-range-header {
-  margin: 10px 10px 0 10px;
+  padding: 12px 0;
 }
 
 .e-small .e-daterangepicker.e-popup .e-range-header .e-start-label,
@@ -757,92 +788,63 @@
 }
 
 .e-daterangepicker.e-popup,
-.e-bigger.e-small .e-daterangepicker.e-popup {
+.e-bigger.e-small .e-daterangepicker.e-popup,
+.e-bigger.e-small.e-daterangepicker.e-popup {
   background: #374151;
 }
 
 .e-daterangepicker.e-popup .e-calendar,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar {
   background-color: #374151;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-header .e-title,
 .e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-title,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-header .e-title,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover {
   color: #d1d5db;
   text-decoration: none;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover {
   background-color: #4b5563;
   color: #d1d5db;
 }
 
-.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span {
-  background-color: #4b5563;
-  border: 1px solid #fff;
-  color: #fff;
-}
-
-.e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover span,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover span {
+.e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover:not(.e-other-month) span,
+.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover:not(.e-other-month) span,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover:not(.e-other-month) span {
   background: #4b5563;
   border: none;
   color: #d1d5db;
 }
 
-.e-daterangepicker.e-popup .e-calendar .e-range-hover:not(.e-selected):hover span.e-day,
-.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date:not(.e-selected) span.e-day,
-.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover:not(.e-selected):hover span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date:not(.e-selected) span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day {
-  background-color: #6b7280;
-  border: none;
-  color: #d1d5db;
-}
-
-.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-today:hover span.e-day,
-.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day,
-.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-start-date.e-selected.e-today span.e-day,
-.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-end-date.e-selected.e-today span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-today:hover span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-focused-date.e-today span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-start-date.e-selected.e-today span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-end-date.e-selected.e-today span.e-day {
-  border: 1px solid #fff;
-}
-
-.e-daterangepicker.e-popup .e-calendar .e-range-hover.e-selected.e-today:hover span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-range-hover.e-selected.e-today:hover span.e-day {
-  border: 1px solid #fff;
-}
-
 .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover,
 .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
 .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover span,
 .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover:hover span.e-day,
-.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-selected,
-.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-selected span,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover span,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover:hover span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-selected,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-selected span {
-  background-color: #1f2937;
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover span,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover:hover span.e-day {
+  background-color: transparent;
   border: none;
   color: #9ca3af;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover,
-.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-selected,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-selected {
-  background-color: #1f2937;
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-range-hover {
+  background-color: transparent;
   border: none;
   color: #9ca3af;
 }
@@ -850,36 +852,53 @@
 .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
 .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover span.e-day,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover span.e-day {
+  background-color: #22d3ee;
+  color: #000;
+}
+
+.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover.e-other-month span.e-day,
+.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-other-month span.e-day,
+.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover.e-other-month span.e-day,
+.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-other-month span.e-day,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-end-date.e-selected.e-range-hover.e-other-month span.e-day,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-other-month span.e-day {
   background-color: #22d3ee;
   color: #000;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-today span.e-day,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-today span.e-day {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-today span.e-day,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-start-date.e-selected.e-range-hover.e-today span.e-day {
   background-color: #22d3ee;
   color: #000;
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-other-month.e-selected span,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-other-month.e-selected span {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-calendar .e-other-month.e-selected span,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-calendar .e-other-month.e-selected span {
   color: #000;
 }
 
 .e-daterangepicker.e-popup .e-presets,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-presets {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-presets,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-presets {
   background-color: #1f2937;
   color: #fff;
 }
 
 .e-daterangepicker.e-popup .e-presets .e-list-item.e-active,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-list-item.e-active {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-list-item.e-active,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-presets .e-list-item.e-active {
   background-color: #6b7280;
   color: #fff;
 }
 
 .e-daterangepicker.e-popup .e-presets .e-list-item.e-hover,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-list-item.e-hover {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-presets .e-list-item.e-hover,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-presets .e-list-item.e-hover {
   background-color: #4b5563;
   color: #fff;
 }
@@ -887,30 +906,55 @@
 .e-daterangepicker.e-popup .e-start-label,
 .e-daterangepicker.e-popup .e-end-label,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-start-label,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-end-label {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-end-label,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-start-label,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-end-label {
   color: #9ca3af;
 }
 
 .e-daterangepicker.e-popup .e-change-icon,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-change-icon {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-change-icon,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-change-icon {
   color: #d1d5db;
 }
 
 .e-daterangepicker.e-popup .e-day-span,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-day-span {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-day-span,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-day-span {
   color: #8b919e;
 }
 
 .e-daterangepicker.e-popup .e-separator,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-separator {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-separator,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-separator {
   background-color: #4b5563;
 }
 
 .e-daterangepicker.e-popup .e-footer,
-.e-bigger.e-small .e-daterangepicker.e-popup .e-footer {
+.e-bigger.e-small .e-daterangepicker.e-popup .e-footer,
+.e-bigger.e-small.e-daterangepicker.e-popup .e-footer {
   background-color: #232e3e;
 }
 
+.e-daterangepicker.e-popup .e-footer .e-cancel.e-flat:not(:hover),
+.e-bigger.e-small .e-daterangepicker.e-popup .e-footer .e-cancel.e-flat:not(:hover),
+.e-bigger.e-small.e-daterangepicker.e-popup .e-footer .e-cancel.e-flat:not(:hover) {
+  -webkit-tap-highlight-color: transparent;
+  background-color: #1f2937;
+  border-color: #6b7280;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  color: #fff;
+}
+
+.e-daterangepicker.e-popup .e-footer .e-apply.e-flat.e-primary:not(:hover):not(:disabled),
+.e-bigger.e-small .e-daterangepicker.e-popup .e-footer .e-apply.e-flat.e-primary:not(:hover):not(:disabled),
+.e-bigger.e-small.e-daterangepicker.e-popup .e-footer .e-apply.e-flat.e-primary:not(:hover):not(:disabled) {
+  -webkit-tap-highlight-color: transparent;
+  background-color: #22d3ee;
+  border-color: #22d3ee;
+  color: #000;
+}
+
 .e-bigger .e-daterangepicker,
 *.e-bigger.e-daterangepicker,
 *.e-device.e-daterangepicker {