@syncfusion/ej2-calendars 25.2.5 → 26.1.35

package/styles/material3-dark.css

@@ -44,7 +44,7 @@
   --color-sf-on-warning: 99, 52, 0;
   --color-sf-on-warning-container: 255, 220, 193;
   --color-sf-spreadsheet-gridline: 231, 224, 236;
-  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
   --color-sf-success-text: 0, 0, 0;
   --color-sf-warning-text: 0, 0, 0;
   --color-sf-info-text: 0, 0, 0;
@@ -53,7 +53,6 @@
   --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
 }
 
-/*! calendar material3 theme variables */
 /*! component icons */
 .e-calendar .e-header .e-date-icon-prev::before {
   content: "\e765";
@@ -98,6 +97,7 @@ ejs-calendar {
   display: block;
   overflow: auto;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -172,7 +172,8 @@ ejs-calendar {
 .e-calendar .e-content th, .e-calendar .e-content td,
 .e-bigger.e-small .e-calendar .e-content th,
 .e-bigger.e-small .e-calendar .e-content td {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-calendar .e-content td.e-disabled,
 .e-bigger.e-small .e-calendar .e-content td.e-disabled {
@@ -187,7 +188,8 @@ ejs-calendar {
 }
 .e-calendar .e-content td.e-disabled.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-disabled.e-today span.e-day {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
 }
 .e-calendar .e-content td,
@@ -417,12 +419,16 @@ ejs-calendar {
   background: transparent;
   border-top: none;
   cursor: default;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: row;
-      flex-direction: row;
-  -ms-flex-pack: end;
-      justify-content: flex-end;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
   padding: 8px 12px 8px 12px;
   text-align: center;
   width: 100%;
@@ -556,7 +562,6 @@ ejs-calendar {
   max-width: 252px;
   min-width: 240px;
   padding: 0;
-  min-height: 220px;
 }
 .e-small.e-calendar.e-calendar-day-header-lg,
 .e-small .e-calendar.e-calendar-day-header-lg {
@@ -607,7 +612,8 @@ ejs-calendar {
 .e-calendar .e-btn.e-today.e-flat.e-disabled, .e-calendar .e-btn.e-today.e-flat.e-disabled:hover, .e-calendar .e-btn.e-today.e-flat.e-disabled:active, .e-calendar .e-btn.e-today.e-flat.e-disabled:focus, .e-calendar .e-btn.e-today.e-flat.e-disabled:hover:active {
   background: transparent;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   cursor: default;
   opacity: 0.35;
@@ -633,7 +639,8 @@ ejs-calendar {
   background: transparent;
   border-radius: 8px;
   border: 1px solid rgba(var(--color-sf-outline-variant));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-calendar .e-date-icon-prev, .e-calendar .e-date-icon-next,
 .e-bigger.e-small .e-calendar .e-date-icon-prev,
@@ -666,13 +673,15 @@ ejs-calendar {
 }
 .e-calendar .e-header .e-title:focus,
 .e-bigger.e-small .e-calendar .e-header .e-title:focus {
-  box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
+  -webkit-box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
+          box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
   background: none;
   text-decoration: none;
 }
 .e-calendar .e-header .e-title:active,
 .e-bigger.e-small .e-calendar .e-header .e-title:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   background: rgba(var(--color-sf-on-surface), 0.12);
   text-decoration: none;
 }
@@ -691,7 +700,8 @@ ejs-calendar {
 .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus,
 .e-bigger.e-small .e-calendar .e-header .e-prev:focus,
 .e-bigger.e-small .e-calendar .e-header .e-next:focus {
-  box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
+  -webkit-box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
+          box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
 }
 .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active,
 .e-bigger.e-small .e-calendar .e-header .e-prev:active,
@@ -763,7 +773,8 @@ ejs-calendar {
   background: rgba(var(--color-sf-on-surface), 0.05);
   border: none;
   border-radius: 32px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-calendar .e-content td.e-focused-date:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
@@ -778,14 +789,16 @@ ejs-calendar {
   background: none;
   border: 1px solid rgba(var(--color-sf-primary));
   border-radius: 32px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-primary));
 }
 .e-calendar .e-content td.e-focused-date.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: rgba(var(--color-sf-primary), 0.08);
   border: 1px solid rgba(var(--color-sf-primary));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-primary));
 }
 .e-calendar .e-content td.e-today:focus span.e-day, .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day,
@@ -808,7 +821,8 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-today.e-selected span.e-day {
   background: rgba(var(--color-sf-primary));
   border: 1px solid rgba(var(--color-sf-primary));
-  box-shadow: inset 0 0 0 2px linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
+  -webkit-box-shadow: inset 0 0 0 2px linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
+          box-shadow: inset 0 0 0 2px linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-primary));
 }
 .e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -873,9 +887,9 @@ ejs-calendar {
 .e-calendar .e-content td.e-selected span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
   background: rgba(var(--color-sf-primary));
+  color: rgba(var(--color-sf-on-primary));
   border: none;
   border-radius: 32px;
-  color: rgba(var(--color-sf-on-primary));
 }
 .e-calendar .e-content .e-footer,
 .e-bigger.e-small .e-calendar .e-content .e-footer {
@@ -901,35 +915,70 @@ ejs-calendar {
 }
 
 .e-calendar .e-zoomin {
-  animation: animatezoom 0.3s;
+  -webkit-animation: animatezoom 0.3s;
+          animation: animatezoom 0.3s;
+}
+
+@-webkit-keyframes animatezoom {
+  from {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
 }
 
 @keyframes animatezoom {
   from {
-    transform: scale(0);
+    -webkit-transform: scale(0);
+            transform: scale(0);
   }
   to {
-    transform: scale(1);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
 .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
-  box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
+  -webkit-box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
+          box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
   border-radius: 32px;
 }
 
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 @keyframes e-input-ripple {
   100% {
     opacity: 0;
-    transform: scale(4);
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@-webkit-keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
 @keyframes slideTopUp {
   from {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
   to {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
 /* stylelint-disable-line no-empty-source */
@@ -947,6 +996,7 @@ ejs-calendar {
 
 .e-input-group.e-control-wrapper.e-time-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-time-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -974,6 +1024,7 @@ ejs-calendar {
 }
 
 .e-timepicker.e-time-modal {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -1091,15 +1142,20 @@ ejs-calendar {
 }
 
 .e-timepicker-mob-popup-wrap {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   height: 100%;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   left: 0;
   max-height: 100%;
   position: fixed;
@@ -1124,10 +1180,12 @@ ejs-calendar {
 .e-datetimepicker.e-popup-expand .e-model-header {
   height: 10%;
   padding: 2.5vh 2.5vw 2.5vh 1.5vw;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   font-size: 2vh;
   border-bottom: none;
 }
@@ -1198,7 +1256,6 @@ ejs-calendar {
   }
 }
 /* stylelint-enable */
-/*! timepicker theme */
 .e-time-wrapper .e-input-group-icon.e-icons.e-active {
   color: rgba(var(--color-sf-on-surface-variant));
 }
@@ -1210,12 +1267,15 @@ ejs-calendar {
 }
 
 .e-timepicker.e-popup {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: none;
   border-radius: 4px;
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 .e-timepicker.e-popup .e-list-parent.e-ul {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-timepicker.e-popup .e-list-parent.e-ul li.e-list-item {
@@ -1261,22 +1321,6 @@ ejs-calendar {
   font-weight: 500;
 }
 
-/* stylelint-disable property-no-vendor-prefix */
-@keyframes e-input-ripple {
-  100% {
-    opacity: 0;
-    transform: scale(4);
-  }
-}
-@keyframes slideTopUp {
-  from {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  to {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-}
-/* stylelint-disable-line no-empty-source */ /*! calendar material3 theme variables */
 /*! component icons */
 .e-input-group-icon.e-date-icon,
 *.e-control-wrapper .e-input-group-icon.e-date-icon {
@@ -1347,12 +1391,14 @@ ejs-calendar {
 
 .e-input-group.e-control-wrapper.e-date-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-date-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 
 .e-date-wrapper:not(.e-filled) .e-date-icon.e-icons {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 
 .e-datepicker .e-calendar .e-content table tbody tr.e-month-hide:last-child {
@@ -1364,6 +1410,7 @@ ejs-calendar {
   pointer-events: auto;
 }
 .e-datepicker.e-date-modal {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -1375,6 +1422,7 @@ ejs-calendar {
   z-index: 999;
 }
 .e-datepicker .e-model-header {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
   cursor: default;
@@ -1400,15 +1448,20 @@ ejs-calendar {
 }
 
 .e-datepick-mob-popup-wrap {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   height: 100%;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   left: 0;
   max-height: 100%;
   position: fixed;
@@ -1477,7 +1530,8 @@ ejs-calendar {
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
   background: transparent;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   font-weight: 400;
   padding: 0;
 }
@@ -1642,18 +1696,12 @@ ejs-calendar {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
     float: left;
   }
-}
-@media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-day-wrapper {
     margin: 12vh 0 0 0;
   }
-}
-@media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-model-day {
     font-size: 4vw;
   }
-}
-@media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev {
     margin-right: 18px;
   }
@@ -1689,14 +1737,10 @@ ejs-calendar {
     max-width: 100%;
     overflow: visible;
   }
-}
-@media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar-cell-container {
     height: 70%;
     width: 100%;
   }
-}
-@media screen and (orientation: landscape) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar.e-device .e-month table tbody {
     display: table-row-group;
   }
@@ -1720,7 +1764,8 @@ ejs-calendar {
 .e-bigger.e-datepicker.e-popup-wrapper,
 .e-small.e-datepicker.e-popup-wrapper {
   border: none;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
 }
 .e-datepicker .e-calendar,
 .e-bigger.e-small .e-datepicker .e-calendar,
@@ -1729,6 +1774,7 @@ ejs-calendar {
 .e-bigger.e-small.e-datepicker .e-calendar,
 .e-bigger.e-datepicker .e-calendar,
 .e-small.e-datepicker .e-calendar {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: none;
 }
@@ -1746,22 +1792,6 @@ ejs-calendar {
   background: rgba(var(--color-sf-on-surface), 0.08);
 }
 
-/* stylelint-disable property-no-vendor-prefix */
-@keyframes e-input-ripple {
-  100% {
-    opacity: 0;
-    transform: scale(4);
-  }
-}
-@keyframes slideTopUp {
-  from {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  to {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-}
-/* stylelint-disable-line no-empty-source */ /*! calendar material3 theme variables */
 /*! component icons */
 .e-input-group-icon.e-range-icon,
 *.e-control-wrapper .e-input-group-icon.e-range-icon {
@@ -1868,9 +1898,9 @@ ejs-calendar {
   font-family: "e-icons";
 }
 
-/*! daterangepicker layout */
 .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-date-range-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -1894,7 +1924,8 @@ ejs-calendar {
 .e-bigger.e-small .e-daterangepicker.e-popup {
   border: none;
   border-radius: 8px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
   max-height: 500px;
   max-width: 730px;
 }
@@ -1912,6 +1943,7 @@ ejs-calendar {
 }
 .e-daterangepicker.e-popup .e-range-header,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   padding: 16px 16px 0 16px;
   width: auto;
@@ -1928,6 +1960,7 @@ ejs-calendar {
   text-decoration: none;
   text-overflow: ellipsis;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   white-space: nowrap;
@@ -1949,14 +1982,17 @@ ejs-calendar {
   margin: 0 0 15px 0;
   text-align: center;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
 }
 .e-daterangepicker.e-popup .e-range-header .e-start-end,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-range-header .e-start-end {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 35px;
@@ -2025,14 +2061,18 @@ ejs-calendar {
 }
 .e-daterangepicker.e-popup .e-footer,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-footer {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   border-top: 0.75px solid rgba(var(--color-sf-outline-variant));
   clear: both;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: row-reverse;
-      flex-direction: row-reverse;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
   height: 48px;
 }
 .e-daterangepicker.e-popup .e-footer .e-btn,
@@ -2058,6 +2098,7 @@ ejs-calendar {
 }
 .e-daterangepicker.e-popup .e-calendar-container,
 .e-bigger.e-small .e-daterangepicker.e-popup .e-calendar-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -2143,10 +2184,13 @@ ejs-calendar {
 }
 .e-daterangepicker.e-rtl .e-footer,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-footer {
-  -ms-flex-direction: row;
-      flex-direction: row;
-  -ms-flex-pack: end;
-      justify-content: flex-end;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
 }
 .e-daterangepicker.e-rtl .e-footer .e-btn.e-cancel,
 .e-bigger.e-small .e-daterangepicker.e-rtl .e-footer .e-btn.e-cancel {
@@ -2159,6 +2203,7 @@ ejs-calendar {
 
 .e-bigger .e-daterangepicker.e-range-modal,
 *.e-device.e-daterangepicker.e-range-modal {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -2177,6 +2222,7 @@ ejs-calendar {
 .e-bigger .e-daterangepicker.e-popup,
 *.e-bigger.e-daterangepicker.e-popup,
 *.e-device.e-daterangepicker.e-popup {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-bigger .e-daterangepicker.e-popup.e-preset-wrapper,
@@ -2198,15 +2244,19 @@ ejs-calendar {
 .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 {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 36px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   width: 100%;
@@ -2217,7 +2267,8 @@ ejs-calendar {
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn,
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn {
   border: 1px solid rgba(var(--color-sf-primary));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   font-size: 14px;
   font-weight: 500;
   height: 36px;
@@ -2244,7 +2295,8 @@ ejs-calendar {
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn:hover:not([disabled]),
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn:hover,
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn:hover:not([disabled]) {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn.e-active, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn.e-active:active, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn.e-active, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn.e-active:active:not([disabled]), .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn.e-active:hover, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn.e-active:hover,
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn.e-active,
@@ -2259,7 +2311,8 @@ ejs-calendar {
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn.e-active:active:not([disabled]),
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn.e-active:hover,
 *.e-device.e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn.e-active:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn, .e-bigger .e-daterangepicker.e-popup .e-range-header .e-start-end .e-end-btn,
 *.e-bigger.e-daterangepicker.e-popup .e-range-header .e-start-end .e-start-btn,
@@ -2431,15 +2484,20 @@ ejs-calendar {
 }
 
 .e-daterangepick-mob-popup-wrap {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   height: 100%;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   left: 0;
   max-height: 100%;
   position: fixed;
@@ -2661,10 +2719,12 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header {
   height: 10%;
   padding: 2.5vh 2.5vw 2.5vh 1.5vw;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   font-size: 2vh;
   border-bottom: none;
 }
@@ -2720,8 +2780,6 @@ ejs-calendar {
     max-height: 85%;
     height: 85%;
   }
-}
-@media screen and (orientation: landscape) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header {
     height: 15%;
     font-size: 18px;
@@ -2732,8 +2790,6 @@ ejs-calendar {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header .e-model-title {
     padding: 1vh 1vw;
   }
-}
-@media screen and (orientation: landscape) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header {
     width: 100%;
   }
@@ -2805,8 +2861,6 @@ ejs-calendar {
   width: calc(100% - 110px);
 }
 
-/* stylelint-enable */
-/*! daterangepicker theme */
 .e-date-range-wrapper .e-input-group-icon.e-icons.e-active {
   color: rgba(var(--color-sf-on-surface-variant));
 }
@@ -2817,11 +2871,13 @@ ejs-calendar {
 .e-daterangepicker.e-popup,
 .e-bigger.e-small .e-daterangepicker.e-popup,
 .e-bigger.e-small.e-daterangepicker.e-popup {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .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: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-daterangepicker.e-popup .e-calendar .e-header .e-title, .e-daterangepicker.e-popup .e-calendar .e-header .e-title:hover,
@@ -2835,6 +2891,7 @@ ejs-calendar {
 .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: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -2962,11 +3019,13 @@ ejs-calendar {
 .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: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .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: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
@@ -2987,6 +3046,7 @@ ejs-calendar {
 *.e-bigger.e-daterangepicker .e-end-btn,
 *.e-device.e-daterangepicker .e-start-btn,
 *.e-device.e-daterangepicker .e-end-btn {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-bigger .e-daterangepicker .e-start-btn.e-active, .e-bigger .e-daterangepicker .e-start-btn.e-active:active, .e-bigger .e-daterangepicker .e-end-btn.e-active, .e-bigger .e-daterangepicker .e-end-btn.e-active:active:not([disabled]), .e-bigger .e-daterangepicker .e-start-btn.e-active:hover, .e-bigger .e-daterangepicker .e-end-btn.e-active:hover,
@@ -3014,22 +3074,6 @@ ejs-calendar {
   color: rgba(var(--color-sf-on-primary));
 }
 
-/* stylelint-disable property-no-vendor-prefix */
-@keyframes e-input-ripple {
-  100% {
-    opacity: 0;
-    transform: scale(4);
-  }
-}
-@keyframes slideTopUp {
-  from {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-  to {
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-}
-/* stylelint-disable-line no-empty-source */
 /*! component icons */
 .e-datetime-wrapper .e-time-icon.e-icons::before {
   content: "\e705";
@@ -3038,6 +3082,7 @@ ejs-calendar {
 
 .e-input-group.e-control-wrapper.e-datetime-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
 .e-float-input.e-control-wrapper.e-input-group.e-datetime-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
@@ -3050,13 +3095,15 @@ ejs-calendar {
   font-size: 16px;
 }
 .e-datetime-wrapper.e-control-wrapper {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .e-datetime-wrapper .e-time-icon.e-icons.e-disabled, .e-datetime-wrapper .e-date-icon.e-icons.e-disabled {
   pointer-events: none;
 }
 .e-datetime-wrapper .e-clear-icon {
-  box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
 }
 .e-datetime-wrapper span {
   cursor: pointer;
@@ -3080,6 +3127,7 @@ ejs-calendar {
 }
 
 .e-datetimepicker.e-time-modal {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   height: 100%;
   left: 0;
@@ -3219,9 +3267,11 @@ ejs-calendar {
 .e-datetimepicker.e-popup {
   border: none;
   border-radius: 4px;
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 .e-datetimepicker.e-popup .e-list-parent.e-ul {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-datetimepicker.e-popup .e-list-parent.e-ul li.e-list-item {