admin page updates

internal/embedfs/web/css/flatpickr-catppuccin.css

@@ -0,0 +1,151 @@
+/* Flatpickr Catppuccin Mocha Theme */
+/* Override flatpickr colors to match our custom theme */
+
+.flatpickr-calendar {
+  background: #1e1e2e; /* mantle */
+  border: 1px solid #45475a; /* surface1 */
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+.flatpickr-months {
+  background: #181825; /* base */
+  border-bottom: 1px solid #45475a; /* surface1 */
+}
+
+.flatpickr-month {
+  color: #cdd6f4; /* text */
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  background: #1e1e2e; /* mantle */
+  color: #cdd6f4; /* text */
+  border: 1px solid #45475a; /* surface1 */
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  background: #313244; /* surface0 */
+}
+
+.flatpickr-current-month input.cur-year {
+  color: #cdd6f4; /* text */
+  background: #1e1e2e; /* mantle */
+}
+
+.flatpickr-current-month input.cur-year:hover {
+  background: #313244; /* surface0 */
+}
+
+.flatpickr-prev-month,
+.flatpickr-next-month {
+  color: #cdd6f4; /* text */
+}
+
+.flatpickr-prev-month:hover,
+.flatpickr-next-month:hover {
+  color: #89b4fa; /* blue */
+}
+
+.flatpickr-weekdays {
+  background: #181825; /* base */
+  border-bottom: 1px solid #45475a; /* surface1 */
+}
+
+span.flatpickr-weekday {
+  color: #bac2de; /* subtext0 */
+  font-weight: 600;
+}
+
+.flatpickr-days {
+  background: #1e1e2e; /* mantle */
+}
+
+.flatpickr-day {
+  color: #cdd6f4; /* text */
+  border: 1px solid transparent;
+}
+
+.flatpickr-day.today {
+  border-color: #89b4fa; /* blue */
+  background: #89b4fa20; /* blue with transparency */
+  color: #89b4fa; /* blue */
+}
+
+.flatpickr-day.today:hover {
+  background: #89b4fa40; /* blue with more transparency */
+  border-color: #89b4fa; /* blue */
+  color: #89b4fa; /* blue */
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange {
+  background: #89b4fa; /* blue */
+  border-color: #89b4fa; /* blue */
+  color: #181825; /* base */
+}
+
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover {
+  background: #74a7f9; /* slightly lighter blue */
+  border-color: #74a7f9;
+}
+
+.flatpickr-day:hover {
+  background: #313244; /* surface0 */
+  border-color: #45475a; /* surface1 */
+}
+
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay {
+  color: #585b70; /* surface2 */
+}
+
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+  color: #585b70; /* surface2 */
+  cursor: not-allowed;
+}
+
+.flatpickr-day.inRange {
+  background: #89b4fa30; /* blue with light transparency */
+  border-color: transparent;
+  box-shadow: -5px 0 0 #89b4fa30, 5px 0 0 #89b4fa30;
+}
+
+.flatpickr-time {
+  background: #181825; /* base */
+  border-top: 1px solid #45475a; /* surface1 */
+}
+
+.flatpickr-time input {
+  color: #cdd6f4; /* text */
+  background: #1e1e2e; /* mantle */
+}
+
+.flatpickr-time input:hover,
+.flatpickr-time input:focus {
+  background: #313244; /* surface0 */
+}
+
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  color: #cdd6f4; /* text */
+}
+
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: #313244; /* surface0 */
+}
+
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #cdd6f4; /* text */
+}
+
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: #cdd6f4; /* text */
+}
+
+.flatpickr-time .numInputWrapper span:hover {
+  background: #313244; /* surface0 */
+}

internal/embedfs/web/css/input.css

@@ -127,3 +127,74 @@
   font-weight: 700;
   font-style: italic;
 }
+
+/* Custom Scrollbar Styles - Catppuccin Theme */
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface1) var(--mantle);
+}
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--mantle);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--surface1);
+  border-radius: 4px;
+  border: 2px solid var(--mantle);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--surface2);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: var(--overlay0);
+}
+
+/* Specific styling for multi-select dropdowns */
+.multi-select-dropdown::-webkit-scrollbar {
+  width: 6px;
+}
+
+.multi-select-dropdown::-webkit-scrollbar-track {
+  background: var(--base);
+  border-radius: 3px;
+}
+
+.multi-select-dropdown::-webkit-scrollbar-thumb {
+  background: var(--surface2);
+  border-radius: 3px;
+  border: 1px solid var(--base);
+}
+
+.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
+  background: var(--overlay0);
+}
+
+/* Specific styling for modal content */
+.modal-scrollable::-webkit-scrollbar {
+  width: 8px;
+}
+
+.modal-scrollable::-webkit-scrollbar-track {
+  background: var(--base);
+}
+
+.modal-scrollable::-webkit-scrollbar-thumb {
+  background: var(--surface1);
+  border-radius: 4px;
+}
+
+.modal-scrollable::-webkit-scrollbar-thumb:hover {
+  background: var(--surface2);
+}

internal/embedfs/web/css/output.css

@@ -37,6 +37,7 @@
     --text-6xl--line-height: 1;
     --text-9xl: 8rem;
     --text-9xl--line-height: 1;
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -379,6 +380,9 @@
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
   .line-clamp-2 {
     overflow: hidden;
     display: -webkit-box;
@@ -440,6 +444,9 @@
   .h-screen {
     height: 100vh;
   }
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -664,6 +671,9 @@
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
+  .gap-x-6 {
+    column-gap: calc(var(--spacing) * 6);
+  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -685,6 +695,9 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .gap-y-3 {
+    row-gap: calc(var(--spacing) * 3);
+  }
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
@@ -913,9 +926,6 @@
   .p-2\.5 {
     padding: calc(var(--spacing) * 2.5);
   }
-  .p-3 {
-    padding: calc(var(--spacing) * 3);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1051,6 +1061,10 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -1066,6 +1080,9 @@
   .text-wrap {
     text-wrap: wrap;
   }
+  .break-words {
+    overflow-wrap: break-word;
+  }
   .break-all {
     word-break: break-all;
   }
@@ -1144,6 +1161,10 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1816,6 +1837,57 @@
   font-weight: 700;
   font-style: italic;
 }
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--surface1) var(--mantle);
+}
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--mantle);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--surface1);
+  border-radius: 4px;
+  border: 2px solid var(--mantle);
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--surface2);
+}
+::-webkit-scrollbar-thumb:active {
+  background: var(--overlay0);
+}
+.multi-select-dropdown::-webkit-scrollbar {
+  width: 6px;
+}
+.multi-select-dropdown::-webkit-scrollbar-track {
+  background: var(--base);
+  border-radius: 3px;
+}
+.multi-select-dropdown::-webkit-scrollbar-thumb {
+  background: var(--surface2);
+  border-radius: 3px;
+  border: 1px solid var(--base);
+}
+.multi-select-dropdown::-webkit-scrollbar-thumb:hover {
+  background: var(--overlay0);
+}
+.modal-scrollable::-webkit-scrollbar {
+  width: 8px;
+}
+.modal-scrollable::-webkit-scrollbar-track {
+  background: var(--base);
+}
+.modal-scrollable::-webkit-scrollbar-thumb {
+  background: var(--surface1);
+  border-radius: 4px;
+}
+.modal-scrollable::-webkit-scrollbar-thumb:hover {
+  background: var(--surface2);
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

internal/embedfs/web/js/admin.js

@@ -10,8 +10,236 @@ function formatJSON(json) {
   }
 }
 
-// Handle HTMX navigation for admin sections
+// Initialize flatpickr for all date inputs
+function initFlatpickr() {
+  document.querySelectorAll(".flatpickr-date").forEach(function (input) {
+    if (!input._flatpickr) {
+      flatpickr(input, {
+        dateFormat: "d/m/Y",
+        allowInput: true,
+      });
+    }
+  });
+}
+
+// Submit the audit filter form with specific page/perPage/order params
+function submitAuditFilter(page, perPage, order, orderBy) {
+  const form = document.getElementById("audit-filters-form");
+  if (!form) return;
+
+  // Create hidden inputs for pagination/sorting if they don't exist
+  let pageInput = form.querySelector('input[name="page"]');
+  if (!pageInput) {
+    pageInput = document.createElement("input");
+    pageInput.type = "hidden";
+    pageInput.name = "page";
+    form.appendChild(pageInput);
+  }
+  pageInput.value = page;
+
+  let perPageInput = form.querySelector('input[name="per_page"]');
+  if (!perPageInput) {
+    perPageInput = document.createElement("input");
+    perPageInput.type = "hidden";
+    perPageInput.name = "per_page";
+    form.appendChild(perPageInput);
+  }
+  perPageInput.value = perPage;
+
+  let orderInput = form.querySelector('input[name="order"]');
+  if (!orderInput) {
+    orderInput = document.createElement("input");
+    orderInput.type = "hidden";
+    orderInput.name = "order";
+    form.appendChild(orderInput);
+  }
+  orderInput.value = order;
+
+  let orderByInput = form.querySelector('input[name="order_by"]');
+  if (!orderByInput) {
+    orderByInput = document.createElement("input");
+    orderByInput.type = "hidden";
+    orderByInput.name = "order_by";
+    form.appendChild(orderByInput);
+  }
+  orderByInput.value = orderBy;
+
+  htmx.trigger(form, "submit");
+}
+
+// Sort by column - toggle direction if same column
+function sortAuditColumn(field, currentOrder, currentOrderBy) {
+  const page = 1; // Reset to first page when sorting
+  const perPageSelect = document.getElementById("per-page-select");
+  const perPage = perPageSelect ? parseInt(perPageSelect.value) || 25 : 25;
+  let newOrder, newOrderBy;
+
+  if (currentOrderBy === field) {
+    // Toggle order
+    newOrder = currentOrder === "ASC" ? "DESC" : "ASC";
+    newOrderBy = field;
+  } else {
+    // New column, default to DESC
+    newOrder = "DESC";
+    newOrderBy = field;
+  }
+
+  submitAuditFilter(page, perPage, newOrder, newOrderBy);
+}
+
+// Clear all audit filters
+function clearAuditFilters() {
+  const form = document.getElementById("audit-filters-form");
+  if (!form) return;
+
+  form.reset();
+
+  // Clear flatpickr instances
+  document.querySelectorAll(".flatpickr-date").forEach(function (input) {
+    var fp = input._flatpickr;
+    if (fp) fp.clear();
+  });
+
+  // Clear multi-select dropdowns
+  document.querySelectorAll(".multi-select-container").forEach(function (container) {
+    var hiddenInput = container.querySelector('input[type="hidden"]');
+    if (hiddenInput) hiddenInput.value = "";
+    var selectedDisplay = container.querySelector(".multi-select-selected");
+    if (selectedDisplay)
+      selectedDisplay.innerHTML = '<span class="text-subtext1">Select...</span>';
+    container.querySelectorAll(".multi-select-option").forEach(function (opt) {
+      opt.classList.remove("bg-blue", "text-mantle");
+      opt.classList.add("hover:bg-surface1");
+    });
+  });
+
+  // Trigger form submission with reset pagination
+  submitAuditFilter(1, 25, "DESC", "created_at");
+}
+
+// Toggle multi-select dropdown visibility
+function toggleMultiSelect(containerId) {
+  var dropdown = document.getElementById(containerId + "-dropdown");
+  if (dropdown) {
+    dropdown.classList.toggle("hidden");
+  }
+}
+
+// Toggle multi-select option selection
+function toggleMultiSelectOption(containerId, value, label) {
+  var container = document.getElementById(containerId);
+  var hiddenInput = container.querySelector('input[type="hidden"]');
+  var selectedDisplay = container.querySelector(".multi-select-selected");
+
+  var values = hiddenInput.value ? hiddenInput.value.split(",") : [];
+  var index = values.indexOf(value);
+
+  if (index > -1) {
+    values.splice(index, 1);
+  } else {
+    values.push(value);
+  }
+
+  hiddenInput.value = values.join(",");
+
+  var option = container.querySelector('[data-value="' + value + '"]');
+  if (option) {
+    if (index > -1) {
+      option.classList.remove("bg-blue", "text-mantle");
+      option.classList.add("hover:bg-surface1");
+    } else {
+      option.classList.add("bg-blue", "text-mantle");
+      option.classList.remove("hover:bg-surface1");
+    }
+  }
+
+  if (values.length === 0) {
+    selectedDisplay.innerHTML = '<span class="text-subtext1">Select...</span>';
+  } else if (values.length === 1) {
+    selectedDisplay.innerHTML = "<span>" + label + "</span>";
+  } else {
+    selectedDisplay.innerHTML = "<span>" + values.length + " selected</span>";
+  }
+
+  // Trigger form submission
+  document.getElementById("audit-filters-form").requestSubmit();
+}
+
+// Submit the users page with specific page/perPage/order params
+function submitUsersPage(page, perPage, order, orderBy) {
+  const formData = new FormData();
+  formData.append("page", page);
+  formData.append("per_page", perPage);
+  formData.append("order", order);
+  formData.append("order_by", orderBy);
+
+  htmx.ajax("POST", "/admin/users", {
+    target: "#users-list-container",
+    swap: "outerHTML",
+    values: Object.fromEntries(formData),
+  });
+}
+
+// Sort users column - toggle direction if same column
+function sortUsersColumn(field, currentOrder, currentOrderBy) {
+  const page = 1; // Reset to first page when sorting
+  const perPageSelect = document.getElementById("users-per-page-select");
+  const perPage = perPageSelect ? parseInt(perPageSelect.value) || 25 : 25;
+  let newOrder, newOrderBy;
+
+  if (currentOrderBy === field) {
+    // Toggle order
+    newOrder = currentOrder === "ASC" ? "DESC" : "ASC";
+    newOrderBy = field;
+  } else {
+    // New column, default to ASC
+    newOrder = "ASC";
+    newOrderBy = field;
+  }
+
+  submitUsersPage(page, perPage, newOrder, newOrderBy);
+}
+
+// Submit the roles page with specific page/perPage/order params
+function submitRolesPage(page, perPage, order, orderBy) {
+  const formData = new FormData();
+  formData.append("page", page);
+  formData.append("per_page", perPage);
+  formData.append("order", order);
+  formData.append("order_by", orderBy);
+
+  htmx.ajax("POST", "/admin/roles", {
+    target: "#roles-list-container",
+    swap: "outerHTML",
+    values: Object.fromEntries(formData),
+  });
+}
+
+// Sort roles column - toggle direction if same column
+function sortRolesColumn(field, currentOrder, currentOrderBy) {
+  const page = 1; // Reset to first page when sorting
+  const perPageSelect = document.getElementById("roles-per-page-select");
+  const perPage = perPageSelect ? parseInt(perPageSelect.value) || 25 : 25;
+  let newOrder, newOrderBy;
+
+  if (currentOrderBy === field) {
+    // Toggle order
+    newOrder = currentOrder === "ASC" ? "DESC" : "ASC";
+    newOrderBy = field;
+  } else {
+    // New column, default to ASC
+    newOrder = "ASC";
+    newOrderBy = field;
+  }
+
+  submitRolesPage(page, perPage, newOrder, newOrderBy);
+}
+
+// Handle HTMX navigation and initialization
 document.addEventListener("DOMContentLoaded", function () {
+  // Initialize flatpickr on page load
+  initFlatpickr();
+
   // Update active nav item after HTMX navigation
   document.body.addEventListener("htmx:afterSwap", function (event) {
     if (event.detail.target.id === "admin-content") {
@@ -23,13 +251,40 @@ document.addEventListener("DOMContentLoaded", function () {
       document.querySelectorAll("nav a").forEach(function (link) {
         const href = link.getAttribute("href");
         if (href && href.includes("/" + section)) {
-          link.classList.remove("text-subtext0", "hover:bg-surface1", "hover:text-text");
-          link.classList.add("bg-blue", "text-mantle", "font-semibold");
+          link.classList.remove(
+            "border-transparent",
+            "text-subtext0",
+            "hover:text-text",
+            "hover:border-surface2"
+          );
+          link.classList.add("border-blue", "text-blue", "font-semibold");
         } else {
-          link.classList.remove("bg-blue", "text-mantle", "font-semibold");
-          link.classList.add("text-subtext0", "hover:bg-surface1", "hover:text-text");
+          link.classList.remove("border-blue", "text-blue", "font-semibold");
+          link.classList.add(
+            "border-transparent",
+            "text-subtext0",
+            "hover:text-text",
+            "hover:border-surface2"
+          );
         }
       });
+
+      // Re-initialize flatpickr after content swap
+      initFlatpickr();
+    }
+
+    // Re-initialize flatpickr when audit results are updated
+    if (event.detail.target.id === "audit-results-container") {
+      initFlatpickr();
+    }
+  });
+
+  // Close multi-select dropdowns when clicking outside
+  document.addEventListener("click", function (evt) {
+    if (!evt.target.closest(".multi-select-container")) {
+      document.querySelectorAll(".multi-select-dropdown").forEach(function (d) {
+        d.classList.add("hidden");
+      });
     }
   });
 });

internal/embedfs/web/js/pagination.js

@@ -25,6 +25,19 @@ function paginateData(
       this.submit();
     },
 
+    sortByColumn(field) {
+      if (this.orderBy === field) {
+        // Toggle order if same column
+        this.order = this.order === "ASC" ? "DESC" : "ASC";
+      } else {
+        // New column, default to DESC
+        this.orderBy = field;
+        this.order = "DESC";
+      }
+      this.page = 1; // Reset to first page when sorting
+      this.submit();
+    },
+
     setPerPage(n) {
       this.perPage = n;
       this.page = 1; // Reset to first page when changing per page

internal/embedfs/web/vendored/flatpickr-dark@4.6.13.min.css

@@ -0,0 +1,795 @@
+.flatpickr-calendar {
+  background: transparent;
+  opacity: 0;
+  display: none;
+  text-align: center;
+  visibility: hidden;
+  padding: 0;
+  -webkit-animation: none;
+          animation: none;
+  direction: ltr;
+  border: 0;
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: 5px;
+  position: absolute;
+  width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+  background: #3f4458;
+  -webkit-box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08);
+          box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08);
+}
+.flatpickr-calendar.open,
+.flatpickr-calendar.inline {
+  opacity: 1;
+  max-height: 640px;
+  visibility: visible;
+}
+.flatpickr-calendar.open {
+  display: inline-block;
+  z-index: 99999;
+}
+.flatpickr-calendar.animate.open {
+  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.flatpickr-calendar.inline {
+  display: block;
+  position: relative;
+  top: 2px;
+}
+.flatpickr-calendar.static {
+  position: absolute;
+  top: calc(100% + 2px);
+}
+.flatpickr-calendar.static.open {
+  z-index: 999;
+  display: block;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+}
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
+  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+.flatpickr-calendar .hasWeeks .dayContainer,
+.flatpickr-calendar .hasTime .dayContainer {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.flatpickr-calendar .hasWeeks .dayContainer {
+  border-left: 0;
+}
+.flatpickr-calendar.hasTime .flatpickr-time {
+  height: 40px;
+  border-top: 1px solid #20222c;
+}
+.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
+  height: auto;
+}
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  border: solid transparent;
+  content: '';
+  height: 0;
+  width: 0;
+  left: 22px;
+}
+.flatpickr-calendar.rightMost:before,
+.flatpickr-calendar.arrowRight:before,
+.flatpickr-calendar.rightMost:after,
+.flatpickr-calendar.arrowRight:after {
+  left: auto;
+  right: 22px;
+}
+.flatpickr-calendar.arrowCenter:before,
+.flatpickr-calendar.arrowCenter:after {
+  left: 50%;
+  right: 50%;
+}
+.flatpickr-calendar:before {
+  border-width: 5px;
+  margin: 0 -5px;
+}
+.flatpickr-calendar:after {
+  border-width: 4px;
+  margin: 0 -4px;
+}
+.flatpickr-calendar.arrowTop:before,
+.flatpickr-calendar.arrowTop:after {
+  bottom: 100%;
+}
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: #20222c;
+}
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: #3f4458;
+}
+.flatpickr-calendar.arrowBottom:before,
+.flatpickr-calendar.arrowBottom:after {
+  top: 100%;
+}
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: #20222c;
+}
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: #3f4458;
+}
+.flatpickr-calendar:focus {
+  outline: 0;
+}
+.flatpickr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+.flatpickr-months {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-months .flatpickr-month {
+  background: #3f4458;
+  color: #fff;
+  fill: #fff;
+  height: 34px;
+  line-height: 1;
+  text-align: center;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  text-decoration: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  height: 34px;
+  padding: 10px;
+  z-index: 3;
+  color: #fff;
+  fill: #fff;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
+.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
+  display: none;
+}
+.flatpickr-months .flatpickr-prev-month i,
+.flatpickr-months .flatpickr-next-month i {
+  position: relative;
+}
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  left: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+/*
+      /*rtl:begin:ignore*/
+/*
+      */
+  right: 0;
+/*
+      /*rtl:end:ignore*/
+/*
+      */
+}
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  color: #eee;
+}
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: #f64747;
+}
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  width: 14px;
+  height: 14px;
+}
+.flatpickr-months .flatpickr-prev-month svg path,
+.flatpickr-months .flatpickr-next-month svg path {
+  -webkit-transition: fill 0.1s;
+  transition: fill 0.1s;
+  fill: inherit;
+}
+.numInputWrapper {
+  position: relative;
+  height: auto;
+}
+.numInputWrapper input,
+.numInputWrapper span {
+  display: inline-block;
+}
+.numInputWrapper input {
+  width: 100%;
+}
+.numInputWrapper input::-ms-clear {
+  display: none;
+}
+.numInputWrapper input::-webkit-outer-spin-button,
+.numInputWrapper input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+.numInputWrapper span {
+  position: absolute;
+  right: 0;
+  width: 14px;
+  padding: 0 4px 0 2px;
+  height: 50%;
+  line-height: 50%;
+  opacity: 0;
+  cursor: pointer;
+  border: 1px solid rgba(255,255,255,0.15);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.numInputWrapper span:hover {
+  background: rgba(192,187,167,0.1);
+}
+.numInputWrapper span:active {
+  background: rgba(192,187,167,0.2);
+}
+.numInputWrapper span:after {
+  display: block;
+  content: "";
+  position: absolute;
+}
+.numInputWrapper span.arrowUp {
+  top: 0;
+  border-bottom: 0;
+}
+.numInputWrapper span.arrowUp:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid rgba(255,255,255,0.6);
+  top: 26%;
+}
+.numInputWrapper span.arrowDown {
+  top: 50%;
+}
+.numInputWrapper span.arrowDown:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid rgba(255,255,255,0.6);
+  top: 40%;
+}
+.numInputWrapper span svg {
+  width: inherit;
+  height: auto;
+}
+.numInputWrapper span svg path {
+  fill: rgba(255,255,255,0.5);
+}
+.numInputWrapper:hover {
+  background: rgba(192,187,167,0.05);
+}
+.numInputWrapper:hover span {
+  opacity: 1;
+}
+.flatpickr-current-month {
+  font-size: 135%;
+  line-height: inherit;
+  font-weight: 300;
+  color: inherit;
+  position: absolute;
+  width: 75%;
+  left: 12.5%;
+  padding: 7.48px 0 0 0;
+  line-height: 1;
+  height: 34px;
+  display: inline-block;
+  text-align: center;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+}
+.flatpickr-current-month span.cur-month {
+  font-family: inherit;
+  font-weight: 700;
+  color: inherit;
+  display: inline-block;
+  margin-left: 0.5ch;
+  padding: 0;
+}
+.flatpickr-current-month span.cur-month:hover {
+  background: rgba(192,187,167,0.05);
+}
+.flatpickr-current-month .numInputWrapper {
+  width: 6ch;
+  width: 7ch\0;
+  display: inline-block;
+}
+.flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #fff;
+}
+.flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: #fff;
+}
+.flatpickr-current-month input.cur-year {
+  background: transparent;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: inherit;
+  cursor: text;
+  padding: 0 0 0 0.5ch;
+  margin: 0;
+  display: inline-block;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  line-height: inherit;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  vertical-align: initial;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.flatpickr-current-month input.cur-year:focus {
+  outline: 0;
+}
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover {
+  font-size: 100%;
+  color: rgba(255,255,255,0.5);
+  background: transparent;
+  pointer-events: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  appearance: menulist;
+  background: #3f4458;
+  border: none;
+  border-radius: 0;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  height: auto;
+  line-height: inherit;
+  margin: -1px 0 0 0;
+  outline: none;
+  padding: 0 0 0 0.5ch;
+  position: relative;
+  vertical-align: initial;
+  -webkit-box-sizing: border-box;
+  -webkit-appearance: menulist;
+  -moz-appearance: menulist;
+  width: auto;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
+.flatpickr-current-month .flatpickr-monthDropdown-months:active {
+  outline: none;
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
+  background: rgba(192,187,167,0.05);
+}
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  background-color: #3f4458;
+  outline: none;
+  padding: 0;
+}
+.flatpickr-weekdays {
+  background: transparent;
+  text-align: center;
+  overflow: hidden;
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 28px;
+}
+.flatpickr-weekdays .flatpickr-weekdaycontainer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+span.flatpickr-weekday {
+  cursor: default;
+  font-size: 90%;
+  background: #3f4458;
+  color: #fff;
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  display: block;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  font-weight: bolder;
+}
+.dayContainer,
+.flatpickr-weeks {
+  padding: 1px 0 0 0;
+}
+.flatpickr-days {
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  width: 307.875px;
+}
+.flatpickr-days:focus {
+  outline: 0;
+}
+.dayContainer {
+  padding: 0;
+  outline: 0;
+  text-align: left;
+  width: 307.875px;
+  min-width: 307.875px;
+  max-width: 307.875px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: inline-block;
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-around;
+          justify-content: space-around;
+  -webkit-transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0px, 0px, 0px);
+  opacity: 1;
+}
+.dayContainer + .dayContainer {
+  -webkit-box-shadow: -1px 0 0 #20222c;
+          box-shadow: -1px 0 0 #20222c;
+}
+.flatpickr-day {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 150px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  color: rgba(255,255,255,0.95);
+  cursor: pointer;
+  font-weight: 400;
+  width: 14.2857143%;
+  -webkit-flex-basis: 14.2857143%;
+      -ms-flex-preferred-size: 14.2857143%;
+          flex-basis: 14.2857143%;
+  max-width: 39px;
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+  display: inline-block;
+  position: relative;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  text-align: center;
+}
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  cursor: pointer;
+  outline: 0;
+  background: #646c8c;
+  border-color: #646c8c;
+}
+.flatpickr-day.today {
+  border-color: #eee;
+}
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+  border-color: #eee;
+  background: #eee;
+  color: #3f4458;
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: #80cbc4;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: #fff;
+  border-color: #80cbc4;
+}
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange {
+  border-radius: 50px 0 0 50px;
+}
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange {
+  border-radius: 0 50px 50px 0;
+}
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  -webkit-box-shadow: -10px 0 0 #80cbc4;
+          box-shadow: -10px 0 0 #80cbc4;
+}
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+  border-radius: 50px;
+}
+.flatpickr-day.inRange {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c;
+          box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c;
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: rgba(255,255,255,0.3);
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover {
+  cursor: not-allowed;
+  color: rgba(255,255,255,0.1);
+}
+.flatpickr-day.week.selected {
+  border-radius: 0;
+  -webkit-box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4;
+          box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4;
+}
+.flatpickr-day.hidden {
+  visibility: hidden;
+}
+.rangeMode .flatpickr-day {
+  margin-top: 1px;
+}
+.flatpickr-weekwrapper {
+  float: left;
+}
+.flatpickr-weekwrapper .flatpickr-weeks {
+  padding: 0 12px;
+  -webkit-box-shadow: 1px 0 0 #20222c;
+          box-shadow: 1px 0 0 #20222c;
+}
+.flatpickr-weekwrapper .flatpickr-weekday {
+  float: none;
+  width: 100%;
+  line-height: 28px;
+}
+.flatpickr-weekwrapper span.flatpickr-day,
+.flatpickr-weekwrapper span.flatpickr-day:hover {
+  display: block;
+  width: 100%;
+  max-width: none;
+  color: rgba(255,255,255,0.3);
+  background: transparent;
+  cursor: default;
+  border: none;
+}
+.flatpickr-innerContainer {
+  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+}
+.flatpickr-rContainer {
+  display: inline-block;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.flatpickr-time {
+  text-align: center;
+  outline: 0;
+  display: block;
+  height: 0;
+  line-height: 40px;
+  max-height: 40px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flatpickr-time:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+.flatpickr-time .numInputWrapper {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  width: 40%;
+  height: 40px;
+  float: left;
+}
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: rgba(255,255,255,0.95);
+}
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: rgba(255,255,255,0.95);
+}
+.flatpickr-time.hasSeconds .numInputWrapper {
+  width: 26%;
+}
+.flatpickr-time.time24hr .numInputWrapper {
+  width: 49%;
+}
+.flatpickr-time input {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  line-height: inherit;
+  color: rgba(255,255,255,0.95);
+  font-size: 14px;
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.flatpickr-time input.flatpickr-hour {
+  font-weight: bold;
+}
+.flatpickr-time input.flatpickr-minute,
+.flatpickr-time input.flatpickr-second {
+  font-weight: 400;
+}
+.flatpickr-time input:focus {
+  outline: 0;
+  border: 0;
+}
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  height: inherit;
+  float: left;
+  line-height: inherit;
+  color: rgba(255,255,255,0.95);
+  font-weight: bold;
+  width: 2%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-align-self: center;
+      -ms-flex-item-align: center;
+          align-self: center;
+}
+.flatpickr-time .flatpickr-am-pm {
+  outline: 0;
+  width: 18%;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 400;
+}
+.flatpickr-time input:hover,
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time input:focus,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: #6a7395;
+}
+.flatpickr-input[readonly] {
+  cursor: pointer;
+}
+@-webkit-keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -20px, 0);
+            transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}