@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
/* Vendor CSS */
@import url(dropzone.css);
@import url(solid.css);
/* Site specific css. */
/**
 * SASS variables
 *
 * We declare all major variables for the site in one file so that sweeping changes can be made across the site
 * when and if desired without having to go through all the files.  Since SASS is a preprocessor its probably
 * more accurate to call these constants.
 *
 * @see https://sass-lang.com/documentation/variables
 */
/*
 * Colors
 */
/*
 * Display sizes
 *
 * These break points are used by most frameworks, though we are missing the smallest "phone" group since this
 * app is likely unusable in that.  When using these variables take care to only use max values with max-width
 * markup and min with min-width
 *
 * @media (max-width: $tabletMax) {
 *   css rules for devices of tablet max display width or lower.
 * }
 */
/**
 * SASS mix ins provide a way to include blocks of code while reducing repetition.
 *
 * They are evaluated at compile time and so are more akin to C define statements than functions.
 *
 * @see https://sass-lang.com/documentation/at-rules/mixin
 */
/*
 * Apply the properties necessary to make an icon.
 */
/*
 * Apply a single pixel stroke outline on the text.
 */
/*
 * Core declarations apply to the whole of the site. Most of this is adjustments to declarations made
 * by the bootstrap framework. Unlike the layout file, these declarations can be invoked at any time,
 * or are concerned with page element appearance as opposed to positions.
 */
* {
  box-sizing: border-box; }

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif; }

select[multiple] {
  /*Allow to resize in both directions*/
  resize: both;
  /*start out with a height of 10*/
  height: 12em; }

textarea {
  resize: both; }

.dropzone {
  margin-top: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
  padding: 10px 10px; }
  .dropzone:hover {
    background: #eee; }
  .dropzone .dz-preview.dz-file-preview {
    margin: 5px 10px; }
    .dropzone .dz-preview.dz-file-preview .dz-image {
      width: 100px;
      height: 110px; }
    .dropzone .dz-preview.dz-file-preview .dz-progress {
      top: 70%; }

a.icon:hover {
  text-decoration: none;
  color: inherit; }

h3 {
  margin-top: 1em; }

div.list-header-with-create-button {
  margin-top: 2em;
  /* Allow space for before the header combo, to "replace" the margin that used to be there */
  margin-bottom: 0.5rem;
  display: flex;
  /* Show the create button right after the header */
  align-items: center;
  /* Vertical align the elements to the center */ }
  div.list-header-with-create-button h2, div.list-header-with-create-button h3 {
    margin-top: 0;
    /* Remove the space to the right (and above) the header */
    margin-right: 5px;
    /* Add space between the header and the button */
    margin-bottom: 0; }

.accordion .accordion-item {
  width: 100%; }
  .accordion .accordion-item .accordion-header:after {
    content: '\25BC';
    /*'\002B' is a +, '\25BC' is a down arrow */
    float: right;
    margin-left: 5px; }
  .accordion .accordion-item .accordion-header[aria-expanded="true"]:after {
    content: "\25B2";
    /*'\2212' is a -, '\25B2' is an up arrow */ }
  .accordion .accordion-item .accordion-collapse {
    width: 100%;
    border: none; }
    .accordion .accordion-item .accordion-collapse .accordion-body {
      padding: 0.25em; }
      .accordion .accordion-item .accordion-collapse .accordion-body.collapse {
        box-sizing: border-box;
        max-height: 0;
        overflow: hidden;
        border: 1px solid transparent;
        border-color: lightgray; }
        .accordion .accordion-item .accordion-collapse .accordion-body.collapse.show {
          overflow: auto;
          border: 1px solid;
          border-color: lightgray;
          max-height: 20em; }
      .accordion .accordion-item .accordion-collapse .accordion-body.collapsing {
        position: relative;
        height: 0;
        width: 0;
        overflow: hidden;
        border: 1px solid;
        border-color: lightgray;
        -webkit-transition-property: height, width, visibility, border;
        transition-property: height, width, visibility, border;
        -webkit-transition-duration: 0.35s;
        transition-duration: 0.35s;
        -webkit-transition-timing-function: ease;
        transition-timing-function: ease; }

table.fileList:not(.ignore-default-table-format) {
  padding: 0;
  border: 1px solid #999; }
  table.fileList:not(.ignore-default-table-format) tr:nth-child(even) {
    background-color: #eee; }
    table.fileList:not(.ignore-default-table-format) tr:nth-child(even).selected {
      background-color: lightblue; }
    table.fileList:not(.ignore-default-table-format) tr:nth-child(even) *:not(th) {
      background-color: inherit; }
  table.fileList:not(.ignore-default-table-format) tr.selected {
    background-color: lightblue; }
  table.fileList:not(.ignore-default-table-format) tr.sub-header td {
    background-color: darkgray; }
  table.fileList:not(.ignore-default-table-format) th.sort-asc::before {
    content: "\f30c"; }
  table.fileList:not(.ignore-default-table-format) th.sort-desc::before {
    content: "\f309"; }
  table.fileList:not(.ignore-default-table-format) td {
    border: none; }
    table.fileList:not(.ignore-default-table-format) td.headerCell {
      min-width: 20em; }
  table.fileList:not(.ignore-default-table-format):not(.block-manual-order) .dragme {
    cursor: grab; }
  table.fileList:not(.ignore-default-table-format):not(.block-manual-order) .dragInProgress .dragme {
    cursor: grabbing; }
  table.fileList:not(.ignore-default-table-format):not(.block-manual-order) .dragInProgress {
    cursor: grabbing; }
  table.fileList:not(.ignore-default-table-format).block-manual-order .dragme {
    visibility: hidden; }
  table.fileList:not(.ignore-default-table-format) .collapsible-description {
    width: 100%; }
    table.fileList:not(.ignore-default-table-format) .collapsible-description .description-container {
      width: 100%; }
      table.fileList:not(.ignore-default-table-format) .collapsible-description .description-container .description-header:after {
        content: '\25BC';
        /*'\002B' is a +, '\25BC' is a down arrow */
        float: right;
        margin-left: 5px; }
      table.fileList:not(.ignore-default-table-format) .collapsible-description .description-container .description-header[aria-expanded="true"]:after {
        content: "\25B2";
        /*'\2212' is a -, '\25B2' is an up arrow */ }
    table.fileList:not(.ignore-default-table-format) .collapsible-description .description-drawer {
      width: 100%;
      border: none; }
      table.fileList:not(.ignore-default-table-format) .collapsible-description .description-drawer .description {
        padding: 0.25em; }
        table.fileList:not(.ignore-default-table-format) .collapsible-description .description-drawer .description p {
          overflow: auto;
          width: 100%;
          margin: 0; }
        table.fileList:not(.ignore-default-table-format) .collapsible-description .description-drawer .description.collapse {
          box-sizing: border-box;
          max-height: 0;
          overflow: hidden;
          border: 1px solid transparent;
          border-color: lightgray; }
          table.fileList:not(.ignore-default-table-format) .collapsible-description .description-drawer .description.collapse.show {
            overflow: auto;
            border: 1px solid;
            border-color: lightgray;
            max-height: 20em; }
        table.fileList:not(.ignore-default-table-format) .collapsible-description .description-drawer .description.collapsing {
          position: relative;
          height: 0;
          width: 0;
          overflow: hidden;
          border: 1px solid;
          border-color: lightgray;
          -webkit-transition-property: height, width, visibility, border;
          transition-property: height, width, visibility, border;
          -webkit-transition-duration: 0.35s;
          transition-duration: 0.35s;
          -webkit-transition-timing-function: ease;
          transition-timing-function: ease; }

section.sectionWithSideBar {
  /* When active, fully display out the tab */ }
  section.sectionWithSideBar.active {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-column-gap: 2em; }
    section.sectionWithSideBar.active .sidePanelTab .list-header-with-create-button {
      /* When active, change the symbol to collapse
                Also, show the form (which has the add new button) */ }
      section.sectionWithSideBar.active .sidePanelTab .list-header-with-create-button h3::after {
        content: "\f078"; }
      section.sectionWithSideBar.active .sidePanelTab .list-header-with-create-button form.add-new {
        margin-left: 1em;
        display: inline-block; }
    section.sectionWithSideBar.active .sidePanelTab > div.side-panel-section {
      display: block; }
  section.sectionWithSideBar .sidePanelTab .list-header-with-create-button {
    /* By default, don't show the add new button */ }
    section.sectionWithSideBar .sidePanelTab .list-header-with-create-button h3 {
      display: inline-block;
      margin: 0 0 0.25em 0;
      position: relative;
      /* By default, have the open symbol after the header */ }
      section.sectionWithSideBar .sidePanelTab .list-header-with-create-button h3::after {
        display: inline-block;
        width: 1em;
        text-align: right;
        font-family: 'FontAwesome';
        font-weight: 900;
        content: " "; }
    section.sectionWithSideBar .sidePanelTab .list-header-with-create-button form.add-new {
      display: none; }
  section.sectionWithSideBar .sidePanelTab > div.side-panel-section {
    display: none; }
  section.sectionWithSideBar .sidePanelTab .fileList {
    width: 100%;
    border: none; }
  section.sectionWithSideBar .sidePanelTab tr {
    padding: 0;
    position: relative;
    border-bottom: 1px solid #ccc; }
    section.sectionWithSideBar .sidePanelTab tr td {
      padding: 0.25em 0 0.25em 0; }
      section.sectionWithSideBar .sidePanelTab tr td.single-icon-cell {
        width: 1em; }
    section.sectionWithSideBar .sidePanelTab tr:first-child {
      border-top: 1px solid #ccc; }
    section.sectionWithSideBar .sidePanelTab tr nav::before {
      display: block;
      float: left;
      width: 1em;
      font-family: 'FontAwesome';
      font-weight: 900;
      content: " "; }
    section.sectionWithSideBar .sidePanelTab tr div {
      display: none; }
    section.sectionWithSideBar .sidePanelTab tr.active nav {
      font-weight: bold; }
      section.sectionWithSideBar .sidePanelTab tr.active nav::before {
        font-weight: normal;
        content: "\f078"; }
    section.sectionWithSideBar .sidePanelTab tr.active div {
      display: block; }
    section.sectionWithSideBar .sidePanelTab tr.active a.icon {
      display: inline-block;
      position: static;
      text-align: left;
      margin-left: 0.5em;
      padding-bottom: 0.5em; }
    section.sectionWithSideBar .sidePanelTab tr.active a.outer {
      display: none; }

table.fileListItemHeader:not(.ignore-default-table-format) td {
  border: none; }
  table.fileListItemHeader:not(.ignore-default-table-format) td.headerCell {
    min-width: 20em; }

table.fileListItemHeader:not(.ignore-default-table-format) h3 {
  margin-top: 0;
  margin-bottom: 0; }

.pipeList {
  list-style: none;
  padding: 0; }
  .pipeList li {
    display: inline-block; }
    .pipeList li:not(:last-child)::after {
      content: "  |  "; }

.nav-tabs {
  margin-top: 2em; }

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
  border-radius: 1em 1em 0 0;
  background: #003451;
  color: #fff;
  font-weight: bold;
  margin-right: 0.1em; }
  .nav-tabs .nav-item.show .nav-link.active, .nav-tabs .nav-link.active {
    color: #fff;
    background: #007ac0; }
  .nav-tabs .nav-item.show .nav-link:hover, .nav-tabs .nav-link:hover {
    background: #009af3; }

.tab-pane {
  padding: 1em;
  border: 1px solid #ccc;
  border-top: 0;
  overflow: auto; }

.emailGrid {
  list-style: none;
  padding: 0;
  margin: 1em 0; }
  .emailGrid li {
    display: flex;
    margin-bottom: 1em; }
    .emailGrid li select {
      margin: 0 1em;
      width: 25%; }
    .emailGrid li input {
      margin-right: 1em;
      width: 75%; }

.note {
  color: #00f; }

.hidden {
  display: none !important; }

.loader {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 50vh;
  font-family: "Roboto", sans-serif; }
  .loader .loader-inner {
    display: flex;
    align-items: baseline;
    font-size: 2em; }
    .loader .loader-inner .dots {
      display: flex;
      position: relative;
      left: -10px;
      width: 100px;
      animation: dots 4s ease infinite 1s; }
      .loader .loader-inner .dots div {
        position: relative;
        width: 10px;
        height: 10px;
        margin-right: 10px;
        border-radius: 100%;
        background-color: black; }
        .loader .loader-inner .dots div:nth-child(1) {
          width: 0px;
          height: 0px;
          margin: 5px;
          margin-right: 15px;
          animation: show-dot 4s ease-out infinite 1s; }
        .loader .loader-inner .dots div:nth-child(4) {
          background-color: transparent;
          animation: dot-fall-left 4s linear infinite 1s; }
          .loader .loader-inner .dots div:nth-child(4):before {
            position: absolute;
            width: 10px;
            height: 10px;
            margin-right: 10px;
            border-radius: 100%;
            background-color: black;
            content: '';
            animation: dot-fall-top 4s cubic-bezier(0.46, 0.02, 0.94, 0.54) infinite 1s; }

.ag-full-width-row .loader {
  height: 10em; }

@keyframes dots {
  0% {
    left: -10px; }
  20%, 100% {
    left: 10px; } }

@keyframes show-dot {
  0%, 20% {
    width: 0px;
    height: 0px;
    margin: 5px;
    margin-right: 15px; }
  30%, 100% {
    width: 10px;
    height: 10px;
    margin: 0px;
    margin-right: 10px; } }

@keyframes dot-fall-left {
  0%, 5% {
    left: 0px; }
  100% {
    left: 200px; } }

@keyframes dot-fall-top {
  0%, 5% {
    top: 0px; }
  30%, 100% {
    top: 50vh; } }

/**
 * General page layout rules.
 *
 * These are kept seperate from the core declarations since they are applied only once.
 */
body {
  background: #fff;
  display: flex;
  flex-flow: column nowrap; }
  body > header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 5em;
    width: 100%;
    padding: 0.25em;
    background: #003451;
    color: #fff; }
    body > header.dev-mode {
      background: #00b0b5; }
    body > header > a:first-child {
      height: 4em;
      width: 4em;
      text-indent: -200%;
      white-space: nowrap;
      overflow: hidden;
      background: url("/Content/mckenneys-logo-white-small.png") no-repeat;
      background-size: auto 100%; }
    body > header h1 {
      flex-grow: 2;
      font-size: 1.5rem;
      text-indent: 2em; }
    body > header .user-tidbit > * {
      /*Justify all content within the user tidbit (the last part) to the right.*/
      float: right; }
    body > header > * {
      margin: 0.25em; }
    body > header .userName {
      color: gold; }
    body > header .button {
      padding: 0.5em 1em; }
  body > nav {
    height: 1em;
    margin-bottom: 2em;
    display: flex;
    flex-flow: row nowrap; }
    body > nav span, body > nav a {
      padding: 0.5em;
      line-height: 1em;
      background: #007ac0;
      color: #fff;
      height: 2em; }
      body > nav span::after, body > nav a::after {
        content: ">";
        display: inline-block;
        margin-left: 1em; }
    body > nav a:visited, body > nav a:hover {
      color: #fff; }
    body > nav span:last-child {
      padding-right: 2em;
      border-bottom-right-radius: 2em;
      font-weight: bold;
      border-right: none; }
      body > nav span:last-child::after {
        display: none; }
  body > footer {
    background: #231f20;
    clear: both;
    margin-top: auto;
    width: 100%;
    padding: 1em;
    text-align: center;
    color: #fff; }
    body > footer > p {
      margin: 0; }

.large-scroll-area {
  overflow: auto;
  /*Set a starting height*/
  max-height: 50em;
  /*Allow the user to resize*/
  resize: both;
  /*Cancel the max height if the user resizes*/
  /*Display the scrollbar next to the area*/
  display: inline-block;
  background: linear-gradient(white 50%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 50%) 0 100%, linear-gradient(rgba(156, 156, 156, 0.7), rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), rgba(156, 156, 156, 0.7)) 0 100%;
  /*This creates a "depth" effect across the shadow */
  /*radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;*/
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 50px, 100% 50px, 100% 25px, 100% 25px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll; }
  .large-scroll-area[style*="height"] {
    max-height: unset; }

main {
  padding: 2em; }
  @media (max-width: 1000px) {
    main {
      padding: 1em; } }

article {
  /* Semantic tables only within articles */ }
  article > header {
    margin-bottom: 1em; }
  article table {
    border-collapse: collapse; }
    article table:not(.ignore-default-table-format) td, article table:not(.ignore-default-table-format) th {
      padding: 0.25em;
      border: 1px solid #003451;
      vertical-align: top; }
    article table:not(.ignore-default-table-format) th {
      color: #fff;
      background: #003451; }
    article table:not(.ignore-default-table-format) tr:nth-child(even) td {
      background: #eee; }
    article table.no-table-format td, article table.no-table-format th {
      padding: 0;
      border: 0;
      vertical-align: top; }
    article table.no-table-format th {
      color: none;
      background: none; }
    article table.no-table-format tr:nth-child(even) td {
      background: none; }

@media print {
  /*
        To hide the headers / footers (including page name and website) when printing.
        Note - only works in chrome....
        Margins (outside of the element) are removed to not show the headers / footers
        Padding (inside of the element) is added to ensure that items don't get cut off during printing
        This approach doesn't seem to work. Padding HTML doesn't pad each page.
    */
  /*@page {
        margin: 0px auto;
        padding: 2em 0 2em 0;
    }*/
  /*Objects that shouldn't be printed can be marked with this class*/
  .do-not-print {
    visibility: hidden;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0; } }

form section:not(.vertical-stacking) {
  /*Displays the items within the section horizontally - note that this is the default view*/
  display: flex;
  column-gap: 1em;
  justify-content: space-between;
  align-items: flex-start; }

form section fieldset {
  margin: 2em 0em;
  min-width: 50%; }

@media screen and (max-width: 1023px) {
  form section {
    display: block; }
    form section fieldset {
      width: 100%; } }

form section table {
  min-width: 100%; }
  form section table input[type=text] {
    margin: 0px;
    padding: 2px; }
    form section table input[type=text].abbreviation {
      width: 5em; }
  form section table textarea {
    margin: 0px; }

form textarea.description {
  min-width: 25em; }

form.inline {
  display: inline; }

textarea.resizable {
  /*Set the bounds - constrain between a minimum width and a larger width (to be the most of the screen)*/
  min-width: 20em;
  max-width: calc(max(25em, 100%));
  /*Set an initial width - can be resized by the user if desired */
  width: calc(min(80em, 100%));
  resize: both; }

button:focus {
  outline: none; }

/*Only format buttons. Exclude nav-links, icons, and ag-grid filter buttons*/
button:not(.icon):not(.nav-link):not(.ag-floating-filter-button-button):not(.select2-selection__clear):not(.select2-selection__choice__remove), .button {
  display: inline-block;
  background: #007ac0;
  color: #fff;
  /*Center the arrow on the device / point selector large button dropdown*/
  border-radius: 0.5em;
  border: none;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase; }
  button:not(.icon):not(.nav-link):not(.ag-floating-filter-button-button):not(.select2-selection__clear):not(.select2-selection__choice__remove).groupToggle, .button.groupToggle {
    padding: 0 0.5em; }
  button:not(.icon):not(.nav-link):not(.ag-floating-filter-button-button):not(.select2-selection__clear):not(.select2-selection__choice__remove):hover, .button:hover {
    background: #009af3; }
  button:not(.icon):not(.nav-link):not(.ag-floating-filter-button-button):not(.select2-selection__clear):not(.select2-selection__choice__remove).large, .button.large {
    padding: 0.5em 1em;
    margin: 1em 0; }
  button:not(.icon):not(.nav-link):not(.ag-floating-filter-button-button):not(.select2-selection__clear):not(.select2-selection__choice__remove):disabled, .button:disabled {
    background: #fff;
    color: #ccc;
    border: 1px solid #ccc; }

button.icon {
  background: none;
  border: none; }

button:disabled, button:hover:disabled {
  background: #ccc; }

input[type=text], input[type=email], input[type=number], input[type=password] {
  height: 1.5em;
  width: auto; }
  input[type=text].smallTextBox, input[type=email].smallTextBox, input[type=number].smallTextBox, input[type=password].smallTextBox {
    width: 4em; }

textarea {
  margin-right: 1em;
  height: 5em; }

fieldset {
  border: 1px solid #ccc;
  border-radius: 0 1em 1em 1em;
  position: relative;
  margin: 2em 0 1em;
  padding: 1em; }

.address {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 0.5em; }
  .address label {
    height: 1em; }
  .address :nth-child(1), .address :nth-child(2), .address :nth-child(3) {
    grid-column-end: span 2; }
  .address :nth-child(5) {
    grid-row-start: 5; }
  .address :nth-child(9) {
    grid-row-start: 7; }

fieldgrid {
  display: grid;
  grid-template-columns: minmax(10em, max-content) auto;
  justify-items: start;
  grid-row-gap: 1em;
  grid-column-gap: 1em; }
  fieldgrid.fieldgrid-headers-50 {
    /*grid-template-columns: 50% 50%;*/ }
  fieldgrid.fieldgrid-headers-25 {
    /*grid-template-columns: 25% 75%;*/ }
  fieldgrid.fieldgrid-headers-values {
    /*grid-template-columns: 25% 75%;*/
    /*Set the nth child (i.e., the value) to take up 100% of the space*/
    /*In case wraps a select (because are using an external library for 
            rendering, which appends after the select item), then make that 100% as well. */
    /*Also, make text areas the full width*/ }
    fieldgrid.fieldgrid-headers-values > select:nth-child(even) {
      /*Make select items and text areas the full width*/
      width: 100%; }
    fieldgrid.fieldgrid-headers-values > span:nth-child(even) {
      width: 100%; }
      fieldgrid.fieldgrid-headers-values > span:nth-child(even) > select {
        /*Make select items and text areas the full width*/
        width: 100%; }
    fieldgrid.fieldgrid-headers-values > textarea:nth-child(even) {
      /*Make select items and text areas the full width*/
      width: 100%; }
  fieldgrid > input, fieldgrid > select {
    display: block;
    /*width: 100%;*/
    /*margin: 0 0 1em 0;*/
    margin-right: 1em;
    margin-bottom: 0.25em; }

legend {
  position: absolute;
  left: -1px;
  top: -1.5em;
  height: 1.5em;
  border: 1px solid #ccc;
  border-bottom: 1px solid white;
  font-size: 1rem;
  font-weight: bold;
  width: auto;
  padding: 0 1em 0 0.5em;
  border-top-right-radius: 1em; }

.checkboxList {
  list-style: none;
  padding: 0; }
  .checkboxList li {
    margin: 0; }
  .checkboxList input[type=checkbox] {
    margin-right: 1em; }

.warnOnCheck .warning {
  display: none; }

.warnOnCheck.checked .warning {
  display: block; }

.warning {
  padding: 0.5em;
  margin-right: 1em;
  position: relative;
  border: 1px solid #ff6a00;
  border-radius: 1em;
  background: #fefeee; }
  .warning::before {
    float: left;
    font-family: 'FontAwesome';
    font-weight: 900;
    content: "";
    color: #ffd800;
    font-size: 2em;
    margin-right: 0.5em; }
  .warning p {
    margin: 0; }

.userList {
  list-style: none;
  padding: 0;
  border: 1px solid #ccc; }
  .userList > li {
    display: flex;
    align-items: flex-start; }
    .userList > li > div {
      display: none; }
    .userList > li > span {
      width: 20%; }
    .userList > li > button {
      width: 5%; }
    .userList > li:nth-child(even) {
      background: rgba(0, 0, 0, 0.05); }
    .userList > li.open > button.toggle::before {
      content: "\f078"; }
    .userList > li.open > div {
      display: block;
      width: 75%; }
      .userList > li.open > div header {
        background: #007ac0;
        color: #fff;
        display: grid;
        grid-template-columns: 11em auto;
        padding-left: 2em; }
      .userList > li.open > div > ul {
        list-style: none;
        padding: 0;
        border: 1px solid #ccc; }
        .userList > li.open > div > ul > li {
          display: grid;
          grid-template-columns: 1em 10em auto;
          grid-column-gap: 1em; }
          .userList > li.open > div > ul > li:nth-child(even) {
            background: rgba(0, 0, 0, 0.05); }

/*For pretty select items wrapped within a span, set the width of the span to the full width of the element*/
span.ui-friendly-select-wrapper {
  width: 100%; }

select.ui-friendly-select {
  width: 100%; }

.select2-results > .select2-results__options {
  max-height: calc(max(200px, 70vh)) !important; }

/*
 * The icons we are currently using on the site.
 *
 * @see https://fontawesome.com/icons?s=solid&m=free
 */
a.icon {
  text-decoration: none; }

.icon {
  color: #000;
  padding: 0px 0.25em; }
  .icon::before {
    /*For any icon, use a question symbol to show that doesn't have an icon attached. 
            This will be overridden by any classes.*/
    font-family: 'FontAwesome';
    font-weight: 900;
    content: ""; }
  .icon.download::before {
    content: "\f56d"; }
  .icon.close::before {
    content: "\f00d"; }
  .icon.copy::before {
    content: "\f0c5"; }
  .icon.paste::before {
    content: "\f0ea"; }
  .icon.delete::before {
    content: "\f1f8"; }
  .icon.enabled::before {
    content: "\f058";
    color: darkgreen; }
  .icon.enabled.frontEndAction:hover::before {
    content: "\f057";
    color: red; }
  .icon.enabled.inactive::before {
    content: "\f057";
    color: darkred; }
  .icon.enabled.inactive.frontEndAction:hover::before {
    content: "\f058";
    color: green; }
  .icon.inherit::before {
    content: "\f772";
    color: darkgreen; }
  .icon.inherit.frontEndAction:hover::before {
    content: "\f65d";
    color: red; }
  .icon.inherit.inactive::before {
    content: "\f65d";
    color: darkgray; }
  .icon.inherit.inactive.frontEndAction:hover::before {
    content: "\f65e";
    color: green; }
  .icon.extend-profile::before {
    content: "\f08b"; }
  .icon.email-history::before {
    content: "\f1da"; }
  .icon.drilldown::before {
    content: "\f0ab"; }
  .icon.add::before {
    content: "\f067"; }
  .icon.minus::before {
    content: "\f068"; }
  .icon.passwordToggle::before {
    content: "\f070"; }
  .icon.passwordToggle.hidden::before {
    content: "\f06e"; }
  .icon.above::before {
    content: "\f139"; }
  .icon.below::before {
    content: "\f13a"; }
  .icon.edit::before {
    content: "\f044"; }
  .icon.view::before {
    content: "\f06e"; }
  .icon.dragme::before {
    content: "\f338"; }
  .icon.sync::before {
    content: "\f021"; }
  .icon.settings::before {
    content: "\f013"; }
  .icon.favorited::before {
    content: "\f005";
    color: gold; }
  .icon.favorited:hover::before {
    color: darkgoldenrod; }
  .icon.favorited.inactive::before {
    color: lightgray; }
  .icon.favorited.inactive.frontEndAction:hover::before {
    color: orange; }
  .icon.privateToggle::before {
    content: "\f502";
    color: cornflowerblue; }
  .icon.privateToggle.frontEndAction:hover::before {
    color: blue; }
  .icon.privateToggle.inactive::before {
    content: "\f0c0";
    color: lightgray; }
  .icon.privateToggle.inactive.frontEndAction:hover::before {
    color: black; }
  .icon.temporaryToggle::before {
    content: "\f252";
    color: cornflowerblue; }
  .icon.temporaryToggle.frontEndAction:hover::before {
    color: blue; }
  .icon.temporaryToggle.inactive::before {
    content: "\f2f2";
    color: lightgray; }
  .icon.temporaryToggle.inactive.frontEndAction:hover::before {
    color: black; }
  .icon.toggle::before {
    content: "\f054"; }
  .icon.changeAccess::before {
    content: "\f338"; }
  .icon.print::before {
    content: "\f02f"; }

mask {
  display: block;
  width: 0;
  height: 0;
  position: fixed;
  background: transparent; }
  mask.active {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.5s background ease; }

modal.modal-popup {
  display: block;
  height: 0;
  width: 0;
  position: fixed;
  top: calc(20%);
  left: calc(50% - 10em);
  background: #fff;
  border-radius: 0.5em;
  opacity: 0;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  overflow: hidden; }
  modal.modal-popup header {
    color: #fff;
    background: #003451;
    border-radius: 0.5rem 0.5rem 0 0;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    padding: 0.25em 0.5em;
    font-size: 1.5em; }
  modal.modal-popup p, modal.modal-popup > div {
    padding: 0.5em 1em; }
  modal.modal-popup footer {
    text-align: center;
    padding-bottom: 1em; }
    modal.modal-popup footer button:not(.icon) {
      display: inline-block;
      padding: 0.5em 1em; }
  modal.modal-popup.active {
    opacity: 1;
    height: auto;
    width: 20em;
    transition: 0.5s opacity ease; }
  modal.modal-popup fieldgrid {
    margin: 1em; }
  modal.modal-popup#Message {
    overflow-y: auto;
    max-height: calc(70%); }

.users {
  background: #003451;
  padding-top: 5em; }
  .users main {
    width: 30em;
    margin: 2em auto;
    background: #fff;
    border-radius: 2em;
    box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5); }
    .users main.newUser {
      width: auto;
      margin: 2em; }
  .users h1 {
    font-size: 1.5rem;
    padding-top: 2.5em;
    margin: 0;
    background: url(/Content/mckenneys-logo-white.png) no-repeat;
    background-size: 10em auto;
    background-position: top center;
    color: #fff;
    text-align: center;
    left: 0;
    width: 100%; }

.hrefList {
  list-style: none;
  padding: 0; }
  .hrefList li {
    display: inline-block; }
    .hrefList li:not(:last-child)::after {
      content: "  |  "; }

.login > form > div {
  display: grid;
  grid-template-columns: 2em 4em 1fr 1fr; }
  .login > form > div :nth-child(-n+4), .login > form > div :nth-child(6) {
    grid-column-end: span 2; }
  .login > form > div input[type=checkbox] {
    position: relative;
    top: 5px; }
  .login > form > div input[type=text] {
    margin: 2px 0; }

.login .loginBtn {
  width: 75px; }

.login .switchToFullLogin {
  text-align: center; }

.login ul {
  text-align: center;
  margin: 1em 0; }

.login h3 {
  margin-top: 0; }
  .login h3.mckSignIn {
    background: url(/Content/mck-logo-small-transparent.png) no-repeat;
    background-size: 1.5em auto;
    background-position: top left;
    background-color: lightgray;
    margin-top: 0.25em;
    padding: 0.25em 0 0.25em 1.75em;
    border: solid 1px black;
    border-radius: 0.5em; }

.message {
  text-align: center; }

#passwordsMatch::before {
  font-family: 'FontAwesome';
  font-weight: 900;
  content: "";
  color: #0f0;
  margin-right: 0.5em; }

#passwordsNoMatch::before {
  font-family: 'FontAwesome';
  font-weight: 900;
  content: "";
  color: #f00;
  margin-right: 0.5em; }

#passwordsMatch.hidden, #passwordsNoMatch.hidden, #passwordStrength.hidden {
  display: none; }

#passwordStrength {
  border: 1px solid #ccc;
  height: 1em;
  width: 10em;
  position: relative; }
  #passwordStrength span {
    position: absolute;
    width: 100%;
    text-align: center; }
  #passwordStrength::before {
    height: 100%;
    content: " ";
    display: block; }
  #passwordStrength[data-strength-score="0"]::before {
    width: 20%;
    background-color: maroon; }
  #passwordStrength[data-strength-score="1"]::before {
    width: 40%;
    background-color: red; }
  #passwordStrength[data-strength-score="2"]::before {
    width: 60%;
    background-color: orange; }
  #passwordStrength[data-strength-score="3"]::before {
    width: 80%;
    background-color: yellow; }
  #passwordStrength[data-strength-score="4"]::before {
    width: 100%;
    background-color: green; }

.dateStyleToggle {
  align-self: center; }

#homepage aside {
  width: 15em;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 1em;
  padding: 1em;
  margin: 1em; }
  #homepage aside ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    #homepage aside ul li {
      margin: 0;
      padding: 0;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between; }
      #homepage aside ul li span.summary-stat-name {
        font-weight: bold; }
      #homepage aside ul li span.summary-stat-value {
        text-align: right; }

#siteGrid.fixedHeight {
  height: calc(90vh); }
  @media (max-width: 768px) {
    #siteGrid.fixedHeight {
      height: 600px; } }

article > header {
  color: #003451;
  border-bottom: 1px solid #003451;
  align-items: center; }
  article > header.inline-header {
    display: flex;
    flex-flow: row nowrap; }

/**
 *  Rules for the icon block setup first used on the admin page (hence the rule name) but certainly useable elsewhere.
 */
.adminActions {
  /*
     * This sets up the wraping grid of icons.
     */
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  /*
     * These are the rules for the icon itself.
     */
  /*
     * Icon images use two font glyphs. The large one in the background is attached to the ::before psuedo element
     * while the foreground glyph uses the ::after psuedo element. 
     */ }
  .adminActions a {
    position: relative;
    display: inline-block;
    font-size: 0.75em;
    width: 6em;
    text-align: center;
    margin: .25em;
    border-color: #003451;
    color: #003451;
    padding-top: 6em; }
    .adminActions a:hover {
      text-decoration: none;
      border-color: #007ac0;
      color: #007ac0; }
    .adminActions a::before, .adminActions a::after {
      font-family: 'FontAwesome';
      font-weight: 900;
      font-size: 1.5em;
      position: absolute; }
    .adminActions a::before {
      display: block;
      font-size: 4em;
      height: 1.5em;
      width: 1.5em;
      border: 1px solid black;
      border-color: inherit;
      border-radius: 0.25em;
      top: 0;
      left: 0; }
    .adminActions a::after {
      text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
      right: 0.1em;
      top: 1.5em;
      font-size: 2em; }
  .adminActions .building::before {
    content: "\f1ad"; }
  .adminActions .building.add::after {
    content: "\f067"; }
  .adminActions .building.edit::after {
    content: "\f304"; }
  .adminActions .building.delete::after {
    content: "\f068"; }
  .adminActions .database::before {
    content: "\f1c0"; }
  .adminActions .database.transfer::after {
    content: "\f362"; }
  .adminActions .database.usage::after {
    content: "\f013"; }
  .adminActions .database.archive::after {
    content: "\f02d"; }
  .adminActions .database.throttle::after {
    content: "\f3fd"; }
  .adminActions .email::before {
    content: "\f0e0"; }
  .adminActions .email.config::after {
    content: "\f013"; }
  .adminActions .email.creds::after {
    content: "\f007"; }
  .adminActions .map::before {
    content: "\f279"; }
  .adminActions .map.error::after {
    content: "\f188"; }
  .adminActions .map.service::after {
    content: "\f021"; }
  .adminActions .option::before {
    content: "\f13a"; }
  .adminActions .option.config::after {
    content: "\f013"; }
  .adminActions .user::before {
    content: "\f007"; }
  .adminActions .user.add::after {
    content: "\f067"; }
  .adminActions .user.list::after {
    content: "\f2b9"; }
  .adminActions .email_report::before {
    content: "\f658"; }
  .adminActions .email_report.timed::after {
    content: "\f017"; }

.buildingMapList {
  width: 42em; }
  .buildingMapList ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc; }
  .buildingMapList header, .buildingMapList footer, .buildingMapList li {
    display: grid; }
  .buildingMapList header {
    padding-left: 5em;
    grid-template-columns: 18em 8em 5em 5em;
    background: #007ac0;
    color: #fff; }
    .buildingMapList header :nth-child(2), .buildingMapList header :nth-child(3), .buildingMapList header :nth-child(4) {
      text-align: center; }
  .buildingMapList li {
    /*width: 45em;*/
    /*grid-template-columns: 3em 2em 2em 2em 2em 14em 5em 5em 3em;*/
    grid-template-columns: 3em 2em 18em 8em 5em 5em;
    padding: 0.25em 0em; }
    .buildingMapList li:nth-child(even) {
      background: #eee; }
    .buildingMapList li.selected {
      background-color: lightblue; }
    .buildingMapList li :nth-child(2) {
      margin-top: 0.5em; }
    .buildingMapList li :nth-child(4), .buildingMapList li :nth-child(5), .buildingMapList li :nth-child(6) {
      text-align: center; }
  .buildingMapList .dragme {
    cursor: grab; }
  .buildingMapList .dragInProgress .dragme {
    cursor: grabbing; }
  .buildingMapList .dragInProgress {
    cursor: grabbing; }
  .buildingMapList footer {
    padding-left: 23em;
    grid-template-columns: 8em 5em 5em;
    background: #003451;
    color: #fff;
    margin-top: 0; }
    .buildingMapList footer :first-child {
      text-align: center; }
    .buildingMapList footer :nth-child(2), .buildingMapList footer :nth-child(3), .buildingMapList footer :nth-child(6) {
      text-align: center; }

#MatchedInfoContent > #new-maps textarea {
  width: 100%;
  box-sizing: border-box; }

#MatchedInfoContent > #new-maps #rawData {
  height: 16em; }

#MatchedInfoContent > #new-maps #dataSample {
  height: 4em; }

#ProfileTableContents .tab-pane {
  max-height: 80vh; }

.analysis-grid {
  height: calc(90vh);
  width: 100%; }

.ag-cell.null {
  background: #003451; }

.ag-row:nth-child(even) {
  background: #f9f9f9; }

.ag-theme-balham .ag-row:nth-child(even).ag-row-selected {
  background: #b1def9; }

.ag-header-cell {
  /*Don't apply the primary and background color for floating filters; otherwise, text may not show up, and looks weird*/ }
  .ag-header-cell:not(.ag-floating-filter) {
    color: #fff;
    background: #007ac0;
    /*Change the background color used when hovering. SASS interpolation used since setting is not perceived as a color.*/
    --ag-header-cell-hover-background-color: #009af3; }
  .ag-header-cell .ag-icon-menu:before {
    color: #fff;
    background: #007ac0; }

.ag-pinned-left-cols-container .ag-cell {
  background: #fdd; }

.ag-pinned-left-cols-container .ag-row:nth-child(even) .ag-cell {
  background: #ffd9d9; }

#ruleGrid {
  width: 100%;
  overflow: visible; }
  #ruleGrid .ag-root-wrapper {
    overflow: visible; }
  #ruleGrid .problem-formula {
    background-color: lightcoral; }
  #ruleGrid .unused-formula:not(.problem-formula) {
    background-color: lightgray; }
  #ruleGrid textarea + .CodeMirror {
    height: 10em;
    resize: both;
    margin: 0; }
  #ruleGrid .CodeMirror-scroll {
    margin-right: 0; }
  #ruleGrid .ruleHints {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 20em;
    overflow: auto; }
    #ruleGrid .ruleHints:empty {
      display: none; }
    #ruleGrid .ruleHints h4 {
      font-size: 1.25rem;
      margin: 0; }
    #ruleGrid .ruleHints h5 {
      font-size: 1rem; }
    #ruleGrid .ruleHints > li {
      padding: 0.5em; }
      #ruleGrid .ruleHints > li:nth-child(even) {
        background: #f9f9f9; }
      #ruleGrid .ruleHints > li div {
        border-top: 1px solid #ccc;
        display: none; }
      #ruleGrid .ruleHints > li.active div, #ruleGrid .ruleHints > li:first-child:last-child div {
        display: block; }
      #ruleGrid .ruleHints > li.highlight {
        background: #ff9; }
    #ruleGrid .ruleHints p {
      padding: 0;
      margin: 0; }

#debugging_table {
  height: 90vh; }

.CodeMirror-matchingbracket {
  font-weight: bold;
  color: green;
  background: lime; }

.CodeMirror-nonmatchingbracket {
  font-weight: bold;
  color: red;
  background: pink; }

.ag-row .ag-cell:not(.null).problem-cell {
  background-color: lightcoral; }
  .ag-row .ag-cell:not(.null).problem-cell.analysisOpen {
    background: #003451;
    color: #fff; }

.ag-row .ag-cell:not(.null).benefit-cell {
  background-color: lightgreen; }

.ag-row .ag-cell:not(.null).not-applicable-cell {
  background-color: lightgray; }

div.ag-theme-balham.fixedHeight {
  height: calc(90vh); }
  @media (max-width: 768px) {
    div.ag-theme-balham.fixedHeight {
      height: 600px; } }

div.ag-theme-balham.flexibleHeight {
  min-height: 20vh; }

#analysisGrid {
  /*note that when shows a few number of rows, the tool tips don't show fully. Thus, set a minimum height, in case there are a few number of rows*/ }
  #analysisGrid .ag-center-cols-clipper {
    min-height: 30em !important; }
  #analysisGrid .ag-header-cell-label {
    flex-direction: row; }
  #analysisGrid .ag-center-cols-container {
    min-height: 30em !important; }
  #analysisGrid .ag-row .ag-cell.analysisOpen {
    background: #003451;
    color: #fff; }
  #analysisGrid .detail {
    padding: 1em;
    background: #fff; }
    #analysisGrid .detail h3 {
      margin: 0 0 1em 0;
      border-bottom: 1px solid black;
      font-size: 2em; }
    #analysisGrid .detail > button {
      float: right; }
    #analysisGrid .detail .noteGrid {
      height: 150px; }
    #analysisGrid .detail form > label {
      display: block; }
    #analysisGrid .detail form textarea {
      resize: both;
      width: 50%; }
  #analysisGrid .analysis.detail {
    max-height: 1000px;
    overflow: auto; }
    #analysisGrid .analysis.detail ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 1.5em; }
      @media (max-width: 1023px) {
        #analysisGrid .analysis.detail ul {
          display: block; }
          #analysisGrid .analysis.detail ul li {
            padding-top: 1em; } }
    #analysisGrid .analysis.detail h3 {
      margin: 0 0 0.5em 0; }
    #analysisGrid .analysis.detail fieldset {
      margin: 2em 0 0 0; }
    #analysisGrid .analysis.detail div.loader {
      max-height: 200px; }

.runtimeAnalysis {
  position: absolute;
  min-height: 70px;
  min-width: 150px;
  max-width: 400px;
  border: 1px solid cornflowerblue;
  pointer-events: none;
  transition: opacity 0.25s;
  background-color: white;
  /*border: 1px solid transparent;*/
  border-radius: 8px;
  /*p:first-of-type {
        font-weight: bold;
    }*/ }
  .runtimeAnalysis.ag-tooltip-hiding {
    opacity: 0; }
  .runtimeAnalysis .panel-heading {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #333;
    background-color: #f5f5f5; }
    .runtimeAnalysis .panel-heading h4 {
      margin-top: 0; }
  .runtimeAnalysis .panel-body {
    padding: 10px; }
  .runtimeAnalysis div.runTypeBreakdown {
    width: 100%;
    height: 25px;
    border: 1px solid black; }
    .runtimeAnalysis div.runTypeBreakdown span.block {
      height: 100%;
      font-size: .75em;
      float: left; }
      .runtimeAnalysis div.runTypeBreakdown span.block.flagged {
        background-color: lightcoral; }
      .runtimeAnalysis div.runTypeBreakdown span.block.not-applicable {
        background-color: lightgray; }
      .runtimeAnalysis div.runTypeBreakdown span.block.regular {
        background-color: ghostwhite; }
  .runtimeAnalysis p {
    margin: 5px; }
  .runtimeAnalysis ul li.unimportant {
    color: silver; }
  .runtimeAnalysis ul li.important {
    font-weight: bold; }

.accordion {
  /*from https://www.w3schools.com/howto/howto_js_collapsible.asp*/
  background-color: #fff;
  width: 40%;
  text-align: left; }

button.accordion:after {
  content: '\25BC';
  /*'\002B' is a +, '\25BC' is a down arrow */
  float: right;
  margin-left: 5px; }

button.accordion[aria-expanded="true"]:after {
  content: "\25B2";
  /*'\2212' is a -, '\25B2' is an up arrow */ }

.collapse {
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  border: 1px solid transparent;
  /*is converted to a gray color in the javascript code below */
  border-color: lightgray;
  /*    transition: max-height 0.35s, border-color 0.35s;*/ }
  .collapse.show {
    overflow: auto;
    border: 1px solid;
    /*is converted to a gray color in the javascript code below */
    border-color: lightgray;
    max-height: 20em; }

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  border: 1px solid;
  border-color: lightgray;
  -webkit-transition-property: height, visibility, border;
  transition-property: height, visibility, border;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease; }

.translations #syncButton {
  margin-left: 0em;
  margin-bottom: 1em;
  border-radius: 0.5em;
  color: #ccc;
  border: 1px solid #ccc; }
  .translations #syncButton::before {
    margin-right: 0.5em; }
  .translations #syncButton:not(:disabled) {
    background: #007ac0;
    color: #fff;
    border: none; }

.translations .nameGrid {
  height: calc(100vh - 5em); }
  .translations .nameGrid .addName input {
    width: calc(100% - 2em);
    margin: 0; }
  .translations .nameGrid .addName button {
    width: 1em;
    margin: 0; }
  .translations .nameGrid select[multiple] {
    height: calc(100% - 7em);
    width: 100%; }
  .translations .nameGrid option:nth-child(even) {
    background: #ededed; }
  .translations .nameGrid option.hidden {
    display: none; }
  .translations .nameGrid > input {
    width: 100%;
    margin: 1em 0 0 0; }

.translations fieldset textarea {
  width: 100%; }

.translations .buttons {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between; }
  .translations .buttons button {
    width: 24%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #ccc;
    border: 1px solid #ccc; }
    .translations .buttons button:not(:disabled) {
      background: #007ac0;
      color: #fff;
      border: none; }

.translations form section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; }
  .translations form section fieldset.selector {
    margin: 1em 0;
    min-width: 28%; }
  .translations form section fieldset.mapperTab {
    margin: 1em 0 0 0;
    min-width: 45%; }
    .translations form section fieldset.mapperTab td {
      padding: 0; }
      .translations form section fieldset.mapperTab td.numberCell {
        width: 3em; }
      .translations form section fieldset.mapperTab td.checkCell {
        width: 3em;
        text-align: center; }
    .translations form section fieldset.mapperTab tr:nth-child(even) input[type=text], .translations form section fieldset.mapperTab tr:nth-child(even) input[type=number] {
      background-color: #eee; }
    .translations form section fieldset.mapperTab input[type=text], .translations form section fieldset.mapperTab input[type=number] {
      width: 100%;
      height: 100%; }
    .translations form section fieldset.mapperTab .example_table td, .translations form section fieldset.mapperTab .example_table th {
      width: 33%;
      padding: 0.25em; }
  .translations form section fieldset.matchedEntries {
    margin: 1em 0;
    min-width: 40%; }

.translations .tall-multiple-selector {
  height: calc(100vh - 15em);
  min-height: 15em; }

.translations .medium-multiple-selector {
  height: calc(50vh - 15em);
  min-height: 15em; }

.translations select.bulk_value_selector {
  width: 400px; }

#MatchGrid {
  height: calc(100vh - 15em);
  width: 100%;
  margin-bottom: 1em; }

#AutomaticMatchGrid {
  height: calc(100vh - 15em);
  width: 100%;
  margin-bottom: 1em; }

#BASDevicePointGrid, #FriendlyDevicePointGrid {
  height: calc(100vh - 2em);
  width: 100%;
  margin-bottom: 1em; }

.massAdd.active, .translation.detail.active, .translation.copy_select {
  width: 80vw;
  left: 10vw; }
  .massAdd.active textarea, .translation.detail.active textarea, .translation.copy_select textarea {
    width: 100%;
    height: 10em; }

.translation.detail.active {
  height: calc(100vh - 4em);
  top: 2em; }
  .translation.detail.active > div {
    overflow: auto;
    height: calc(100vh - 12em);
    padding: 1em; }
  .translation.detail.active footer {
    border-top: 1px solid #ccc; }
  .translation.detail.active ul, .translation.detail.active li {
    list-style: none;
    padding: 0; }
  .translation.detail.active li {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    max-width: 40em; }
    .translation.detail.active li span.detail-key {
      max-width: 25em; }
    .translation.detail.active li span.detail-value {
      max-width: 15em; }
  .translation.detail.active div > ul > li {
    grid-template-columns: 10em auto; }
    .translation.detail.active div > ul > li li:nth-child(even) {
      background: rgba(0, 0, 0, 0.05); }
  .translation.detail.active .true {
    font-weight: bold;
    color: green; }
  .translation.detail.active .false {
    font-weight: bold;
    color: red; }

.deviceSelector {
  position: relative;
  background: #eee;
  border: 1px solid #003451;
  min-width: 20em;
  width: 50em; }
  @media (max-width: 768px) {
    .deviceSelector {
      width: 100%; } }
  .deviceSelector > label {
    font-family: 'Oswald', sans-serif;
    font-size: 2em;
    display: block;
    background: #003451;
    color: #fff;
    height: 1.1em;
    line-height: 1em;
    margin: 0; }
  .deviceSelector ul {
    list-style: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff; }
  .deviceSelector li {
    background: #d6d1d2;
    height: 2em; }
    .deviceSelector li:nth-child(even) {
      background: #cac3c5; }
    .deviceSelector li > ul {
      display: none; }
    .deviceSelector li._open {
      height: auto; }
      .deviceSelector li._open > ul {
        display: block; }
      .deviceSelector li._open > div .folderToggle::before {
        content: "\f107"; }
    .deviceSelector li:not(:last-child) {
      border-bottom: 1px solid #fff; }
    .deviceSelector li.hasChecked {
      background: #8dd5ff; }
      .deviceSelector li.hasChecked:nth-child(even) {
        background: #74ccff; }
    .deviceSelector li button {
      height: 1em;
      line-height: 0.9em;
      margin-left: 0.25em;
      width: 1em;
      margin-right: 0.5em; }
      .deviceSelector li button:not(.icon):not(.nav-link) {
        padding: 0; }
      .deviceSelector li button::before {
        font-family: 'FontAwesome';
        font-weight: 900;
        content: ""; }
    .deviceSelector li span {
      margin: 0;
      height: 1em;
      position: relative; }
      .deviceSelector li span label {
        margin-left: 0.5em; }
      .deviceSelector li span input[type="checkbox"].folderCheck {
        opacity: 0%;
        z-index: 3;
        /*So that goes above the checkbox overlay for usability*/ }
        .deviceSelector li span input[type="checkbox"].folderCheck:hover {
          /*if unchecked and hovering over, then color the folder green*/ }
          .deviceSelector li span input[type="checkbox"].folderCheck:hover + .checkbox-overlay::before {
            color: green; }
        .deviceSelector li span input[type="checkbox"].folderCheck:checked {
          /*if checked, then color the checkmark green*/ }
          .deviceSelector li span input[type="checkbox"].folderCheck:checked + .checkbox-overlay::after {
            color: lawngreen; }
          .deviceSelector li span input[type="checkbox"].folderCheck:checked:hover {
            /*if checked and hovering over, then color the folder red*/ }
            .deviceSelector li span input[type="checkbox"].folderCheck:checked:hover + .checkbox-overlay::before {
              color: red; }
        .deviceSelector li span input[type="checkbox"].folderCheck:focus {
          outline: none; }
        .deviceSelector li span input[type="checkbox"].folderCheck + .checkbox-overlay {
          opacity: 100%;
          left: -22px;
          /* so will be directly behind the checkbox*/ }
          .deviceSelector li span input[type="checkbox"].folderCheck + .checkbox-overlay::before {
            /*Folder for the checkbox overlay*/
            font-family: 'FontAwesome';
            font-weight: 900;
            content: "";
            color: darkslategray;
            font-size: 1.2em;
            z-index: 1; }
          .deviceSelector li span input[type="checkbox"].folderCheck + .checkbox-overlay::after {
            /*check marks for the checkbox overlay*/
            color: white;
            font-family: 'FontAwesome';
            font-weight: 900;
            content: "";
            position: absolute;
            left: 0.5em;
            font-size: 0.6em;
            top: 0.6em;
            z-index: 2; }
    .deviceSelector li span.count {
      font-size: 0.9em;
      float: right;
      margin-right: 1em;
      top: 0.25em; }
  .deviceSelector .editView > ul {
    padding-left: 0;
    border: 1px solid #000;
    border-bottom: 0;
    overflow: auto;
    max-height: 50vh;
    resize: vertical;
    clear: both;
    margin-bottom: 0;
    /*Provides the bounding height for the tree so that doesn't become too large*/
    max-height: 90vh; }
    @media (max-width: 768px) {
      .deviceSelector .editView > ul {
        max-height: 50vh; } }
  .deviceSelector button {
    background: none;
    position: relative;
    height: 1.5em;
    font-size: 1.5em;
    font-size: 1.3em;
    color: #fff;
    text-shadow: -1px -1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, 1px 1px 0 #666; }
    .deviceSelector button::before {
      font-family: 'FontAwesome';
      font-weight: 900;
      content: ""; }
  .deviceSelector input.allToggle {
    display: inline-block; }
  .deviceSelector input[type=checkbox] {
    position: relative;
    top: 2px;
    -webkit-appearance: none;
    border: 1px solid #999;
    height: 1em;
    width: 1em;
    position: relative; }
    .deviceSelector input[type=checkbox]:checked::before {
      position: absolute;
      top: -0.3em;
      left: 0;
      color: #fff;
      font-family: 'FontAwesome';
      font-weight: 900;
      content: "";
      text-shadow: -1px -1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, 1px 1px 0 #666; }
    .deviceSelector input[type=checkbox]:focus {
      outline: none; }
    .deviceSelector input[type=checkbox].device {
      background: #9f9; }
  .deviceSelector .button-set {
    position: absolute;
    top: 0;
    right: 0; }
    .deviceSelector .button-set button {
      line-height: 0.9em;
      width: 1.6em;
      padding: 0; }
    .deviceSelector .button-set .expandAll::before {
      content: "\f31e"; }
    .deviceSelector .button-set .collapseAll::before {
      content: "\f78c"; }
    .deviceSelector .button-set .resetButton::before {
      content: "\f2ea"; }
    .deviceSelector .button-set .clearButton::before {
      content: "\f00d"; }
    .deviceSelector .button-set .allCheck {
      position: relative; }
      .deviceSelector .button-set .allCheck.uncheck::before {
        content: "\f0c8"; }
      .deviceSelector .button-set .allCheck.check::before {
        content: "\f14a"; }
  .deviceSelector .totalLine {
    font-size: 0.9em;
    text-align: right;
    margin-right: 1em; }
  .deviceSelector .totalLabel {
    font-weight: bold;
    margin-right: 1em; }
  .deviceSelector .searchControl {
    border-top: 1px solid #999;
    background: #fefefe;
    width: 100%;
    height: 2em;
    line-height: 2em;
    padding: 0 0.5em; }
    .deviceSelector .searchControl input {
      border: none;
      width: calc(100% - 2em);
      background: none;
      margin: 0; }
      .deviceSelector .searchControl input:focus {
        outline: none; }
    .deviceSelector .searchControl button {
      visibility: hidden;
      position: absolute; }
      .deviceSelector .searchControl button.show {
        visibility: visible;
        height: 1em;
        width: 1em;
        color: #999;
        text-shadow: none;
        background: none; }
        .deviceSelector .searchControl button.show::before {
          content: "\f00d"; }
  .deviceSelector .groupToggle {
    color: #fff;
    text-shadow: none;
    height: 0.75em;
    padding: 0;
    font-size: 1.2em;
    margin-right: 0.5em;
    width: 1.1em;
    text-indent: -0.31em;
    height: 0.9em; }
  .deviceSelector .editView {
    display: none; }
  .deviceSelector .summaryView {
    padding: 1em; }
  .deviceSelector._open .groupToggle::before {
    content: "\f107"; }
  .deviceSelector._open .editView {
    display: block; }

.treeSelectors {
  margin-top: 0.5em; }
  @media (min-width: 768px) {
    .treeSelectors {
      display: flex;
      flex-flow: row nowrap;
      justify-content: left;
      grid-gap: 1em; } }

/*
    As of 10/6/2022, there is a conflict between the bootstrap class name modal-dialog and the chart editor dialog
    The following items are overridden on the dialog to make it appear prettier as a temporary solution

*/
.google-visualization-charteditor-dialog {
  height: auto !important;
  width: auto !important; }
  .google-visualization-charteditor-dialog.modal-dialog {
    max-width: none !important;
    margin: 0 !important;
    pointer-events: auto !important; }
  .google-visualization-charteditor-dialog .goog-flat-menu-button {
    height: auto !important; }

.historical-charts-editor #history_visuals_table {
  width: 100%; }
  .historical-charts-editor #history_visuals_table.for-printing {
    width: auto; }
    .historical-charts-editor #history_visuals_table.for-printing tbody {
      width: auto; }
      .historical-charts-editor #history_visuals_table.for-printing tbody tr {
        width: auto; }
      .historical-charts-editor #history_visuals_table.for-printing tbody td {
        width: 1100px;
        height: 400px; }
  .historical-charts-editor #history_visuals_table tbody {
    width: 100%; }
    @media print {
      .historical-charts-editor #history_visuals_table tbody tr {
        break-inside: avoid; } }
    .historical-charts-editor #history_visuals_table tbody tr {
      width: 100%; }
    .historical-charts-editor #history_visuals_table tbody tr:not(:last-child) {
      border-bottom: 1px solid lightgray; }
    .historical-charts-editor #history_visuals_table tbody td {
      width: calc(max(600px, 100vw));
      height: calc(max(400px, 50vh)); }

div.ag-root-wrapper div.ag-filter-body div.ag-input-wrapper:before {
  display: none !important; }

div.ag-root-wrapper div.ag-watermark {
  visibility: hidden !important; }