/*
(C) Advantys 2024

All rights are reserved. Reproduction or transmission in whole or in part, in
any form or by any means, electronic, mechanical or otherwise, is prohibited
without the prior written permission of the copyright owner.
*/

:root {
  --background: hsl(0 0% 100%);
  --background-hsl: 0, 0%, 100%;
  --foreground: hsl(222.2 84% 4.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(222.2 84% 4.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(222.2 84% 4.9%);
  --primary: hsl(221.2 83.2% 53.3%);
  --primary-hsl: 221.2, 83.2%, 53.3%;
  --primary-foreground: hsl(210 40% 98%);
  --secondary: hsl(210 40% 96.1%);
  --secondary-foreground: hsl(222.2 47.4% 11.2%);
  --muted: hsl(210 40% 96.1%);
  --muted-foreground: #475569;
  --muted-foreground-500: hsl(215.4 16.3% 46.9%);
  --accent: hsl(210 40% 96.1%);
  --accent-foreground: hsl(222.2 47.4% 11.2%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(210 40% 98%);
  --border: hsl(214.3 31.8% 91.4%);
  --input: hsl(214.3 31.8% 91.4%);
  --ring: rgb(161, 161, 170);

  --subdued: rgb(250, 250, 250); /* background */
  --overlay-background: rgba(161, 161, 170, 0.8);
  --overlay-background-loader: rgba(255, 255, 255, 0.8);
  --scrollbar-thumb: rgb(200, 200, 200);

  --radius: 0.5rem; /* 8px */
  --radius-input: calc(var(--radius) - 2px); /* 6px */
  --radius-card: calc(var(--radius) + 4px); /* 12px */
  --radius-tag: 1rem; /* 16px */

  --content-default-width: 1105px;
  --content-default-min-width: 240px;
  --content-width: var(--content-default-width);
  --content-min-width: var(--content-default-min-width);
  --content-table-width: var(--content-default-width);
  --content-table-min-width: var(--content-default-min-width);

  /* Tags */
  --version: var(--border);
  --version-foreground: var(--foreground);
  --under-construction: #bfdbfe;
  --under-construction-foreground: hsl(240 10% 3.9%);
  --test: #e4e4e7;
  --test-foreground: #71717a;
  --active: rgb(59, 130, 246);
  --active-foreground: var(--primary-foreground);
  --archived: #71717a;
  --archived-foreground: rgb(255, 255, 255);
  --not-started: #bfdbfe;
  --not-started-foreground: hsl(240 10% 3.9%);
  --not-started-date: #907047;
  --open: hsl(142, 71%, 45%);
  --open-hsl: 142, 71%, 45%;
  --open-foreground: rgb(255, 255, 255);
  --success: hsl(217.22, 91.22%, 59.8%);
  --success-hsl: 217.22, 91.22%, 59.8%;
  --success-foreground: rgb(255, 255, 255);
  --closed: #71717a;
  --closed-foreground: rgb(255, 255, 255);
  --cancelled: #a855f7;
  --cancelled-foreground: rgb(255, 255, 255);
  --warning: rgb(249, 115, 22);
  --warning-foreground: rgb(255, 255, 255);
  --error: rgb(239, 68, 68);
  --error-foreground: rgb(255, 255, 255);

  --icon-radio-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(255, 255, 255)" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="8" cy="8" r="3"/%3e%3c/svg%3e');
  --icon-checkbox-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(255, 255, 255)" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/%3e%3c/svg%3e');
  --icon-checkbox-indeterminate: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"%3e%3cpath d="M5 12h14"/%3e%3c/svg%3e');
  --icon-chevron-down-native-select: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(2, 8, 23)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"%3e%3cpath d="m6 9 6 6 6-6"/%3e%3c/svg%3e');

  --icon-loader: url('data:image/svg+xml,%3csvg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve"%3e%3cpath fill="currentColor" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"%3e%3canimateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/%3e%3c/path%3e%3c/svg%3e');
  --icon-chevron-up: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up"%3e%3cpath d="m18 15-6-6-6 6"/%3e%3c/svg%3e');
  --icon-chevron-right: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"%3e%3cpath d="m9 18 6-6-6-6"/%3e%3c/svg%3e');
  --icon-chevron-down: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"%3e%3cpath d="m6 9 6 6 6-6"/%3e%3c/svg%3e');
  --icon-chevron-left: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left"%3e%3cpath d="m15 18-6-6 6-6"/%3e%3c/svg%3e');
  --icon-chevrons-right: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-right"%3e%3cpath d="m6 17 5-5-5-5"/%3e%3cpath d="m13 17 5-5-5-5"/%3e%3c/svg%3e');
  --icon-chevrons-left: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-left"%3e%3cpath d="m11 17-5-5 5-5"/%3e%3cpath d="m18 17-5-5 5-5"/%3e%3c/svg%3e');
  --icon-zoom-out: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zoom-out"%3e%3ccircle cx="11" cy="11" r="8"/%3e%3cline x1="21" x2="16.65" y1="21" y2="16.65"/%3e%3cline x1="8" x2="14" y1="11" y2="11"/%3e%3c/svg%3e');
  --icon-zoom-in: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zoom-in"%3e%3ccircle cx="11" cy="11" r="8"/%3e%3cline x1="21" x2="16.65" y1="21" y2="16.65"/%3e%3cline x1="11" x2="11" y1="8" y2="14"/%3e%3cline x1="8" x2="14" y1="11" y2="11"/%3e%3c/svg%3e');
  --icon-scaling: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scaling"%3e%3cpath d="M21 3 9 15"/%3e%3cpath d="M12 3H3v18h18v-9"/%3e%3cpath d="M16 3h5v5"/%3e%3cpath d="M14 15H9v-5"/%3e%3c/svg%3e');
  --icon-rotate-cw: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw"%3e%3cpath d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/%3e%3cpath d="M21 3v5h-5"/%3e%3c/svg%3e');
  --icon-alert-triangle: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-alert-triangle"%3e%3cpath d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/%3e%3cpath d="M12 9v4"/%3e%3cpath d="M12 17h.01"/%3e%3c/svg%3e');
  --icon-printer: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-printer"%3e%3cpolyline points="6 9 6 2 18 2 18 9"/%3e%3cpath d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/%3e%3crect width="12" height="8" x="6" y="14"/%3e%3c/svg%3e');
  --icon-x: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"%3e%3cpath d="M18 6 6 18"/%3e%3cpath d="m6 6 12 12"/%3e%3c/svg%3e');
  --icon-pencil: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"%3e%3cpath d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/%3e%3cpath d="m15 5 4 4"/%3e%3c/svg%3e');
  --icon-filter: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-filter"%3e%3cpolygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/%3e%3c/svg%3e');
  --icon-align-center: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-center"%3e%3cline x1="21" x2="3" y1="6" y2="6"/%3e%3cline x1="17" x2="7" y1="12" y2="12"/%3e%3cline x1="19" x2="5" y1="18" y2="18"/%3e%3c/svg%3e');
  --icon-align-justify: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-justify"%3e%3cline x1="3" x2="21" y1="6" y2="6"/%3e%3cline x1="3" x2="21" y1="12" y2="12"/%3e%3cline x1="3" x2="21" y1="18" y2="18"/%3e%3c/svg%3e');
  --icon-align-left: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-left"%3e%3cline x1="21" x2="3" y1="6" y2="6"/%3e%3cline x1="15" x2="3" y1="12" y2="12"/%3e%3cline x1="17" x2="3" y1="18" y2="18"/%3e%3c/svg%3e');
  --icon-align-right: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-right"%3e%3cline x1="21" x2="3" y1="6" y2="6"/%3e%3cline x1="21" x2="9" y1="12" y2="12"/%3e%3cline x1="21" x2="7" y1="18" y2="18"/%3e%3c/svg%3e');
  --icon-help-circle: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle"%3e%3ccircle cx="12" cy="12" r="10"/%3e%3cpath d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/%3e%3cpath d="M12 17h.01"/%3e%3c/svg%3e');
  --icon-plus-circle: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-circle"%3e%3ccircle cx="12" cy="12" r="10"/%3e%3cpath d="M8 12h8"/%3e%3cpath d="M12 8v8"/%3e%3c/svg%3e');
  --icon-swatch-book: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-swatch-book"%3e%3cpath d="M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"/%3e%3cpath d="M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"/%3e%3cpath d="M 7 17h0.01"/%3e%3cpath d="m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"/%3e%3c/svg%3e');
  --icon-more-horizontal: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-more-horizontal"%3e%3ccircle cx="12" cy="12" r="1"/%3e%3ccircle cx="19" cy="12" r="1"/%3e%3ccircle cx="5" cy="12" r="1"/%3e%3c/svg%3e');
  --icon-more-vertical: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-more-vertical"%3e%3ccircle cx="12" cy="12" r="1"/%3e%3ccircle cx="12" cy="5" r="1"/%3e%3ccircle cx="12" cy="19" r="1"/%3e%3c/svg%3e');
  --icon-copy: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"%3e%3crect width="14" height="14" x="8" y="8" rx="2" ry="2"/%3e%3cpath d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/%3e%3c/svg%3e');
  --icon-arrow-left-to-line: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-to-line"%3e%3cpath d="M3 19V5"/%3e%3cpath d="m13 6-6 6 6 6"/%3e%3cpath d="M7 12h14"/%3e%3c/svg%3e');
  --icon-arrow-right-to-line: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-to-line"%3e%3cpath d="M17 12H3"/%3e%3cpath d="m11 18 6-6-6-6"/%3e%3cpath d="M21 5v14"/%3e%3c/svg%3e');
  --icon-arrow-down: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down"%3e%3cpath d="M12 5v14"/%3e%3cpath d="m19 12-7 7-7-7"/%3e%3c/svg%3e');
  --icon-arrow-left: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left"%3e%3cpath d="m12 19-7-7 7-7"/%3e%3cpath d="M19 12H5"/%3e%3c/svg%3e');
  --icon-arrow-right: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"%3e%3cpath d="M5 12h14"/%3e%3cpath d="m12 5 7 7-7 7"/%3e%3c/svg%3e');
  --icon-arrow-left-right: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-right"%3e%3cpath d="M8 3 4 7l4 4"/%3e%3cpath d="M4 7h16"/%3e%3cpath d="m16 21 4-4-4-4"/%3e%3cpath d="M20 17H4"/%3e%3c/svg%3e');
  --icon-arrow-up: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up"%3e%3cpath d="m5 12 7-7 7 7"/%3e%3cpath d="M12 19V5"/%3e%3c/svg%3e');
  --icon-arrow-down-narrow-wide: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-narrow-wide"%3e%3cpath d="m3 16 4 4 4-4"/%3e%3cpath d="M7 20V4"/%3e%3cpath d="M11 4h4"/%3e%3cpath d="M11 8h7"/%3e%3cpath d="M11 12h10"/%3e%3c/svg%3e');
  --icon-arrow-up-wide-narrow: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-wide-narrow"%3e%3cpath d="m3 8 4-4 4 4"/%3e%3cpath d="M7 4v16"/%3e%3cpath d="M11 12h10"/%3e%3cpath d="M11 16h7"/%3e%3cpath d="M11 20h4"/%3e%3c/svg%3e');
  --icon-list-x: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-x"%3e%3cpath d="M11 12H3"/%3e%3cpath d="M16 6H3"/%3e%3cpath d="M16 18H3"/%3e%3cpath d="m19 10-4 4"/%3e%3cpath d="m15 10 4 4"/%3e%3c/svg%3e');
  --icon-delete: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-delete"%3e%3cpath d="M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z"/%3e%3cline x1="18" x2="12" y1="9" y2="15"/%3e%3cline x1="12" x2="18" y1="9" y2="15"/%3e%3c/svg%3e');
  --icon-check: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"%3e%3cpath d="M20 6 9 17l-5-5"/%3e%3c/svg%3e');
  --icon-circle-check: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"%3e%3ccircle cx="12" cy="12" r="10"/%3e%3cpath d="m9 12 2 2 4-4"/%3e%3c/svg%3e');
  --icon-circle-check-big: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big"%3e%3cpath d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/%3e%3cpath d="m9 11 3 3L22 4"/%3e%3c/svg%3e');
  --icon-circle-arrow-left: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-arrow-left"%3e%3ccircle cx="12" cy="12" r="10"/%3e%3cpath d="M16 12H8"/%3e%3cpath d="m12 8-4 4 4 4"/%3e%3c/svg%3e');
  --icon-circle-arrow-right: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-arrow-right"%3e%3ccircle cx="12" cy="12" r="10"/%3e%3cpath d="M8 12h8"/%3e%3cpath d="m12 16 4-4-4-4"/%3e%3c/svg%3e');
  --icon-plus: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"%3e%3cpath d="M5 12h14"/%3e%3cpath d="M12 5v14"/%3e%3c/svg%3e');
  --icon-minus: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"%3e%3cpath d="M5 12h14"/%3e%3c/svg%3e');
  --icon-move-vertical: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-vertical"%3e%3cpolyline points="8 18 12 22 16 18"/%3e%3cpolyline points="8 6 12 2 16 6"/%3e%3cline x1="12" x2="12" y1="2" y2="22"/%3e%3c/svg%3e');
  --icon-trash-2: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"%3e%3cpath d="M3 6h18"/%3e%3cpath d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/%3e%3cpath d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/%3e%3cline x1="10" x2="10" y1="11" y2="17"/%3e%3cline x1="14" x2="14" y1="11" y2="17"/%3e%3c/svg%3e');
  --icon-bold: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bold"%3e%3cpath d="M14 12a4 4 0 0 0 0-8H6v8"/%3e%3cpath d="M15 20a4 4 0 0 0 0-8H6v8Z"/%3e%3c/svg%3e');
  --icon-italic: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-italic"%3e%3cline x1="19" x2="10" y1="4" y2="4"/%3e%3cline x1="14" x2="5" y1="20" y2="20"/%3e%3cline x1="15" x2="9" y1="4" y2="20"/%3e%3c/svg%3e');
  --icon-underline: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-underline"%3e%3cpath d="M6 4v6a6 6 0 0 0 12 0V4"/%3e%3cline x1="4" x2="20" y1="20" y2="20"/%3e%3c/svg%3e');
  --icon-workflow: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-workflow"%3e%3crect width="8" height="8" x="3" y="3" rx="2"/%3e%3cpath d="M7 11v4a2 2 0 0 0 2 2h4"/%3e%3crect width="8" height="8" x="13" y="13" rx="2"/%3e%3c/svg%3e');
  --icon-package-plus: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package-plus"%3e%3cpath d="M16 16h6"/%3e%3cpath d="M19 13v6"/%3e%3cpath d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l2-1.14"/%3e%3cpath d="m7.5 4.27 9 5.15"/%3e%3cpolyline points="3.29 7 12 12 20.71 7"/%3e%3cline x1="12" x2="12" y1="22" y2="12"/%3e%3c/svg%3e');
  --icon-wrench: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench"%3e%3cpath d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/%3e%3c/svg%3e');
  --icon-settings: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings"%3e%3cpath d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/%3e%3ccircle cx="12" cy="12" r="3"/%3e%3c/svg%3e');
  --icon-file-code-2: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-code-2"%3e%3cpath d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"/%3e%3cpath d="M14 2v4a2 2 0 0 0 2 2h4"/%3e%3cpath d="m5 12-3 3 3 3"/%3e%3cpath d="m9 18 3-3-3-3"/%3e%3c/svg%3e');
  --icon-scroll-text: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scroll-text"%3e%3cpath d="M15 12h-5"/%3e%3cpath d="M15 8h-5"/%3e%3cpath d="M19 17V5a2 2 0 0 0-2-2H4"/%3e%3cpath d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/%3e%3c/svg%3e');
  --icon-ban: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban"%3e%3ccircle cx="12" cy="12" r="10"/%3e%3cpath d="m4.9 4.9 14.2 14.2"/%3e%3c/svg%3e');
  --icon-message-square: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square"%3e%3cpath d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/%3e%3c/svg%3e');
  --icon-message-square-text: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-text"%3e%3cpath d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/%3e%3cpath d="M13 8H7"/%3e%3cpath d="M17 12H7"/%3e%3c/svg%3e');
  --icon-user-round-check: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-round-check"%3e%3cpath d="M2 21a8 8 0 0 1 13.292-6"/%3e%3ccircle cx="10" cy="8" r="5"/%3e%3cpath d="m16 19 2 2 4-4"/%3e%3c/svg%3e');
  --icon-user-round-x: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-round-x"%3e%3cpath d="M2 21a8 8 0 0 1 11.873-7"/%3e%3ccircle cx="10" cy="8" r="5"/%3e%3cpath d="m17 17 5 5"/%3e%3cpath d="m22 17-5 5"/%3e%3c/svg%3e');
  --icon-circle-play: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-play"%3e%3ccircle cx="12" cy="12" r="10"/%3e%3cpolygon points="10 8 16 12 10 16 10 8"/%3e%3c/svg%3e');
  --icon-menu: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"%3e%3cline x1="4" x2="20" y1="12" y2="12"/%3e%3cline x1="4" x2="20" y1="6" y2="6"/%3e%3cline x1="4" x2="20" y1="18" y2="18"/%3e%3c/svg%3e');
  --icon-list-filter: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-filter"%3e%3cpath d="M3 6h18"/%3e%3cpath d="M7 12h10"/%3e%3cpath d="M10 18h4"/%3e%3c/svg%3e');
  --icon-layout-panel-left: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-panel-left"%3e%3crect width="7" height="18" x="3" y="3" rx="1"/%3e%3crect width="7" height="7" x="14" y="3" rx="1"/%3e%3crect width="7" height="7" x="14" y="14" rx="1"/%3e%3c/svg%3e');
  --icon-chart-pie: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-pie"%3e%3cpath d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"/%3e%3cpath d="M21.21 15.89A10 10 0 1 1 8 2.83"/%3e%3c/svg%3e');
  --icon-file-plus-2: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus-2"%3e%3cpath d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"/%3e%3cpath d="M14 2v4a2 2 0 0 0 2 2h4"/%3e%3cpath d="M3 15h6"/%3e%3cpath d="M6 12v6"/%3e%3c/svg%3e');
  --icon-files: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-files"%3e%3cpath d="M20 7h-3a2 2 0 0 1-2-2V2"/%3e%3cpath d="M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z"/%3e%3cpath d="M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8"/%3e%3c/svg%3e');
  --icon-refresh-cw: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"%3e%3cpath d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/%3e%3cpath d="M21 3v5h-5"/%3e%3cpath d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/%3e%3cpath d="M8 16H3v5"/%3e%3c/svg%3e');
  --icon-users: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users"%3e%3cpath d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/%3e%3ccircle cx="9" cy="7" r="4"/%3e%3cpath d="M22 21v-2a4 4 0 0 0-3-3.87"/%3e%3cpath d="M16 3.13a4 4 0 0 1 0 7.75"/%3e%3c/svg%3e');
  --icon-user-check: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-check"%3e%3cpath d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/%3e%3ccircle cx="9" cy="7" r="4"/%3e%3cpolyline points="16 11 18 13 22 9"/%3e%3c/svg%3e');
  --icon-calendar-range: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-range"%3e%3crect width="18" height="18" x="3" y="4" rx="2"/%3e%3cpath d="M16 2v4"/%3e%3cpath d="M3 10h18"/%3e%3cpath d="M8 2v4"/%3e%3cpath d="M17 14h-6"/%3e%3cpath d="M13 18H7"/%3e%3cpath d="M7 14h.01"/%3e%3cpath d="M17 18h.01"/%3e%3c/svg%3e');
  --icon-search: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"%3e%3ccircle cx="11" cy="11" r="8"/%3e%3cpath d="m21 21-4.3-4.3"/%3e%3c/svg%3e');
  --icon-chart-area: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-area"%3e%3cpath d="M3 3v16a2 2 0 0 0 2 2h16"/%3e%3cpath d="M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z"/%3e%3c/svg%3e');
  --icon-hexagon: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hexagon"%3e%3cpath d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/%3e%3c/svg%3e');
  --icon-log-out: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out"%3e%3cpath d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/%3e%3cpolyline points="16 17 21 12 16 7"/%3e%3cline x1="21" x2="9" y1="12" y2="12"/%3e%3c/svg%3e');
  --icon-messages-square: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square"%3e%3cpath d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z"/%3e%3cpath d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/%3e%3c/svg%3e');
  --icon-save: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-save"%3e%3cpath d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/%3e%3cpath d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/%3e%3cpath d="M7 3v4a1 1 0 0 0 1 1h7"/%3e%3c/svg%3e');
  --icon-file-up: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-up"%3e%3cpath d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/%3e%3cpath d="M14 2v4a2 2 0 0 0 2 2h4"/%3e%3cpath d="M12 12v6"/%3e%3cpath d="m15 15-3-3-3 3"/%3e%3c/svg%3e');
  --icon-table: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table"%3e%3cpath d="M12 3v18"/%3e%3crect width="18" height="18" x="3" y="3" rx="2"/%3e%3cpath d="M3 9h18"/%3e%3cpath d="M3 15h18"/%3e%3c/svg%3e');
  --icon-grid-2x2-plus: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grid-2x2-plus"%3e%3cpath d="M12 3v17a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a1 1 0 0 1-1 1H3"/%3e%3cpath d="M16 19h6"/%3e%3cpath d="M19 22v-6"/%3e%3c/svg%3e');
  --icon-chart-bar: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-bar"%3e%3cpath d="M3 3v16a2 2 0 0 0 2 2h16"/%3e%3cpath d="M7 16h8"/%3e%3cpath d="M7 11h12"/%3e%3cpath d="M7 6h3"/%3e%3c/svg%3e');
  --icon-calendar-plus: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-plus"%3e%3cpath d="M8 2v4"/%3e%3cpath d="M16 2v4"/%3e%3cpath d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8"/%3e%3cpath d="M3 10h18"/%3e%3cpath d="M16 19h6"/%3e%3cpath d="M19 16v6"/%3e%3c/svg%3e');
  --icon-file-down: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-down"%3e%3cpath d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/%3e%3cpath d="M14 2v4a2 2 0 0 0 2 2h4"/%3e%3cpath d="M12 18v-6"/%3e%3cpath d="m9 15 3 3 3-3"/%3e%3c/svg%3e');
  --icon-ai: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3e%3cpath fill="currentColor" d="m9 4l2.5 5.5L17 12l-5.5 2.5L9 20l-2.5-5.5L1 12l5.5-2.5zm0 4.83L8 11l-2.17 1L8 13l1 2.17L10 13l2.17-1L10 11zM19 9l-1.26-2.74L15 5l2.74-1.25L19 1l1.25 2.75L23 5l-2.75 1.26zm0 14l-1.26-2.74L15 19l2.74-1.25L19 15l1.25 2.75L23 19l-2.75 1.26z"/%3e%3c/svg%3e');

  /* Ace_editor */
  --ace-tag: hsl(224.3 76.3% 48%);
  --ace-operator: hsl(215 20.2% 65.1%);
  --ace-numeric: hsl(217.2 91.2% 59.8%);
  --ace-storage-keyword: hsl(217.2 91.2% 59.8%);
  --ace-support-function: hsl(215.4 16.3% 46.9%);
  --ace-entity-name-function: hsl(224.9, 68.8%, 46.5%);
  --ace-string: hsl(0, 77.2%, 36.1%);
  --ace-boolean: #3b82f6;

  /* Workflow */
  --wf-black: #0a0a0a;
  --wf-red: var(--destructive);
  --wf-selected: rgba(34, 197, 94); /* #22c55e */
  --wf-condition-fill: rgb(234, 179, 8); /* #eab308 */
  --wf-condition-stroke: var(--wf-condition-fill);
  --wf-condition-disabled: rgba(234, 179, 8, 0.5);
  --wf-participant-switch: rgb(253, 224, 71); /* #fde047 */
  --wf-action: #3b82f6;
}

@-moz-document url-prefix() {
  :root {
    --content-default-width: 1105px !important;
  }
}

/* This is to remove the default border color of Firefox */
@supports (-moz-appearance: none) {
  select {
    border: 1px solid var(--border);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

/* Turn cross-document view-transitions on */
/* Note that this at-rule is all that is needed to create the default cross-fade animation  */

@view-transition {
  navigation: auto;
}

/* Customize the default animation behavior */

::view-transition-group(iframe-custom-banner) {
  animation-duration: 0s;
}

::view-transition-group(side-panel) {
  animation-duration: 0.001s;
}

::view-transition-group(main-content) {
  animation-duration: 0.1s;
}

/* Create a custom animation */

@keyframes opaque {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(iframe-custom-banner),
::view-transition-new(iframe-custom-banner) {
  animation: none;
}

::view-transition-old(side-panel) {
  animation: 0.001s ease-in both opaque;
}

::view-transition-new(side-panel) {
  animation: 0.001s ease-in both opaque;
}

::view-transition-old(main-content) {
  animation: 0.45s ease-in both fadeOut;
}

::view-transition-new(main-content) {
  animation: 0.2s ease-in both fadeIn;
}

.lightMono {
  --background: hsl(0 0% 100%);
  --background-hsl: 0, 0%, 100%;
  --foreground: hsl(240 10% 3.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(240 10% 3.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(240 10% 3.9%);
  --primary: hsl(240 5.9% 10%);
  --primary-hsl: 240, 5.9%, 10%;
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(240 4.8% 95.9%);
  --secondary-foreground: hsl(240 5.9% 10%);
  --muted: hsl(240 4.8% 95.9%);
  --muted-foreground: #52525b;
  --muted-foreground-500: hsl(240 3.8% 46.1%);
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: hsl(240 5.9% 10%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 5.9% 90%);
  --input: hsl(240 5.9% 90%);
  --ring: rgb(161, 161, 170);

  --subdued: rgb(250, 250, 250); /* background */
  --overlay-background: rgba(161, 161, 170, 0.8);
  --overlay-background-loader: rgba(255, 255, 255, 0.8);
  --scrollbar-thumb: rgb(200, 200, 200);

  /* Tags */
  --version: var(--border);
  --version-foreground: var(--foreground);
  --under-construction: #bfdbfe;
  --under-construction-foreground: hsl(240 10% 3.9%);
  --test: #e4e4e7;
  --test-foreground: #71717a;
  --active: rgb(59, 130, 246);
  --active-foreground: var(--primary-foreground);
  --archived: #71717a;
  --archived-foreground: rgb(255, 255, 255);
  --not-started: #bfdbfe;
  --not-started-foreground: hsl(240 10% 3.9%);
  --not-started-date: #907047;
  --open: hsl(142, 71%, 45%);
  --open-hsl: 142, 71%, 45%;
  --open-foreground: rgb(255, 255, 255);
  --success: hsl(217.22, 91.22%, 59.8%);
  --success-hsl: 217.22, 91.22%, 59.8%;
  --success-foreground: rgb(255, 255, 255);
  --closed: #71717a;
  --closed-foreground: rgb(255, 255, 255);
  --cancelled: #a855f7;
  --cancelled-foreground: rgb(255, 255, 255);
  --warning: rgb(249, 115, 22);
  --warning-foreground: rgb(255, 255, 255);
  --error: rgb(239, 68, 68);
  --error-foreground: rgb(255, 255, 255);

  --icon-radio-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(255, 255, 255)" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="8" cy="8" r="3"/%3e%3c/svg%3e');
  --icon-checkbox-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(255, 255, 255)" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/%3e%3c/svg%3e');
  --icon-checkbox-indeterminate: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"%3e%3cpath d="M5 12h14"/%3e%3c/svg%3e');
  --icon-chevron-down-native-select: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(9, 9, 11)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"%3e%3cpath d="m6 9 6 6 6-6"/%3e%3c/svg%3e');
}

.lightGreen {
  --background: hsl(0 0% 100%);
  --background-hsl: 0, 0%, 100%;
  --foreground: hsl(240 10% 3.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(240 10% 3.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(240 10% 3.9%);
  --primary: hsl(142.1 76.2% 36.3%);
  --primary-hsl: 142.1, 76.2%, 36.3%;
  --primary-foreground: hsl(355.7 100% 97.3%);
  --secondary: hsl(240 4.8% 95.9%);
  --secondary-foreground: hsl(240 5.9% 10%);
  --muted: hsl(240 4.8% 95.9%);
  --muted-foreground: #52525b;
  --muted-foreground-500: hsl(240 3.8% 46.1%);
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: hsl(240 5.9% 10%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 5.9% 90%);
  --input: hsl(240 5.9% 90%);
  --ring: rgb(161, 161, 170);

  --subdued: rgb(250, 250, 250); /* background */
  --overlay-background: rgba(161, 161, 170, 0.8);
  --overlay-background-loader: rgba(255, 255, 255, 0.8);
  --scrollbar-thumb: rgb(200, 200, 200);

  /* Tags */
  --version: var(--border);
  --version-foreground: var(--foreground);
  --under-construction: #bfdbfe;
  --under-construction-foreground: hsl(240 10% 3.9%);
  --test: #e4e4e7;
  --test-foreground: #71717a;
  --active: rgb(59, 130, 246);
  --active-foreground: var(--primary-foreground);
  --archived: #71717a;
  --archived-foreground: rgb(255, 255, 255);
  --not-started: #bfdbfe;
  --not-started-foreground: hsl(240 10% 3.9%);
  --not-started-date: #907047;
  --open: hsl(142, 71%, 45%);
  --open-hsl: 142, 71%, 45%;
  --open-foreground: rgb(255, 255, 255);
  --success: hsl(217.22, 91.22%, 59.8%);
  --success-hsl: 217.22, 91.22%, 59.8%;
  --success-foreground: rgb(255, 255, 255);
  --closed: #71717a;
  --closed-foreground: rgb(255, 255, 255);
  --cancelled: #a855f7;
  --cancelled-foreground: rgb(255, 255, 255);
  --warning: rgb(249, 115, 22);
  --warning-foreground: rgb(255, 255, 255);
  --error: rgb(239, 68, 68);
  --error-foreground: rgb(255, 255, 255);

  --icon-radio-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(255, 255, 255)" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="8" cy="8" r="3"/%3e%3c/svg%3e');
  --icon-checkbox-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(255, 255, 255)" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/%3e%3c/svg%3e');
  --icon-checkbox-indeterminate: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"%3e%3cpath d="M5 12h14"/%3e%3c/svg%3e');
  --icon-chevron-down-native-select: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(9, 9, 11)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"%3e%3cpath d="m6 9 6 6 6-6"/%3e%3c/svg%3e');
}

.lightViolet {
  --background: hsl(0 0% 100%);
  --background-hsl: 0, 0%, 100%;
  --foreground: hsl(224 71.4% 4.1%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(224 71.4% 4.1%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(224 71.4% 4.1%);
  --primary: hsl(262.1 83.3% 57.8%);
  --primary-hsl: 262.1, 83.3%, 57.8%;
  --primary-foreground: hsl(210 20% 98%);
  --secondary: hsl(220 14.3% 95.9%);
  --secondary-foreground: hsl(220.9 39.3% 11%);
  --muted: hsl(220 14.3% 95.9%);
  --muted-foreground: #4b5563;
  --muted-foreground-500: hsl(220 8.9% 46.1%);
  --accent: hsl(220 14.3% 95.9%);
  --accent-foreground: hsl(220.9 39.3% 11%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(210 20% 98%);
  --border: hsl(220 13% 91%);
  --input: hsl(220 13% 91%);
  --ring: rgb(161, 161, 170);

  --subdued: rgb(250, 250, 250); /* background */
  --overlay-background: rgba(161, 161, 170, 0.8);
  --overlay-background-loader: rgba(255, 255, 255, 0.8);
  --scrollbar-thumb: rgb(200, 200, 200);

  /* Tags */
  --version: var(--border);
  --version-foreground: var(--foreground);
  --under-construction: #bfdbfe;
  --under-construction-foreground: hsl(240 10% 3.9%);
  --test: #e4e4e7;
  --test-foreground: #71717a;
  --active: rgb(59, 130, 246);
  --active-foreground: var(--primary-foreground);
  --archived: #71717a;
  --archived-foreground: rgb(255, 255, 255);
  --not-started: #bfdbfe;
  --not-started-foreground: hsl(240 10% 3.9%);
  --not-started-date: #907047;
  --open: hsl(142, 71%, 45%);
  --open-hsl: 142, 71%, 45%;
  --open-foreground: rgb(255, 255, 255);
  --success: hsl(217.22, 91.22%, 59.8%);
  --success-hsl: 217.22, 91.22%, 59.8%;
  --success-foreground: rgb(255, 255, 255);
  --closed: #71717a;
  --closed-foreground: rgb(255, 255, 255);
  --cancelled: #a855f7;
  --cancelled-foreground: rgb(255, 255, 255);
  --warning: rgb(249, 115, 22);
  --warning-foreground: rgb(255, 255, 255);
  --error: rgb(239, 68, 68);
  --error-foreground: rgb(255, 255, 255);

  --icon-radio-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(255, 255, 255)" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="8" cy="8" r="3"/%3e%3c/svg%3e');
  --icon-checkbox-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(255, 255, 255)" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/%3e%3c/svg%3e');
  --icon-checkbox-indeterminate: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(255, 255, 255)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"%3e%3cpath d="M5 12h14"/%3e%3c/svg%3e');
  --icon-chevron-down-native-select: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(3, 7, 18)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"%3e%3cpath d="m6 9 6 6 6-6"/%3e%3c/svg%3e');
}

.darkBlue {
  --background: hsl(222.2 84% 4.9%);
  --background-hsl: 222.2, 84%, 4.9%;
  --foreground: hsl(210 40% 94%);
  --card: hsl(222.2 84% 4.9%);
  --card-foreground: hsl(210 40% 98%);
  --popover: hsl(222.2 84% 4.9%);
  --popover-foreground: hsl(210 40% 98%);
  --primary: hsl(217.2 91.2% 59.8%);
  --primary-hsl: 217.2, 91.2%, 59.8%;
  --primary-foreground: hsl(222.2 47.4% 11.2%);
  --secondary: hsl(217.2 32.6% 15%);
  --secondary-foreground: hsl(210 40% 98%);
  --muted: hsl(217.2 32.6% 15%);
  --muted-foreground: hsl(215 20.2% 65.1%);
  --muted-foreground-500: hsl(215 20.2% 65.1%);
  --accent: hsl(217.2 32.6% 15%);
  --accent-foreground: hsl(210 40% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(210 40% 98%);
  --border: hsl(217.2 32.6% 17.5%);
  --input: hsl(217.2 32.6% 17.5%);
  --ring: rgb(161, 161, 170);

  --subdued: hsl(222.2 30% 10%);
  --overlay-background: rgba(2, 8, 23, 0.8);
  --overlay-background-loader: rgba(2, 8, 23, 0.8);
  --scrollbar-thumb: hsl(217.2 32.6% 20%);

  /* Tags */
  --version: hsl(217.2 32.6% 20%);
  --version-foreground: var(--muted-foreground);
  --under-construction: #bfdbfe;
  --under-construction-foreground: hsl(240 10% 3.9%);
  --test: hsl(217.2 32.6% 20%);
  --test-foreground: var(--muted-foreground);
  --active: rgb(59, 130, 246);
  --active-foreground: hsl(240 10% 3.9%);
  --archived: #71717a;
  --archived-foreground: rgb(255, 255, 255);
  --not-started: #bfdbfe;
  --not-started-foreground: hsl(240 10% 3.9%);
  --not-started-date: #907047;
  --open: hsl(142, 71%, 45%);
  --open-hsl: 142, 71%, 45%;
  --open-foreground: rgb(255, 255, 255);
  --success: hsl(217.22, 91.22%, 59.8%);
  --success-hsl: 217.22, 91.22%, 59.8%;
  --success-foreground: rgb(255, 255, 255);
  --closed: #71717a;
  --closed-foreground: rgb(255, 255, 255);
  --cancelled: #a855f7;
  --cancelled-foreground: rgb(255, 255, 255);
  --warning: rgb(249, 115, 22);
  --warning-foreground: rgb(255, 255, 255);
  --error: rgb(239, 68, 68);
  --error-foreground: rgb(255, 255, 255);

  --icon-radio-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(2, 8, 23)" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="8" cy="8" r="3"/%3e%3c/svg%3e');
  --icon-checkbox-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(2, 8, 23)" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/%3e%3c/svg%3e');
  --icon-checkbox-indeterminate: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(2, 8, 23)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"%3e%3cpath d="M5 12h14"/%3e%3c/svg%3e');
  --icon-chevron-down-native-select: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(234, 240, 246)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"%3e%3cpath d="m6 9 6 6 6-6"/%3e%3c/svg%3e');

  /* Ace_editor */
  --ace-entity-name-function: hsl(0, 0%, 83.1%);
  --ace-string: hsl(20.7, 63.2%, 46.9%);
}

.darkMono {
  --background: hsl(240 10% 3.9%);
  --background-hsl: 240, 10%, 3.9%;
  --foreground: hsl(0 0% 94%);
  --card: hsl(240 10% 3.9%);
  --card-foreground: hsl(0 0% 98%);
  --popover: hsl(240 10% 3.9%);
  --popover-foreground: hsl(0 0% 98%);
  --primary: hsl(0 0% 98%);
  --primary-hsl: 0, 0%, 98%;
  --primary-foreground: hsl(240 5.9% 10%);
  --secondary: hsl(240 3.7% 15.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(240 3.7% 15.9%);
  --muted-foreground: hsl(240 5% 64.9%);
  --muted-foreground-500: hsl(240 5% 64.9%);
  --accent: hsl(240 3.7% 15.9%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(0 0% 98%);
  --border: hsl(240 3.7% 15.9%);
  --input: hsl(240 3.7% 15.9%);
  --ring: rgb(161, 161, 170);

  --subdued: hsl(240 10% 9.9%);
  --overlay-background: rgba(9, 9, 11, 0.8);
  --overlay-background-loader: rgba(9, 9, 11, 0.8);
  --scrollbar-thumb: hsl(240 3.7% 21%);

  /* Tags */
  --version: hsl(217.2 32.6% 20%);
  --version-foreground: var(--muted-foreground);
  --under-construction: #bfdbfe;
  --under-construction-foreground: hsl(240 10% 3.9%);
  --test: hsl(217.2 32.6% 20%);
  --test-foreground: var(--muted-foreground);
  --active: rgb(59, 130, 246);
  --active-foreground: hsl(240 10% 3.9%);
  --archived: #71717a;
  --archived-foreground: rgb(255, 255, 255);
  --not-started: #bfdbfe;
  --not-started-foreground: hsl(240 10% 3.9%);
  --not-started-date: #907047;
  --open: hsl(142, 71%, 45%);
  --open-hsl: 142, 71%, 45%;
  --open-foreground: rgb(255, 255, 255);
  --success: hsl(217.22, 91.22%, 59.8%);
  --success-hsl: 217.22, 91.22%, 59.8%;
  --success-foreground: rgb(255, 255, 255);
  --closed: #71717a;
  --closed-foreground: rgb(255, 255, 255);
  --cancelled: #a855f7;
  --cancelled-foreground: rgb(255, 255, 255);
  --warning: rgb(249, 115, 22);
  --warning-foreground: rgb(255, 255, 255);
  --error: rgb(239, 68, 68);
  --error-foreground: rgb(255, 255, 255);

  --icon-radio-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(9, 9, 11)" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="8" cy="8" r="3"/%3e%3c/svg%3e');
  --icon-checkbox-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(9, 9, 11)" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/%3e%3c/svg%3e');
  --icon-checkbox-indeterminate: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(9, 9, 11)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"%3e%3cpath d="M5 12h14"/%3e%3c/svg%3e');
  --icon-chevron-down-native-select: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"%3e%3cpath d="m6 9 6 6 6-6"/%3e%3c/svg%3e');

  /* Ace_editor */
  --ace-entity-name-function: hsl(0, 0%, 83.1%);
  --ace-string: hsl(20.7, 63.2%, 46.9%);
}

.darkGreen {
  --background: hsl(20 14.3% 4.1%);
  --background-hsl: 20, 14.3%, 4.1%;
  --foreground: hsl(0 0% 94%);
  --card: hsl(24 9.8% 10%);
  --card-foreground: hsl(0 0% 95%);
  --popover: hsl(0 0% 9%);
  --popover-foreground: hsl(0 0% 95%);
  --primary: hsl(142.1 70.6% 45.3%);
  --primary-hsl: 142.1, 70.6%, 45.3%;
  --primary-foreground: hsl(144.9 80.4% 10%);
  --secondary: hsl(240 3.7% 15.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(0 0% 15%);
  --muted-foreground: hsl(240 5% 64.9%);
  --muted-foreground-500: hsl(240 5% 64.9%);
  --accent: hsl(12 6.5% 15.1%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(0 85.7% 97.3%);
  --border: hsl(240 3.7% 15.9%);
  --input: hsl(240 3.7% 15.9%);
  --ring: rgb(161, 161, 170);

  --subdued: hsl(20 14.3% 8.1%);
  --overlay-background: rgba(12, 10, 9, 0.8);
  --overlay-background-loader: rgba(12, 10, 9, 0.8);
  --scrollbar-thumb: hsl(0 0% 20%);

  /* Tags */
  --version: hsl(217.2 32.6% 20%);
  --version-foreground: var(--muted-foreground);
  --under-construction: #bfdbfe;
  --under-construction-foreground: hsl(240 10% 3.9%);
  --test: hsl(217.2 32.6% 20%);
  --test-foreground: var(--muted-foreground);
  --active: rgb(59, 130, 246);
  --active-foreground: hsl(240 10% 3.9%);
  --archived: #71717a;
  --archived-foreground: rgb(255, 255, 255);
  --not-started: #bfdbfe;
  --not-started-foreground: hsl(240 10% 3.9%);
  --not-started-date: #907047;
  --open: hsl(142, 71%, 45%);
  --open-hsl: 142, 71%, 45%;
  --open-foreground: rgb(255, 255, 255);
  --success: hsl(217.22, 91.22%, 59.8%);
  --success-hsl: 217.22, 91.22%, 59.8%;
  --success-foreground: rgb(255, 255, 255);
  --closed: #71717a;
  --closed-foreground: rgb(255, 255, 255);
  --cancelled: #a855f7;
  --cancelled-foreground: rgb(255, 255, 255);
  --warning: rgb(249, 115, 22);
  --warning-foreground: rgb(255, 255, 255);
  --error: rgb(239, 68, 68);
  --error-foreground: rgb(255, 255, 255);

  --icon-radio-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(12, 10, 9)" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="8" cy="8" r="3"/%3e%3c/svg%3e');
  --icon-checkbox-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(12, 10, 9)" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/%3e%3c/svg%3e');
  --icon-checkbox-indeterminate: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(12, 10, 9)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"%3e%3cpath d="M5 12h14"/%3e%3c/svg%3e');
  --icon-chevron-down-native-select: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"%3e%3cpath d="m6 9 6 6 6-6"/%3e%3c/svg%3e');

  /* Ace_editor */
  --ace-entity-name-function: hsl(0, 0%, 83.1%);
  --ace-string: hsl(20.7, 63.2%, 46.9%);
}

.darkViolet {
  --background: hsl(224 71.4% 4.1%);
  --background-hsl: 224, 71.4%, 4.1%;
  --foreground: hsl(210 20% 94%);
  --card: hsl(224 71.4% 4.1%);
  --card-foreground: hsl(210 20% 98%);
  --popover: hsl(224 71.4% 4.1%);
  --popover-foreground: hsl(210 20% 98%);
  --primary: hsl(263.4 70% 50.4%);
  --primary-hsl: 263.4, 70%, 50.4%;
  --primary-foreground: hsl(210 20% 98%);
  --secondary: hsl(215 27.9% 16.9%);
  --secondary-foreground: hsl(210 20% 98%);
  --muted: hsl(215 27.9% 16.9%);
  --muted-foreground: hsl(217.9 10.6% 64.9%);
  --muted-foreground-500: hsl(217.9 10.6% 64.9%);
  --accent: hsl(215 27.9% 16.9%);
  --accent-foreground: hsl(210 20% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(210 20% 98%);
  --border: hsl(215 27.9% 16.9%);
  --input: hsl(215 27.9% 16.9%);
  --ring: rgb(161, 161, 170);

  --subdued: hsl(224 71.4% 7.1%);
  --overlay-background: rgba(3, 7, 18, 0.8);
  --overlay-background-loader: rgba(3, 7, 18, 0.8);
  --scrollbar-thumb: hsl(215 27.9% 22%);

  /* Tags */
  --version: hsl(217.2 32.6% 20%);
  --version-foreground: var(--muted-foreground);
  --under-construction: #bfdbfe;
  --under-construction-foreground: hsl(240 10% 3.9%);
  --test: hsl(217.2 32.6% 20%);
  --test-foreground: var(--muted-foreground);
  --active: rgb(59, 130, 246);
  --active-foreground: hsl(240 10% 3.9%);
  --archived: #71717a;
  --archived-foreground: rgb(255, 255, 255);
  --not-started: #bfdbfe;
  --not-started-foreground: hsl(240 10% 3.9%);
  --not-started-date: #907047;
  --open: hsl(142, 71%, 45%);
  --open-hsl: 142, 71%, 45%;
  --open-foreground: rgb(255, 255, 255);
  --success: hsl(217.22, 91.22%, 59.8%);
  --success-hsl: 217.22, 91.22%, 59.8%;
  --success-foreground: rgb(255, 255, 255);
  --closed: #71717a;
  --closed-foreground: rgb(255, 255, 255);
  --cancelled: #a855f7;
  --cancelled-foreground: rgb(255, 255, 255);
  --warning: rgb(249, 115, 22);
  --warning-foreground: rgb(255, 255, 255);
  --error: rgb(239, 68, 68);
  --error-foreground: rgb(255, 255, 255);

  --icon-radio-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(3, 7, 18)" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="8" cy="8" r="3"/%3e%3c/svg%3e');
  --icon-checkbox-checked: url('data:image/svg+xml,%3csvg viewBox="0 0 16 16" fill="rgb(3, 7, 18)" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/%3e%3c/svg%3e');
  --icon-checkbox-indeterminate: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(3, 7, 18)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"%3e%3cpath d="M5 12h14"/%3e%3c/svg%3e');
  --icon-chevron-down-native-select: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgb(237, 240, 243)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"%3e%3cpath d="m6 9 6 6 6-6"/%3e%3c/svg%3e');

  /* Ace_editor */
  --ace-entity-name-function: hsl(0, 0%, 83.1%);
  --ace-string: hsl(20.7, 63.2%, 46.9%);
}

::-webkit-scrollbar {
  background-color: transparent;
  width: 12px;
  height: 12px;
  border-style: solid;
  border-width: 0px 0px 0px 1px;
  border-color: var(--border);
  border-radius: var(--radius-input);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 5px;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-webkit-resizer {
  background-color: transparent;
}

/* DEBUG BEGIN */
/* div,
table,
th,
td,
span,
label,
legend,
fieldset {
  border: 0.1px dashed red !important;
} */
/* DEBUG END */

html {
  font-size: 14px;
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  font-weight: 400;
  border: 0px;
  padding-top: 0px;
  color: var(--foreground);
  background-color: var(--subdued);
  -webkit-text-size-adjust: 100%;
}

html.HtmlError {
  background-color: var(--background);
}

body {
  margin: 0px;
  scrollbar-face-color: #d9dadc;
  scrollbar-highlight-color: #ffffff;
  scrollbar-shadow-color: #e8eff7;
  scrollbar-3dlight-color: #d9dadc;
  scrollbar-arrow-color: #353535;
  scrollbar-track-color: #f5f8fb;
  scrollbar-darkshadow-color: #959695;
}

body.dashboard,
body.views,
body.processes,
body.requests,
body.todos,
body.teams,
body.assignments,
body.delegations,
body.application-start,
body.follow-up,
body.search-form,
body.search-result,
body.analytics {
  visibility: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "banner"
    "app";
  height: 100vh;
  overflow-y: hidden;
}

body.follow-up {
  min-height: 0px;
}

body.views .content-header,
body.processes .content-header,
body.requests .content-header,
body.todos .content-header,
body.teams .content-header,
body.assignments .content-header,
body.delegations .content-header,
body.follow-up .content-header,
body.search-form .content-header,
body.search-result .content-header,
body.follow-up .info-data-container,
body.analytics .content-header {
  display: inline-table;
  width: 100%;
}

body.views .content-header,
body.processes .content-header,
body.requests .content-header,
body.todos .content-header,
body.teams .content-header,
body.assignments .content-header,
body.delegations .content-header,
body.follow-up .content-header,
body.search-form .content-header,
body.search-result .content-header,
body.analytics .content-header {
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
}

body.portal-dialog {
  padding: 0px;
  min-height: 0px;
  min-width: 0px;
}

.iframe-custom-banner {
  grid-area: banner;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  view-transition-name: iframe-custom-banner;
}

.app-container {
  grid-area: app;
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100%;
  overflow: hidden;
}

.app-container.collapsed:not(.no-nav) {
  grid-template-columns: 68px 1fr;
}

.app-container.collapsed.smooth:not(.no-nav) {
  transition: 0.3s;
}

.app-container.no-nav {
  grid-template-columns: 0px 1fr;
}

.main-content {
  display: grid;
  grid-template-rows: 51px 1fr 0px;
  height: 100%;
  overflow-y: hidden;
  view-transition-name: main-content;
}

.app-container.no-nav .main-content {
  grid-template-rows: 1fr;
}

body.application-start .main-content {
  grid-template-rows: 0px 1fr 0px;
}

body.application-start .main-content .filter-header .content {
  display: none;
}

body.application-start .main-content .backurl-cancel {
  padding: 16px 40px;
}

body.application-start .main-content .backurl-cancel svg.lucide-chevron-left {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  stroke-width: 2;
  margin-right: 6px;
}

body.application-start .main-content .iframe-webform {
  width: 100%;
  height: 100%;
  border: none;
}

.content-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

body.search-form .content-area,
body.mobile.search-form.Refine .content-area {
  display: grid;
  grid-template-rows: auto 1fr 77px;
}

body.mobile.search-form .content-area {
  display: grid;
  grid-template-rows: auto 1fr 149px;
}

.scrollable-area {
  height: 100%;
  flex-grow: 1;
}

body.dashboard .scrollable-area,
.Portal.group-by-category .scrollable-area,
.Portal.follow-up .scrollable-area {
  overflow-y: auto;
}

body.dashboard .scrollable-area {
  scrollbar-gutter: stable;
}

.Portal.follow-up .scrollable-area,
.analytics.search-result-activities .scrollable-area {
  padding-bottom: 48px;
}

.filter-header {
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  z-index: 999;
}

.app-container.no-nav .filter-header,
.app-container.no-nav .menu-footer,
.Portal.search-form.Refine .filter-header {
  display: none;
}

.filter-header .content {
  padding: 16px 40px;
  display: flex;
  align-items: center;
  height: 18px;
  justify-content: space-between;
  gap: 12px;
}

.filter-header .content .filter-container {
  display: flex;
  align-items: center;
}

.filter-header .content .filter-container input#QUICK_SEARCH_VALUE.InputText {
  font-weight: 400;
  color: var(--foreground);
  background-color: var(--background);
  vertical-align: middle;
  padding: 0px 12px;
  height: 30px;
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
  margin-left: 8px;
}

.filter-header .content .lucideIcon {
  min-width: 18px;
  width: 18px;
  min-height: 18px;
  height: 18px;
  color: var(--muted-foreground);
  stroke-width: 2;
}

.filter-header .content .lucideIcon.lucide-align-left,
.filter-header .content .lucideIcon.lucide-list-filter,
.filter-header .content .lucideIcon.lucide-contact-2 {
  cursor: pointer;
}

.filter-header .content .lucideIcon.lucide-align-left {
  display: none;
}

.filter-header .content .lucideIcon.lucide-search {
  padding: 8px;
}

.filter-header .content select + .ui-selectmenu-button.ui-button {
  color: var(--muted-foreground);
  background-color: var(--background);
  border: none;
  border-radius: 0px;
  padding: 0px;
  margin: 0px 0px 0px 8px;
  height: auto;
  width: auto;
  max-width: 300px;
  line-height: 18px;
  box-shadow: none !important;
}

.filter-header
  .content
  select#QUICK_SEARCH_TYPE
  + .ui-selectmenu-button.ui-button {
  margin: 0px;
  max-width: 220px;
}

.filter-header .content .filter-container:hover .lucideIcon,
.filter-header
  .content
  .filter-container:hover
  select
  + .ui-selectmenu-button.ui-button {
  color: var(--foreground);
}

.filter-header
  .content
  select
  + .ui-selectmenu-button.ui-button
  .ui-selectmenu-icon {
  background-color: var(--muted-foreground);
}

.filter-header
  .content
  .filter-container:hover
  select
  + .ui-selectmenu-button.ui-button
  .ui-selectmenu-icon {
  background-color: var(--foreground);
}

.filter-header
  ~ div.ui-selectmenu-menu.ui-front.ui-selectmenu-open:nth-of-type(2),
.filter-header
  ~ div.ui-selectmenu-menu.ui-front.ui-selectmenu-open:nth-of-type(3) {
  position: fixed;
  z-index: 1000;
}

.menu-footer {
  background-color: var(--background);
  border-top: 1px solid var(--border);
  z-index: 999;
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0px 8px;
}

.menu-footer .item {
  justify-self: center;
  align-self: center;
}

.menu-footer .item .link {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 400;
  font-size: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  opacity: 0.8;
}

.menu-footer .item .link:hover {
  color: var(--foreground);
  opacity: 1;
}

.menu-footer .item .link svg {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  stroke-width: 1.5;
  color: var(--foreground);
}

body.dashboard .content-body,
.Portal .content-body,
.Portal .TitleContainer,
.analytics .content-body,
.analytics .TitleContainer,
.Error .ContentContainer {
  width: auto;
  min-width: var(--content-min-width);
  max-width: var(--content-width);
  margin: 0px auto;
}

body.dashboard .content-body {
  padding: 0px 40px 80px 40px;
}

.Portal .TitleContainer,
.analytics .TitleContainer {
  padding: 0px 40px 0px 40px;
}

.Portal.search-form.Refine .TitleContainer {
  padding: 0px 24px 0px 24px;
  width: auto;
}

.Portal.search-form.Refine .TitleContainer .TitleTable {
  padding: 0px 0px 16px 0px;
  width: 100%;
}

.Portal .content-body,
.Error .ContentContainer,
.analytics.search-result-activities .content-body,
.analytics.search-result-data .content-body {
  padding: 24px 40px 24px 40px;
}

.Portal.search-result .content-body {
  padding: 16px 40px 24px 40px;
}

.Portal.portal-popup .content-body {
  padding: 24px;
}

.Portal.follow-up .content-body .FormSection:first-of-type {
  margin-top: 0px;
}

.Portal.follow-up .info-data-container .content-body {
  padding-top: 32px;
  padding-bottom: 32px;
}

.Portal.follow-up .actions-container .content-body,
.Portal.follow-up .assignment-container .content-body {
  padding-top: 0px;
}

.analytics.search-result-activities .content-body {
  padding-top: 0px;
}

.Portal.AdvancedGrid .content-body {
  height: 100%;
}

body.Portal:not(.search-result):not(.views):not(.search-form):not(
    .processes
  ):not(.requests):not(.todos):not(.teams):not(.assignments):not(
    .delegations
  ):not(.application-start):not(.follow-up) {
  display: none;
}

input,
select {
  font-size: 14px;
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}

a {
  outline: none;
}

/* Buttons */

.PrimaryButton,
.SecondaryButton,
.DestructiveButton,
.DestructiveGhostButton,
.DestructiveOutlineButton,
.OutlineButton,
.GhostButton {
  font-size: 14px;
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  font-weight: 500;
  border-radius: var(--radius-input);
  padding: 8px 16px;
  min-width: 100px;
  line-height: 20px;
  text-decoration: none;
  background-image: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  box-sizing: border-box;
  outline: none;
}

.PrimaryButton {
  color: var(--primary-foreground);
  background-color: var(--primary);
  border: 0px solid var(--primary);
  opacity: 1;
}

.PrimaryButton:hover:not(:disabled) {
  opacity: 0.9;
}

.SecondaryButton {
  color: var(--secondary-foreground);
  background-color: var(--secondary);
  border: 0px solid var(--secondary);
  opacity: 0.8;
}

.SecondaryButton:hover:not(:disabled) {
  opacity: 1;
}

.DestructiveButton {
  color: var(--destructive-foreground);
  background-color: var(--destructive);
  border: 0px solid var(--destructive);
  opacity: 1;
}

.DestructiveButton:hover:not(:disabled) {
  opacity: 0.9;
}

.DestructiveGhostButton {
  color: var(--destructive);
  background-color: transparent;
  border: 0px solid transparent;
  opacity: 1;
}

.DestructiveGhostButton:hover:not(:disabled) {
  color: var(--destructive-foreground);
  background-color: var(--destructive);
  border: 0px solid var(--destructive);
  opacity: 0.9;
}

.DestructiveOutlineButton {
  padding: 7px 15px;
  color: var(--destructive);
  background-color: transparent;
  border: 1px solid var(--input);
  opacity: 1;
}

.DestructiveOutlineButton:hover:not(:disabled) {
  color: var(--destructive-foreground);
  background-color: var(--destructive);
  border: 1px solid var(--destructive);
  opacity: 0.9;
}

.OutlineButton {
  padding: 7px 15px;
  color: var(--foreground);
  background-color: var(--background);
  border: 1px solid var(--input);
  opacity: 1;
}

.OutlineButton:hover:not(:disabled) {
  color: var(--accent-foreground);
  background-color: var(--accent);
}

.GhostButton {
  color: var(--foreground);
  background-color: transparent;
  border: 0px solid transparent;
  opacity: 1;
}

.GhostButton:hover:not(:disabled) {
  color: var(--accent-foreground);
  background-color: var(--border);
}

.PrimaryButton:disabled,
.SecondaryButton:disabled,
.DestructiveButton:disabled,
.DestructiveGhostButton:disabled,
.DestructiveOutlineButton:disabled,
.OutlineButton:disabled,
.GhostButton:disabled {
  opacity: 0.5 !important;
  cursor: default !important;
}

.GhostButton.EditView,
.GhostButton.ShareView {
  min-width: 80px;
}

#DELEGATION_FRAME {
  display: none;
}

input[type="text"] {
  outline: none;
  box-shadow: none;
  background-color: var(--subdued);
  box-sizing: border-box;
}

input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
textarea:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, var(--ring) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px !important;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
  color: var(--muted-foreground);
  opacity: 0.5;
}

input[type="file"] {
  outline: none;
}

input[type="file"]::file-selector-button {
  color: var(--secondary-foreground);
  background-color: var(--secondary);
  border: 0px solid var(--secondary);
  opacity: 0.8;
  font-size: 14px;
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  font-weight: 500;
  border-radius: var(--radius-input);
  padding: 8px 16px;
  min-width: 100px;
  line-height: 20px;
  text-decoration: none;
  background-image: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}

input[type="file"]::file-selector-button:hover {
  opacity: 1;
}

#AjaxErrorIndicator,
.Icon {
  height: 20px;
  width: 20px;
}

#PROCESS_LIST #AjaxErrorIndicator,
.Icon {
  vertical-align: middle;
}

.Icon.SubProcess {
  margin-left: 5px;
  top: 1px;
  position: relative;
}

.Portal a.CallingCardLink,
.Portal a.CallingCardLink:hover {
  color: var(--foreground);
  text-decoration: none;
}

.calImg {
  opacity: 0.8;
}

.calImg:hover {
  opacity: 1;
}

.Link img.Email {
  width: 18px;
  height: 14px;
}

.SortIcon {
  opacity: 0.8;
  width: 12px;
  height: 7px;
}

.SortIcon:hover {
  opacity: 1;
}

div.switchRadio.ui-controlgroup:not(:hover) > label.ui-button,
div.switchRadio.ui-controlgroup:hover > label.ui-button {
  color: var(--muted-foreground);
  background-color: var(--muted);
  background-image: none;
  border: 0px solid var(--input);
  border-radius: var(--radius-input);
  cursor: pointer;
  line-height: 20px;
  margin: 0px;
  padding: 6px 0px;
  width: 150px;
  box-shadow: none;
}

div.switchRadio.ui-controlgroup:not(:hover) > label.ui-state-active,
div.switchRadio.ui-controlgroup:hover > label.ui-button:hover {
  color: var(--foreground);
  background-color: var(--background);
  background-image: none;
  border: 0px solid var(--input);
  border-radius: var(--radius-input);
  cursor: pointer;
  line-height: 20px;
  margin: 0px;
  padding: 6px 0px;
  width: 150px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

div.switchRadio > label.ui-state-active {
  color: var(--primary-foreground);
  background-color: var(--primary);
  padding: 0.2em 0.5em;
}

div.switchRadio.ui-controlgroup {
  display: inline-block;
}

/* jquery-ui based checkboxes */
.checkboxLabel {
  width: 16px;
  padding: 0 !important;
  height: 17.238px;
}

label.ui-button.ui-state-default.checkBox > span {
  visibility: hidden;
  background-image: var(--icon-checkbox-checked);
  background-color: var(--muted-foreground);
  height: 12px;
  width: 12px;
  padding: 0 !important;
  display: block;
  border-radius: 3px;
}

label.ui-button.ui-state-active.checkBox > span {
  visibility: visible;
  /* IE8 */
}

label.ui-button.ui-visual-focus {
  box-shadow: none;
}

input.error {
  border: 1px solid var(--warning) !important;
}

label.error {
  font-size: 14px;
  font-weight: 400;
  position: absolute;
  color: var(--warning-foreground);
  background: var(--warning);
  border: 1px solid var(--warning);
  border-radius: var(--radius-input);
  text-align: center;
  z-index: 100;
  box-sizing: border-box;
  padding: 6px 12px;
}

/*main error label (right)*/
.error-tooltip {
  position: absolute;
  color: var(--warning-foreground);
  background: var(--warning);
  border: 1px solid var(--warning);
  padding: 4px;
  margin-left: 0px !important;
}

.error-tooltip:after,
.error-tooltip:before {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.error-tooltip:after {
  border-color: rgba(247, 139, 131, 0);
  border-right-color: var(--warning);
  border-width: 4px;
  top: 15px;
  margin-top: -10px;
}

.error-tooltip:before {
  border-color: rgba(217, 82, 82, 0);
  border-right-color: var(--warning);
  border-width: 5px;
  top: 15px;
  margin-top: -10px;
}

/*left error label*/

.error-tooltip-left {
  position: absolute;
  background: var(--warning);
  border: 1px solid var(--warning);
  margin-right: 5px;
}

.error-tooltip-left:after,
.error-tooltip-left:before {
  left: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.error-tooltip-left:after {
  border-color: rgba(247, 139, 131, 0);
  border-left-color: var(--warning);
  border-width: 5px;
  top: 50%;
  margin-top: -5px;
}

.error-tooltip-left:before {
  border-color: rgba(217, 82, 82, 0);
  border-left-color: var(--warning);
  border-width: 6px;
  top: 50%;
  margin-top: -6px;
}

/*bottom error label*/

.error-tooltip-bottom {
  position: absolute;
  display: block;
}

.error-tooltip-bottom:after,
.error-tooltip-bottom:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.error-tooltip-bottom:after {
  border-color: rgba(247, 139, 131, 0);
  border-bottom-color: var(--warning);
  border-width: 5px;
  margin-left: -5px;
}

.error-tooltip-bottom:before {
  border-color: rgba(217, 82, 82, 0);
  border-bottom-color: var(--warning);
  border-width: 6px;
  margin-left: -6px;
}

a.LinkSmallButton {
  padding: 2px 6px !important;
  border: 1px solid var(--input);
  border-radius: var(--radius-input);
  color: var(--foreground);
  vertical-align: middle;
  text-decoration: none !important;
  cursor: auto;
}

a.LinkSmallButton:hover,
a.LinkSmallButton.Enabled {
  color: var(--primary-foreground) !important;
  text-decoration: none !important;
  background-color: var(--foreground);
  border-color: var(--input);
  cursor: pointer;
}

/****************************************************************/
/************************* side-panel ***********************/
/****************************************************************/

.side-panel {
  color: var(--foreground);
  background-color: var(--background);
  margin: 0px;
  padding: 0px;
  border-right: 1px solid var(--border);
  overflow-x: hidden;
  overflow-y: hidden;
  height: 100%;
  position: relative;
  view-transition-name: side-panel;
}

.side-panel:hover {
  overflow-y: auto;
}

.side-panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: none;
  visibility: hidden;
  transition: opacity 0.4s ease;
  z-index: 5;
}

.side-panel .user {
  padding: 16px 0px 0px 18px;
  display: flex;
  align-items: center;
}

.side-panel .user .avatar,
.main-content .avatar {
  cursor: pointer;
  display: inline-flex;
  background-color: var(--primary);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
}

.main-content .avatar {
  display: none;
  width: 30px;
  height: 30px;
}

.side-panel .user .avatar.as-delegator,
.main-content .avatar.as-delegator {
  background-color: var(--muted-foreground);
}

.side-panel .user .avatar span,
.main-content .avatar span {
  color: var(--primary-foreground);
  text-transform: capitalize;
}

.side-panel .user .avatar.as-delegator span,
.main-content .avatar.as-delegator span {
  color: var(--muted);
}

.side-panel .user .avatar:hover,
.main-content .avatar:hover {
  opacity: 0.9;
}

.side-panel .user .avatar.avatar-disabled,
.main-content .avatar.avatar-disabled {
  opacity: 0.5 !important;
  cursor: default !important;
}

.side-panel .user span.as-delegator {
  margin-left: 12px;
  color: var(--muted-foreground);
}

.side-panel .toolbar {
  width: 100%;
  padding: 18px;
  border-spacing: 0px 8px;
}

.side-panel .toolbar.filter-processes,
.side-panel .toolbar-separator.filter-processes {
  display: none;
  visibility: hidden;
}

.side-panel .toolbar.Requests,
.side-panel .toolbar.others,
.side-panel .toolbar.filter-processes {
  padding: 12px 18px 18px 18px;
}

.side-panel .toolbar-separator {
  border-bottom: 1px solid var(--border);
  margin: 0px 20px;
}

.side-panel .toolbar .Row .Cell {
  padding: 6px 6px;
}

.side-panel .toolbar .Row .Cell:hover {
  background-color: var(--accent);
  border-radius: var(--radius);
}

.side-panel .toolbar .Row .Cell .Link {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  opacity: 0.7;
}

.side-panel .toolbar .Row .Cell:hover {
  color: var(--foreground);
  opacity: 1;
}

.side-panel .toolbar .Row .Cell .Link svg {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  stroke-width: 2;
  color: var(--foreground);
}

.side-panel .toolbar .Row.expand-sidebar {
  display: none;
  margin-top: -12px;
}

.side-panel .toolbar .Row.expand-sidebar .Cell .Link svg {
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
}

.side-panel .toolbar .Row .Cell .Link span {
  margin-left: 12px;
  word-break: break-word;
}

.side-panel .toolbar.filter-processes .Row .Cell .Link span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 160px;
}

.side-panel .sidebar-resize {
  position: absolute;
  padding: 6px;
  background-color: transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.side-panel .sidebar-resize {
  top: 6px;
  right: 8px;
}

.side-panel .sidebar-resize:hover {
  background-color: var(--accent);
}

.side-panel .sidebar-resize .collapse-sidebar {
  width: 20px;
  height: 20px;
  background-color: var(--muted-foreground);
  background-image: none;
}

.side-panel .sidebar-resize .collapse-sidebar {
  -webkit-mask-image: var(--icon-chevrons-left);
  mask-image: var(--icon-chevrons-left);
}

/****************************************************************/
/********************* jQuery UI Dialog *************************/
/****************************************************************/

.ui-widget.ui-dialog {
  z-index: 10000;
  padding: 0px;
  background-image: none;
  background-color: var(--background);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px !important;
}

.ui-widget.ui-dialog.dialogWindow > .ui-dialog-titlebar.ui-widget-header,
.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
  border: 0px;
  background-image: none;
  padding: 24px 24px 16px 24px;
  background-color: transparent;
}

.ui-widget.ui-dialog.dialogWindow.HomeViewPopupDialog
  > .ui-dialog-titlebar.ui-widget-header {
  border-bottom: 1px solid var(--border);
}

.ui-dialog > .ui-dialog-titlebar > span.ui-dialog-title {
  font-size: 18px !important;
  font-weight: 600;
  color: var(--foreground);
  margin: 0px;
  letter-spacing: -0.45px;
  display: flex;
  align-items: center;
  height: 24px;
}

.ui-dialog[aria-describedby="refineSearchDialogWindow"]
  > .ui-dialog-titlebar
  > span.ui-dialog-title {
  display: none;
}

.ui-widget.ui-dialog.dialogWindow
  > .ui-dialog-titlebar.ui-widget-header
  > button,
.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle
  > button {
  position: absolute;
  top: 24px;
  right: 24px;
  border: 0;
  background: none;
  outline: none;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button
  > span.ui-icon {
  -webkit-mask-image: var(--icon-x);
  mask-image: var(--icon-x);
  background-color: var(--foreground);
  background-image: none;
  width: 24px;
  height: 24px;
  opacity: 0.8;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button
  > span.ui-icon:hover {
  opacity: 1;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.fullscreen-button {
  right: 52px;
  top: 27px;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.fullscreen-button
  > span.ui-icon {
  -webkit-mask-image: var(--icon-scaling);
  mask-image: var(--icon-scaling);
  background-color: var(--foreground);
  background-image: none;
  width: 18px;
  height: 18px;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.toggleAutoRefreshButton {
  right: 116px;
  top: 29px;
  width: 18px;
  height: 18px;
  padding: 0px;
  opacity: 0.8;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.toggleAutoRefreshButton:hover {
  opacity: 1;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.toggleAutoRefreshButton:disabled,
.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.toggleAutoRefreshButton:disabled:hover {
  cursor: default;
  opacity: 0.3;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.toggleAutoRefreshButton
  > svg.toggle-auto-refresh {
  display: block;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.toggleAutoRefreshButton
  > svg.toggle-auto-refresh.active {
  color: var(--open);
  opacity: 1;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.refresh-button {
  right: 84px;
  top: 27px;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.refresh-button
  > span.ui-icon {
  -webkit-mask-image: var(--icon-rotate-cw);
  mask-image: var(--icon-rotate-cw);
  background-color: var(--foreground);
  background-image: none;
  width: 18px;
  height: 18px;
}

.ui-widget.ui-dialog > .ui-dialog-titlebar.ui-widget-header > button:disabled,
.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button:disabled:hover {
  cursor: default;
  opacity: 0.3;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button:disabled
  > span.ui-icon,
.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button:disabled:hover
  > span.ui-icon {
  cursor: default;
  opacity: 0.3;
}

.ui-widget.ui-dialog
  > .ui-dialog-titlebar.ui-widget-header
  > button.refresh-button
  > span.ui-icon.loading {
  -webkit-animation-name: spin;
  animation-name: spin;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

/* jquery datepicker */

#ui-datepicker-div {
  color: var(--foreground);
  background-color: var(--background);
  padding: 12px;
  margin: 0;
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}

/*header*/
#ui-datepicker-div > .ui-datepicker-header {
  border: 0;
  background: var(--background);
  border-radius: 0;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

#ui-datepicker-div > .ui-datepicker-header > .ui-datepicker-title {
  font-weight: 500;
  color: var(--foreground);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  border: 1px solid var(--input);
  border-radius: var(--radius-input);
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover {
  background-color: var(--accent);
  top: 2px;
  left: 2px;
}

.ui-datepicker .ui-datepicker-next-hover {
  background-color: var(--accent);
  top: 2px;
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev span {
  -webkit-mask-image: var(--icon-chevron-left);
  mask-image: var(--icon-chevron-left);
  background-color: var(--foreground);
  background-image: none;
}

.ui-datepicker .ui-datepicker-next span {
  -webkit-mask-image: var(--icon-chevron-right);
  mask-image: var(--icon-chevron-right);
  background-color: var(--foreground);
  background-image: none;
}

/*calendar*/
.ui-datepicker th {
  font-weight: normal;
  color: var(--muted-foreground);
}

#ui-datepicker-div > .ui-datepicker-calendar {
  margin: 0px 0px 4px 0px;
}

#ui-datepicker-div > .ui-datepicker-calendar > tbody > tr > td > a {
  color: var(--foreground);
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  text-align: center;
  padding: 6px 0px;
}

#ui-datepicker-div
  > .ui-datepicker-calendar
  > tbody
  > tr
  > td
  > a.ui-state-hover,
#ui-datepicker-div
  > .ui-datepicker-calendar
  > tbody
  > tr
  > td.ui-datepicker-today
  > a,
#ui-datepicker-div
  > .ui-datepicker-calendar
  > tbody
  > tr
  > td.ui-datepicker-today
  > a.ui-state-hover,
#ui-datepicker-div
  > .ui-datepicker-calendar
  > tbody
  > tr
  > td.ui-datepicker-week-end
  > a.ui-state-hover {
  color: var(--accent-foreground);
  background-color: var(--accent);
  border: 1px solid var(--accent);
}

#ui-datepicker-div
  > .ui-datepicker-calendar
  > tbody
  > tr
  > td.ui-datepicker-current-day
  > a {
  color: var(--primary-foreground) !important;
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
}

#ui-datepicker-div
  > .ui-datepicker-calendar
  > tbody
  > tr
  > td.ui-datepicker-week-end
  > a {
  color: var(--muted-foreground);
  background-color: transparent;
  border: 1px solid transparent;
}

/* end jquery datepicker */

#callingCardDialogWindow,
#selectDelegateDialogWindow,
#shareViewWindow {
  margin: 0px;
  padding: 8px 24px 0px 24px;
  color: var(--foreground);
  border: 0px;
}

#shareViewWindow {
  padding-bottom: 24px;
  display: grid;
  overflow: hidden;
}

#selectDelegateDialogWindow {
  padding: 0px;
  overflow: hidden;
  height: 100% !important;
}

#callingCardDialogWindow > .Header {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  width: 100%;
}

#callingCardDialogWindow > .Header .Row {
  line-height: 14px;
  color: var(--foreground);
}

#callingCardDialogWindow > .Header .Row .CellImage {
  padding-left: 15px;
  padding-right: 0px;
  padding-top: 14px;
  vertical-align: top;
  line-height: 14px;
  width: 48px;
  display: none;
}

#callingCardDialogWindow > .Header .Row .CellImage .Image {
  vertical-align: top;
  width: 48px;
  padding: 0px;
}

#callingCardDialogWindow > .Header .Row .Cell {
  padding-top: 22px;
  padding-bottom: 5px;
  padding-left: 10px;
  vertical-align: top;
  line-height: 14px;
  background-image: none;
  color: var(--foreground);
}

#callingCardDialogWindow > .Header .Row .Cell .Title {
  padding: 15px;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: -0.02em;
}

#callingCardDialogWindow > .FormBody {
  border-spacing: 32px 16px;
}

#callingCardDialogWindow > .FormBody .Row .Cell .Separator {
  width: 95%;
}

#callingCardDialogWindow > .FormBody .Row .Caption {
  width: 150px;
}

#callingCardDialogWindow > .FormBody .Row .Caption .Label {
  color: var(--muted-foreground);
}

#callingCardDialogWindow > .FormBody .Row .Value .Label {
  font-weight: 400;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  width: 390px;
  color: var(--foreground);
}

#callingCardDialogWindow > .FormBody .Row .Value .Link {
  color: var(--foreground);
  text-decoration: none;
}

#callingCardDialogWindow > .FormBody .Row .Value .Link:hover {
  text-decoration: none;
  color: var(--foreground);
}

#callingCardDialogWindow > .Footer {
  width: 100%;
  margin-top: 11px;
  padding-left: 15px;
  padding-bottom: 11px;
  padding-right: 12px;
  width: 100%;
  height: 40px;
}

#callingCardDialogWindow > .Footer .Row .Cell {
  text-align: right;
  padding-right: 15px;
  padding-top: 5px;
  border: none;
}

#callingCardDialogWindow > .Footer .Row .Cell .Button {
  margin-left: 1px;
}

#selectDelegateDialogWindow > .Content {
  margin: 8px 24px 0px 24px;
}

.portal-dialog .Content .FormBody {
  color: var(--foreground);
  width: 100%;
}

.portal-dialog .Content .FormBody .Row .SwitchDialogCaptionAvailable,
.portal-dialog .Content .FormBody .Row .SwitchDialogCaptionSelected {
  text-align: left;
  white-space: nowrap;
}

.portal-dialog .Content .FormBody .Row .SwitchDialogCaptionAvailable .Label,
.portal-dialog .Content .FormBody .Row .SwitchDialogCaptionSelected .Label {
  font-weight: normal;
  padding-left: 5px;
}

.portal-dialog .Content .FormBody .Row .FieldCaption {
  text-align: right;
  white-space: nowrap;
}

.portal-dialog .Content .FormBody .Row .FieldCaption .Label {
  margin-left: 4px;
  font-weight: normal;
  display: none;
}

.portal-dialog .Content .FormBody .Row .FieldValue {
  white-space: nowrap;
  padding: 0px 0px 0px 0px;
}

.portal-dialog .Content .FormBody .Row .FieldValue .Label {
  margin-left: 4px;
}

.portal-dialog .Content .FormBody .Row .FieldValue .InputText {
  margin-left: 4px;
  width: 245px;
}

#selectDelegateDialogWindow
  .quick-search-container:has(.InputTextCustomWidth:focus) {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, var(--ring) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

#selectDelegateDialogWindow .quick-search-container svg:hover,
#selectDelegateDialogWindow
  .quick-search-container
  .InputTextCustomWidth:hover {
  color: var(--foreground);
}

#selectDelegateDialogWindow .quick-search-container {
  display: inline-block;
  border: 1px solid var(--input);
  border-radius: var(--radius-input);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  padding: 0px 4px 0px 12px;
  background-color: var(--subdued);
  width: calc(100% - 18px);
}

#selectDelegateDialogWindow .quick-search-container svg.lucideIcon {
  width: 20px;
  height: 20px;
  color: var(--muted-foreground);
  vertical-align: middle;
  stroke-width: 1.5;
}

#selectDelegateDialogWindow .quick-search-container .InputTextCustomWidth {
  font-weight: 400;
  height: 34px;
  padding: 8px;
  border: 0px solid var(--input);
  color: var(--muted-foreground);
  vertical-align: middle;
  width: calc(100% - 20px);
  box-shadow: none !important;
}

#selectDelegateDialogWindow .Select {
  color: var(--foreground);
  background-color: var(--subdued);
  margin-top: 12px;
  width: 100%;
  height: 330px;
  padding: 4px;
  border: 1px solid var(--input);
  border-radius: var(--radius-input);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  outline: none;
  overflow: auto;
}

#selectDelegateDialogWindow .Select option {
  outline: none;
  padding: 6px 12px;
  color: var(--foreground);
  font-weight: 400;
  border-radius: var(--radius-input);
}

#selectDelegateDialogWindow .Select option:hover {
  background-color: var(--accent);
}

#selectDelegateDialogWindow .Select option:checked {
  background-color: var(--border);
}

#selectDelegateDialogWindow .delegation-counter {
  display: none;
}

#selectDelegateDialogWindow .Footer {
  margin-top: 24px;
  width: calc(100% - 48px);
  padding: 16px 24px 24px 24px;
  border-top: solid 1px var(--border);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  text-align: end;
}

#selectDelegateDialogWindow .Footer input#delegateButton {
  margin-left: 12px;
}

#shareViewWindow span {
  color: var(--muted-foreground);
}

#shareViewWindow #shareViewUrlNavValue,
#shareViewWindow #shareViewUrlValue {
  font-weight: 400;
  color: var(--foreground);
  vertical-align: middle;
  width: 550px;
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
  padding: 8px 12px;
  outline: none;
  margin: 8px 0px 16px 0px;
  height: 36px;
}

#shareViewWindow #shareViewHtmlValue {
  color: var(--foreground);
  width: 524px;
  min-width: 524px;
  max-width: 524px;
  background-color: var(--subdued);
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
  padding: 8px 12px;
  margin: 8px 0px 16px 0px;
  outline: none;
}

#graphDialogWindow {
  color: var(--foreground);
  border: 0px;
  padding: 0px 24px 24px 24px;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  margin-top: -4px;
}

#graphDialogWindow .LinkParentPath {
  color: var(--foreground);
  text-decoration: none;
  text-align: center;
  margin-left: -5px;
}

#graphDialogWindow .GeneralTable {
  width: 100%;
  height: 100%;
}

#graphDialogWindow .GeneralTable .Row .Cell .TitleTable2Rows {
  margin: 0px;
  padding: 0px 25px;

  width: 100%;
}

#graphDialogWindow .GeneralTable .Row .Cell .TitleTable2Rows .Row {
  display: none;
}

#graphDialogWindow .GeneralTable .Row .Cell .TitleTable2Rows .Row .CellIcon {
  padding-left: 15px;
  padding-right: 0px;
  padding-top: 14px;
  vertical-align: top;
  line-height: 14px;
  width: 48px;
  display: none;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .TitleTable2Rows
  .Row
  .CellIcon
  .Image {
  vertical-align: top;
  width: 48px;
  padding: 0px;
}

#graphDialogWindow .GeneralTable .Row .Cell .TitleTable2Rows .Row .CellTitle {
  padding-top: 25px;
  vertical-align: top;
  line-height: 14px;
  color: var(--foreground);
  display: none;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .TitleTable2Rows
  .Row
  .CellTitle
  .Title {
  padding-left: 0px;

  display: none;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .TitleTable2Rows
  .Row
  .CellSubTitle {
  text-align: right;
  padding-top: 0px;
}

#graphDialogWindow .GeneralTable .Row .Cell .TitleTable3Rows {
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 5px;
  width: 100%;
}

#graphDialogWindow .GeneralTable .Row .Cell .TitleTable3Rows .Row .CellIcon {
  padding-left: 15px;
  padding-top: 14px;
  vertical-align: top;
  line-height: 14px;
  color: var(--foreground);
  width: 48px;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .TitleTable3Rows
  .Row
  .CellIcon
  .Image {
  vertical-align: top;
  width: 48px;
  padding: 0px;
}

#graphDialogWindow .GeneralTable .Row .Cell .TitleTable3Rows .Row .CellTitle {
  padding-top: 12px;
  line-height: 14px;
  color: var(--foreground);
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .TitleTable3Rows
  .Row
  .CellTitle
  .Title {
  padding-left: 5px;
  font-size: 11pt;
  font-weight: bold;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .TitleTable3Rows
  .Row
  .CellSubTitle {
  text-align: right;
  padding-top: 15px;
  padding-right: 15px;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .TitleTable3Rows
  .Row
  .CellBackLink {
  padding-left: 5px;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .TitleTable3Rows
  .Row
  .CellBackLink
  .Link {
  vertical-align: top;
  color: var(--foreground);
  text-decoration: none;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .TitleTable3Rows
  .Row
  .CellBackLink
  .Link:hover {
  text-decoration: underline;
  color: var(--foreground);
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .TitleTable3Rows
  .Row
  .CellBackLink
  .Link
  .Image {
  border-style: none;
  vertical-align: top;
}

#graphDialogWindow .GeneralTable .Row .Cell .SubHeader {
  width: 100%;
}

#graphDialogWindow .GeneralTable .Row .Cell .SubHeader .Row .CellStatus {
  font-weight: normal;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellStatus
  .LabelOpen {
  color: var(--open);
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .Link {
  color: var(--foreground);
  text-decoration: none;
  margin-left: 15px;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .Link:hover {
  text-decoration: none;
  color: var(--foreground);
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .wfd-zoom-btn,
.ViewGraphic
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .wfd-zoom-btn {
  position: absolute;
  z-index: 1000000;
  margin-top: -4px;
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .wfd-zoom-btn:hover,
.ViewGraphic
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .wfd-zoom-btn:hover {
  opacity: 1;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .parent-wfd-zoom-btn {
  position: absolute;
  z-index: 1000000;
  margin-top: -20px;
  opacity: 0.8 !important;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .parent-wfd-zoom-btn
  img {
  text-decoration: none;
  border: 0;
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .parent-wfd-zoom-btn:hover {
  opacity: 1 !important;
}

#graphDialogWindow .GeneralTable .RowGraph {
  width: 100%;
  height: 100%;
}

#graphDialogWindow .GeneralTable .Row .Cell .Bottom {
  width: 100%;
}

#graphDialogWindow .GeneralTable .Row .Cell .Bottom .Row .CellButtons {
  text-align: right;
  display: none;
}

#graphDialogWindow .GeneralTable .Row .Cell .Bottom .Row .CellButtons .Button {
  margin-right: -2px;
}

#graphDialogWindow .GeneralTable .RowGraph .Cell .DivGraph {
  background-color: transparent;
  border-top: 1px solid var(--border);
  padding: 0px;
  position: absolute;
  top: 40px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

#graphDialogWindow .GeneralTable .RowGraph .Cell .DivGraph #PROCESS_INST {
  width: 100%;
  height: 100%;
  padding: 0px;
  position: absolute;
  top: 0px;
  bottom: -23px;
  left: 0px;
  right: 0px;
}

#helpDialogWindow {
  color: var(--foreground);
  border: 0px;
  padding: 0px 24px 24px 24px;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  margin-top: -4px;
}

#helpDialogWindow .MainTable,
.WinHelp .MainTable {
  width: 100%;
  height: 100%;
}

#helpDialogWindow .MainTable .Row,
.WinHelp .MainTable .Row {
  width: 100%;
}

#helpDialogWindow .MainTable .Row#helpLinkEmail,
.WinHelp .MainTable .Row#helpLinkEmail {
  height: 36px;
}

#helpDialogWindow .MainTable .Row:last-child .Cell,
.WinHelp .MainTable .Row:last-child .Cell {
  padding-top: 16px;
}

#helpDialogWindow .MainTable .Row .Cell .TitleTable {
  background-image: url("../images/bg_popup.jpg");
  background-repeat: repeat-x;
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 5px;

  width: 100%;
  display: none;
}

#helpDialogWindow .MainTable .Row .Cell .TitleTable .Row .CellIcon {
  padding-left: 15px;
  padding-right: 0px;
  padding-top: 14px;
  vertical-align: top;
  line-height: 14px;
  width: 48px;
}

#helpDialogWindow .MainTable .Row .Cell .TitleTable .Row .CellIcon .Image {
  vertical-align: top;
  width: 48px;
  padding: 0px;
}

#helpDialogWindow .MainTable .Row .Cell .TitleTable .Row .CellTitle {
  padding-top: 17px;
  vertical-align: top;
  line-height: 14px;
  color: var(--foreground);
}

#helpDialogWindow .MainTable .Row .Cell .TitleTable .Row .CellTitle .Title {
  padding-left: 15px;
  font-size: 11pt;
  font-weight: bold;
}

#helpDialogWindow .MainTable .Row .Cell .TitleTable .Row .CellSubTitle {
  text-align: right;
  padding-top: 15px;
  padding-right: 15px;
}

#helpDialogWindow
  .MainTable
  .Row
  .Cell
  .TitleTable
  .Row
  .CellSubTitle
  .Subtitle {
  padding-left: 10px;
}

#helpDialogWindow .MainTable .Row .Cell .Tabs,
.WinHelp .MainTable .Row .Cell .Tabs {
  width: 100%;
}

#helpDialogWindow .MainTable .Row .Cell .Tabs .Row .CellTab .Tab,
.WinHelp .MainTable .Row .Cell .Tabs .Row .CellTab .Tab {
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 16px;
  font-weight: normal;
  list-style-type: none;
  text-align: left;
  box-sizing: border-box;
}

#helpDialogWindow .MainTable .Row .Cell .Tabs .Row .CellTab .Tab li,
.WinHelp .MainTable .Row .Cell .Tabs .Row .CellTab .Tab li {
  display: inline;
  margin: 0px;
  cursor: pointer;
}

#helpDialogWindow
  .MainTable
  .Row
  .Cell
  .Tabs
  .Row
  .CellTab
  .Tab
  li
  span.disabled,
.WinHelp .MainTable .Row .Cell .Tabs .Row .CellTab .Tab li span.disabled {
  padding: 4px 16px;
  color: var(--muted-foreground);
  display: inline-block;
  cursor: default;
  border-radius: var(--radius-tag);
  line-height: 20px;
  font-weight: 400;
  opacity: 0.3;
}

#helpDialogWindow .MainTable .Row .Cell .Tabs .Row .CellTab .Tab li a,
.WinHelp .MainTable .Row .Cell .Tabs .Row .CellTab .Tab li a {
  padding: 4px 16px;
  color: var(--muted-foreground);
  display: inline-block;
  cursor: pointer;
  border-radius: var(--radius-tag);
  line-height: 20px;
  font-weight: 400;
}

#helpDialogWindow .MainTable .Row .Cell .Tabs .Row .CellTab .Tab li.selected a,
.WinHelp .MainTable .Row .Cell .Tabs .Row .CellTab .Tab li.selected a {
  padding: 4px 16px;
  color: var(--foreground);
  display: inline-block;
  cursor: pointer;
  border-radius: var(--radius-tag);
  line-height: 20px;
  font-weight: 450;
  background-color: var(--accent);
}

#helpDialogWindow .MainTable .Row .Cell .Tabs .Row .CellLinks .Label .Link {
  color: var(--foreground);
  text-decoration: none;
  margin-left: 15px;
}

#helpDialogWindow
  .MainTable
  .Row
  .Cell
  .Tabs
  .Row
  .CellLinks
  .Label
  .Link:hover {
  text-decoration: underline;
  color: var(--foreground);
}

#helpDialogWindow
  .MainTable
  .Row
  .Cell
  .Tabs
  .Row
  .CellLinks
  .Label
  .wfd-zoom-btn,
.WinHelp .MainTable .Row .Cell .Tabs .Row .CellLinks .Label .wfd-zoom-btn {
  position: absolute;
  z-index: 10;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

#helpDialogWindow
  .MainTable
  .Row
  .Cell
  .Tabs
  .Row
  .CellLinks
  .Label
  .wfd-zoom-btn:hover,
.WinHelp
  .MainTable
  .Row
  .Cell
  .Tabs
  .Row
  .CellLinks
  .Label
  .wfd-zoom-btn:hover {
  opacity: 1;
}

.WinHelp
  .MainTable
  .Row
  .Cell
  .Tabs
  .Row
  .CellLinks
  .Label
  #wfd-resizeGraph-more-help {
  -webkit-mask-image: var(--icon-zoom-in);
  mask-image: var(--icon-zoom-in);
  background-color: var(--foreground);
  background-image: none;
}

.WinHelp
  .MainTable
  .Row
  .Cell
  .Tabs
  .Row
  .CellLinks
  .Label
  #wfd-resizeGraph-less-help {
  -webkit-mask-image: var(--icon-zoom-out);
  mask-image: var(--icon-zoom-out);
  background-color: var(--foreground);
  background-image: none;
}

#helpDialogWindow .MainTable .RowContent,
.WinHelp .MainTable .RowContent {
  width: 100%;
  height: 100%;
}

#helpDialogWindow .MainTable .RowContent .Cell .DivGraph {
  background-color: transparent;
  border-top: 1px solid var(--border);
  padding: 0px;
  position: absolute;
  top: 43px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

#helpDialogWindow .MainTable .RowContent .Cell .DivGraph #HELP_FRAME,
.WinHelp .MainTable .RowContent .Cell .DivGraph .WinHelpIframe {
  width: 100%;
  height: 100%;
  padding: 0px;
  position: absolute;
  top: 0px;
  bottom: -23px;
  left: 0px;
  right: 0px;
}

#helpDialogWindow .MainTable .RowContent .Cell .DivHelp,
.WinHelp .MainTable .RowContent .Cell .DivHelp {
  height: 100%;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-left: -24px;
  margin-right: -24px;
}

.WinHelp .MainTable .RowContent .Cell .DivHelp {
  height: 557px;
}

#helpDialogWindow .MainTable .RowContent .Cell .DivHelp .Label,
.WinHelp .MainTable .RowContent .Cell .DivHelp .Label {
  font-size: 15px;
  display: block;
  padding: 24px 100px 24px 120px;
  line-height: 1.75rem;
}

#helpDialogWindow .MainTable .Row .Cell .Bottom,
.WinHelp .MainTable .Row .Cell .Bottom {
  width: 100%;
}

#helpDialogWindow .MainTable .Row .Cell .Bottom .Row .CellLinks,
.WinHelp .MainTable .Row .Cell .Bottom .Row .CellLinks {
  text-align: left;
}

#helpDialogWindow .MainTable .Row .Cell .Bottom .Row .CellLinks .Label,
.WinHelp .MainTable .Row .Cell .Bottom .Row .CellLinks .Label {
  font-weight: 400;
  margin-right: 36px;
  color: var(--muted-foreground);
}

#helpDialogWindow .MainTable .Row .Cell .Bottom .Row .CellLinks .Label .Link,
.WinHelp .MainTable .Row .Cell .Bottom .Row .CellLinks .Label .Link {
  text-decoration: none;
  color: var(--foreground);
  font-weight: 500;
  margin-left: 12px;
}

#helpDialogWindow
  .MainTable
  .Row
  .Cell
  .Bottom
  .Row
  .CellLinks
  .Label
  .Link:hover,
.WinHelp .MainTable .Row .Cell .Bottom .Row .CellLinks .Label .Link:hover {
  text-decoration: none;
  color: var(--foreground);
}

#helpDialogWindow .MainTable .Row .Cell .Bottom .Row .CellButtons {
  text-align: right;
  padding-right: 25px;
  padding-top: 5px;
  display: none;
}

#helpDialogWindow .MainTable .Row .Cell .Bottom .Row .CellButtons .Button {
  margin-left: 3px;
}

a#wfd-resizeGraph-more-help,
a#wfd-resizeGraph-more-followup {
  right: 20px;
  -webkit-mask-image: var(--icon-zoom-in);
  mask-image: var(--icon-zoom-in);
  background-color: var(--foreground);
  background-image: none;
}

a#wfd-resizeGraph-less-help,
a#wfd-resizeGraph-less-followup {
  right: 52px;
  -webkit-mask-image: var(--icon-zoom-out);
  mask-image: var(--icon-zoom-out);
  background-color: var(--foreground);
  background-image: none;
}

#refineSearchDialogWindow {
  padding: 0;
  margin: 0;
  background-color: var(--background);
  overflow: hidden;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

#refineSearchDialogWindow > #refineSearchFrame {
  border: 0;
  height: 100%;
  width: 100%;
  bottom: 0px;
  overflow: hidden;
}

#statsDataDialog {
  padding: 0px;
}

#statsDataDialog > .ContentHeader {
  display: none;
}

#statsDataDialog .Content {
  padding: 25px 32px;
  background-color: var(--background);
}

#statsDataDialog option {
  color: var(--foreground);
  padding: 6px 8px;
  border-radius: var(--radius-input);
  outline: none;
}

#statsDataDialog option:hover {
  background-color: var(--accent) !important;
}

#statsDataDialog > .Footer {
  padding: 16px 24px 24px 24px;
  width: 100%;
  border-top: 1px solid var(--border);
  vertical-align: middle;
  text-align: right;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

#statsDataDialog > .Footer input {
  margin-left: 10px;
  cursor: pointer;
}

#statsDataDialog input#addSelectedData {
  -webkit-mask-image: var(--icon-chevrons-right);
  mask-image: var(--icon-chevrons-right);
  background-color: var(--foreground);
  background-image: none;
  height: 24px;
  width: 24px;
}

#statsDataDialog input#removeSelectedData {
  -webkit-mask-image: var(--icon-chevrons-left);
  mask-image: var(--icon-chevrons-left);
  background-color: var(--foreground);
  background-image: none;
  height: 24px;
  width: 24px;
}

#statsDataDialog .SelectCustomWidth {
  height: 200px;
  margin-top: 12px;
  float: left;
  color: var(--foreground);
  background-color: var(--subdued);
  font-size: 14px;
  padding: 4px;
  border: 1px solid var(--input);
  border-radius: var(--radius-input);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  outline: none;
  overflow: auto;
  margin-bottom: 24px;
  width: 300px;
}

div#selectDataWrapper {
  margin-top: 8px;
  display: grid;
  grid-template-columns: max-content auto max-content;
}

#statsDataDialog .available-wrapper,
#statsDataDialog .selected-wrapper {
  display: grid;
}

div#selectDataButtonsWrapper {
  position: relative;
  left: 24px;
  align-content: center;
  width: 20px;
}

div#statsDataDialog label.label-name,
div#statsDataDialog .label-counter {
  color: var(--muted-foreground);
  margin-top: 0px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  line-height: 22px;
  min-width: 90px;
  width: auto;
}

div#statsDataDialog .label-counter {
  display: none;
}

#statsDataDialog > .Content {
  font-family: Tahoma, Arial, Helv;
  font-size: 12px !important;
  outline: none;
  font-weight: normal;
  color: var(--foreground) !important;
  vertical-align: middle;
  overflow-y: auto;
  height: 22px;
  width: 100%;
}

#statsDataDialog .Content select {
  border: 1px var(--input) solid !important;
  color: var(--foreground) !important;
  padding: 3px;
}

.DivContentBody {
  margin-left: 24px;
  margin-right: 24px;
}

#FORM_ITEMS > table.FormBody > tbody > tr.Row > .FieldValue {
  width: 50%;
}

.SelectCustomWidth {
  width: 100%;
}

td.CellButtonTransfer {
  width: 80px;
}

/****************************************************************/
/************************* Portal *******************************/
/****************************************************************/

.portal-popup {
  margin: 0 !important;
}

.Portal .TitleTable,
.Portal .FollowUpTitleHeader,
.analytics .TitleTable {
  width: 100%;
  min-width: var(--content-table-min-width);
  max-width: var(--content-table-width);
  padding: 16px 0px 16px 0px;
}

.Portal .TitleTable .RowProcess td span,
.analytics .TitleTable .RowProcess td span {
  font-size: 17px;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  height: 20px;
  display: block;
}

.Portal .TitleTable .Row .Cell,
.analytics .TitleTable .Row .Cell {
  display: flex;
  justify-content: space-between;
}

.Portal .TitleTable .Row .Cell .Title,
.analytics .TitleTable .Row .Cell .Title {
  padding-right: 4rem;
  font-size: 32px;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: -0.025em;
  height: 40px;
  display: inline-block;
}

.TitleContainer div.Title {
  display: grid;
  grid-template-columns: 50% 50%;
  padding: 16px 0px 16px 0px;
}

.Portal.search-form.Refine .TitleContainer div.Title {
  padding-top: 0px;
}

.TitleContainer div.Title.Report {
  grid-template-columns: 100%;
}

.TitleContainer div.Title.Report div.Subtitle {
  display: grid;
  grid-template-columns: max-content auto;
}

.TitleContainer div.Title .Label {
  font-size: 28px;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: -0.025em;
  line-height: 40px;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Portal .TitleTable .Row .Cell .Image,
.analytics .TitleTable .Row .Cell .Image {
  padding-left: 2px;
  margin-left: 0px;
  vertical-align: bottom;
  display: none;
}

.Portal .TitleTable .Row .Cell #requestListRadio,
.Portal .TitleTable .Row .Cell #actionListRadio,
.Portal .TitleTable .Row .Cell #searchFormRadio,
.analytics .TitleTable .Row .Cell #searchFormRadio {
  background-color: var(--muted);
  border-radius: var(--radius-input);
  padding: 4px;
  height: 32px;
  left: 0px !important;
}

.TitleContainer div.Title .Switch {
  text-align: right;
}

body.Portal.search-form.Refine .TitleContainer div.Title .Switch {
  padding-right: 40px;
}

.TitleContainer div.Title .Switch > div {
  background-color: var(--muted);
  border-radius: var(--radius-input);
  padding: 4px;
  height: 32px;
  left: 0px !important;
}

.Portal.search-form.Refine .TitleTable .Row .Cell #searchFormRadio {
  margin-right: 40px;
}

body.Portal.search-form.Refine > .content-header {
  min-width: unset;
}

.Portal .TitleTable .Row .Cell .RadioButton,
.analytics .TitleTable .Row .Cell .RadioButton {
  vertical-align: middle;
  margin-top: 0.48em;
}

.Portal .TitleTable .Row .Cell .LabelOption,
.analytics .TitleTable .Row .Cell .LabelOption {
  padding-right: 10px;
  padding-left: 2px;
  font-size: 22px;
  font-weight: normal;
  color: #909090;
  vertical-align: top;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.Portal .TitleTable .Row .Cell .LabelOptionSelected,
.analytics .TitleTable .Row .Cell .LabelOptionSelected {
  padding-right: 10px;
  padding-left: 2px;
  font-size: 22px;
  font-weight: normal;
  color: var(--foreground);
  vertical-align: top;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.Portal .TitleTable .Row .Cell #advancedViewLoading {
  height: 15px;
  width: 15px;
  top: 7px;
  position: relative;
  display: none;
}

.switchRadio {
  display: inline;
  position: relative;
  top: 0px;
}

.switchRadio > label > span.ui-button-text {
  font-weight: 400;
  text-transform: Capitalize;
}

/********************** Search ********************/

.Portal.search-form .content-body,
.analytics.search-form .content-body {
  padding: 0px 28px 80px 40px;
}

body.Portal.search-form.Refine .content-body {
  margin: 0px;
}

.Portal.search-form .scrollable-area,
.analytics.search-form .scrollable-area,
.analytics.search-result-activities .scrollable-area {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body.Portal.search-form.Refine .scrollable-area {
  min-width: unset;
}

.Portal.search-form .content-footer,
.analytics .content-footer {
  display: inline-table;
  position: static;
  right: 0px;
  bottom: 0px;
  width: 100%;
  border-top: 1px solid var(--border);
  background-color: var(--background);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px -1px 2px 0px;
  z-index: 1900;
}

.Portal.search-form .content-footer .Footer,
.analytics .content-footer .Footer {
  display: flex;
  justify-content: space-between;
  width: auto;
  min-width: var(--content-min-width);
  max-width: var(--content-width);
  padding: 16px 40px 24px 40px;
  margin: 0px auto;
}

.Portal.search-form .content-footer .Footer .Buttons,
.analytics .content-footer .Footer .Buttons {
  display: flex;
}

.Portal.search-form
  .content-footer
  .Footer
  .Buttons.Right
  input:not(:first-of-type),
.analytics .content-footer .Footer .Buttons.Right input:not(:first-of-type) {
  margin-left: 8px;
}

.Portal .search-form-data,
.analytics .search-form-data {
  border-spacing: 8px 16px;
}

.Portal .search-form-data .Row .CellValue .Label,
.analytics .search-form-data .Row .CellValue .Label {
  margin: 0;
}

.Portal .SearchButton,
.analytics .SearchButton {
  width: 100%;
  padding: 16px 24px 24px 24px;
  text-align: end;
  border-top: solid 1px var(--border);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

select#id_state {
  width: 170px;
}

/****************************************************************/
/************************* Follow Up ****************************/
/****************************************************************/

.Portal .FollowUpTitleHeader .Row .CellParentRequest .Title {
  color: var(--foreground);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.025em;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
}

.Portal .FollowUpTitleHeader .Row .CellParentRequest .Title svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  margin-right: 6px;
}

.Portal .FollowUpTitleHeader tr.Row:nth-of-type(2) .CellTitle {
  white-space: nowrap;
  padding: 12px 0px 0px 0px;
}

.Portal .FollowUpTitleHeader .Row .CellTitle .Title,
.analytics .TitleTable .Row .CellTitle .Title {
  color: var(--foreground);
  font-size: 28px;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: -0.025em;
  display: inline-block;
  cursor: pointer;
  white-space: normal;
}

.analytics .TitleTable .Row .CellTitle .Title {
  height: 40px;
  cursor: auto;
}

.Portal .FollowUpTitleHeader .Row .CellTags {
  white-space: nowrap;
  padding: 4px 0px 0px 0px;
}

.analytics .TitleTable .Row .CellTime {
  white-space: nowrap;
  height: 38px;
  color: var(--muted-foreground);
  font-weight: 400;
  line-height: 20px;
  margin-top: 6px;
}

.Portal .FollowUpTitleHeader .Row .CellTags .Tag,
#graphDialogWindow .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .Tag,
.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .Tag {
  font-size: 12px;
  margin-right: 8px;
  padding: 4px 14px;
  border-radius: var(--radius-tag);
  min-width: 40px;
  display: inline-flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.Portal .FollowUpTitleHeader .Row .CellTags .NotStarted,
#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellStatus
  .NotStarted,
.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .NotStarted {
  color: var(--not-started-foreground);
  background-color: var(--not-started);
  border: 1px solid var(--not-started);
}

.Portal .FollowUpTitleHeader .Row .CellTags .Running,
#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellStatus
  .Running,
.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .Running {
  color: var(--open-foreground);
  background-color: var(--open);
  border: 1px solid var(--open);
}

.Portal .FollowUpTitleHeader .Row .CellTags .Overdue,
#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellStatus
  .Overdue,
.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .Overdue {
  color: var(--warning-foreground);
  background-color: var(--warning);
  border: 1px solid var(--warning);
}

.Portal .FollowUpTitleHeader .Row .CellTags .Closed,
#graphDialogWindow .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .Closed,
.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .Closed {
  color: var(--closed-foreground);
  background-color: var(--closed);
  border: 1px solid var(--closed);
}

.Portal .FollowUpTitleHeader .Row .CellTags .Completed,
#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellStatus
  .Completed,
.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .Completed {
  color: var(--success-foreground);
  background-color: var(--success);
  border: 1px solid var(--success);
}

.Portal .FollowUpTitleHeader .Row .CellTags .Cancelled,
#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellStatus
  .Cancelled,
.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .Cancelled {
  color: var(--cancelled-foreground);
  background-color: var(--cancelled);
  border: 1px solid var(--cancelled);
}

.Portal .FollowUpTitleHeader .Row .CellTags .InTest,
#graphDialogWindow .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .InTest,
.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .InTest {
  color: var(--test-foreground);
  background-color: var(--test);
  border: 1px solid var(--test);
}

.Portal .FollowUpTitleHeader .Row .CellTags .Version,
#graphDialogWindow
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellStatus
  .Version,
.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .Version {
  color: var(--version-foreground);
  background-color: var(--background);
  border: 1px solid var(--version);
}

.Portal .FollowUpTitleHeader .Row .CellButtons,
.analytics .TitleTable .Row .CellButtons {
  white-space: nowrap;
  text-align: right;
}

.Portal .FollowUpTitleHeader .Row .CellButtons {
  padding: 4px 0px 0px 0px;
}

.Portal .FollowUpTitleHeader .Row .CellButtons a,
.Portal .FollowUpTitleHeader .Row .CellButtons input[type="button"],
.analytics .TitleTable .Row .CellButtons a {
  vertical-align: middle;
}

.Portal .FollowUpTitleHeader .Row .CellButtons a,
.Portal .FollowUpTitleHeader .Row .CellButtons input[type="button"] {
  min-width: 80px;
}

.Portal .FollowUpTitleHeader .Row .CellButtons a:not(:first-child),
.Portal
  .FollowUpTitleHeader
  .Row
  .CellButtons
  input[type="button"]:not(:first-child),
.analytics .TitleTable .Row .CellButtons a:not(:first-child) {
  margin-left: 8px;
}

.TitleContainer .Title .buttons a#btn-show-more,
.content-body .toolbar .buttons a#btn-show-more,
.Portal .FollowUpTitleHeader .Row .CellButtons a#btn-show-more {
  display: none;
  width: 36px;
  height: 36px;
  min-width: auto;
}

.TitleContainer
  .Title
  .buttons
  span#select-show-more-button.ui-selectmenu-button.ui-button,
.content-body
  .toolbar
  .buttons
  span#select-show-more-button.ui-selectmenu-button.ui-button,
.Portal
  .FollowUpTitleHeader
  .Row
  .CellButtons
  span#select-show-more-button.ui-selectmenu-button.ui-button {
  visibility: hidden;
  width: 0px;
  height: 0px;
  border: 0px;
  margin: 0px;
  padding: 0px;
}

ul#select-show-more-menu {
  width: auto !important;
  min-width: 222px;
  text-align: left;
}

ul#select-show-more-menu li.ui-menu-item:first-of-type {
  display: none;
}

ul#select-show-more-menu li.ui-menu-item div.ui-menu-item-wrapper {
  padding: 12px 12px 12px 11px;
  display: flex;
  align-items: center;
}

ul#select-show-more-menu
  li.ui-menu-item
  div.ui-menu-item-wrapper.btn-delete-request,
ul#select-show-more-menu li.ui-menu-item div.ui-menu-item-wrapper.deleteButton {
  color: var(--destructive);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon {
  background-color: var(--foreground);
  background-image: none;
  width: 18px;
  height: 18px;
  padding: 0px;
  border: none;
  margin-right: 8px;
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-refresh,
ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.refreshLink,
ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.refreshButton {
  -webkit-mask-image: var(--icon-rotate-cw);
  mask-image: var(--icon-rotate-cw);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-show-help {
  -webkit-mask-image: var(--icon-help-circle);
  mask-image: var(--icon-help-circle);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-show-graph {
  -webkit-mask-image: var(--icon-workflow);
  mask-image: var(--icon-workflow);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-show-comments {
  -webkit-mask-image: var(--icon-messages-square);
  mask-image: var(--icon-messages-square);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-switch-access,
ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-search-mode {
  -webkit-mask-image: var(--icon-arrow-left-right);
  mask-image: var(--icon-arrow-left-right);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-cancel-request,
ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-cancel-action {
  -webkit-mask-image: var(--icon-ban);
  mask-image: var(--icon-ban);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-delete-request,
ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.deleteButton {
  background-color: var(--destructive);
  -webkit-mask-image: var(--icon-trash-2);
  mask-image: var(--icon-trash-2);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-cancel-assign {
  -webkit-mask-image: var(--icon-user-round-x);
  mask-image: var(--icon-user-round-x);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-accept-action {
  -webkit-mask-image: var(--icon-user-round-check);
  mask-image: var(--icon-user-round-check);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-start-action {
  -webkit-mask-image: var(--icon-circle-play);
  mask-image: var(--icon-circle-play);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-refine-search {
  -webkit-mask-image: var(--icon-search);
  mask-image: var(--icon-search);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.saveGridLink {
  -webkit-mask-image: var(--icon-save);
  mask-image: var(--icon-save);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-csv,
ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.exportGridLink,
ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.exportButton {
  -webkit-mask-image: var(--icon-file-up);
  mask-image: var(--icon-file-up);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.importButton {
  -webkit-mask-image: var(--icon-file-down);
  mask-image: var(--icon-file-down);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.viewGridLink {
  -webkit-mask-image: var(--icon-table);
  mask-image: var(--icon-table);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.editColumnsLink {
  -webkit-mask-image: var(--icon-grid-2x2-plus);
  mask-image: var(--icon-grid-2x2-plus);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.createGraphLink,
ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.editGraphLink {
  -webkit-mask-image: var(--icon-chart-bar);
  mask-image: var(--icon-chart-bar);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.btn-print {
  -webkit-mask-image: var(--icon-printer);
  mask-image: var(--icon-printer);
}

ul#select-show-more-menu div.ui-menu-item-wrapper div.icon.newButton {
  -webkit-mask-image: var(--icon-calendar-plus);
  mask-image: var(--icon-calendar-plus);
}

.TitleContainer .Title .buttons {
  align-content: end;
  text-align: end;
}

.TitleContainer .Title .buttons a:not(:first-child) {
  margin-left: 6px;
}

.TitleContainer .Title .sub-label {
  margin-top: 9px;
  margin-bottom: 10px;
  margin-left: 4px;
}

.TitleContainer .Title .buttons a svg,
.Portal .FollowUpTitleHeader .Row .CellButtons a svg,
.content-body .toolbar .buttons a svg,
.Portal .FollowUpTitleHeader .Row .CellButtons input[type="button"] svg {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  stroke-width: 1.5;
  margin-right: 6px;
}

.TitleContainer .Title .buttons a svg.lucide-ellipsis,
.content-body .toolbar .buttons a svg.lucide-ellipsis,
.Portal .FollowUpTitleHeader .Row .CellButtons a svg.lucide-ellipsis {
  margin-right: 0px;
}

/* FormSection */

.FormSection {
  display: grid;
  grid-template-columns: 34% 66%;
  margin-top: 32px;
}

#action-timeline.FormSection {
  margin-top: 0px;
}

.portal-dialog .FormSection {
  margin: 32px 40px;
}

.FormSection .Titles {
  padding: 4px 12px 4px 4px;
}

.FormSection .Titles .MainTitle {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.6px;
}

.FormSection .Titles .SubTitle {
  color: var(--muted-foreground);
  padding-top: 8px;
  margin-right: 100px;
  line-height: 18px;
}

.FormSection:not(.timeline-section) .Cards {
  display: grid;
  gap: 1.5rem;
}

.FormSection.timeline-section .Cards {
  display: grid;
  background-color: var(--background);
  border-radius: var(--radius-card);
  border: solid 1px var(--border);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

.FormSection:not(.timeline-section) .Cards .action-card,
.FormSection .Cards .data-card {
  background-color: var(--background);
  border-radius: var(--radius-card);
  border: solid 1px var(--border);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

.FormSection .Cards .action-card[onclick] {
  cursor: pointer;
}

.FormSection:not(.timeline-section) .Cards .action-card {
  padding: 24px;
}

.FormSection.timeline-section .Cards .action-card {
  padding: 6px 24px 0px 24px;
}

.FormSection.timeline-section .Cards .action-card:first-of-type {
  padding: 24px 24px 0px 24px;
}

.FormSection.timeline-section .Cards .action-card:last-of-type {
  padding: 6px 24px 24px 24px;
}

.FormSection.timeline-section .Cards .action-card:only-child {
  padding: 24px;
}

.FormSection.timeline-section .Cards .TimeLimitCard {
  padding: 6px 24px 24px 24px;
}

.FormSection.timeline-section .Cards .TimeLimitCard:only-child {
  padding: 24px;
}

.FormSection .Cards .action-card .Name {
  display: flex;
  align-items: center;
  min-height: 24px;
  width: fit-content;
}

.FormSection.timeline-section .Cards .action-card .Name {
  width: auto;
  justify-content: space-between;
}

.FormSection .Cards .action-card .Name .Wrapper {
  display: flex;
  align-items: center;
}

.FormSection .Cards .action-card .Name .icon-ai,
.FormSection .Cards .action-card .Name .lucideIcon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  color: var(--foreground);
  stroke-width: 1.5;
  margin-right: 12px;
}

.FormSection .Cards .action-card .Name .icon-ai {
  -webkit-mask-image: var(--icon-ai);
  mask-image: var(--icon-ai);
  background-color: var(--foreground);
  background-image: none;
}

.FormSection .Cards .action-card .Name .Label {
  color: var(--foreground);
  font-weight: 600;
  font-size: 17px;
}

.FormSection .Cards .action-card .Name .Label .LinkCallingCard {
  color: var(--foreground);
  text-decoration: none;
}

.FormSection .Cards .action-card .Name .Date {
  color: var(--muted-foreground);
  margin-left: 24px;
  display: flex;
  align-items: center;
}

.FormSection .Cards .action-card .Info {
  display: flex;
  align-items: center;
  min-height: 16.5px;
  width: fit-content;
  color: var(--muted-foreground);
  margin: 6px 0px 0px 32px;
}

.FormSection.timeline-section .Cards .action-card .Info {
  align-items: normal;
  width: auto;
  margin: 6px 0px 0px 0px;
  justify-content: space-between;
}

.FormSection .Cards .action-card .Info .Link,
.FormSection .Cards .action-card .Info .LinkCallingCard {
  color: var(--muted-foreground);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}

.FormSection .Cards .action-card .Info .lucide-clock-1 {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  stroke-width: 1.5;
  color: var(--warning);
  margin-left: 6px;
}

.FormSection .Cards .action-card .Info .Wrapper {
  display: flex;
}

.FormSection .Cards .action-card .Info .Transition {
  border-left: 1px dashed var(--foreground);
  height: 36px;
  margin-left: 9px;
  margin-right: 22px;
}

#ActionsHistory.FormSection .Cards .action-card .Info .Transition {
  height: 40px;
}

#ActionsHistory.FormSection .Cards .action-card:last-of-type .Info .Transition {
  height: auto;
}

.FormSection .Cards .action-card:last-of-type .Info .Transition {
  visibility: hidden;
  height: auto;
}

.FormSection .Cards .action-card .Info .Tag {
  padding: 4px 14px;
  border-radius: var(--radius-tag);
  min-width: 40px;
  height: 16.5px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.FormSection .Cards .action-card .Info .Tag.Cancelled {
  color: var(--cancelled-foreground);
  background-color: var(--cancelled);
  border: 1px solid var(--cancelled);
}

.FormSection .Cards .action-card .Extra,
.FormSection.timeline-section .Cards .TimeLimitCard .Extra {
  display: flex;
  justify-content: end;
  align-items: center;
}

.FormSection .Cards .action-card .Extra {
  margin-top: 12px;
  min-height: 36px;
}

.FormSection .Cards .action-card .Extra .TimeLimit,
.FormSection.timeline-section .Cards .TimeLimitCard .Extra .TimeLimit {
  border: 1px solid var(--border);
  padding: 4px 14px;
  border-radius: var(--radius-tag);
  display: flex;
  align-items: center;
}

.FormSection .Cards .action-card .Extra .TimeLimit .Label,
.FormSection.timeline-section .Cards .TimeLimitCard .Extra .TimeLimit .Label {
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
}

.FormSection .Cards .action-card .Extra .TimeLimit .lucide-clock-1,
.FormSection.timeline-section
  .Cards
  .TimeLimitCard
  .Extra
  .TimeLimit
  .lucide-clock-1 {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  stroke-width: 1.5;
  color: var(--warning);
  margin-left: 6px;
}

.FormSection .Cards .action-card .Extra .Buttons {
  margin-left: 24px;
}

.FormSection .Cards .action-card .Extra .Buttons .Button {
  min-width: 100px;
}

.FormSection .Cards .FormCard {
  background-color: var(--background);
  border-radius: var(--radius-card);
  border: solid 1px var(--border);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

.FormSection .Cards .FormCard .Content {
  padding: 24px 36px 32px 36px;
  overflow-y: hidden;
  overflow-x: hidden;
  min-height: 36px;
}

.FormSection .Cards .FormCard .Field {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
}

.FormSection .Cards .FormCard .Field:last-of-type {
  padding-bottom: 0px;
}

.FormSection .Cards .FormCard .Field > .Label {
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.FormSection .Cards .FormCard .Field .Value {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.FormSection .Cards .FormCard .Field div#userSettingsPopup-last-access-date {
  display: unset;
}

.FormSection
  .Cards
  .FormCard
  .Field
  div#userSettingsPopup-last-access-date::first-letter {
  text-transform: capitalize;
}

.FormSection .Cards .FormCard .Field .Value .Label,
.FormSection .Cards .FormCard .Field .Value .label-checkbox-radio {
  margin-right: 12px;
}

.FormSection .Cards .FormCard .Field .Value .InputText + input[type="button"] {
  margin-left: 12px;
}

.FormSection .Cards .FormCard .Field .Value span.Label {
  margin-left: 12px;
  font-weight: 400;
  color: var(--muted-foreground);
}

.FormSection .Cards .FormCard .Field .Value span.Label + input {
  margin-right: 12px;
}

.FormSection .Cards .FormCard .Field .Value .CheckBox,
.FormSection .Cards .FormCard .Field .Value input[type="radio"] {
  margin: 3px 8px 3px 0px;
}

.FormSection .Cards .FormCard .Field .Value .CheckBox#late {
  width: 14px;
  min-width: 14px;
  max-width: 14px;
}

.FormSection .Cards .FormCard .Field .Value .CheckBox:disabled,
.FormSection .Cards .FormCard .Field .Value .CheckBox:disabled + label,
.FormSection
  .Cards
  .FormCard
  .Field
  .Value
  .CheckBox:disabled
  + .label-checkbox-radio,
.FormSection .Cards .FormCard .Field .Value input[type="radio"]:disabled,
.FormSection
  .Cards
  .FormCard
  .Field
  .Value
  input[type="radio"]:disabled
  + label,
.FormSection
  .Cards
  .FormCard
  .Field
  .Value
  input[type="radio"]:disabled
  + .label-checkbox-radio {
  opacity: 0.3;
}

.FormSection .Cards .FormCard .Field .Value .search-form-data .CheckBox {
  margin-top: 8px;
}

.FormSection .Cards .FormCard .Field .Value .InputText {
  font-weight: 400;
  color: var(--foreground);
  vertical-align: middle;
  padding: 8px 12px;
  height: 36px;
  width: 100%;
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
}

.FormSection .Cards .FormCard .Field .Value .ui-selectmenu-button.ui-button {
  width: 20em;
}

.FormSection .Paging {
  grid-column-start: 2;
  margin-top: 16px;
  text-align: right;
}

.FormSection .Paging .Page,
.FormSection .Paging .Link {
  background-color: var(--background);
  text-decoration: none;
  font-weight: 400;
  padding: 6px 2px;
  min-width: 30px;
  margin-left: 8px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  background-clip: padding-box;
}

.FormSection .Paging .Page {
  color: var(--primary-foreground);
  background-color: var(--primary);
}

.FormSection .Paging .Link {
  color: var(--muted-foreground);
  cursor: pointer;
}

.FormSection .Paging .Link.svgPadding {
  padding: 5px 2px 2px 2px;
}

.FormSection .Paging .Link .lucideIcon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  stroke-width: 1.5;
}

.FormSection .Cards .data-card .Content {
  margin: 0px 0px -48px 0px;
  padding: 24px 20px 36px 24px;
  overflow-y: hidden;
  overflow-x: hidden;
  min-height: 48px;
  max-height: 375px;
}

.Portal.follow-up .FormSection .Cards .data-card.error-card .Content {
  max-height: none;
}

.portal-dialog .FormSection .Cards .data-card .Content {
  min-height: 423px;
  max-height: 423px;
}

.FormSection .Cards .data-card .Content:hover {
  overflow-y: auto;
}

.FormSection .Cards .data-card .Overlay {
  height: 48px;
  width: 98%;
  position: relative;
  bottom: 0px;
  left: 0px;
  border-bottom-left-radius: var(--radius-card);
  background: linear-gradient(
    to bottom,
    hsla(var(--background-hsl), 0),
    hsla(var(--background-hsl), 1)
  );
}

.FormSection .Cards .data-card .DataList {
  width: 96%;
}

.FormSection .Cards .data-card .DataList tr td.CellValue {
  padding-bottom: 20px;
}

.FormSection .Cards .data-card .DataList tr td span.Label {
  color: var(--muted-foreground);
}

.FormSection .Cards .data-card .DataList tr td a.LinkDownload {
  color: var(--foreground);
  margin-top: 8px;
  min-height: 16.5px;
  display: flex;
  align-items: center;
  text-decoration: none;
  width: fit-content;
  font-weight: 500;
}

.FormSection .Cards .data-card .DataList tr td div.Label {
  color: var(--foreground);
  margin-top: 8px;
  min-height: 16.5px;
  max-height: 175px;
  word-break: break-word;
  white-space: break-spaces;
  font-weight: 500;
}

.FormSection .Cards .data-card .DataList tr td div.Label.Input {
  padding: 8px 12px;
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
  background-color: var(--subdued);
  overflow-y: hidden;
  overflow-x: hidden;
  line-height: 18px;
  font-weight: 400;
}

.FormSection .Cards .data-card .DataList tr td div.Label.Input:hover {
  overflow-y: auto;
}

.FormSection .Cards .data-card .DataList tr td a.LinkDownload .lucideIcon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-right: 4px;
  opacity: 0.8;
  stroke-width: 1.5;
}

.portal-dialog
  .FormSection
  .Cards
  .data-card
  .DataList
  tr
  td
  a.LinkDownload
  .lucideIcon:hover {
  opacity: 1;
}

.FormSection
  .Cards
  .action-card
  .assignee-list-content
  .filter-container
  .InputText {
  height: 34px;
  padding: 8px;
  border: 0px solid var(--input);
  color: var(--muted-foreground-500);
  background-color: var(--background);
  vertical-align: middle;
  width: 250px;
  box-shadow: none !important;
}

.FormSection
  .Cards
  .action-card
  .assignee-list-content
  .filter-container
  .InputText:focus {
  color: var(--foreground);
}

.FormSection .Cards .action-card .assignee-list-content .filter-container {
  display: inline-block;
  border: 1px solid var(--input);
  border-radius: var(--radius-input);
  padding: 0px 4px 0px 12px;
  margin-bottom: 16px;
}

.FormSection .Cards .action-card .assignee-list-content .filter-container {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.FormSection
  .Cards
  .action-card
  .assignee-list-content
  .filter-container
  svg.lucideIcon {
  width: 20px;
  height: 20px;
  color: var(--muted-foreground);
  vertical-align: middle;
  stroke-width: 1.5;
}

.FormSection
  .Cards
  .action-card
  .assignee-list-content
  .filter-container:has(.InputText:focus) {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, var(--ring) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.FormSection
  .Cards
  .action-card
  .assignee-list-content
  .filter-container
  svg:hover {
  color: var(--foreground);
}

.FormSection
  .Cards
  .action-card
  .assignee-list-content
  .filter-container
  .InputText::placeholder {
  color: var(--muted-foreground);
  opacity: 0.5;
}

.FormSection .Cards .action-card .assignee-list-content .Select {
  font-weight: 400;
  color: var(--foreground);
  background-color: var(--background);
  padding: 4px;
  border-radius: var(--radius-input);
  border-color: var(--input);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  outline: none;
  overflow: auto;
  width: 100%;
  min-height: 241px;
}

.FormSection .Cards .action-card .assignee-list-content .Select option {
  padding: 6px 12px;
  color: var(--foreground);
  font-weight: 400;
  border-radius: var(--radius-input);
  outline: none;
}

.FormSection .Cards .action-card .assignee-list-content .Select option:hover {
  background-color: var(--accent);
}

.FormSection .Cards .action-card .assignee-list-content .Select option:checked {
  background-color: var(--border);
}

.FormSection .Cards .action-card .assignee-list-footer {
  margin-top: 16px;
  text-align: end;
}

.FormSection .Cards .action-card .assignee-list-footer input {
  min-width: 100px;
}

/* FormSection */

/****************************************************************/
/*************************** List *******************************/
/****************************************************************/

/********************** Lists Filter ********************/

/* TODO: MOVE TO FORM SECTION */
.Portal .list-body tr .CellDate .InputText {
  font-weight: 400;
  color: var(--foreground);
  vertical-align: middle;
  padding: 8px 12px;
  height: 36px;
  width: 120px;
  min-width: 100px;
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
}

.Portal .list-body tr .CellDate .InputText {
  width: 105px !important;
}

/* TODO: MOVE TO FORM SECTION */

.Portal
  .search-form-data
  .Row
  .CellValue
  select[name="typecompare"]
  + span.ui-selectmenu-button.ui-button,
.analytics
  .search-form-data
  .Row
  .CellValue
  select[name="typecompare"]
  + span.ui-selectmenu-button.ui-button {
  width: 125px;
}

.Portal
  .search-form-data
  .Row
  .CellValue
  select[name="namedata"]
  + span.ui-selectmenu-button.ui-button,
.Portal
  .search-form-data
  .Row
  .CellValue
  select[name="dummy_namedata"]
  + span.ui-selectmenu-button.ui-button,
.analytics
  .search-form-data
  .Row
  .CellValue
  select[name="namedata"]
  + span.ui-selectmenu-button.ui-button,
.analytics
  .search-form-data
  .Row
  .CellValue
  select[name="dummy_namedata"]
  + span.ui-selectmenu-button.ui-button {
  width: 160px;
}

.Portal
  .search-form-data
  .Row
  .CellValue
  select[name="typesql"]
  + span.ui-selectmenu-button.ui-button,
.Portal
  .search-form-data
  .Row
  .CellValue
  select[name="dummy_typesql"]
  + span.ui-selectmenu-button.ui-button,
.analytics
  .search-form-data
  .Row
  .CellValue
  select[name="typesql"]
  + span.ui-selectmenu-button.ui-button,
.analytics
  .search-form-data
  .Row
  .CellValue
  select[name="dummy_typesql"]
  + span.ui-selectmenu-button.ui-button {
  width: 50px;
}

.SelectmenuOverflow-items-3 {
  max-height: 86px; /* 3 items */
}

.SelectmenuOverflow-items-4 {
  max-height: 114px; /* 4 items */
}

.SelectmenuOverflow-items-5 {
  max-height: 143px; /* 5 items */
}

.SelectmenuOverflow-items-6 {
  max-height: 171px; /* 6 items */
}

.SelectmenuOverflow-items-8 {
  max-height: 228px; /* 8 items */
}

.SelectmenuOverflow-items-10 {
  max-height: 285px; /* 10 items */
}

.SelectmenuOverflow-items-12 {
  max-height: 342px; /* 12 items */
}

.SelectmenuOverflow-items-16 {
  max-height: 456px; /* 16 items */
}

/* TODO: MOVE TO FORM SECTION */
.Portal .SearchButton .Row .Cell .Button,
.analytics .SearchButton .Row .Cell .Button {
  vertical-align: top;
}

.Portal .FormSection .DateOption input#dateToInput,
.analytics .FormSection .DateOption input#date_close {
  margin-left: 12px;
}

.content-body .filters-button {
  display: none;
}

.filters-button svg.lucide {
  width: 18px;
  height: 18px;
  stroke-width: 1.5px;
  margin-right: 8px;
}

.content-body .toolbar {
  display: grid;
  width: auto;
  min-width: var(--content-min-width);
  max-width: var(--content-width);
}

.content-body .filters {
  display: grid;
  gap: 12px;
  width: auto;
  min-width: var(--content-min-width);
  max-width: var(--content-width);
}

.content-body .buttons {
  text-align: right;
}

.Portal.search-result .content-body .toolbar .buttons {
  display: flex;
  justify-self: right;
}

.content-body .toolbar .buttons div.icon.back-to-chart {
  -webkit-mask-image: var(--icon-chevron-left);
  mask-image: var(--icon-chevron-left);
  width: 20px;
  height: 20px;
  background-color: var(--foreground);
}

.content-body .toolbar .buttons a#btn-back-to-chart {
  padding-left: 6px;
}

.content-body .buttons a:not(:first-child),
.content-body .buttons span:not(:first-child) {
  margin-left: 8px;
}

.content-body .filters .filter.Status {
  text-align: right;
}

.content-body .filters .InputText {
  font-weight: 400;
  color: var(--foreground);
  vertical-align: middle;
  padding: 8px 12px;
  height: 36px;
  width: 120px;
  min-width: 100px;
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
  background-color: var(--background);
}

.content-body .filters .InputText:first-child {
  margin-right: 12px;
}

.content-body .filters select + span.ui-selectmenu-button.ui-button {
  background-color: var(--background);
  max-width: 250px;
}

/********************** Lists Header ********************/

.Portal .LinksMenuDrilldownEmbed {
  position: absolute;
  top: 10px;
  left: 10px;
}

.Portal .LinksMenuDrilldownEmbed a {
  color: var(--foreground);
  text-decoration: none;
}

.Portal .LinksMenuDrilldownEmbed a:hover {
  text-decoration: underline;
}

/********************** Lists Footer ********************/

.content-body .list-footer {
  width: 100%;
  min-width: var(--content-table-min-width);
  max-width: var(--content-table-width);
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.content-body .list-footer .Counter {
  color: var(--muted-foreground);
  height: 32px;
  align-content: center;
}

.content-body .list-footer .Paging {
  white-space: nowrap;
}

.content-body .list-footer .Paging .Content {
  overflow: hidden;
  float: right;
  width: fit-content;
}

.content-body .list-footer .Paging .Content .Page,
.content-body .list-footer .Paging .Content .Link {
  background-color: var(--background);
  text-decoration: none;
  font-weight: 400;
  padding: 6px 2px;
  min-width: 30px;
  margin-left: 8px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  background-clip: padding-box;
}

.content-body .list-footer .Paging .Content .Link {
  color: var(--muted-foreground);
  cursor: pointer;
}

.content-body .list-footer .Paging .Content .Page {
  color: var(--primary-foreground);
  background-color: var(--primary);
}

.content-body .list-footer .Paging .Content .Link.svgPadding {
  padding: 5px 2px 0.5px 2px;
}

.content-body .list-footer .Paging .Content .Link svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

/************************ Lists  ************************/

.Portal .list-body-container,
.analytics .list-body-container {
  min-height: 38px;
  margin-top: 16px;
  border-radius: var(--radius-input);
  border: solid 1px var(--border);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  background-color: var(--background);
  overflow-y: auto;
  overflow-x: hidden;
}

.Portal.portal-popup .list-body-container {
  margin-top: 0px;
}

.Portal.group-by-category .list-body-container:not(:first-of-type) {
  margin-top: 2rem;
}

.Portal .list-body-container:hover,
.analytics .list-body-container:hover {
  overflow-x: auto;
}

.Portal.search-result.portal-popup .list-body-container {
  margin-top: 0px;
}

.list-body-container .CellText a.LinkDownload {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 500;
}

.Portal .list-body {
  width: 100%;
  table-layout: fixed;
}

.list-body-border-bottom {
  border-bottom: 1px solid var(--border);
}

.Portal .list-body .Row {
  font-size: 12px;
  position: sticky;
  top: 0px;
  z-index: 1;
}

.Portal .list-body .Row .CellHeaderText .Label,
.Portal .list-body .Row .CellHeaderDate .Label {
  color: var(--muted-foreground);
}

.Portal .list-body .Row .ClickableCellHeaderText,
.Portal .list-body .Row .ClickableCellHeaderDate,
.Portal .list-body .Row .ClickableCellHeaderFile,
.Portal .list-body .Row .ClickableCellHeaderCheckbox,
.Portal .list-body .Row .ClickableCellHeaderNumeric,
.Portal .list-body .Row .CellHeaderText,
.Portal .list-body .Row .CellHeaderDate,
.TableContent .Row .CellHeaderText,
.TableContent .Row .CellHeaderDate,
.TableContent .Row .CellHeaderNumeric,
.TableContent .Row .CellHeaderFile,
.TableContent .Row .ClickableCellHeaderText {
  padding: 12px 0px 12px 16px;
  border-collapse: collapse;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-weight: 500;
  background-color: var(--background);
  border-top: none;
}

.Portal .list-body .Row .ClickableCellHeaderCheckbox {
  padding: 0px 0px 0px 12px;
}

.Portal .list-body .Row .ClickableCellHeaderText .Link,
.Portal .list-body .Row .ClickableCellHeaderFile .Link,
.Portal .list-body .Row .ClickableCellHeaderDate .Link,
.Portal .list-body .Row .ClickableCellHeaderCheckbox .Link,
.Portal .list-body .Row .ClickableCellHeaderNumeric .Link,
.TableContent .Row .ClickableCellHeaderText .Link {
  text-decoration: none;
  color: var(--muted-foreground);
}

.Portal .list-body .Row .ClickableCellHeaderText .Link:hover,
.Portal .list-body .Row .ClickableCellHeaderFile .Link:hover,
.Portal .list-body .Row .ClickableCellHeaderDate .Link:hover,
.Portal .list-body .Row .ClickableCellHeaderCheckbox .Link:hover,
.Portal .list-body .Row .ClickableCellHeaderNumeric .Link:hover,
.TableContent .Row .ClickableCellHeaderText .Link:hover {
  color: var(--foreground);
}

.Portal .list-body .Row .ClickableCellHeaderText .SortIcon,
.Portal .list-body .Row .ClickableCellHeaderDate .SortIcon,
.Portal .list-body .Row .ClickableCellHeaderFile .SortIcon,
.Portal .list-body .Row .ClickableCellHeaderCheckbox .SortIcon,
.Portal .list-body .Row .ClickableCellHeaderNumeric .SortIcon,
.TableContent .Row .ClickableCellHeaderText .SortIcon {
  margin-left: 4px;
  vertical-align: middle;
}

.Portal .list-body .Row .ClickableCellHeaderCheckbox .Checkbox {
  height: 15px;
  margin-left: 8px;
  margin-top: 5px;
}

.Portal .list-body .SectionRow {
  background-color: #f7f7f7;
  background-image: url("images/back.gif");
}

.Portal .list-body .SectionRow .Cell {
  padding-left: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  white-space: nowrap;
}

.Portal .list-body .SectionRow .Label {
  font-weight: bold;
}

.Portal
  table.list-body
  tr.ListRow
  td:not(.CellHeaderText):not(.CellHeaderNumeric):not(.CellHeaderDate):not(
    .CustomFormatDate
  ):not(.CellHeaderFile),
.Portal
  table.list-body
  tr.ListRow.Selected
  td:not(.CellHeaderText):not(.CellHeaderNumeric):not(.CellHeaderDate):not(
    .CustomFormatDate
  ):not(.CellHeaderFile),
table.TableContent
  tr.Row
  td:not(.CellHeaderText):not(.CellHeaderNumeric):not(.CellHeaderDate):not(
    .CustomFormatDate
  ):not(.CellHeaderFile):not(.ClickableCellHeaderText) {
  white-space: nowrap;
  padding: 12px 0px 12px 16px;
  vertical-align: middle;
  color: var(--foreground);
  border-top: 1px solid var(--border);
  height: 27px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.portal-back {
  margin-top: 12px;
}

.portal-back .back-link {
  text-decoration: none;
  color: var(--muted-foreground);
  padding-left: 16px;
  display: flex;
  align-items: center;
}

.portal-back .back-link:hover {
  color: var(--foreground);
}

.portal-back .back-link .back-icon {
  width: 20px;
  height: 20px;
  -webkit-mask-image: var(--icon-arrow-left);
  mask-image: var(--icon-arrow-left);
  background-color: var(--foreground);
  background-image: none;
  opacity: 0.8;
  cursor: pointer;
}

.portal-back .back-link .back-icon:hover {
  opacity: 1;
}

/* search-result: Follow-up of actions in progress  */

.cell-header-grid,
.cell-grid {
  width: 820px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  max-width: 800px;
  min-width: 700px;
}

.grid-header-row,
.grid-body-row {
  display: grid;
  grid-template-columns: 35% 25% 20% 20%;
  gap: 8px;
  border-width: 1px 1px 0px 1px;
  border-style: solid;
  border-color: var(--border);
  padding: 12px 12px;
}

.grid-header-row {
  background-color: var(--subdued);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
  border-top-left-radius: var(--radius-input);
  border-top-right-radius: var(--radius-input);
}

.grid-body-row {
  background-color: var(--background);
}

.grid-body-row:last-of-type {
  border-width: 1px 1px 1px 1px;
  border-bottom-left-radius: var(--radius-input);
  border-bottom-right-radius: var(--radius-input);
}

.grid-header-cell {
}

.grid-body-cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-content: center;
}

.grid-body-cell .LinkCallingCard,
.grid-body-cell .LinkCallingCard:hover {
  color: var(--foreground);
  font-weight: 500;
  text-decoration: none;
}

.Portal .list-body tr .CellText.DelegationButton {
  padding: 12px 0px 12px 8px !important;
  text-overflow: unset !important;
  overflow: unset !important;
}

.TextOverflow {
  text-overflow: ellipsis;
  overflow: hidden;
}

.ForceImageDimension {
  height: 20px;
  width: 20px;
  margin-right: 6px;
}
/* Until here */

.Portal .list-body tr:nth-of-type(2) td,
.TableContent tr:nth-of-type(2) td {
  border-top: none !important;
}

.Portal .list-body thead + tbody tr:nth-of-type(1) td {
  border-top: none !important;
}

.Portal .list-body thead + tbody tr:nth-of-type(2) td {
  border-top: 1px solid var(--border) !important;
}

.Portal .list-body thead + tbody tr:nth-of-type(2) td tr td {
  border-top: 0 !important;
}

.Portal .list-body .ListRow .CellCancelButton {
  padding-left: 0px !important;
}

.Portal .list-body .ProcessVersion {
  width: 200px;
}

.Portal .list-body .ListRow .CellText .RequestNumber {
  text-overflow: ellipsis;
  overflow: hidden;
}

.Portal
  table.list-body
  tr.ListRow:hover
  td:not(.CellHeaderText):not(.CellHeaderNumeric):not(.CellHeaderDate):not(
    .CustomFormatDate
  ):not(.CellHeaderFile),
.Portal
  table.list-body
  tr.ListRow.Selected
  td:not(.CellHeaderText):not(.CellHeaderNumeric):not(.CellHeaderDate):not(
    .CustomFormatDate
  ):not(.CellHeaderFile),
table.TableContent
  tr.Row:hover
  td:not(.CellHeaderText):not(.CellHeaderNumeric):not(.CellHeaderDate):not(
    .CustomFormatDate
  ):not(.CellHeaderFile):not(.ClickableCellHeaderText) {
  background-color: var(--accent);
}

.Portal .list-body .ListRow .CellText .InputText {
  margin-top: -2px;
  margin-bottom: -2px;
  white-space: nowrap;
  border-color: var(--border);
  border-style: solid;
  border-width: 1px;
  font-weight: normal;
  color: var(--foreground);
  vertical-align: middle;
}

.Portal .list-body .ListRow .CellText .DelayedDate,
.Portal .list-body .ListRow .CellDate .DelayedDate,
.Portal .list-body .ListRow .CellNumeric .DelayedDate {
  display: inline-flex;
  align-items: center;
}

.Portal .list-body .ListRow .CellText .NotStartedDate {
  color: var(--not-started-date);
  vertical-align: middle;
  white-space: nowrap;
}

.Portal .list-body .ListRow .CellText .ProgressDate {
  color: var(--open);
  vertical-align: middle;
  white-space: nowrap;
}

.Portal table.list-body tr.ListRow td .Link,
.Portal table.list-body tr.ListRow td .CallingCardLink,
.Portal table.list-body tr.ListRow.Selected td .Link,
.Portal table.list-body tr.ListRow.Selected td .CallingCardLink {
  color: var(--foreground);
  font-weight: 500;
  text-decoration: none;
  margin-right: 4px;
}

.Portal .list-body .ListRow .CellText .Link .Icon {
  border-style: none;
  vertical-align: middle;
}

.Portal .list-body tr td.CellViewButton {
  padding: 0px 0px 0px 16px !important;
  text-align: end;
}

.Portal .list-body .ListRow .CellText .BoldLink {
  color: var(--foreground);
  text-decoration: none;
  font-weight: bold;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.Portal .list-body .ListRow .CellText .BoldLink:hover {
  text-decoration: none;
  color: var(--foreground);
}

.Portal .list-body .ListRow .CellText .calImg {
  vertical-align: middle;
  margin-left: 5px;
}

.Portal .list-body .ListRow .CellDate .NotStartedDate {
  color: var(--not-started-date);
  vertical-align: middle;
  white-space: nowrap;
}

.Portal .list-body .ListRow .CellDate .ProgressDate {
  color: var(--open);
  vertical-align: middle;
  white-space: nowrap;
}

.Portal .list-body .ListRow .CellDate .ProgressDate ~ table {
  border-color: var(--open) !important;
}

.Portal
  .list-body
  .ListRow
  .CellDate
  .ProgressDate
  ~ table
  > tbody
  > tr
  > td
  > table
  > tbody
  > tr
  > td {
  background-color: var(--open) !important;
}

.Portal .list-body .ListRow .CellDate .LabelGray {
  color: var(--muted-foreground);
}

.Portal .list-body .ListRow .CellDate .Link {
  color: var(--foreground);
  text-decoration: none;
}

.Portal .list-body .ListRow .CellDate .Link:hover {
  text-decoration: underline;
  color: var(--foreground);
}

.Portal .list-body .ListRow .CellDate .Link .Icon {
  margin-right: 5px;
  border-style: none;
  vertical-align: middle;
}

.Portal .list-body .ListRow .CellDate .CallingCardLink {
  color: var(--foreground);
  text-decoration: none;
  vertical-align: middle;
}

.Portal .list-body .ListRow .CellDate .CallingCardLink:hover {
  text-decoration: underline;
}

.Portal .list-body .ListRow .CellDate .BoldLink {
  color: var(--foreground);
  text-decoration: none;
  font-weight: bold;
  vertical-align: middle;
}

.Portal .list-body .ListRow .CellDate .BoldLink:hover {
  text-decoration: underline;
}

.Portal .list-body .ListRow .CellDate .calImg {
  vertical-align: middle;
  margin-left: 5px;
}

.Portal .list-body .ListRow .CellNumeric .InputText {
  margin-top: -2px;
  margin-bottom: -2px;
  white-space: nowrap;
  border-color: var(--border);
  border-style: solid;
  border-width: 1px;
  font-weight: normal;
  color: var(--foreground);
  vertical-align: middle;
}

.Portal .list-body .ListRow .CellNumeric .NotStartedDate {
  color: var(--not-started-date);
  vertical-align: middle;
  white-space: nowrap;
}

.Portal .list-body .ListRow .CellNumeric .ProgressDate {
  color: var(--open);
  vertical-align: middle;
  white-space: nowrap;
}

.Portal .list-body .ListRow .CellNumeric .LabelGray {
  color: var(--muted-foreground);
}

.Portal .list-body .ListRow .CellNumeric .Link {
  color: var(--foreground);
  text-decoration: none;
}

.Portal .list-body .ListRow .CellNumeric .Link:hover {
  text-decoration: underline;
  color: var(--foreground);
}

.Portal .list-body .ListRow .CellNumeric .Link .Icon {
  margin-right: 5px;
  border-style: none;
  vertical-align: middle;
}

.Portal .list-body .ListRow .CellNumeric .CallingCardLink {
  color: var(--foreground);
  text-decoration: none;
  vertical-align: middle;
}

.Portal .list-body .ListRow .CellNumeric .CallingCardLink:hover,
.Portal .list-body .ListRow .CellNumeric .BoldLink:hover {
  text-decoration: underline;
}

.Portal .list-body .ListRow .CellNumeric .BoldLink {
  color: var(--foreground);
  text-decoration: none;
  font-weight: bold;
  vertical-align: middle;
}

.Portal .list-body .ListRow .CellNumeric .calImg {
  vertical-align: middle;
  margin-left: 5px;
}

.Portal .list-body .ListRow .CellCheckbox,
.Portal .list-body .ListRow.Selected .CellCheckbox {
  padding: 12px 0px 12px 12px !important;
}

.Portal .list-body .ListRow .CellCheckbox input.CheckBox,
.Portal .list-body .ListRow.Selected .CellCheckbox input.CheckBox {
  margin-top: 6px;
}

.Portal .list-body .ListRow .CellCheckbox input.CheckBox:disabled {
  opacity: 0.3;
}

.Portal .list-body .ListRow.Selected .CellText .LabelGray {
  color: var(--muted-foreground);
}

.Portal .list-body .ListRow.Selected .CellText .Link .Icon {
  margin-right: 5px;
  border-style: none;
  vertical-align: bottom;
}

/****************************************************************/
/************************* dashboard ***************************/
/****************************************************************/

body.dashboard .TableContentHeader .lucideIcon {
  width: 36px;
  height: 36px;
  cursor: pointer;
  stroke-width: 1.5;
}

.Portal .list-body svg.lucideIcon {
  width: 20px;
  height: 20px;
  color: var(--foreground);
  opacity: 0.8;
  cursor: pointer;
  stroke-width: 1.5;
  margin-top: 4px;
}

.Portal .list-body svg.lucideIcon.lucide-file-down {
  margin-top: -2px;
}

.Portal .list-body svg.lucideIcon:hover {
  opacity: 1;
}

body.dashboard svg.lucide-clock-1,
.Portal .list-body svg.lucide-clock-1 {
  margin-top: 0px !important;
  color: var(--warning) !important;
  cursor: auto !important;
  margin-left: 6px;
}

body.dashboard .title-container {
  width: auto;
  height: 40px;
  min-width: var(--content-min-width);
  max-width: var(--content-width);
  margin: 24px 0px 24px 0px;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

body.dashboard .title-container .title .label {
  font-size: 28px;
  font-weight: 600;
  vertical-align: middle;
  letter-spacing: -0.025em;
  display: inline-block;
}

body.dashboard .title-container .buttons {
  display: flex;
  align-items: center;
  justify-content: right;
  padding-right: 48px;
}

body.dashboard .title-container .buttons #saveHomeAsViewButton {
  display: none;
}

.Portal.processes .list-body-container .TableContent .Row .CellText:last-child {
  padding: 12px 32px 12px 16px !important;
  text-align: end;
}

.Portal.processes
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child
  a {
  margin-right: 0px !important;
}

.Portal.processes
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child
  a:last-child {
  margin-left: 24px;
}

.Portal.processes .list-body-container svg.lucideIcon {
  width: 20px;
  height: 20px;
  color: var(--foreground);
  opacity: 0.8;
  cursor: pointer;
  stroke-width: 1.5;
  margin-top: 4px;
}

/* widgets */

.widgets {
  width: auto;
  min-width: var(--content-min-width);
  max-width: var(--content-width);
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.widgets.no-time-limit {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.follow-up .widgets {
  margin-bottom: 32px;
}

.widgets#widgets-supervisor {
  margin-top: -20px;
}

.widgets .widget {
  border: 1px solid var(--border);
  background-color: var(--background);
  border-radius: var(--radius-card);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

.widgets .widget[onclick] {
  cursor: pointer;
}

.widgets .widget[onclick]:hover {
  opacity: 0.9;
}

.widgets.primary .widget {
  border: 1px solid var(--primary);
  background-color: var(--primary);
}

.widgets:not(.primary) .widget[onclick]:hover {
  background-color: var(--accent);
}

.widgets .widget .Title {
  padding: 16px 24px 8px 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.widgets .widget .Title .Label {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
  line-height: 18.5px;
}

.widgets.primary .widget .Title .Label {
  color: var(--primary-foreground);
}

.widgets .widget .Title .Label .LinkCallingCard {
  color: var(--foreground);
  font-weight: 500;
  text-decoration: none;
  margin-left: 4px;
}

.widgets.primary .widget .Title .Label .LinkCallingCard {
  color: var(--primary-foreground);
}

.widgets .widget .Title svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  color: var(--muted-foreground);
}

.widgets .widget .Content {
  padding: 0px 24px 16px 24px;
  display: flex;
  flex-direction: column;
}

.widgets .widget .Content .main-label {
  color: var(--foreground);
  font-weight: 700;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

body.dashboard .widgets .widget .Content .main-label {
  font-size: 24px;
  line-height: 32px;
}

body.dashboard .widgets .widget.skeleton .Content .main-label {
  width: 45%;
  height: 32px;
  background-color: var(--border);
  border-radius: var(--radius);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

body.follow-up .widgets .widget .Content .main-label {
  font-size: 18px;
  line-height: 28px;
}

.widgets.primary .widget .Content .main-label {
  color: var(--primary-foreground);
}

.widgets .widget .Content .main-label.Input {
  font-size: 14px;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
  background-color: var(--subdued);
  min-height: 16.5px;
  max-height: 195px;
  word-break: break-word;
  white-space: break-spaces;
  align-items: normal;
  overflow-y: auto;
}

.widgets .widget .Content .main-label .Link {
  color: var(--foreground);
  text-decoration: none;
}

.widgets.primary .widget .Content .main-label .Link {
  color: var(--primary-foreground);
}

.widgets .widget .Content .main-label .lucide-clock-1 {
  color: var(--warning);
  margin-left: 6px;
  width: 20px;
  height: 20px;
}

.widgets .widget .Content .sub-label {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-top: 8px;
  display: flex;
  align-items: center;
}

.widgets.primary .widget .Content .sub-label {
  color: var(--primary-foreground);
}

.widgets .widget.skeleton .Content .sub-label {
  width: 80%;
  height: 16px;
  background-color: var(--border);
  border-radius: var(--radius);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.widgets .widget .Content .sub-label .LinkCallingCard {
  color: var(--muted-foreground);
  font-weight: 500;
  text-decoration: none;
}

.widgets .widget .Content .sub-label #OngoingActionsSubByMe,
.widgets .widget .Content .sub-label #OngoingActionsSubByTeam {
  display: none;
  margin-right: 16px;
}

.widgets .widget .Content .sub-label-overdue {
  color: var(--warning);
  font-size: 12px;
  font-weight: 400;
  margin-top: 8px;
  line-height: 16px;
}

.widgets .widget .Content .sub-label[onclick],
.widgets .widget .Content .sub-label-overdue[onclick] {
  font-weight: 500;
  cursor: pointer;
}

.widgets .widget .Content .sub-label[onclick]:hover,
.widgets .widget .Content .sub-label-overdue[onclick]:hover {
  opacity: 0.9;
}

/************* TableContentHeader **************/

body.dashboard .TableContentHeader {
  width: 100%;
  min-width: var(--content-table-min-width);
  max-width: var(--content-table-width);
  margin-bottom: 2rem;
  padding: 0.5rem 0.5rem 1.25rem 0.5rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

body.dashboard .TableContentHeader .Cell {
  white-space: nowrap;
}

body.dashboard .TableContentHeader .Row td:first-child {
  min-width: 36px;
}

body.dashboard .TableContentHeader .Row td:nth-child(3) {
  text-align: end;
}

body.dashboard .TableContentHeader .Row td:nth-child(3) svg {
  width: 24px;
  height: 24px;
  color: var(--muted-foreground);
  transition: 0.3s;
}

body.dashboard .TableContentHeader .Row td:nth-child(3) svg.chevron-up {
  transform: rotate(180deg);
}

body.dashboard .TableContentHeader .Row td:nth-child(3) svg:hover {
  color: var(--foreground);
}

body.dashboard .TableContentHeader .Cell .Image {
  display: inline;
  width: 32px;
  height: 32px;
  opacity: 0.9;
}

body.dashboard .TableContentHeader .Cell .Title {
  font-weight: 500;
  font-size: 20px;
  padding-left: 1.5rem;
  text-decoration: none;
  line-height: 1.75rem;
  letter-spacing: -0.01em;
}

body.dashboard .TableContentHeader .Cell .WarningTitle {
  color: var(--warning);
  font-weight: 500;
  padding-left: 4px;
  text-decoration: none;
}

body.dashboard .TableContentHeader .Cell .TitleDescription {
  color: var(--muted-foreground);
  padding-left: 1.5rem;
  font-size: 12px;
  line-height: 1.75rem;
}

/************* DivContentHeader **************/

body.dashboard .DivContentHeader {
  min-width: var(--content-table-min-width);
  max-width: var(--content-table-width);
  display: grid;
  grid-template:
    "SectionIcon SectionTitle SectionToggle"
    "SectionIcon SectionSubtitle SectionToggle";
  grid-template-columns: max-content;
  margin-bottom: 32px;
  padding: 0px 8px;
  cursor: pointer;
}

body.dashboard .DivContentHeader .SectionIcon {
  grid-area: SectionIcon;
  padding-top: 3px;
}

body.dashboard .DivContentHeader .SectionIcon .lucideIcon,
body.dashboard .DivContentHeader .SectionIcon .Image {
  width: 20px;
  height: 20px;
  cursor: pointer;
  stroke-width: 2;
}

body.dashboard .DivContentHeader .SectionTitle {
  grid-area: SectionTitle;
  font-weight: 500;
  font-size: 20px;
  padding-left: 16px;
  text-decoration: none;
  line-height: 24px;
  letter-spacing: -0.01em;
}

body.dashboard .DivContentHeader .SectionSubtitle {
  grid-area: SectionSubtitle;
  color: var(--muted-foreground);
  padding-left: 16px;
  font-size: 12px;
  line-height: 24px;
}

body.dashboard .DivContentHeader .SectionToggle {
  grid-area: SectionToggle;
  align-content: center;
  text-align: end;
}

body.dashboard .DivContentHeader .SectionToggle .lucideIcon {
  width: 22px;
  height: 22px;
  color: var(--muted-foreground);
  transition: 0.3s;
  cursor: pointer;
  stroke-width: 1.5;
}

body.dashboard .DivContentHeader .SectionToggle .lucideIcon:hover {
  color: var(--foreground);
}

body.dashboard .DivContentHeader .SectionToggle .lucideIcon.chevron-up {
  transform: rotate(180deg);
}

/************* TableContent ******************/

.TableContent {
  width: 100%;
  table-layout: fixed;
}

.TableContent:not(:last-child) {
  margin-bottom: 1.5rem;
}

.TableContent .CategoryHeader {
  color: var(--muted-foreground);
  background-color: var(--background);
  font-weight: 500;
}

#ProcessesTableHeader .CellHeaderText:first-child,
#divCategory .CellHeaderText:first-child,
#divCategory .ClickableCellHeaderText:first-child,
.TableContent .CategoryHeader .CategoryOpen:first-child {
  width: 50%;
}

.TableContent
  .Row
  .CellText:has(span.Version, svg.lucide-star, svg.lucide-help-circle) {
  text-overflow: unset !important;
  overflow: unset !important;
}

.TableContent .CategoryHeader .Category,
.TableContent .CategoryHeader .CategoryOpen {
  font-size: 12px;
  padding: 12px 0px 12px 16px;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  background-color: var(--background);
}

.TableContent .CategoryHeader:hover .Category,
.TableContent .CategoryHeader:hover .CategoryOpen {
  background-color: var(--accent);
}

.TableContent .CategoryHeader .Category {
  border-bottom: 0px;
}

.TableContent .Row .CellHeaderText .Label,
.TableContent .Row .CellHeaderDate .Label,
.TableContent .Row .CellHeaderNumeric .Label,
.TableContent .Row .CellHeaderFile .Label {
  font-size: 12px;
  color: var(--muted-foreground);
}

.TableContent .Row .CellText .InputText {
  margin-top: -2px;
  margin-bottom: -2px;
  white-space: nowrap;
  border-color: var(--border);
  border-style: solid;
  border-width: 1px;
  font-weight: normal;
  color: var(--foreground);
  vertical-align: middle;
}

.TableContent .Row .CellText .DelayedDate,
.TableContent .Row .CellDate .DelayedDate,
.TableContent .Row .CellNumeric .DelayedDate {
  display: inline-flex;
  align-items: center;
}

.TableContent .Row .CellText .NotStartedDate {
  color: var(--not-started-date);
  vertical-align: middle;
  white-space: nowrap;
}

.TableContent .Row .CellText .ProgressDate {
  color: var(--open);
  vertical-align: middle;
  white-space: nowrap;
}

.TableContent .Row .CellText .Version,
.Portal .list-body .ListRow .CellText .Version {
  font-size: 12px;
  color: var(--version-foreground);
  background-color: var(--background);
  border: 1px solid var(--version);
  border-radius: var(--radius-tag);
  padding: 4px 14px;
  min-width: 40px;
  display: inline-block;
  text-align: center;
}

.TableContent .Row .CellText .InTest,
.Portal .list-body .ListRow .CellText .InTest {
  font-size: 12px;
  color: var(--test-foreground);
  background-color: var(--test);
  border: 1px solid var(--test);
  border-radius: var(--radius-tag);
  padding: 4px 14px;
  min-width: 40px;
  display: inline-block;
  text-align: center;
  margin-left: 12px;
}

.TableContent .Row .CellText .Label svg {
  width: 20px;
  height: 20px;
}

.TableContent .Row .CellText .LabelGray {
  color: var(--muted-foreground);
}

.TableContent .Row .CellText .Link .Icon {
  border-style: none;
  vertical-align: middle;
}

.TableContent .Row .CellText .Link {
  color: var(--foreground);
  font-weight: 500;
  text-decoration: none;
  margin-right: 4px;
}

.TableContent .Row .CellText .RequestNumber {
  text-overflow: ellipsis;
  overflow: hidden;
}

.TableContent .Row .CellText .Link:hover {
  text-decoration: none;
}

.TableContent .Row .CellDate .InputText {
  margin-top: -2px;
  margin-bottom: -2px;
  white-space: nowrap;
  border-color: var(--border);
  border-style: solid;
  border-width: 1px;
  font-weight: normal;
  color: var(--foreground);
  vertical-align: middle;
}

.TableContent .Row .CellDate .NotStartedDate {
  color: var(--not-started-date);
  vertical-align: middle;
  white-space: nowrap;
}

.TableContent .Row .CellDate .ProgressDate {
  color: var(--open);
  vertical-align: middle;
  white-space: nowrap;
}

.TableContent .Row .CellDate .ProgressDate ~ table {
  border: 1px solid var(--open);
}

.TableContent
  .Row
  .CellDate
  .ProgressDate
  ~ table
  > tbody
  > tr
  > td
  > table
  > tbody
  > tr
  > td {
  background-color: var(--open);
}

.TableContent .Row .CellDate .LabelGray {
  color: var(--muted-foreground);
}

.TableContent .Row .CellDate .Link {
  color: var(--foreground);
  text-decoration: none;
}

.TableContent .Row .CellDate .Link:hover {
  text-decoration: underline;
  color: var(--foreground);
}

.TableContent .Row .CellDate .Link .Icon {
  border-style: none;
  vertical-align: middle;
}

.TableContent .Row .CellNumeric .InputText {
  margin-top: -2px;
  margin-bottom: -2px;
  white-space: nowrap;
  border-color: var(--border);
  border-style: solid;
  border-width: 1px;
  font-weight: normal;
  color: var(--foreground);
  vertical-align: middle;
}

.TableContent .Row .CellNumeric .NotStartedDate {
  color: var(--not-started-date);
  vertical-align: middle;
  white-space: nowrap;
}

.TableContent .Row .CellNumeric .ProgressDate {
  color: var(--open);
  vertical-align: middle;
  white-space: nowrap;
}

.TableContent .Row .CellNumeric .LabelGray {
  color: var(--muted-foreground);
}

.TableContent .Row .CellNumeric .Link,
.TableContent .Row .CellNumeric .Link:hover {
  color: var(--foreground);
  text-decoration: none;
}

.TableContent .Row .CellNumeric .Link .Icon {
  border-style: none;
  vertical-align: middle;
}

body.dashboard .list-body-container {
  min-height: 38px;
  margin-bottom: 24px;
  border-radius: var(--radius-input);
  border: solid 1px var(--border);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  background-color: var(--background);
  overflow-y: auto;
  overflow-x: auto;
}

body.dashboard .list-body-container:first-of-type {
  margin-top: -8px;
}

body.dashboard .list-body-container.list-body-max-height {
  max-height: 573px;
  overflow-y: auto;
}

body.dashboard
  .list-body-container.list-body-max-height
  .TableContent
  .Row:first-child,
.Portal.processes .list-body-container .TableContent .Row:first-child {
  font-size: 12px;
  position: sticky;
  top: 0px;
  z-index: 1;
}

body.dashboard .list-body-container svg.lucideIcon {
  width: 20px;
  height: 20px;
  color: var(--foreground);
  opacity: 0.8;
  cursor: pointer;
  stroke-width: 1.5;
  margin-top: 4px;
}

body.dashboard .list-body-container svg.lucideIcon.lucide-file-down {
  margin-top: -2px;
}

body.dashboard .list-body-container svg.lucideIcon:hover {
  opacity: 1;
}

body.dashboard
  div#FAVORITE_LIST
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child,
body.dashboard
  div#PROCESS_LIST
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child,
body.dashboard
  div#CUSTOM_VIEWS_LIST
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child {
  padding: 12px 32px 12px 16px !important;
  text-align: end;
}

body.dashboard
  div#FAVORITE_LIST
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child
  a,
body.dashboard
  div#PROCESS_LIST
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child
  a,
body.dashboard
  div#CUSTOM_VIEWS_LIST
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child
  a {
  margin-right: 0px !important;
}

body.dashboard
  div#FAVORITE_LIST
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child
  a:last-child,
body.dashboard
  div#PROCESS_LIST
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child
  a:last-child,
body.dashboard
  div#CUSTOM_VIEWS_LIST
  .list-body-container
  .TableContent
  .Row
  .CellText:last-child
  a:last-child {
  margin-left: 24px;
}

div#PROCESS_INSTANCE_REQUESTED_LIST .CellText .mt-min-5px,
body.Portal.requests .CellText .mt-min-5px {
  margin-top: -5px !important;
}

/************ Home Popups Feature *************/

body.dashboard .HomeViewPopup {
  padding: 0;
  background-color: transparent;
  text-align: center;
  overflow: hidden;
}

body.dashboard .HomeViewPopup .HomeViewPopupFrame {
  width: 100%;
  height: 100%;
}

body.dashboard .HomeViewPopup .loading-indicator-wrapper-popup {
  position: absolute;
  top: 45px;
  left: 5%;
  right: 5%;
  margin: auto;
  bottom: 120px;
  height: 32px;
  width: 90%;
  text-align: center;
  opacity: 0.4;
}

body.dashboard
  .HomeViewPopup
  .loading-indicator-wrapper-popup
  .AjaxLoader
  .AjaxLoaderCenter
  .AjaxImage {
  top: auto;
}

body.dashboard .HomeViewPopupDialog {
  z-index: 1700 !important;
}

#saveHomeViewWindow #saveHomeViewWindowContent {
  position: relative;
  padding: 36px 0px 0px 0px;
}

#saveHomeViewWindow .saveHomeViewRow {
  padding: 0px 0px 16px 0px;
  line-height: 24px;
  margin: 0px 24px 0px 24px;
}

#saveHomeViewWindow .saveHomeViewRowCheckbox {
  padding: 0px 0px 12px 0px;
  line-height: 24px;
  margin: 0px 24px 0px 24px;
}

#saveHomeViewWindow .saveHomeViewRowCheckboxLast {
  padding-bottom: 24px;
}

#saveHomeViewWindow .saveHomeViewRowCheckbox label.checkBox {
  margin-right: 8px;
  width: 12px;
  height: 12px;
  border-width: 1px;
  border-color: var(--muted-foreground);
  appearance: none;
  border-style: solid;
  background-color: var(--background);
  border-radius: var(--radius-input);
  padding: 0px;
}

#saveHomeViewWindow
  .saveHomeViewRowCheckbox
  label.checkBox.ui-checkboxradio-checked.ui-state-active {
  background-image: var(--icon-checkbox-checked);
  background-color: var(--muted-foreground);
}

#saveHomeViewWindow .saveHomeViewRow .labelSaveHomeView {
  color: var(--muted-foreground);
  margin-top: 0px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  line-height: 22px;
  min-width: 120px;
  width: auto;
}

#saveHomeViewWindow .saveHomeViewRowCheckbox .labelSaveHomeView {
  color: var(--muted-foreground);
  margin-top: 0px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  line-height: 22px;
  min-width: 80px;
  width: auto;
}

#saveHomeViewWindow .saveHomeViewRow input,
#saveHomeViewWindow .saveHomeViewRow select {
  color: var(--foreground);
  vertical-align: middle;
  display: inline-block;
  min-width: 450px;
  box-shadow: none;
  overflow: hidden;
  outline: none;
  height: 34px;
  border: 1px solid var(--input);
  border-radius: var(--radius-input);
  padding: 8px 12px;
}

#saveHomeViewWindow
  .saveHomeViewRow
  #saveHomeReplaceViewName
  + span.ui-selectmenu-button.ui-button {
  width: 418px;
}

#saveHomeViewWindow .saveHomeViewButtonsRow {
  overflow: hidden;
  width: 100%;
  text-align: end;
  padding: 16px 24px 24px 24px;
  border-top: solid 1px var(--border);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  box-sizing: border-box;
}

#saveHomeViewWindow .saveHomeViewButtonsRow .jqxButton {
  float: right;
  margin-left: 12px;
}

#saveHomeViewWindow input.error {
  border: 1px solid var(--warning) !important;
}

#saveHomeViewWindow label.error {
  position: absolute;
  color: var(--warning-foreground);
  background: var(--warning);
  border: 1px solid var(--warning);
  display: block;
  text-align: center;
  z-index: 100;
  margin: 0px 10px;
  padding: 4px;
}

#saveHomeViewWindow label.error[for="saveHomeViewName"] {
  width: 260px;
  top: 74px;
  left: 230px;
  height: auto;
}

#saveHomeViewWindow label.error:after,
div#saveHomeViewWindow label.error:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

#saveHomeViewWindow label.error:after {
  border-color: rgba(247, 139, 131, 0);
  border-bottom-color: var(--warning);
  border-width: 5px;
  margin-left: -5px;
}

#saveHomeViewWindow label.error:before {
  border-color: rgba(217, 82, 82, 0);
  border-bottom-color: var(--warning);
  border-width: 6px;
  margin-left: -6px;
}

.saveHomeViewWindowArrowTop:after,
.saveHomeViewWindowArrowTop:before {
  bottom: 100%;
  left: 100px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  display: none;
}

.saveHomeViewWindowArrowTop:after {
  border-color: var(--subdued);
  opacity: 0;
  border-bottom-color: #fafafa;
  border-width: 15px;
  margin-left: -15px;
  display: none;
}

.saveHomeViewWindowArrowTop:before {
  border-color: rgba(170, 170, 170, 0);
  border-bottom-color: rgba(170, 170, 170, 0.23);
  border-width: 16px;
  margin-left: -16px;
  display: none;
}

.saveHomeViewWindowArrowRight:after,
.saveHomeViewWindowArrowRight:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  display: none;
}

.saveHomeViewWindowArrowRight:after {
  border-color: var(--subdued);
  opacity: 0;
  border-left-color: #fafafa;
  border-width: 15px;
  margin-top: -15px;
  display: none;
}

.saveHomeViewWindowArrowRight:before {
  border-color: rgba(170, 170, 170, 0);
  border-left-color: rgba(170, 170, 170, 0.23);
  border-width: 17px;
  margin-top: -17px;
  display: none;
}

/***************** Import/Export view Feature *****************/

#importExportViewWindowContent {
  padding: 32px 0px 0px 0px;
}

#importExportUploadFileLabel {
  padding: 0px 0px 16px 0px;
  margin: 0px 24px 0px 24px;
  display: block;
  color: var(--muted-foreground);
}

#importExportUploadFile {
  padding: 0px 0px 24px 0px;
  margin: 0px 24px 0px 24px;
  display: block;
}

#importExportButtons {
  width: 100%;
  text-align: end;
  padding: 16px 24px 24px 24px;
  border-top: solid 1px var(--border);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  box-sizing: border-box;
}

.importExportViewWindowArrowTop:after,
.importExportViewWindowArrowTop:before {
  bottom: 100%;
  left: 77px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  display: none;
}

.importExportViewWindowArrowTop:after {
  border-color: var(--subdued);
  opacity: 0;
  border-bottom-color: #fafafa;
  border-width: 15px;
  margin-left: -15px;
  display: none;
}

.importExportViewWindowArrowTop:before {
  border-color: rgba(170, 170, 170, 0);
  border-bottom-color: rgba(170, 170, 170, 0.23);
  border-width: 16px;
  margin-left: -16px;
  display: none;
}

/****************************************************************/
/************************* DialogPage ***************************/
/****************************************************************/

.portal-dialog .Header {
  margin: 24px 0px 0px 24px;
}

.portal-dialog .Header .Row .Cell .Title {
  font-size: 18px;
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: -0.025em;
  display: inline-block;
}

.portal-dialog .Header .Row .CellImage {
  padding-left: 15px;
  padding-right: 0px;
  padding-top: 14px;
  vertical-align: top;
  line-height: 14px;
  width: 48px;
  display: none;
}

.portal-dialog .Header .Row .CellImage .Image {
  vertical-align: top;
  width: 48px;
  padding: 0px;
}

.portal-dialog .HeaderError {
  padding-left: 25px;
}

.portal-dialog .ContentHeader {
  margin-top: 11px;
  margin-left: 15px;
  margin-right: 15px;
}

.portal-dialog .ContentHeader .Row .Cell {
  padding-top: 12px;
  padding-bottom: 2px;
  vertical-align: top;
}

.portal-dialog .ContentHeader .Row .Cell .Label {
  margin-left: 15px;
  margin-top: 14px;
}

.portal-dialog .ContentHeader .Row .Navigation {
  text-align: right;
  white-space: nowrap;
  padding: 2px;
}

.portal-dialog .ContentHeader .Row .Navigation .Link {
  color: var(--foreground);
  text-decoration: none;
}

.portal-dialog .ContentHeader .Row .Navigation .Link:hover {
  color: #00cf00;
  text-decoration: underline;
}

.portal-dialog .ContentHeader .Row .Navigation .Link:visited {
  color: var(--foreground);
  text-decoration: none;
}

.portal-dialog .ContentHeader .RowTitle .Title {
  padding-left: 4px;
  white-space: nowrap;
  vertical-align: top;
}

.portal-dialog .ContentHeader .RowTitle .Title .Label {
  font-size: 19px;
  color: var(--foreground);
  font-weight: bold;
}

.portal-dialog .Content {
  margin-top: 0px;
  margin-left: 25px;
}

.portal-dialog .Content .FormBody .Row {
  height: 43px;
}

.portal-dialog .Content .FormBody .Row .FieldValue .InputTextCustomWidth {
  height: 24px;
  border: 1px solid rgb(175, 175, 175);
}

.portal-dialog .Content .FormBody .Row .FieldValue .Button {
  height: 24px;
  padding: 2px 10px;
  margin-left: 15px;
}

.portal-dialog .Content .FormBody .Row .FieldValue .Select {
  color: var(--foreground);

  width: 299px;
  height: 198px;
}

.portal-dialog .Content .FormBody .Row .FieldValue .SelectCustomWidth {
  color: var(--foreground);
  width: 227px !important;
  margin-left: 4px;
}

.portal-dialog .Content .FormBody .Row .FieldValue .Link {
  color: var(--foreground);
  text-decoration: none;
  margin-left: 4px;
}

.portal-dialog .Content .FormBody .Row .FieldValue .Link:hover {
  text-decoration: underline;
}

.portal-dialog .Content .FormBody .Row .CellButtonTransfer {
  vertical-align: middle;
  padding: 0px 2px 0px 2px;
  white-space: nowrap;
}

.portal-dialog .Content .FormBody .Row .CellButtonTransfer .SwitchButton {
  text-align: center;
  padding: 8px 0px 8px 0px;
  min-width: 35px;
}

.portal-dialog .Footer {
  width: 100%;
  margin-top: 5px;
  padding-left: 15px;
  padding-bottom: 5px;
  width: 100%;
  height: 40px;
}

.portal-dialog .Footer .Row .Cell {
  text-align: right;
  padding-right: 25px;
  padding-top: 11px;
}

.portal-dialog .Footer .Row .Cell .Button {
  margin-left: 20px;
  float: right;
}

/****************************************************************/
/************************* CallingCard **************************/
/****************************************************************/

body.CallingCard {
  margin: 0px;
  padding: 0px;
  color: var(--foreground);
  border: 0px;
  background-color: var(--subdued);
}

.CallingCard .Header {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  width: 100%;
}

.CallingCard .Header .Row {
  line-height: 14px;
  color: var(--foreground);
}

.CallingCard .Header .Row .CellImage {
  padding-left: 15px;
  padding-right: 0px;
  padding-top: 14px;
  vertical-align: top;
  line-height: 14px;
  width: 48px;
  display: none;
}

.CallingCard .Header .Row .CellImage .Image {
  vertical-align: top;
  width: 48px;
  padding: 0px;
}

.CallingCard .Header .Row .Cell {
  padding-top: 22px;
  padding-bottom: 5px;
  padding-left: 10px;
  vertical-align: top;
  line-height: 14px;
  background-image: none;
  color: var(--foreground);
}

.CallingCard .Header .Row .Cell .Title {
  padding: 15px;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: -0.02em;
}

.CallingCard .FormBody {
  margin-top: 9px;
  margin-left: 25px;
  border-style: solid;
  border-width: 1px 0px 0px 0px;
  border-color: var(--border);
}

.CallingCard .FormBody .Row {
  height: 24px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.CallingCard .FormBody .Row .Cell .Separator {
  width: 95%;
}

.CallingCard .FormBody .Row .Caption {
  width: 100px;
  padding-left: 5px;
  border-style: solid;
  background-color: var(--muted);
  border-width: 0px 0px 1px 1px;
  border-color: var(--border);
}

.CallingCard .FormBody .Row .Caption .Label {
  font-weight: normal;
}

.CallingCard .FormBody .Row .Value {
  width: 252px;
  padding-left: 3px;
  border-style: solid;
  border-width: 0px 1px 1px 1px;
  border-color: var(--border);
  height: 26px;
  background-color: var(--background);
  color: var(--foreground);
}

.CallingCard .FormBody .Row .Value .Label {
  margin-left: 1px;
}

.CallingCard .FormBody .Row .Value .Link {
  margin-left: 1px;
  color: var(--foreground);
  text-decoration: none;
}

.CallingCard .FormBody .Row .Value .Link:hover {
  text-decoration: underline;
  color: var(--foreground);
}

.CallingCard .Footer {
  width: 100%;
  margin-top: 11px;
  padding-left: 15px;
  padding-bottom: 11px;
  padding-right: 12px;
  width: 100%;
  height: 40px;
}

.CallingCard .Footer .Row .Cell {
  text-align: right;
  padding-right: 15px;
  padding-top: 5px;
  border: none;
}

.CallingCard .Footer .Row .Cell .Button {
  margin-left: 1px;
}

/****************************************************************/
/************************* ViewGraphic **************************/
/****************************************************************/

body.ViewGraphic {
  border: 0px;
  padding: 16px 24px 16px 24px;
  min-height: 0px;
  min-width: 0px;
  background-color: var(--background);
}

.ViewGraphic .LinkParentPath {
  color: var(--foreground);
  text-decoration: none;
  text-align: center;
}

.ViewGraphic .GeneralTable {
  width: 100%;
  height: 100%;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable2Rows {
  margin: 0px;
  padding: 0px 25px;

  width: 100%;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable2Rows .Row {
  display: none;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable2Rows .Row .CellIcon {
  padding-left: 15px;
  padding-right: 0px;
  padding-top: 14px;
  vertical-align: top;
  line-height: 14px;
  width: 48px;
  display: none;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable2Rows .Row .CellIcon .Image {
  vertical-align: top;
  width: 48px;
  padding: 0px;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable2Rows .Row .CellTitle {
  padding-top: 25px;
  vertical-align: top;
  line-height: 14px;
  color: var(--foreground);
  display: none;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable2Rows .Row .CellTitle .Title {
  padding-left: 0px;
  display: none;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable2Rows .Row .CellSubTitle {
  text-align: right;
  padding-top: 0px;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable3Rows {
  margin-top: 8px;
  margin-left: 5px;
  margin-bottom: 5px;
  width: 100%;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable3Rows .Row .CellIcon {
  padding-left: 15px;
  padding-top: 14px;
  vertical-align: top;
  line-height: 14px;
  color: var(--foreground);
  width: 48px;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable3Rows .Row .CellIcon .Image {
  vertical-align: top;
  width: 48px;
  padding: 0px;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable3Rows .Row .CellTitle {
  padding-top: 12px;
  line-height: 14px;
  color: var(--foreground);
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable3Rows .Row .CellTitle .Title {
  padding-left: 5px;
  font-size: 11pt;
  font-weight: bold;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable3Rows .Row .CellSubTitle {
  text-align: right;
  padding-top: 15px;
  padding-right: 15px;
}

.ViewGraphic .GeneralTable .Row .Cell .TitleTable3Rows .Row .CellBackLink {
  padding-left: 5px;
}

.ViewGraphic
  .GeneralTable
  .Row
  .Cell
  .TitleTable3Rows
  .Row
  .CellBackLink
  .Link {
  vertical-align: top;
  color: var(--foreground);
  text-decoration: none;
}

.ViewGraphic
  .GeneralTable
  .Row
  .Cell
  .TitleTable3Rows
  .Row
  .CellBackLink
  .Link:hover {
  text-decoration: underline;
  color: var(--foreground);
}

.ViewGraphic
  .GeneralTable
  .Row
  .Cell
  .TitleTable3Rows
  .Row
  .CellBackLink
  .Link
  .Image {
  border-style: none;
  vertical-align: top;
}

.ViewGraphic .GeneralTable .Row .Cell .SubHeader {
  width: 100%;
}

.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus {
  font-weight: normal;
}

.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellStatus .LabelOpen {
  color: var(--open);
}

.ViewGraphic .GeneralTable .Row .Cell .SubHeader .Row .CellLinks .Label .Link {
  color: var(--foreground);
  text-decoration: none;
  margin-left: 15px;
}

.ViewGraphic
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .Link:hover {
  text-decoration: underline;
  color: var(--foreground);
}

.ViewGraphic
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .parent-wfd-zoom-btn {
  position: absolute;
  z-index: 1000000;
  margin-top: -20px;
  opacity: 0.9 !important;
}

.ViewGraphic
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .parent-wfd-zoom-btn
  img {
  text-decoration: none;
  border: 0;
  width: 18px;
  height: 18px;
}

.ViewGraphic
  .GeneralTable
  .Row
  .Cell
  .SubHeader
  .Row
  .CellLinks
  .Label
  .parent-wfd-zoom-btn:hover {
  opacity: 1 !important;
}

.ViewGraphic .GeneralTable .RowGraph {
  width: 100%;
  height: 100%;
}

.ViewGraphic .GeneralTable .RowGraph .Cell .GraphicalFollowUpFrame {
  width: 100%;
  height: 100%;
  padding: 0px;
  position: absolute;
  top: 0px;
  bottom: -23px;
  left: 0px;
  right: 0px;
}

.ViewGraphic .GeneralTable .RowGraph .Cell .DivGraph {
  background-color: transparent;
  border-top: 1px solid var(--border);
  padding: 0px;
  position: absolute;
  top: 56px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.ViewGraphic .GeneralTable .Row .Cell .Bottom {
  padding: 15px 27px 25px 20px;

  width: 100%;
  width: 100%;
  bottom: 0px;
  position: absolute;
}

.ViewGraphic .GeneralTable .Row .Cell .Bottom .Row .CellButtons {
  text-align: right;
}

.ViewGraphic .GeneralTable .Row .Cell .Bottom .Row .CellButtons .Button {
  margin-right: -2px;
  cursor: pointer;
}

/****************************************************************/
/*************************** WinHelp ****************************/
/****************************************************************/

body.WinHelp {
  border: 0px;
  padding: 16px 24px 24px 24px;
  height: 100%;
  min-width: 0px;
  box-sizing: border-box;
  background-color: var(--background);
}

.WinHelp .MainTable .Row .Cell .TitleTable {
  background-image: url("../images/bg_popup.jpg");
  background-repeat: repeat-x;
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 5px;
  width: 100%;
  display: none;
}

.WinHelp .MainTable .Row .Cell .TitleTable .Row .CellIcon {
  padding-left: 15px;
  padding-right: 0px;
  padding-top: 14px;
  vertical-align: top;
  line-height: 14px;
  width: 48px;
}

.WinHelp .MainTable .Row .Cell .TitleTable .Row .CellIcon .Image {
  vertical-align: top;
  width: 48px;
  padding: 0px;
}

.WinHelp .MainTable .Row .Cell .TitleTable .Row .CellTitle {
  padding-top: 17px;
  vertical-align: top;
  line-height: 14px;
  color: var(--foreground);
}

.WinHelp .MainTable .Row .Cell .TitleTable .Row .CellTitle .Title {
  padding-left: 15px;
  font-size: 11pt;
  font-weight: bold;
}

.WinHelp .MainTable .Row .Cell .TitleTable .Row .CellSubTitle {
  text-align: right;
  padding-top: 15px;
  padding-right: 15px;
}

.WinHelp .MainTable .Row .Cell .TitleTable .Row .CellSubTitle .Subtitle {
  padding-left: 10px;
}

.WinHelp .MainTable .RowContent .Cell .DivGraph {
  background-color: transparent;
  border-top: 1px solid var(--border);
  padding: 0px;
  position: absolute;
  top: 60px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.WinHelp .MainTable .Row .Cell .Bottom .Row .CellButtons {
  text-align: right;
  padding-right: 25px;
  padding-top: 5px;
}

.WinHelp .MainTable .Row .Cell .Bottom .Row .CellButtons .Button {
  margin-left: 3px;
  cursor: pointer;
}

/****************************************************************/
/************************* Error ********************************/
/****************************************************************/

.Error br {
  display: none;
}

.Error form {
  margin-left: 12px;
  margin-top: 15px;
  line-height: 18px;
}

.Error form br {
  display: inline;
}

.Error form input[type="text"] {
  height: 26px;
}

.Error .Title {
  color: var(--foreground);
  font-size: 32px;
  font-weight: 600;
  height: auto;
  display: block;
  letter-spacing: -0.025em;
  position: relative;
  padding-top: 8px;
}

.Error .Title img {
  display: none;
}

.Error .SubTitle {
  margin-top: 24px;
  font-size: 15px;
  font-weight: 400;
  height: auto;
  padding: 24px;
  display: block;
  background-color: var(--subdued);
  border-radius: var(--radius-input);
  border: solid 1px var(--border);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.Error .SubTitleClickable {
  cursor: pointer;
}

.Error .SubTitleClickable:hover {
  background-color: var(--accent) !important;
}

.Error #exception {
  margin-top: 24px;
}

.Error .SubTitle .Label {
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.Error .SubTitle .Content {
  margin-top: 16px;

  font-weight: 400;
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.Error .Detail {
  display: block;
  margin-top: 30px;
  margin-left: 11px;
  margin-bottom: 10px;
  word-break: break-word;
}

.Error .StackTrace {
  margin-left: 8px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--border);
  overflow: auto;
  padding: 20px;
  display: block;
  border-radius: var(--radius-input);
  word-break: break-word;
}

.Error .Link {
  display: none;
}

.Error .CustomBackButton {
  margin-top: 16px;
}

/****************************************************************/
/************************ analytics ****************************/
/****************************************************************/

.analytics .MainSection {
  width: 100%;
  min-width: var(--content-table-min-width);
  max-width: var(--content-table-width);
  margin: 32px auto 0px auto;
}

.analytics .MainSection .Title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 24px;
}

.analytics .ChartjsContainer {
  display: none;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.analytics .ChartjsContainer .Chartjs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 600px;
}

.analytics .ChartjsContainer .Chartjs .ChartjsBarColors {
  display: none;
  background-color: hsla(var(--primary-hsl), 0.7);
  border-color: var(--primary);
}

.analytics .ChartjsContainer .Chartjs canvas {
  padding: 0px 8px;
}

.analytics .TableHeader {
  width: 100%;
  min-width: var(--content-table-min-width);
  max-width: var(--content-table-width);
  margin: 32px auto 0px auto;
  display: grid;
  grid-template-columns: auto max-content;
}

.analytics .TableHeader .Row .Paging {
  width: 25%;
}

.analytics .TableHeader .Row .Paging .Link {
  color: var(--foreground);
}

.analytics .TableHeader .Label {
  color: var(--muted-foreground);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  margin-top: 6px;
}

.analytics .TableHeader .Label {
  margin-left: 4px;
  margin-right: 12px;
  vertical-align: middle;
}

.analytics .TableHeader .Select {
  white-space: nowrap;
  border-color: var(--input);
  border-style: solid;
  border-width: 1px;
  color: var(--foreground);
  background-color: var(--background);
  vertical-align: middle;
  margin-right: 3px;
  padding: 0.375rem;
  border-radius: 0.375rem;
}

.analytics .TableHeader .Select + .ui-selectmenu-button.ui-button {
  background-color: var(--background);
  width: 400px;
}

.analytics .ListNumberFound {
  width: 100%;
  min-width: var(--content-table-min-width);
  max-width: var(--content-table-width);
  margin: 48px auto 0px auto;
}

.analytics .ListNumberFound .Row {
  vertical-align: bottom;
  height: 20px;
}

.analytics .ListNumberFound .Row .Paging {
  text-align: right;
  white-space: nowrap;
  margin-right: 5px;
  margin-left: 11px !important;
}

.analytics .ListNumberFound .Row .Paging .Label {
  margin-left: 5px;
}

.analytics .ListNumberFound .Row .Paging .Page {
  margin-left: 5px;
}

.analytics .ListNumberFound .Row .Paging .Link {
  color: var(--foreground);
  text-decoration: none;
  margin-left: 5px;
}

.analytics .ListNumberFound .Row .Paging .Link:hover {
  text-decoration: underline;
  color: var(--foreground);
}

.analytics .ListNumberFound .Row .Cell {
  font-weight: normal;
}

.analytics .ListNumberFound .Row .Cell .AjaxImage {
  white-space: nowrap;
  padding-left: 15px;
}

.analytics .ListNumberFound .Rowf .Cell .AjaxLabel {
  white-space: nowrap;
  padding-left: 5px;
}

.analytics .dataTableContainer {
  width: auto;
  min-width: var(--content-min-width);
  max-width: var(--content-width);
  min-height: 38px;
  border-radius: var(--radius-input);
  border: solid 1px var(--border);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  background-color: var(--background);
  overflow: auto;
}

.analytics .dataTableContainer .TableData {
  width: 100%;
  min-width: var(--content-default-width);
  table-layout: fixed;
}

.analytics .dataTableContainer .TableData tr td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 12px 0px 12px 18px;
}

.analytics .dataTableContainer .TableData tbody tr .CellHeaderText,
.analytics .dataTableContainer .TableData tbody tr .CellHeaderDate,
.analytics .dataTableContainer .TableData tbody tr .CellHeaderNumeric {
  border-style: solid;
  border-collapse: collapse;
  border-width: 0px 0px 1px 0px;
  border-color: var(--border);
  background-repeat: repeat-x;
  font-weight: 500;
  background-color: var(--background);
  font-size: 12px;
  position: sticky;
  top: 0px;
  z-index: 1;
}

.analytics .dataTableContainer .TableData tbody tr .CellHeaderText .Link,
.analytics .dataTableContainer .TableData tbody tr .CellHeaderDate .Link,
.analytics .dataTableContainer .TableData tbody tr .CellHeaderNumeric .Link {
  text-decoration: none;
  color: var(--muted-foreground);
}

.analytics .dataTableContainer .TableData tbody tr .CellHeaderText .Link:hover,
.analytics .dataTableContainer .TableData tbody tr .CellHeaderDate .Link:hover,
.analytics
  .dataTableContainer
  .TableData
  tbody
  tr
  .CellHeaderNumeric
  .Link:hover {
  color: var(--foreground);
}

.analytics .dataTableContainer .TableData tbody tr .CellHeaderText .SortIcon,
.analytics .dataTableContainer .TableData tbody tr .CellHeaderDate .SortIcon,
.analytics
  .dataTableContainer
  .TableData
  tbody
  tr
  .CellHeaderNumeric
  .SortIcon {
  margin-left: 3px;
  vertical-align: middle;
}

.analytics .dataTableContainer .TableData tbody tr:not(:first-of-type) td {
  font-weight: normal;
  vertical-align: middle;
  color: var(--foreground);
  border-top: 1px solid var(--border);
  height: 27px;
}

.analytics .dataTableContainer .TableData tbody tr:not(:first-of-type):hover {
  background-color: var(--accent);
}

.analytics .dataTableContainer .TableData tbody tr:nth-of-type(2) td {
  border-top: none !important;
}

.analytics .dataTableContainer .TableData tbody tr:not(:first-of-type) td .Link,
.analytics
  .dataTableContainer
  .TableData
  tbody
  tr:not(:first-of-type)
  td
  .CallingCardLink {
  color: var(--foreground);
  font-weight: 500;
  vertical-align: middle;
  text-decoration: none;
}

.analytics .list-body {
  width: 100%;
  table-layout: fixed;
}

.analytics .list-body tr:hover td:not([class*="CellHeader"]) {
  background-color: var(--accent);
}

.analytics .list-body tr td {
  font-weight: normal;
  vertical-align: middle;
  color: var(--foreground);
  border-top: 1px solid var(--border);
  padding: 12px 0px 12px 18px;
}

.analytics .list-body tr:first-child td:not([class*="InformationCell"]) {
  border-style: solid;
  border-collapse: collapse;
  border-width: 0px 0px 1px 0px;
  border-color: var(--border);
  background-repeat: repeat-x;
  font-weight: 500;
  font-size: 12px;
  width: 200px;
}

.analytics .list-body tr:first-child td[class*="InformationCell"] {
  border-width: 0px;
}

.analytics .list-body tr:not(:nth-of-type(1)) td,
.analytics .list-body tr td.InformationCellText {
  height: 27px;
}

.analytics .list-body tr td.InformationCellText {
  width: 415px;
}

.analytics .list-body tr:nth-of-type(2) td:not([class*="InformationCell"]) {
  border-top: none !important;
}

.analytics .list-body tr:first-child td .Link {
  color: var(--muted-foreground);
}

.analytics .list-body tr:first-child td .Link:hover {
  color: var(--foreground);
}

.analytics .list-body tr td .Link,
.analytics .list-body tr td .CallingCardLink,
.analytics .list-body tr td.CellNumericLink,
.analytics .list-body tr td.InformationCellNumericLink {
  color: var(--foreground);
  font-weight: 500;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
}

.analytics .list-body tr td .Link:not([href]) {
  cursor: default;
  color: var(--muted-foreground) !important;
}

.analytics .list-body tr td .SortIcon {
  margin-left: 3px;
  vertical-align: middle;
}

/*************************** Chart Service **********************/

.analytics .DivLoadingMessage {
  display: none !important;
  height: 320px;
  width: 100%;
  border: solid 1px var(--border);
  text-align: center;
}

.analytics .LoadingMessage {
  height: 100%;
  width: 100%;
}

.analytics .LoadingMessage .Row .Cell {
  height: 100%;
  width: 100%;
  text-align: center;
}

.analytics .LoadingMessage .Row .Cell .Label {
  color: var(--foreground);
}

.analytics iframe[name="_SAVE_VIEW_TARGET"] {
  display: none;
}

.analytics iframe:not(.iframe-custom-banner) {
  background-color: var(--background);
  padding: 50px 0px 50px 208px;
  margin: 15px auto 0px auto !important;
  width: 899px;
  border-radius: var(--radius-input);
  border: solid 1px var(--border) !important;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

/****************************************************************/
/**************************** Footer ****************************/
/****************************************************************/
body.Footer {
  background-color: var(--background);
  overflow-x: hidden;
  overflow-y: hidden;
}

/****************************************************************/
/************************ Authentication ************************/
/****************************************************************/
.AuthenticationPage {
  height: 100%;
  text-align: center;
  color: var(--foreground);
}

.AuthenticationPage .Div {
  width: 25%;
  min-width: 300px;
  margin: 0 auto;
  position: relative;
  top: 25%;
}

.AuthenticationPage .Div .FieldSet {
  background-color: #f8f8f8;
  padding: 0;
}

.AuthenticationPage .Div .FieldSet .Table {
  padding: 5px;
  margin-top: 10px;
  color: var(--foreground);

  width: 100%;
}

.AuthenticationPage .Div .FieldSet .Table .Row td {
  padding: 5px 4px 10px;
}

.AuthenticationPage .Div .FieldSet .Table .Row .CellCaption {
  text-align: right;
}

.AuthenticationPage .Div .FieldSet .Table .Row .CellCaption span {
  margin-right: 15px;
}

.AuthenticationPage .Div .FieldSet .Table .Row .CellValue .InputUsername,
.AuthenticationPage .Div .FieldSet .Table .Row .CellValue .InputPassword {
  border: 1px solid var(--input);
  padding: 2px 4px;
}

.AuthenticationPage .Div .FieldSet .Footer {
  width: 100%;
}

.AuthenticationPage .Div .FieldSet .Footer .Row .Cell {
  text-align: right;
  padding: 15px;
}

.AuthenticationPage .Div .FieldSet .Footer .Row .Cell .Button {
  border-style: solid;
  border-color: var(--foreground);
  border-radius: var(--radius-input);
  border-width: 1px;
  color: var(--foreground);
  background-color: transparent;
  background-image: none;
  padding: 0.5rem 1rem;
  min-width: 80px;
}

.AuthenticationPage .Div .FieldSet .Footer .Row .Cell .ButtonCustomWidth {
  border-style: solid;
  border-color: var(--foreground);
  border-radius: var(--radius-input);
  border-width: 1px;
  color: var(--foreground);
  background-color: transparent;
  background-image: none;
  padding: 0.5rem 1rem;
}

.AuthenticationPage .Div .FieldSet .Footer .Row .Cell .Button:hover {
  color: var(--primary-foreground);
  background-color: var(--foreground);
  cursor: pointer;
}

.AuthenticationPage .Div .FieldSet .Footer .Row .Cell .ButtonCustomWidth:hover {
  color: var(--primary-foreground);
  background-color: var(--foreground);
  cursor: pointer;
}

/****************************************************************/
/************************ Comments ******************************/
/****************************************************************/

div#CommentsListBody {
  display: block;
  height: auto !important;
  width: 500px;
  border: 0 none;
  background-color: var(--background);
  overflow-y: auto;
  position: absolute;
  bottom: 157px;
  top: 49px;
}

.portal-dialog div#CommentsListBody {
  width: 100%;
  box-sizing: border-box;
  top: 52px;
}

/* Runtime comments popup. */

div#CommentsListBody.CommentsListBodyReadOnly,
div#CommentsListBody.CommentsListBodyPopUpReadOnly {
  bottom: 0px;
}

div.CommentsViewOpenedRightAlign {
  position: fixed;
  top: 0px;
  right: 0px;
  height: 100% !important;
  z-index: 8999;
  box-shadow: 1px 1px 10px -2px rgba(0, 0, 0, 0.2);
  background: var(--background);
  border-left: 1px solid var(--border);
}

div.CommentsViewOpenedRightAlign .TabImage {
  color: var(--foreground);
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 1002;
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  opacity: 0.8;
}

div.CommentsViewOpenedRightAlign .TabImage:hover {
  opacity: 1;
}

div.CommentsViewOpenedRightAlign .AjaxLoader {
  position: absolute;
  z-index: 1003;
  background-size: 100%;
  background-repeat: no-repeat;
}

div.CommentsViewOpenedRightAlign .AjaxLoaderHidden {
  display: none;
}

div.CommentsViewOpenedRightAlign #AjaxLoaderIndicator {
  top: 8px;
  right: 46px;
  height: 28px;
  width: 28px;
  -webkit-mask-image: var(--icon-loader);
  mask-image: var(--icon-loader);
  background-color: var(--foreground);
  background-image: none;
}

div.CommentsViewOpenedRightAlign #AjaxErrorIndicator {
  top: 14px;
  right: 52px;
  height: 16px;
  width: 16px;
  cursor: pointer;
  -webkit-mask-image: var(--icon-alert-triangle);
  mask-image: var(--icon-alert-triangle);
  background-color: var(--warning);
  background-image: none;
}

div.CommentsViewSubOpenedRightAlign {
  background: var(--background);
  width: 500px;
  height: 100%;
  z-index: 1001;
  overflow: hidden;
}

div.CommentsViewOpenedPopUpRightAlign {
  position: absolute;
  top: 0px;
  left: 0px;
  background-repeat: repeat-y;
  width: 500px;
  height: 100%;
  z-index: 1000;
}

.portal-dialog div.CommentsViewOpenedPopUpRightAlign {
  width: 100%;
  overflow: hidden;
}

/* Runtime comments popup. */

div.CommentsViewOpenedPopUpRightAlign .TabImage {
  position: absolute;
  top: 12px;
  right: 0px;
  z-index: 1002;
}

div.CommentsViewOpenedPopUpRightAlign .AjaxLoader {
  position: absolute;
  top: 15px;
  right: 45px;
  z-index: 1003;
  height: 20px;
  width: 20px;
}

div.CommentsViewOpenedPopUpRightAlign .AjaxLoaderHidden {
  display: none;
}

div.CommentsViewSubOpenedPopUpRightAlign {
  position: absolute;
  margin: 0px 0px 0px 0px;
  background-color: var(--background);
  width: 380px;
  height: 100%;
  z-index: 1001;
}

.portal-dialog div.CommentsViewSubOpenedPopUpRightAlign {
  width: 100%;
}

/* Runtime comments popup. */

div.CommentsViewClosedRightAlign {
  position: fixed;
  right: 36px;
  z-index: 1000;
  border: 1px solid var(--border);
  width: 20px;
  height: 20px;
  padding: 10px;
  border-radius: 25px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  cursor: pointer;
  background-color: var(--subdued);
}

.app-container.no-nav div.CommentsViewClosedRightAlign {
  top: 24px;
}

.app-container:not(.no-nav) div.CommentsViewClosedRightAlign {
  top: 75px;
}

div.CommentsViewClosedRightAlign:hover {
  background-color: var(--accent) !important;
}

div.CommentsViewClosedRightAlign .TabImage {
  z-index: 1002;
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  opacity: 0.8;
}

div.CommentsViewClosedRightAlign .TabImage:hover {
  opacity: 1;
}

div.CommentsViewOpenedHidden {
  display: none;
}

div.CommentsViewSubOpenedHidden {
  display: none;
}

div.CommentsViewClosedHidden {
  display: none;
}

/************************ CommentsListHeader ************************/

#CommentsViewOpened .CommentsListHeader {
  position: absolute;
  top: 0;
  height: 51px;
  width: 500px;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  padding: 16px 32px;
  background-color: var(--subdued);
  z-index: 200;
}

.portal-dialog #CommentsViewOpened .CommentsListHeader {
  width: 100%;
}

/* Runtime comments popup. */

.CommentsListHeader .ListRow br {
  display: none;
}

.CommentsListHeader .ListRow .CellOpenedRightAlign {
  width: 360px;
}

.CommentsListHeader .ListRow .CellOpenedRightAlign br {
  display: none;
}

.CommentsListHeader .ListRow .CellOpenedRightAlign .Title {
  color: var(--foreground);
  font-weight: 400;
  display: none;
}

.CommentsListHeader .ListRow .CellOpenedRightAlign .Link {
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  margin-right: 16px;
}

.CommentsListHeader .ListRow .CellOpenedRightAlign .Link.NoMargin {
  margin: 0;
}

.CommentsListHeader .ListRow .CellOpenedRightAlign .Link:hover {
  color: var(--foreground);
  text-decoration: none;
}

.CommentsListHeader .ListRow .CellOpenedRightAlign .SortOrderImage {
  margin: 0 3px 2px 1px;
  width: 12px;
  height: 7px;
}

.CommentsListHeader .ListRow .CellOpenedRightAlign .SortOrderImageHidden {
  display: none;
}

.CommentsListHeader .ListRow .CellOpenedRightAlign .Separator {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.commentslistheader .listrow .cellclosedrightalign {
  padding: 0px 10px 0px 10px;
}

.commentslistheader .listrow .cellclosedrightalign br {
  display: none;
}

.CommentsListHeader .ListRow .CellClosedRightAlign .Title {
  color: var(--foreground);
  font-weight: 500;
}

.CommentsListHeader .ListRow .CellClosedRightAlign .Link,
.CommentsListHeader .ListRow .CellClosedRightAlign .LinkNew {
  color: var(--muted-foreground);
  text-decoration: none;
  font-weight: 400;
}

.CommentsListHeader .ListRow .CellClosedRightAlign .Link:hover,
.CommentsListHeader .ListRow .CellClosedRightAlign .LinkNew:hover {
  color: var(--foreground);
  text-decoration: none;
}

.CommentsListHeader .ListRow .CellClosedRightAlign .Separator {
  color: #808080;
}

/************************ CommentsListBody ************************/

div.CommentsListBody {
  padding: 16px 0px 32px 0px;
}

div.CommentsListBodyHidden {
  padding: 0px 5px 0px 5px;
  height: 65%;
  visibility: hidden;
}

div.CommentsListBodyReadOnly {
  padding: 16px 0px 60px 0px;
}

div.CommentsListBodyReadOnlyHidden {
  padding: 0px 5px 0px 5px;
  height: 92%;
  visibility: hidden;
}

div.CommentsListBodyPopUp {
  padding: 16px 0px 32px 0px;
  height: 360px;
  overflow-y: scroll;
}

div.CommentsListBodyPopUpHidden {
  padding: 0px 5px 0px 5px;
  height: 360px;
  visibility: hidden;
}

div.CommentsListBodyPopUpReadOnly {
  padding: 0px 5px 0px 5px;
  height: 500px;
  overflow-y: scroll;
}

div.CommentsListBodyPopUpReadOnlyHidden {
  padding: 0px 5px 0px 5px;
  height: 500px;
  visibility: hidden;
}

/************************ CommentsList ************************/

.CommentsList .ListRow .ListCell {
  width: 100%;
}

.CommentsList .ListRow .ListCell .Comment {
  width: 100%;
  table-layout: fixed;
}

.CommentsList .ListRow .ListCell .Comment .Row .CellHeader {
  padding: 12px 24px 0px 32px;
  font-weight: 400;
}

body.dashboard .CommentsList .ListRow .ListCell .Comment .Row .CellHeader {
  display: flex;
  flex-direction: column;
}

body.Portal.follow-up
  .CommentsList
  .ListRow
  .ListCell
  .Comment
  .Row
  .CellHeader,
.portal-dialog .CommentsList .ListRow .ListCell .Comment .Row .CellHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.CommentsList .ListRow .ListCell .Comment .Row .CellHeader .CommentHeaderText {
  display: flex;
  flex-direction: column;
}

.CommentsList
  .ListRow
  .ListCell
  .Comment
  .Row
  .CellHeader
  .CommentDeleteButton {
  width: 18px;
  height: 18px;
  -webkit-mask-image: var(--icon-delete);
  mask-image: var(--icon-delete);
  background-color: var(--foreground);
  background-image: none;
  opacity: 0.8;
  cursor: pointer;
}
.CommentsList
  .ListRow
  .ListCell
  .Comment
  .Row
  .CellHeader
  .CommentDeleteButton:hover {
  background-color: var(--destructive);
  opacity: 1;
}

.CommentsList .ListRow .ListCell .Comment .Row .CellHeader .Text,
.CommentsList
  .ListRow
  .ListCell
  .Comment
  .Row
  .CellHeader
  .CommentHeaderText
  .Text {
  font-size: 13px;
  vertical-align: middle;
  color: var(--muted-foreground);
  line-height: 20px;
}

.CommentsList .ListRow .ListCell .Comment .Row .CellHeader .Link {
  font-size: 15px;
  font-weight: 500;
  vertical-align: middle;
  color: var(--foreground);
  text-decoration: none;
  line-height: 28px;
}

.CommentsList .ListRow .ListCell .Comment .Row .CellHeader .Link:hover {
  text-decoration: none;
}

.CommentsList
  .ListRow
  .ListCell
  .Comment.NewComment
  .Row
  .CellHeader
  .CommentHeaderText
  .Text,
.CommentsList .ListRow .ListCell .Comment.NewComment .Row .CellHeader .Link {
  font-weight: 600;
}

.CommentsList .ListRow .ListCell .Comment .Row .CellMessage {
  padding: 12px 24px 12px 32px;
  background-color: var(--background);
  word-wrap: break-word;
}

.CommentsList .ListRow .ListCell .Comment .Row .CellMessage .Text {
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: subpixel-antialiased;
  width: fit-content;
  padding: 8px 12px;
  background-color: var(--accent);
  border-radius: var(--radius-card);
}

/************************ CommentsListInput ************************/

.CommentsListInput {
  position: absolute;
  width: 500px;
  bottom: 0px;
  border-top: 1px solid var(--input);
  height: 157px;
}

.portal-dialog .CommentsListInput {
  width: 100%;
}

/* Runtime comments popup. */

.CommentsListInput .ListRow .ListCell {
  padding: 16px 24px 0px 24px;
  width: 100%;
  vertical-align: top;
}

.CommentsListInput .ListRow .ListCell .NewComment {
  width: 100%;
}

.CommentsListInput .ListRow .ListCell .NewComment .Row .Cell .Label {
  font-size: 12px;
  color: var(--muted-foreground);
}

.CommentsListInput .ListRow .ListCell .NewComment .Row .Cell .TextArea {
  font-size: 14px;
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  color: var(--foreground);
  width: 100%;
  height: 63px;
  background-color: var(--subdued);
  border-radius: var(--radius-input);
  border: 1px solid var(--input);
  padding: 8px 12px;
  box-sizing: border-box;
}

.CommentsListInput
  .ListRow
  .ListCell
  .NewComment
  .Row
  .Cell
  .TextArea:focus-visible {
  outline: none;
}

.CommentsListInput .ListRow .ListCell .NewComment .Row .Cell .Button {
  margin-top: 1rem;
  float: right;
}

/************** Override jQuery UI and jqWidgets Theme ********/
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button,
.jqx-widget {
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji" !important;
}

.ui-widget-overlay {
  opacity: 1 !important;
  background-color: var(--overlay-background) !important;
  backdrop-filter: blur(4px);
}

.ui-selectmenu-button.ui-button,
.ui-selectmenu-button.ui-button:hover,
.ui-selectmenu-button.ui-button:active,
.ui-selectmenu-button.ui-button:focus,
.ui-selectmenu-button.ui-button:focus-visible {
  font-size: 14px;
  font-weight: 400;
  color: var(--foreground);
  background-color: var(--subdued);
  background-image: none;
  border: 1px solid var(--input);
  border-radius: var(--radius-input);
  height: 18px;
  padding: 9px 15px 7px 15px;
  margin-right: 0px;
  outline: none;
}

.ui-selectmenu-button.ui-button:focus,
.ui-selectmenu-button.ui-button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, var(--ring) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

form#FORM_DELEGATION .ui-selectmenu-button.ui-button {
  width: 12em;
}

.ui-selectmenu-icon.ui-icon {
  -webkit-mask-image: var(--icon-chevron-down);
  mask-image: var(--icon-chevron-down);
  background-color: var(--foreground);
  background-image: none !important;
  margin-top: 1px !important;
}

.ui-selectmenu-menu,
.ui-selectmenu-open {
  margin-top: 4px !important;
  border-radius: var(--radius-input);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  z-index: 1802;
}

.ui-selectmenu-open .ui-menu {
  color: var(--foreground);
  background-color: var(--background);
  border: 1px solid var(--input) !important;
  border-radius: var(--radius-input);
  padding-top: 4px;
  padding-bottom: 4px !important;
  min-width: 160px;
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
  font-weight: 600;
  color: var(--muted-foreground-500);
  padding: 8px 0px 4px 15px;
  margin: 12px 0px 0px 0px;
  border-top: 1px solid var(--border);
}

.ui-selectmenu-open .ui-menu .ui-menu-item .ui-menu-item-wrapper {
  margin: 0px 4px;
  padding: 6px 12px 6px 11px;
  white-space: nowrap;
}

.ui-selectmenu-open .ui-menu .ui-menu-item .ui-state-active {
  border: 0px solid transparent;
  background: var(--accent);
  color: var(--foreground);
  font-weight: 400;
  border-radius: var(--radius-input);
  margin: 0px 4px;
  padding: 6px 12px 6px 11px;
}

.ui-tooltip {
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji" !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  padding: 8px 12px !important;
  word-wrap: break-word !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: var(--radius-input) !important;
  color: var(--background) !important;
  background-color: var(--foreground) !important;
}

.ui-tooltip.multiline-tooltip {
  max-width: 450px;
  margin-right: 15px;
}

.ui-tooltip.multiline-tooltip span + span {
  display: block;
  margin-top: 4px;
}

/************************* Back Url Submit and Cancel ******************************/
.BackUrl {
  background-color: var(--background);
}

.BackUrl .Title {
  font-size: 18px;
}

/************************* Session Refresh Success ******************************/
.SessionRefreshSuccess {
  background-color: var(--background);
}

.SessionRefreshSuccess .Title {
  font-size: 18px;
}

/************************* Form ******************************/

input[type="radio"],
input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--muted-foreground);
  display: inline-block !important;
  appearance: none;
  outline: none;
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  border-color: var(--ring) !important;
}

input[type="radio"] {
  border-radius: 100%;
}

input[type="checkbox"] {
  border-radius: var(--radius-input);
}

[type="checkbox"]:checked,
[type="radio"]:checked {
  border-color: transparent;
  background-color: var(--muted-foreground);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

input[type="radio"]:checked {
  background-image: var(--icon-radio-checked);
}

input[type="checkbox"]:checked {
  background-image: var(--icon-checkbox-checked);
}

/* Ajax Loader */

.AjaxLoader {
  position: absolute;
  left: 0px;
  top: 0px;
  text-align: center;
  z-index: 10000;
  height: 100%;
  width: 100%;
}

.AjaxLoader.Hidden {
  display: none;
}

/* Because text-align: center did not work in IE8 in the form designer */
.AjaxLoader .AjaxLoaderCenter {
  height: 100%;
  width: 64px;
  margin: 0px auto;
}

.AjaxLoader .AjaxLoaderCenter .AjaxImage {
  position: fixed;
  top: 40%;
}

.AjaxLoader .AjaxLoaderOverlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8 !important;
  background-color: var(--overlay-background-loader) !important;
  backdrop-filter: blur(0.5px);
}

/* Loader */

.Loader {
  -webkit-mask-image: var(--icon-loader);
  mask-image: var(--icon-loader);
  background-color: var(--foreground);
  background-image: none;
}

.Loader.Hidden {
  display: none !important;
}

.Loader-32 {
  width: 32px;
  height: 32px;
}

.Loader-36 {
  width: 36px;
  height: 36px;
}

.Loader-48 {
  width: 48px;
  height: 48px;
}

.Loader-64 {
  width: 64px;
  height: 64px;
}

.Loader-80 {
  width: 80px;
  height: 80px;
}

.Loader-96 {
  width: 96px;
  height: 96px;
}

/**
* Ace Editor
**/
div#DATA_EDITOR {
  border-radius: var(--radius);
}

.ace_editor,
.ace_editor * {
  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas",
    monospace !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.ace_editor {
  color: var(--foreground) !important;
  background-color: var(--background) !important;
}

.ace_editor .ace_gutter {
  color: var(--foreground) !important;
  background: var(--subdued) !important;
}

.ace_editor .ace_gutter-active-line {
  color: var(--accent-foreground) !important;
  background-color: var(--accent) !important;
}

.ace_editor .ace_print-margin {
  background-color: var(--border) !important;
  display: none;
}

.ace_editor .ace_marker-layer .ace_active-line {
  background-color: var(--accent) !important;
}

.ace_editor .ace_cursor {
  color: var(--foreground) !important;
}

.ace_editor .ace_meta.ace_tag {
  color: var(--ace-tag) !important;
}

.ace_editor .ace_keyword.ace_operator {
  color: var(--ace-operator) !important;
}

.ace_editor .ace_constant.ace_numeric {
  color: var(--ace-numeric) !important;
}

.ace_editor .ace_constant.ace_boolean {
  color: var(--ace-boolean) !important;
}

.ace_editor .ace_storage,
.ace_editor .ace_keyword {
  color: var(--ace-storage-keyword) !important;
}

.ace_editor .ace_support.ace_function {
  color: var(--ace-support-function) !important;
}

.ace_editor .ace_entity.ace_name.ace_function {
  color: var(--ace-entity-name-function) !important;
}

.ace_editor .ace_string {
  color: var(--ace-string) !important;
}

.ace_editor textarea.ace_text-input {
  font-family: inherit;
  font-size: inherit;
}

/* TW */

.grid {
  display: grid !important;
}
.flex {
  display: flex !important;
}
.hidden {
  display: none !important;
}
.block {
  display: block !important;
}
.disabled {
  opacity: 0.5 !important;
}

.static {
  position: static !important;
}
.fixed {
  position: fixed !important;
}
.absolute {
  position: absolute !important;
}
.relative {
  position: relative !important;
}
.sticky {
  position: sticky !important;
}

.grid-cols-2 {
  grid-template-columns: 50% 50%;
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.grid-cols-2-auto {
  grid-template-columns: auto 1fr;
}

.grid-cols-3-auto {
  grid-template-columns: auto auto 1fr;
}

.grid-cols-4-auto {
  grid-template-columns: auto auto auto 1fr;
}

.col-span-3 {
  grid-column: span 3 / span 3 !important;
}
.col-span-4 {
  grid-column: span 4 / span 4 !important;
}

.flex-row {
  flex-direction: row !important;
}
.flex-col {
  flex-direction: column !important;
}

.items-start {
  align-items: flex-start !important;
}
.items-end {
  align-items: flex-end !important;
}
.items-center {
  align-items: center !important;
}
.items-baseline {
  align-items: baseline !important;
}

.justify-between {
  justify-content: space-between !important;
}
.justify-end {
  justify-content: flex-end !important;
}

.align-baseline {
  vertical-align: baseline !important;
}
.align-top {
  vertical-align: top !important;
}
.align-middle {
  vertical-align: middle !important;
}
.align-bottom {
  vertical-align: bottom !important;
}

.w-10 {
  width: 2.5rem !important; /* 40px */
}
.w-11 {
  width: 2.75rem !important; /* 44px */
}
.w-12 {
  width: 3rem !important; /* 48px */
}
.w-14 {
  width: 3.5rem !important; /* 56px */
}
.w-16 {
  width: 4rem !important; /* 64px */
}
.w-20 {
  width: 5rem !important; /* 80px */
}
.w-24 {
  width: 6rem !important; /* 96px */
}
.w-28 {
  width: 7rem !important; /* 112px */
}
.w-32 {
  width: 8rem !important; /* 128px */
}
.w-36 {
  width: 9rem !important; /* 144px */
}
.w-37 {
  width: 9.25rem !important; /* 148px */
}
.w-40 {
  width: 10rem !important; /* 160px */
}
.w-41 {
  width: 10.25rem !important; /* 164px */
}
.w-44 {
  width: 11rem !important; /* 176px */
}
.w-45 {
  width: 11.25rem !important; /* 180px */
}
.w-48 {
  width: 12rem !important; /* 192px */
}
.w-52 {
  width: 13rem !important; /* 208px */
}
.w-56 {
  width: 14rem !important; /* 224px */
}
.w-64 {
  width: 16rem !important; /* 256px */
}
.w-72 {
  width: 18rem !important; /* 288px */
}
.w-76 {
  width: 19rem !important; /* 304px */
}
.w-80 {
  width: 20rem !important; /* 320px */
}
.w-82 {
  width: 20.5rem !important; /* 328px */
}
.w-84 {
  width: 21rem !important; /* 336px */
}
.w-86 {
  width: 21.5rem !important; /* 344px */
}
.w-88 {
  width: 22rem !important; /* 352px */
}
.w-89 {
  width: 22.25rem !important; /* 356px */
}
.w-96 {
  width: 24rem !important; /* 384px */
}
.w-172 {
  width: 41rem !important; /* 656px */
}
.w-full {
  width: 100% !important; /* 100% */
}
.w-auto {
  width: auto !important; /* auto */
}

.min-w-40 {
  min-width: 10rem !important; /* 160px */
}
.min-w-44 {
  min-width: 11rem !important; /* 176px */
}
.min-w-56 {
  min-width: 14rem !important; /* 224px */
}
.min-w-64 {
  min-width: 16rem !important; /* 256px */
}
.min-w-72 {
  min-width: 18rem !important; /* 288px */
}
.min-w-80 {
  width: 20rem !important; /* 320px */
}

.h-9 {
  height: 2.25rem !important; /* 36px */
}
.h-full {
  height: 100% !important;
}
.h-auto {
  height: auto !important;
}
.h-20px {
  height: 20px !important;
}
.h-31px {
  height: 31px !important;
}
.h-180px {
  height: 180px !important;
}
.h-265px {
  height: 265px !important;
}

.mt-0 {
  margin-top: 0px !important;
}
.mt-1 {
  margin-top: 0.25rem !important; /* 4px */
}
.mt-2 {
  margin-top: 0.5rem !important; /* 8px */
}
.mt-3 {
  margin-top: 0.75rem !important; /* 12px */
}
.mt-4 {
  margin-top: 1rem !important; /* 16px */
}
.mt-5 {
  margin-top: 1.25rem !important; /* 20px */
}
.mt-6 {
  margin-top: 1.5rem !important; /* 24px */
}

.mr-0 {
  margin-right: 0px !important;
}
.mr-1 {
  margin-right: 0.25rem !important; /* 4px */
}
.mr-2 {
  margin-right: 0.5rem !important; /* 8px */
}
.mr-3 {
  margin-right: 0.75rem !important; /* 12px */
}

.mb-0 {
  margin-bottom: 0px !important; /* 0px */
}
.mb-1 {
  margin-bottom: 0.25rem !important; /* 4px */
}
.mb-2 {
  margin-bottom: 0.5rem !important; /* 8px */
}
.mb-3 {
  margin-bottom: 0.75rem !important; /* 12px */
}
.mb-4 {
  margin-bottom: 1rem !important; /* 16px */
}
.mb-5 {
  margin-bottom: 1.25rem !important; /* 20px */
}
.mb-6 {
  margin-bottom: 1.5rem !important; /* 24px */
}

.ml-0 {
  margin-left: 0px !important;
}
.ml-1 {
  margin-left: 0.25rem !important; /* 4px */
}
.ml-2 {
  margin-left: 0.5rem !important; /* 8px */
}
.ml-3 {
  margin-left: 0.75rem !important; /* 12px */
}
.ml-3-5 {
  margin-left: 0.875rem !important; /* 14px */
}
.ml-4 {
  margin-left: 1rem !important; /* 16px */
}
.ml-5 {
  margin-left: 1.25rem !important; /* 20px */
}
.ml-6 {
  margin-left: 1.5rem !important; /* 24px */
}
.ml-7 {
  margin-left: 1.75rem !important; /* 28px */
}
.ml-8 {
  margin-left: 2rem !important; /* 32px */
}
.ml-48 {
  margin-left: 12rem !important;
}

.p-0 {
  padding: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}
.pt-8 {
  padding-top: 8px !important;
}
.pt-12 {
  padding-top: 12px !important;
}

.pr-0 {
  padding-right: 0px !important;
}
.pr-28 {
  padding-right: 28px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}
.pb-4 {
  padding-bottom: 4px !important;
}
.pb-6 {
  padding-bottom: 6px !important;
}
.pb-8 {
  padding-bottom: 8px !important;
}
.pb-12 {
  padding-bottom: 12px !important;
}
.pb-16 {
  padding-bottom: 16px !important;
}
.pb-32 {
  padding-bottom: 32px !important;
}
.pb-200 {
  padding-bottom: 200px !important;
}

.pl-0 {
  padding-left: 0px !important;
}
.pl-28 {
  padding-left: 28px !important;
}

.pr-12 {
  padding-right: 12px !important;
}

.font-normal {
  font-weight: 400 !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-semibold {
  font-weight: 600 !important;
}
.font-bold {
  font-weight: 700 !important;
}

.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.text-justify {
  text-align: justify !important;
}
.text-start {
  text-align: start !important;
}
.text-end {
  text-align: end !important;
}

.border-spacing-0 {
  border-spacing: 0px 0px !important;
}

.whitespace-normal {
  white-space: normal !important;
}
.whitespace-nowrap {
  white-space: nowrap !important;
}

.RemoveEllipsis {
  text-overflow: unset !important;
  overflow: unset !important;
}

body.mobile #selectDelegateDialogWindow .Select,
body.mobile.phone #statsDataDialog .SelectCustomWidth {
  height: 34px;
}

body.mobile #selectDelegateDialogWindow .Content {
  height: calc(100% - 108px);
}

body.mobile #selectDelegateDialogWindow .delegation-counter {
  display: block;
  margin-top: 8px;
}

.Portal .FollowUpTitleHeader .Row .CellButtons.collapsed {
  transition: all 0.3s;
  display: grid;
  grid-template-columns: auto auto 0px;
  justify-content: end;
}

.Portal
  .FollowUpTitleHeader
  .Row
  .CellButtons.collapsed
  a:not(.PrimaryButton):not(#btn-show-more),
.Portal
  .FollowUpTitleHeader
  .Row
  .CellButtons.collapsed
  input:not(.PrimaryButton) {
  display: none;
}

.Portal .FollowUpTitleHeader .Row .CellButtons.collapsed a#btn-show-more {
  display: flex;
}

@media (max-width: 1400px) {
  .Portal .search-form-data,
  .analytics .search-form-data {
    border-spacing: unset;
    width: 100%;
    margin-top: 16px;
  }

  .Portal .search-form-data tbody,
  .analytics .search-form-data tbody {
    display: grid;
    gap: 1rem;
  }

  .Portal .search-form-data .Row,
  .analytics .search-form-data .Row {
    display: grid;
    gap: 1rem;
    grid-template:
      "DataCheckbox DataType DataName"
      "DataCheckbox DataCompare DataInput";
    grid-template-columns: max-content 1fr 1fr;
  }

  .Portal .search-form-data .Row .CellValue,
  .analytics .search-form-data .Row .CellValue {
    display: flex;
  }

  .Portal .search-form-data .Row .CellValue:nth-child(1),
  .analytics .search-form-data .Row .CellValue:nth-child(1) {
    grid-area: DataCheckbox;
  }

  .Portal .search-form-data .Row .CellValue:nth-child(2),
  .analytics .search-form-data .Row .CellValue:nth-child(2) {
    grid-area: DataType;
  }

  .Portal .search-form-data .Row .CellValue:nth-child(3),
  .analytics .search-form-data .Row .CellValue:nth-child(3) {
    grid-area: DataName;
  }

  .Portal .search-form-data .Row .CellValue:nth-child(4),
  .analytics .search-form-data .Row .CellValue:nth-child(4) {
    grid-area: DataCompare;
  }

  .Portal .search-form-data .Row .CellValue:nth-child(5),
  .analytics .search-form-data .Row .CellValue:nth-child(5) {
    grid-area: DataInput;
  }

  .FormSection
    .Cards
    .FormCard
    .Field
    .Value
    .search-form-data
    .ui-selectmenu-button.ui-button {
    width: 100%;
  }

  .FormSection .Cards .FormCard .Field .Value .search-form-data .InputText {
    width: 100% !important;
  }

  .content-body .filters select + span.ui-selectmenu-button.ui-button {
    max-width: unset;
  }
}

/* 1280px */
@media (max-width: 1280px) {
  .filter-header .content select + .ui-selectmenu-button.ui-button {
    max-width: 200px;
  }

  .Portal .FollowUpTitleHeader .Row .CellButtons {
    transition: all 0.3s;
    display: grid;
    grid-template-columns: auto auto 0px;
    justify-content: end;
  }

  .Portal .FollowUpTitleHeader .Row .CellButtons a,
  .Portal .FollowUpTitleHeader .Row .CellButtons input[type="button"],
  .analytics .TitleTable .Row .CellButtons a {
    transition: all 0.3s;
    margin-left: 0px;
  }

  .Portal
    .FollowUpTitleHeader
    .Row
    .CellButtons
    a:not(.PrimaryButton):not(#btn-show-more),
  .TitleContainer .Title .buttons a:not(.PrimaryButton):not(#btn-show-more),
  .content-body .toolbar .buttons a:not(#btn-show-more):not(#btn-back-to-chart),
  .Portal .FollowUpTitleHeader .Row .CellButtons input:not(.PrimaryButton) {
    display: none;
  }

  .TitleContainer .Title .buttons {
    display: flex;
    justify-self: right;
    align-content: unset;
    text-align: unset;
  }

  .TitleContainer .Title .buttons a#btn-show-more,
  .content-body .toolbar .buttons a#btn-show-more,
  .Portal .FollowUpTitleHeader .Row .CellButtons a#btn-show-more {
    display: flex;
  }

  .widgets,
  .widgets.no-time-limit {
    transition: all 0.3s;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-body .filters select + span.ui-selectmenu-button.ui-button {
    width: unset;
  }

  .content-body .toolbar {
    transition: all 0.3s;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 16px;
  }

  .content-body .toolbar.grid-cols-2 {
    grid-template-columns: max-content auto;
  }

  .content-body .buttons {
    display: grid;
    justify-content: end;
    grid-template-columns: auto auto;
  }

  .FormSection .Cards .FormCard .Field .Value .DateOption {
    width: 100%;
  }
}

/* From 1025px */
@media (min-width: 1025px) {
  body.Portal.search-form.Refine .FormSection {
    grid-template-columns: 28% 72%;
  }

  .content-body .filters {
    display: grid !important;
  }
}

/* 1024px */
@media (max-width: 1024px) {
  .filter-header
    .content
    .filter-container.process
    select#ctx_process_id
    + .ui-selectmenu-button.ui-button {
    visibility: hidden;
    margin: 0px;
    width: 0px;
  }

  .filter-header
    .content
    select#QUICK_SEARCH_TYPE
    + .ui-selectmenu-button.ui-button {
    display: none;
  }

  .FormSection {
    transition: all 0.3s;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 16px;
  }

  .FormSection .Titles .SubTitle {
    transition: all 0.3s;
    display: none;
  }

  .FormSection .Paging {
    transition: all 0.3s;
    grid-column-start: auto;
  }

  body.Portal.search-form.Refine .TitleContainer div.Title .Switch {
    padding-right: 0px;
  }

  .content-body .toolbar.grid-cols-2 {
    grid-template-areas:
      "filters-button menu-button"
      "filters filters";
  }

  .content-body .toolbar.grid-cols-2.no-filters {
    grid-template-areas: "filters-button menu-button";
  }

  .content-body .filters-button {
    display: block;
  }

  .content-body .filters {
    display: none;
    grid-template-columns: auto auto 1fr;
  }

  .content-body .toolbar.grid-cols-2 .filters-button {
    grid-area: filters-button;
  }

  .content-body .toolbar.grid-cols-2 .filters {
    display: none;
    grid-area: filters;
  }

  body:not(.dashboard) .content-body .buttons {
    grid-area: menu-button;
  }

  .content-body .filters select + span.ui-selectmenu-button.ui-button {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

/* 896px */
@media (max-width: 896px) {
  .content-body .filters {
    transition: all 0.3s;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-body .filters.grid-cols-3-auto .filter.Status {
    text-align: left;
  }

  .content-body .filters .InputText {
    width: calc(50% - 6px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .content-body .list-footer:not(:has(.AdvancedGridPaging)) {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 8px;
  }

  .content-body .list-footer .Paging:not(:has(.AdvancedGridPaging)) {
    order: -1;
  }

  .content-body .list-footer .Paging .Content:not(.AdvancedGridPaging) {
    float: left !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .content-body .list-footer .Paging .Content .Page,
  .content-body .list-footer .Paging .Content .Link {
    margin-left: 0px;
  }
}

/* 768px */
@media (max-width: 768px) {
  .filter-header
    .content
    .filter-container.delegation
    select
    + .ui-selectmenu-button.ui-button {
    visibility: hidden;
    margin: 0px;
    width: 0px;
  }

  .ui-selectmenu-open .ui-menu {
    max-width: 400px;
  }

  body.dashboard .filter-header .content .filter-container.delegation,
  .Portal.follow-up .filter-header .content .filter-container.delegation {
    transition: all 0.3s;
    padding-right: 0px;
    justify-content: end;
  }

  div.CommentsViewClosedRightAlign {
    z-index: 2000;
  }

  body.dashboard .title-container .title .label,
  .Portal .FollowUpTitleHeader .Row .CellTitle .Title,
  .analytics .TitleTable .Row .CellTitle .Title,
  .TitleContainer div.Title .Label {
    transition: all 0.3s;
    font-size: 26px;
  }

  .Portal.follow-up .info-data-container .content-body {
    transition: all 0.3s;
    padding-top: 24px;
  }

  .widgets,
  .widgets.no-time-limit {
    transition: all 0.3s;
    gap: 16px;
    margin-bottom: 24px;
  }

  .widgets#widgets-supervisor {
    margin-top: -8px;
  }

  body.dashboard .widgets .widget .Content .main-label {
    font-size: 22px;
    line-height: 30px;
  }

  body.dashboard .widgets .widget.skeleton .Content .main-label {
    height: 30px;
  }

  body.dashboard .DivContentHeader {
    margin-bottom: 24px;
  }

  body.follow-up .widgets .widget .Content .main-label {
    font-size: 16px;
    line-height: 24px;
  }

  .FormSection {
    transition: all 0.3s;
    margin-top: 24px;
  }

  .portal-dialog .FormSection {
    margin: 24px 40px 32px 40px;
  }

  .FormSection .Titles .MainTitle {
    transition: all 0.3s;
    font-size: 22px;
  }

  .FormSection:not(.timeline-section) .Cards {
    transition: all 0.3s;
    gap: 16px;
  }

  .FormSection .Cards .action-card .Name .Label {
    transition: all 0.3s;
    font-size: 16px;
  }

  .FormSection .Cards .data-card .Content {
    transition: all 0.3s;
    max-height: unset;
    margin-bottom: 0px;
    padding-bottom: 16px;
  }

  .portal-dialog .FormSection .Cards .data-card .Content {
    min-height: 451px;
    max-height: 451px;
  }

  .FormSection .Cards .data-card .Overlay {
    display: none;
  }

  .FormSection.timeline-section .Cards .action-card .Name {
    transition: all 0.3s;
    flex-direction: column;
    align-items: flex-start;
  }

  .FormSection.timeline-section .Cards .action-card .Name .Date {
    transition: all 0.3s;
    margin-left: 32px;
    margin-top: 6px;
  }

  .FormSection:not(#ActionsHistory) .Cards .action-card .Info .Transition {
    transition: all 0.3s;
    height: 60px;
    margin-top: -20px;
  }

  #ActionsHistory.FormSection .Cards .action-card .Info .Transition {
    transition: all 0.3s;
    height: 64px;
    margin-top: -20px;
  }

  #ProcessesTableHeader .CellHeaderText:first-child,
  #divCategory .CellHeaderText:first-child,
  #divCategory .ClickableCellHeaderText:first-child,
  .TableContent .CategoryHeader .CategoryOpen:first-child {
    width: 45%;
    transition: all 0.3s;
  }

  body.dashboard
    div#FAVORITE_LIST
    .list-body-container
    .TableContent
    .Row
    .CellText:last-child
    a:last-child,
  body.dashboard
    div#PROCESS_LIST
    .list-body-container
    .TableContent
    .Row
    .CellText:last-child
    a:last-child,
  body.dashboard
    div#CUSTOM_VIEWS_LIST
    .list-body-container
    .TableContent
    .Row
    .CellText:last-child
    a:last-child {
    margin-left: 12px;
  }

  .TitleContainer div.Title {
    transition: all 0.3s;
    grid-template-columns: 100%;
    gap: 8px;
    padding-top: 16px;
  }

  .TitleContainer div.Title .Switch {
    text-align: left;
  }
}

/* 640px */
@media (max-width: 640px) {
  .app-container,
  .app-container.collapsed:not(.no-nav) {
    grid-template-columns: 0px 1fr;
    position: relative;
  }

  .app-container.collapsed.smooth:not(.no-nav) {
    transition: none;
  }

  .side-panel {
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    width: 240px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    z-index: 10;
  }

  .app-container.show-panel .side-panel {
    transition: transform 0.4s ease;
    transform: translateX(0);
  }

  .app-container.show-panel .side-panel-overlay,
  .app-container.show-filter-process .side-panel-overlay {
    opacity: 1;
    display: block;
    visibility: visible;
  }

  .app-container.show-panel .side-panel .user {
    display: none;
  }

  .app-container.show-panel .side-panel .toolbar.filter-processes {
    display: table;
    visibility: visible;
  }

  .app-container.show-panel .side-panel .toolbar-separator.filter-processes {
    display: block;
    visibility: visible;
  }

  .app-container.show-panel
    .side-panel
    .toolbar.filter-processes
    tbody
    tr.Row
    td.Cell
    a.Link
    span,
  .app-container.show-panel
    .side-panel
    .toolbar.general
    tbody
    tr.Row
    td.Cell
    a.Link
    span,
  .app-container.show-panel
    .side-panel
    .toolbar.others
    tbody
    tr.Row
    td.Cell
    a.Link
    span {
    display: block !important;
  }

  .app-container.show-filter-process .ui-selectmenu-open {
    top: 0 !important;
    left: 0 !important;
    margin-top: 0px !important;
    position: fixed;
  }

  .app-container.show-filter-process
    .ui-selectmenu-open
    ul#ctx_process_id-menu {
    height: calc(100vh - 33px);
    max-height: calc(100vh - 33px);
    border-radius: 0px;
    max-width: 280px;
    padding-top: 16px;
    padding-bottom: 16px !important;
  }

  /* Disable .menu-footer */
  .main-content {
    /* grid-template-rows: 51px 1fr 71px; */
    position: relative;
    z-index: 1;
    width: 100vw;
  }

  /* Disable .menu-footer */
  /* body.application-start .main-content {
    grid-template-rows: 1fr 71px;
  } */

  body.application-start .main-content {
    grid-template-rows: 51px 1fr 0px;
  }

  body.application-start .main-content .filter-header .content {
    display: flex;
  }

  .scrollable-area {
    padding-bottom: 100px !important;
  }

  body.application-start .main-content .backurl-cancel {
    padding: 16px;
  }

  .app-container.no-nav .main-content {
    grid-template-rows: 1fr;
  }

  .Portal .scrollable-area,
  .analytics.search-result-data .scrollable-area {
    overflow-y: auto !important;
  }

  body.mobile.search-form.Refine .content-area {
    grid-template-rows: auto 1fr 69px;
  }

  body.dashboard .content-body,
  .Portal .TitleContainer,
  .analytics .TitleContainer,
  .Portal .content-body,
  .Error .ContentContainer,
  .analytics .content-body,
  .filter-header .content {
    transition: all 0.3s;
    padding-left: 16px;
    padding-right: 16px;
  }

  .analytics.search-result-activities .content-body,
  .analytics.search-result-data .content-body,
  .Portal.search-result .content-body {
    padding: 16px 16px;
  }

  .Portal .content-body {
    padding-top: 16px;
  }

  .Portal .TitleTable,
  .Portal .FollowUpTitleHeader,
  .analytics .TitleTable {
    transition: all 0.3s;
    padding-top: 16px;
  }

  .filter-header .content .lucideIcon {
    min-width: 20px;
    width: 20px;
    min-height: 20px;
    height: 20px;
  }

  .filter-header .content .lucideIcon.lucide-align-left {
    display: block;
    min-width: 24px;
    width: 24px;
    min-height: 24px;
    height: 24px;
  }

  .filter-header .content .lucideIcon.lucide-list-filter,
  .filter-header .content .lucideIcon.lucide-contact-2 {
    display: none;
  }

  /* Disable .menu-footer */
  /* .menu-footer {
    display: grid;
  } */

  .app-container.no-nav div.CommentsViewClosedRightAlign {
    top: 16px;
  }

  .app-container:not(.no-nav) div.CommentsViewClosedRightAlign {
    top: 67px;
  }

  div#CommentsViewClosed {
    right: 16px;
  }

  div.CommentsViewSubOpenedRightAlign,
  #CommentsViewOpened .CommentsListHeader,
  div#CommentsListBody,
  .CommentsListInput {
    width: 100vw;
  }

  .main-content .avatar {
    display: inline-flex;
  }

  .Portal .FollowUpTitleHeader .Row .CellTitle .Title,
  .analytics .TitleTable .Row .CellTitle .Title {
    transition: all 0.3s;
    font-size: 24px;
  }

  .Portal .FollowUpTitleHeader .Row .CellTitle .Title {
    padding-right: 42px;
  }

  .Portal .FollowUpTitleHeader .Row .CellTags,
  .Portal .FollowUpTitleHeader .Row .CellButtons {
    padding: 8px 0px 0px 0px;
  }

  .Portal.follow-up .info-data-container .content-body {
    transition: all 0.3s;
    padding-top: 16px;
    padding-bottom: 12px;
  }

  .widgets,
  .widgets.no-time-limit,
  body.follow-up .widgets {
    transition: all 0.3s;
    gap: 12px;
    margin-bottom: 24px;
  }

  .widgets#widgets-supervisor {
    margin-top: -12px;
  }

  .widgets .widget .Title {
    padding: 16px 16px 8px 16px;
  }

  .widgets .widget .Content {
    padding: 0px 16px 16px 16px;
  }

  body.dashboard .widgets .widget .Content .main-label {
    font-size: 20px;
    line-height: 24px;
  }

  body.dashboard .widgets .widget.skeleton .Content .main-label {
    height: 24px;
  }

  body.follow-up .widgets .widget .Content .main-label {
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    display: block;
  }

  body.follow-up .widgets .widget .Content .main-label .lucide-clock-1 {
    vertical-align: text-bottom;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
  }

  .FormSection {
    margin-top: 12px;
    gap: 6px;
  }

  .portal-dialog .FormSection {
    margin: 24px 16px 32px 16px;
  }

  .FormSection .Titles {
    padding: 4px 0px;
  }

  .FormSection .Titles .MainTitle {
    transition: all 0.3s;
    font-size: 20px;
  }

  .FormSection:not(.timeline-section) .Cards {
    transition: all 0.3s;
    gap: 12px;
  }

  .FormSection.timeline-section .Cards,
  .FormSection:not(.timeline-section) .Cards .action-card,
  .FormSection .Cards .data-card {
    border-radius: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    box-shadow: none;
    margin-left: -16px;
    margin-right: -16px;
  }

  .portal-dialog .FormSection .Cards .data-card .Content {
    min-height: 463px;
    max-height: 463px;
  }

  .FormSection .Cards .action-card .Name .Label {
    transition: all 0.3s;
    font-size: 15px;
  }

  .FormSection .Cards .action-card .Info {
    transition: all 0.3s;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .FormSection .Cards .action-card .assignee-list-footer input {
    min-width: 100%;
  }

  .TitleContainer div.Title .Label {
    transition: all 0.3s;
    font-size: 24px;
    height: unset;
    text-wrap: pretty;
  }

  .TitleContainer div.Title .Switch > div {
    display: grid;
    grid-template-columns: 0% 50% 50% 0%;
  }

  div.switchRadio.ui-controlgroup:not(:hover) > label.ui-state-active,
  div.switchRadio.ui-controlgroup:hover > label.ui-button:hover,
  div.switchRadio.ui-controlgroup:not(:hover) > label.ui-button,
  div.switchRadio.ui-controlgroup:hover > label.ui-button {
    width: unset;
  }

  .content-body .filters {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .Portal .list-body-container {
    height: auto !important;
    margin-left: -16px;
    margin-right: -16px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-radius: 0px;
    overflow-x: auto;
  }

  .content-body .list-footer:has(.AdvancedGridPaging) {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 8px;
  }

  .ui-selectmenu-open .ui-menu {
    width: calc(100vw - 46px) !important;
    max-width: 350px;
  }

  #SearchData .ui-selectmenu-open .ui-menu {
    width: calc(100vw - 82px) !important;
  }

  .TitleContainer div.Title {
    transition: all 0.3s;
    gap: 8px;
  }

  body.dashboard .title-container {
    margin: 16px 0px;
    grid-template-columns: 1fr;
  }

  body.dashboard .title-container .title .label {
    transition: all 0.3s;
    font-size: 24px;
  }

  body.dashboard .title-container .buttons {
    padding-right: 42px;
  }

  body.dashboard .DivContentHeader {
    grid-template:
      "SectionIcon SectionTitle SectionToggle"
      "SectionIcon SectionTitle SectionToggle";
    grid-template-columns: max-content 75% auto;
    border-bottom: 0px;
    margin-bottom: 20px;
    transition: all 0.3s;
  }

  body.dashboard .DivContentHeader .SectionIcon {
    display: flex;
    padding-top: 2px;
  }

  body.dashboard .DivContentHeader .SectionIcon .lucideIcon,
  body.dashboard .DivContentHeader .SectionIcon .Image,
  body.dashboard .DivContentHeader .SectionToggle .lucideIcon {
    width: 20px;
    height: 20px;
  }

  body.dashboard .DivContentHeader .SectionTitle {
    font-size: 17px;
    padding-left: 16px;
  }

  body.dashboard .DivContentHeader .SectionSubtitle {
    display: none;
  }

  body.dashboard .DivContentHeader .SectionToggle {
    align-content: start;
  }

  body.dashboard .list-body-container,
  .Portal.processes .list-body-container {
    margin-left: -16px;
    margin-right: -16px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-radius: 0px;
    width: unset !important;
  }

  body.dashboard .list-body-container:first-of-type {
    margin-top: 0px;
  }

  body.dashboard .list-body-container .TableContent,
  .Portal.processes .list-body-container .TableContent {
    table-layout: unset;
  }

  body.dashboard .list-body-container .TableContent div {
    max-width: 500px;
  }

  body.dashboard .list-body-container .TableContent#ProcessesTable div,
  body.dashboard #PROCESS_LIST .list-body-container .TableContent div,
  .Portal.processes .list-body-container .TableContent div {
    min-width: 250px;
    max-width: 250px;
  }

  .Portal.search-form .content-body,
  .analytics.search-form .content-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .FormSection .Cards .FormCard {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    box-shadow: none;
  }

  .FormSection .Cards .FormCard .Field {
    padding-bottom: 12px;
  }

  .Portal .FormSection .DateOption input#dateToInput,
  .analytics .FormSection .DateOption input#date_close {
    margin-left: 0px;
    margin-top: 12px;
  }

  #SearchAccessLevel.FormSection .Cards .FormCard .Field .Value {
    display: grid;
    grid-template-columns: max-content 100%;
    row-gap: 8px;
  }

  .FormSection .Cards .FormCard .Field .Value .InputText {
    width: 100% !important;
  }

  .FormSection .Cards .FormCard .Field .Value .ui-selectmenu-button.ui-button {
    width: 100%;
  }

  .FormSection
    .Cards
    .FormCard
    .Field
    .Value
    .search-form-data
    .ui-selectmenu-button.ui-button {
    width: 100%;
  }

  .FormSection .Cards .FormCard .Content {
    padding: 24px 16px 24px 16px !important;
  }

  .Portal .search-form-data,
  .analytics .search-form-data {
    margin-top: 0px;
  }

  .Portal .search-form-data .Row,
  .analytics .search-form-data .Row {
    grid-template:
      "DataCheckbox DataType"
      "DataCheckbox DataName"
      "DataCheckbox DataCompare"
      "DataCheckbox DataInput";
    grid-template-columns: max-content auto;
  }

  .analytics.search-result-activities .content-body {
    padding-top: 0px;
  }

  .analytics .list-body-container {
    height: auto !important;
    margin-left: -16px;
    margin-right: -16px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-radius: 0px;
    overflow-x: auto;
  }

  .analytics .list-body tr td.InformationCellText {
    width: unset;
  }

  .analytics .InformationCellNumeric,
  .analytics .InformationCellNumericLink {
    text-align: end;
    padding: 12px 30px 12px 0px !important;
  }

  .analytics .TableHeader {
    grid-template-columns: max-content;
    row-gap: 8px;
  }

  .analytics .TableHeader .Select + .ui-selectmenu-button.ui-button {
    width: calc(100vw - 76px);
  }

  .analytics .dataTableContainer {
    height: auto !important;
    margin-left: -16px;
    margin-right: -16px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-radius: 0px;
    overflow-x: auto;
  }

  body.search-form .content-area,
  body.mobile.search-form.Refine .content-area {
    grid-template-rows: auto 1fr 80px;
  }

  .Portal.search-form .content-footer .Footer,
  .analytics .content-footer .Footer {
    padding: 16px 24px 24px 24px;
  }

  .Portal.AdvancedGrid .content-body {
    height: unset;
    padding: 16px 0px;
  }

  .Portal.AdvancedGrid .content-body .toolbar,
  .Portal.AdvancedGrid .content-body .list-footer {
    padding: 0px 16px;
    max-width: unset;
    min-width: unset;
    width: unset;
  }

  .ui-widget.ui-dialog {
    width: 100% !important;
    height: 100% !important;
    top: 0px !important;
    left: 0px !important;
    border-radius: unset;
    border: unset !important;
  }

  div#helpDialogWindow {
    height: calc(100vh - 65px) !important;
  }

  .ui-widget.ui-dialog.dialogWindow > .ui-dialog-titlebar.ui-widget-header,
  .ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
    padding: 12px 12px 8px 12px;
  }

  body.Portal.search-result
    .ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
    padding: 14px;
  }

  body.Portal.search-result
    .ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle
    > button {
    top: 16px;
    right: 16px;
  }

  .alertContent {
    height: calc(100vh - 149px);
  }

  body.phone.android .alertContent {
    height: calc(100vh - 205px);
  }

  body.phone.ios .alertContent {
    height: calc(100vh - 231px);
  }

  #callingCardDialogWindow {
    height: calc(100vh - 52px) !important;
  }

  #callingCardDialogWindow > .FormBody {
    border-spacing: 12px 16px;
  }

  #shareViewWindow #shareViewUrlNavValue,
  #shareViewWindow #shareViewUrlValue {
    width: 100%;
  }

  #shareViewWindow #shareViewHtmlValue {
    width: calc(100% - 24px);
    min-width: unset;
    max-width: unset;
  }

  #selectDelegateDialogWindow .Content,
  body.mobile.phone #selectDelegateDialogWindow .Content {
    height: calc(100vh - 153px);
  }

  body.phone.android #selectDelegateDialogWindow .Content {
    height: calc(100vh - 209px);
  }

  #selectDelegateDialogWindow .Select {
    height: calc(100vh - 201px);
  }

  body.dashboard .HomeViewPopup {
    height: calc(100vh - 45px) !important;
  }

  body.mobile.phone #exportGridLink,
  body.mobile.phone #editColumnsLink,
  body.mobile.phone #createGraphLink,
  body.mobile.phone #viewGridLink,
  body.mobile.phone #editGraphLink {
    display: none !important;
  }

  #graphDialogWindow,
  #statsDataDialog {
    height: calc(100vh - 16px) !important;
  }

  body.Portal.search-form.Refine .FormSection {
    grid-template-columns: auto;
  }

  #statsDataDialog div#selectDataWrapper {
    grid-template-columns: auto;
    grid-template-rows: max-content max-content max-content;
    margin-bottom: 24px;
    height: calc(100vh - 153px);
  }

  body.android.phone #statsDataDialog div#selectDataWrapper {
    height: calc(100vh - 209px);
  }

  body.ios.phone #statsDataDialog div#selectDataWrapper {
    height: calc(100vh - 235px);
  }

  #statsDataDialog div#selectDataButtonsWrapper {
    display: grid;
    grid-template-columns: max-content max-content;
    left: unset;
    justify-content: center;
    column-gap: 10px;
    width: 100%;
  }

  #statsDataDialog input#addSelectedData,
  #statsDataDialog input#removeSelectedData {
    transform: rotate(90deg);
  }

  #statsDataDialog .SelectCustomWidth {
    width: 100%;
  }

  body.mobile div#statsDataDialog .label-counter {
    display: inline-block;
    vertical-align: bottom;
  }

  body.dashboard .content-body,
  .Portal.search-form .content-body,
  .analytics.search-form .content-body {
    padding-bottom: 32px !important;
  }

  body.phone.android .menu-footer .item {
    justify-self: normal;
    align-self: normal;
    padding-top: 16px;
  }

  body.phone.android
    .FormSection
    .Cards
    .action-card
    .assignee-list-content
    .Select#ID_USER_ASSIGNEE_LIST {
    height: 34px;
    min-height: 34px;
  }

  .TableContent .Row .CellText .InTest,
  .Portal .list-body .ListRow .CellText .InTest {
    margin-left: 8px;
  }

  .tag {
    padding-left: 8px !important;
  }

  .content-body .toolbar.grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  a#btn-back-to-chart {
    margin-top: 12px;
    margin-left: 12px;
  }
}
