responsive elements & design dark mode page turns

app/globals.css

@@ -235,6 +235,13 @@ html {
   font-weight: 700;
 }
 
+@media (min-width: 768px) {
+  .MuiModal-root .MuiBox-root {
+    max-height: calc(100vh - 48px) !important;
+    overflow: auto !important;
+  }
+}
+
 @keyframes openx {
   0% {
     width: 0;
@@ -668,6 +675,12 @@ html {
   width: 300px !important;
 }
 
+@media (max-width: 768px) {
+  .panel-jalaali {
+    width: 300px !important;
+  }
+}
+
 .day-label-bar,
 .panel-header-inner,
 .days-body {
@@ -723,3 +736,7 @@ html {
   font-weight: 400 !important;
   color: #a1a1a1 !important;
 }
+
+.dark .field-date-picker svg path {
+  fill: #a1a1a1;
+}