/* -------------------------------------------------------------------------- */
/* -- 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 *****/