profoundjs/htdocs/profoundui/proddata/css/plogic.css

Profound.js Framework and Server

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