@charset "UTF-8";
/*
 * site.scss
 *
 * The top-level SCSS file which the entire app's CSS is generated from.
 * This file is responsible for importing all SCSS files, and implementing all one-off
 * styling that doesn't deserve to be placed in its own file.
 */
/*
* common.scss
*
* A collection of helper classes and mixins.
*/
/*
 * palette.scss
 *
 * Defines all the colors used throughout the app.
 */
/*
 * branding.scss
 *
 * Defines all the colors for PKWARE branding.
 */
/* Primary Colors */
/* Secondary Colors */
/* Neutrals & Shades */
/* Gradients */
/*
 * Formulator Box
 */
/*
 * Border colors
 */
/*
 * General colors (page color, link color, label color, etc...)
 */
/* 
 * Selectize 
 */
/*
 * To-do items
 */
/*
 * Buttons
 */
/*
 * Title sections (also known as a "header", named "title" to avoid confusion with the app's header menu).
 * (e.g. a .sectionBar is a title section -- see formulator.scss for more information on .sectionBar)
 */
/*
 * The page's header (the menu with the clickable menu items):
 */
/* Helper classes for applying colors quickly */
.palette-button, .dt-menu-settings, .dt-menu, .ui-menu .ui-menu-item, .ui-button:focus, .ui-button {
  background: #1152be;
  color: #ffffff;
}

.palette-button-hover, .dt-menu-settings:hover, .ui-menu .ui-menu-item:hover, .ui-button:hover {
  background: rgb(12.8115942029, 61.7971014493, 143.1884057971);
  color: #ffffff;
}

.palette-title, .dsi-mfe a, .flowItemTitle, .sectionBar .lvp-label, .sectionBar, .ui-dialog-titlebar, .ui-accordion-header, .ui-widget-header {
  background: #1e3074;
  color: #ffffff;
}

.primaryFont, body, .ui-widget {
  font-size: 0.9rem;
  font-family: "Montserrat", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.rounded, div.block-warning, .flowListItem, .flowExplanation, div.formulatorForm, #detaildiv, .formulatorSubForm, .formulatorSubForm1, div.formulator {
  border-radius: 5px;
}

.roundedTop, .sectionBar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.roundedBottom {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.wrapall, .lvp-value {
  overflow-wrap: break-word;
}

.hidden, .validation-summary-valid, .field-validation-valid {
  display: none;
}

.bold, .validation-summary-errors, .field-validation-error, .flowItemTitle, .formulatorTitle, .caption, .sectionBar, .emphasized {
  font-weight: bold;
}

.caption, .sectionBar {
  font-size: 1.2em;
}

.clickable, span.editable-clear-x, #btnToggleInfo, .dt-menu-settings, .ui-widget-header a:hover, .ui-state-default, .ui-button {
  cursor: pointer;
}

.instructions {
  color: #888;
}

.good, .ok, a.good, a.ok {
  color: #280;
}

.pending, .inprogress {
  color: #48e;
}

.error, .bad, a.error, a.bad {
  color: #e14;
}

.warning {
  color: #c82;
}

.info {
  color: #280;
}

.none {
  font-style: italic;
  color: #448;
}

.text-input, textarea, input, .selectize-control.single .selectize-input {
  border-color: #c5c2c5;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: #333;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  src: url("../fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("opentype");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  src: url("../fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf") format("opentype");
}
.material-symbols-outlined, .material-symbols-rounded {
  font-variation-settings: "FILL" 1;
  /*&.fill-icon { // TODO - See if we need a reversal class for non-fill
    font-variation-settings: "FILL" 1;
  }*/
}

.dt-menu-settings .material-symbols-outlined, .dt-menu-settings .material-symbols-rounded {
  vertical-align: middle;
  font-size: inherit;
}

/*
* jquery-ui.scss
*
* Style overrides for jQuery UI. 
* This file defines custom styles we apply on-top of the existing jQuery styles to customize certain components.
*/
/*
* common.scss
*
* A collection of helper classes and mixins.
*/
/*
 * palette.scss
 *
 * Defines all the colors used throughout the app.
 */
/*
 * branding.scss
 *
 * Defines all the colors for PKWARE branding.
 */
/* Primary Colors */
/* Secondary Colors */
/* Neutrals & Shades */
/* Gradients */
/*
 * Formulator Box
 */
/*
 * Border colors
 */
/*
 * General colors (page color, link color, label color, etc...)
 */
/* 
 * Selectize 
 */
/*
 * To-do items
 */
/*
 * Buttons
 */
/*
 * Title sections (also known as a "header", named "title" to avoid confusion with the app's header menu).
 * (e.g. a .sectionBar is a title section -- see formulator.scss for more information on .sectionBar)
 */
/*
 * The page's header (the menu with the clickable menu items):
 */
/* Helper classes for applying colors quickly */
.palette-button, .dt-menu-settings, .dt-menu, .ui-menu .ui-menu-item, .ui-button:focus, .ui-button {
  background: #1152be;
  color: #ffffff;
}

.palette-button-hover, .dt-menu-settings:hover, .ui-menu .ui-menu-item:hover, .ui-button:hover {
  background: rgb(12.8115942029, 61.7971014493, 143.1884057971);
  color: #ffffff;
}

.palette-title, .dsi-mfe a, .flowItemTitle, .sectionBar .lvp-label, .sectionBar, .ui-dialog-titlebar, .ui-accordion-header, .ui-widget-header {
  background: #1e3074;
  color: #ffffff;
}

.primaryFont, body, .ui-widget {
  font-size: 0.9rem;
  font-family: "Montserrat", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.rounded, div.block-warning, .flowListItem, .flowExplanation, div.formulatorForm, #detaildiv, .formulatorSubForm, .formulatorSubForm1, div.formulator {
  border-radius: 5px;
}

.roundedTop, .sectionBar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.roundedBottom {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.wrapall, .lvp-value {
  overflow-wrap: break-word;
}

.hidden, .validation-summary-valid, .field-validation-valid {
  display: none;
}

.bold, .validation-summary-errors, .field-validation-error, .flowItemTitle, .formulatorTitle, .emphasized, .caption, .sectionBar {
  font-weight: bold;
}

.caption, .sectionBar {
  font-size: 1.2em;
}

.clickable, span.editable-clear-x, #btnToggleInfo, .dt-menu-settings, .ui-widget-header a:hover, .ui-state-default, .ui-button {
  cursor: pointer;
}

.instructions {
  color: #888;
}

.good, .ok, a.good, a.ok {
  color: #280;
}

.pending, .inprogress {
  color: #48e;
}

.error, .bad, a.error, a.bad {
  color: #e14;
}

.warning {
  color: #c82;
}

.info {
  color: #280;
}

.none {
  font-style: italic;
  color: #448;
}

.text-input, textarea, input, .selectize-control.single .selectize-input {
  border-color: #c5c2c5;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: #333;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px;
}

/*
 * Buttons
 */
.ui-button {
  font-size: 14px;
  font-weight: bold;
  padding: 6px 12px;
  margin-right: 4px;
  height: 35px;
  width: auto;
  border-width: 0;
}
.ui-button:focus {
  font-weight: bold;
  border-width: 0;
}
.ui-button:hover {
  font-weight: bold;
  border-width: 0;
}
.ui-button.long {
  width: 100%;
}
.ui-button > .ui-button-text {
  padding: 0;
  height: 100%;
}

/* .ui-button-text-only is a special .ui-button varient: */
.ui-button-text-only .ui-button-text {
  padding: 0;
}

/* any buttons in the header of a dialog should have the flat style 
   (no background no border) because pk-cyan doesn't mix well with pk-navy */
.ui-dialog-titlebar .ui-button {
  background: none;
  border: none;
}

/*
 * Icons
 */
.ui-icon-white, .ui-widget-header a .ui-icon, .ui-button .ui-button-icon {
  background-image: url("../images/ui-icons_ffffff_256x240.png");
}

a.ui-icon {
  padding: 0px;
  display: inline-block;
  font-size: 15px;
}

/*
 * Dropdown Menu
 */
.ui-menu .ui-menu-item {
  border-color: #c5c2c5 !important;
  margin: 0 !important;
}
.ui-menu .ui-menu-item:first-child {
  border-top-left-radius: 5px;
}
.ui-menu .ui-menu-item:not(:first-child) {
  border-top: 1px solid #c5c2c5 !important;
}
.ui-menu .ui-menu-item:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom: 1px solid #c5c2c5 !important;
}

/*
 * Validation
 */
.ui-state-default {
  border: 1px solid #a0a0a0;
  font-size: 1em;
}

div.ui-state-error {
  margin: 10px;
  padding: 10px;
  background: inherit;
  border-radius: 5px;
  border-color: #e14;
  color: #e14;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

/*
 * Widgets
 *
 * Used for various jQuery UI widgets, specifically for the datepicker (see Reporting page, and Dashboard page for examples).
 */
.ui-widget-header a:hover {
  background: none;
  border: none;
}
/*
 * Accordion
 *
 * A collapsible div (used for Reporting Page help button).
 */
/*
 * Dialogs
 *
 * A popup that presents a message with actions (used for confirmation dialogs -- "Are you sure?" popup boxes)
 */
.ui-dialog {
  font-size: 1em;
  padding: 0;
  border: 1px solid #c5c2c5;
  border-radius: 5px;
}

.ui-dialog-titlebar {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  padding: 10px !important;
  border-radius: 0;
}

/*
* formulator.scss
*
* This file defines the styling related to "formulator boxes", and the typical content contained in these boxes.
* This includes:
*   - Formulator box and all its derivatives (e.g. .formulator, .formulatorSubForm, .collapsibleFormulator, etc...)
*   - LVPs (e.g. .lvp-value, lvp-label, etc...)
*   - Section Bars (e.g. .sectionBar -- the header of each formulator box)
*   - Button groups and table options (e.g. the container for buttons below most <form>s and the container for buttons below most datatables).
*
*  A formulator box is a container that has a header section (that has class .sectionBar), 
*  and arbitrary content (is typically either a table with LVPs, a datatable, or nested formulator boxes).
*  Below is an example of a formulator box with a table and table options in the
*     __________________
*    | Employees        | <- .sectionBar
*    --------------------
*    | |Name|Title    | |
*    | ---------------- |
*    | |Adam|Engineer | | <- <table class="dataTable">...</table>
*    | |Joe |Boss     | |
*    |                  |
*    |           <Add>  | <- .table-options
*     -----------------
*
* The HTML for this table looks like this:
*
*   <div class="formulator">
*     <div class="sectionBar">Employees</div>
*     <table class="dataTable">...</table>
*     <div class="table-options">
*       <button>Add</button>
*     </div>
*   </div>
*
* There is one special form of formulator boxes (that have the class .formulatorCollapsible) that is generated when a group of content
* can be enabled and disabled. This exists in <form>s where an entire feature can be turned
* off or on. (In C# this is generated when the first item in an lvpBox is a checkbox) 
* Below is an example:
*                       ___________________________________
*  .formulatorTitle -> | Encryption   |x| Allow Encryption | <- .lvp-row with .lvp-label and .lvp-value with nested .formulatorTitle div
*                      |        Users      Adam,Jon        | <- .lvp-row
*                      |        Algorithm  AES256          | <- .lvp-row
*                       -----------------------------------
*
* The HTML for this formulator box is:
*
*   <div class="formulatorCollapsible formulator">
*     <table><tbody>
*       <tr>
*         <td class="lvp-label"><div class="formulatorTitle">Encryption</div></td>
*         <td class="lvp-value">...<label class="lvp-check">...</label>...</td>
*       </tr>
*       <tr>
*         <td class="lvp-label">Users</td>
*         <td class="lvp-value">...<input value="Adam,Jon"></input>...</td>
*       </tr>
*       <tr>
*         <td class="lvp-label">Algorithm</td>
*         <td class="lvp-value">...<input value="AES256"></input>...</td>
*       </tr>
*     </tbody></table>
*   </div>
*                  
*  == Notice the only item in the formulator box is a table, and each entry in the table uses LVPs for formatting. ==
*
* Formulator boxes can contain other formulator boxes. 
* This is useful when identifying groups of similar content within an already defined group.
* Such as configurations for an Email Policy that already exists in another Policy (Archive Policy). 
* Nested formulator boxes have the same format (with a .sectionBar and arbitrary content).
*
* If the UI wants to create smaller sized formulator boxes for nested boxes, it will use .formulatorSubForm
* and .formulatorSubForm1 to create progressively smaller boxes.
*/
/*
* common.scss
*
* A collection of helper classes and mixins.
*/
/*
 * palette.scss
 *
 * Defines all the colors used throughout the app.
 */
/*
 * branding.scss
 *
 * Defines all the colors for PKWARE branding.
 */
/* Primary Colors */
/* Secondary Colors */
/* Neutrals & Shades */
/* Gradients */
/*
 * Formulator Box
 */
/*
 * Border colors
 */
/*
 * General colors (page color, link color, label color, etc...)
 */
/* 
 * Selectize 
 */
/*
 * To-do items
 */
/*
 * Buttons
 */
/*
 * Title sections (also known as a "header", named "title" to avoid confusion with the app's header menu).
 * (e.g. a .sectionBar is a title section -- see formulator.scss for more information on .sectionBar)
 */
/*
 * The page's header (the menu with the clickable menu items):
 */
/* Helper classes for applying colors quickly */
.palette-button, .dt-menu-settings, .dt-menu, .ui-button, .ui-button:focus, .ui-menu .ui-menu-item {
  background: #1152be;
  color: #ffffff;
}

.palette-button-hover, .dt-menu-settings:hover, .ui-button:hover, .ui-menu .ui-menu-item:hover {
  background: rgb(12.8115942029, 61.7971014493, 143.1884057971);
  color: #ffffff;
}

.palette-title, .dsi-mfe a, .flowItemTitle, .sectionBar .lvp-label, .sectionBar, .ui-widget-header, .ui-accordion-header, .ui-dialog-titlebar {
  background: #1e3074;
  color: #ffffff;
}

.primaryFont, body, .ui-widget {
  font-size: 0.9rem;
  font-family: "Montserrat", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.rounded, div.block-warning, .flowListItem, .flowExplanation, div.formulatorForm, #detaildiv, .formulatorSubForm, .formulatorSubForm1, div.formulator {
  border-radius: 5px;
}

.roundedTop, .sectionBar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.roundedBottom {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.wrapall, .lvp-value {
  overflow-wrap: break-word;
}

.hidden, .validation-summary-valid, .field-validation-valid {
  display: none;
}

.bold, .validation-summary-errors, .field-validation-error, .flowItemTitle, .formulatorTitle, .emphasized, .caption, .sectionBar {
  font-weight: bold;
}

.caption, .sectionBar {
  font-size: 1.2em;
}

.clickable, span.editable-clear-x, #btnToggleInfo, .dt-menu-settings, .ui-button, .ui-state-default, .ui-widget-header a:hover {
  cursor: pointer;
}

.instructions {
  color: #888;
}

.good, .ok, a.good, a.ok {
  color: #280;
}

.pending, .inprogress {
  color: #48e;
}

.error, .bad, a.error, a.bad {
  color: #e14;
}

.warning {
  color: #c82;
}

.info {
  color: #280;
}

.none {
  font-style: italic;
  color: #448;
}

.text-input, textarea, input, .selectize-control.single .selectize-input {
  border-color: #c5c2c5;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: #333;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px;
}

div.formulator {
  background-color: #ffffff;
  margin-bottom: 20px;
  border-color: #c5c2c5;
  border-style: solid;
  border-width: 1px;
  /* Select all nested formulator boxes */
}
div.formulator div.formulator {
  /* Nested formulator boxes have space around them */
  margin: 10px;
  /* and their .sectionBar should be a different color */
}
div.formulator div.formulator .sectionBar {
  background-color: transparent;
  color: #1e3074;
}
div.formulator.noBorder {
  border: none;
  margin: 0;
}
div.formulator.noBorderNoSpace {
  border: none;
  margin-top: 0;
  margin-bottom: 0;
}
div.formulator > table {
  table-layout: fixed;
  width: 100%;
}

/* Format the collapsible formulator's title */
.formulatorTitle {
  font-size: 1.2em;
  text-align: left;
  padding: 10px;
}

.formulatorSubForm, .formulatorSubForm1 {
  background-color: #ffffff;
  margin: 0.9em;
  border: 1px solid #dcdcdc;
  /* adding the .noBorder class to the same element as .formulatorSubForm flattens 
     the formulator so no border and no background is displayed. */
}
.formulatorSubForm .sectionBar, .formulatorSubForm1 .sectionBar {
  font-size: 1.1em;
}
.formulatorSubForm.noBorder, .noBorder.formulatorSubForm1 {
  border: none;
  background-color: transparent;
  margin: 0;
}
.formulatorSubForm1 {
  /* Make collapsible formulator title's font smaller than .formulatorSubForm and .formulatorTitle */
}
.formulatorSubForm1 .formulatorTitle {
  font-size: 1.1em;
}
.formulator-table-padding, div.formulator > table, .formulatorSubForm > table, .formulatorSubForm1 > table {
  padding-right: 0.9em;
}

/* 
 * Collapsible Formulator Boxes 
 *
 * A special form of formulator box (described at the top of formulator.scss) that can be enabled/disabled.
 * One off styling is required 
 */
div.formulator.formulatorCollapsible table:not(.dataTable) {
  width: 100%;
}

div.formulator:not(.formulatorCollapsible) table:not(.dataTable) {
  padding-top: 5px;
  padding-bottom: 5px;
}

.formulator table {
  width: 100%;
}

/*
 * Formulator Form
 *
 * Content for the body of a formulator to that looks like a collapsible formulator, without a checkbox.
 */
div.formulatorForm, #detaildiv {
  box-shadow: none;
  margin: 10px 20px;
  background-color: #ffffff;
  border-color: #c5c2c5;
  border-style: solid;
  border-width: 1px;
}

/*
 * Section Bar
 *
 * The header for a formulator box.
 */
.sectionBar {
  border-bottom: #c5c2c5 solid 1px;
  margin: 10px;
  padding: 10px 12px;
  font-size: 20px;
}
.sectionBar:empty {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Styling for special debug formulator boxes */
div.formulator.debug .sectionBar {
  background-color: #dda;
  color: black;
}

/*
 * Table Options
 *
 * A container for buttons that perform actions relevant to the datatable above it (e.g. an Add button, an Import button, etc...).
 */
.table-options, div.formulator .ButtonGroup,
.formulator form .ButtonGroup,
div.formulator:nth-last-child(2) .ButtonGroup:last-child,
div.formulator table tr:last-child .ButtonGroup:last-child,
div.formulator:last-child:not(table) > :not(td) > .ButtonGroup:last-child {
  display: inline-block;
  /*position: relative;
  top: -20px;
  left: 15px;
  margin: 10px 10px 10px 10px;
  text-align: right;
  & > li {
      display: inline-block;
  }*/
}

/*
 * Button Group
 *
 * A container for buttons that perform actions relevant to the form above it (e.g. a submit button, a cancel button, etc...).
 */
/*
 * Label-Value-Pairs (LVP)
 *
 * Label value pairs are rows that show a label on the left with a value on the right.
 * It keeps the right amount of space between the labels and values so that values all
 * start at the same x position on the screen.
 * 
 * It is expected that LVPs are placed in a table row <tr> that has the class .lvp-row
 * Below is an example of two lvp rows:
 *
 *   Name      Adam
 *   Title     Software Engineer
 *
 * The HTML to create this UI is:
 *
 *   <table>
 *     <tr class="lvp-row">
 *       <td class="lvp-label">Name</td>
 *       <td class="lvp-value">Adam</td>
 *     </tr>
 *     <tr class="lvp-row">
 *       <td class="lvp-label">Title</td>
 *       <td class="lvp-value">Software Engineer</td>
 *     </tr>
 *   </table>
 */
.lvp-label {
  vertical-align: top;
  text-align: right;
  padding-left: 10px;
  color: #222;
  min-width: 10rem;
  max-width: 17rem;
  width: 17em;
}
.wide-label .lvp-label {
  max-width: 25em;
  width: 25em;
}

.lvp-value {
  text-align: left;
  padding: 0px;
  padding-left: 15px;
}
.lvp-value label {
  display: inline-table;
}

.lvp-value > .ButtonGroup {
  margin: 0 !important;
  float: right;
}

.ButtonGroup {
  float: right;
}

.lvp-label.disabled {
  color: #888;
}

.tight td.lvp-label {
  padding: 0 !important;
}

.tight td {
  padding: 0 0 0 15px !important;
}

.lvp-check {
  font-size: 1em;
}

.lvp-indent1 {
  margin-left: 2em;
  width: calc(100% - 2em) !important; /* CA added line 3/9/2010 - it seems classes are loaded in wrong order, 
so using "!important" forces this style to have priority. Otherwise I had to resort to using in-line Style. */
}

.table-row-indent {
  position: relative;
  left: 10rem;
}

/*
* selectize.scss
*
* Overrided styles for the selectize jQuery plugin.
*
* Below are two diagrams of the two selectize varients (single-select and multi-select):
*
* Single-select:
*       .selectize-input .has-items (is inside of the .selectize-control)
*      / -- <div data-value="Adam"></div>
*   __v_v_____
*  |_Adam___▲_| <- .selectize-control .single (wraps the .selectize-input -- not the dropdown)
*  | Jon      <--- .selectize-dropdown-content (is inside of the .selectize-dropdown)
*  |_Joe______| <- .selectize-dropdown .single (wraps the .selectize-dropdown-content)
*
* Multi-select:
*       .selectize-input .has-items (is inside of the .selectize-control)
*      /     -- <div data-value="Jon"></div>
*   __v_____v________
*  |_Adam__Jon__Joe__| <- .selectize-control .multi (wraps the .selectize-input -- not the dropdown)
*  | Ted           <----- .selectize-dropdown-content (is inside of the .selectize-dropdown)
*  |_Jake____________| <- .selectize-dropdown .multi (wraps the .selectize-dropdown-content)
*
* We have added a special class of multi select called .uniqueFirst which changes the color
* of the first item in a multi-select.
*
* We have also extended multi-select selectizes to support showing details about each item
* using a container called .selectize-details. .selectize-details is a floating container of
* LVPs which is meant to show a sneak peek of a value who only has a name exposed in the multi-select.
*/
/*
* common.scss
*
* A collection of helper classes and mixins.
*/
/*
 * palette.scss
 *
 * Defines all the colors used throughout the app.
 */
/*
 * branding.scss
 *
 * Defines all the colors for PKWARE branding.
 */
/* Primary Colors */
/* Secondary Colors */
/* Neutrals & Shades */
/* Gradients */
/*
 * Formulator Box
 */
/*
 * Border colors
 */
/*
 * General colors (page color, link color, label color, etc...)
 */
/* 
 * Selectize 
 */
/*
 * To-do items
 */
/*
 * Buttons
 */
/*
 * Title sections (also known as a "header", named "title" to avoid confusion with the app's header menu).
 * (e.g. a .sectionBar is a title section -- see formulator.scss for more information on .sectionBar)
 */
/*
 * The page's header (the menu with the clickable menu items):
 */
/* Helper classes for applying colors quickly */
.palette-button, .dt-menu-settings, .dt-menu, .ui-button, .ui-button:focus, .ui-menu .ui-menu-item {
  background: #1152be;
  color: #ffffff;
}

.palette-button-hover, .dt-menu-settings:hover, .ui-button:hover, .ui-menu .ui-menu-item:hover {
  background: rgb(12.8115942029, 61.7971014493, 143.1884057971);
  color: #ffffff;
}

.palette-title, .dsi-mfe a, .flowItemTitle, .ui-widget-header, .ui-accordion-header, .ui-dialog-titlebar, .sectionBar, .sectionBar .lvp-label {
  background: #1e3074;
  color: #ffffff;
}

.primaryFont, body, .ui-widget {
  font-size: 0.9rem;
  font-family: "Montserrat", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.rounded, div.block-warning, .flowListItem, .flowExplanation, div.formulator, .formulatorSubForm, .formulatorSubForm1, div.formulatorForm, #detaildiv {
  border-radius: 5px;
}

.roundedTop, .sectionBar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.roundedBottom {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.wrapall, .lvp-value {
  overflow-wrap: break-word;
}

.hidden, .validation-summary-valid, .field-validation-valid {
  display: none;
}

.bold, .validation-summary-errors, .field-validation-error, .flowItemTitle, .emphasized, .caption, .formulatorTitle, .sectionBar {
  font-weight: bold;
}

.caption, .sectionBar {
  font-size: 1.2em;
}

.clickable, span.editable-clear-x, #btnToggleInfo, .dt-menu-settings, .ui-button, .ui-state-default, .ui-widget-header a:hover {
  cursor: pointer;
}

.instructions {
  color: #888;
}

.good, .ok, a.good, a.ok {
  color: #280;
}

.pending, .inprogress {
  color: #48e;
}

.error, .bad, a.error, a.bad {
  color: #e14;
}

.warning {
  color: #c82;
}

.info {
  color: #280;
}

.none {
  font-style: italic;
  color: #448;
}

.text-input, textarea, input, .selectize-control.single .selectize-input {
  border-color: #c5c2c5;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: #333;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px;
}

.selectize-control.single {
  display: inline-block;
  vertical-align: middle;
}
.selectize-control.single .selectize-input {
  padding: 2px;
  padding-left: 5px;
  padding-top: 1px;
  color: #222;
  background: white;
  word-break: break-word;
}

.selectize-control.multi .selectize-input {
  padding: 0px;
  padding-top: 3px;
  padding-left: 3px;
}
.selectize-item-mixin, .display-expression .bool-exp-value, .selectize-control.multi .selectize-input [data-value], .selectize-control.multi .selectize-input div.active {
  padding: 1px 4px;
  margin: 0px;
  margin-right: 3px;
  margin-bottom: 3px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 18px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);
  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
  border: 1px solid #0073bb;
  color: #fff;
  background: rgb(32.5, 100.5, 135);
  background-image: -webkit-linear-gradient(top, rgb(32.5, 100.5, 135), #0e96db);
  background-image: -moz-linear-gradient(top, rgb(32.5, 100.5, 135), #0e96db);
  background-image: -ms-linear-gradient(top, rgb(32.5, 100.5, 135), #0e96db);
  background-image: linear-gradient(top, rgb(32.5, 100.5, 135), #0e96db);
}
.selectize-item-mixin.active, .display-expression .active.bool-exp-value, .selectize-control.multi .selectize-input .active[data-value], .selectize-control.multi .selectize-input div.active {
  box-shadow: 0px 0px 5px 3px rgba(0, 115, 187, 0.7);
}

.selectize-input {
  overflow: visible;
}

.selectize-control.uniqueFirst .selectize-input div:not(:first-child) {
  color: #fff;
  border-color: rgb(87.5728755365, 132.7210601905, 155.6271244635);
  background: rgb(80.6896995708, 101.6672689208, 112.3103004292);
  background-image: -webkit-linear-gradient(top, rgb(80.6896995708, 101.6672689208, 112.3103004292), rgb(110.3793991416, 152.3345378415, 173.6206008584));
  background-image: -moz-linear-gradient(top, rgb(80.6896995708, 101.6672689208, 112.3103004292), rgb(110.3793991416, 152.3345378415, 173.6206008584));
  background-image: -ms-linear-gradient(top, rgb(80.6896995708, 101.6672689208, 112.3103004292), rgb(110.3793991416, 152.3345378415, 173.6206008584));
  background-image: linear-gradient(top, rgb(80.6896995708, 101.6672689208, 112.3103004292), rgb(110.3793991416, 152.3345378415, 173.6206008584));
}

div.selectize-control.loading:after,
div.selectize-control.loading-remote:after {
  content: " ";
  width: 16px;
  height: 16px;
  position: absolute;
  right: 4px;
  top: 6px;
  z-index: 100;
  background: url("../images/loading.gif");
  background-repeat: no-repeat;
  display: inline-block;
  float: right;
  vertical-align: middle;
  padding-right: 5px;
}

div.selectize-control.loading-remote {
  display: inline-block;
  pointer-events: none;
}
div.selectize-control.loading-remote .selectize-input > * {
  display: none;
}

.input-validation-error + .selectize-control > .selectize-input {
  border: 2px solid #e14;
}

.selectize-details {
  position: absolute;
  background: #ffffff;
  color: #222;
  margin-left: -5px;
  margin-top: 3px;
  padding: 10px;
  border: 1px solid #dcdcdc;
  border-radius: 0 0 5px 5px;
  z-index: 1000;
}
.selectize-details .lvp-label {
  min-width: 0;
  font-weight: bold;
  white-space: nowrap;
}

.selectize-control.simple-selectize .selectize-dropdown-content > .option:empty {
  display: none;
}

.selectize-control.plugin-remove_button [data-value] .remove {
  font-size: 14px;
  top: -1px;
}

/*
* datatable.scss
*
* Overrided styles for the jQuery DataTables plugin. 
*
* Below is a diagram of a typical DataTable that is generated via jQuery:
*                  
*       .dt-length    .dt-search (includes the search box and the .dt-menu)
*      /                     /
*  ___v_____________________v________
* |  Show [2]      Search:____   Menu <---- .dt-menu (just the menu button and the dropdown menu it creates)
* |  _____________________________   |     
* |  | Name | Title | Fav Color   | <---- .dataTable (if scrolling is enabled, it is wrapped in a .dt-scroll div)
* |  |----------------------------|  |
* |  | Adam | Eng.  | Pink        |  | <- .dt-container
* |  | Joe  | Boss  | Blue        |  |  
* |  |______|_______|_____________|  |
* |  Showing 2 of 10     [1] [2] ... |
* |_______^____________________^_____|
*         \                     \
*           .dt-info      .dt-paging
*
* There is one component of DataTables which is custom to PKWARE, this is the .dt-menu. .dt-menu is 
* a dropdown menu that allows the user to select 3 different formats to export the table's contents to (CSV, copy to clipboard, or XLSX).
*/
/*
* common.scss
*
* A collection of helper classes and mixins.
*/
/*
 * palette.scss
 *
 * Defines all the colors used throughout the app.
 */
/*
 * branding.scss
 *
 * Defines all the colors for PKWARE branding.
 */
/* Primary Colors */
/* Secondary Colors */
/* Neutrals & Shades */
/* Gradients */
/*
 * Formulator Box
 */
/*
 * Border colors
 */
/*
 * General colors (page color, link color, label color, etc...)
 */
/* 
 * Selectize 
 */
/*
 * To-do items
 */
/*
 * Buttons
 */
/*
 * Title sections (also known as a "header", named "title" to avoid confusion with the app's header menu).
 * (e.g. a .sectionBar is a title section -- see formulator.scss for more information on .sectionBar)
 */
/*
 * The page's header (the menu with the clickable menu items):
 */
/* Helper classes for applying colors quickly */
.palette-button, .dt-menu-settings, .dt-menu, .ui-button, .ui-button:focus, .ui-menu .ui-menu-item {
  background: #1152be;
  color: #ffffff;
}

.palette-button-hover, .dt-menu-settings:hover, .ui-button:hover, .ui-menu .ui-menu-item:hover {
  background: rgb(12.8115942029, 61.7971014493, 143.1884057971);
  color: #ffffff;
}

.palette-title, .dsi-mfe a, .flowItemTitle, .ui-widget-header, .ui-accordion-header, .ui-dialog-titlebar, .sectionBar, .sectionBar .lvp-label {
  background: #1e3074;
  color: #ffffff;
}

.primaryFont, body, .ui-widget {
  font-size: 0.9rem;
  font-family: "Montserrat", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.rounded, div.block-warning, .flowListItem, .flowExplanation, div.formulator, .formulatorSubForm, .formulatorSubForm1, div.formulatorForm, #detaildiv {
  border-radius: 5px;
}

.roundedTop, .sectionBar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.roundedBottom {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.wrapall, .lvp-value {
  overflow-wrap: break-word;
}

.hidden, .validation-summary-valid, .field-validation-valid {
  display: none;
}

.bold, .validation-summary-errors, .field-validation-error, .flowItemTitle, .emphasized, .caption, .formulatorTitle, .sectionBar {
  font-weight: bold;
}

.caption, .sectionBar {
  font-size: 1.2em;
}

.clickable, span.editable-clear-x, #btnToggleInfo, .dt-menu-settings, .ui-button, .ui-state-default, .ui-widget-header a:hover {
  cursor: pointer;
}

.instructions {
  color: #888;
}

.good, .ok, a.good, a.ok {
  color: #280;
}

.pending, .inprogress {
  color: #48e;
}

.error, .bad, a.error, a.bad {
  color: #e14;
}

.warning {
  color: #c82;
}

.info {
  color: #280;
}

.none {
  font-style: italic;
  color: #448;
}

.text-input, textarea, input, .selectize-control.single .selectize-input {
  border-color: #c5c2c5;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: #333;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px;
}

table.dataTable {
  /* Disables scrolling in the x direction (still allows for scrolling y) */
}
table.dataTable thead {
  background-color: #ececec;
  font-size: 0.85em;
}
table.dataTable thead th, table.dataTable thead td {
  border-color: #c5c2c5;
}
table.dataTable thead th .dt-control:before, table.dataTable thead td .dt-control:before {
  font-family: Arial, sans-serif;
}
table.dataTable thead th {
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}
table.dataTable thead th:first-child {
  border-left: none;
}
table.dataTable thead th.sorting:before, table.dataTable thead th.sorting:after {
  font-family: Arial, sans-serif;
}
table.dataTable tbody tr {
  background-color: #fff;
}
table.dataTable tbody tr[data-dt-row] {
  background: rgb(235, 247, 250);
  box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 0.05);
}
table.dataTable.noscrollx tbody [role=row] {
  overflow-wrap: break-word;
  white-space: normal;
}
table.dataTable.noscrollx tbody tr td {
  word-break: break-word;
  -ms-word-break: break-all; /* use break-all for IE11 and Edge because break-word isn't supported -- it doesn't look as good as break-word, but it is usable. Is this still true in 2024?? This doesn't look to be true anymore*/
}

.dt-layout-table {
  padding-top: 5px;
}

div.dt-buttons {
  margin-bottom: 10px;
  display: inline-block;
}

.dt-container {
  border-color: #c5c2c5;
  border-style: solid;
  border-width: 0 0 0 0;
  margin: 10px 10px 0 10px;
  /* Pagination buttons */
}
.dt-container .dt-empty .dt-scroll-body {
  border-left: none !important;
  border-right: none !important;
  border-bottom-color: transparent;
}
.dt-container .dt-info {
  padding-top: 0.75em;
  padding-bottom: 0.95em;
  font-weight: bold;
}
.dt-container > .dataTable {
  border: 1px #c5c2c5 solid !important;
}
.dt-container ul.pagination {
  display: flex;
}
.dt-container ul.pagination .dt-paging-button.page-item {
  display: flex;
  position: relative;
  background: #ffffff;
  border-color: #dcdcdc;
  border-radius: 3px;
  text-align: center;
  vertical-align: middle;
  min-width: 35px;
  min-height: 35px;
  padding: 0;
}
.dt-container ul.pagination .dt-paging-button.page-item a {
  text-decoration: none !important;
  font-weight: 600;
  width: 100%;
  height: calc(100% - 8px);
  left: 0;
  right: 0;
  padding: 8px 5px 0;
  border-radius: 3px;
}
.dt-container ul.pagination .dt-paging-button.page-item a.ellipsis {
  padding: 5px;
}
.dt-container ul.pagination .dt-paging-button.page-item:hover {
  background: #ebf7fa;
  color: #1e3074 !important;
  border-color: #c5c2c5 !important;
}
.dt-container ul.pagination .dt-paging-button.page-item.active a {
  background: #1e3074;
  color: white;
}
.dt-container .datatable-top-section {
  padding: 10px 0;
}
.dt-container > .row.justify-content-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dt-container > .row.justify-content-between .d-md-flex {
  display: flex;
  align-items: center;
}
.dt-container > .row.justify-content-between:last-child {
  background: #f5f5f5;
  min-height: 50px;
  border: 1px solid #c5c2c5;
  border-top-width: 0;
  border-radius: 0px 0px 4px 4px;
  padding: 5px 1%;
}

.dt-search {
  vertical-align: middle;
  position: relative;
  top: -5px;
}
.dt-search label {
  display: inline;
  font-size: 1em;
}
.dt-search input {
  width: 300px;
  height: 1.7em;
}

.dt-scroll {
  border-color: #c5c2c5;
  border-style: solid;
  border-width: 1px;
}

.dt-scroll-head {
  background-color: #1e3074;
}

.dt-info,
.dt-length {
  display: inline-block;
  padding-left: 3px;
}
.dt-info label,
.dt-length label {
  display: none;
}

.dt-menu {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 24em;
  width: max-content;
  right: 0;
  border-bottom: 0;
  border-radius: 5px 0 5px 5px;
}
.dt-menu .ui-menu-item {
  padding: 3px 5px;
}

.dt-menu-settings {
  position: static;
  padding: 0 10px 1px 10px;
  margin-left: 5px;
  bottom: 0;
  border-color: #c5c2c5;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
}
.dt-menu-settings svg {
  position: absolute;
  right: 9px;
  top: 6px;
}

.dt-button-show {
  color: #dcdcdc;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.reorder-row {
  position: relative;
}
.reorder-row:before {
  content: "menu";
  font-family: "Material Symbols Rounded";
  position: absolute;
  top: 0;
  left: 0;
  color: grey;
  font-size: 26px;
  padding: 10px;
  padding-left: 15px;
}

.reorder-row-hideindex {
  color: rgba(0, 0, 0, 0);
}

th[data-dt-order=disable] {
  cursor: inherit;
}
th[data-dt-order=disable] .dt-column-order {
  display: none;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* Links inside the dropdown */
.dropdown-content button {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown buttons on hover */
.dropdown-content button:hover {
  background-color: #ddd;
}

/* Show the dropdown menu */
.show {
  display: block;
}

.dt-control-rowexpand {
  cursor: pointer;
  color: #1152be;
}

.row-group-table .dtrg-group {
  cursor: pointer;
}
.row-group-table tr, .row-group-table tr th {
  transition: background-color 1s linear;
}
.row-group-table tr td:first-child, .row-group-table tr td:first-child {
  padding-left: 2em;
}
.row-group-table .warning-highlight {
  background-color: palegoldenrod !important;
}

.block-highlight {
  background-color: rgba(255, 0, 0, 0.2) !important;
}

.row-group-count,
.row-issue-count {
  display: inline-block;
}

.row-issue-count span {
  margin-left: 10px;
  cursor: pointer;
  padding: 2px 6px;
  border: 1px solid grey;
  border-radius: 3px;
}
.row-issue-count span.field-required {
  background-color: palegoldenrod;
}
.row-issue-count span.field-disabled {
  background-color: rgba(255, 0, 0, 0.2);
}

.fieldControlWrap {
  position: relative;
  display: inline-block;
  margin-left: 10px;
}
.fieldControlWrap:not(.buttonControlWrap) button {
  width: 24px;
  right: 2px;
  position: absolute;
  top: 4px;
  border-width: 0px;
  height: calc(100% - 8px);
  cursor: pointer;
  margin: 0;
  padding: 0;
  font-size: 80%;
}
.fieldControlWrap:not(.buttonControlWrap) input[type=textfield] {
  padding-right: 24px;
}
.fieldControlWrap:not(.buttonControlWrap):after {
  content: attr(data-text);
  position: absolute;
  left: 0px;
  top: 0px;
  background: #ffff89;
  top: -8px;
  left: -10px;
  height: 15px;
  font-size: 10px;
  border: 1px solid grey;
  border-radius: 3px;
  text-align: center;
  padding: 0px 3px;
}

.entitled-warning {
  display: inline-block;
  background-color: rgba(255, 0, 0, 0.2);
  padding: 3px;
  border: 1px solid grey;
  border-radius: 3px;
  margin-right: 5px;
}

/*
 * query-builder.scss
 *
 * This file implements both our styling overrides for the query-builder jQuery plugin, and 
 * the styling for our "expressions" which is our small custom language for assigning
 * complex scopes to policies (e.g. a policy could go to all engineers except Adam,
 * and everyone in HR).
 */
/*
* common.scss
*
* A collection of helper classes and mixins.
*/
/*
 * palette.scss
 *
 * Defines all the colors used throughout the app.
 */
/*
 * branding.scss
 *
 * Defines all the colors for PKWARE branding.
 */
/* Primary Colors */
/* Secondary Colors */
/* Neutrals & Shades */
/* Gradients */
/*
 * Formulator Box
 */
/*
 * Border colors
 */
/*
 * General colors (page color, link color, label color, etc...)
 */
/* 
 * Selectize 
 */
/*
 * To-do items
 */
/*
 * Buttons
 */
/*
 * Title sections (also known as a "header", named "title" to avoid confusion with the app's header menu).
 * (e.g. a .sectionBar is a title section -- see formulator.scss for more information on .sectionBar)
 */
/*
 * The page's header (the menu with the clickable menu items):
 */
/* Helper classes for applying colors quickly */
.palette-button, .ui-button, .ui-button:focus, .ui-menu .ui-menu-item, .dt-menu, .dt-menu-settings {
  background: #1152be;
  color: #ffffff;
}

.palette-button-hover, .ui-button:hover, .ui-menu .ui-menu-item:hover, .dt-menu-settings:hover {
  background: rgb(12.8115942029, 61.7971014493, 143.1884057971);
  color: #ffffff;
}

.palette-title, .dsi-mfe a, .flowItemTitle, .ui-widget-header, .ui-accordion-header, .ui-dialog-titlebar, .sectionBar, .sectionBar .lvp-label {
  background: #1e3074;
  color: #ffffff;
}

.primaryFont, body, .ui-widget {
  font-size: 0.9rem;
  font-family: "Montserrat", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.rounded, div.block-warning, .flowListItem, .flowExplanation, div.formulator, .formulatorSubForm, .formulatorSubForm1, div.formulatorForm, #detaildiv {
  border-radius: 5px;
}

.roundedTop, .sectionBar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.roundedBottom {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.wrapall, .lvp-value {
  overflow-wrap: break-word;
}

.hidden, .validation-summary-valid, .field-validation-valid {
  display: none;
}

.bold, .validation-summary-errors, .field-validation-error, .flowItemTitle, .emphasized, .caption, .formulatorTitle, .sectionBar {
  font-weight: bold;
}

.caption, .sectionBar {
  font-size: 1.2em;
}

.clickable, span.editable-clear-x, #btnToggleInfo, .ui-button, .ui-state-default, .ui-widget-header a:hover, .dt-menu-settings {
  cursor: pointer;
}

.instructions {
  color: #888;
}

.good, .ok, a.good, a.ok {
  color: #280;
}

.pending, .inprogress {
  color: #48e;
}

.error, .bad, a.error, a.bad {
  color: #e14;
}

.warning {
  color: #c82;
}

.info {
  color: #280;
}

.none {
  font-style: italic;
  color: #448;
}

.text-input, textarea, input, .selectize-control.single .selectize-input {
  border-color: #c5c2c5;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: #333;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px;
}

/*
* selectize.scss
*
* Overrided styles for the selectize jQuery plugin.
*
* Below are two diagrams of the two selectize varients (single-select and multi-select):
*
* Single-select:
*       .selectize-input .has-items (is inside of the .selectize-control)
*      / -- <div data-value="Adam"></div>
*   __v_v_____
*  |_Adam___▲_| <- .selectize-control .single (wraps the .selectize-input -- not the dropdown)
*  | Jon      <--- .selectize-dropdown-content (is inside of the .selectize-dropdown)
*  |_Joe______| <- .selectize-dropdown .single (wraps the .selectize-dropdown-content)
*
* Multi-select:
*       .selectize-input .has-items (is inside of the .selectize-control)
*      /     -- <div data-value="Jon"></div>
*   __v_____v________
*  |_Adam__Jon__Joe__| <- .selectize-control .multi (wraps the .selectize-input -- not the dropdown)
*  | Ted           <----- .selectize-dropdown-content (is inside of the .selectize-dropdown)
*  |_Jake____________| <- .selectize-dropdown .multi (wraps the .selectize-dropdown-content)
*
* We have added a special class of multi select called .uniqueFirst which changes the color
* of the first item in a multi-select.
*
* We have also extended multi-select selectizes to support showing details about each item
* using a container called .selectize-details. .selectize-details is a floating container of
* LVPs which is meant to show a sneak peek of a value who only has a name exposed in the multi-select.
*/
/*
* common.scss
*
* A collection of helper classes and mixins.
*/
/*
 * palette.scss
 *
 * Defines all the colors used throughout the app.
 */
/*
 * branding.scss
 *
 * Defines all the colors for PKWARE branding.
 */
/* Primary Colors */
/* Secondary Colors */
/* Neutrals & Shades */
/* Gradients */
/*
 * Formulator Box
 */
/*
 * Border colors
 */
/*
 * General colors (page color, link color, label color, etc...)
 */
/* 
 * Selectize 
 */
/*
 * To-do items
 */
/*
 * Buttons
 */
/*
 * Title sections (also known as a "header", named "title" to avoid confusion with the app's header menu).
 * (e.g. a .sectionBar is a title section -- see formulator.scss for more information on .sectionBar)
 */
/*
 * The page's header (the menu with the clickable menu items):
 */
/* Helper classes for applying colors quickly */
.palette-button, .ui-button, .ui-button:focus, .ui-menu .ui-menu-item, .dt-menu, .dt-menu-settings {
  background: #1152be;
  color: #ffffff;
}

.palette-button-hover, .ui-button:hover, .ui-menu .ui-menu-item:hover, .dt-menu-settings:hover {
  background: rgb(12.8115942029, 61.7971014493, 143.1884057971);
  color: #ffffff;
}

.palette-title, .dsi-mfe a, .flowItemTitle, .ui-widget-header, .ui-accordion-header, .ui-dialog-titlebar, .sectionBar, .sectionBar .lvp-label {
  background: #1e3074;
  color: #ffffff;
}

.primaryFont, body, .ui-widget {
  font-size: 0.9rem;
  font-family: "Montserrat", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.rounded, div.block-warning, .flowListItem, .flowExplanation, div.formulator, .formulatorSubForm, .formulatorSubForm1, div.formulatorForm, #detaildiv {
  border-radius: 5px;
}

.roundedTop, .sectionBar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.roundedBottom {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.wrapall, .lvp-value {
  overflow-wrap: break-word;
}

.hidden, .validation-summary-valid, .field-validation-valid {
  display: none;
}

.bold, .validation-summary-errors, .field-validation-error, .flowItemTitle, .emphasized, .caption, .formulatorTitle, .sectionBar {
  font-weight: bold;
}

.caption, .sectionBar {
  font-size: 1.2em;
}

.clickable, span.editable-clear-x, #btnToggleInfo, .ui-button, .ui-state-default, .ui-widget-header a:hover, .dt-menu-settings {
  cursor: pointer;
}

.instructions {
  color: #888;
}

.good, .ok, a.good, a.ok {
  color: #280;
}

.pending, .inprogress {
  color: #48e;
}

.error, .bad, a.error, a.bad {
  color: #e14;
}

.warning {
  color: #c82;
}

.info {
  color: #280;
}

.none {
  font-style: italic;
  color: #448;
}

.text-input, textarea, input, .selectize-control.single .selectize-input {
  border-color: #c5c2c5;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: #333;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px;
}

.selectize-control.single {
  display: inline-block;
  vertical-align: middle;
}
.selectize-control.single .selectize-input {
  padding: 2px;
  padding-left: 5px;
  padding-top: 1px;
  color: #222;
  background: white;
  word-break: break-word;
}

.selectize-control.multi .selectize-input {
  padding: 0px;
  padding-top: 3px;
  padding-left: 3px;
}
.selectize-item-mixin, .display-expression .bool-exp-value, .selectize-control.multi .selectize-input [data-value], .selectize-control.multi .selectize-input div.active {
  padding: 1px 4px;
  margin: 0px;
  margin-right: 3px;
  margin-bottom: 3px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 18px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.03);
  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
  border: 1px solid #0073bb;
  color: #fff;
  background: rgb(32.5, 100.5, 135);
  background-image: -webkit-linear-gradient(top, rgb(32.5, 100.5, 135), #0e96db);
  background-image: -moz-linear-gradient(top, rgb(32.5, 100.5, 135), #0e96db);
  background-image: -ms-linear-gradient(top, rgb(32.5, 100.5, 135), #0e96db);
  background-image: linear-gradient(top, rgb(32.5, 100.5, 135), #0e96db);
}
.selectize-item-mixin.active, .display-expression .active.bool-exp-value, .selectize-control.multi .selectize-input .active[data-value], .selectize-control.multi .selectize-input div.active {
  box-shadow: 0px 0px 5px 3px rgba(0, 115, 187, 0.7);
}

.selectize-input {
  overflow: visible;
}

.selectize-control.uniqueFirst .selectize-input div:not(:first-child) {
  color: #fff;
  border-color: rgb(87.5728755365, 132.7210601905, 155.6271244635);
  background: rgb(80.6896995708, 101.6672689208, 112.3103004292);
  background-image: -webkit-linear-gradient(top, rgb(80.6896995708, 101.6672689208, 112.3103004292), rgb(110.3793991416, 152.3345378415, 173.6206008584));
  background-image: -moz-linear-gradient(top, rgb(80.6896995708, 101.6672689208, 112.3103004292), rgb(110.3793991416, 152.3345378415, 173.6206008584));
  background-image: -ms-linear-gradient(top, rgb(80.6896995708, 101.6672689208, 112.3103004292), rgb(110.3793991416, 152.3345378415, 173.6206008584));
  background-image: linear-gradient(top, rgb(80.6896995708, 101.6672689208, 112.3103004292), rgb(110.3793991416, 152.3345378415, 173.6206008584));
}

div.selectize-control.loading:after,
div.selectize-control.loading-remote:after {
  content: " ";
  width: 16px;
  height: 16px;
  position: absolute;
  right: 4px;
  top: 6px;
  z-index: 100;
  background: url("../images/loading.gif");
  background-repeat: no-repeat;
  display: inline-block;
  float: right;
  vertical-align: middle;
  padding-right: 5px;
}

div.selectize-control.loading-remote {
  display: inline-block;
  pointer-events: none;
}
div.selectize-control.loading-remote .selectize-input > * {
  display: none;
}

.input-validation-error + .selectize-control > .selectize-input {
  border: 2px solid #e14;
}

.selectize-details {
  position: absolute;
  background: #ffffff;
  color: #222;
  margin-left: -5px;
  margin-top: 3px;
  padding: 10px;
  border: 1px solid #dcdcdc;
  border-radius: 0 0 5px 5px;
  z-index: 1000;
}
.selectize-details .lvp-label {
  min-width: 0;
  font-weight: bold;
  white-space: nowrap;
}

.selectize-control.simple-selectize .selectize-dropdown-content > .option:empty {
  display: none;
}

.selectize-control.plugin-remove_button [data-value] .remove {
  font-size: 14px;
  top: -1px;
}

/* Style for implementing "expressions" */
.display-expression {
  line-height: 1.7em;
  background-color: white;
  cursor: pointer;
  padding: 1px 2px;
  min-height: 19px;
  min-width: 400px;
  border: 1px solid #c5c2c5;
  border-radius: 4px;
}
.display-expression .bool-exp-op {
  font-weight: bold;
  color: blue;
}
.display-expression .bool-exp-not {
  font-weight: bold;
  padding: 0 3px 0 5px;
  color: darkred;
}
.display-expression .bool-exp-paren {
  font-weight: bold;
  padding: 0 5px 0 5px;
}
.display-expression .bool-exp-value {
  white-space: pre; /* Keep characters on same line */
  overflow-wrap: break-word;
}
.display-expression[data-is-enabled=false] {
  background: none;
  pointer-events: none;
}
.display-expression.readonly {
  pointer-events: none;
  cursor: default;
  background: none;
  border: 0;
}

/* Below are styles that are only active in IE11+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE11 needed this to make the display-expression to use multiple lines */
  .display-expression {
    display: inline-block;
    max-width: 800px;
  }
}
/* Overrides for the query-builder jQuery plugin */
.advanced-selector .query-builder > :first-child {
  border-radius: 0 0 5px 5px;
  position: absolute;
  margin-top: -2px;
  z-index: 2;
  min-width: 700px;
}

.basic-advanced-selector .advanced-selector {
  width: 100%;
}
.basic-advanced-selector .material-symbols-rounded {
  cursor: pointer;
  border: 1px solid #c5c2c5;
  border-radius: 3px;
  font-size: 20px;
  padding: 1px 2px;
}

/* 
Styling for jquery query builder https://querybuilder.js.org/
We need custom styles because we do not use bootstrap
*/
/* Custom coloring & general styles */
.query-builder .rules-group-container {
  border: 1px solid #cdcdcd;
  background: #f5f5f5;
  margin-top: 0;
}

.query-builder .selectize-control {
  min-width: 300px;
}
.query-builder .selectize-control.simple-selectize {
  display: flex;
}

.query-builder, .query-builder * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.query-builder {
  font-family: sans-serif;
}

.query-builder .hide {
  display: none;
}

.query-builder .pull-right {
  float: right !important;
}

.query-builder .btn {
  text-transform: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
}

.query-builder .btn.focus, .query-builder .btn:focus, .query-builder .btn:hover {
  color: #333;
  text-decoration: none;
}

.query-builder .btn.active, .query-builder .btn:active {
  background-image: none;
  outline: 0px none;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.125) inset;
}

.query-builder .btn-primary, .query-builder .btn-default {
  color: #FFF;
  background-color: #337AB7;
  border-color: #2E6DA4;
}

.query-builder .btn-danger {
  color: #FFF;
  background-color: #D9534F;
  border-color: #D43F3A;
}

.query-builder .btn-primary.active, .query-builder .btn-primary.focus,
.query-builder .btn-primary:active, .query-builder .btn-primary:focus,
.query-builder .btn-primary:hover,
.query-builder .btn-default.active, .query-builder .btn-default.focus,
.query-builder .btn-default:active, .query-builder .btn-default:focus,
.query-builder .btn-default:hover {
  color: #FFF;
  background-color: #286090;
  border-color: #204D74;
}

.query-builder .btn-danger.active, .query-builder .btn-danger.focus,
.query-builder .btn-danger:active, .query-builder .btn-danger:focus,
.query-builder .btn-danger:hover {
  color: #FFF;
  background-color: #C9302C;
  border-color: #AC2925;
}

.query-builder .btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.query-builder .btn-group > .btn {
  position: relative;
  float: left;
}

.query-builder .btn-group > .btn:first-child {
  margin-left: 0px;
}

.query-builder .btn-group > .btn:first-child:not(:last-child) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.query-builder .btn-group > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.query-builder .btn-group .btn + .btn, .query-builder .btn-group .btn + .btn-group,
.query-builder .btn-group .btn-group + .btn, .query-builder .btn-group .btn-group + .btn-group {
  margin-left: -1px;
}

.query-builder .btn-xs, .query-builder .btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

/*
* // TODO - OUTDATED DOCUMENTATION COMMENT
* header.scss
*
* The page's header. It has the following form:
*
* ________________________________________________________________
* |        |  .menubar (main menu)  | #info      |               |
* | .logo  |  .menubar (sub menu)   | #appStatus | .header-right | <- .header
* |________|________________________|____________|_______________|
*
* The logo part contains a product image, and is a link to some landing page.
* The logo's HTML looks like:
*   <div class="logo-link"><img src="..."></div>
*
* The next section is the menubars. The menu system has main menu items, and sub menus that vary
* depending on which item is selected. This is implemented using two divs using the .menubar class.
*
* The next section contains two elements (#info and #appStatus) which are dynamically updated via JavaScript to give
* real-time updates to the user about the status of the app (e.g. shows when AJAX requests complete).
*
* The final section (.header-right) contains information about the current logged in user, a link to product help, and a logout button.
* The .header-right section will also contain a warning if the current server's database is readonly (when running a secondary cluster member).
*/
/*
* common.scss
*
* A collection of helper classes and mixins.
*/
/*
 * palette.scss
 *
 * Defines all the colors used throughout the app.
 */
/*
 * branding.scss
 *
 * Defines all the colors for PKWARE branding.
 */
/* Primary Colors */
/* Secondary Colors */
/* Neutrals & Shades */
/* Gradients */
/*
 * Formulator Box
 */
/*
 * Border colors
 */
/*
 * General colors (page color, link color, label color, etc...)
 */
/* 
 * Selectize 
 */
/*
 * To-do items
 */
/*
 * Buttons
 */
/*
 * Title sections (also known as a "header", named "title" to avoid confusion with the app's header menu).
 * (e.g. a .sectionBar is a title section -- see formulator.scss for more information on .sectionBar)
 */
/*
 * The page's header (the menu with the clickable menu items):
 */
/* Helper classes for applying colors quickly */
.palette-button, .ui-button, .ui-button:focus, .ui-menu .ui-menu-item, .dt-menu, .dt-menu-settings {
  background: #1152be;
  color: #ffffff;
}

.palette-button-hover, .ui-button:hover, .ui-menu .ui-menu-item:hover, .dt-menu-settings:hover {
  background: rgb(12.8115942029, 61.7971014493, 143.1884057971);
  color: #ffffff;
}

.palette-title, .dsi-mfe a, .flowItemTitle, .ui-widget-header, .ui-accordion-header, .ui-dialog-titlebar, .sectionBar, .sectionBar .lvp-label {
  background: #1e3074;
  color: #ffffff;
}

.primaryFont, body, .ui-widget {
  font-size: 0.9rem;
  font-family: "Montserrat", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.rounded, div.block-warning, .flowListItem, .flowExplanation, div.formulator, .formulatorSubForm, .formulatorSubForm1, div.formulatorForm, #detaildiv {
  border-radius: 5px;
}

.roundedTop, .sectionBar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.roundedBottom {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.wrapall, .lvp-value {
  overflow-wrap: break-word;
}

.hidden, .validation-summary-valid, .field-validation-valid {
  display: none;
}

.bold, .validation-summary-errors, .field-validation-error, .flowItemTitle, .emphasized, .caption, .formulatorTitle, .sectionBar {
  font-weight: bold;
}

.caption, .sectionBar {
  font-size: 1.2em;
}

.clickable, span.editable-clear-x, #btnToggleInfo, .ui-button, .ui-state-default, .ui-widget-header a:hover, .dt-menu-settings {
  cursor: pointer;
}

.instructions {
  color: #888;
}

.good, .ok, a.good, a.ok {
  color: #280;
}

.pending, .inprogress {
  color: #48e;
}

.error, .bad, a.error, a.bad {
  color: #e14;
}

.warning {
  color: #c82;
}

.info {
  color: #280;
}

.none {
  font-style: italic;
  color: #448;
}

.text-input, textarea, input, .selectize-control.single .selectize-input {
  border-color: #c5c2c5;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: #333;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px;
}

.toggle-switch input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  display: none;
  margin: 0;
  padding: 0;
}
.toggle-switch label {
  cursor: pointer;
  font-size: 0;
  width: 40px;
  height: 16px;
  background: #888;
  display: block;
  border-radius: 16px;
  position: relative;
  transition: ease 0.3s;
  transition-property: background;
}
.toggle-switch label:after {
  content: "";
  position: absolute;
  top: 3.2px;
  left: 3.2px;
  width: 9px;
  height: 9px;
  background: #fff;
  border-radius: 9px;
  transition: ease 0.3s;
  transition-property: left, transform;
}
.toggle-switch label:active:after {
  width: 9px;
}
.toggle-switch input:checked + label {
  background: #1152be;
}
.toggle-switch input:checked + label:after {
  left: calc(100% - 3.2px);
  transform: translateX(-100%);
}

div.header {
  background: #1e3074;
  background-image: -webkit-linear-gradient(top, #1e3074 0%, #1e3074 10%, #1152be 40%, #0F73CE 100%);
  background-image: -moz-linear-gradient(top, #1e3074 0%, #1e3074 10%, #1152be 40%, #0F73CE 100%);
  background-image: -ms-linear-gradient(top, #1e3074 0%, #1e3074 10%, #1152be 40%, #0F73CE 100%);
  background-image: linear-gradient(top, #1e3074 0%, #1e3074 10%, #1152be 40%, #0F73CE 100%);
  color: white;
}
div.header a {
  text-decoration: none;
  display: inline-block;
  color: white;
}
div.header .database-readonly {
  margin: 5px 0 5px 5px;
  padding: 5px;
  border: 1px solid white;
  border-radius: 5px;
}

.menubar, .ui-tooltip.nav-menu ul {
  list-style-type: none;
  margin: 0 0 8px 0;
  padding: 0;
}
.menubar li, .ui-tooltip.nav-menu ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.menubar a, .ui-tooltip.nav-menu ul a {
  padding: 6px;
  width: calc(100% - 12px);
  margin: 0;
  text-decoration: none;
}

.menubar a.current, .ui-tooltip.nav-menu ul a.current,
.header-right a.current {
  background-color: #0fe4a2;
  color: black;
  border-radius: 4px;
}

/*.header a:hover:not(.logo-link) {
    background-color: $palette-header-hover-bg;
    color: $palette-header-hover-color;
}*/
#status-container {
  position: absolute;
  top: 18px;
  right: 75px;
  z-index: 50;
}

#mode-banner {
  position: absolute;
  color: #0fe4a2;
  background: #1e3074;
  padding: 5px 10px;
  display: inline-block;
  margin: 5px 0 0 0;
  text-align: center;
  text-transform: lowercase;
  right: 0px;
  top: 0px;
  z-index: 50;
}

body {
  display: flex;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
}

.nav-listitem, .ui-tooltip.nav-menu ul, .header .menu-list > .menubar > li, .header .ui-tooltip.nav-menu .menu-list > ul > li, .ui-tooltip.nav-menu .header .menu-list > ul > li, .header .menu-extras > .menubar > li, .header .ui-tooltip.nav-menu .menu-extras > ul > li, .ui-tooltip.nav-menu .header .menu-extras > ul > li, .header .menu-user > .menubar > li, .header .ui-tooltip.nav-menu .menu-user > ul > li, .ui-tooltip.nav-menu .header .menu-user > ul > li {
  cursor: pointer;
  margin: 0.3em 0;
}
.nav-listitem > div, .ui-tooltip.nav-menu ul > div, .header .menu-list > .menubar > li > div, .header .ui-tooltip.nav-menu .menu-list > ul > li > div, .ui-tooltip.nav-menu .header .menu-list > ul > li > div, .header .menu-extras > .menubar > li > div, .header .ui-tooltip.nav-menu .menu-extras > ul > li > div, .ui-tooltip.nav-menu .header .menu-extras > ul > li > div, .header .menu-user > .menubar > li > div, .header .ui-tooltip.nav-menu .menu-user > ul > li > div, .ui-tooltip.nav-menu .header .menu-user > ul > li > div {
  display: flex;
  align-items: center;
  position: relative;
  padding: 5px;
  transition: 0.5s background-color;
}
.nav-listitem > div .material-symbols-rounded:first-child, .ui-tooltip.nav-menu ul > div .material-symbols-rounded:first-child, .header .menu-list > .menubar > li > div .material-symbols-rounded:first-child, .header .ui-tooltip.nav-menu .menu-list > ul > li > div .material-symbols-rounded:first-child, .ui-tooltip.nav-menu .header .menu-list > ul > li > div .material-symbols-rounded:first-child, .header .menu-extras > .menubar > li > div .material-symbols-rounded:first-child, .header .ui-tooltip.nav-menu .menu-extras > ul > li > div .material-symbols-rounded:first-child, .ui-tooltip.nav-menu .header .menu-extras > ul > li > div .material-symbols-rounded:first-child, .header .menu-user > .menubar > li > div .material-symbols-rounded:first-child, .header .ui-tooltip.nav-menu .menu-user > ul > li > div .material-symbols-rounded:first-child, .ui-tooltip.nav-menu .header .menu-user > ul > li > div .material-symbols-rounded:first-child {
  width: auto;
  display: inline-block;
  flex: none;
  margin-right: 5px;
  max-width: 25px;
}
.nav-listitem li:hover, .ui-tooltip.nav-menu ul li:hover, .header .menu-list > .menubar > li li:hover, .header .menu-extras > .menubar > li li:hover, .header .menu-user > .menubar > li li:hover {
  background-color: #1e3074;
  border-radius: 4px;
}
.nav-listitem:hover > div, .ui-tooltip.nav-menu ul:hover > div, .header .menu-list > .menubar > li:hover > div, .header .ui-tooltip.nav-menu .menu-list > ul > li:hover > div, .ui-tooltip.nav-menu .header .menu-list > ul > li:hover > div, .header .menu-extras > .menubar > li:hover > div, .header .ui-tooltip.nav-menu .menu-extras > ul > li:hover > div, .ui-tooltip.nav-menu .header .menu-extras > ul > li:hover > div, .header .menu-user > .menubar > li:hover > div, .header .ui-tooltip.nav-menu .menu-user > ul > li:hover > div, .ui-tooltip.nav-menu .header .menu-user > ul > li:hover > div {
  background-color: #1e3074;
  border-radius: 4px;
}
.nav-listitem .material-symbols-rounded, .ui-tooltip.nav-menu ul .material-symbols-rounded, .header .menu-list > .menubar > li .material-symbols-rounded, .header .menu-extras > .menubar > li .material-symbols-rounded, .header .menu-user > .menubar > li .material-symbols-rounded {
  vertical-align: middle;
}
.nav-listitem .nav-title, .ui-tooltip.nav-menu ul .nav-title, .header .menu-list > .menubar > li .nav-title, .header .menu-extras > .menubar > li .nav-title, .header .menu-user > .menubar > li .nav-title {
  flex: 1;
}

.nav-list-header, .ui-tooltip.nav-menu li > div, .header .menu-username, .header .menu-user, .header .menu-settings, .header .menu-help {
  cursor: pointer;
  position: relative;
  bottom: 0px;
  left: 0px;
  height: 40px;
  background: #1e3074;
  padding: 5px;
  padding-top: 12px;
}
.nav-list-header .material-symbols-rounded, .ui-tooltip.nav-menu li > div .material-symbols-rounded, .header .menu-username .material-symbols-rounded, .header .menu-user .material-symbols-rounded, .header .menu-settings .material-symbols-rounded, .header .menu-help .material-symbols-rounded {
  vertical-align: middle;
}
.nav-list-header .material-symbols-rounded:first-child, .ui-tooltip.nav-menu li > div .material-symbols-rounded:first-child, .header .menu-username .material-symbols-rounded:first-child, .header .menu-user .material-symbols-rounded:first-child, .header .menu-settings .material-symbols-rounded:first-child, .header .menu-help .material-symbols-rounded:first-child {
  margin-right: 5px;
}
.nav-list-header a, .ui-tooltip.nav-menu li > div a, .header .menu-username a, .header .menu-user a, .header .menu-settings a, .header .menu-help a {
  width: auto;
}

.header {
  display: flex;
  flex-direction: column;
  width: 250px;
  min-width: 65px;
  max-width: 250px;
  position: relative;
  height: 100vh;
  overflow: visible;
  transition: 1s width;
}
.header.collapsed {
  width: 65px;
}
.header.collapsed .menu-collapse {
  left: 57px;
  transform: rotate(180deg);
}
.header.collapsed .menu-logo img.logo {
  width: 160px;
  margin: 4px;
  clip-path: xywh(0px 0px 35px 100%);
}
.header .menu-logo {
  position: relative;
  padding: 12px 1rem 0.45rem 12px;
  background: #1e3074;
}
.header .menu-logo img.logo {
  width: 212px;
  height: auto;
  margin: 0.5em;
  transition-property: width, margin, clip-path;
  transition-duration: 1s;
  clip-path: xywh(0px 0px 100% 100%);
  transform: translateZ(0);
}
.header .menu-logo:after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0px;
  height: 15px;
  width: 100%;
  background: linear-gradient(180deg, #1e3074, rgba(30, 48, 116, 0) 100%);
  z-index: 2;
  pointer-events: none;
}
.header .menu-list, .header .menu-extras, .header .menu-user {
  background: transparent;
  height: 100%;
  overflow-y: scroll;
  padding-top: 15px;
  padding-left: 12px;
  padding-right: 12px;
}
.header .menu-list > .menubar > li.current > div, .header .ui-tooltip.nav-menu .menu-list > ul > li.current > div, .ui-tooltip.nav-menu .header .menu-list > ul > li.current > div, .header .menu-extras > .menubar > li.current > div, .header .ui-tooltip.nav-menu .menu-extras > ul > li.current > div, .ui-tooltip.nav-menu .header .menu-extras > ul > li.current > div, .header .menu-user > .menubar > li.current > div, .header .ui-tooltip.nav-menu .menu-user > ul > li.current > div, .ui-tooltip.nav-menu .header .menu-user > ul > li.current > div {
  background-color: #09bcef;
  color: #1e3074;
  border-radius: 4px;
}
.header .menu-list > .menubar ul, .header .ui-tooltip.nav-menu .menu-list > ul ul, .ui-tooltip.nav-menu .header .menu-list > ul ul, .header .menu-extras > .menubar ul, .header .ui-tooltip.nav-menu .menu-extras > ul ul, .ui-tooltip.nav-menu .header .menu-extras > ul ul, .header .menu-user > .menubar ul, .header .ui-tooltip.nav-menu .menu-user > ul ul, .ui-tooltip.nav-menu .header .menu-user > ul ul {
  border-left: 2px solid #09bcef;
  margin-left: 15px;
  margin-top: 5px;
}
.header .menu-list > .menubar ul li, .header .ui-tooltip.nav-menu .menu-list > ul ul li, .ui-tooltip.nav-menu .header .menu-list > ul ul li, .header .menu-extras > .menubar ul li, .header .ui-tooltip.nav-menu .menu-extras > ul ul li, .ui-tooltip.nav-menu .header .menu-extras > ul ul li, .header .menu-user > .menubar ul li, .header .ui-tooltip.nav-menu .menu-user > ul ul li, .ui-tooltip.nav-menu .header .menu-user > ul ul li {
  margin-left: 5px;
  margin-bottom: 3px;
}
.header .menu-list > .menubar ul li:hover, .header .ui-tooltip.nav-menu .menu-list > ul ul li:hover, .ui-tooltip.nav-menu .header .menu-list > ul ul li:hover, .header .menu-extras > .menubar ul li:hover, .header .ui-tooltip.nav-menu .menu-extras > ul ul li:hover, .ui-tooltip.nav-menu .header .menu-extras > ul ul li:hover, .header .menu-user > .menubar ul li:hover, .header .ui-tooltip.nav-menu .menu-user > ul ul li:hover, .ui-tooltip.nav-menu .header .menu-user > ul ul li:hover {
  background-color: #1e3074;
  border-radius: 4px;
}
.header .menu-list {
  padding-right: 2px;
}
.header .menu-list::-webkit-scrollbar, .header .menu-list::-webkit-scrollbar-corner {
  background: transparent;
}
.header .menu-list > .menubar, .header .ui-tooltip.nav-menu .menu-list > ul, .ui-tooltip.nav-menu .header .menu-list > ul {
  margin-bottom: 25px;
}
.header .menu-extras {
  position: relative;
  overflow: visible;
  height: auto;
  margin: 0px;
  background: #0F73CE;
  padding-top: 5px;
}
.header .menu-extras > * {
  display: block;
  height: 40px;
}
.header .menu-extras:after {
  content: "";
  position: absolute;
  top: -15px;
  left: 0px;
  height: 15px;
  width: 100%;
  background: linear-gradient(360deg, #0f73ce 0%, rgba(15, 115, 206, 0) 100%);
  pointer-events: none;
}
.header .menu-extras .menu-settings, .header .menu-extras .menu-help {
  background: transparent;
  padding-top: 7px;
}
.header .menu-user {
  display: none;
}
.header .menu-username {
  padding-left: 17px;
  padding-right: 17px;
  padding-top: 18px;
  padding-bottom: 10px;
  border-top: 1px solid #5f9dd5;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.header .menu-username > *:not(.material-symbols-rounded) {
  flex: 1;
}
.header .menu-collapse {
  cursor: pointer;
  position: absolute;
  z-index: 99999;
  top: 4px;
  right: -12px;
  left: auto !important;
  background: white;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #1152be;
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  transition: all 200ms ease-in-out;
}

#content, .header-right {
  flex: 1;
}

.main:not(#content) {
  display: none;
}

.menubar li, .ui-tooltip.nav-menu ul li {
  display: block;
}

.main-wrap {
  flex: 1;
  height: 100vh;
  overflow: scroll;
  display: flex;
  flex-direction: column;
}

.breadcrumbs-wrap {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  padding: 0.5rem 2rem;
  line-height: 1.1;
  color: #1152be;
  background: #ffffff;
  transition: 1s height;
  z-index: 50;
}
.breadcrumbs-wrap * {
  font-size: 0.85rem;
  line-height: 50px;
  transition: 1s line-height;
  vertical-align: middle;
}
.breadcrumbs-wrap *:first-child {
  font-size: 1.25rem;
  padding-right: 15px;
  padding-bottom: 1px;
}
.breadcrumbs-wrap *:last-child {
  font-weight: bold;
}
.breadcrumbs-wrap *:nth-child(-n+2) {
  cursor: pointer;
}
.breadcrumbs-wrap + * {
  margin-top: 65px;
}
.breadcrumbs-wrap.smaller {
  height: 20px;
}
.breadcrumbs-wrap.smaller * {
  line-height: 20px;
}
.breadcrumbs-wrap .breadcrumbs-divider {
  padding-left: 8px;
  padding-right: 8px;
}
.breadcrumbs-wrap .breadcrumbs-divider-small {
  padding-left: 3px;
  padding-right: 3px;
}
.breadcrumbs-wrap .page-title {
  font-size: 18px;
  color: #1e3074;
}

.header li > div *:not(.material-symbols-rounded), .header .menu-settings *:not(.material-symbols-rounded), .header .menu-username *:not(.material-symbols-rounded), .header .menu-help *:not(.material-symbols-rounded) {
  transition-property: opacity, transform;
  transition-duration: 0.5s;
  opacity: 1;
}
.header.collapsed li .menubar, .header.collapsed li .ui-tooltip.nav-menu ul, .ui-tooltip.nav-menu .header.collapsed li ul {
  display: none;
}
.header.collapsed li > div *:not(.material-symbols-rounded), .header.collapsed .menu-settings *:not(.material-symbols-rounded), .header.collapsed .menu-username *:not(.material-symbols-rounded), .header.collapsed .menu-help *:not(.material-symbols-rounded) {
  opacity: 0;
}

.ui-tooltip.nav-menu {
  width: 250px;
  background: linear-gradient(to bottom, #1e3074 0%, #1152be 100%);
  box-shadow: none;
  padding: 0px;
  border-width: 0px;
  color: white;
}
.ui-tooltip.nav-menu:after {
  content: "";
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid #1152be;
  position: absolute;
  bottom: -14px;
  left: 15px;
  z-index: -5;
}
.ui-tooltip.nav-menu ul {
  padding: 5px;
}
.ui-tooltip.nav-menu li > div {
  background: transparent;
  padding-top: 6px;
  height: 30px;
  display: flex;
  align-items: center;
}
.ui-tooltip.nav-menu li a {
  color: white;
}

.style-override-header {
  color: white;
  font-size: 200%;
  display: table-cell;
  text-align: center;
  z-index: 10;
}

/*
 * branding.scss
 *
 * Defines all the colors for PKWARE branding.
 */
/* Primary Colors */
/* Secondary Colors */
/* Neutrals & Shades */
/* Gradients */
.login-page .main-wrap {
  background: linear-gradient(0deg, #0f74ce 0%, #1063c6 30%, #1646a3 68%, #1e3075 100%);
}
.login-page .main-wrap .main {
  width: 30vw;
  margin-left: 35vw;
  padding-top: 20vh;
}
.login-page .main-wrap .main > div {
  text-align: center;
}
.login-page .main-wrap .footer {
  color: white;
}
.login-page .main-wrap .footer a {
  color: #09bcef;
}
.login-page .main-wrap img.logo {
  width: 250px;
  height: auto;
  margin: 1em;
  padding-right: 15px;
}
.login-page .formulator {
  padding: 7%;
}
.login-page .formulator > table .lvp-label, .login-page .formulator > table .lvp-value {
  display: block;
  text-align: left;
  padding-left: 0;
}
.login-page .formulator > table .lvp-label {
  font-weight: bold;
}
.login-page .sectionBar {
  background: transparent;
  color: #1152be;
  font-weight: 550;
  padding: 0;
  margin-bottom: 10px;
  margin-left: 0;
  font-size: 20px;
}
.login-page input:not(.ui-button) {
  height: 35px;
  font-size: 14px;
  font-weight: 550;
  padding-left: 8px;
  width: 100%;
}

div.formulator, .sectionBar {
  border-radius: 0;
  border-width: 0;
}

/*
* common.scss
*
* A collection of helper classes and mixins.
*/
/*
 * palette.scss
 *
 * Defines all the colors used throughout the app.
 */
/*
 * branding.scss
 *
 * Defines all the colors for PKWARE branding.
 */
/* Primary Colors */
/* Secondary Colors */
/* Neutrals & Shades */
/* Gradients */
/*
 * Formulator Box
 */
/*
 * Border colors
 */
/*
 * General colors (page color, link color, label color, etc...)
 */
/* 
 * Selectize 
 */
/*
 * To-do items
 */
/*
 * Buttons
 */
/*
 * Title sections (also known as a "header", named "title" to avoid confusion with the app's header menu).
 * (e.g. a .sectionBar is a title section -- see formulator.scss for more information on .sectionBar)
 */
/*
 * The page's header (the menu with the clickable menu items):
 */
/* Helper classes for applying colors quickly */
.palette-button, .ui-button, .ui-button:focus, .ui-menu .ui-menu-item, .dt-menu, .dt-menu-settings {
  background: #1152be;
  color: #ffffff;
}

.palette-button-hover, .ui-button:hover, .ui-menu .ui-menu-item:hover, .dt-menu-settings:hover {
  background: rgb(12.8115942029, 61.7971014493, 143.1884057971);
  color: #ffffff;
}

.palette-title, .dsi-mfe a, .flowItemTitle, .ui-widget-header, .ui-accordion-header, .ui-dialog-titlebar, .sectionBar, .sectionBar .lvp-label {
  background: #1e3074;
  color: #ffffff;
}

.primaryFont, body, .ui-widget {
  font-size: 0.9rem;
  font-family: "Montserrat", "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

.rounded, div.block-warning, .flowListItem, .flowExplanation, div.formulator, .formulatorSubForm, .formulatorSubForm1, div.formulatorForm, #detaildiv {
  border-radius: 5px;
}

.roundedTop, .sectionBar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.roundedBottom {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.wrapall, .lvp-value {
  overflow-wrap: break-word;
}

.hidden, .validation-summary-valid, .field-validation-valid {
  display: none;
}

.bold, .validation-summary-errors, .field-validation-error, .flowItemTitle, .emphasized, .caption, .formulatorTitle, .sectionBar {
  font-weight: bold;
}

.caption, .sectionBar {
  font-size: 1.2em;
}

.clickable, span.editable-clear-x, #btnToggleInfo, .ui-button, .ui-state-default, .ui-widget-header a:hover, .dt-menu-settings {
  cursor: pointer;
}

.instructions {
  color: #888;
}

.good, .ok, a.good, a.ok {
  color: #280;
}

.pending, .inprogress {
  color: #48e;
}

.error, .bad, a.error, a.bad {
  color: #e14;
}

.warning {
  color: #c82;
}

.info {
  color: #280;
}

.none {
  font-style: italic;
  color: #448;
}

.text-input, textarea, input, .selectize-control.single .selectize-input {
  border-color: #c5c2c5;
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
  color: #333;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px;
}

.tab-container {
  background-color: rgb(30, 48, 116);
  border-radius: 8px 8px 0 0;
  height: 50px;
  color: white;
  padding-left: 5px;
  overflow: hidden;
}
.tab-container .new-tab {
  margin: 10px 5px;
  background: #dfe5f0;
  color: rgb(30, 48, 116);
  display: inline-block;
  height: 50px;
  padding: 10px;
  font-size: 16px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
}
.tab-container .new-tab.active {
  background: white;
}

.tabbed-content {
  position: relative;
  top: 0;
  left: 0;
  margin-top: 10px;
  width: 100%;
}

.single-header {
  background: transparent;
  color: #1e3074;
  border-bottom: 5px solid #1e3074;
  font-size: 20px;
  margin-bottom: 15px;
  padding-left: 0px;
}

.toggle-switch input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  display: none;
  margin: 0;
  padding: 0;
}
.toggle-switch label {
  cursor: pointer;
  font-size: 0;
  width: 40px;
  height: 16px;
  background: #888;
  display: block;
  border-radius: 16px;
  position: relative;
  transition: ease 0.3s;
  transition-property: background;
}
.toggle-switch label:after {
  content: "";
  position: absolute;
  top: 3.2px;
  left: 3.2px;
  width: 9px;
  height: 9px;
  background: #fff;
  border-radius: 9px;
  transition: ease 0.3s;
  transition-property: left, transform;
}
.toggle-switch label:active:after {
  width: 9px;
}
.toggle-switch input:checked + label {
  background: #1152be;
}
.toggle-switch input:checked + label:after {
  left: calc(100% - 3.2px);
  transform: translateX(-100%);
}

/* Progress Bar */
progress {
  position: relative;
}

progress:after {
  content: attr(data-text);
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
  color: white;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.75);
  top: 5px;
}

progress[value] {
  display: block;
  width: 100%;
  height: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 5px;
  box-shadow: inset 4px 4px 4px rgba(84, 30, 8, 0.2);
  background-color: #c5c2c5;
  border: 1px solid #ccc;
  animation: progress-animation 4s infinite linear;
}

progress[value]::-webkit-progress-inner-element {
  border-radius: 5px;
  overflow: hidden;
  background-position: inherit;
}

progress[value]::-webkit-progress-bar {
  border-radius: 5px;
  background-color: transparent;
  background-position: inherit;
}

progress[value]::-webkit-progress-value {
  border-radius: 5px 0 0 5px/5px 0 0 5px;
  box-shadow: inset 2px 2px 2px rgba(90, 90, 92, 0.2);
  background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 12px), linear-gradient(#280, rgb(46.75, 187, 0), #280);
  background-size: 16.973125884px 100%, 100% 800%;
  background-position: inherit;
}

progress[value]::-moz-progress-bar {
  border-radius: 5px 0 0 5px/5px 0 0 5px;
  box-shadow: inset 2px 2px 2px rgba(90, 90, 92, 0.2);
  background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 12px), linear-gradient(#280, rgb(46.75, 187, 0), #280);
  background-size: 16.973125884px 100%, 100% 800%;
  background-position: inherit;
}

progress.starting {
  background: #c82;
}

progress.completed[value]::-webkit-progress-value {
  background: #280;
}

progress.completed[value]::-moz-progress-bar {
  background: #280;
}

progress.error[value]::-webkit-progress-value {
  background: rgb(246.3920454545, 11.1079545455, 13.9772727273);
}

progress.error[value]::-moz-progress-bar {
  background: rgb(246.3920454545, 11.1079545455, 13.9772727273);
}

@keyframes progress-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 169.7312588402px 100%;
  }
}
.progressWrap {
  position: relative;
  width: 200px;
  font-size: 12px;
}
.progressWrap progress {
  height: 25px;
  width: 100%;
}
.progressWrap progress:after {
  top: 3px;
}

.dashboard-main {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #f3f3f3;
  /* make jquery tooltip fit in with other panels */
  /* custom toggle controls */
  /* For rich text editor output in the text panels */
  /* For locking buttons when dashboard is locked */
  /* for sticky header */
  /* Overrides for date picker
  #ui-datepicker-div {
      background-color: white;
      padding: 5px;
      border-radius: 0;
      border: 0;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
      z-index: 20 !important;  // keep it above the global-date-picker
  }
  .ui-datepicker-header {
      background-color: white;
      border-width: 0 0 1px 0;
      border: none;
      border-radius: 0;
  }
  .ui-datepicker-next:hover {
      background: #f5f5f5;
      border-radius: 0;
      margin: 1px;
  } 
  .ui-datepicker-prev:hover {
      background: #f5f5f5;
      border-radius: 0;
      margin: 1px;
  } 
  #ui-datepicker-div .ui-state-default {
      background-color: white !important;
      border: 1px solid #f0f0f0;
  }
  #ui-datepicker-div .ui-state-default:hover {
      background-color: #f0f0f0 !important;
  }
  */
  /* Toast */
  /* confirmation dialog */
  /* Custom scroll bar -- only works in chrome-based browsers*/
  /* query builder overrides */
  /* styling for Muuri (Javascript grid library)
   * much of this styling was taken from the README here: https://github.com/haltu/muuri 
  */
}
.dashboard-main #content {
  padding: 0;
}
.dashboard-main canvas {
  display: inline !important;
}
.dashboard-main .panel {
  margin: 0 !important;
  width: 100%;
}
@media only screen and (max-width: 1000px) {
  .dashboard-main .panel {
    width: 100%;
  }
}
.dashboard-main .panel-container {
  padding: 20px;
  height: calc(100% - 40px - 40px);
  /* 40px for header, 10px for own padding */
}
.dashboard-main .panel .sectionBar {
  font-weight: normal;
  font-size: 1em;
}
.dashboard-main .panel-options {
  color: white;
  padding: 2px 2px 6px 2px;
  transition: 0.2s;
  position: absolute;
  vertical-align: middle;
  text-align: right;
  width: auto;
  opacity: 0;
  right: 4px;
  top: 6px;
}
.dashboard-main .panel-options > * {
  width: 20px;
  margin-left: 3px;
}
.dashboard-main .panel-close,
.dashboard-main .panel-edit,
.dashboard-main .panel-table-view {
  cursor: pointer;
}
.dashboard-main .panel-edit {
  position: relative;
  top: 1px;
  /* Move the pencil down slightly */
}
.dashboard-main .item.muuri-item-dragging {
  cursor: move;
}
.dashboard-main .panel:hover > .panel-options {
  opacity: 1;
  transition: 0.2s;
}
.dashboard-main #menu {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  max-width: 65em;
  display: flex;
  position: fixed;
  top: 0;
  right: -65em;
  height: 100%;
  z-index: 65;
}
.dashboard-main #menu .close {
  float: right;
  width: 20px;
  height: 20px;
  vertical-align: top;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -ms-user-select: none;
  /* IE 10+ */
}
.dashboard-main .panel-table-view, .dashboard-main .panel-edit, .dashboard-main .panel-close {
  vertical-align: top;
}
.dashboard-main #panel-menu {
  user-select: none;
  /* prevents accidentally highlighting text in this menu */
  width: 35em;
  border: 0;
}
.dashboard-main #panel-menu > .sectionBar {
  border-bottom: none;
  border-radius: 0;
}
.dashboard-main #panel-details-menu {
  width: 45em;
  border-width: 0 0 0 1px !important;
  overflow: visible !important;
  /* for Quill ahref maker popup */
}
.dashboard-main #panel-details-menu .sectionBar {
  border-radius: 0;
}
.dashboard-main #panel-details-menu-body {
  padding-left: 20px;
}
.dashboard-main #panel-search {
  width: 100%;
  padding: 6px;
  margin-top: 6px;
}
.dashboard-main #menu .formulator {
  border-radius: 0 !important;
  height: 100%;
  overflow-y: auto;
  background: white;
}
.dashboard-main #menu .sectionBar {
  background-color: #f9f9f9;
  color: black;
}
.dashboard-main .panel.formulator {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  border: 0;
  background-color: white;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  height: 100%;
}
.dashboard-main .panel.formulator .sectionBar {
  margin: 0px;
  text-align: center;
}
.dashboard-main #menu canvas {
  pointer-events: none;
}
.dashboard-main #menuGrid {
  height: 500px !important;
  position: relative;
  width: 300px;
  margin: auto;
}
.dashboard-main #add-to-dashboard {
  font-size: 0.8em;
}
.dashboard-main div.error {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  border-radius: 0;
  border: 0;
  margin: 10px 15px 5px 5px;
}
.dashboard-main #panel-menu ul > li:first-child {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  background-color: #f9f9f9;
  border-width: 0 0 1px 0;
  border-color: #cecece;
  border-radius: 0;
  border-style: solid;
}
.dashboard-main #panel-menu ul > li:not(:first-child) {
  cursor: pointer;
}
.dashboard-main #panel-menu ul > li {
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -ms-user-select: none;
  /* IE 10+ */
  padding: 10px;
}
.dashboard-main #panel-menu ul {
  margin: 0;
  padding: 0;
}
.dashboard-main .visualization.kvp-list {
  height: 100%;
}
.dashboard-main .visualization.kvp-list > table {
  height: 100%;
  padding: 3% 0 7% 0 !important;
}
.dashboard-main .visualization.kvp-list .lvp-label {
  vertical-align: middle;
  white-space: pre;
}
.dashboard-main .visualization.counter {
  display: grid;
  /* so the contents can be vertically centered */
  height: 100%;
  /* fill the entire panel so that the counter's text can be centered */
}
.dashboard-main .visualization.counter > div {
  margin: auto auto;
  /* center the counter */
}
.dashboard-main .visualization .count {
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  margin-top: -20px;
  /* push it up to make it absolutely center (accounts for line-height of .label) */
}
.dashboard-main .visualization .label {
  text-align: center;
}
.dashboard-main #panel-details-menu-body label {
  font-weight: bold;
}
.dashboard-main .tooltip:hover {
  cursor: help;
}
.dashboard-main .ui-tooltip {
  border: 0;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 10;
}
.dashboard-main .main {
  background-color: #f3f3f3;
}
.dashboard-main #dashboard {
  min-width: 1100px !important;
  margin: auto auto;
  position: relative;
}
.dashboard-main .results-box {
  display: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  padding: 20px;
  position: relative;
  min-height: 200px;
  background: white;
}
.dashboard-main .results-title {
  margin: 0 0 10px 0;
}
.dashboard-main .results-options {
  text-align: right;
  float: right;
  display: inline;
  font-size: 0.9rem;
  font-weight: normal;
}
.dashboard-main .no-search-results {
  text-align: center;
  line-height: 160px;
  padding: 20px;
  color: gray;
  display: none;
}
.dashboard-main #es-error {
  margin: 10px 0;
  display: none;
  overflow-x: scroll;
  white-space: pre;
}
@media only screen and (min-width: 1800px) {
  .dashboard-main #dashboard {
    width: 1500px;
  }
}
@media only screen and (max-width: 1800px) {
  .dashboard-main #dashboard {
    width: 98%;
  }
}
.dashboard-main .dashboard-header {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 55;
}
.dashboard-main #dashboard-description {
  background: white;
  padding: 10px;
}
.dashboard-main #dashboard-description .description > * {
  margin: 0;
}
.dashboard-main #dashboard-description .ql-container {
  height: initial !important;
  /* slideUp animation was messing with height: 100% of snow theme */
}
.dashboard-main .dashboard-options {
  background-color: white;
  height: 40px;
}
.dashboard-main .dashboard-options .title {
  float: left;
  padding: 10px;
  font-weight: bold;
}
.dashboard-main .dashboard-options .title .ql-editor {
  padding: 7px 10px;
}
.dashboard-main .dashboard-options .buttons {
  float: right;
  display: flex;
}
.dashboard-main .dashboard-options .buttons > span {
  border: 1px solid #e0e0e0;
  padding: 5px 10px;
  margin-top: 5px;
  margin-right: 5px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -ms-user-select: none;
  /* IE 10+ */
  transition: opacity 0.5s;
}
.dashboard-main .dashboard-options .buttons > span:hover {
  background-color: #f8f8f8;
}
.dashboard-main .relative-date-number {
  margin: 0 10px 0 10px;
  width: 50px;
}
.dashboard-main #global-date-picker {
  position: absolute;
  background: white;
  padding: 10px;
  z-index: 60;
  margin-top: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  width: 275px;
  cursor: auto;
}
.dashboard-main #no-items-overlay {
  text-align: center;
  position: absolute;
  top: 50%;
  width: 100%;
}
.dashboard-main #dashboard-container .dashboard-menu-list {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  position: absolute;
  background: white;
  margin: 0;
  width: 150px;
  margin-left: -125px;
  margin-top: 5px;
  padding: 0;
  z-index: 60;
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
}
.dashboard-main #dashboard-container .dashboard-menu-list li {
  padding: 10px;
  text-align: left;
}
.dashboard-main #dashboard-container .dashboard-menu-list li:hover {
  background-color: #f9f9f9;
}
.dashboard-main #dashboard-container .dashboard-menu-list li:not(:last-child) {
  border-bottom: 1px solid #cecece;
}
.dashboard-main span.choice {
  display: inline;
}
.dashboard-main span.choice span.toggle {
  display: inline-block;
  margin-right: 20px;
}
.dashboard-main span.choice .toggle:hover {
  color: gray;
}
.dashboard-main span.toggle {
  user-select: none;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -ms-user-select: none;
  /* IE 10+ */
  cursor: pointer;
}
.dashboard-main span.toggle.on {
  color: gray;
}
.dashboard-main #loading-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 50;
  background-color: white;
  opacity: 0.7;
  top: 0;
  left: 0;
}
.dashboard-main .loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid gray;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.dashboard-main .ql-editor {
  background-color: white;
}
.dashboard-main .visualization {
  word-break: keep-all;
}
.dashboard-main .visualization h1,
.dashboard-main .visualization h2,
.dashboard-main .visualization h3,
.dashboard-main .visualization h4,
.dashboard-main .visualization p {
  padding: 0;
  margin: 0;
}
.dashboard-main .locked {
  opacity: 0.3;
  transition: opacity 0.5s;
  cursor: not-allowed !important;
}
.dashboard-main .sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.dashboard-main .sticky + .content {
  padding-top: 102px;
}
.dashboard-main #toast {
  background-color: black;
  color: white;
  position: fixed;
  bottom: 0;
  padding: 20px;
  opacity: 0.8;
  border-radius: 2px;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.dashboard-main .confirmation-overlay {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  display: none;
  background-color: black;
  top: 0;
}
.dashboard-main .confirmation-dialog {
  width: 500px;
  z-index: 200;
  position: fixed;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  left: calc(50% - 250px);
  top: calc(50% - 100px);
  /* half the height -- depends on amount of text but 100 is about right */
}
.dashboard-main .confirmation-dialog .body {
  padding: 10px;
}
.dashboard-main .confirmation-dialog .message {
  padding: 0 10px 10px 0;
}
.dashboard-main .confirmation-dialog .cd-header {
  padding: 10px;
  font-size: 1rem;
}
.dashboard-main .confirmation-dialog .actions {
  text-align: right;
}
.dashboard-main #menu ::-webkit-scrollbar {
  width: 10px;
}
.dashboard-main #menu ::-webkit-scrollbar-track {
  background: white;
  border-left: #cecece 1px solid;
}
.dashboard-main #menu ::-webkit-scrollbar-thumb {
  background: #e5e5e5;
}
.dashboard-main #menu ::-webkit-scrollbar-thumb:hover {
  background: #e5e5e5;
}
.dashboard-main .query-builder .rules-group-container {
  border: 0;
  background-color: white;
}
.dashboard-main #grid {
  min-height: 600px;
  min-width: 1100px;
  position: relative;
  max-width: 1800px;
  /* to keep this from covering the drawer toggle button: */
  margin-top: 5px;
}
.dashboard-main .item.muuri-item-dragging {
  cursor: move;
}
.dashboard-main #grid .item {
  display: block;
  margin: 5px;
  position: absolute;
  width: 420px;
  z-index: 1;
  transition: width 0.5s, height 0.5s;
}
.dashboard-main .item.muuri-item-dragging {
  z-index: 4;
}
.dashboard-main .item.muuri-item-releasing {
  z-index: 5;
}
.dashboard-main .muuri-item-placeholder {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  opacity: 0.5;
  background: white;
}
.dashboard-main #grid .item.muuri-item-hidden {
  z-index: 0;
}
.dashboard-main #grid .item-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.dashboard-main .data-table-dialog .pagination {
  padding-left: 0px;
}
.dashboard-main .data-table-dialog .dt-container {
  margin: 0px;
}
.dashboard-main .data-table-dialog .dt-search {
  top: 0px;
}
.dashboard-main .data-table-dialog .dt-menu-settings {
  color: white;
}
.dashboard-main .data-table-dialog .dt-menu-settings svg {
  top: 7px;
}

.tree-container {
  max-height: 200px;
  overflow: scroll;
}
.tree-container .jstree-icon.sharepoint-icon, .tree-container .jstree-icon.teams-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 85%;
}
.tree-container .jstree-icon.sharepoint-icon {
  background-image: url("../images/sharepoint.svg");
}
.tree-container .jstree-icon.teams-icon {
  background-image: url("../images/teams.svg");
}

/*
 * Element styles
 *
 * Styles that affect entire elements (without CSS classes or ids).
 * These are somewhat dangerous, because they apply to all elements regardless of the library that manages them.
 */
html {
  background-color: #ffffff;
  color: #000;
  margin: 0;
  padding: 0;
}

a {
  outline: none;
  padding-right: 6px;
  text-decoration: underline;
}
a:link, a:visited, a:active, a:hover {
  color: #206090;
}
a:hover {
  color: #000;
}

header, footer, hgroup,
nav, section {
  display: block;
}

body {
  margin: 0;
}

input {
  box-sizing: border-box;
}
input[type=button][disabled] {
  border: none;
  cursor: default;
}
input[type=checkbox]:disabled {
  color: #aaa;
}
input[type=checkbox] {
  background: transparent;
  border: inherit;
  width: 17px;
  height: 17px;
  vertical-align: middle;
}

label {
  display: block;
}
label.checkbox {
  display: inline;
}
label.disabled {
  color: #888;
}

textarea {
  font-family: inherit;
  width: 100%;
  vertical-align: top;
  resize: vertical;
  box-sizing: border-box;
}

input:focus, textarea:focus {
  border: 1px solid #7ac0da;
}

select, input, textarea {
  border-radius: 3px;
}

/* Format all table headers (including datatables and non-datatable tables). */
th {
  font-size: 0.92rem;
  text-align: left;
  border: none 0px;
  padding-left: 0;
}

h1, h2, h3,
h4, h5, h6 {
  margin-bottom: 0;
  padding-bottom: 0;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.2em;
}

h4 {
  font-size: 1.1em;
}

h5, h6 {
  font-size: 1em;
}
h5 a:link, h5 a:visited, h5 a:active, h6 a:link, h6 a:visited, h6 a:active {
  padding: 0;
  text-decoration: none;
}

/*
 * Main
 *
 * .main is the div that wraps the primary content of the page (below the header, above the footer).
 */
.main {
  position: relative;
  margin: 1em;
}

/*
 * Debug
 *
 * In debug mode we use special inputs/formulator boxes to show
 * typically not-rendered components.
 */
.debug {
  border: 1px dashed;
  background-color: #dda;
  background: rgb(136, 136, 110.5);
  background-image: -webkit-linear-gradient(top, rgb(136, 136, 110.5), #dda);
  background-image: -moz-linear-gradient(top, rgb(136, 136, 110.5), #dda);
  background-image: -ms-linear-gradient(top, rgb(136, 136, 110.5), #dda);
  background-image: linear-gradient(top, rgb(136, 136, 110.5), #dda);
  color: black;
}

/*
 * JSON
 *
 * For when raw JSON is shown in the UI (e.g. Reporting page with debug mode on).
 */
.json {
  tab-size: 1.25em;
  white-space: pre-wrap;
}

/*
 * Explanations
 *
 * Styling for explanations that are placed on forms to explain inputs.
 */
.explain {
  display: block;
  vertical-align: top;
  width: 100%;
}

.explaininline {
  display: inline-block;
}

.flowExplanation {
  margin-left: 1.5em;
  margin-bottom: 0.3em;
  display: inline-block;
  vertical-align: top;
  color: #773;
  max-width: inherit;
  overflow-wrap: break-word;
  font-style: italic;
}

.flowListItem {
  display: inline-block;
  padding: 0.2em 0.5em 0.4em;
  margin: 0.25em 0.25em 0 0;
  background: white;
  border: solid #c5c2c5 1px;
}

.material-symbols-rounded.dashboardButton {
  font-size: 20px;
  vertical-align: middle;
}

/* 
 * Info Toggle Button
 *
 * Some pages have additional explanations that can be toggled via a button.
 * It is convention to place this button in the .sectionBar of a formulator box (top left).
 */
#btnToggleInfo {
  vertical-align: middle;
  margin: 8px;
  padding: 1px;
}

#btnToggleInfo:active {
  background: rgba(0, 0, 0, 0.1333333333);
}

/*
 * X Editable
 *
 * Style overrides for the x editable plugin (an inline editor for single values).
 */
a.editable-click {
  background-color: inherit;
  color: inherit;
  border-bottom: none;
  padding-bottom: 1px;
  display: inline-block;
}
a.editable-click:hover {
  color: inherit;
  border: none;
  border-bottom: 1px dashed black;
  padding-bottom: 0px;
}

/*
 * Page Footer
 *
 * The content at the bottom of each page.
 */
.footer {
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 50px;
  margin-bottom: 10px;
  text-align: center;
  font-size: xx-small;
  color: black;
}
.footer a {
  color: black;
}

/* 
 * Flow Items 
 *
 * Items that exist together in a container. 
 * Similar to "chips" or items in a selectize, but not editable.
 */
.flowItem {
  display: inline-block;
  margin-right: 0.4em;
  margin-bottom: 0.4em;
  box-shadow: 5px 5px 10px #888;
}

.flowItemTitle {
  padding: 0.1em 0.4em;
}

.flowItemBody {
  background-color: white;
  padding: 0.4em;
}

/*
 * Block Warning
 *
 * A full screen width box that serves the same purpose as .oops (see below),
 * but indicates a less urgent issue (used on Dashboard page).
 */
div.block-warning {
  color: #c82;
  background-color: #fff3cd;
  display: block;
  padding: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #c82;
  margin-bottom: 20px;
}

/*
 * Oops
 *
 * .oops is a div that gets populated with errors typically after submitting a form that has failed validation.
 * It is below the header, but above the main content of the page.
 */
div.oops, div.error, div.success {
  color: #e14;
  background-color: #f7f0f0;
  display: block;
  padding: 10px;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #f5c6cb;
  margin-bottom: 20px;
}
div.oops input, div.error input, div.success input {
  background-color: #f7f0f0;
}
div.oops.success, div.error.success, div.success.success {
  background-color: fade(#280, 30%);
  border-color: fade(#280, 50%);
  color: hsl(105, 100%, -23.3333333333%);
}

div.oops h3 {
  margin: 0;
  font-size: 1.2em;
}

div.oops ul {
  margin: 0;
  padding-bottom: 20px;
}

pre.error {
  text-align: left;
  font-size: 1rem;
}

/*
 * Validation
 *
 * Styles for form validation to show errors on single inputs.
 */
.field-validation-error {
  display: block;
  clear: both;
  padding-left: 0.5em;
  color: #e14;
}

input.input-validation-error {
  border: 1px solid #e14;
}

input[type=checkbox].input-validation-error {
  border: 0 none;
}

.validation-summary-errors {
  color: #e14;
  font-size: 1.1em;
}

/*
 * Page Not Found
 */
.smart-alert {
  text-align: center;
  margin: 2em;
}
.smart-alert .alert-message {
  border: 1px solid #cc7375;
  color: #e50000;
  padding: 2em;
}
.smart-alert .alert-caption {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/*
 * Formatting
 *
 * Misc. formatting classes
 */
.truncate {
  max-width: 700px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

tr.expanded .truncate {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  text-overflow: initial;
}

.notApplicable {
  color: #bbb;
}

.selected .notApplicable {
  color: #668;
}

input.long {
  width: 100%;
}

.pk-disabled, .pk-disabled-select {
  opacity: 0.5;
  pointer-events: none;
}

noscript {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 80vh;
  text-align: center;
  margin-top: 50px;
}

/* Used on Reporting page - "Match Filter Exclude" placed in the sectionBars. */
.dsi-mfe {
  margin-left: 1em;
  font-size: 0.9rem;
}
.dsi-mfe a:hover {
  color: #cccccc;
}

/* Used on Actions page. */
.todoCount {
  position: absolute;
  border-radius: 1em;
  display: inline-block;
  min-width: 1em;
  width: 13px;
  height: 13px;
  background-color: #f95557;
  color: white;
  padding: 2px;
  text-align: center;
  font-size: 0.75em;
  top: -0.7em;
  left: -5px;
}

table.dataTable tbody th, table.dataTable tbody td {
  padding: 12px 14px;
}

.dt-scroll, .ui-button {
  border-radius: 4px;
}

.dataTables_actions .ui-button, .simple-button {
  background-color: transparent;
  color: #448;
}

.ui-button .material-symbols-rounded {
  vertical-align: middle;
  position: relative;
  top: -1px;
  left: -3px;
}

/*# sourceMappingURL=site.css.map */