profoundjs 7.20.3 → 7.21.0

package/htdocs/profoundui/proddata/css/plogic.css

@@ -0,0 +1,4976 @@
+/* -------------------------------------------------------------------------- */
+/* -- Font Definitions and Classes ------------------------------------------ */
+/* -------------------------------------------------------------------------- */
+
+/* -- Regular -- Material Icon Font Face ------------------------------------ */
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/material_icons.woff2") format("woff2");
+}
+
+/* -- Icons -- Material Icon Font Class ------------------------------------- */
+.pui-material-icons,
+.genie-form--screen .pui-material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1.5rem;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga";
+}
+
+/* -- Icons + Outlined -- Material Icon Font Face --------------------------- */
+@font-face {
+  font-family: "Material Icons Outlined";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/material_icons_outlined.woff2") format("woff2");
+}
+
+/* -- Icons + Outlined -- Material Icon Font Class -------------------------- */
+span.pui-material-icons--outlined,
+.pui-material-icons--outlined,
+.genie-form--screen .pui-material-icons--outlined {
+  font-family: "Material Icons Outlined";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1.5rem;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga";
+}
+
+/* -- Icons + Round -- Material Icon Font Face ------------------------------ */
+@font-face {
+  font-family: "Material Icons Round";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/material_icons_round.woff2") format("woff2");
+}
+
+/* -- Icons + Round -- Material Icon Font Class ----------------------------- */
+span.pui-material-icons--round,
+.pui-material-icons--round,
+.genie-form--screen .pui-material-icons--round {
+  font-family: "Material Icons Round";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1.5rem;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga";
+}
+
+/* -- Icons + Two Tone -- Material Icon Font Face --------------------------- */
+@font-face {
+  font-family: "Material Icons Two Tone";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/material_icons_two_tones.woff2") format("woff2");
+}
+
+/* -- Icons + Two Tone -- Material Icon Font Class -------------------------- */
+span.pui-material-icons--two-tone,
+.pui-material-icons--two-tone,
+.genie-form--screen .pui-material-icons--two-tone {
+  font-family: "Material Icons Two Tone";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1.5rem;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga";
+}
+
+/* -- Icons + Sharp -- Material Icon Font Face ------------------------------ */
+@font-face {
+  font-family: "Material Icons Sharp";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/material_icons_sharp.woff2") format("woff2");
+}
+
+/* -- Icons + Sharp -- Material Icon Font Class ----------------------------- */
+span.pui-material-icons--sharp,
+.pui-material-icons--sharp,
+.genie-form--screen .pui-material-icons--sharp {
+  font-family: "Material Icons Sharp";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1.5rem;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga";
+}
+
+/* arimo-regular - latin */
+@font-face {
+  font-family: "Arimo";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/arimo-v16-latin-regular.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/arimo-v16-latin-regular.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/arimo-v16-latin-regular.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-regular.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/arimo-v16-latin-regular.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-regular.svg#Arimo") format("svg");
+  /* Legacy iOS */
+}
+
+/* arimo-500 - latin */
+@font-face {
+  font-family: "Arimo";
+  font-style: normal;
+  font-weight: 500;
+  src: url("../fonts/arimo-v16-latin-500.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/arimo-v16-latin-500.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/arimo-v16-latin-500.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-500.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/arimo-v16-latin-500.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-500.svg#Arimo") format("svg");
+  /* Legacy iOS */
+}
+
+/* arimo-600 - latin */
+@font-face {
+  font-family: "Arimo";
+  font-style: normal;
+  font-weight: 600;
+  src: url("../fonts/arimo-v16-latin-600.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/arimo-v16-latin-600.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/arimo-v16-latin-600.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-600.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/arimo-v16-latin-600.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-600.svg#Arimo") format("svg");
+  /* Legacy iOS */
+}
+
+/* arimo-italic - latin */
+@font-face {
+  font-family: "Arimo";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../fonts/arimo-v16-latin-italic.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/arimo-v16-latin-italic.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/arimo-v16-latin-italic.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-italic.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/arimo-v16-latin-italic.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-italic.svg#Arimo") format("svg");
+  /* Legacy iOS */
+}
+
+/* arimo-700 - latin */
+@font-face {
+  font-family: "Arimo";
+  font-style: normal;
+  font-weight: 700;
+  src: url("../fonts/arimo-v16-latin-700.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/arimo-v16-latin-700.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/arimo-v16-latin-700.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-700.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/arimo-v16-latin-700.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-700.svg#Arimo") format("svg");
+  /* Legacy iOS */
+}
+
+/* arimo-500italic - latin */
+@font-face {
+  font-family: "Arimo";
+  font-style: italic;
+  font-weight: 500;
+  src: url("../fonts/arimo-v16-latin-500italic.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/arimo-v16-latin-500italic.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/arimo-v16-latin-500italic.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-500italic.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/arimo-v16-latin-500italic.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-500italic.svg#Arimo") format("svg");
+  /* Legacy iOS */
+}
+
+/* arimo-600italic - latin */
+@font-face {
+  font-family: "Arimo";
+  font-style: italic;
+  font-weight: 600;
+  src: url("../fonts/arimo-v16-latin-600italic.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/arimo-v16-latin-600italic.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/arimo-v16-latin-600italic.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-600italic.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/arimo-v16-latin-600italic.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-600italic.svg#Arimo") format("svg");
+  /* Legacy iOS */
+}
+
+/* arimo-700italic - latin */
+@font-face {
+  font-family: "Arimo";
+  font-style: italic;
+  font-weight: 700;
+  src: url("../fonts/arimo-v16-latin-700italic.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/arimo-v16-latin-700italic.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/arimo-v16-latin-700italic.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/arimo-v16-latin-700italic.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/arimo-v16-latin-700italic.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/arimo-v16-latin-700italic.svg#Arimo") format("svg");
+  /* Legacy iOS */
+}
+
+/* gudea-regular - latin */
+@font-face {
+  font-family: "Gudea";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/gudea-v10-latin-regular.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/gudea-v10-latin-regular.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/gudea-v10-latin-regular.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/gudea-v10-latin-regular.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/gudea-v10-latin-regular.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/gudea-v10-latin-regular.svg#Gudea") format("svg");
+  /* Legacy iOS */
+}
+
+/* gudea-italic - latin */
+@font-face {
+  font-family: "Gudea";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../fonts/gudea-v10-latin-italic.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/gudea-v10-latin-italic.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/gudea-v10-latin-italic.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/gudea-v10-latin-italic.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/gudea-v10-latin-italic.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/gudea-v10-latin-italic.svg#Gudea") format("svg");
+  /* Legacy iOS */
+}
+
+/* gudea-700 - latin */
+@font-face {
+  font-family: "Gudea";
+  font-style: normal;
+  font-weight: 700;
+  src: url("../fonts/gudea-v10-latin-700.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/gudea-v10-latin-700.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/gudea-v10-latin-700.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/gudea-v10-latin-700.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/gudea-v10-latin-700.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/gudea-v10-latin-700.svg#Gudea") format("svg");
+  /* Legacy iOS */
+}
+
+/* share-tech-mono-regular - latin */
+@font-face {
+  font-family: "Share Tech Mono";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/share-tech-mono-v10-latin-regular.eot");
+  /* IE9 Compat Modes */
+  src: local(""), url("../fonts/share-tech-mono-v10-latin-regular.eot?#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */ url("../fonts/share-tech-mono-v10-latin-regular.woff2") format("woff2"),
+    /* Super Modern Browsers */ url("../fonts/share-tech-mono-v10-latin-regular.woff") format("woff"),
+    /* Modern Browsers */ url("../fonts/share-tech-mono-v10-latin-regular.ttf") format("truetype"),
+    /* Safari, Android, iOS */ url("../fonts/share-tech-mono-v10-latin-regular.svg#ShareTechMono") format("svg");
+  /* Legacy iOS */
+}
+
+/* -------------------------------------------------------------------------- */
+/* -- End -- Font Definitions and Classes ----------------------------------- */
+/* -------------------------------------------------------------------------- */
+
+:root {
+  --color--primary: #0099cc;
+  --color--primary-10: #0099cc1a;
+  --color--primary-20: #0099cc33;
+  --color--primary-40: #0099cc66;
+  --color--primary-50: #0099cc80;
+  --color--primary-90: #0099cce6;
+  --color--primary--text: #ffffff;
+  --color--primary--hover: #0086b3;
+  --color--primary--light: #91d0ed;
+  --color--primary--light-10: #91d0ed1a;
+  --color--primary--light-20: #91d0ed33;
+  --color--primary--light-40: #91d0ed66;
+  --color--primary--light-50: #91d0ed80;
+  --color--primary--light--hover: #65bde6;
+  --color--primary--light--text: #212121;
+  --color--primary--dark: #007399;
+  --color--primary--dark-10: #0073991a;
+  --color--primary--dark-20: #00739933;
+  --color--primary--dark-40: #00739966;
+  --color--primary--dark-50: #00739980;
+  --color--primary--dark--hover: #006080;
+
+  --color--secondary: #a6a6a6;
+  --color--secondary--text: #ffffff;
+  --color--secondary--hover: #999999;
+  --color--secondary-10: #a6a6a61a;
+  --color--secondary-20: #a6a6a633;
+  --color--secondary-40: #a6a6a666;
+  --color--secondary-50: #a6a6a680;
+  --color--secondary--dark: #8c8c8c;
+  --color--secondary--dark--hover: #737373;
+  --color--secondary--dark--text: #ffffff;
+
+  --color--tertiary: #ffffff;
+  --color--tertiary--text: var(--color--dark);
+  --color--tertiary--hover: #f2f2f2;
+  --color--tertiary-10: #ffffff1a;
+  --color--tertiary-20: #ffffff33;
+  --color--tertiary-40: #ffffff66;
+  --color--tertiary--dark: #e6e6e6;
+  --color--tertiary--dark--hover: #d9d9d9;
+  --color--tertiary--dark--text: var(--color--dark);
+
+  --color--excel: #107c41;
+  --color--pdf: #b30b00;
+  --color--powerpoint: #c43e1c;
+  --color--word: #185abd;
+
+  /* BS colors */
+  --color--success: #198754;
+
+  --color--info: #0bb8da;
+
+  --color--warning: #ffc107;
+  --color--warning--hover: #e6ac00;
+
+  --color--danger: #da2525;
+  --color--danger--hover: #ae1e1e;
+
+  --color--light: #f8f9fa;
+
+  --color--dark: #212529;
+
+  --color--blue: #0d6efd;
+
+  --color--indigo: #6610f2;
+
+  --color--purple: #6f42c1;
+
+  --color--pink: #ff66ff;
+
+  --color--red: #dc3545;
+
+  --color--orange: #fd7e14;
+  --color--orange--hover: #e36802;
+
+  --color--yellow: #ffc107;
+  --color--yellow--hover: #e6ac00;
+
+  --color--green: #198754;
+
+  --color--teal: #20c997;
+
+  --color--cyan: #0bb8da;
+
+  --color--white: #fff;
+
+  --color--gray: var(--color--secondary--dark);
+
+  --color--gray-dark: #343a40;
+
+  --color--brown: #8f5600;
+
+  --color--navy: #00458a;
+  /* End of BS colors */
+
+  --color--accent: #a6a6a6;
+  --color--accent--text: #ffffff;
+  --color--hover--text: #fb78fe;
+  --color--visited--text: #00529b;
+  --color--active--text: #d8000c;
+  --color--disabled--text: #555555;
+  --color--disabled--background: #b6b6b6;
+  --color--header: #212121;
+  --color--header--alt: #0099cc;
+  --color--input: #212121;
+  --color--label: #0099cc;
+  --color--title: #212121;
+  --color--subtitle: #333333;
+  --color--affirmative--dark: #4f8a10;
+  --color--affirmative--dark--hover: #5d9323;
+  --color--affirmative--light: #dff2bf;
+  --color--dropbox--background: #c7c7c763;
+  --color--dropbox--background--drag-over: #dff2bf56;
+  --color--negative--dark: #d8000c;
+  --color--negative--dark--hover: #db141f;
+  --color--negative--light: #ffd2d2;
+  --color--warning--dark: #e1ad01;
+  --color--warning--dark--hover: #e3b315;
+  /* --color--warning--light                     : #ffd2d2; */
+  --color--alert--dark: #fda50f;
+  --color--alert--dark--hover: #fdac22;
+  --color--alert--light: #feefb3;
+  --color--poppy--dark--hover: #fb78fe;
+  --color--poppy--hover: #f399ff;
+  --color--poppy--light: #f399ff;
+  --color--poppy--dark: #fb83fe;
+  --color--info--dark: #00529b;
+  --color--info--dark--hover: #1460a3;
+  --color--info--light: #ffffff;
+  --color--divider--50: #00000040;
+  --color--divider: #b6b6b6;
+  --color--body--background: #f5f5f7;
+  --color--cellodd--background: #f9f9f9;
+  --color--panel--header: #00529b;
+  --color--panel--background: #ffffff;
+  --color--input--background: #ffffff;
+  --color--content--background: #fafafa;
+  --color--text--background: transparent;
+  --color--tool-tip--background: #f2f2f3;
+  --color--tool-tip--text: #ffffff;
+  --color--card--background: #f5f5f7;
+  --color--card--text: #343434;
+  --color--grid-cell--hover: #ddd;
+  --color--grid-border: #f6f6f6;
+  --color--scroll-bar--track: #f9f9f9;
+  --color--darken--1e: #0000001e;
+  --color--lighten--80: #ffffff80;
+  --color--button--primary--text: var(--color--white);
+  --color--button--primary--background: var(--color--primary);
+  --color--button--primary--hover: var(--color--primary--hover) radial-gradient(circle, transparent 1%, var(--color--primary--hover) 1%) center/15000%;
+  --color--button--primary--active: var(--color--button--primary--background);
+  --color--button--secondary--text: var(--color--primary--text);
+  --color--button--secondary--background: var(--color--secondary--dark);
+  --color--button--secondary--hover: var(--color--secondary--dark--hover) radial-gradient(circle, transparent 1%, var(--color--secondary--dark--hover) 1%) center/15000%;
+  --color--button--secondary--active: var(--color--button--secondary--background);
+  --color--button--tertiary--text: var(--color--tertiary--text);
+  --color--button--tertiary--background: var(--color--tertiary);
+  --color--button--tertiary--hover: var(--color--tertiary--hover) radial-gradient(circle, transparent 1%, var(--color--tertiary--hover) 1%) center/15000%;
+  --color--button--tertiary--active: var(--color--button--tertiary--background);
+  --color--button--danger--text: var(--color--white);
+  --color--button--danger--background: var(--color--danger);
+  --color--button--danger--hover: var(--color--danger--hover) radial-gradient(circle, transparent 1%, var(--color--danger--hover) 1%) center/15000%;
+  --color--button--danger--active: var(--color--button--danger--background);
+  --color--button--info--text: var(--color--white);
+  --color--button--info--background: var(--color--info);
+  --color--button--info--hover: var(--color--info--hover) radial-gradient(circle, transparent 1%, var(--color--info--hover) 1%) center/15000%;
+  --color--button--info--active: var(--color--button--info--background);
+  --color--button--success--text: var(--color--white);
+  --color--button--success--background: var(--color--success);
+  --color--button--success--hover: var(--color--success--hover) radial-gradient(circle, transparent 1%, var(--color--success--hover) 1%) center/15000%;
+  --color--button--success--active: var(--color--button--success--background);
+  --color--button--warning--text: var(--color--white);
+  --color--button--warning--background: var(--color--warning);
+  --color--button--warning--hover: var(--color--warning--hover) radial-gradient(circle, transparent 1%, var(--color--warning--hover) 1%) center/15000%;
+  --color--button--warning--active: var(--color--button--warning--background);
+  --color--button--orange--text: var(--color--white);
+  --color--button--orange--background: var(--color--orange);
+  --color--button--orange--hover: var(--color--orange--hover) radial-gradient(circle, transparent 1%, var(--color--orange--hover) 1%) center/15000%;
+  --color--button--orange--active: var(--color--button--orange--background);
+  --color--button--outlined--text: var(--color--primary--light--text);
+  --color--button--outlined--background: transparent;
+  --color--button--outlined--hover: var(--default--button--background--hover) radial-gradient(circle, transparent 1%, var(--default--button--background--hover) 1%) center/15000%;
+  --color--button--outlined--active: var(--color--button--outlined--background);
+  --color--button--text-only--text: var(--color--primary--light--text);
+  --color--button--text-only--background: transparent;
+  --color--button--text-only--hover: var(--default--button--background--hover) radial-gradient(circle, transparent 1%, var(--default--button--background--hover) 1%) center/15000%;
+  --color--button--text-only--active: var(--color--button--text-only--background);
+
+  --sidebar--width: 54px;
+  --menu--width: 200px;
+
+  --default--sans-serif-family: "Gudea", arial, sans-serif;
+  --default--monospace-family: monospace;
+  --default--font-size: 1rem;
+  --default--font-style: normal;
+  --default--font-weight: 400;
+  --default--spacing: normal;
+  --default--white-space: pre-wrap;
+  --default--outline: none;
+  --default--border: none;
+  --disabled--sans-serif-family: "Gudea", arial, sans-serif;
+  --disabled--monospace-family: monospace;
+  --disabled--font-size: 0.875rem;
+  --disabled--font-style: italic;
+  --disabled--font-weight: 400;
+  --disabled--spacing: normal;
+  --disabled--white-space: pre-wrap;
+  --disabled--outline: none;
+  --sans--h1--size: 2rem;
+  --sans--h1--weight: 400;
+  --sans--h1--style: normal;
+  --sans--h1--spacing: 0.125rem;
+  --sans--h1--family: "Arimo";
+  --sans--h2--size: 1.5rem;
+  --sans--h2--weight: 700;
+  --sans--h2--spacing: normal;
+  --sans--h2--style: normal;
+  --sans--h2--family: "Gudea";
+  --sans--h3--size: 1.125rem;
+  --sans--h3--weight: 400;
+  --sans--h3--style: normal;
+  --sans--h3--spacing: 0.125rem;
+  --sans--h3--family: "Arimo";
+  --sans--h4--size: 1.125rem;
+  --sans--h4--weight: 700;
+  --sans--h4--style: normal;
+  --sans--h4--spacing: normal;
+  --sans--h4--family: "Gudea";
+  --sans--p--size: 0.875rem;
+  --sans--p--weight: 400;
+  --sans--p--style: normal;
+  --sans--p--spacing: normal;
+  --sans--p--family: "Gudea";
+  --sans--a--size: 0.875rem;
+  --sans--a--weight: 700;
+  --sans--a--style: normal;
+  --sans--a--spacing: normal;
+  --sans--a--family: "Gudea";
+  --sans--a--size--hover: 0.875rem;
+  --sans--a--weight--hover: 700;
+  --sans--a--style--hover: normal;
+  --sans--a--spacing--hover: normal;
+  --sans--menu--a--size: 0.875rem;
+  --sans--menu--a--weight: 700;
+  --sans--menu--a--style: normal;
+  --sans--menu--a--spacing: normal;
+  --sans--menu--a--family: "Arimo";
+  --sans--menu--a--size--hover: 0.875rem;
+  --sans--menu--a--weight--hover: 700;
+  --sans--menu--a--style--hover: normal;
+  --sans--menu--a--spacing--hover: normal;
+  --sans--menu--a--family--hover: "Arimo";
+  --sans--button--size: 0.875rem;
+  --sans--button--weight: 700;
+  --sans--button--style: normal;
+  --sans--button--spacing: normal;
+  --sans--button--family: "Arimo";
+  --sans--button--size--hover: 0.875rem;
+  --sans--button--weight--hover: 700;
+  --sans--button--style--hover: normal;
+  --sans--button--spacing--hover: normal;
+  --sans--button--family--hover: "Arimo";
+  --sans--label--size: 0.875rem;
+  --sans--label--weight: 400;
+  --sans--label--style: normal;
+  --sans--label--spacing: normal;
+  --sans--label--family: "Arimo";
+  --sans--input--size: 0.875rem;
+  --sans--input--weight: 400;
+  --sans--input--style: normal;
+  --sans--input--spacing: normal;
+  --sans--input--family: "Gudea";
+  --general--all--transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+  --default--button--height: 2.25rem;
+  --default--button--padding: 9px 12px;
+  --default--button--weight: 500;
+  --default--button--border: none;
+  --default--button--border--outlined: 1px solid var(--color--accent);
+  --default--button--border-radius: 0.25rem;
+  --default--button--background: transparent;
+  --default--button--background--hover: #c7c7c7aa;
+  --default--button--icon--font-size: 1.375rem;
+  --default--button--font-size: 0.875rem;
+  --default--button--text-align: center;
+  --default--button--overflow: hidden;
+  --default--button--text-overflow: ellipsis;
+  --default--button--white-space: nowrap;
+  --default--button--elevation: var(--elevation-dp0);
+  --default--button--elevation--solid: var(--elevation-dp3);
+  --default--button--elevation--solid--hover: var(--elevation-dp7);
+  --default--button--elevation--solid--active: var(--elevation-dp12);
+  --elevation--transition: box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  --elevation-dp0: none;
+  --elevation-dp1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  --elevation-dp2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  --elevation-dp3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  --elevation-dp4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  --elevation-dp5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+  --elevation-dp6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  --elevation-dp7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+  --elevation-dp8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  --elevation-dp9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
+  --elevation-dp10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
+  --elevation-dp11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
+  --elevation-dp12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+  --elevation-dp13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
+  --elevation-dp14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
+  --elevation-dp15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
+  --elevation-dp16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+  --elevation-dp17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
+  --elevation-dp18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
+  --elevation-dp19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
+  --elevation-dp20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
+  --elevation-dp21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
+  --elevation-dp22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
+  --elevation-dp23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
+  --elevation-dp24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  --standard--input--focus-ring: 0 0 0 0.3rem var(--color--primary-20);
+  --standard--height: 2.25rem;
+  --incell--standard--height: 1.5rem;
+  --grid--row--height: 33px;
+  --standard--input--height: 2.25rem;
+  --standard--option--height: 2.125rem;
+  --tab-panel--header--height: 3rem;
+  --default--box-sizing: border-box;
+  --default--border-radius: 7px;
+  --mobile--input--focus-ring: 0 0 0 0.2rem var(--color--primary-20);
+  --mobile--standard--height: 1.375rem;
+  --incell--mobile--height: 1.375rem;
+  --mobile--top-bar--height: 2rem;
+  --mobile--bottom-bar--height: 2.2rem;
+  --mobile--input--height: 1.375rem;
+  --mobile--grid--row--height: 1.375rem;
+  --mobile--font-size: 0.9rem;
+
+  /* ------------------------------------------------------------------------ */
+  /* -- Screen Customizations ----------------------------------------------- */
+  /* ------------------------------------------------------------------------ */
+  --screen-width: 80;
+  --screen-height: 24;
+  --column-width: 9px;
+  --menu-max-width: 400px;
+  --empty-elements--display: none;
+  --sign-on--show-user: visible;
+  --sign-on--show-pass: visible;
+  --sign-on--show-prog: none;
+  --sign-on--show-menu: none;
+  --sign-on--show-clib: none;
+  /* ------------------------------------------------------------------------ */
+  /* -- Logo Customizations ------------------------------------------------- */
+  /* ------------------------------------------------------------------------ */
+  /* -- Sign On Screen Logo ------------------------------------------------- */
+  --logo-sign-on-url: url("images/logo_white.png");
+  --logo-sign-on-height: 4rem;
+  --logo-sign-on-width: auto;
+  --logo-sign-on-max-height: 10vh;
+  --logo-sign-on-min-height: 1vh;
+  --logo-sign-on-max-width: auto;
+  --logo-sign-on-min-width: auto;
+  --logo-sign-on-repeat: no-repeat;
+  --logo-sign-on-fill: contain;
+  --logo-sign-on-padding: 0;
+  --logo-sign-on-position: relative;
+  --logo-sign-on-left: unset;
+  --logo-sign-on-right: unset;
+  --logo-sign-on-0-0: center;
+  --logo-sign-on-display: block;
+  /* -- General Screen Logo ------------------------------------------------- */
+  --logo-url: url("images/logo_color.png");
+  --logo-height: 4rem;
+  --logo-width: auto;
+  --logo-max-height: 10vh;
+  --logo-min-height: 1vh;
+  --logo-max-width: auto;
+  --logo-min-width: auto;
+  --logo-repeat: no-repeat;
+  --logo-fill: contain;
+  --logo-padding: 0;
+  --logo-position: relative;
+  --logo-left: unset;
+  --logo-right: unset;
+  --logo-0-0: center;
+  --logo-sign-on-display: block;
+  /* ------------------------------------------------------------------------ */
+  /* -- Color Customizations ------------------------------------------------ */
+  /* ------------------------------------------------------------------------ */
+  /* ---- Primary Color ----------------------------------------------------- */
+  --color--primary--dark--text: #ffffff;
+  /* ---- Secondary Color --------------------------------------------------- */
+  /* ---- Text Colors ------------------------------------------------------- */
+  --color--text--primary: #212121;
+  --color--text--primary--alt: #009be3;
+  --color--text--secondary: #727272;
+  --color--text--success: #4f8a10;
+  --color--text--failure: #d8000c;
+  --color--text--warning: #e1ad01;
+  --color--text--alert: #fda50f;
+  --color--text--poppy: #fb78fe;
+  --color--text--info: #00529b;
+  --color--text--disabled: #555555;
+  --color--text--inverse: #ffffff;
+  /* ---- General Colors ---------------------------------------------------- */
+  --color--background--highlight: #f5f5f5;
+  --color--background--disabled: #d4d4d4;
+  --color--background--success: #dff2bf;
+  --color--background--failure: #ffd2d2;
+  --color--background--warning: #ffd2d2;
+  --color--background--alert: #feefb3;
+  --color--background--info: #bde5f8;
+  --color--tool-tip--text: #ffffff;
+  --color--side-bar-background: #009be3;
+  --color--side-bar-text: white;
+  --color--side-menu-background: #009be3;
+  --color--side-menu-text: white;
+  --color--window--background: #ffffff;
+  --color--dropdown--background: #ffffff;
+  --color--card--background: #f5f5f7;
+  --color--card--background--alt: #7eb5e7;
+  /* ------------------------------------------------------------------------ */
+  /* -- Animation Customizations -------------------------------------------- */
+  /* ------------------------------------------------------------------------ */
+  --general--height--transition: height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+  /* ------------------------------------------------------------------------ */
+  /* -- Border Customizations ----------------------------------------------- */
+  /* ------------------------------------------------------------------------ */
+  /* --default--button--border: none; */
+  /* ------------------------------------------------------------------------ */
+}
+
+
+* {
+  outline: none;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  height: 100vh;
+  width: 100vw;
+}
+
+body,
+#pui {
+  height: 100%;
+  width: 100%;
+  background: var(--color--body--background);
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--default--sans-serif-family);
+  font-size: var(--default--font-size);
+  color: var(--color--text--primary);
+  background: var(--color--body--background);
+  margin: 0;
+  padding: 0;
+}
+
+body.monoSpace,
+body.monospace {
+  font-family: var(--default--monospace-family);
+  font-size: var(--default--font-size);
+}
+
+/* Copy Mode */
+.copyMode-result {
+  position: absolute;
+  left: 50vw;
+  top: 50vh;
+  width: 160px;
+  height: 60px;
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  box-shadow: var(--elevation-dp4);
+  transform: translateX(-50%) translateY(-50%);
+  z-index: 10000001;
+}
+.copyMode-result-title {
+  position: absolute;
+  top: 0px;
+  color: var(--color--success);
+  font-family: Gudea;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  width: 100%;
+  line-height: 60px;
+  height: 60px;
+}
+
+#copyModeSelectionRectangle {
+  position: absolute;
+  border: 2px dashed var(--color--primary--dark--hover);
+  background-color: var(--color--primary);
+  opacity: 0.2;
+  pointer-events: none;
+}
+
+#copyModeMask {
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  width: 100%;
+  background: var(--color--success);
+  opacity: 0.1;
+  z-index: 10000000;
+  display: none;
+}
+
+.copyMode-selected-element {
+  color: var(--color--success) !important;
+  background: #7ee7b6 !important;
+  box-shadow: 0 0 0 1px #3ddb92 !important;
+  border-radius: 0.25rem !important;
+  -webkit-transition: background 0s !important;
+  -moz-transition: background 0s !important;
+  -ms-transition: background 0s !important;
+  -o-transition: background 0s !important;
+  transition: background 0s !important;
+}
+span.copyMode-selected-element {
+  border-radius: 0.5rem !important;
+}
+
+/* Genie */
+.genie--logo {
+  position: relative;
+  background: var(--logo-url);
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  width: 100%;
+}
+
+.genie-logobanner {
+  position: relative;
+  background-repeat: no-repeat;
+  background-size: auto 50%;
+  background-position: right center;
+  padding: 1rem;
+  height: 100%;
+  width: 100%;
+  grid-row: 1;
+  grid-column: 1 / span 2;
+  justify-self: flex-end;
+}
+
+.genie-logo-container {
+  background-image: var(--logo-url);
+  background-repeat: var(--logo-repeat);
+  background-position: var(--logo-0-0);
+  background-size: var(--logo-fill);
+  width: var(--logo-width);
+  max-width: var(--logo-max-width);
+  min-width: var(--logo-min-width);
+  position: var(--logo-position);
+  height: var(--logo-height);
+  padding: var(--logo-padding);
+  right: var(--logo-right);
+}
+
+.genie-screen--body .genie-copyright {
+  font-size: var(--sans--label--size);
+  font-family: var(--sans--label--family);
+  white-space: pre-wrap;
+  text-align: center;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.genie-screen--body .genie-copyright > .genie-i--copyright {
+  font-size: var(--sans--label--size);
+  display: inline;
+}
+
+/* Screen Container */
+.genie-main {
+  height: 100vh;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-auto-flow: row;
+  grid-template-columns: auto 1fr;
+}
+
+.genie-container {
+  z-index: 8;
+  position: fixed; /* This allows Page Up/Down to work properly in TinyMCE with Chrome/Edge */
+  height: 100%;
+  width: calc(100% - (var(--sidebar--width)));
+  grid-row-start: 1;
+  grid-column: 2;
+  display: grid;
+  grid-template-columns: 1fr minmax(1fr, calc(var(--column-width) * var(--screen-width)));
+  grid-template-rows: minmax(auto, 1fr) 9fr;
+  overflow: overlay;
+  margin-left: var(--sidebar--width);
+}
+
+.genie-form--screen {
+  position: absolute;
+  height: 100%;
+  max-height: 100%;
+  min-height: 400px;
+  width: 100%;
+  overflow: visible;
+}
+
+.genie-form--screen [class^="genie-window--"] {
+  background: var(--color--window--background);
+  box-shadow: var(--elevation-dp4);
+  border-radius: 0.25rem;
+  -webkit-border-radius: 0.25rem;
+  -moz-border-radius: 0.25rem;
+  -ms-border-radius: 0.25rem;
+  -o-border-radius: 0.25rem;
+}
+
+.genie-form--screen .genie-window--title {
+  left: 1rem;
+  width: calc(100% - 2rem);
+  text-align: center;
+  font-weight: var(--sans--h4--weight);
+  font-size: var(--sans--h4--size);
+  color: var(--color--header--alt);
+  font-family: var(--sans--h4--family);
+  border-bottom: 1px solid var(--color--accent);
+}
+
+.genie-screen--body div[id="5250"] {
+  width: min-content !important;
+  min-width: calc(100vw - var(--sidebar--width));
+  height: 100%;
+}
+
+.genie-wide-screen--body div[id="5250"] {
+  width: min-content !important;
+  min-width: calc(100vw - var(--sidebar--width));
+  height: 100%;
+  display: block;
+  grid-row: 1 / span 2;
+  grid-column: 1;
+}
+
+.genie-5250 {
+  position: relative;
+  left: 0px;
+  overflow: initial;
+  display: grid;
+  grid-row: 1 / span 2;
+  grid-column: 1 / span 2;
+  transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.genie-5250-offset {
+  left: var(--menu--width);
+}
+/* End of Screen container */
+
+[class*="genie-"],
+[class*="genie-"] * {
+  box-sizing: border-box;
+}
+
+/* -- Firefox specific */
+@supports (-moz-appearance:none) {
+  .genie-container {
+    overflow: auto;
+  }
+}
+
+.hide {
+  visibility: hidden;
+}
+
+/**************************************************************/
+/************************ COLORS ******************************/
+/**************************************************************/
+
+/* color */
+.color-primary-light {
+  color: var(--color--primary--light);
+}
+.color-primary {
+  color: var(--color--primary);
+}
+.color-primary-50 {
+  color: var(--color--primary-50);
+}
+.color-primary-dark {
+  color: var(--color--primary--dark);
+}
+
+.color-secondary {
+  color: var(--color--secondary);
+}
+.color-secondary-50 {
+  color: var(--color--secondary--50);
+}
+.color-secondary-dark {
+  color: var(--color--secondary--dark);
+}
+
+.color-success {
+  color: var(--color--success);
+}
+.color-info {
+  color: var(--color--info);
+}
+.color-warning {
+  color: var(--color--warning);
+}
+.color-danger {
+  color: var(--color--danger);
+}
+.color-gray {
+  color: var(--color--gray);
+}
+.color-dark {
+  color: var(--color--dark);
+}
+.color-blue {
+  color: var(--color--blue);
+}
+.color-brown {
+  color: var(--color--brown);
+}
+.color-cyan {
+  color: var(--color--cyan);
+}
+.color-green {
+  color: var(--color--green);
+}
+.color-indigo {
+  color: var(--color--indigo);
+}
+.color-navy {
+  color: var(--color--navy);
+}
+.color-orange {
+  color: var(--color--orange);
+}
+.color-pink {
+  color: var(--color--pink);
+}
+.color-red {
+  color: var(--color--red);
+}
+.color-teal {
+  color: var(--color--teal);
+}
+.color-white {
+  color: var(--color--white);
+}
+.color-yellow {
+  color: var(--color--yellow);
+}
+.color-excel {
+  color: var(--color--excel);
+}
+.color-powerpoint {
+  color: var(--color--powerpoint);
+}
+.color-word {
+  color: var(--color--word);
+}
+.color-pdf {
+  color: var(--color--pdf);
+}
+.color-transparent {
+  color: transparent;
+}
+.design .color-transparent {
+  background: linear-gradient(to right, #00ff00, #ff33cc);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/**************************************************************/
+/******************* END OF COLORS ****************************/
+/**************************************************************/
+
+[class*="plogic--"] {
+  font-family: var(--default--sans-serif-family);
+  font-size: var(--default--font-size);
+  font-style: var(--default--font-style);
+  font-weight: var(--default--font-weight);
+  letter-spacing: var(--default--spacing);
+  white-space: var(--default--white-space);
+  border: var(--default--border);
+}
+.plogic--hex {
+  display: flex;
+}
+.plogic--monospace div {
+  white-space: pre;
+}
+.plogic--monospace,
+.plogic--grid .cell.header-cell .plogic--monospace,
+.plogic--grid .cell.header-cell.plogic--monospace > div {
+  font-family: var(--default--monospace-family);
+  font-size: 1.063rem;
+  letter-spacing: -0.5px;
+}
+
+[class*="plogic--"] {
+  box-sizing: var(--default--box-sizing);
+  outline: var(--default--outline);
+}
+
+[class*="plogic--"][disabled="true"],
+[class*="plogic--"][disabled] {
+  opacity: 0.6;
+}
+
+[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[disabled="true"],
+[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[disabled] {
+  font-family: var(--default--sans-serif-family);
+  font-style: var(--default--font-style);
+  font-weight: var(--default--font-weight);
+  letter-spacing: var(--default--spacing);
+  white-space: var(--default--white-space);
+  box-sizing: var(--default--box-sizing);
+  outline: var(--default--outline);
+  color: var(--color--disabled--text);
+}
+[class*="plogic--"]:not([class*="plogic--button"]):not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[disabled="true"],
+[class*="plogic--"]:not([class*="plogic--button"]):not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[disabled] {
+  font-size: var(--default--font-size);
+}
+[class*="plogic--button"][disabled="true"],
+[class*="plogic--button"][disabled] {
+  font-size: var(--default--button--font-size);
+}
+
+[class*="plogic--button"]:not(span),
+button[class*="plogic--"] {
+  height: var(--default--button--height);
+}
+
+input[class*="plogic--"],
+select[class*="plogic--"] {
+  height: var(--standard--input--height);
+}
+
+.cell input.plogic--input,
+.cell input.plogic--date-field {
+  height: var(--incell--standard--height);
+  margin-top: -1px;
+}
+
+[class*="plogic--button"] {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-items: center;
+  justify-content: center;
+  overflow: var(--default--button--overflow);
+  border: var(--default--button--border);
+  background: var(--default--button--background);
+  box-shadow: var(--default--button--elevation);
+  border-radius: var(--default--button--border-radius);
+  -webkit-border-radius: var(--default--button--border-radius);
+  -moz-border-radius: var(--default--button--border-radius);
+  -ms-border-radius: var(--default--button--border-radius);
+  -o-border-radius: var(--default--button--border-radius);
+  -webkit-transition: background 0.8s, var(--elevation--transition);
+  -moz-transition: background 0.8s, var(--elevation--transition);
+  -ms-transition: background 0.8s, var(--elevation--transition);
+  -o-transition: background 0.8s, var(--elevation--transition);
+  font-size: var(--default--button--font-size);
+  font-weight: var(--default--button--weight);
+  text-align: var(--default--button--text-align);
+  text-overflow: var(--default--button--text-overflow);
+  white-space: var(--default--button--white-space);
+  cursor: pointer;
+  transition: background 0.8s, var(--elevation--transition);
+}
+
+[class*="plogic--button"]:hover {
+  border: none;
+  cursor: pointer;
+}
+
+[class*="plogic--button"]:active {
+  border: none;
+  cursor: pointer;
+}
+[class*="plogic--button"]:active > span {
+  box-shadow: none;
+}
+
+[class*="plogic--button"] > * {
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+}
+
+[class*="plogic--button"]:hover > * {
+  background: 0 0;
+  box-shadow: none;
+}
+
+[class*="plogic--button"] > .pui-material-icons {
+  text-transform: none;
+  font-size: var(--default--button--icon--font-size);
+}
+
+[class*="plogic--button"] > span:not(.pui-material-icons) {
+  display: block;
+  overflow: hidden;
+  flex-grow: 1;
+  white-space: nowrap;
+  text-overflow: var(--default--button--text-overflow);
+  text-align: left;
+}
+button.plogic--button--removeFilter {
+  border: none;
+  height: 25px;
+  color: var(--color--orange);
+  z-index: 99;
+}
+.plogic--button--removeFilter:hover {
+  color: var(--color--orange--hover);
+}
+.plogic--button--removeFilter:active {
+  color: var(--color--danger);
+}
+.plogic--button--removeFilter > span:not(.pui-material-icons) {
+  font-size: 16px;
+  text-align: inherit;
+}
+
+.plogic--button--disabled,
+[class*="plogic--button"][disabled="true"],
+[class*="plogic--button"][disabled] {
+  color: var(--color--disabled--text);
+  background: var(--color--disabled--background);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.plogic--button--primary[disabled],
+.plogic--button--primary[disabled="true"] {
+  background: var(--color--primary--hover);
+}
+.plogic--button--danger[disabled],
+.plogic--button--danger[disabled="true"] {
+  background: var(--color--danger--hover);
+}
+.plogic--button--orange[disabled],
+.plogic--button--orange[disabled="true"] {
+  background: var(--color--orange--hover);
+}
+
+[class*="pui-floating-placeholder-plogic--"] {
+  display: flex;
+  border-radius: var(--default--border-radius);
+  height: var(--standard--height);
+}
+
+.pui-floating-placeholder-PR {
+  visibility: hidden;
+}
+
+input[class*="plogic--"],
+textarea[class*="plogic--"],
+select[class*="plogic--"] {
+  border: 1px solid var(--color--accent);
+  color: var(--color--text--primary);
+}
+.plogic--no-border,
+input.plogic--input.plogic--no-border
+ {
+  border: none;
+  border-top: none;
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+}
+input[class*="plogic--"]:not(.plogic--spinner),
+textarea[class*="plogic--"] {
+  padding: 0.375rem;
+}
+input.combo-main-box.plogic--combo-box {
+  padding-right: 2px;
+}
+input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]),
+textarea[class*="plogic--"],
+select[class*="plogic--"],
+.combo-main.plogic--combo-box {
+  border-radius: var(--default--border-radius);
+  transition: border-color ease-in-out 250ms, box-shadow ease-in-out 250ms;
+}
+input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[readonly="true"],
+[id*="dspfDesigner"]:not(.design) > input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[readonly],
+input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]).PR,
+input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]).PR-UL,
+textarea[class*="plogic--"][readonly="true"],
+textarea[class*="plogic--"][readonly],
+textarea[class*="plogic--"].PR,
+textarea[class*="plogic--"].PR-UL,
+select[class*="plogic--"][readonly="true"],
+select[class*="plogic--"][readonly],
+select[class*="plogic--"].PR,
+.combo-main.plogic--combo-box[readonly="true"],
+.combo-main.plogic--combo-box[readonly],
+.combo-main.plogic--combo-box.PR,
+.combo-main.plogic--combo-box.PR-UL {
+  padding-left: 0;
+  background: none;
+  border: none;
+  pointer-events: none;
+}
+/* Make protected elements clickable in the IDE */
+.design input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"])[readonly="true"],
+.design input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]).PR,
+.design input[class*="plogic--"]:not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]).PR-UL,
+.design textarea[class*="plogic--"][readonly="true"],
+.design textarea[class*="plogic--"][readonly],
+.design textarea[class*="plogic--"].PR,
+.design textarea[class*="plogic--"].PR-UL,
+.design select[class*="plogic--"][readonly="true"],
+.design select[class*="plogic--"][readonly],
+.design select[class*="plogic--"].PR,
+.design .combo-main.plogic--combo-box[readonly="true"],
+.design .combo-main.plogic--combo-box[readonly],
+.design .combo-main.plogic--combo-box.PR,
+.design .combo-main.plogic--combo-box.PR-UL {
+  pointer-events: unset;
+}
+.pill {
+  border-radius: 500px;
+  -webkit-border-radius: 500px;
+  -moz-border-radius: 500px;
+  -ms-border-radius: 500px;
+  -o-border-radius: 500px;
+  border: 1px solid var(--color--accent);
+}
+
+.plogic--hr hr {
+  height: 0;
+  border: none;
+  border-top: solid 1px var(--color--secondary);
+}
+
+.plogic--h1,
+.plogic--text-header {
+  font-family: var(--sans--h1--family);
+  font-size: var(--sans--h1--size);
+  font-weight: var(--sans--h1--weight);
+  letter-spacing: var(--sans--h1--spacing);
+  color: var(--color--primary);
+  background: var(--color--text--background);
+}
+
+.plogic--h2,
+.plogic--text-sub-header {
+  font-family: var(--sans--h2--family);
+  font-size: var(--sans--h2--size);
+  font-weight: var(--sans--h2--weight);
+  letter-spacing: var(--sans--h2--spacing);
+  color: var(--color--subtitle);
+  background: var(--color--text--background);
+}
+
+.plogic--h3 {
+  font-family: var(--sans--h3--family);
+  font-size: var(--sans--h3--size);
+  font-weight: var(--sans--h3--weight);
+  letter-spacing: var(--sans--h3--spacing);
+  color: var(--color--primary--light--text);
+  background: var(--color--text--background);
+}
+
+.plogic--h4 {
+  font-family: var(--sans--h4--family);
+  font-size: var(--sans--h4--size);
+  font-weight: var(--sans--h4--weight);
+  letter-spacing: var(--sans--h4--spacing);
+  color: var(--color--primary--light--text);
+  background: var(--color--text--background);
+}
+
+.plogic--h5 {
+  font-family: var(--sans--h5--family);
+  font-size: var(--sans--h5--size);
+  font-weight: var(--sans--h5--weight);
+  letter-spacing: var(--sans--h5--spacing);
+  color: var(--color--primary--light--text);
+  background: var(--color--text--background);
+}
+
+.plogic--h6 {
+  font-family: var(--sans--h6--family);
+  font-size: var(--sans--h6--size);
+  font-weight: var(--sans--h6--weight);
+  letter-spacing: var(--sans--h6--spacing);
+  color: var(--color--primary--light--text);
+  background: var(--color--text--background);
+}
+
+.plogic--text-body {
+  text-align: left;
+  line-height: 150%;
+  font-size: 0.875rem;
+}
+
+.plogic--text-blurb {
+  font-size: 1.15rem;
+  letter-spacing: 1.5px;
+  font-weight: bolder;
+  font-variant: small-caps;
+  word-spacing: 25%;
+  line-height: 130%;
+}
+
+.plogic--text-quote {
+  font-size: 1.15rem;
+  letter-spacing: 1px;
+  word-spacing: 50%;
+  font-style: italic;
+  line-height: 150%;
+  text-align: center;
+}
+
+.plogic--text {
+  text-align: left;
+  line-height: 150%;
+}
+
+.plogic--text-em {
+  letter-spacing: 1px;
+  font-style: italic;
+  font-weight: bolder;
+  line-height: 125%;
+}
+
+.plogic--output-field {
+  white-space: pre-wrap;
+}
+
+.plogic--label {
+  font-weight: bolder;
+}
+.plogic--label-center {
+  font-weight: bolder;
+  text-align: center;
+  justify-content: center;
+}
+.plogic--label-right {
+  font-weight: bolder;
+  text-align: right;
+  justify-content: flex-end;
+  justify-items: flex-end;
+}
+
+.plogic--hyperlink:hover a {
+  color: var(--color--hover--text);
+}
+
+.plogic--hyperlink:active a {
+  color: var(--color--active--text);
+}
+
+.plogic--hyperlink:visited a {
+  color: var(--color--visited--text);
+}
+
+.plogic--text-header {
+  font-size: var(--sans--h1--size);
+}
+
+.plogic--wrapping-text {
+  overflow: auto;
+}
+
+.pui-floating-placeholder-label {
+  position: absolute;
+  background: var(--color--input--background);
+  color: var(--color--text--primary);
+  top: -5px;
+  left: 10px;
+  padding: 0 3px;
+  opacity: 0;
+  visibility: hidden;
+  transition: transform 0.25s, opacity 0.25s, visibility 0.25s ease-in-out;
+  transform-origin: 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  max-width: 120%;
+  z-index: 30;
+}
+
+.pui-floating-placeholder-input:focus + .pui-floating-placeholder-label,
+.pui-floating-placeholder-input:not(:placeholder-shown) + .pui-floating-placeholder-label {
+  transform: scale(0.75) translateY(-4px);
+  opacity: 1;
+  visibility: visible;
+}
+
+[class*="pui-floating-placeholder-plogic--"] input[class*="plogic--"],
+[class*="pui-floating-placeholder-plogic--"] textarea[class*="plogic--"] {
+  background: var(--color--input--background);
+  border: 1px solid var(--color--accent);
+  color: var(--color--primary--light--text);
+}
+
+input[class*="plogic--"]:not(.combo-main-box):not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]):focus,
+textarea[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
+select[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
+button[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
+.combo-main.plogic--combo-box:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus-within {
+  box-shadow: var(--standard--input--focus-ring);
+  border: 1px solid var(--color--primary);
+}
+
+.cell input.plogic--input--grid-navigate-only:focus {
+  background: var(--color--primary-20);
+}
+.cell input.plogic--input--grid-navigate-only {
+  background: var(--color--secondary-10);
+}
+.cell input.plogic--input--grid-navigate-only::selection {
+  background: transparent;
+}
+
+button.plogic--button--removeFilter:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus {
+  border: none;
+  box-shadow: none;
+}
+
+.plogic--button--primary {
+  background-position: center;
+  border: 1px solid var(--color--primary);
+  background-color: var(--color--button--primary--background);
+  color: var(--color--button--primary--text);
+  box-shadow: var(--default--button--elevation--solid);
+  padding: 5px;
+}
+
+.plogic--button--primary:hover {
+  border: 1px solid var(--color--primary);
+  background: var(--color--button--primary--hover);
+  box-shadow: var(--default--button--elevation--solid--hover);
+}
+
+.plogic--button--primary:active {
+  background-size: 100%;
+  background-color: var(--color--button--primary--active);
+  box-shadow: var(--default--button--elevation--solid--active);
+  transition: background 0s;
+}
+
+.plogic--button--danger {
+  background-position: center;
+  border: 1px solid var(--color--danger);
+  background-color: var(--color--button--danger--background);
+  color: var(--color--button--danger--text);
+  box-shadow: var(--default--button--elevation--solid);
+  padding: 5px;
+}
+
+.plogic--button--danger:hover {
+  border: 1px solid var(--color--danger);
+  background: var(--color--button--danger--hover);
+  box-shadow: var(--default--button--elevation--solid--hover);
+}
+
+.plogic--button--danger:active {
+  background-size: 100%;
+  background-color: var(--color--button--danger--active);
+  box-shadow: var(--default--button--elevation--solid--active);
+  transition: background 0s;
+}
+
+.plogic--button--mini {
+  border-radius: 500px;
+}
+
+.plogic--button--mini,
+.plogic--button--secondary {
+  background-color: var(--color--transparent);
+  color: var(--color--subtitle);
+}
+
+.plogic--button--secondary {
+  border: 1px solid var(--color--secondary);
+  background-color: var(--color--secondary);
+  color: var(--color--button--primary--text);
+  box-shadow: var(--default--button--elevation--solid);
+  padding: 5px;
+}
+
+.plogic--button--mini:hover,
+.plogic--button--secondary:hover {
+  border: 1px solid var(--color--secondary);
+  background: var(--color--secondary--hover);
+  color: var(--color--secondary--text);
+  box-shadow: var(--default--button--elevation--solid--hover);
+}
+
+.plogic--button--mini:active,
+.plogic--button--secondary:active {
+  background-size: 100%;
+  background-color: var(--color--button--secondary--active);
+  box-shadow: var(--default--button--elevation--solid--active);
+  color: var(--color--secondary--text);
+  transition: background 0s;
+}
+
+.plogic--button--tertiary {
+  background-position: center;
+  border: 1px solid var(--color--tertiary);
+  background-color: var(--color--button--tertiary--background);
+  color: var(--color--primary--light--text);
+  box-shadow: var(--default--button--elevation--solid);
+  padding: 5px;
+}
+
+.plogic--button--tertiary:hover {
+  border: 1px solid var(--color--tertiary);
+  background: var(--color--button--tertiary--hover);
+  box-shadow: var(--default--button--elevation--solid--hover);
+}
+
+.plogic--button--tertiary:active {
+  background-size: 100%;
+  background-color: var(--color--button--tertiary--active);
+  box-shadow: var(--default--button--elevation--solid--active);
+  transition: background 0s;
+}
+
+.plogic--button--warning {
+  background-position: center;
+  border: 1px solid var(--color--warning);
+  background-color: var(--color--button--warning--background);
+  color: var(--color--button--warning--text);
+  box-shadow: var(--default--button--elevation--solid);
+  padding: 5px;
+}
+
+.plogic--button--warning:hover {
+  border: 1px solid var(--color--warning);
+  background: var(--color--button--warning--hover);
+  box-shadow: var(--default--button--elevation--solid--hover);
+}
+
+.plogic--button--warning:active {
+  background-size: 100%;
+  background-color: var(--color--button--warning--active);
+  box-shadow: var(--default--button--elevation--solid--active);
+  transition: background 0s;
+}
+
+.plogic--button--orange {
+  background-position: center;
+  border: 1px solid var(--color--orange);
+  background-color: var(--color--button--orange--background);
+  color: var(--color--button--orange--text);
+  box-shadow: var(--default--button--elevation--solid);
+  padding: 5px;
+}
+
+.plogic--button--orange:hover {
+  border: 1px solid var(--color--orange);
+  background: var(--color--button--orange--hover);
+  box-shadow: var(--default--button--elevation--solid--hover);
+}
+
+.plogic--button--orange:active {
+  background-size: 100%;
+  background-color: var(--color--button--orange--active);
+  box-shadow: var(--default--button--elevation--solid--active);
+  transition: background 0s;
+}
+
+
+.plogic--button,
+.plogic--button--text-only {
+  background-color: var(--color--button--text-only);
+  border: none;
+}
+
+.plogic--button--text-only:hover,
+.plogic--button:hover {
+  background: var(--color--button--text-only--hover);
+  border: none;
+}
+
+.plogic--button--text-only:active,
+.plogic--button:active {
+  background-size: 100%;
+  background-color: var(--color--button--text-only--active);
+  border: none;
+  transition: background 0s;
+}
+
+.plogic--button--outlined {
+  background-color: var(--color--button--outlined);
+  border: var(--default--button--border--outlined);
+  padding-left: 5px;
+  padding-right: 5px;
+  color: var(--color--text--primary);
+}
+.moreMenu .plogic--button--outlined.plogic--ripple {
+  width: 150px;
+}
+span.pui-material-icons-center.plogic--button--outlined {
+  padding: 0;
+}
+
+/* Option Buttons Widget */
+div[puiwdgt="option buttons"] {
+  min-width: 1400px;
+  padding: 0px 25px;
+}
+.window div[puiwdgt="option buttons"] {
+  min-width: 1400px;
+  padding: 0px 20px;
+}
+div[puiwdgt="option buttons"].plogic--option-buttons--double-row {
+  margin-top: -10px;
+}
+div[puiwdgt="option buttons"].plogic--option-buttons--double-row div:not(.cell) > .plogic--constant,
+div[puiwdgt="option buttons"].plogic--option-buttons--double-row div:not(.cell) > .plogic--constant-right,
+div[puiwdgt="option buttons"].plogic--option-buttons--double-row button[class*="plogic--"] {
+  height: 1.5rem;
+  margin-top: 2px;
+}
+div[puiwdgt="option buttons"].plogic--option-buttons--double-row .moreMenu {
+  margin-top: 20px;
+}
+.plogic--more--menu {
+  margin-left: 10px;
+}
+
+.plogic--button--outlined:hover {
+  border: var(--default--button--border--outlined);
+  background: var(--color--button--outlined--hover);
+}
+
+.plogic--button--outlined:active {
+  background-size: 100%;
+  background-color: var(--color--button--outlined--active);
+  transition: background 0s;
+}
+
+.plogic--button--mini:hover > span,
+.plogic--button--mini > span,
+.plogic--button--outlined:hover > span,
+.plogic--button--outlined > span,
+.plogic--button--primary:hover > span,
+.plogic--button--primary > span,
+.plogic--button--secondary:hover > span,
+.plogic--button--secondary > span,
+.plogic--button--tertiary:hover > span,
+.plogic--button--tertiary > span,
+.plogic--button--danger:hover > span,
+.plogic--button--danger > span,
+.plogic--button--info:hover > span,
+.plogic--button--info > span,
+.plogic--button--success:hover > span,
+.plogic--button--success > span,
+.plogic--button--warning:hover > span,
+.plogic--button--warning > span,
+.plogic--button--orange:hover > span,
+.plogic--button--orange > span,
+.plogic--button--text-only:hover > span,
+.plogic--button--text-only > span,
+.plogic--button:hover > span,
+.plogic--button > span {
+  box-shadow: none;
+  background: 0 0;
+  border: none;
+}
+
+.plogic--button--mini:hover > span {
+  color: var(--color--white);
+}
+
+.pui-material-icons {
+  font-family: "Material Icons";
+  text-rendering: optimizeLegibility;
+  font-size: 1.5rem;
+  background: 0 0;
+  text-align: center;
+  -webkit-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga";
+}
+
+.pui-fa-icons {
+  font-family: "Font Awesome 5 Free";
+  -webkit-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+  text-rendering: optimizeLegibility;
+  font-size: 0.875rem;
+  background: 0 0;
+  text-align: center;
+  -moz-font-feature-settings: "liga";
+}
+
+.pui-fa-icons-text,
+.pui-material-icons-text {
+  background: 0 0;
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.plogic--button-secondary.no-icon,
+.plogic--button.no-icon {
+  display: block;
+}
+
+.pui-material-icons-text.plogic--button {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.cell .pui-prompt.pui-prompt-plogic--input.pui-material-icons {
+  margin: 1px 0px 0px -30px;
+  height: 1.375rem;
+  width: 1.438rem;
+  font-size: 1.25rem;
+  padding: 1px 0px 0px 0px;
+}
+.cell.selected .pui-prompt.pui-prompt-plogic--input.pui-material-icons {
+  color: var(--color--secondary--dark);
+}
+.cell.selected .pui-prompt.pui-prompt-plogic--input.pui-material-icons:hover {
+  color: var(--color--secondary--text);
+}
+
+INPUT.plogic--date-field {
+  background-color: var(--color--white);
+  caret-color: var(--color--primary--light--text);
+}
+
+.pui-floating-placeholder-plogic--date-field {
+  display: flex;
+  justify-content: flex-end;
+  justify-items: flex-end;
+  align-content: center;
+  align-items: center;
+}
+
+.pui-floating-placeholder-plogic--date-field > .plogic--date-field {
+  position: absolute;
+  top: 0rem;
+  width: 100%;
+}
+
+.pui-calendar-current-date {
+    border: 2px solid var(--color--primary);
+}
+
+.pui-calendar.pui-calendar-plogic--date-field * {
+  font-family: var(--default--sans-serif-family);
+}
+
+.pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
+  font-size: var(--default--button--icon--font-size);
+  color: var(--color--secondary--dark);
+  z-index: 24;
+  margin-top: -6px;
+  margin-left: -38px;
+  background: var(--color--white);
+  padding: 0px;
+  height: 2.125rem;
+  width: 2rem;
+  border-left: 1px solid var(--color--accent);
+  border-top-left-radius: 0px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 0px;
+  transition: all 0.2s ease-in-out;
+}
+.cell .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
+  margin: 0px 0px 0px -29px;
+  height: 1.375rem;
+  width: 1.438rem;
+  padding-left: 1px;
+}
+.pui-calendar-icon.pui-cal.pui-cal-plogic--date-field:hover {
+  color: var(--color--secondary--text);
+  background: var(--color--accent);
+}
+
+.pui-cal.pui-cal-plogic--date-field.pui-calendar-icon::after {
+  content: "event";
+  display: block;
+  font-family: "Material Icons";
+  font-feature-settings: "liga";
+  text-rendering: optimizeLegibility;
+  font-size: 1.5rem;
+  margin: 4px 0px 0px 3px;
+}
+.cell .pui-cal.pui-cal-plogic--date-field.pui-calendar-icon::after {
+  font-size: 1.25rem;
+  margin: 1px 0px 0px 0px;
+}
+
+.pui-floating-placeholder-plogic--date-field > .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field::after {
+  content: "event";
+  display: block;
+  font-family: "Material Icons";
+  padding: 3px;
+}
+
+.pui-calendar {
+  position: absolute;
+  border-radius: 0.5rem;
+  -webkit-box-shadow: var(--elevation-dp4);
+  box-shadow: var(--elevation-dp4);
+  -webkit-border-radius: 0.5rem;
+  -moz-border-radius: 0.5rem;
+  -ms-border-radius: 0.5rem;
+  -o-border-radius: 0.5rem;
+  width: auto;
+  height: auto;
+  margin: 3px 0px 0px -10px;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar,
+.pui-calendar-plogic--date-field.pui-calendar *,
+.pui-calendar-plogic--date-field.pui-calendar ::after,
+.pui-calendar-plogic--date-field.pui-calendar ::after {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-outer-table {
+  height: 100%;
+  width: 100%;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-outer-table > tbody > tr > td.brndrow1 {
+  background: none;
+  padding: 0;
+}
+
+.pui-calendar .pui-calendar-inner-table {
+  background: var(--color--text--inverse);
+  border-collapse: collapse;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  -webkit-border-radius: 0.25rem;
+  -moz-border-radius: 0.25rem;
+  -ms-border-radius: 0.25rem;
+  -o-border-radius: 0.25rem;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table tr {
+  height: 2rem;
+  background: 0 0;
+}
+
+.pui-calendar .pui-calendar-inner-table td {
+  font-family: var(--sans--h3--family);
+  width: 3rem;
+  height: 3rem;
+  text-align: center;
+  background: none;
+  font-size: 1rem;
+  color: var(--color--text--primary);
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table td {
+  font-weight: 400;
+  padding: 0;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table td.brndrow1:not(.calendar) {
+  line-height: 3rem;
+  color: var(--color--white);
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table td.pui-calendar-selected-date {
+  background: var(--color--primary);
+  color: var(--color--white);
+  border-radius: 500px;
+  border: none;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table > tbody > tr:first-of-type {
+  background: var(--color--secondary--dark);
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-month-year-header {
+  font-size: 1.25rem;
+  color: var(--color--white);
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-week-number-header {
+  font-weight: 900;
+  color: var(--color--white);
+  background: var(--color--secondary);
+  width: 60px;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-weekday-header {
+  color: var(--color--secondary--dark);
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-week-number {
+  font-weight: 900;
+  color: var(--color--white);
+  background: var(--color--secondary);
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-weekend-date {
+  color: var(--color--secondary);
+  background: var(--color--secondary-10);
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-day-inactive-month {
+  color: var(--color--secondary-50);
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table td.pui-calendar-workday-date:hover {
+  background: var(--color--secondary--dark);
+  color: var(--color--white);
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table td.pui-calendar-weekend-date:hover {
+  background: var(--color--secondary--dark--hover);
+  color: var(--color--white);
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-arrow-next-year,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-arrow-prev-year {
+  font-family: "Material Icons";
+  display: flex;
+  background: none;
+  height: 100%;
+  width: 100%;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-arrow-next-month,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .pui-calendar-arrow-prev-month {
+  font-family: "Material Icons";
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: none;
+  height: 100%;
+  width: 100%;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-month::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-month::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-year::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-year::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-month::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-month::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-year::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-year::after {
+  font-family: "Material Icons";
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  letter-spacing: 0;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga";
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-year::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-year::after {
+  content: "chevron_leftchevron_left";
+  letter-spacing: -0.95rem;
+  font-size: 24px;
+  margin: 0 0 0 0.25rem;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-year::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-year::after {
+  content: "chevron_rightchevron_right";
+  letter-spacing: -0.95rem;
+  font-size: 24px;
+  margin: 0 0 0 -0.25rem;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-month::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-prev-month::after {
+  content: "chevron_left";
+  font-size: 24px;
+  margin: 0 0 0 0.25rem;
+  width: 100%;
+}
+
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-month::after,
+.pui-calendar-plogic--date-field.pui-calendar .pui-calendar-inner-table .brndrow1 span.pui-calendar-arrow-next-month::after {
+  content: "chevron_right";
+  font-size: 24px;
+  margin: 0 0 0 -0.25rem;
+  width: 100%;
+}
+
+input[class*="plogic--checkbox"][disabled="true"],
+input[class*="plogic--checkbox"][disabled],
+input[class*="plogic--radio-button"][disabled="true"],
+input[class*="plogic--radio-button"][disabled],
+input[class*="plogic--checkbox"],
+input[class*="plogic--radio-button"] {
+  height: 15px;
+  width: 15px;
+  margin: 0px 0px 0px 2px !important;
+  border-radius: 50%;
+  border: none;
+  appearance: none;
+  transition: box-shadow ease-in-out 250ms;
+}
+input[class*="plogic--checkbox"][disabled="true"],
+input[class*="plogic--checkbox"][disabled],
+input[class*="plogic--checkbox"] {
+  border-radius: 10%;
+}
+
+/* Checkbox */
+/* Checkbox Background */
+input[class*="plogic--checkbox"]::before {
+  content: "\f0c8";
+  font-family: "Font Awesome 5 Free";
+  font-size: 20px;
+  font-weight: 900;
+  margin: -9px 0px 0px -7px;
+  position: absolute;
+  color: var(--color--text--inverse);
+  background: none;
+}
+/* Checkbox Icon */
+input[class*="plogic--checkbox"]::after {
+  content: "\f0c8";
+  font-family: "Font Awesome 5 Free";
+  font-size: 22px;
+  margin: -9.3px 0px 0px -8px;
+  position: absolute;
+  border-radius: 50%;
+  color: var(--color--primary);
+  cursor: pointer;
+}
+/* -- Firefox specific */
+@supports (-moz-appearance:none) {
+  input[class*="plogic--checkbox"]::after {
+    margin: -10.9px 0px 0px -8px;
+  }
+}
+/* Checkbox Indeterminate Icon */
+input[class*="plogic--checkbox"]:indeterminate::after,
+input[class*="plogic--checkbox"][readonly]:indeterminate::after {
+  content: "\f146";
+}
+/* Checkbox Background Checked Icon */
+input[class*="plogic--checkbox"]:checked::before {
+    color: white;
+}
+/* Checkbox Checked Icon */
+input[class*="plogic--checkbox"]:checked::after {
+  content: "\f14a";
+  font-weight: 900;
+  margin: -9.6px 0px 0px -8px;
+  color: var(--color--primary);
+}
+/* Checkbox Output Background */
+input[class*="plogic--checkbox"].PR::before,
+input[class*="plogic--checkbox"][readonly="true"]::before,
+input[class*="plogic--checkbox"][readonly]::before {
+  color: transparent;
+}
+/* Checkbox Output Icon */
+input[class*="plogic--checkbox"].PR::after,
+input[class*="plogic--checkbox"][readonly="true"]::after,
+input[class*="plogic--checkbox"][readonly]::after {
+  content: "\f0c8";
+  font-weight: 100;
+  margin: -9.3px 0px 0px -8px;
+  color: var(--color--secondary);
+  cursor: default;
+}
+/* Checkbox Output checked Icon */
+input[class*="plogic--checkbox"].PR:checked::after,
+input[class*="plogic--checkbox"][readonly="true"]:checked::after,
+input[class*="plogic--checkbox"][readonly]:checked::after {
+  content: "\f14a";
+  font-weight: 100;
+  margin: -9.3px 0px 0px -8px;
+  color: var(--color--secondary);
+}
+.cell.selected input[class*="plogic--checkbox"].PR:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly="true"]:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly]:checked::after {
+  color: white;
+}
+.cell.selected input[class*="plogic--checkbox"].PR.BLU:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly="true"].BLU:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly].BLU:checked::after,
+input[class*="plogic--checkbox"].PR.BLU:checked::after,
+input[class*="plogic--checkbox"][readonly="true"].BLU:checked::after,
+input[class*="plogic--checkbox"][readonly].BLU:checked::after {
+  color: var(--color--blue);
+}
+.cell.selected input[class*="plogic--checkbox"].PR.GRN:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly="true"].GRN:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly].GRN:checked::after,
+input[class*="plogic--checkbox"].PR.GRN:checked::after,
+input[class*="plogic--checkbox"][readonly="true"].GRN:checked::after,
+input[class*="plogic--checkbox"][readonly].GRN:checked::after {
+  color: var(--color--green);
+}
+.cell.selected input[class*="plogic--checkbox"].PR.RED:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly="true"].RED:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly].RED:checked::after,
+input[class*="plogic--checkbox"].PR.RED:checked::after,
+input[class*="plogic--checkbox"][readonly="true"].RED:checked::after,
+input[class*="plogic--checkbox"][readonly].RED:checked::after {
+  color: var(--color--red);
+}
+.cell.selected input[class*="plogic--checkbox"].PR.TRQ:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly="true"].TRQ:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly].TRQ:checked::after,
+input[class*="plogic--checkbox"].PR.TRQ:checked::after,
+input[class*="plogic--checkbox"][readonly="true"].TRQ:checked::after,
+input[class*="plogic--checkbox"][readonly].TRQ:checked::after {
+  color: var(--color--cyan);
+}
+.cell.selected input[class*="plogic--checkbox"].PR.YLW:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly="true"].YLW:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly].YLW:checked::after,
+input[class*="plogic--checkbox"].PR.YLW:checked::after,
+input[class*="plogic--checkbox"][readonly="true"].YLW:checked::after,
+input[class*="plogic--checkbox"][readonly].YLW:checked::after {
+  color: var(--color--yellow);
+}
+.cell.selected input[class*="plogic--checkbox"].PR.PNK:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly="true"].PNK:checked::after,
+.cell.selected input[class*="plogic--checkbox"][readonly].PNK:checked::after,
+input[class*="plogic--checkbox"].PR.PNK:checked::after,
+input[class*="plogic--checkbox"][readonly="true"].PNK:checked::after,
+input[class*="plogic--checkbox"][readonly].PNK:checked::after {
+  color: var(--color--pink);
+}
+
+.cell input[class*="plogic--checkbox"].PR:not(:checked)::before,
+.cell input[class*="plogic--checkbox"][readonly="true"]:not(:checked)::before,
+.cell input[class*="plogic--checkbox"][readonly]:not(:checked)::before,
+.cell input[class*="plogic--checkbox"].PR:not(:checked)::after,
+.cell input[class*="plogic--checkbox"][readonly="true"]:not(:checked)::after,
+.cell input[class*="plogic--checkbox"][readonly]:not(:checked)::after {
+  display: none;
+}
+.design .cell input[class*="plogic--checkbox"].PR:not(:checked)::after,
+.design .cell input[class*="plogic--checkbox"][readonly="true"]:not(:checked)::after,
+.design .cell input[class*="plogic--checkbox"][readonly]:not(:checked)::after {
+  display: block;
+  color: var(--color--secondary-50);
+}
+
+/* Radio button */
+/* Radio button Background */
+input[class*="plogic--radio-button"]::before {
+  content: "\f111";
+  font-family: "Font Awesome 5 Free";
+  font-size: 18px;
+  font-weight: 900;
+  margin: -8px 0px 0px -8px;
+  position: absolute;
+  color: var(--color--white);
+  background: none;
+}
+/* Radio button Icon */
+input[class*="plogic--radio-button"]::after {
+  content: "\f111";
+  font-family: "Font Awesome 5 Free";
+  font-size: 20px;
+  margin: -9px 0px 0px -9.3px;
+  position: absolute;
+  border-radius: 50%;
+  color: var(--color--secondary);
+  cursor: pointer;
+}
+/* Radio button Checked Icon */
+input[class*="plogic--radio-button"]:checked::after {
+  content: "\f192";
+  font-weight: 900;
+  margin: -9.3px 0px 0px -9.3px;
+  color: var(--color--primary);
+}
+/* Radio button Output Icon */
+input[class*="plogic--radio-button"].PR::after,
+input[class*="plogic--radio-button"][readonly="true"]::after,
+input[class*="plogic--radio-button"][readonly]::after {
+  color: var(--color--secondary);
+  cursor: default;
+}
+/* Radio button Output checked Icon */
+input[class*="plogic--radio-button"].PR:checked::after,
+input[class*="plogic--radio-button"][readonly="true"]:checked::after,
+input[class*="plogic--radio-button"][readonly]:checked::after {
+  content: "\f192";
+  font-weight: 100;
+  /* margin: -9.3px 0px 0px -9.3px; *** for font-weight 900 */
+  margin: -9px 0px 0px -9.3px;
+  color: var(--color--secondary);
+}
+
+.cell input[class*="plogic--radio-button"].PR:not(:checked)::before,
+.cell input[class*="plogic--radio-button"][readonly="true"]:not(:checked)::before,
+.cell input[class*="plogic--radio-button"][readonly]:not(:checked)::before,
+.cell input[class*="plogic--radio-button"].PR:not(:checked)::after,
+.cell input[class*="plogic--radio-button"][readonly="true"]:not(:checked)::after,
+.cell input[class*="plogic--radio-button"][readonly]:not(:checked)::after {
+  display: none;
+}
+.design .cell input[class*="plogic--radio-button"].PR:not(:checked)::after,
+.design .cell input[class*="plogic--radio-button"][readonly="true"]:not(:checked)::after,
+.design .cell input[class*="plogic--radio-button"][readonly]:not(:checked)::after {
+  display: block;
+  color: var(--color--secondary-50);
+}
+
+/* Checkbox and Radio button labels */
+.label-for-plogic--radio-button-no-label > label,
+.label-for-plogic--checkbox-no-label > label {
+  display: none;
+}
+.label-for-plogic--checkbox,
+.label-for-plogic--checkbox-no-label,
+.label-for-plogic--radio-button,
+.label-for-plogic--radio-button-no-label {
+  margin: -2px 0 0 3px;
+}
+
+/* Output field in a cell */
+.cell .plogic--output-field {
+  margin-top: 1px;
+}
+.design .cell .plogic--output-field {
+  margin-top: 0px;
+}
+/* FontAwesome icons in a cell */
+.cell [class*="pui-fa-"] {
+    margin-top: 1px;
+}
+
+/* Checkbox in a cell */
+.cell input[class*="plogic--checkbox"] {
+  margin-top: 3px !important;
+}
+.cell [class*="label-for-plogic--checkbox"] {
+  margin-top: 1px;
+}
+.cell [class*="label-for-plogic--checkbox"]::after {
+  margin-top: 1px;
+}
+
+/* Radio Button in a cell */
+.cell input[class*="plogic--radio-button"] {
+  margin-top: 3px !important;
+}
+.cell [class*="label-for-plogic--radio-button"] {
+  margin-top: 1px;
+}
+.cell [class*="label-for-plogic--radio-button"]::after {
+  margin-top: 1px;
+}
+
+input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):hover,
+input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):hover {
+  box-shadow: 0 0 0 0.375rem var(--color--primary-10);
+}
+.cell input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):hover,
+.cell input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):hover {
+  box-shadow: 0 0 0 0.575rem var(--color--primary-10);
+}
+
+input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):focus,
+input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):focus {
+  box-shadow: 0 0 0 0.375rem var(--color--primary-20);
+}
+.cell input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):focus,
+.cell input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):focus {
+  box-shadow: 0 0 0 0.575rem var(--color--primary-20);
+}
+
+input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):active,
+input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):active {
+  box-shadow: 0 0 0 0.375rem var(--color--primary-40);
+}
+.cell input[class*="plogic--checkbox"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):active,
+.cell input[class*="plogic--radio-button"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([disabled]):active {
+  box-shadow: 0 0 0 0.575rem var(--color--primary-40);
+}
+
+.plogic--list-box,
+.plogic--select-box,
+.plogic--spinner,
+.plogic--combo-box {
+  background: var(--color--input--background);
+  border: 1px solid var(--color--accent);
+  color: var(--color--primary--light--text);
+  padding: 0.375rem;
+}
+.plogic--select-box {
+  padding: 0.12rem;
+}
+.plogic--list-box.PR,
+.plogic--list-box[readonly="true"],
+.plogic--list-box[readonly],
+.plogic--select-box.PR,
+.plogic--select-box[readonly="true"],
+.plogic--select-box[readonly],
+.plogic--combo-box.PR,
+.plogic--combo-box[readonly="true"],
+.plogic--combo-box[readonly] {
+  border: 0px solid #ffffff;
+  background: none;
+}
+.plogic--combo-box.PR > .plogic--combo-box-combo-arrow,
+.plogic--combo-box[readonly="true"] > .plogic--combo-box-combo-arrow,
+.plogic--combo-box[readonly] > .plogic--combo-box-combo-arrow {
+  visibility: hidden;
+}
+.plogic--select-box.PR,
+.plogic--select-box[readonly="true"],
+.plogic--select-box[readonly] {
+  appearance: none;
+}
+.plogic-gridSelector.PR,
+.plogic-gridSelector[readonly="true"],
+.plogic-gridSelector[readonly],
+.plogic-gridSelector[disabled="true"],
+.plogic-gridSelector[disabled] {
+  visibility: hidden;
+}
+
+.plogic--list-box {
+  overflow: auto;
+}
+
+.plogic--select-box option:checked,
+.plogic--list-box option:checked {
+  color: #fff;
+  background: var(--color--primary);
+}
+
+.combo-arrow.plogic--combo-box-combo-arrow {
+  display: block;
+  background: url(../icons/plogic/chevron_down-48dp.svg) no-repeat center;
+  background-size: contain;
+  height: 100%;
+  width: var(--default--button--icon--font-size);
+  cursor: pointer;
+  z-index: 21;
+}
+
+.combo-arrow.open.plogic--combo-box-combo-arrow {
+  display: block;
+  background: url(../icons/plogic/chevron_up-48dp.svg) no-repeat center;
+  background-size: contain;
+  height: 100%;
+  width: var(--default--button--icon--font-size);
+  cursor: pointer;
+  z-index: 21;
+}
+
+[class*="plogic--combo-box"]:active > div,
+[class*="plogic--combo-box"]:active > img {
+  transform: translateY(1px);
+}
+
+[class*="plogic--combo-box"] > input {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: var(--default--sans-serif-family);
+  padding-left: 5px;
+  padding-right: 5px;
+  height: 100%;
+  min-width: calc(100% - 18px);
+  border: none;
+  background: 0 0;
+  margin-top: 0;
+}
+
+.cell div.plogic--combo-box {
+  height: var(--incell--standard--height);
+  margin-top: -1px;
+}
+.plogic--combo-box {
+  caret-color: var(--color--primary--light--text);
+  height: var(--standard--height);
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.combo-options.plogic--combo-box-combo-options {
+  text-transform: unset !important;
+  background: var(--color--panel--background);
+  box-shadow: var(--elevation-dp4);
+  padding: 0;
+  border-radius: 0;
+  height: unset;
+  max-height: 200px;
+}
+
+.plogic--combo-box-combo-options .combo-option,
+.plogic--select-box option,
+.plogic--list-box option {
+  font-family: var(--default--sans-serif-family);
+  font-size: var(--default--font-size);
+  color: var(--color--primary--light--text);
+  padding: 0.438rem 0.375rem;
+  height: var(--standard--option--height);
+}
+
+.plogic--combo-box-combo-options .combo-option-select,
+.plogic--select-box option:hover,
+.plogic--list-box option:hover {
+  font-family: var(--default--sans-serif-family);
+  background: var(--color--primary--dark);
+  color: var(--color--primary--text);
+  font-size: var(--default--font-size);
+}
+.plogic--combo-box-combo-options .combo-option-select {
+  background: var(--color--primary);
+}
+
+.plogic--menu.pui-menu {
+  background: var(--color--primary--dark);
+  border: none;
+  border-radius: 0;
+  display: block;
+  padding: 1px 0;
+  min-height: var(--standard--height);
+}
+
+.plogic--menu.pui-menu > table {
+  border: none;
+  width: 150px;
+}
+
+.plogic--menu.pui-menu > table > tbody > tr {
+  height: var(--standard--height);
+  background: transparent;
+  color: var(--color--white);
+}
+
+.plogic--menu.pui-menu > table > tbody > tr:hover {
+  background: var(--color--white);
+  color: var(--color--primary--light--text);
+}
+
+.plogic--menu.pui-menu > table > tbody > tr > td {
+  position: relative;
+  min-height: var(--standard--height);
+  padding: 0.875rem;
+  border: none;
+  background: none;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-items: center;
+  justify-content: space-between;
+}
+
+.plogic--menu.pui-menu > table > tbody > tr > td > img,
+.plogic--menu.pui-menu > table > tbody > tr > td > span:not([class]) {
+  display: none;
+}
+
+.plogic--menu.pui-menu > table > tbody > tr > td > .text {
+  display: block;
+  flex-grow: 1;
+  margin: 0 0.25rem;
+}
+
+.plogic--menu.pui-menu > table > tbody > tr > td > .plogic-icons {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  height: 100%;
+}
+
+.plogic--menu.pui-menu > table > tbody > tr > td > .plogic-icons.right {
+  position: absolute;
+  margin-left: 0.125rem;
+  right: 0;
+}
+
+.plogic--menu.pui-menu > table > tbody > tr > td > .plogic-icons.left {
+  margin-right: 0.125rem;
+}
+
+/* Toggles */
+
+/* Text Area */
+
+.plogic--text-area {
+  overflow-y: auto;
+  white-space: pre-wrap;
+  background-color: var(--color--white);
+}
+
+.plogic--spinner {
+  background: var(--color--input--background);
+  caret-color: var(--color--primary--light--text);
+  z-index: 1;
+  padding-right: 1.1rem;
+}
+
+.pui-floating-placeholder-plogic--spinner > .spinner-down-arrow-plogic--spinner,
+.pui-floating-placeholder-plogic--spinner > .spinner-up-arrow-plogic--spinner {
+  height: 1.125rem;
+  width: 1.25rem;
+  left: unset !important;
+  right: 0;
+  background-repeat: no-repeat;
+  opacity: 0;
+}
+
+.spinner-down-arrow-plogic--spinner {
+  background: url("../icons/plogic/chevron_down-48dp.svg");
+}
+
+.spinner-up-arrow-plogic--spinner {
+  background: url("../icons/plogic/chevron_up-48dp.svg");
+  margin-top: -9px;
+}
+
+.spinner-down-arrow-plogic--spinner,
+.spinner-up-arrow-plogic--spinner {
+  height: 1.125rem;
+  width: 1.25rem;
+  padding-left: 1.25rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+  margin-left: -5px;
+}
+
+.pui-floating-placeholder-plogic--spinner > .spinner-up-arrow-plogic--spinner {
+  z-index: 3;
+  top: 0 !important;
+}
+
+.pui-floating-placeholder-plogic--spinner > .spinner-down-arrow-plogic--spinner {
+  z-index: 3;
+  top: unset !important;
+  bottom: 0;
+}
+
+.pui-floating-placeholder-plogic--spinner::before {
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  right: 0;
+  height: 50%;
+  width: 1.25rem;
+  font-size: var(--default--button--icon--font-size);
+  color: var(--color--accent);
+  content: "keyboard_arrow_up";
+  font-family: "Material Icons";
+}
+
+.pui-floating-placeholder-plogic--spinner::after {
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  bottom: 0;
+  right: 0;
+  height: 50%;
+  width: 1.25rem;
+  font-size: var(--default--button--icon--font-size);
+  color: var(--color--accent);
+  content: "keyboard_arrow_down";
+  font-family: "Material Icons";
+}
+
+.pui-floating-placeholder-plogic--spinner > .spinner-up-arrow-plogic--spinner:hover ~ .pui-floating-placeholder-plogic--spinner::before,
+.pui-floating-placeholder-plogic--spinner > .spinner-down-arrow-plogic--spinner:hover + .pui-floating-placeholder-plogic--spinner::after {
+  color: var(--color--primary--light--text);
+}
+
+/* File Management Widgets */
+
+.plogic--file-upload,
+.plogic--drop-file-upload {
+  background: var(--color--panel--background);
+  border: 1px solid var(--color--accent);
+  display: flex;
+  flex-flow: column;
+  padding: 10px 10px 5px 10px;
+}
+
+.plogic--drop-file-upload > .drop-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-items: center;
+  justify-content: center;
+  min-height: 50%;
+  background: var(--color--dropbox--background);
+  color: transparent;
+  border-radius: var(--default--border-radius);
+  overflow: hidden;
+  margin: 0;
+  height: 50%;
+  width: 100%;
+}
+
+.plogic--drop-file-upload > .drop-box::before {
+  font-family: "Material Icons";
+  background: url("../icons/plogic/dragDropIcon.svg");
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  content: "";
+  display: block;
+  text-align: center;
+  height: 50%;
+  width: 50%;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+  position: absolute;
+}
+
+.plogic--drop-file-upload > .drop-box.dragover {
+  cursor: copy;
+}
+
+.plogic--drop-file-upload > .drop-box.dragover {
+  border: 3px dashed var(--color--affirmative--dark);
+}
+
+.plogic--file-upload > .control-box {
+  display: flex;
+  height: var(--default--button--icon--font-size);
+  justify-content: space-between;
+}
+
+.plogic--drop-file-upload > .control-box {
+  position: relative;
+  overflow: visible;
+  height: 20px;
+  margin: 5px 0px;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-items: center;
+  justify-content: center;
+}
+
+.plogic--file-upload > .control-box > .abort-upload,
+.plogic--file-upload > .control-box > .clear,
+.plogic--drop-file-upload > .control-box > .abort-upload,
+.plogic--drop-file-upload > .control-box > .clear-files {
+  position: relative;
+  text-align: center;
+  color: transparent;
+  margin-left: 5px;
+  width: var(--default--button--icon--font-size);
+  min-width: var(--default--button--icon--font-size);
+  max-width: var(--default--button--icon--font-size);
+  background: var(--color--panel--background);
+  order: 2;
+}
+
+.plogic--file-upload > .control-box > .control-proxy {
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  color: transparent;
+  height: 100%;
+  max-width: var(--default--button--icon--font-size);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.plogic--file-upload > .control-box > .control-proxy::after {
+  font-family: "Material Icons";
+  background: url("../icons/plogic/searchFile.svg");
+  background-position: center;
+  background-size: contain;
+  width: var(--default--button--icon--font-size);
+  height: var(--default--button--icon--font-size);
+  background-repeat: no-repeat;
+  content: "";
+  position: absolute;
+  display: block;
+}
+
+.plogic--file-upload > .control-box > .abort-upload::after,
+.plogic--file-upload > .control-box > .clear::after,
+.plogic--drop-file-upload > .control-box > .abort-upload::after,
+.plogic--drop-file-upload > .control-box > .clear-files::after {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: var(--default--button--icon--font-size);
+  color: var(--color--primary--light--text);
+  height: 100%;
+  width: 100%;
+  content: "clear";
+  font-family: "Material Icons";
+}
+
+.plogic--file-upload > .control-box > .abort-upload:hover::after,
+.plogic--file-upload > .control-box > .clear:hover::after,
+.plogic--drop-file-upload > .control-box > .abort-upload:hover::after,
+.plogic--drop-file-upload > .control-box > .clear-files:hover::after {
+  color: var(--color--negative--dark);
+}
+
+.plogic--drop-file-upload > .control-box > progress {
+  order: 1;
+  background: var(--color--primary--light);
+  height: 4px;
+  width: 100%;
+  border: none;
+  border-radius: 500px;
+}
+
+.plogic--drop-file-upload > .control-box > progress::-webkit-progress-bar {
+  background: var(--color--primary--light);
+  border-radius: 4px;
+}
+
+.plogic--drop-file-upload > .control-box > progress::-webkit-progress-value {
+  background: var(--color--primary--dark);
+  border-radius: 4px;
+}
+
+.plogic--drop-file-upload > .control-box > progress::-moz-progress-bar {
+  background: var(--color--primary--dark);
+  border-radius: 4px;
+}
+
+.plogic--drop-file-upload > .list-box,
+.plogic--file-upload > .list-box {
+  overflow: hidden auto;
+  scrollbar-width: thin;
+  flex-grow: 1;
+}
+
+.plogic--drop-file-upload > .list-box *,
+.plogic--file-upload > .list-box * {
+  padding: 0;
+}
+
+.plogic--drop-file-upload > .list-box > .list,
+.plogic--file-upload > .list-box > .list {
+  display: block;
+  overflow: hidden;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.plogic--drop-file-upload > .list-box > .list > tbody,
+.plogic--file-upload > .list-box > .list > tbody {
+  display: flex;
+  flex-flow: column;
+}
+
+.plogic--drop-file-upload > .list-box > .list > tbody > tr,
+.plogic--file-upload > .list-box > .list > tbody > tr {
+  max-width: 100%;
+  display: flex;
+  flex-flow: row;
+}
+
+.plogic--drop-file-upload > .list-box > .list > tbody > tr > .name-col,
+.plogic--file-upload > .list-box > .list > tbody > tr > .name-col {
+  padding-top: 4px;
+  font-size: 0.875rem;
+  line-height: 150%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+.plogic--drop-file-upload > .list-box > .list > tbody > tr > .status-col,
+.plogic--file-upload > .list-box > .list > tbody > tr > .status-col {
+  display: flex;
+  color: transparent;
+  justify-content: center;
+  justify-items: center;
+  align-content: center;
+  align-items: center;
+  max-width: calc(var(--default--button--icon--font-size) + 10px);
+  overflow: hidden;
+}
+
+.plogic--drop-file-upload > .list-box > .list > tbody > tr > .status-col::after,
+.plogic--file-upload > .list-box > .list > tbody > tr > .status-col::after {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: var(--default--button--icon--font-size);
+  color: var(--color--primary--light--text);
+  height: 100%;
+  width: 100%;
+  content: "cloud_done";
+  font-family: "Material Icons";
+}
+
+.plogic--drop-file-upload > .list-box > .list > tbody > tr > .remove-col,
+.plogic--file-upload > .list-box > .list > tbody > tr > .remove-col {
+  display: flex;
+  justify-content: center;
+  justify-items: center;
+  align-content: center;
+  align-items: center;
+  padding-left: 5px;
+  max-width: calc(var(--default--button--icon--font-size) + 5px);
+  overflow: hidden;
+}
+
+.plogic--drop-file-upload > .list-box > .list > tbody > tr > .remove-col > .remove,
+.plogic--file-upload > .list-box > .list > tbody > tr > .remove-col > .remove {
+  display: block;
+  position: relative;
+  text-align: center;
+  color: transparent;
+  overflow: hidden;
+  max-width: 100%;
+  font-size: var(--default--button--icon--font-size);
+}
+
+.plogic--drop-file-upload > .list-box > .list > tbody > tr > .remove-col > .remove::after,
+.plogic--file-upload > .list-box > .list > tbody > tr > .remove-col > .remove::after {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: var(--default--button--icon--font-size);
+  color: var(--color--primary--light--text);
+  height: 100%;
+  width: 100%;
+  content: "remove_circle_outline";
+  font-family: "Material Icons";
+}
+
+.plogic--drop-file-upload > .list-box > .list > tbody > tr > .remove-col > .remove:hover::after,
+.plogic--file-upload > .list-box > .list > tbody > tr > .remove-col > .remove:hover::after {
+  color: var(--color--negative--dark--hover);
+}
+
+.plogic--drop-file-upload > .list-box > .list > tbody > tr > .remove-col > .remove:active::after,
+.plogic--file-upload > .list-box > .list > tbody > tr > .remove-col > .remove:active::after {
+  color: var(--color--negative--dark);
+}
+
+div a.control-proxy.dnd-upl-sel {
+    left: 20px;
+    position: absolute;
+    cursor: pointer;
+}
+
+/* Slider Widget */
+
+.plogic--slider {
+  border: none;
+  background: none;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+}
+
+.plogic--slider.vertical > .bar,
+.plogic--slider.vertical > .handle {
+  left: unset;
+}
+
+.plogic--slider > .bar,
+.plogic--slider.vertical > .bar,
+.plogic--slider.horizontal > .bar {
+  top: unset;
+  border: none;
+  border-radius: var(--default--border-radius);
+  background: var(--color--primary--light);
+}
+
+/* Slider Handle */
+
+.plogic--slider > .handle,
+.plogic--slider.vertical > .handle,
+.plogic--slider.horizontal > .handle {
+  top: unset;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: none;
+  border-radius: 500px;
+  background: var(--color--primary--dark);
+  box-shadow: var(--elevation-dp2);
+  transition: box-shadow ease-in-out 250ms;
+}
+
+.plogic--slider[disabled="true"] > .handle,
+.plogic--slider[disabled] > .handle,
+.plogic--slider.vertical[disabled="true"] > .handle,
+.plogic--slider.vertical[disabled] > .handle,
+.plogic--slider.horizontal[disabled="true"] > .handle,
+.plogic--slider.horizontal[disabled] > .handle {
+  background: var(--color--disabled--text);
+}
+
+.plogic--slider > .handle:hover,
+.plogic--slider.vertical > .handle:hover,
+.plogic--slider.horizontal > .handle:hover {
+  box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--primary-10);
+}
+
+.plogic--slider > .handle:focus,
+.plogic--slider.vertical > .handle:focus,
+.plogic--slider.horizontal > .handle:focus {
+  box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--primary-20);
+}
+
+.plogic--slider > .handle:active,
+.plogic--slider.vertical > .handle:active,
+.plogic--slider.horizontal > .handle:active {
+  box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--primary-40);
+}
+
+.plogic--slider[disabled="true"] > .handle:hover,
+.plogic--slider[disabled] > .handle:hover,
+.plogic--slider.vertical[disabled="true"] > .handle:hover,
+.plogic--slider.vertical[disabled] > .handle:hover,
+.plogic--slider.horizontal[disabled="true"] > .handle:hover,
+.plogic--slider.horizontal[disabled] > .handle:hover {
+  box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--secondary-10);
+}
+
+.plogic--slider[disabled="true"] > .handle:focus,
+.plogic--slider[disabled] > .handle:focus,
+.plogic--slider.vertical[disabled="true"] > .handle:focus,
+.plogic--slider.vertical[disabled] > .handle:focus,
+.plogic--slider.horizontal[disabled="true"] > .handle:focus,
+.plogic--slider.horizontal[disabled] > .handle:focus {
+  box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--secondary-20);
+}
+
+.plogic--slider[disabled="true"] > .handle:active,
+.plogic--slider[disabled] > .handle:active,
+.plogic--slider.vertical[disabled="true"] > .handle:active,
+.plogic--slider.vertical[disabled] > .handle:active,
+.plogic--slider.horizontal[disabled="true"] > .handle:active,
+.plogic--slider.horizontal[disabled] > .handle:active {
+  box-shadow: var(--elevation-dp2), 0 0 0 0.875rem var(--color--secondary-40);
+}
+
+.plogic--slider[disabled="true"] > .bar,
+.plogic--slider[disabled] > .bar,
+.plogic--slider.vertical[disabled="true"] > .bar,
+.plogic--slider.vertical[disabled] > .bar,
+.plogic--slider.horizontal[disabled="true"] > .bar,
+.plogic--slider.horizontal[disabled] > .bar {
+  background: var(--color--accent);
+}
+
+/* Fieldset */
+
+.plogic--fieldset fieldset {
+  border-radius: var(--default--border-radius);
+  border: 1px solid var(--color--accent);
+  background: var(--color--content--background);
+}
+.plogic--fieldset legend {
+  position: relative;
+  top: -2px;
+  padding: 0px 5px 0px 5px;
+  font-weight: bold;
+  color: var(--color--primary--dark);
+}
+.plogic--legend--primary legend {
+  color: var(--color--primary);
+}
+.plogic--legend--secondary legend {
+  color: var(--color--secondary);
+}
+.plogic--legend--danger legend {
+  color: var(--color--danger);
+}
+.plogic--legend--info legend {
+  color: var(--color--info);
+}
+.plogic--legend--success legend {
+  color: var(--color--success);
+}
+.plogic--legend--warning legend {
+  color: var(--color--warning);
+}
+.plogic--legend--cyan legend {
+  color: var(--color--cyan);
+}
+.plogic--legend--green legend {
+  color: var(--color--green);
+}
+.plogic--legend--orange legend {
+  color: var(--color--orange);
+}
+.plogic--legend--pink legend {
+  color: var(--color--pink);
+}
+.plogic--legend--red legend {
+  color: var(--color--red);
+}
+.plogic--legend--yellow legend {
+  color: var(--color--yellow);
+}
+
+/* Panel Widgets */
+
+.plogic--tab-panel .pui-tscrbtn.right,
+.plogic--tab-panel-white > span.pui-tscrbtn.pui-tablayout.right,
+.plogic--tab-panel > span.pui-tscrbtn.pui-tablayout.right {
+  right: 0;
+}
+
+.plogic--accordion-panel > div,
+.plogic--panel--wide,
+.plogic--panel > div {
+  padding: 0;
+}
+
+.plogic--ajax-container,
+.plogic--html-container,
+.plogic--iframe {
+  border-radius: var(--default--border-radius);
+  box-shadow: var(--elevation-dp2);
+  background: var(--color--panel--background);
+}
+
+.ui-btn-up-plogic--header,
+[class*="ui-btn-up-plogic--"],
+[class*="ui-btn-up-plogic--"] > span,
+.ui-btn.ui-shadow.ui-btn-corner-all.no-shadow {
+  box-shadow: none;
+  border: none;
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+}
+
+.ui-btn-up-plogic--body > span.ui-btn-inner.ui-btn-corner-all {
+  display: none;
+  box-shadow: none;
+  border: none;
+}
+
+.plogic--panel--wide {
+  width: calc(100% - 50px);
+  min-width: 1400px;
+}
+div.plogic--card-panel,
+div.plogic--panel--wide,
+div.plogic--panel {
+  display: flex;
+  border-radius: var(--default--border-radius);
+  -webkit-box-shadow: none;
+  box-shadow: var(--elevation-dp4);
+  background: var(--color--panel--background);
+  -webkit-border-radius: var(--default--border-radius);
+  -moz-border-radius: var(--default--border-radius);
+  -ms-border-radius: var(--default--border-radius);
+  -o-border-radius: var(--default--border-radius);
+}
+
+.plogic--card-panel.info,
+.plogic--panel--wide.info,
+.plogic--panel.info,
+.plogic--card-panel.info2,
+.plogic--panel--wide.info2,
+.plogic--panel.info2 {
+  background: var(--color--info--light);
+}
+
+.plogic--card-panel.info > div:first-of-type > * span,
+.plogic--panel--wide.info > div:first-of-type > * span,
+.plogic--panel.info > div:first-of-type > * span {
+  color: var(--color--panel--header);
+}
+.plogic--card-panel.info2 > div:first-of-type > * span,
+.plogic--panel--wide.info2 > div:first-of-type > * span,
+.plogic--panel.info2 > div:first-of-type > * span {
+  color: var(--color--info);
+}
+
+.plogic--card-panel.error > div:first-of-type > * span,
+.plogic--panel--wide.error > div:first-of-type > * span,
+.plogic--panel.error > div:first-of-type > * span {
+  color: var(--color--negative--dark);
+}
+
+.plogic--panel--wide > div:first-of-type > * span,
+.plogic--panel > div:first-of-type > * span {
+  padding: 0px;
+  width: calc(100% - 40px);
+  height: 100%;
+  display: flex;
+  align-content: flex-end;
+  align-items: flex-end;
+  text-align: left;
+  font-weight: var(--sans--h2--weight);
+  font-family: var(--sans--h2--family);
+  font-size: var(--sans--h2--size);
+  color: var(--color--panel--header);
+}
+.plogic--panel--wide > div:first-of-type > span > span,
+.plogic--panel > div:first-of-type > span > span {
+  margin: 0 20px 10px 20px;
+}
+
+.plogic--card-panel > div:first-of-type {
+  max-height: 0;
+  display: none;
+}
+
+.plogic--panel--wide > div:last-of-type,
+.plogic--panel > div:last-of-type {
+  min-height: calc(100% - var(--tab-panel--header--height));
+  /* max-height: calc(100% - (var(--tab-panel--header--height))); Causes the fields to be overlapped if the panel has a height < 150px */
+}
+
+.plogic--card-panel > div:last-of-type {
+  min-height: 100%;
+}
+
+.plogic--container {
+  background: var(--color--content--background);
+}
+
+/* Tab Panel Widget */
+
+.plogic--tab-panel {
+  background: var(--color--content--background);
+  box-shadow: 0;
+  overflow: hidden;
+}
+
+.plogic--tab-panel .pui-tablayout-body,
+.plogic--tab-panel .pui-tablayout-body > div,
+.plogic--tab-panel .pui-tablayout-hdr,
+.plogic--tab-panel .pui-tablayout-hdr > span,
+.plogic--tab-panel .pui-tablayout-hdr > span > span {
+  border: none;
+  background: 0 0;
+  left: 0;
+}
+
+.plogic--tab-panel .pui-tablayout-hdr {
+  height: var(--tab-panel--header--height);
+  font-family: var(--sans--h4--family);
+  color: var(--color--accent--text);
+  background: var(--color--secondary);
+  display: flex;
+  top: 0;
+  box-shadow: var(--elevation-dp4);
+}
+
+.plogic--tab-panel .pui-tablayout-hdr > span {
+  min-height: 100%;
+}
+
+.plogic--tab-panel .pui-tablayout-hdr > span > span[istab="true"] {
+  text-overflow: ellipsis;
+  height: 100%;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0 10px;
+  line-height: 100%;
+  font-size: var(--default--font-size);
+  font-weight: bolder;
+  letter-spacing: var(--sans--h3--spacing);
+  background: var(--color--text--background);
+}
+
+.plogic--tab-panel .pui-tablayout-hdr > span > span:not([istab="true"]) {
+  display: none;
+}
+
+.plogic--tab-panel .pui-tablayout-hdr > span.selected-tab > span[istab="true"] {
+  color: var(--color--primary--light);
+  border-bottom: 2px solid var(--color--primary--light);
+  min-height: 100%;
+}
+
+.plogic--tab-panel .pui-tablayout-body {
+  overflow: auto;
+  z-index: -1;
+  height: calc(100% - var(--tab-panel--header--height));
+  top: var(--tab-panel--header--height);
+}
+
+.plogic--tab-panel .pui-tscrbtn {
+  height: var(--tab-panel--header--height);
+  width: auto;
+  color: var(--color--accent--text);
+  background: none;
+  font-family: "Material Icons";
+  padding: 0;
+}
+
+.plogic--tab-panel .pui-tscrbtn::before {
+  display: block;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  background: var(--color--secondary);
+  padding: 0;
+  opacity: 0.8;
+  z-index: -1;
+}
+
+.plogic--tab-panel .pui-tscrbtn.left {
+  left: 0;
+}
+
+.plogic--tab-panel .pui-tscrbtn.right {
+  right: 0;
+}
+
+.plogic--tab-panel span.pui-tscrbtn span.mid {
+  left: 0;
+  padding: 0 5px;
+  margin: 0;
+  background: 0 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  align-content: center;
+}
+
+.plogic--tab-panel .pui-tscrbtn.left .mid {
+  transform: scaleX(-1);
+  -webkit-transform: scaleX(-1);
+  -moz-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+}
+
+.plogic--tab-panel .pui-tscrbtn.left .mid::before {
+  content: "forward";
+}
+
+.plogic--tab-panel .pui-tscrbtn.right .mid::before {
+  content: "forward";
+}
+
+.plogic--panel--wide .ui-btn-inner.ui-btn-corner-all,
+.plogic--panel .ui-btn-inner.ui-btn-corner-all {
+  border: none;
+}
+
+div.pui-sflmsg-panel {
+  height: fit-content;
+  background: var(--color--light);
+  font-family: var(--default--sans-serif-family);
+  font-size: var(--default--font-size);
+}
+div.pui-sflmsg-panel-content {
+  height: fit-content;
+}
+div.pui-sflmsg-panel-close-button,
+div.pui-sflmsg-panel-close-button:hover {
+  background: none;
+}
+div.pui-sflmsg-panel-close-button::after {
+  content: "clear";
+  font-family: "Material Icons";
+  font-size: 22px;
+  margin: -3px 0px 0px -3px;
+  position: absolute;
+  color: var(--color--secondary);
+  cursor: pointer;
+}
+div.pui-sflmsg-panel-close-button:hover::after {
+  color: var(--color--secondary-hover);
+}
+
+/* Grid Widget */
+
+[puiwdgt="grid"].plogic--grid {
+  color: var(--color--primary--light--text);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: none;
+  background: var(--color--panel--background);
+  border-radius: var(--default--border-radius);
+  -webkit-border-radius: var(--default--border-radius);
+  -moz-border-radius: var(--default--border-radius);
+  -ms-border-radius: var(--default--border-radius);
+  -o-border-radius: var(--default--border-radius);
+}
+
+.plogic--grid.plogic--grid--messages {
+  color: #ff3300;
+}
+
+.plogic--grid .cell.header-cell {
+  font-weight: 400;
+  white-space: normal;
+  border-bottom: 1px solid var(--color--accent);
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -webkit-box-align: center;
+  display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  align-items: flex-end;
+  align-content: flex-end;
+  padding-left: 3px;
+}
+
+.plogic--grid .header-cell > div > .grid-sort-arrow-ascending,
+.plogic--grid .header-cell > div > .grid-sort-arrow-descending {
+  font-family: "Material Icons";
+  background: 0 0;
+  display: inline;
+  align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-content: center;
+  -ms-flex-line-pack: center;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 0 3px 0;
+  min-height: var(--sans--h3--size);
+  min-width: var(--sans--h3--size);
+}
+
+.plogic--grid .cell.header-cell > div.qf image {
+  display: inline;
+}
+
+.plogic--grid .header-cell > input.qf {
+  border: 1px solid #999;
+  border-radius: 5px;
+  font-size: 16px;
+  padding: 2px;
+}
+
+.plogic--grid .cell.header-cell > div,
+.plogic--grid .cell.header-cell > div > div {
+  max-width: 100%;
+  font-weight: bolder;
+  letter-spacing: 1px;
+  position: unset !important;
+  margin-top: 0 !important;
+  margin-left: 2px;
+  padding: 0;
+  transform: none !important;
+  -webkit-transform: none !important;
+  -moz-transform: none !important;
+  -ms-transform: none !important;
+  -o-transform: none !important;
+}
+.plogic--grid .cell.header-cell > div > div {
+  display: inline-block;
+}
+
+.plogic--grid .header-cell > div > .grid-sort-arrow-descending::after {
+  content: "arrow_downward";
+}
+
+.plogic--grid .header-cell > div > .grid-sort-arrow-ascending::after {
+  content: "arrow_upward";
+}
+
+.plogic--grid .cell > div:first-of-type {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+
+.plogic--grid .cell > span:first-of-type {
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.plogic--grid .cell > span > div:first-of-type {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+
+.plogic--grid .cell.even {
+  background: 0 0;
+}
+
+.plogic--grid .cell.odd {
+  background: var(--color--cellodd--background);
+}
+
+.plogic--grid .cell.even,
+.plogic--grid .cell.odd {
+  border-bottom: 1px solid var(--color--accent);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-transition: border-color 0.5s, color 0.5s, background 0.5s;
+  transition: border-color 0.5s, color 0.5s, background 0.5s;
+  -moz-transition: border-color 0.5s, color 0.5s, background 0.5s;
+  -ms-transition: border-color 0.5s, color 0.5s, background 0.5s;
+  -o-transition: border-color 0.5s, color 0.5s, background 0.5s;
+  cursor: pointer;
+}
+
+.plogic--grid .cell.even > span,
+.plogic--grid .cell.odd > span {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-transition: border-color 0.5s, color 0.5s, background 0.5s;
+  transition: border-color 0.5s, color 0.5s, background 0.5s;
+  -moz-transition: border-color 0.5s, color 0.5s, background 0.5s;
+  -ms-transition: border-color 0.5s, color 0.5s, background 0.5s;
+  -o-transition: border-color 0.5s, color 0.5s, background 0.5s;
+}
+
+.plogic--grid .cell.selected {
+  background: var(--color--accent);
+}
+
+.plogic--grid .cell.selected > div:not(.BLU, .GRN, .PNK, .RED, .TRQ, .YLW, .pui-calendar-icon, .color-transparent) {
+  color: var(--color--accent--text);
+}
+
+.plogic--grid .cell.hover.even,
+.plogic--grid .cell.hover.odd {
+  background: var(--color--grid-cell--hover);
+}
+
+.plogic--grid-hline,
+.plogic--grid-vline {
+  border: none;
+  border-bottom: 3px solid transparent;
+}
+
+.plogic--grid-hline {
+  margin-top: -2px;
+}
+
+.plogic--grid-hline.grid-drop-target {
+  box-sizing: border-box;
+  border-bottom: 0.25rem dashed var(--color--accent);
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+}
+
+.plogic--grid-paging-bar {
+  font-family: var(--default--sans-serif-family);
+  color: var(--color--primary--light--text);
+  height: var(--grid--row--height);
+  z-index: 9;
+  overflow: visible !important;
+  position: absolute;
+  background: var(--color--panel--background);
+  border-radius: 0 0 var(--default--border-radius) var(--default--border-radius);
+  border: 1px solid var(--color--grid-border);
+}
+
+DIV.ND,
+INPUT.ND {
+  display: none;
+}
+
+.plogic--grid-paging-bar .paging-link {
+  color: var(--color--primary--light--text);
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  text-align: left;
+}
+
+.plogic--grid-paging-bar .next-paging-link {
+  text-align: right;
+  padding-left: 10px;
+  padding-right: 5px;
+}
+
+.plogic--grid-paging-bar .next-image-icon,
+.plogic--grid-paging-bar .prev-image-icon {
+  background: 0 0;
+  display: none;
+  font-size: var(--default--font-size);
+  padding: 2px 0 0 0;
+}
+
+.plogic--grid-paging-bar .export-image-icon {
+  background: 0 0;
+  min-height: var(--default--font-size);
+  min-width: var(--default--font-size);
+}
+.export-image-icon.csv-export-image-icon,
+.export-image-icon.xlsx-export-image-icon {
+  padding: 3px 0 0 5px !important;
+  color: var(--color--excel);
+}
+
+.plogic--grid-paging-bar .csv-export-image-icon::before {
+  content: "\f6dd";
+  font-family: "Font Awesome 5 Free";
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga";
+  font-weight: 900;
+  display: block;
+}
+
+.plogic--grid-paging-bar .xlsx-export-image-icon::before {
+  content: "\f1c3";
+  font-family: "Font Awesome 5 Free";
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga";
+  font-weight: 900;
+  display: block;
+}
+
+.plogic--grid-paging-bar .next-image-icon-disabled,
+.plogic--grid-paging-bar .paging-link-disabled,
+.plogic--grid-paging-bar .prev-image-icon-disabled {
+  color: var(--color--disabled--text);
+}
+
+.plogic--grid-paging-bar > span.paging-number {
+  font-family: var(--default--sans-serif-family) !important;
+  font-size: var(--default--font-size) !important;
+  font-weight: var(--default--font-weight) !important;
+  flex-grow: 3;
+  margin: 0;
+}
+
+.plogic--grid-paging-bar .next-image-icon.next-image-icon-disabled::after,
+.plogic--grid-paging-bar .next-image-icon::after,
+.plogic--grid-paging-bar .prev-image-icon.prev-image-icon-disabled::after,
+.plogic--grid-paging-bar .prev-image-icon::after {
+  font-family: "Material Icons";
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+}
+
+.plogic--grid-paging-bar .prev-image-icon::after {
+  content: "arrow_back_ios";
+}
+
+.plogic--grid-paging-bar .next-image-icon::after {
+  content: "arrow_forward_ios";
+}
+
+.plogic--grid-paging-bar .prev-image-icon.prev-image-icon-disabled::after {
+  color: var(--color--disabled--text);
+  content: "arrow_back_ios";
+}
+
+.plogic--grid-paging-bar .next-image-icon.next-image-icon-disabled::after {
+  color: var(--color--disabled--text);
+  content: "arrow_forward_ios";
+}
+
+/* Ripple Animation */
+
+.plogic--ripple {
+  background-position: center;
+  transition: background 0.4s, box-shadow 0.25s;
+  -webkit-transition: background 0.4s, box-shadow 0.25s;
+  -moz-transition: background 0.4s, box-shadow 0.25s;
+  -ms-transition: background 0.4s, box-shadow 0.25s;
+  -o-transition: background 0.4s, box-shadow 0.25s;
+}
+
+/* PUI Tip */
+.pui-tip-content {
+    box-sizing: content-box;
+}
+
+[class*="plogic--"] ~ .pui-tip * {
+  transition: background 0.2s, opacity 0.2s;
+  -webkit-transition: background 0.2s, opacity 0.2s;
+  -moz-transition: background 0.2s, opacity 0.2s;
+  -ms-transition: background 0.2s, opacity 0.2s;
+  -o-transition: background 0.2s, opacity 0.2s;
+}
+
+[class*="plogic--"] ~ .pui-tip.pui-tip-error {
+  background: var(--color--negative--light);
+  border: var(--color--negative--dark) 1px solid;
+  position: relative;
+  border-radius: var(--default--border-radius);
+  max-width: 300px;
+  padding: 0;
+}
+
+div.genie-5250 div div.pui-tip.pui-tip-error {
+  position: relative !important;
+}
+
+[class*="plogic--"] ~ .pui-tip.pui-tip-error > .pui-tip-content {
+  background: 0 0;
+  border: none;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-items: flex-start;
+  justify-content: space-around;
+  max-width: unset;
+  min-width: unset;
+  padding: 10px;
+  height: var(--standard--height);
+  text-align: left;
+  line-height: 150%;
+  font-size: 0.875rem;
+  font-style: var(--default--font-style);
+  font-weight: var(--default--font-weight);
+  letter-spacing: var(--default--spacing);
+  white-space: var(--default--white-space);
+  font-family: var(--default--sans-serif-family);
+}
+
+[class*="plogic--"] ~ .pui-tip.pui-tip-error > .pui-tip-content > .pui-tip-icon {
+  background: 0 0;
+  border: 0;
+  height: auto;
+  width: auto;
+}
+
+[class*="plogic--"] ~ .pui-tip.pui-tip-error > .pui-tip-content > .pui-tip-icon::before {
+  content: "sync_problem";
+  font-family: "Material Icons";
+  display: block;
+  font-size: var(--default--button--icon--font-size);
+}
+
+[class*="plogic--"] ~ .pui-tip.pui-tip-error > .pui-tip-close,
+[class*="plogic--"] ~ .pui-tip.pui-tip-error > .pui-tip-close-click {
+  background: 0 0;
+  border: none;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+[class*="plogic--"] ~ .pui-tip.pui-tip-error.pui-tip-right::before {
+  font-family: "Material Icons";
+  content: "play_arrow";
+  position: absolute;
+  top: calc(50% - 7px);
+  left: -9px;
+  z-index: 1;
+  color: var(--color--negative--light);
+  text-shadow: 1px -1px var(--color--negative--dark), 2px 0 var(--color--negative--dark), 1px 1px var(--color--negative--dark), 1px 1px var(--color--negative--dark);
+  transform: scaleX(-1);
+}
+
+[class*="plogic--"] ~ .pui-tip.pui-tip-error.pui-tip-left::before {
+  font-family: "Material Icons";
+  content: "play_arrow";
+  position: absolute;
+  top: calc(50% - 7px);
+  right: -9px;
+  z-index: 1;
+  color: var(--color--negative--light);
+  text-shadow: 1px -1px var(--color--negative--dark), 2px 0 var(--color--negative--dark), 1px 1px var(--color--negative--dark), 1px 1px var(--color--negative--dark);
+}
+
+icon.plogic--header {
+  width: 100%;
+  font-size: 1.6em;
+  text-align: center;
+  vertical-align: middle;
+  margin-top: 2px;
+}
+
+.cell > .plogic--record-options,
+.cell > span > .plogic--record-options {
+  border: none;
+}
+
+/* Conversion Classes */
+
+/* SIDE BAR */
+
+/* HACK SIDE BAR */
+.genie-side-bar.genie-div {
+  left: 60px;
+}
+/* HACK SIDE BAR */
+.genie-side-menu.genie-div.genie-side-menu--opened slide-right {
+  left: 60px;
+}
+.genie-side-menu {
+  display: none;
+}
+
+p,
+ul,
+li,
+div,
+nav {
+  padding: 0;
+  margin: 0;
+}
+
+.plogic-nav-wrapper {
+  width: var(--sidebar--width);
+  background: linear-gradient(to right, var(--color--primary) var(--sidebar--width), var(--color--primary-90) var(--sidebar--width));
+}
+.plogic-nav-wrapper2 {
+  min-width: max-content;
+  width: var(--sidebar--width);
+  transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.plogic-nav-wrapper3 {
+  max-height: calc(100vh - 144px);
+  vertical-align: top;
+  display: flex;
+  display: -webkit-flex;
+  flex-flow: column;
+  -webkit-flex-flow: column;
+}
+
+.plogic-nav-user {
+  font-weight: var(--default--font-weight);
+  background: linear-gradient(to right, var(--color--primary) var(--sidebar--width), var(--color--primary-90) var(--sidebar--width));
+  user-select: none;
+}
+.plogic-nav-user li {
+  border-color: white;
+  border-style: solid;
+  border-width: 0px 0px 0.1px 0px;
+}
+
+.plogic-nav-more {
+  height: calc(100vh - 144px);
+}
+
+.plogic-nav-menu,
+.plogic-nav-more {
+  height: 100vh;
+  font-weight: var(--default--font-weight);
+  background: linear-gradient(to right, var(--color--primary) var(--sidebar--width), var(--color--primary-90) var(--sidebar--width));
+  user-select: none;
+  overflow: hidden overlay;
+}
+.plogic-nav-menu {
+   flex: 1;
+  -webkit-flex: 1;
+}
+
+.plogic-nav-user ul,
+.plogic-nav-menu ul,
+.plogic-nav-more ul {
+  list-style-type: none;
+}
+
+.plogic-nav-user ul li > span,
+.plogic-nav-menu ul li > span,
+.plogic-nav-more ul li > span {
+  padding: 10px 0px 10px 0px;
+  display: flex;
+  width: 100%;
+  min-height: 48px;
+  text-decoration: none;
+  line-height: 28px;
+}
+
+ul.genie-ul {
+  cursor: pointer;
+}
+
+.plogic-main-menu > li > span > span.opened::after {
+  content: "close";
+}
+
+.pui-material-icons.plogic-side-bar-icon {
+  min-width: var(--sidebar--width);
+  cursor: pointer;
+}
+
+.plogic-side-bar-text,
+.plogic-side-bar-icon,
+.plogic-nav-user .pui-material-icons,
+.plogic-nav-menu .pui-material-icons,
+.plogic-nav-user ul li ul li,
+.plogic-nav-menu ul li ul li {
+  color: var(--color--primary--text);
+  line-height: 28px;
+}
+
+.plogic-side-bar-text {
+  padding: 0px 10px 0px 10px;
+  line-height: 28px;
+  width: fit-content;
+  opacity: 1;
+  transition: opacity 0.5s ease, padding 0.3s ease;
+  white-space: nowrap;
+}
+.plogic-side-bar-text.hidden {
+  width: 0px;
+  padding: 0px 0px 0px 0px;
+  opacity: 0;
+  visibility: hidden;
+  display: block;
+}
+
+.plogic-nav-user ul li span:hover,
+.plogic-nav-menu ul li span:hover {
+  background-color: var(--color--primary--hover);
+}
+.plogic-nav-user ul li:hover > ul li:hover,
+.plogic-nav-menu ul li:hover > ul li:hover {
+  background-color: var(--color--primary--dark--hover);
+}
+
+.plogic-nav-user ul li:hover > ul {
+  z-index: 0;
+  left: var(--sidebar--width);
+  display: block;
+  background-color: var(--color--primary--dark);
+}
+
+.plogic-nav-user ul li > ul {
+  z-index: -1;
+  top: 0;
+  display: none;
+  min-width: 200px;
+  position: absolute;
+  background-color: var(--color--primary--dark);
+}
+
+.plogic-nav-user ul li > ul li span:hover,
+.plogic-nav-menu ul li > ul li span:hover {
+  background-color: var(--color--primary--hover--dark);
+}
+
+.plogic-nav-menu .child-menu-options {
+  padding: 12px 0px 10px 10px;
+  display: block;
+}
+
+.plogic-nav-menu .child-menu-options {
+  padding: 12px 0px 10px 10px;
+  display: block;
+}
+
+.plogic--side-bar * {
+  border-radius: 0;
+}
+
+.plogic--side-bar > div > div {
+  overflow: unset!important;
+  min-height: 100%;
+}
+
+.plogic--side-bar > div > div {
+  position: relative;
+  z-index: 10;
+  min-height: 100%;
+  min-width: 100%;
+  overflow: hidden auto;
+  display: grid;
+  grid-auto-flow: row;
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-auto-columns: 100%;
+  grid-auto-rows: max-content;
+  background: var(--color--primary);
+  font-weight: var(--default--font-weight);
+  box-shadow: var(--elevation-dp3);
+}
+
+.plogic--side-bar .plogic--menu-option:hover > .plogic--menu-option,
+.plogic--side-bar .plogic--side-bar--menu:hover > .plogic--side-bar--menu {
+  cursor: pointer;
+  background: var(--color--primary--dark);
+}
+
+.plogic--side-bar .plogic--menu-option > .plogic--menu-option,
+.plogic--side-bar .plogic--side-bar--menu > .plogic--side-bar--menu {
+  width: 100%;
+  color: var(--color--primary--text);
+  font-size: 1.25rem;
+}
+
+.plogic--side-bar .plogic--side-bar--menu {
+  margin: 1.125rem 0 0.75rem 0;
+}
+
+.plogic--side-bar .plogic--side-bar--menu > .plogic--side-bar--menu {
+  font-size: 1.5rem;
+  font-weight: var(--sans--label--weight);
+  width: 100%;
+  padding: 0.75rem;
+}
+
+.plogic--side-bar,
+.plogic--side-bar .plogic--menu-option,
+.plogic--side-bar .plogic--side-bar--menu {
+  position: unset !important;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+} */
+
+.nav-link--exit_to_app {
+  transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  -ms-transform: rotateY(180deg);
+  -o-transform: rotateY(180deg);
+}
+
+.plogic--screen-layout,
+.plogic--content-layout {
+  background: none;
+  overflow: visible !important;
+}
+
+.plogic--screen-layout,
+.plogic--screen-layout > div,
+.plogic--screen-layout > div > div,
+.plogic--content,
+.plogic--content-layout,
+.plogic--content > div,
+.plogic--content-layout > div,
+.plogic--content > div > div,
+.plogic--content-layout > div > div {
+  overflow: visible !important;
+  display: flex;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.plogic--content,
+.plogic--content-layout {
+  position: unset !important;
+  flex-grow: 1;
+  order: 3;
+  overflow: visible;
+}
+
+.plogic--constant,
+.plogic--constant-right {
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+div:not(.cell) > .plogic--constant,
+div:not(.cell) > .plogic--constant-right {
+  height: var(--standard--input--height);
+}
+.plogic--constant-right {
+  text-align: right;
+  display: inline-grid;
+}
+div.plogic--constant-right div {
+  display: contents;
+}
+div.plogic--constant-right div:first-of-type {
+  margin-left: auto;
+}
+
+/* Designer Display Adjustments */
+
+[id*="dspfDesigner"] [style*="z-index: 701"],
+[id*="dspfDesigner"] [style*="cursor: n-resize"],
+[id*="dspfDesigner"] [style*="cursor: nw-resize"],
+[id*="dspfDesigner"] [style*="cursor: ne-resize"],
+[id*="dspfDesigner"] [style*="cursor: s-resize"],
+[id*="dspfDesigner"] [style*="cursor: sw-resize"],
+[id*="dspfDesigner"] [style*="cursor: se-resize"],
+[id*="dspfDesigner"] [style*="cursor: w-resize"],
+[id*="dspfDesigner"] [style*="cursor: e-resize"] {
+  box-sizing: unset;
+}
+
+[id*="dspfDesigner"] .spinner-down-arrow-plogic--spinner,
+[id*="dspfDesigner"] .spinner-up-arrow-plogic--spinner {
+  margin-left: -8px;
+}
+
+[id*="dspfDesigner"] .spinner-up-arrow-plogic--spinner {
+  margin-top: -8px;
+}
+
+[id*="dspfDesigner"] .spinner-down-arrow-plogic--spinner {
+  margin-top: 0;
+}
+
+[id*="dspfDesigner"] .plogic--side-menu--closed,
+.plogic--side-menu:not(.plogic--side-menu--closed) {
+  position: unset !important;
+  left: 3rem;
+  transition: left 1s ease-out;
+}
+
+[id*="dspfDesigner"] .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
+  margin-top: -8px;
+  margin-left: -39px;
+}
+[id*="dspfDesigner"] .cell .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
+  height: 1.375rem;
+  width: 1.438rem;
+  margin: -3px 0px 0px -30px;
+  padding-left: 1px;
+}
+
+[id*="dspfDesigner"] .plogic--side-menu--closed > div > div,
+.plogic--side-menu > div > div {
+  position: relative;
+  z-index: 9;
+  height: 100%;
+  min-width: max-content;
+  max-width: 50vw;
+  overflow: hidden auto !important;
+  display: grid;
+  grid-auto-flow: row;
+  grid-auto-rows: max-content;
+  grid-auto-columns: 100%;
+  background: var(--color--primary--dark);
+  font-weight: var(--side-menu-font-weight);
+  box-shadow: var(--elevation-dp3);
+  transform-origin: center left;
+}
+
+div.BLU,
+input.BLU {
+  color: var(--color--blue);
+}
+div.GRN,
+input.GRN {
+  color: var(--color--green);
+}
+div.GRN:not(.HI),
+input.GRN:not(.HI) {
+  font-weight: 100;
+}
+div.PNK,
+input.PNK {
+  color: var(--color--pink);
+}
+div.RED,
+input.RED,
+div.BL,
+input.BL {
+  color: var(--color--red);
+}
+div.TRQ,
+input.TRQ {
+  color: var(--color--cyan);
+}
+div.YLW,
+input.YLW {
+  color: var(--color--orange);
+}
+div.YLW:not(.HI),
+input.YLW:not(.HI) {
+  font-weight: 100;
+}
+div.WHT,
+input.WHT {
+  color: var(--color--input);
+}
+
+.cell.selected div.BLU,
+.cell.selected input.PR.BLU {
+  color: var(--color--blue);
+}
+.cell.selected div.TRQ,
+.cell.selected input.PR.TRQ {
+  color: #6ee0f7;
+}
+.cell.selected div.YLW,
+.cell.selected input.PR.YLW {
+  color: #feb981;
+}
+.cell.selected div.PNK,
+.cell.selected input.PR.PNK {
+  color: #ffb3cc;
+}
+.cell.selected div.GRN,
+.cell.selected input.PR.GRN {
+  color: #146c43;
+}
+.cell.selected div.RED,
+.cell.selected input.PR.RED {
+  color: #c32232;
+}
+.invisible-caret {
+  caret-color: transparent;
+}
+
+INPUT.plogic--PR,
+INPUT.plogic--PR-UL {
+  border: 0 solid #fff;
+  background: 0 0;
+  background-image: none;
+}
+
+.plogic--RTL {
+  direction: rtl;
+}
+
+INPUT.plogic--PR {
+  color: var(--color--accent);
+}
+
+INPUT[type="password"].plogic--PR,
+INPUT[type="password"].plogic--PR-UL {
+  visibility: hidden;
+}
+
+INPUT.plogic--PR-UL {
+  text-decoration: underline;
+  color: var(--color--accent);
+}
+
+DIV.plogic--BLU,
+INPUT.plogic--BLU {
+  color: var(--color--primary);
+}
+
+DIV.plogic--GRN,
+INPUT.plogic--GRN {
+  color: var(--color--affirmative--dark);
+}
+
+DIV.plogic--PNK,
+INPUT.plogic--PNK {
+  color: var(--color--poppy--light);
+}
+
+DIV.plogic--RED,
+INPUT.plogic--RED {
+  color: var(--color--negative--dark);
+}
+
+DIV.plogic--TRQ,
+INPUT.plogic--TRQ {
+  color: var(--color--primary--light);
+}
+
+DIV.plogic--WHT {
+  font-weight: 700;
+  color: var(--color--primary--light--text);
+}
+
+DIV.plogic--YLW,
+INPUT.plogic--YLW {
+  color: var(--color--warning--dark);
+}
+
+DIV.plogic--RI {
+  background: var(--color--warning--dark);
+}
+
+INPUT.plogic--RI {
+  background: var(--color--warning--dark);
+  background-image: none;
+}
+
+DIV.plogic--UL {
+  text-decoration: underline;
+}
+
+INPUT.plogic--UL {
+  text-decoration: none;
+}
+
+DIV.plogic--BL,
+INPUT.plogic--BL {
+  color: var(--color--negative--dark);
+}
+
+DIV.plogic--HI,
+DIV.plogic--YLW,
+INPUT.plogic--HI,
+INPUT.plogic--WHT {
+  font-weight: 700;
+}
+
+div[puiwdgt="grid"] input[readonly="true"].PR::selection,
+div[puiwdgt="grid"] input[readonly].PR::selection,
+input[readonly="true"]::selection,
+input[readonly]::selection,
+input[readonly]::selection,
+input.PR::selection {
+  background-color: transparent;
+}
+
+.has-notes {
+  color: #339933;
+  cursor: pointer;
+}
+
+.recipe-error {
+  color: #ff6600;
+}
+
+.plogic--grid .cell.selected DIV.RI {
+  color: #000000;
+}
+
+.selection-required {
+  background: var(--color--negative--light);
+  border: var(--color--negative--dark) 1px solid;
+  position: relative;
+  border-radius: var(--default--border-radius);
+  padding: 7px;
+  font-size: 0.875rem;
+  font-style: var(--default--font-style);
+  font-weight: var(--default--font-weight);
+  letter-spacing: var(--default--spacing);
+  white-space: var(--default--white-space);
+  font-family: var(--default--sans-serif-family);
+  color: #666666;
+}
+
+input.plogic--input,
+input.plogic--password-field {
+  background-color: var(--color--text--inverse);
+}
+
+input.RI {
+  background-color: yellow;
+}
+
+input.plogic--input.plogic--promptable {
+  padding-right: 30px;
+}
+
+/* Prompt icon */
+div.pui-prompt-plogic--input {
+  color: var(--color--secondary--dark);
+  margin-top: -4px;
+  margin-left: -39px;
+  z-index: 21;
+  background: var(--color--white);
+  padding: 5px 0px;
+  height: 2.125rem;
+  width: 2rem;
+  border-left: 1px solid var(--color--accent);
+  border-top-left-radius: 0px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 0px;
+}
+div.pui-prompt-plogic--input:hover {
+  color: var(--color--secondary--text);
+  background: var(--color--secondary);
+}
+div.pui-prompt-PR {
+  display: none;
+}
+
+/* Collapse/Expand icon */
+img[src="/profoundui/proddata/images/icons/collapseall.gif"],
+img[src="/profoundui/proddata/images/icons/expandall.gif"] {
+  height: 24px;
+  margin: -6px 0px;
+}
+
+/* Profound Custom CSS Loading Animation*/
+.pui-animation {
+  top: 40px;
+  left: calc(50% - 25px);
+  z-index: 10001;
+}
+
+.pui-animation:before {
+  border-top-color: var(--color--primary);
+}
+
+.pui-animation:after {
+  border-top-color: var(--color--accent);
+}
+
+/* Job info */
+.job-info-bg {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  width: 100%;
+  background: var(--color--secondary-40);
+}
+.copyMode-info,
+.job-info {
+  position: absolute;
+  left: 50vw;
+  top: 50vh;
+  width: 500px;
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  box-shadow: var(--elevation-dp4);
+  transform: translateX(-50%) translateY(-50%);
+}
+.copyMode-info {
+  z-index: 10000002;
+}
+.copyMode-info table,
+.job-info table {
+  margin-top: 25px;
+  margin-bottom: 25px;
+  margin-left: 20px;
+}
+.copyMode-info table td:nth-child(1),
+.job-info table td:nth-child(1) {
+  font-weight: bold;
+  padding-bottom: 10px;
+}
+
+.copyMode-info table td:nth-child(2),
+.job-info table td:nth-child(2) {
+  padding-left: 15px;
+  padding-bottom: 10px;
+}
+.copyMode-info-title,
+.job-info-title {
+  color: var(--color--info--dark);
+  font-family: Gudea;
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+  margin-top: 15px;
+  width: 100%;
+}
+.copyMode-info-x,
+.job-info-x {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  height: var(--default--button--height);
+  width: var(--default--button--height);
+  cursor: pointer;
+}
+
+.hidden,
+.design div[puiwdgt="option buttons"] .hidden {
+  display: none;
+}
+.design .hidden {
+  display: flex;
+}
+.design [class*="plogic--"].hidden {
+  background: linear-gradient(to right, var(--color--blue), var(--color--gray), var(--color--red));
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/**********/
+/* Mobile */
+/**********/
+/* Adjust option buttons padding */
+.mobile-device-layout .content-section div[puiwdgt="option buttons"] {
+  min-width: 0px;
+  padding: 0px 5px;
+}
+
+html.plogic--mobile *::selection {
+  background: #3390cc;
+  color: white;
+}
+html.plogic--mobile body,
+html.plogic--mobile #pui,
+html.plogic--mobile .genie-screen--body,
+html.plogic--mobile .plogic-scroll-bar-wrap {
+  top: 0px;
+  position: fixed;
+}
+
+/* Mobile login background */
+html.plogic--mobile.plogic--login body:before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: cover;
+  background-image: url(/profoundui/userdata/images/plogic_login_background.jpg);
+  opacity: 1;
+}
+
+@media screen and (max-device-width: 767px) {
+  html.plogic--mobile .plogic-nav-wrapper {
+    display: none;
+  }
+  html.plogic--mobile .genie-container {
+    width: 100vw;
+    margin: 0;
+  }
+  html.plogic--mobile .genie-screen--body div[id="5250"] {
+    min-width: 100vw;
+    overflow: hidden;
+  }
+}
+
+/******************/
+/* Mobile Top bar */
+/******************/
+div.mobile-device-layout td.top-bar,
+div.mobile-device-layout div.top-bar {
+  background: #ffffff;
+  height: var(--mobile--top-bar--height);
+}
+div.mobile-device-layout.transparent td.top-bar,
+div.mobile-device-layout.transparent div.top-bar {
+  background: var(--color--body--background);
+}
+
+.mobile-device-layout td.top-bar {
+  color: var(--color--panel--header);
+}
+.mobile-device-layout td.top-bar .plogic--constant {
+  font-size: var(--sans--h3--size);
+}
+
+/**************************/
+/* Mobile content-section */
+/**************************/
+div.mobile-device-layout td.content-section,
+div.mobile-device-layout div.content-section {
+  background-color: #ffffff;
+}
+div.mobile-device-layout.transparent td.content-section,
+div.mobile-device-layout.transparent div.content-section {
+  background-color: rgba(0, 0, 0, 0);
+  background: rgba(0, 0, 0, 0);
+}
+div.mobile-device-layout div.content-section,
+div.mobile-device-layout td.content-section {
+  width: 100% !important;
+  min-height: 1px;
+  height: 100% !important;
+}
+div.mobile-device-layout td.content-section {
+  border-top-color: var(--color--accent);
+  border-top-style: solid;
+  border-top-width: 0px;
+  border-bottom-color: var(--color--accent);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+div.mobile-device-layout.transparent td.content-section {
+  border-top-color: rgba(0, 0, 0, 0);
+  border-bottom-color: rgba(0, 0, 0, 0);
+}
+
+
+.mobile-device-layout input[class*="plogic--"]:not(.combo-main-box):not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):not([class*="plogic--checkbox"]):not([class*="plogic--radio-button"]):focus,
+.mobile-device-layout textarea[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
+.mobile-device-layout select[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
+.mobile-device-layout button[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus,
+.mobile-device-layout .combo-main.plogic--combo-box:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus-within {
+  box-shadow: var(--mobile--input--focus-ring);
+  -webkit-appearance: none; /* For iOS */
+  border: 1px solid var(--color--primary);
+}
+.mobile-device-layout .content-section input[class*="plogic--"],
+.mobile-device-layout .content-section select[class*="plogic--"] {
+  height: var(--mobile--standard--height);
+}
+.mobile-device-layout .content-section div:not(.cell) > .plogic--constant,
+.mobile-device-layout .content-section div:not(.cell) > .plogic--constant-right {
+  height: var(--mobile--standard--height);
+}
+.mobile-device-layout .content-section div[puiwdgt="option buttons"] div:not(.cell) > .plogic--constant,
+.mobile-device-layout .content-section div[puiwdgt="option buttons"] div:not(.cell) > .plogic--constant-right,
+.mobile-device-layout .content-section div[puiwdgt="option buttons"] button[class*="plogic--"] {
+  height: var(--standard--input--height);
+}
+.mobile-device-layout .content-section div[puiwdgt="option buttons"].plogic--option-buttons--double-row div:not(.cell) > .plogic--constant,
+.mobile-device-layout .content-section div[puiwdgt="option buttons"].plogic--option-buttons--double-row div:not(.cell) > .plogic--constant-right,
+.mobile-device-layout .content-section div[puiwdgt="option buttons"].plogic--option-buttons--double-row button[class*="plogic--"] {
+  height: 1.25rem;
+}
+.mobile-device-layout .content-section div[puiwdgt="option buttons"].plogic--option-buttons--double-row {
+  margin-top: -3px;
+}
+.mobile-device-layout .content-section .cell div[puiwdgt="combo box"] {
+  margin-top: 1px;
+}
+.mobile-device-layout .content-section .cell .plogic--combo-box,
+.mobile-device-layout .content-section .cell input[class*="plogic--"],
+.mobile-device-layout .content-section .cell select[class*="plogic--"] {
+  height: 1.188rem;
+}
+.mobile-device-layout .content-section .cell input[class*="plogic--checkbox"] {
+  height: 1rem;
+}
+.mobile-device-layout .content-section .plogic--grid-paging-bar {
+  height: var(--mobile--grid--row--height);
+  padding-top: 1px !important;
+}
+.mobile-device-layout .content-section [class*="plogic--"] {
+  font-size: var(--mobile--font-size);
+}
+.mobile-device-layout .content-section .plogic--monospace,
+.mobile-device-layout .content-section .plogic--grid .cell.header-cell .plogic--monospace {
+  font-size: 0.938rem;
+}
+.mobile-device-layout .content-section .pui-material-icons {
+  font-size: 1.25rem;
+}
+.mobile-device-layout .content-section .pui-prompt.pui-prompt-plogic--input.pui-prompt-plogic--promptable {
+  margin: 3px -29px;
+  height: 1.25rem;
+  width: 1.375rem;
+}
+.mobile-device-layout .content-section .pui-cal.pui-cal-plogic--date-field.pui-calendar-icon::after {
+  font-size: 1rem;
+  margin: 2px 2px;
+}
+.mobile-device-layout .content-section div.pui-prompt-plogic--input {
+  padding: 2px 0px;
+}
+.mobile-device-layout .content-section .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
+  margin-top: 1px;
+  margin-left: -28px;
+  background: var(--color--white);
+  padding: 0px;
+  height: 1.25rem;
+  width: 1.375rem;
+}
+[id*="dspfDesigner"] .mobile-device-layout .content-section .pui-calendar-icon.pui-cal.pui-cal-plogic--date-field {
+  margin-top: -1px;
+  margin-left: -29px;
+}
+
+/*********************/
+/* Mobile Bottom bar */
+/*********************/
+div.mobile-device-layout td.bottom-bar,
+div.mobile-device-layout div.bottom-bar {
+  background: var(--color--body--background);
+  height: var(--mobile--bottom-bar--height);
+}
+div.mobile-device-layout.transparent td.bottom-bar,
+div.mobile-device-layout.transparent div.bottom-bar {
+  background-color: rgba(0, 0, 0, 0);
+  background: rgba(0, 0, 0, 0);
+}
+div.mobile-device-layout td.bottom-bar div:not(.cell) > .plogic--constant,
+div.mobile-device-layout td.bottom-bar div:not(.cell) > .plogic--constant-right {
+  height: 20px;
+  margin-top: -1px;
+  font-size: var(--mobile--font-size);
+}
+div.mobile-device-layout div.bottom-bar [class*="plogic--button"],
+div.mobile-device-layout div.bottom-bar button[class*="plogic--"]:not([readonly="true"]):not([readonly]):not([disabled="true"]):not([disabled]):not(.PR):focus {
+  box-shadow: none;
+  border-radius: unset;
+  -webkit-border-radius: unset;
+  -moz-border-radius: unset;
+  -ms-border-radius: unset;
+  -o-border-radius: unset;
+  border: none;
+}
+/**************/
+/* PUISCREENS */
+/**************/
+.plogic--card-panel.puiscreens--signonscrn,
+.puiscreens--signonscrn--background,
+.puiscreens--errscrn--background,
+.puiscreens--eojscrn--background,
+.puiscreens--timoutscrn--background {
+  transform: translate(-50%, -50%);
+}
+.puiscreens--errscrn--background,
+.puiscreens--eojscrn--background,
+.puiscreens--timoutscrn--background {
+  opacity: 0.5;
+}
+.pui-error-screen-maximize-icon {
+  color: var(--color--panel--header);
+}
+
+/**************************************************************/
+/********************* Transformation *************************/
+/**************************************************************/
+.flip-h,
+.icon-flip-h span.pui-material-icons {
+  transform: scaleX(-1);
+}
+.flip-v,
+.icon-flip-v span.pui-material-icons {
+  transform: scaleY(-1);
+}
+
+/**************************************************************/
+/************************ Scrollbar ***************************/
+/**************************************************************/
+.plogic--file-upload > .list-box ::-webkit-scrollbar,
+.plogic--file-upload > .list-box::-webkit-scrollbar,
+.plogic--drop-file-upload > .list-box ::-webkit-scrollbar,
+.plogic--drop-file-upload > .list-box::-webkit-scrollbar {
+  width: 6px;
+}
+
+.plogic--file-upload > .list-box ::-webkit-scrollbar-track,
+.plogic--file-upload > .list-box::-webkit-scrollbar-track,
+.plogic--drop-file-upload > .list-box ::-webkit-scrollbar-track,
+.plogic--drop-file-upload > .list-box::-webkit-scrollbar-track {
+  background: var(--color--scroll-bar--track);
+  border-radius: 0;
+}
+
+.plogic--file-upload > .list-box ::-webkit-scrollbar-thumb,
+.plogic--file-upload > .list-box::-webkit-scrollbar-thumb,
+.plogic--drop-file-upload > .list-box ::-webkit-scrollbar-thumb,
+.plogic--drop-file-upload > .list-box::-webkit-scrollbar-thumb {
+  background: var(--color--accent);
+  border-radius: 20px;
+}
+
+.plogic--file-upload > .list-box ::-webkit-scrollbar-thumb:hover,
+.plogic--file-upload > .list-box::-webkit-scrollbar-thumb:hover,
+.plogic--drop-file-upload > .list-box ::-webkit-scrollbar-thumb:hover,
+.plogic--drop-file-upload > .list-box::-webkit-scrollbar-thumb:hover {
+  background: var(--color--secondary);
+}
+
+/* Added ".pui-scrollbar" to exclude the body scroll bar from customization */
+.plogic-scroll-bar-wrap .pui-scrollbar::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+.plogic-nav-menu::-webkit-scrollbar {
+  width: 0px;
+}
+.plogic-scroll-bar-wrap ::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.3);
+  border: none;
+}
+.plogic-scroll-bar-wrap ::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.7);
+}
+.plogic-scroll-bar-wrap {
+  scrollbar-color: rgba(155, 155, 155, 0.3);
+}
+.plogic-scroll-bar-wrap ::-webkit-scrollbar-track {
+  background: transparent;
+}
+.plogic-scroll-bar-wrap ::-webkit-scrollbar-track:hover {
+  background: transparent;
+}
+.plogic-scroll-bar-wrap ::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+.plogic-scroll-bar-wrap ::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.pui-scrollbar-pui-scrollbar,
+.pui-scrollbar.plogic--grid-pui-scrollbar {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-bottom: 1px solid transparent;
+}
+.pui-scrollbar-pui-scrollbar::-webkit-scrollbar-thumb,
+.pui-scrollbar.plogic--grid-pui-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.3);
+  border: none;
+}
+.pui-scrollbar-pui-scrollbar::-webkit-scrollbar-thumb:hover,
+.pui-scrollbar.plogic--grid-pui-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.7);
+}
+
+/**************************************************************/
+/********************** Message Panels ************************/
+/**************************************************************/
+/* The message box panels should lie above grid lines (z-index 96). */
+[id*="MsgBoxPanel"] {
+  z-index: 99;
+}
+
+/**************************************************************/
+/************************ KeyFrames ***************************/
+/**************************************************************/
+
+/***** Slide Right *****/
+.slide-right {
+  animation: 500ms slide-right;
+  animation-timing-function: ease-out;
+}
+@keyframes slide-right {
+  from {
+    margin-left: calc(-1 * var(--menu-max-width));
+  }
+  to {
+    margin-left: 0%;
+  }
+}
+
+/***** Slide Left *****/
+.slide-left {
+  animation: 500ms slide-left;
+  animation-timing-function: ease-in;
+}
+@keyframes slide-left {
+  from {
+    margin-left: 0%;
+  }
+  to {
+    margin-left: calc(-1 * var(--menu-max-width));
+  }
+}
+
+/***** Blink *****/
+@-webkit-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-moz-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-o-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+/***** End of Blink *****/
+
+/***** zoom-in-zoom-out *****/
+@keyframes zoom-in-zoom-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  50% {
+    transform: scale(1.2, 1.2);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+/***** End of zoom-in-zoom-out *****/