/*
   Copyright (c) 2005-2021, Experlogix, LLC

   Core stylesheet for the Experlogix CPQ website
   Defines all base styles - to be overridden in each CSS skin as appropriate.

   All colors specified herein are purely for illustrative purposes to identify
   usage and placement.
*/

/* any scrollable element should inherit these scrollbar settings */
*[scrollable] {
   overflow: auto !important;
   -webkit-overflow-scrolling: touch;
}

/* style used to facilitate unit conversions */
#dpi {
   height: 1in;
   width: 1in;
   position: absolute;
   left: -100%;
   top: -100%;
}

/* style to render things off-screen */
.invis {
   position: absolute;
   left: -100%;
   top: -100%;
   display: none;
   z-index: -99999;
}

.xOB div.xComboBox,
.xTb div.xComboBox,
#expSelOptions div.xComboBox {
   background-color: White;
}

div.xComboBox[sizeToParent] > div.xComboEdit {
   width: calc(100% - 15px);
}

.xCore {
   font-family: Tahoma, Arial, sans-serif;
   font-weight: normal;
   cursor: default;
   background-color: white;
}


/* container for all things configurator (i.e. the configurator surface, diagnostics panels, etc.) */
.xCfgRoot,
/* container for the parent of the configurator surface and action panels. */
.xCfgInner,
/* container for the configurator surface, quick view, etc. */
.xCfg {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   font-family: Tahoma, Arial, sans-serif;
   font-weight: normal;
   cursor: default;
}

.xCfg > .xBody {
      position: absolute;
      top: 25px;
      right: 0;
      bottom: 24px;
      left: 141px;
}

.xMainCfg[nocatbar] > .xBody,
.xChildCfg[nocatbar] > .xBody {
   left: 0;
}

.xCfg > .xMsgBody {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 25px;
      left: 0;
}

.xCfg > .xCompareBody,
.xCfg > .xQVBody {
      position: absolute;
      top: 25px;
      right: 0;
      bottom: 0;
      left: 0;
}

.xCfg > .xERNotice,
.xCfg > .xQVNotice,
.xCfg > .xCompareBody,
.xCfg > .xQVBody {
   background-repeat: no-repeat;
   background-position: right bottom;
}

.xCfg > .xERNotice,
.xCfg > .xQVNotice {
      position: absolute;
      top: 25px;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 8px;
}

.xCfg > .xERNotice {
      top: 0;
      background-image: url(../../../configurator/images/error.png);
}

.xCfg > .xERNotice > .xERTitle,
      .xCfg > .xQVNotice > .xQVTitle {
         font-weight: bold;
         margin-bottom: 5px;
}

.xCfg > .xCompareBody > .xPage > .xNoData {
         text-align: center;
         font-style: italic;
         padding: 30px;
}


/* configurator body for lookup dialog */
.xCfg > .xLookupBody {
      position: absolute;
      top: 25px;
      right: 0;
      bottom: 47px;
      left: 0;
}

.xCfg > .xLookupPreview {
      position: absolute;
      top: 25px;
      right: 0;
      bottom: 47px;
      display: none; /* defaults to hidden in the page */
      font-size: 11px;
      cursor: default;
   width: 175px;
}

.xCfg > .xLookupPreview > span {
         display: block;
         padding: 3px 4px;
         font-weight: bold;
         border-bottom: solid 1px;
}

.xCfg[popout] > .xBody {
   left: 0;
}

div.infoBar {
   margin: 0;
   font-family: Segoe UI, Tahoma, Arial, sans-serif;
   padding: 5px 10px;
   border-bottom: 1px solid saddlebrown;
   background: cornsilk;
   color: SaddleBrown;
   font-size: 15px;
   background-image: url(iconInformation.png);
   background-repeat: no-repeat;
   background-position: 7px 7px;
}

div.infoBar span {
   margin-left: 20px;
   display: block;
}

#expSelOptions {
   padding: 2px;
   position: absolute;
   left: 0;
   top: 20px;
   right: 0;
   bottom: 0;
}

#expSelOptions > div {
      vertical-align: middle;
      border-bottom: solid 1px #e5e9ff;
      padding-bottom: 1px;
      margin-right: 3px;
      margin-bottom: 3px;
      clear: both;
}

#expSelOptions > div > img {
         float: left;
         padding-top: 2px;
         margin-right: 2px;
         cursor: pointer;
}

#expSelOptions > div > span {
         padding-top: 2px;
         display: block;
         min-height: 16px;
   /*height:16px;	 allows for proper wrapping around the image (which is 16 pixels tall) */
}

#expSelOptions > div > div.props {
         text-align: right;
}

#expSelOptions > div > div.props > div {
            height: 19px;
            padding-bottom: 1px;
}

#expSelOptions > div > div.props > div input {
   float: right;
   height: 15px;
   width: 40px;
   font-size: 11px;
   /*reset padding and margin*/
               padding: 2px 0 0 2px;
               margin: 0;
   border: 1px solid #dbdfe3;
   border-top: 1px solid #aeaeae;
   vertical-align: top;
}

/* property grid label */
#expSelOptions > div > div.props > div > span {
               display: inline-block;
               float: right;
}

/* property grid input control */
#expSelOptions > div > div.props > div > input[type="text"] {
               font-family: Tahoma, Arial, sans-serif;
               width: 50px;
               float: right;
}

#expSelOptions > div > div.props > div > div.xComboBox {
               text-align: left;
   /* undo the left-alignment enforced by the combobox */
               float: right;
}


/* web uploader dialog */
.xCfg > .xWebUploaderBody {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 25px;
   left: 0;
}

div.xWuTopSection {
   padding: 20px 20px 10px;
   position: relative;
}

div.xWuSection,
div.xConfigImporterSection {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;  /* this will be repositioned via script at runtime */
   bottom: 0;
}

div.xWuSection table {
   border-collapse: collapse;
}

div.xWuSection table tr > th {
/* this should match table.xCatGrid tr > th */
   height: 22px;
   padding: 0 4px;
   font-weight: normal;
   text-align: left;
   border-bottom: solid 1px;
   overflow: hidden;
   text-overflow: ellipsis;
}

div.xWuTopSection #uploadButtonBar {
   padding: 5px 0;
}

div.xWuTopSection #infoIcon {
   position: relative;
   top: 3px;
   padding: 0 1px;
}

div.xWuTopSection #explanation {
   padding: 3px;
}

#selectSpreadsheet > input[type="file"] {
   width: 600px;
}

#selectSpreadsheet > input[type="submit"] {
   margin-left: 2px;
   margin-right: 2px;
   width: 75px;
}

#selectSpreadsheet #loadingLabel {
   font-size: 12px;
   font-style: italic;
   padding-left: 2px;
}

div.xWuSection #summaryTable td {
   vertical-align: middle;
}

div.xWuSection table th {
   padding: 3px 16px 3px 4px;
}

div.xWuSection table tr:hover > td {
   background-color: #f6fbc7;
}

div.xWuSection #resultsTable td,
div.xWuSection #messagesTable td {
   padding: 3px 6px 3px 4px;
   border-bottom: solid 1px #efefef;
}

   div.xWuSection table td[dt="N"] {
      text-align: right;
   }

   div.xWuSection #resultsTable td[dt="B"] {
      text-align: center;
   }

div.xWuSection #resultsTable th.xOiInfo {
   background-color: #add8e6;
}

div.xWuSection #resultsTable td.xOiInfo {
   background-color: #add8e6;
   /*border-color: #add8e6;*/
}

div.xWuSection #resultsTable td.xOiDefVal {
   background-color: #bffbbf;
   /*border-color: #bffbbf;*/
}

div.xWuSection #resultsTable th.xOiError {
   background-color: #ffc3c0;
}

div.xWuSection #resultsTable td.xOiError {
   background-color: #ffc3c0;
}

   div.xWuSection #resultsTable tr:hover > td.xOiInfo {
      background-color: #cde5d2;
   }

   div.xWuSection #resultsTable tr:hover > td.xOiDefVal {
      background-color: #dafbc3;
   }

   div.xWuSection #resultsTable tr:hover > td.xOiError {
      background-color: #ffe3c7;
   }

div.xWuSection #resultsTable th[hl="1"] {
   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 2px;
   padding-right: 3px;
   border: 2px solid gold;
}

div.xWuSection #resultsTable td[hl="1"] {
   padding: 1px;
   border: 2px solid gold;
}

div.xWuSection #resultsTable td[hl="1"] {
   background-color: #f6fbc7;
}
   /* here for consistency, but this case currently never occurs */
   div.xWuSection #resultsTable th[hl="1"].xOiInfo,
   div.xWuSection #resultsTable td[hl="1"].xOiInfo {
      background-color: #cde5d2;
   }

   div.xWuSection #resultsTable td[hl="1"].xOiDefVal {
      background-color: #dafbc3;
   }

   div.xWuSection #resultsTable th[hl="1"].xOiError,
   div.xWuSection #resultsTable td[hl="1"].xOiError {
      background-color: #ffe3c7;
   }

.xCfg > .xCbFilter {
   position: absolute;
   left: 0;
   width: 141px;
   top: 25px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

.xCfg > .xCbFilter > input {
   margin: 1px;
   font-size: 13px;
   padding-left: 3px;
   padding-top: 2px;
   border-style: none;
   color: #555555;
   width: 134px;
   background-color: white;
}

.xCfg > .xCbFilter > input:focus {
   outline-style: none;
}

.xCfg > .xCbFilter > input::-webkit-input-placeholder {
   color: #eaeaea;
   font-style: italic;
}
.xCfg > .xCbFilter > input::-moz-placeholder {
   color: #eaeaea;
   font-style: italic;
}
.xCfg > .xCbFilter > input:-ms-input-placeholder {
   color: #eaeaea;
   font-style: italic;
}
.xCfg > .xCbFilter > input:-moz-placeholder {
   color: #eaeaea;
   font-style: italic;
}
.xCfg > .xCbFilter > input:placeholder-shown {
   color: #eaeaea;
   font-style: italic;
}

.xCfg > .xCbFilter > .xCbFilterResults {
   margin-top: 1px;
   margin-bottom: 1px;
   font-size: 11px;
   color: black;
   background-color: cornsilk;
   border: burlywood 1px solid;
   font-weight: normal;
   padding-top: 2px;
   padding-bottom: 2px;
   text-align: center;
}

.xCfg > .xCbFilter + .xCb {
   top: 45px;
}

.xCfg > .xCbFilter[withResults] + .xCb {
   top: 66px;
}


/* configurator category bar */
.xCfg > .xCb {
   position: absolute;
   top: 25px;
   left: 0;
   bottom: 24px;
   width: 140px;
   padding: 0;
   overflow-x: hidden;
   overflow-y: auto;
   border-right: solid 1px;
   background-color: lightgrey;
}

/* configurator toolbar */
.xCfg > .xTb {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   height: 24px;
   border-bottom: solid 1px;
   background-color: gainsboro;
}

.xCfg > .xTbMask {
   z-index: 99;
   position: absolute;
   visibility: hidden;
   top: 0;
   right: 0;
   left: 0;
   height: 26px;
   opacity: 0;
   transition: visibility .3s, opacity .3s ease-out;
}

   .xCfg > .xTbMask.active {
      background-image: linear-gradient(to right, rgba(220, 220, 220, 0.7), rgba(220, 220, 220, 0.5) 100%);
      opacity: 1;
      visibility: visible;
      transition: opacity .3s ease-in;
      transition-delay: .2s;
   }

.xCfg > .xTbMask.xTbPostback {
   background-image: linear-gradient(to right, rgba(220, 220, 220, 1.0) 75px, rgba(220, 220, 220, 0.9) 350px, rgba(220, 220, 220, 0.5) 100%)
}

.xCfg > .xTbMask.xTbPostback > .content {
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   white-space: nowrap;
}
.xCfg > .xTbMask.xTbPostback > .content > .text {
   position: absolute;
}
.xCfg > .xTbMask.xTbPostback > .content > .spinner {
   position: absolute;
}
.xCfg > .xTbMask.xTbPostback > .content > .spinner:before {
   position: absolute;
   content: "";
   height: 16px;
   width: 16px;
   top: 50%;
   left: 50%;
   border-width: 3px;
   border-style: solid;
   border-color: #2180c0 #ccc #ccc;
   border-radius: 100%;
   animation: rotation .7s infinite linear;
}


/* configurator toolbar for message dialog */
.xCfg > .xMsgTb {
   position: absolute;
   right: 0;
   left: 0;
   bottom: 0;
   height: 24px;
   border-top: solid 1px;
}

/* configurator toolbar for lookup dialog (along the bottom) */
.xCfg > .xLookupTb {
   position: absolute;
   right: 0;
   left: 0;
   bottom: 21px;
   height: 24px;
   border-top: solid 1px;
}

/* configurator statusbar */
.xCfg > .xSb {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   height: 23px;
   background-color: gainsboro;
   white-space: pre;
   overflow: hidden;
   text-align: left;
   border-top: solid 1px;
   z-index: 2;
}

/* container for text on the statusbar */
.xSb .xSbText {
   position: absolute;
   top: 0;
   left: 0;
   margin-top: 5px;
   margin-left: 5px;
   font-weight: normal;
   text-align: left;
   white-space: nowrap;
}

/* version identifier in the status bar */
.xSb > .xSbVer {
/*   position: absolute;
   top: 0;
   right: 0;*/
   margin-top: 5px;
   margin-right: 5px;
   font-weight: normal;
   text-align: right;
   white-space: nowrap;
   display: block;
   float: right;
}

/* timezone identifier in the status bar */
.xSb > .xSbTz {
   margin-top: 5px;
   margin-right: 15px;
   font-weight: normal;
   text-align: right;
   white-space: nowrap;
   display: block;
   float: right;
}

/* branding logo on toolbar */
.xTb > .xTbBranding {
   float: right;
   padding: 0;
   z-index: 0;
}

.xTb > .xTbBranding img {
   padding: 0;
}

.xTb > .xTbText {
   float: right;
   padding-top: 5px;
   padding-right: 3px;
   padding-bottom: 4px;
   white-space: nowrap;
   z-index: 0;
}

/* container for buttons within the toolbar */
.xTb > .xTbBtns {
   position: absolute;
   left: 1px;
   right: 1px;
   top: 1px;
   bottom: 1px;
   z-index: 1;
   overflow: hidden;
}

.xMsgTb > .xTbBtns,
.xLookupTb > .xTbBtns {
   position: absolute;
   right: 1px;
   top: 1px;
   left: 1px;
   bottom: 1px;
   z-index: 1;
}

.xTb img,
.xMsgTb img,
.xLookupTb img,
.xRgnTb img,
.xRgnTb input {
   border-style: none;
   padding: 2px;
   float: left;
}

.xTbBtns > .xTbLock {
   width: 12px;
   background-image: url(btnLock3.png);
   background-repeat: no-repeat;
   background-size: auto;
   background-position: center;
}

.xTbBtns > .xTbLock:hover {
   background-image: url(btnLock3.png);
   background-repeat: no-repeat;
}

.xTbBtns > .xComboBox {
   padding-top: 1px;
}

.xTbBtns > span.xTbText {
   float: left;
}

.xTbBtns > a,
.xTbBtns > span,
.xTbBtns > div {
   cursor: default;
   float: left;
   text-decoration: none;
   white-space: nowrap;
   padding: 1px;
   margin-left: 1px;
   margin-right: 1px;
   height: 20px;
}

.xMsgTb > .xTbBtns > a,
.xLookupTb > .xTbBtns > a {
   float: right;
}

.xTbBtns > a.xSel,
.xTbBtns > a.xSel:hover {
}

.xTbBtns > a > img {
   height: 16px;
   width: 16px;
}

.xTbBtns > a:link { }
.xTbBtns > a:visited { }
.xTbBtns > a:active { }
.xTbBtns > a:hover {
   border: solid 1px;
   padding: 0;
}

.xTbBtns > a#b6 {
   color: white;
   background-color: red;
}

.xTbBtns > a#b24[err],
.xTbBtns > a#b14[err] {
   color: white;
   background-color: red;
}

.xTbBtns > a#b14 > div {
   height: 20px;
   width: 16px;
   background-repeat: no-repeat;
   background-position: center;
}


.xTb > .xTbBtns > a#b19,  /* draft/lock */
.xTb > .xTbBtns > a#b22,  /* feedback */
.xTb > .xTbBtns > a#b28   /* settings */ {
   float: right;
}

.xTbBtns * span {
   float: left;
   padding: 3px 3px 3px 4px;
}

.xTbBtns > .xTbMsg {
   float: left;
   font-weight: bold;
   padding-left: 5px;
   padding-right: 10px;
   white-space: nowrap;
   color: Crimson;
}

.xCb a {
   cursor: default;
   display: block;
   text-decoration: none;
   padding: 4px;
}

.xCb a.xCbGrpHdr {
   cursor: pointer;
}

.xCb .xCbBtns[filterApplied] {
   display: block !important;
}

.xCb a[filter="incl"] {
   font-weight: normal !important;
   font-style: normal !important;
}

   .xCb a[filter="incl"] > span {
      font-weight: bold;
      color: maroon;
   }

   .xCb a[filter="incl"][curr] {
      background-color: lightsteelblue !important;
      background-image: url('') !important;
      color: black !important;
   }

      .xCb a[filter="incl"][curr] > span {
         color: black;
      }


.xCb a[filter="excl"] {
   display: none;
}

.xCbBtns > a.xCbHid {
   display: none;
}

.xCbBtns > a:link {
}

.xCbBtns > a:visited {
}

.xCbBtns > a:active {
}

.xCbBtns > a:hover {
   border: solid 1px;
   padding: 3px;
}

/* represents the contents of the .xBody */
.xPage {
   position: absolute;
   top: 40px;
   bottom: 0;
   left: 0;
   right: 0;
   overflow: hidden;
}

.xPage[notitle] {
   top: 0;
}

/* allow scrolling in various screens by restoring the xPage positioning to static. */
.xCompareBody > .xPage,
.xLookupBody > .xPage,
.xMsgBody > .xPage,
.xWebUploaderBody > .xPage {
   position: static;
}

.xConfigImporterBody > .xPage {
   top: 0;
   border: none;
}

.xTbBtns > div.xSrcCtl {
   display: inline-block;
   margin-right: 4px;
}

.xTbBtns > div.xSrcCtl > .xSrcLabel {
   padding-right: 7px;
}

.xTbBtns > div.xSrcCtl > .xComboBox {
}


/* the xPageSpc element exists to provide the proper bottom padding.  IE has a peculiar bug where the bottom margin is not respected
   in a scrollable div.  The .xPage style explicitly blanks out the bottom border and it is reapplied here through a spacer DIV. */
.xPageSpc {
   height: 6px;
}

.xPopOutLargeText {
   font-size: 38pt;
   margin-left: 30px;
   margin-top: 30px;
   margin-bottom: 20px;
   font-weight: 300;
}

.xPage .expPageTitle, /* deprecated */
.xTitle {
	font-size: 16px;
   white-space: nowrap;
}

.xPage > .xReadOnly {
   padding: 5px 20px 20px 20px;
}

.siblingPageViewRgn {
   position: absolute;
   top: 35px; /* calculated from the .tab-control for pages + its margin */
   bottom: 0;
   width: 100%;
   overflow-x: hidden;
   overflow-y: auto;
}

.multisplit-panel {
   overflow-x: hidden;
   overflow-y: auto;
}

.xRgn[hide] {
      display: none;
}

.xRgn[msg] {
      padding: 15px;
}

   .xRgn[ghost] {
      filter: alpha(opacity=40);
      opacity: .40;
   }

.xRgn[ghost] .xInner {
         margin: 0 !important;
         height: 75px;
}

.xRgn[ghost] .xInner .col {
            vertical-align: middle;
            text-align: center;
}

.xRgn[ghost] .xInner a {
         color: black;
         text-decoration: none;
         text-transform: uppercase;
}

/* category header */

/* NOTE: This pseudo-class happens to work by coincidence (albeit expectedly) since the body contents is tightly controlled and all elements therein are DIVs. */
/*div.xRgn:first-of-type > .xRgnHdr {*/ /* NOTE: :first-of-type wasn't working with tabbed categories */
div .xRgn.xRgnStart > .xRgnHdr {
   margin-top: 0;
   border-top-style: none;
}

.xRgn .xRgnHdr,
.xRgn .xRgnHdrGL {
   height: 25px;
   padding: 0;
}

.xRgn .xRgnHdr > span,
.xRgn .xRgnHdrGL > span {
         display: inline-block;
         padding: 4px 2px 5px 3px;
}

/* when collapsed, skip the header, but hide all its siblings */
.xRgn[collapsed] .xRgnNav,
.xRgn[collapsed] .xRgnGridHeaderContainer,
.xRgn[collapsed] > table.xInner,
.xRgn[collapsed] > div.xInnerMargin {
   display: none;
}

.xRgnHdrHid {
   display: none;
}

/* used buttons on the category header (such as 'Add Option', Help', etc) */
.xRgnHdr > .xRgnHdrBtns,
.xRgnHdrGL > .xRgnHdrBtns {
   float: right;
   cursor: default;
}

/* hyperlink / button in category header */
.xRgnHdrBtns > a,
.xRgnHdrBtns > a img {
   float: left;
}

.xRgnHdrBtns > a img {
      padding: 5px 4px 4px 4px;
}

.xRgnHdrBtns > a span {
      display: inline-block;
      padding: 6px 3px 5px 0;
}

   .xRgnHdrBtns > a:link {
   }

   .xRgnHdrBtns > a:visited {
   }

   .xRgnHdrBtns > a:hover {
   }

   .xRgnHdrBtns > a:active {
   }

.xRgnHdrBtns > a,
.xRgnHdrBtns a {
   border: solid 1px transparent;
   background-position: center center;
   background-repeat: no-repeat;
   display: inline-block;
   min-width: 22px;
   height: 24px;
}

.xRgnHdrBtns > a:hover,
.xRgnHdrBtns a:hover {
}

.xRgnHdrBtns > a#hs {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEX///+Pn8GPn8FWbaYoPCErAAAABHRSTlMADTN1b08VSgAAADpJREFUeF5FjMEJACAMA/t2D0cq9uck2cV393GU/q1RaB4H4UKEae5Luqp9jJ2YkQCsBCsFJyXewc0BOVEUyXUrrDEAAAAASUVORK5CYII=') /*CatHideShowIcon.png*/;
}

.xRgnHdrBtns > a#hs:hover {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAn1BMVEX////JzNjO0dvh5e+otNFbcqlacajh5u/I0OKtudS6w9vd4ezQ1uXX3OmyvtetuNTI0eLByd/Byd6zvtfW3OnByt/P1ubP1uXByt7d4e2ksc/i5e+otdHX2+rCyt/c4ezh5e/h5e/H0OLd4uy6xNrCyd/a3+zb4OzX2+mzv9eyv9fZ3+ve4+7f5O6tudPY3uvd4u2ntNG5xNrY3erc4eyz/vTvAAAANXRSTlMA29txQ+DgQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NiQ0NDQ3FxQ0NDcXFxQ3FxQ0NxcYjY94AAAACNSURBVHhebc9FEsMwDEDRpLVkdpiKzAz3P1sdddEs8jWjGb2dgp4GnegedgoJlnzshy845z9o1loDaN3oOcH1YC34cptPCS6VATAlQFUagocQcRyvRBvBJ6lnabItijpJCfZKIaoN4kspgl3mHPqOmTsRnKWMJKJft4jgztiTMTbxwwjeo38tBGGnnt+/uIMJte6KhGYAAAAASUVORK5CYII=') /*CatHideShowIconHot.png*/;
}

.xRgnHdrBtns > a#po {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAADFBMVEUAAAD///8AAAAAAADI23cLAAAABHRSTlMAAD1mfarqSQAAAEJJREFUeAFlylEOgEAIA9ER7n9nU9IU1+0X8wLPb4L+bKB2A+wWembQ0PsBVFcApg1pAm4IuMGwbUjrFKgNIDh3wQu5eQE6UdrgsQAAAABJRU5ErkJggg==);
}

.xRgnHdrBtns > a#po:hover {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAADFBMVEUAAAD///8AAAAAAADI23cLAAAAA3RSTlMAAJlzpe8+AAAAQklEQVR4AWXKUQ6AQAwC0el6/zsbStKiy9+8QP0meGINZycgtuC/oYfuCXqfAeg2MM2CGwbcmsEdMF1l6DaA4LsLXrfUATgsQ9iuAAAAAElFTkSuQmCC) /*iconPopOut.png*/;
}

.xRgnHdrBtns > a#pd {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAADFBMVEUAAAD///8AAAAAAADI23cLAAAABHRSTlMAAD1mfarqSQAAAENJREFUeAFtz0EKwDAQQlGj979zG0Q7Dfk7H0wgWEcXwGtw1AYxQNGAbgSyA8ou0HtAdsH3qyCSf9iNN1Lgyyej228flTcBOulsI+wAAAAASUVORK5CYII=);
}

.xRgnHdrBtns > a#pd:hover {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAADFBMVEUAAAD///8AAAAAAADI23cLAAAAA3RSTlMAAJlzpe8+AAAAQ0lEQVR4AW3PQQrAMBBCUaP3v3MbRDsN+TsfTCBYRxfAa3DUBjFA0YBuBLIDyi7Qe0B2wferIJJ/2I03UuDLJ6Pbbx+VNwE66Wwj7AAAAABJRU5ErkJggg==);
}

.xRgnHdrBtns > a#btnPin.pinned {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAACAgICSabkkAAAAAXRSTlMAQObYZgAAABlJREFUCNdjgAPmBwxMCSiI/wcDQwMCgQEAgTgF1aQMq6IAAAAASUVORK5CYII=');
}

.xRgnHdrBtns > a#btnPin.pinned:hover {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABlJREFUCNdjgAPmBwxMCSiI/wcDQwMCgQEAgTgF1aQMq6IAAAAASUVORK5CYII=');
}

.xRgnHdrBtns > a#btnPin {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAACAgICSabkkAAAAAXRSTlMAQObYZgAAABxJREFUCNdjgAMmMGL+wcDEwWDHAWQAEUQQGQAAT88DSqKGKT8AAAAASUVORK5CYII=');
}

.xRgnHdrBtns > a#btnPin:hover {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABxJREFUCNdjgAMmMGL+wcDEwWDHAWQAEUQQGQAAT88DSqKGKT8AAAAASUVORK5CYII=');
}

.xRgnHdrBtns a#am {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAk1BMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACEGrSNAAAAMHRSTlMAAAYICQoLDA0ODxAREhoeICIkJicoKis1Njc6Oz0+RElKS05QWltcXV5fYGRlZoA1fw6IAAAAkklEQVR42kXN2RKCMBBE0cENEBUjooILiksMJh3//+tMwljcl646DzPkS6Ra+I1cRJMmF8B21cQMV3B3BqHxuZwVTNnDTGh/IJWmiANI4ESuCpABOuDo4QCoAFmpZUI0fZp9FoByjXddvWAEf2nBPRji26YAdut23oMvVd3SzQCjqh4T2a/LBuWc2MjDIDb6w9APauQQAXSTXmoAAAAASUVORK5CYII=);
}

.xRgnHdrBtns a#am:hover {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAvVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADTQ/BeAAAAPnRSTlMAAA8TFxkcHh8gISIkJicpKixBS0xRVFVWWV9hY2RpbICEhoiKkZSYm6mrt7m7xMfh4+bn6Orr7O3w+vv8/Q/le6QAAACVSURBVHgBTc1HFoJAEIThxiDmHBCDo2AWwxhAhLr/sWzHfj7/5beook9lfW8SZ3FEuW23D4zaO1tgD+ko4Lzw3KxDpOMvFJw45IGKTlzbgAZWxHmANhABS+LmQGigPomvJaL8OZ01DFAnxs33LkgG8hJAOgkUD0MXmPaCmgBXfUQt4n6QWfhZIgVOGZVYlCUgoiyBv95lJxR3uSO9ugAAAABJRU5ErkJggg==);
}

/*
   TODO
.xRgnHdrBtns a[type='hs'] {
   background-image: url();
}
.xRgnHdrBtns a[type='pd' {
   background-image: url();
}
.xRgnHdrBtns a[type='mw'] {
   background-image: url();
}
.xRgnHdrBtns a[type='ao'] {
   background-image: url();
}

*/

/* category toolbar */
.xRgn .xRgnTb {
   background-color: gainsboro;
   overflow: hidden;
}

.xRgnTb > .xRgnTbCaption {
   white-space: nowrap;
   font-weight: bold;
   color: black;
   float: left;
   padding: 5px 8px 5px 3px;
}

.xRgnTb > .xTbBtns {
   /* use padding rather than relative positioning so the contents don't flow 'outside' the confines of the toolbar (note the parent's overflow:hidden attribute) */
   /* relative positioning works and clips properly in standards mode, but IE7 and IE8 compatibility mode do not clip properly and will occasionally not position the elements properly */
   padding-top: 1px;
   padding-left: 0;
}

.xRgnTb > .xTbBtns img {
      height: 16px;
      width: 16px;
}

.xRgn tr.xSubHdr {
   font-weight: bold;
}

.xRgn tr.xSubHdr > td {
      padding-left: 3px;
      border-bottom: solid 1px;
}

/* navigation bar within category region */
.xRgn .xRgnNav {
   height: 24px;
   line-height: 24px;
   background-color: gainsboro;
   border: solid 1px gainsboro;
   padding-left: 4px;
   overflow: hidden;
}

   .xRgn .xRgnNav > input[type="text"] {
      float: right;
      width: 20px;
      border-style: none;
      background-color: white;
      color: black;
      text-align: center;
      padding: 0 9px;
      height: 24px;
      margin-right: 4px;
   }

      .xRgn .xRgnNav > input[type="text"]:hover {
         border-style: none;
      }

      .xRgn .xRgnNav > input[type="text"]:focus {
         background-color: white;
      }

   .xRgn .xRgnNav > a {
      font-weight: normal;
      margin-right: 4px;
      float: right;
      cursor: default;
      text-decoration: none;
      white-space: nowrap;
      height: 20px;
      border-style: none;
      color: black;
   }

      .xRgn .xRgnNav > a.sel {
         background-color: lightgrey;
      }

      .xRgn .xRgnNav > a:not(.dis):hover {
         background-color: darkgrey;
      }

      .xRgn .xRgnNav > a.imageButton {
         padding: 2px 3px;
      }

      .xRgn .xRgnNav > a.textButton {
         padding: 0 9px 4px 9px;
      }

         .xRgn .xRgnNav > a.imageButton.dis,
         .xRgn .xRgnNav > a.textButton.dis {
            filter: alpha(opacity=25);
            opacity: .25;
         }

      .xRgn .xRgnNav > a > img {
         height: 16px;
         width: 16px;
         border-style: none;
         padding: 2px;
         float: left;
      }

/* contents of the category region - not always a direct child */
.xRgn .xInner {
   width: 100%;
   margin: 0;
   padding: 0;
   border-collapse: collapse;
   table-layout: fixed;
}

.xRgn .xInner .col {
   vertical-align: top;
   padding: 0;
}

.xRgn .xInner .col .xOB div[ct='odl'] {
   display: inline;
   padding-left: 5px;
}

/* begin styles for line item selection screen transforms */
.xRgn a[display='button'],
.xSelectedGL {
   display: inline-block;
   white-space: nowrap;
   padding: 3px 6px;
   vertical-align: middle;
   text-decoration: none;
   height: 16px;
   cursor: pointer;
}

.xRgn a[display='button'][showImage],
.xSelectedGL {
   background-repeat: no-repeat;
   background-position: 3px 3px;
   padding: 3px 6px 3px 22px;
}

.xRgn a[display='button'][noText] {
   padding-left: 16px;
}

.xRgn a[display='image'] {
   display: inline-block;
   padding: 3px;
   text-decoration: none;
   height: 16px;
   width: 16px;
   background-repeat: no-repeat;
   background-position: 3px 3px;
}

/*.xRgn a img {
   border-style: none;
}*/
/* end styles for line item selection screen transforms */

.xL {
   /* removed inline-block to allow the labels to wrap */
   /* display:inline-block; */
}

.xL[emphasis] {
   font-weight: bold;
}

.xHide {
   display: none;
   visibility: hidden;
}

/* Option Block */
.xOB,
.xOBDis,
.xOBErr {
   width: 100%; /* opacity only works with placement or layout specified in IE */
   clear: both;
   overflow: auto;
}

.xOBDis:not([allow]) {
   filter: alpha(opacity=25) !important;
   opacity: .25 !important;
}

.xOBDis[allow] {
   color: #666666;
   color: rgba(102, 102, 102, 0.25);
}

.xOBDis[allow] img {
   filter: alpha(opacity=25) !important;
   opacity: .25 !important;
}

.xIB {
   border-left-color: saddlebrown;
   border-left-style: solid;
   border-left-width: 1px;
   border-right-color: saddlebrown;
   border-right-style: solid;
   border-right-width: 1px;
   padding: 5px 10px;
   background: cornsilk;
   font-size: 15px;
   margin-left: 5px;
   margin-right: 5px;
   color: saddlebrown;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAjVBMVEVKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFKfbFFeq9He7BIfLBEea9LfrFRgrRVhbVWhbVaiLhijrtmkL18ocadudXm7fTo7vXs8ff5+/yBb/+7AAAAHXRSTlMABAkKDDQ1NziIio2Oj5GvssjLztLq6+7w8fP19lGSoNUAAACaSURBVHheXYrJtoIwFAQ7YdQEUNEHBsI8Ov3/53kTNvJqka5TNzAE8pxlZxlgwxGF1lWldSEcEDzRxLqaN+EAEyTt8vksLYlg8BRt0z8efUOiPBy0ZZ63jZCaqcf3e6yNXXGzYXg+Bxvu/8Mf0n1IcdyHCL76DcoHkza8XjZEDOAnkm6aOpoTB+HKkv7QvZQuNsL4kueXODT+BbcRGAPH46PaAAAAAElFTkSuQmCC') /*iconInformation.png*/;
   background-repeat: no-repeat;
   background-position: 7px 7px;
}

.xIB-group {
   width: 100%;
   height: 100%;
   display: block;
}

   /* Selects the first .xIB and any .xIB that follows an .xOB*/
   .xIB-group .xIB:first-of-type {
      margin-top: 5px;
      border-top-color: saddlebrown;
      border-top-style: solid;
      border-top-width: 1px;
   }

   .xIB-group .xIB:not(:last-of-type) {
      padding-bottom: 0;
   }

   .xIB-group .xIB:last-of-type {
      border-bottom-color: saddlebrown;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      margin-bottom: 5px;
   }


.xIB-group:not(:first-of-type) {
   margin-top: 5px;
}

.xIB span {
   display: flex;
   margin-left: 20px;
}

   .xIB span > a:hover, .xIB span > a:active {
      background: palegoldenrod;
      cursor: pointer;
   }

   .xIB span > a > img {
      display: inline-block;
      top: 2px;
      position: relative;
   }

.xIB span .xIBLink {
   margin-left: auto;   /* this will align the link to the right */
}

.xIB[data-message-group="snap"] {
   background-image: url(iconCamera.png);
}

   .xIB[data-message-group="snap"] span {
      display: flex;
      margin-left: 20px;
   }

.xIB[data-message-group="warn"][data-message-state="locked"] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA61pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InV1aWQ6RDI1MEQwREJDNUY5REUxMThFMjg5Rjg3OTZGNkQ3MzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0YwMTA1RUE0ODQ5MTFFMTgzRkRGQTkxNkE2RTlFQ0MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0YwMTA1RTk0ODQ5MTFFMTgzRkRGQTkxNkE2RTlFQ0MiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODc4OTY1Mzk0OTQ4RTExMUIxNUI4QzNGNEU5OUFEQjQiIHN0UmVmOmRvY3VtZW50SUQ9InV1aWQ6RDI1MEQwREJDNUY5REUxMThFMjg5Rjg3OTZGNkQ3MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6tmSStAAABOElEQVR42qSSvU7EMAzH/wk5Cjp0IMQbsLIwMfMOTDwAb8DCA/AQrKzMxwMwMbEwwoREQfRKe2rTXj5xkE6CK4ETtWQpju2fndjMe48+ImKOg7O7RTK7Pd/vxPElk1Fnj37v5OpvQEim4JDAQtW5Dnd2g7sD4egp4jfn1zdTZz/G9O6Azcd4eimXnuf1zRj3F0es84TjQ4HtkcAG3arW4UU6PGQGadrgNW/wPJFICxX/g8EKw1YCbCYcJfWTaI+h8FgVDJxzsAEpY3HAjBIqHU4O0vpP21Inznko7eCDLmzuN0DRGvACmFIROSPbGJTGoVIOBpagjGAuDnh60yhHHusGMNYhrxwmrcX0fYaysmiVpXsbB6SZQlF7rDEHZTxqqiylRt5qyEahMRq1jSxSGE2vPfivfAgwAMGhqnr+EywMAAAAAElFTkSuQmCC') /*iconLock.png*/;
}

   .xIB[data-message-group="warn"][data-message-state="locked"] span {
      display: flex;
      margin-left: 20px;
   }

      .xIB[data-message-group="warn"][data-message-state="locked"] span .xIBLink {
         margin-left: auto; /* this will align the link to the right */
      }

.xIB[data-message-group="warn"][data-message-state="draft"] {
   background-image: url(iconInformation.png);
}

   .xIB[data-message-group="warn"][data-message-state="draft"] span {
      display: flex;
      margin-left: 20px;
   }

      .xIB[data-message-group="warn"][data-message-state="draft"] span .xIBLink {
         margin-left: auto; /* this will align the link to the right */
      }

.xIB[data-message-group="forwarding"]:not([data-message-state]) {
   background-image: url('forward-dashed.svg');
}

.xIB[data-message-group="forwarding"][data-message-state="forward"] {
   background-image: url('forward-solid.svg');
}

.xIB[data-message-group="forwarding"][data-message-state="hold"] {
   background-image: url('pause-solid.svg');
}

.xOBErr {
}

.xOB input[type="checkbox"][hidden],
.xOB input[type="radio"][hidden] {
   display: none;
}

input[type="checkbox"]:focus {
   -webkit-box-shadow: 0 0 1px 1px #4D90FE;
   -moz-box-shadow: 0 0 1px 1px #4D90FE;
   box-shadow: 0 0 1px 1px #4D90FE;
   outline: none;
}

.xSelected {
   border-radius: 7px;
   background: cornsilk;
   border: 1px solid saddlebrown;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJ1BMVEVNcKz///9NcKxNcKxNcKxNcKxNcKxNcKxNcKxNcKxNcKxNcKxNcKzS2z7tAAAADXRSTlMAAAUNEBMfJicuOj1If2nrTAAAAF9JREFUeF49jqEOQFAYhb/LUK9NsDtB0XVJE80TqJou2TyDrmuCrN6nItj509nOOf93SP/D0p1+w2Dje6iW8RNTDeFuyC6ApiWfAZIV1wNEB0UJEDwSshRWXQ+FEFQzXvQtFUHJu/QsAAAAAElFTkSuQmCC') !important /*iconEmptyDot.png*/;
   background-repeat: no-repeat;
   background-position: 3px 2px;
   color: black;
   height: 18px;
   min-width: 68px;
   display: inline-block;
   padding: 2px 6px 0 21px;
   margin: 1px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.xSelected[sel] {
   background: rgb(204, 252, 204);
   border: 1px solid lightgreen;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJ1BMVEVNcKz///9NcKxNcKxNcKxNcKxNcKxNcKxNcKxNcKyZrc+tvdnh5/Ec7um7AAAACXRSTlMAAF2kwO/2+f760HMWAAAAbElEQVR4Xj1OsQ2EMBBzxAIBgUSLxAB01GGD71jhayagYAUkBxaI9CNkgvxSuEDn5iz77mzUL+AxrscCB199yXMSmSlsDo0ESQNaCpkBneZV+EHPO+XEXST+C0Vk/RJlaTmSDHZuDy3CQq3GA00BL10xV5bmAAAAAElFTkSuQmCC') !important /*iconDotCheck.png*/;
   background-repeat: no-repeat;
   background-position: 3px 2px;
}

.xSelected:focus {
   outline-style: none;
   box-shadow: 1px 1px 2px 1px lightgray;
}


/* Option Image */
.xOB img[oi],
.xOBDis img[oi],
.xOBErr img[oi] {
   float: left;
}

.xOB .xCcb {
   float: left;
}


/* Property Grid */
/* all flow grids - category display state */
div.xRgn[locked='prop'] table.xPG,
div.xRgn[locked='prop'] table.xPG input,
div.xRgn[locked='prop'] table.xPG textarea,
div.xRgn[locked='prop'] table.xPG div.xComboBox,
div.xRgn[locked='cat'] table.xPG,
div.xRgn[locked='cat'] table.xPG input,
div.xRgn[locked='cat'] table.xPG textarea,
div.xRgn[locked='cat'] table.xPG div.xComboBox,
/* all flow grids  - property display state */
div.xRgn table.xPG tr[proplocked],
div.xRgn table.xPG tr[proplocked] input,
div.xRgn table.xPG tr[proplocked] textarea,
div.xRgn table.xPG tr[proplocked] div.xComboBox,
/* single option flow grid - option display state */
div.xRgn table.xPG[locked],
div.xRgn table.xPG[locked] input,
div.xRgn table.xPG[locked] textarea,
div.xRgn table.xPG[locked] div.xComboBox {
   color: darkgray !important;
}

/* all category grids - category display state */
div.xRgn[locked='prop'] table.xCatGrid,
div.xRgn[locked='prop'] table.xCatGrid td.xCtl,
div.xRgn[locked='prop'] table.xCatGrid td.xCtl input:not([type=range]),
div.xRgn[locked='prop'] table.xCatGrid td.xCtl > div.xHelper > div.xInputPlaceholder,
div.xRgn[locked='prop'] table.xCatGrid td.xCtl > div,
div.xRgn[locked='prop'] table.xCatGrid td.xStatic,
/* horiz grid - option display state */
div.xRgn table.xCatGrid tr[locked] td.xCtl,
div.xRgn table.xCatGrid tr[locked] td.xCtl input:not([type=range]),
div.xRgn table.xCatGrid tr[locked] td.xCtl > div.xHelper > div.xInputPlaceholder,
div.xRgn table.xCatGrid tr[locked] td.xCtl > div,
div.xRgn table.xCatGrid tr[locked] td.xStatic,
/* horiz grid - property display state */
div.xRgn table.xCatGrid tr[proplocked] td.xCtl,
div.xRgn table.xCatGrid tr[proplocked] td.xCtl input:not([type=range]),
div.xRgn table.xCatGrid tr[proplocked] td.xCtl > div.xHelper > div.xInputPlaceholder,
div.xRgn table.xCatGrid tr[proplocked] td.xCtl > div,
div.xRgn table.xCatGrid tr[proplocked] td.xStatic,
/* vert grid - option display state */
div.xRgn table.xCatGrid tr td[locked].xCtl,
div.xRgn table.xCatGrid tr td[locked].xCtl input:not([type=range]),
div.xRgn table.xCatGrid tr td[locked].xCtl > div,
div.xRgn table.xCatGrid tr td[locked].xStatic,
/* vert grid - property display state */
div.xRgn table.xCatGrid tr td[proplocked].xCtl,
div.xRgn table.xCatGrid tr td[proplocked].xCtl input:not([type=range]),
div.xRgn table.xCatGrid tr td[proplocked].xCtl > div,
div.xRgn table.xCatGrid tr td[proplocked].xStatic {
   background-color: #efefef !important;
   color: darkgray !important;
}

div.xRgn[locked='cat'] table.xCatGrid,
div.xRgn[locked='cat'] table.xCatGrid td.xSys,
div.xRgn[locked='cat'] table.xCatGrid td.xBtn {
   background-color: #efefef !important;
   color: darkgray !important;
}

.xPG[maxgridwidth],
.xPGOuter[maxgridwidth],
.xPG[maxgridwidth] table,
.xPGOuter[maxgridwidth] table {
   width: 100%
}

table.xPGOuter,
fieldset.xPGOuter > table,
table.xPG,
fieldset.xPG > table {
   border-collapse: collapse;
}

/* row, column header style id */
table.xPG td[hdr],
fieldset.xPG > table td[hdr] {
      height: 19px;
      vertical-align: middle;
      padding: 2px 3px;
      font-weight: bold;
}

table.xPGOuter td[title] {
      padding: 2px 3px;
      font-weight: bold;
}

fieldset.xPG {
   display: block;
}

fieldset.xPGOuter legend[title] {
   padding-left: 3px;
   padding-right: 5px;
   font-weight: bold;
}

table.xPG > tbody > tr > td,
fieldset.xPG > table > tbody > tr > td {
   vertical-align: top;
   padding: 3px; /* default padding also referenced in Template Designer and Web Configurator project */
}

table.xPG > tbody > tr > td > table,
fieldset.xPG > table > tbody > tr > td > table {
      border-collapse: collapse;
      text-align: left;
}

/* Child Config */
.xCCfg {
   display: inline;
}

.xCCDropdown {
   display: inline-block;
   border: 1px solid black;
   -moz-border-radius: 2px;
   border-radius: 2px;
   background-color: #f7fbff;
   z-index: 9999;
   position: absolute;
}

.xAMDropdown {
   display: inline-block;
   border: 1px solid #666;
   -moz-border-radius: 2px;
   border-radius: 2px;
   background-color: #f7fbff;
   z-index: 9999;
   position: absolute;
}

.xCCDropdown > .xSep {
   margin: 1px 0;
}

.xCCDropdown a[display='button'],
.xAMDropdown a[display='button']{
   display: block;
}

.xCCfg > a[disabled],
.xCCfg > input[disabled],
.xCCfg > img[disabled],
.xCCDropdown > a[disabled],
.xCCDropdown > input[disabled],
.xCCDropdown > img[disabled],
.xCCDropdown > .xSep[disabled] {
   filter: alpha(opacity=40);
   opacity: .40 !important;
}

.xCCfg > a[hide],
.xCCfg > input[hide],
.xCCfg > img[hide],
.xCCfg > span[hide],
.xCCDropdown > a[hide],
.xCCDropdown > input[hide],
.xCCDropdown > img[hide],
.xCCDropdown > .xSep[hide] {
   display: none;
}

/* Property */
.xP {
   display: inline-block;
   border-style: none;
   border-collapse: collapse;
}

.xP tr {
      height: 25px;
}

.xP td {
      height: 19px;
      border-style: none;
}

.xP td[ct="c"] {
         width: 0;
         white-space: nowrap;
         padding-right: 5px;
}

.xP td[ct="p"] {
         height: 19px;
         width: 100%;
         vertical-align: middle;
         border-collapse: separate;
}

.xP td[ct="cp"] {
         width: 100%;
}

.xP td[ct="cp"] input[type="text"] {
            margin-bottom: -1px;
}

.xP td[max] {
   padding-right: 1px;
}

.xP input[type="checkbox"] {
      height: 13px;
      width: 13px; /* remove 'padding edge' around checkbox */
}

.xP div.xHelper {
   width: 130px;
   z-index: 99;
   white-space: nowrap;
   display: flex;
   flex-direction: row;
}

.xP div.xHelper[helperfixedwidth] {
   width: auto;
}

.xP div.xHelper > input[type="text"] {
   width: 100%;
   margin-right: 0;
}
/*
   div.xHelper[helper='menu']          : special to display a dropdown; not an actual helper type
   div.xHelper[helper='picker']        : default, display picker dialog
   div.xHelper[helper='customdialog']  : displays a user-defined dialog window
   div.xHelper[helper='revert']        : reverts a calculated property to its underlying value
   div.xHelper[helper='reset']         : resets an input property to its default value
*/
.xP div.xHelper > input[type="text"] + div,
.xP div.xHelper > input[type="checkbox"] + div,
.xP div.xHelper > textarea + div,
.xP div.xHelper > div + div {
	width: 13px;
	height: 17px;
	border: solid 1px #bbb;
   display: inline-block;
	cursor: pointer;
	background-repeat: no-repeat;
}

.xP div.xHelper > input + div:hover,
.xP div.xHelper > textarea + div:hover {
	border-color: #36a;
}

/* optional nature of revert helper if the value is not actually overridden */
.xP div.xHelper[helper='revert'] > input[type="text"]:not([overridden]),
.xP div.xHelper[helper='revert'] > input[type="text"][norevert],
.xP div.xHelper[helper='revert'] > textarea:not([overridden]),
.xP div.xHelper[helper='revert'] > textarea[norevert]
{
   border-right-style: solid;
}

.xP div.xHelper[helper='revert'] > textarea {
	width: 100%;
}

.xP div.xHelper[helper='revert'] > input:not([overridden]) + div,
.xP div.xHelper[helper='revert'] > textarea:not([overridden]) + div,
.xP div.xHelper[helper='revert'] > div:not([overridden]) + div{
	display: none;
}

   .xP textarea {
      overflow: auto;
      width: 130px;
      resize: none;
      height: 26px;
   }

      .xP textarea.multiline:not(.wordwrap) {
         white-space: nowrap;
         height: 36px;
      }

.xP div.xHelper > textarea + div {
   height: 24px !important;
}

.xP td[ct="cp"] input[type="checkbox"] {
      margin-bottom: 2px;
}

.xP td[cal] {
      position: absolute; /* only reliable mechanism for properly aligning calendar control in TD cross-browser */
}

.xP td[b] {
      font-weight: bold;
}

.xP .err {
}

.xP input,
.xP textarea {
   font-family:Tahoma, Arial, sans-serif;
   box-sizing: border-box;
   padding-top: 0px; /* this prevents the Chrome browser from adding default padding to inputs and textareas */
   padding-bottom: 0px;
}

.xSep {
   background-color: #999;
   height: 1px;
   width: 100%;
}

a.xPopupOpt {
   height: 70px;
   width: 120px;
   background-image: url(bgPopupOption.png);
   background-position: top left;
   background-repeat: no-repeat;
   border-style: none;
   display: inline-block;
   line-height: 60px;
   text-align: center;
   cursor: default;
}

.xPopupOpt:link {
}

.xPopupOpt:visited {
}

.xPopupOpt:active {
}

.xPopupOpt:hover {
   background-image: url(bgPopupOptionHot.png);
   font-weight: bold;
}

.xLookupTb .xTbText,
.xLookupTb .xTbTextSub {
   float: left;
   display: inline-block;
   font-size: 11px;
   padding-top: 5px;
   padding-right: 5px;
   padding-left: 5px;
}

.xLookupTb > .xTbBtns > a.xSel,
.xLookupTb > .xTbBtns > a.xSel:hover {
   font-weight: bold;
   padding: 0;
   padding-right: 6px;
   padding-left: 7px;
}


.xLookupTb .xTbTextSub {
   font-style: italic;
}

.xLookupTb input {
   font-family: Tahoma, Arial, sans-serif;
   float: right;
   width: 40px;
   font-size: 11px;
   height: 15px;
   text-align: center;
   padding-top: 2px;
}

table.xLookup {
   border-style: none;
   table-layout: fixed;
   width: 100%; /* width is set programmatically in lookup.js as necessary */
   position: absolute;
}

   table.xLookup th.xFilterHdr {
      background-position: center center;
      background-repeat: no-repeat;
   }

   table.xLookup th.xSelBox,
   table.xLookup td.xSelBox {
      padding: 0 !important;
      width: 20px;
      min-width: 20px;
      text-align: center;
      text-overflow: clip;
   }

table.xLookup th.xFilterHdr,
table.xLookup th.xSelectedOptionHeader {
   padding-right: 10px;
   padding-left: 10px;
}

   table.xLookup th {
      text-align: left;
      padding: 1px 10px 1px 2px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
   }

table.xLookup tbody {
   height: 100%;
}

table.xLookup tr {
      cursor: default;
}

table.xLookup tr[isRequired="1"] td {
         font-weight: bold;
}

table.xLookup tr.xHover {
         background-color: #ffffdc;
}

tr.xDisabledRow div.errorReason{
   color: red;
}

table.xLookup tr.xHoverHighlight:hover {
   background-color: #d7ebf9;
}

table.xLookup tr.xHoverSel {
         background-image: url('data:image/gif;base64,R0lGODdhDgAUAPABAP//3PX5/ywAAAAADgAUAAACH0SMp7ad8JySEdJ2X5V57dghHzaKYXBaJbqqXdqyYQEAOw==') /*hoverSel.gif*/;
         background-repeat: repeat-x;
}

table.xLookup tr[allow] td:not(.xSelBox) {
   filter: alpha(opacity=25) !important;
   opacity: .25 !important;
}

table.xLookup tr[show] {
   filter: alpha(opacity=25) !important;
   opacity: .25 !important;
}

table.xLookup td {
   padding: 1px 8px 1px 2px;
   border-bottom: solid 1px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   padding-right: 3px;
}

table.xLookup td.xNoData {
   text-align: left;
   font-style: italic;
}

table.xLookup td.xSelBox {
}

table.xLookup tr.xActiveFilter td {
   padding: 0;
   vertical-align: top;
}

table.xLookup tr.xActiveFilter td.spacer {
}

table.xLookup tr.xActiveFilter td > input {
   font-family: Tahoma, Arial, sans-serif;
   width: 100%;
   border: none 0;
   margin: 1px 2px 0 2px;
   outline-style: none;
}

table.xLookup tr[lastRow='1'] td {
   border-bottom-style: none;
}

table.xLookupQuickBar {
   position: absolute;
   left: 0;
   bottom: 0;
   right: 0;
   height: 20px;
   border-top: solid 1px;
   table-layout: fixed;
   width: 100%; /* IE8 standards mode doesn't automatically display fixed layout tables at 100% width */
}

table.xLookupQuickBar td {
      text-align: center;
      cursor: pointer;
}

table.xLookupQuickBar td.xSel,
table.xLookupQuickBar td.xHover {
         font-weight: bold;
}

.olist .ulist {
   vertical-align: top;
}


/* added to put extra spacing between nested/sub list and the item that holds it. */
.sublist {
   margin-top: 4px;
   margin-bottom: 12px;
}

span.xMsgSugHeader,
span.xMsgSetHeader {
   display: block;
   margin-top: 4px;
   margin-bottom: 4px;
}

span.xMsgId {
   font-weight: normal;
   color: #0072C5;
}
span.xMsgId:after {
   content: ': ';
   color: #0032C5;
}

ul .add {
   list-style-image: none;
   list-style-type: none;
}

ul .del {
   list-style-image: none;
   list-style-type: none;
}

ul .exc {
   list-style-image: none;
   list-style-type: none;
}

ul .req {
   list-style-image: none;
   list-style-type: none;
}

ul .err {
   list-style-image: none;
   list-style-type: none;
}

ul .gen,
ul .set {
   list-style: url('data:image/gif;base64,R0lGODlhCQAOAPACAI6awEdcoSH5BAUAAAIALAIABAAHAAoAAAIQlIJmGOrOFAJNUnhtXZn5AgA7') /*BulletGen.gif*/;
}

ul .dlk {
   list-style: url('data:image/gif;base64,R0lGODlhCgAPAPEDALOA+GIA5////wAAACH5BAUAAAMALAEABAAJAAsAAAIZ3IJoB91hAlgAMmolPql74SHCGAZgeZZdAQA7') /*BulletDlk.gif*/;
}

ul .rem {
   list-style: url('data:image/gif;base64,R0lGODlhCwAPAPEDAMkAAIsAAP///wAAACH5BAUAAAMALAAABAALAAsAAAIhlIdoFiEpGgNuRPquCxju+CTWJ45gpXBbp2Uqg47OUi4FADs=') /*BulletRem.gif*/;
}

ul .sug {
   list-style: url('data:image/gif;base64,R0lGODlhCwAPAPEDAP///yK3ACrfAQAAACH5BAUAAAMALAAABAALAAsAAAIjnIFoOxAP2AkixJOoTQ6KvlHCN1bIY30o55jJ0lpSs87sUgAAOw==') /*BulletSug.gif*/;
}

ul .unk {
   list-style: url('data:image/gif;base64,R0lGODlhCgAPAPEDAN/f3wAAAP///wAAACH5BAUAAAMALAEABgAJAAkAAAIZnIOmIR3bgBssNoEE2BtXfT2VhEGTQiVGAQA7') /*BulletUnk.gif*/;
}

ul .def {
   list-style: url('data:image/gif;base64,R0lGODlhCwAPAPECAPT/P2IA5////wAAACH5BAUAAAIALAAABAALAAsAAAIglAV5phCAIHouvVPfjTbQ5HiiCHaflFUYxaKQqizgUgAAOw==') /*BulletDef.gif*/;
}

ul .par {
   list-style: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAMAAADqIa48AAAADFBMVEV+Fhb///9+FhZ+FhZ0ipnKAAAAA3RSTlMAAIAXzkf+AAAAKUlEQVR42q3GwQ0AMAgDsYPsvzOkUjoBfpn6brtUiEcNrczP8szP9uANMBAAkDRLzvsAAAAASUVORK5CYII=);
}

ul .remDis {
   list-style: url('data:image/gif;base64,R0lGODlhCwAPAPEDAMkAAIsAAP///wAAACH5BAUAAAMALAAABAALAAsAAAIhlIdoFiEpGgNuRPquCxju+CTWJ45gpXBbp2Uqg47OUi4FADs=') /*BulletRem.gif*/;
   color: #666666;
   color: rgba(102, 102, 102, 0.25);
}
ul .sugDis {
   list-style: url('data:image/gif;base64,R0lGODlhCwAPAPEDAP///yK3ACrfAQAAACH5BAUAAAMALAAABAALAAsAAAIjnIFoOxAP2AkixJOoTQ6KvlHCN1bIY30o55jJ0lpSs87sUgAAOw==') /*BulletSug.gif*/;
   color: #666666;
   color: rgba(102, 102, 102, 0.25);
}

ul .addlt {
   list-style: url('data:image/gif;base64,R0lGODlhCwAPAPECACrfASK3AP///wAAACH5BAUAAAIALAAABAALAAsAAAIblBV5ixB8goNGvpiSyxr473GauFhUc0EmlS0FADs=') /*BulletAdd.gif*/;
}

ul .dellt {
   list-style: url('data:image/gif;base64,R0lGODlhCwAPAPMMAP98ff+Qkf8tLf8yMv9AQP9SUv9nZ/98fP99fP+jo/+xsf+2tgAAAAAAAAAAAAAAACH5BAUAAAwALAAABAALAAsAAAQoUAhGK5NiTSvAFMp2HaKQfKR1BUKqjiJHGvGFfEXpXgRaCwPM6yKIAAA7') /*BulletDel.gif*/;
}

ul .exclt {
   list-style: url('data:image/gif;base64,R0lGODlhCwAPAPACAPivr+0sLCH5BAUAAAIALAAABAALAAsAAAIhlINoG+AeGFgCqEYtxEZXNH2hhXkdaJ4CmEXHA1Fr4goFADs=') /*BulletExc.gif*/;
}

ul .reqlt {
   list-style: url('data:image/gif;base64,R0lGODlhCwAPAPMPAP9cXf5cXf5mZ/6DhP6LjP6Qkf8tLf9LS/9TU/9cXP9mZv5mZv5nZ/5xcf57ewAAACH5BAUAAA8ALAAABAALAAsAAAQm8Elppp2mXrz0NkqiZSSYIJVREIPThMhRkgyAfkrgWYaw8z/eJQIAOw==') /*BulletReq.gif*/;
}

ul .errlt {
   list-style: url('data:image/gif;base64,R0lGODlhCAAPAPACAP1oaP8tLSH5BAUAAAIALAMABAAFAAsAAAIPVG6nyxnioJEUAgnCtbAAADs=') /*BulletErr.gif*/;
}

ul .genlt,
ul .setlt {
   list-style: url('data:image/gif;base64,R0lGODlhBwANAPMJAKO175uu7bbE8qi58JKn7LbE88jT9lRUVJqu7f///wAAAAAAAAAAAAAAAAAAAAAAACH5BAUAAAkALAIACAAFAAUAAAQNMJ0pjQCzDDRBIIdERQA7') /*BulletGen_lt.gif*/;
}

ul .dlklt {
   list-style: url('data:image/gif;base64,R0lGODlhBwANAPMKAFRUVHlA7KN88ohW7ryf9ohV749g73lA7Wcn6qN88////wAAAAAAAAAAAAAAAAAAACH5BAUAAAoALAIACAAFAAUAAAQNUIEpSSpTmDNHQIBERQA7') /*BulletDlk_lt.gif*/;
}

ul .unklt {
   list-style: url('data:image/gif;base64,R0lGODlhBwANAPMJALCwsJqamqKiopCPkIKCgpqbmsLCwlRUVI+Qj////wAAAAAAAAAAAAAAAAAAAAAAACH5BAUAAAkALAIACAAFAAUAAAQNMJ0pDSgTCDTDIIdERQA7') /*BulletUnk_lt.gif*/;
}

ul .deflt {
   list-style: url('data:image/gif;base64,R0lGODlhBwANAPMKAHlA7Y9g73lA7IhW7qN88mcn6ryf9ohV76N881RUVP///wAAAAAAAAAAAAAAAAAAACH5BAUAAAoALAIACAAFAAUAAAQNUKUpDTqTBDCHKIlERQA7') /*BulletDef_lt.gif*/;
}

ul .parlt {
   list-style: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAMAAABSF4SHAAAADFBMVEV+Fhb///9+FhZ+FhZ0ipnKAAAAA3RSTlMAAGZepwCzAAAAHUlEQVR4AWNghABKaGZmZgYGIMXExMSMhWYAyQMAFTAAeq1sekIAAAAASUVORK5CYII=);
}

#overlayDlg_back {
   z-index: 99;
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #171717;
   filter: alpha(opacity=80);
   opacity: .8;
}

#overlayDlg {
   z-index: 100;
   border: solid 3px #171717;
}

#overlayDlg > .overlayDlg_title {
      height: 28px;
      cursor: default;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAcCAMAAAD7hXf7AAAAS1BMVEUlQ5Rko+osVbFys+lwset2uOxopeh7u+tgnudamOFVk95tqumAvu03ec02d8k0csU3b8IzacEzZ70yYbsxX7cwW7cuV7E5gNI6fNA2LuHsAAAASUlEQVR4Xr3LtQHAMBAAsbPDzLD/pJnhvoh6MXo0HpVH4VF6DB61R/JCp/XoPHqPx+P1mDxmj8Vj9dg8do/D4/S4PG6P7IXOTz4j2DxeGF0o4AAAAABJRU5ErkJggg==') /*overlayDlgTitlebar.png*/;
      background-repeat: repeat-x;
}

#overlayDlg > .overlayDlg_title > span {
         float: left;
         color: white;
         font-size: 13px;
         font-weight: bold;
         padding-top: 4px;
         padding-left: 4px;
}

#overlayDlg > .overlayDlg_title > img {
         float: right;
         height: 21px;
         width: 21px;
         padding-top: 3px;
         padding-right: 3px;
}

#overlayDlg > .overlayDlg_contentContainer {
      position: absolute;
      top: 28px;
      right: 0;
      bottom: 0;
      left: 0;
}

#overlayDlg_content {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

iframe.err {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

div.errTemplate {
   border: solid 1px silver;
   background-color: White;
   color: Silver;
   text-transform: uppercase;
   padding: 10px;
   font-size: 12px;
   font-family: Tahoma, Verdana, Arial, sans-serif;
}

table.xCompare {
}

table.xCompare td {
      padding: 4px;
}

table.xCompare tr.title > td {
      border-bottom: solid 1px #a2a2a2;
      text-align: center;
}

table.xCompare tr.lastsummary > td {
   border-bottom: solid 1px #a2a2a2;
}

table.xCompare tr > td.label {
   text-align: right;
   font-weight: bold;
}

table.xCompare tr > td.item {
   text-align: center;
}

table.xCompare tr > td.itemNa {
   background-image: url(iconDash.png);
   background-repeat: no-repeat;
   background-position: center;
}

table.xCompare tr.cat > td {
      border-top: solid 1px;
      border-bottom: solid 1px;
      background-color: lightgrey;
}

table.xCompare tr.opt > td {
      min-width: 100px;
}

table.xCompare tr.opt > td.rowHdr {
   background-color: lightgrey;
   min-width: 35px;
}

table.xCompare tr.opt > td.rowHdr[final] {
            border-right: solid 1px;
}

table.xCompare tr.optProp {
      display: none;
}

table.xCompare tr.optPropAlt {
      display: none;
}

table.xCompare tr.optPropMismatch {
      display: none;
}

table.xCompare tr.optPropAltMismatch {
      display: none;
}

table.xCompare tr > td.optPropHdr {
      padding-left: 25px;
}

table.xCompare tr > td.optPropAltHdr {
      padding-left: 25px;
}

table.xCompare tr.optProp > td {
   border-right: solid 1px;
   border-color: #DDDDDD;
}

table.xCompare tr.optPropAlt > td {
      border-right: solid 1px;
      border-color: #DDDDDD;
   background: #DFDFDF;
}

table.xCompare tr.optPropMismatch > td {
      border-right: solid 1px;
      border-color: #DDDDDD;
      color: darkred;
}

table.xCompare tr.optPropAltMismatch > td {
      border-right: solid 1px;
      border-color: #DDDDDD;
   background: #DFDFDF;
      color: darkred;
}

table.xCompare tr.opt > td.rowHdr[expandButton] {
   cursor: pointer;
   color: Blue;
   font-weight: bold;
}

table.xCompare tr.opt > td.empty {
   background-position: center center;
   background-repeat: no-repeat;
}

table.xCompare tr.opt > td.sel {
   text-align: center;
   background-position: center center;
   background-repeat: no-repeat;
}

table.xCompare tr.opt > td.na {
   text-align: center;
}

/* recalculate */
.xRecalcToolbar {
   position: relative;
   top: 0;
}

.xRecalcTbMask {
   z-index: 99;
   position: absolute;
   display: none;
   top: 0;
   right: 0;
   left: 0;
   height: 100%;
   background-color: gainsboro;
   filter: alpha(opacity=50);
   opacity: .50;
}

.xRecalcResult {
   margin: 8px 15px 8px 30px;
   padding-left: 20px;
   min-height: 18px;
   background-position: left top;
   background-repeat: no-repeat;
}

.xRecalcContinue {
   margin: 8px 15px 8px 28px;
   background-color: cornsilk;
}

.xRecalcContinueBtns {
   text-align: right;
   padding-bottom: 5px;
   padding-right: 5px;
}

.xRecalculateMessages {
   margin: 8px 15px 8px 28px;
   max-height: 400px;
   overflow-y: auto;
}

.xRecalcSkip {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAQlBMVEWZmZmenp7///+7u7u2trazs7OoqKikpKSnp6eenp6ioqKmpqbn5+eenp6pqam0tLTV1dXi4uKhoaHk5OTCwsKnp6c7iKeKAAAAC3RSTlMAAABdpMDv+f3+/sH7U6kAAAB6SURBVHhebY/LDsQgCEWxoNSCz3b+/1dHxc00cxfEcxIQ4HgFDgBAH2IMHgFgCkcsPaUuTG4JOkttqq3mi6ZALrfOPJIZh/BSjT9PFT9E6G2zth6GiGnzqCmaMDZhLcazxYZuVhuKnMX4LutboCvbYuWk/6uD+z3ulS+M2giQ9l7ORAAAAABJRU5ErkJggg==') /*iconRecalcSkip.png*/;
}

.xRecalcInProgress {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAY1BMVEWZmZn///+7u7u2trazs7OoqKinp6e3t7eenp7AwMDS0tLa2trh4eGTk5PV1dXT09PU1NTl5eXn5+fKysrOzs7X19fY2Njk5OTZ2dnPz8/c3Nzd3d3Q0NDR0dGnp6fm5uZ8fHzAKn0eAAAACXRSTlMAAF2kwO/2+f760HMWAAAAcUlEQVR4XmXPRxIEIQgFUAzQZjtNjvc/5ahUzaL5VX/hWwCCOgQUAGiLzqHVADDAkJ9Tmj0ZBjPFdSROpoOm/mYh3cD69R9vG2C4Pj4Lt2ID98zve+GeXIftm883bu2Ar70sF25AMVSslYfJ0+XnDvkBJBoJoRnmVsYAAAAASUVORK5CYII=') /*iconRecalcInProgress.png*/;
}

.xRecalcPending {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAKlBMVEWZmZn///+7u7u2trazs7OoqKinp6e3t7eenp7AwMDU1NTa2trh4eHn5+cS4PT5AAAACXRSTlMAAF2kwO/2+f760HMWAAAAZklEQVR4Xj2OvQmAUBCD83CBpyjYCg5gZ60b2LmCWL4JLFzBzg20tXMBwQH8uV18B5JUHyR3CcJfsMjbsYaBDbrlmAoP5S7yOIOoF68tQzwrXBWSVeFukJ4K70CgxTDP+ZAVLOWMD7EyO4FV9JzzAAAAAElFTkSuQmCC') /*iconRecalcPending.png*/;
}

.xRecalcComplete {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEV1oGT///+Ar217qGl5pWd5pmiEtnF2oWV1oGSLvXeOw3qRx3ySyH2SyX2q0pv///+uShPHAAAACHRSTlMAAJjf7/z9/oSitTYAAACGSURBVHheRY6xDcJAEATXogFjWTIpEgUQkUMXBI5cgTOnRFRA4g5Y8FeAKAAkMicu4YP9Dv65AJmLRtq7m8XyN8ix6c4HZMgXx/fjsjXYTeTQZChq0mlco+xJxese1Ysu6N5i9ZSSv50MkqIBqk9IkRaVvZJoy0Xtgqed20P5ofkrZulc4wsyFzpGuuIVRQAAAABJRU5ErkJggg==') /*iconRecalcComplete.png*/;
}

.xRecalcError {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEWZAAD////GAAC/AAC7AACtAACrAADBAACgAADMAADmAADuAAD4AAD/AAD/Zmb///+f0X3EAAAACXRSTlMAAF2kwO/2+f760HMWAAAAcklEQVR4Xj2OvQ2DMBSEz8oCJkqktEgMkI4aNkiXFRAlE1CwAh0bQEvHAkgMwM/zBrY3sKBA96qT7u59h+g+aCT/JoeCfhT93H4vkU4ie6XwLJ2IG2O8Om9NWDO8BxO83X74LOKDHDUFLYZZ50MiCOWMEy1GPTtRNmt0AAAAAElFTkSuQmCC') /*iconRecalcError.png*/;
}

.xRecalcLines {
   padding: 8px;
   bottom: 0;
   position: absolute;
   top: 137px;
   left: 0;
   right: 0;
}

.xRecalcLine {
   padding: 5px;
   border: solid 1px transparent;
   background-color: transparent;
   cursor: pointer;
}

.xRecalcLine[curr] {
   border: solid 1px darkgray;
   background-color: gainsboro;
}

.xRecalcPageDesc {
   padding: 5px 5px 5px 10px;
   background-color: cornsilk;
   white-space: nowrap;
   height: 55px;
}

.xRecalcPageDesc > ol {
   margin : 0;
}

/* category property grid */

table.xCatGrid,
table.xCatGrid table.xCatGridInner {
   /* width is assigned in code depending on the GridSizeMode and GridWidth properties */
   table-layout: fixed;
   border-style: none;
   border-collapse: separate;
   border-spacing: 0px;
   background-color: white; /* the category grid should have a solid background color by default */
}

   /* no effect except perhaps in FF */
   table.xCatGrid > tbody {
      width: 100%;
      overflow: auto;
   }

   table.xCatGrid tr.template,
   table.xCatGridInner td.template {
      display: none !important;
   }

   table.xCatGrid tr[excl]:not([allow]),
   table.xCatGrid td[excl]:not([allow]),
   table.xCatGrid th[excl]:not([allow]) {
      filter: alpha(opacity=40) !important;
      opacity: .40 !important;
   }

   table.xCatGrid tr[allow]:not([selected]) td.xSys {
      filter: alpha(opacity=40) !important;
      opacity: .40 !important;
   }

   table.xCatGrid tr[error] {
   }

   table.xCatGrid tr > th,
   div.xTableHdr {
      height: 22px;
      padding: 0 4px;
      font-weight: normal;
      text-align: left;
      border-bottom: solid 1px;
      overflow: hidden;
      text-overflow: ellipsis;
   }

   table.xCatGrid > tbody > tr > th[last] {
      border-right-style: none;
   }

   table.xCatGridInner tr > td.propHdr[last] {
      border-bottom-style: none;
   }

table.xCatGrid tr > th.xTableHdr,
div.xTableHdr {
   font-size: 12px;
   white-space: nowrap;
}

   table.xCatGrid tr > th[required] {
      font-weight: bold;
   }

   table.xCatGrid[orientation="horizontal"][sortable] thead th[cid] {
      /* cursor: pointer; */
   }

   table.xCatGrid[orientation="horizontal"][sortable] thead th[cid]:hover {
      background-color: lightgrey;
   }

   table.xCatGrid[orientation="horizontal"] tr > td,
   table.xCatGrid[orientation="vertical"] tr > td.xSys,
   table.xCatGrid[orientation="vertical"] tr > td.xSubCat,
   table.xCatGridInner tr > td {
      height: 19px;
      padding: 1px 4px 1px 4px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      /* set up a default, hidden border on each cell - that way simply enabling it will cause it to appear */
      border-width: 1px;
      border-style: none;
   }

   table.xCatGrid[orientation="horizontal"] > colgroup > col {
      /* set up a default, hidden border on each cell - that way simply enabling it will cause it to appear */
      border-width: 1px;
      border-style: none;
   }

   table.xCatGrid[orientation="horizontal"] thead > tr > th.xSort > div {
      position: relative;
      padding: 0;
      height: 100%;
   }

   table.xCatGrid[orientation="horizontal"] tr > td {
      border-bottom-style: solid;
   }

   table.xCatGrid[orientation="horizontal"] tr:not(.search-highlight) > td:not(.search-highlight) {
      background-color: white;
   }

   table.xCatGrid[orientation="horizontal"] tr > td:focus {
         -webkit-box-shadow: inset 0 0 1px 1px #4D90FE;
         -moz-box-shadow: inset 0 0 1px 1px #4D90FE;
         box-shadow: inset 0 0 1px 1px #4D90FE;
         outline: none;
         border-radius: 2px;
      }

table.xCatGrid a.expNewOptionButton,
table.xCatGrid a.expNewOptionButton_before,
table.xCatGrid a.expNewOptionButton_after,
table.xCatGrid a.expCloneOptionButton,
table.xCatGrid a.expCloneOptionButton_before,
table.xCatGrid a.expCloneOptionButton_after {
   height: 16px;
   width: 16px;
   display: inline-block;
   background-repeat: no-repeat;
}

table.xCatGrid a.expNewOptionButton_before,
table.xCatGrid a.expNewOptionButton_after,
table.xCatGrid a.expCloneOptionButton_before,
table.xCatGrid a.expCloneOptionButton_after {
   margin-right: 2px;
}

   table.xCatGrid a.expNewOptionButton {
      background-image: url('btnNewOption.min.svg');
   }

table.xCatGrid a.expNewOptionButton_before {
   background-image: url('btnNewOption_before.min.svg');
}

table.xCatGrid a.expNewOptionButton_after {
   background-image: url('btnNewOption_after.min.svg');
}

table.xCatGrid a.expCloneOptionButton {
   background-image: url('btnCloneOption.min.svg');
}

table.xCatGrid a.expCloneOptionButton_before {
   background-image: url('btnCloneOption_before.min.svg');
}

table.xCatGrid a.expCloneOptionButton_after {
   background-image: url('btnCloneOption_after.min.svg');
}

/* OPTION REORDERING STYLES*/
a.xSort-retain,
a.xSort-retain > .xSort-img,
.xTb > .xTbBtns > a.xSort-retain,
.xRgnTb > .xTbBtns > a.xSort-retain {
   display: none;
}

a.xSort-revert,
a.xSort-revert > .xSort-img,
.xTb > .xTbBtns > a.xSort-revert,
.xRgnTb > .xTbBtns > a.xSort-revert {
   display: inline-block;
}

   a.xSort-retain.xSort-unsaved,
   a.xSort-retain.xSort-unsaved > .xSort-img,
   .xTb > .xTbBtns > a.xSort-retain.xSort-unsaved,
   .xRgnTb > .xTbBtns > a.xSort-retain.xSort-unsaved {
      display: inline-block;
   }

   a.xSort-retain > .xSort-img, a.xSort-revert > .xSort-img {
      background-repeat: no-repeat;
   }

.xRgnTb > .xTbBtns > a.xSort-retain > .xSort-img,
.xRgnTb > .xTbBtns > a.xSort-revert > .xSort-img {
   height: 18px;
   width: 18px;
   padding: 0;
}

.xHGOuter .xHGLeft {
   display: inline-block;
   vertical-align: top;
   overflow-x: visible;
   position: relative;
   z-index: 1;
}

.xInnerMargin .xHGOuter .xHGLeft {
   overflow-y: hidden;
}

.xHGOuter .xHGLeft tbody:not([data-grouptype='header']) tr,
.xHGOuter .xHGLeft thead th:last-of-type {
   border-right: 1px solid #d6d6d6;
}

table.xCatGrid[orientation="horizontal"] tr > th.xSort {
   padding-left: 2px;
   padding-right: 2px;
}

table.xCatGrid[orientation="horizontal"] tr > td.xBtn > img {
   margin-right: 2px;
}

table.xCatGrid[orientation="horizontal"] .xSort-retain,
table.xCatGrid[orientation="horizontal"] .xSort-revert {
   top: 0;
   position: absolute;
   padding: 5px 2px 0 2px;
}

table.xCatGrid[orientation="horizontal"] .xSort-retain {
   left: 0;
}

table.xCatGrid[orientation="horizontal"] .xSort-revert {
   right: 0;
}

table.xCatGrid[orientation="horizontal"] .xSort-retain > .xSort-img,
table.xCatGrid[orientation="horizontal"] .xSort-revert > .xSort-img {
   height: 16px;
   width: 16px;
}

   table.xCatGrid[orientation="horizontal"] .xSort-retain:hover,
   table.xCatGrid[orientation="horizontal"] .xSort-revert:hover {
      background-color: #d7ebf9;
   }

table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] .xSort-controls {
   height: 100%;
   width: 100%;
   position: relative;
}

table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] .xSort-handle {
   width: 18px;
   height: 16px;
   right: 2px;
   top: calc(50% - 8px);
   cursor: move;
   cursor: grab;
   cursor: -moz-grab;
   cursor: -webkit-grab;
   display: inline-block;
   position: absolute;
}

table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] > tr:hover .xSort-handle,
table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] > tr.ui-selected .xSort-handle,
table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] > tr.ui-selecting .xSort-handle,
table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] > tr.ui-unselecting .xSort-handle {
   background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' x='0' y='0' viewBox='0 0 16 16' xml%3Aspace='preserve'%3E%3Cstyle%3E.st0%7Bfill%3A%23a6a6a6%7D%3C%2Fstyle%3E%3Ccircle class='st0' cx='5.5' cy='3.7' r='1.2'%2F%3E%3Ccircle class='st0' cx='5.5' cy='8' r='1.2'%2F%3E%3Ccircle class='st0' cx='5.5' cy='12.3' r='1.2'%2F%3E%3Ccircle class='st0' cx='10.5' cy='3.7' r='1.2'%2F%3E%3Ccircle class='st0' cx='10.5' cy='8' r='1.2'%2F%3E%3Ccircle class='st0' cx='10.5' cy='12.3' r='1.2'%2F%3E%3C%2Fsvg%3E");
   background-repeat: no-repeat;
}


table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] tr > td.xSort {
   cursor: pointer;
   padding: 0;
}

table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] .xSort-indicator {
   height: 100%;
   width: 0;
   left: 0;
   bottom: 0;
   border-top: 0;
   border-bottom: 0;
   border-right: 0;
   border-left: 2px solid #2d67b2;
   display: inline-block;
   position: absolute;
   transition: height .05s ease-out, border-left-width .1s ease-in;
}

table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] .ui-selected .xSort-indicator,
table.xCatGrid[orientation="horizontal"].ship-container tbody[data-grouptype="selected"] tr > td.xSort .xSort-indicator {
   border-left: 6px solid #2d67b2;
   transition: border-left-width .1s ease-in;
}

table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] .ui-selecting .xSort-indicator,
table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] .ui-unselecting .xSort-indicator {
   height: calc(60%);
   transition: height .05s ease-out;
}

table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] .sort-placeholder {
   background-color: #f3f9fd;
}

      table.ship-container {
         -webkit-box-shadow: 1px 1px 15px 5px rgba(0, 0, 0, 0.05);
         box-shadow: 1px 1px 15px 5px rgba(0, 0, 0, 0.05);
         background-color: #fff;
         color: #000;
         display: table;
      }

         table.ship-container *, table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] tr > td.xSort .xSort-handle:active {
            cursor: grabbing !important;
            cursor: -moz-grabbing !important;
            cursor: -webkit-grabbing !important;
         }

         table.ship-container tr > td, table.ship-container tr > td:hover {
            background-color: #deecf9;
         }

         table.ship-container tr > td.xSort .xSort-handle {
            visibility: hidden;
         }

table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] tr.ui-selected,
table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] tr.ui-unselecting {
   background-color: #eff6fc;
   background-image: none;
}

table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] tr.ui-selecting {
   background-color: #deecf9;
   color: slategray;
   background-image: none;
}
/* END OPTION REORDERING STYLES*/

   table.xCatGrid[orientation="vertical"] tr > td.xSubCat {
      border-bottom-style: solid;
      border-top-style: solid;
   }

   table.xCatGrid[orientation="vertical"] table.xCatGridInner {
      width: 100%;
   }

   table.xCatGrid[orientation="vertical"] table.xCatGridInner tr > td {
      border-right-style: solid;
   }

   table.xCatGrid[orientation="vertical"] table.xCatGridInner tr > th.xFiller {
      visibility: hidden;
      border-style: none;
   }

   table.xCatGrid[orientation="vertical"] table.xCatGridInner tr.xWrapped > th {
   }

table.xCatGrid > tbody:not([data-grouptype='header']) > tr:hover,
table.xCatGrid > tbody:not([data-grouptype='header']) > tr.hovered {
   background-color: #f3f9fd;
}

   table.xCatGrid[orientation="vertical"] > tbody > tr > td {
      padding: 0;
   }

   table.xCatGrid tr > td[hide] *,
   table.xCatGrid tr > td[hideincompat] *,
   table.xCatGrid tr > td[noSel] *,
   table.xCatGrid tr > th[noSel] *,
   table.xCatGrid table.xCatGridInner tr > td[hide] *,
   table.xCatGrid table.xCatGridInner tr > td[hideincompat] * {
      display: none;
   }

   table.xCatGrid th[hide],
   table.xCatGrid th[hideincompat],
   table.xCatGrid td[hideincompat],
   table.xCatGrid tr[hide],
   table.xCatGrid tr[hideincompat] {
      display: none;
   }

   table.xCatGrid tr > th.xNum,
   table.xCatGrid tr > td.xNum {
      text-align: right;
      width: 30px;
      text-overflow: clip;
      border-right-style: none;
   }

table.xCatGrid tr > th
table.xCatGrid tr > td {
   padding: 1px 0 !important;
}

table.xCatGrid tr > th.xSel,
table.xCatGrid tr > td.xSel {
   width: 20px;
   text-align: left;
   text-overflow: clip;
}

table.xCatGrid tr > td[hide] {
}

   table.xCatGrid tr > td[err] {
   }

   table.xCatGrid tr > td.xCtl {
      padding: 0;
   }

   table.xCatGrid tr > td.xSys {
   }

   table.xCatGrid tr > td.xBtn {
      /* for IE 8 */
      text-overflow: clip;
   }

   .xSubCat > span {
      position: absolute;
      left: 0;
      right: 0;
      margin-top: -10px;
      margin-left: 10px;
   }

   table.xCatGrid tr > td.xCtl > textarea {
   font-family: Tahoma, Arial, sans-serif;
   font-weight: normal;
      font-size: 11px;
   }

table.xCatGrid tr > td.xCtl > input[type='text'],
table.xCatGrid tr > td.xCtl > .xInputPlaceholder,
table.xCatGrid tr > td.xCtl > textarea {
   margin: 0;
   border-style: none;
   padding: 1px 4px 1px 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

table.xCatGrid tr > td.xCtl > .xInputPlaceholder {
   padding: 2px 4px 1px 4px;
}

table.xCatGrid tr > td.xCtl > input[type='text'],
table.xCatGrid tr > td.xCtl > textarea {
   width: 100%;
}

table.xCatGrid[autolayout] tr > td.xCtl > .xInputPlaceholder {
   width: calc(100% - 2px); /*leave room for the cell focus border*/
   max-width: 152px;
}

table.xCatGrid[autolayout] tr > td.xCtl > .xHelper > input[data-dynamic][type=text],
table.xCatGrid[autolayout] tr > td.xCtl > .xHelper > input[data-dynamic][type=text]:not(focus):hover,
table.xCatGrid[autolayout] tr > td.xCtl > .xHelper > .xInputPlaceholder {
   width: 152px; /*leave room for the button and the cell focus border*/
}

table.xCatGrid tr > td.xCtl > input[type='text'][data-dynamic],
table.xCatGrid tr > td.xCtl > .xInputPlaceholder {
   /* make room for the cell focus inset */
   width: calc(100% - 2px);
   margin-left: 1px;
}

table.xCatGrid tr > td.xCtl > .xInputPlaceholder {
   height: 22px;
}

table.xCatGrid tr > td.xCtl > .xInputPlaceholder[inputtype=textarea] {
   height: 33px;
}

table.xCatGrid[banded='true'] tr > td.xCtl > input[type='text']:not(:focus),
table.xCatGrid[banded='true'] tr > td.xCtl > textarea {
   background-color: transparent;
}

table.xCatGrid[banded='true'] tr > td[noSel] {
   filter: alpha(opacity=70);
   opacity: .7;
}

table.xCatGrid tr > td > div.xComboBox > div.xComboEdit > div.xEdit {
   /* bump the text down a smidge so it lines up with the rest of the data.  also, ensures the edit field is the proper size in the box. */
   padding-bottom: 1px;
}

table.xCatGrid tr > td > div.xCalendar > input.xCal {
   width: 100%;
   margin: 2px 0 1px 0;
   border-style: none;
   padding: 1px 4px 1px 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

table.xCatGrid tr > td > div.xHelper,
table.xCatGrid tr > td > div.xInputPlaceholder {
   white-space: nowrap;
   display: flex;
   flex-direction: row;
}

table.xCatGrid tr > td[style*='text-align:Center;'] > div.xHelper,
table.xCatGrid tr > td[style*='text-align:Center;'] > div.xInputPlaceholder {
   margin: auto;
}

table.xCatGrid tr > td > div.xHelper > input[type='text'] {
   margin: 0;
   border-style: none;
   padding: 1px 4px 1px 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
}

table.xCatGrid tr > td > div.xHelper > .xInputPlaceholder {
   margin: 0 0 0 1px;
   padding: 1px 4px;
   box-sizing: border-box;
   width: 100%;
}

table.xCatGrid tr > td textarea {
   resize: vertical;
   width: 100%;
}

/* Ensure there is room to display the Revert button when a textarea property is overridden*/
table.xCatGrid tr > td > div.xHelper > textarea[overridden] {
   width: calc(100% - 20px);
}


table.xCatGrid tr > td > div.xHelper > input[type='text']:not(:focus) {

   background-color: transparent;
}

table.xCatGrid tr > td > div.xHelper > div.xIHBtn {
   width: 14px;
   height: 19px;
   display: inline-block;
   cursor: pointer;
   background-repeat: no-repeat;
   border: solid 1px transparent;
   outline-style: none;

}

table.xCatGrid tr > td > div.xHelper > div.xIHBtn:hover {
   border-color: #36a;
}

   table.xCatGrid tr > td > div.xHelper[helper='revert'] > input:not([overridden]) + div,
   table.xCatGrid tr > td > div.xHelper[helper='revert'] > textarea:not([overridden]) + div,
   table.xCatGrid tr > td > div.xHelper[helper='revert'] > div:not([overridden]) + div {
      display: none;
   }

table.xCatGrid tr > td > div.xHelper[helper='revert'] {
	min-width: 35px; /*This forces col width to be enough for both helper and a checkbox. */
}

table.xCatGrid tr > td > div.xHelper[helper='revert'] > input[type=checkbox] + div {
   margin-left: 0;
}

table.xCatGrid tr > td > div.xHelper[helper='revert'] > div + input[type="checkbox"] {
	float: left;
}

/* template generic styles */
span.fw120 {
   display: inline-block;
   width: 120px;
}

span.fw180 {
   display: inline-block;
   width: 180px;
}

span.fw350 {
   display: inline-block;
   width: 350px;
}


.xTooltip {
   z-index: 9999;
   background-color: cornsilk;
   border: burlywood 1px solid;
   padding: 6px;
   position: absolute;
   width: auto;
   font-family: Tahoma, Arial, sans-serif;
   font-weight: normal;
   font-size: 11px;
}

.xExceptionDetails {
   margin-top: 20px;
   overflow-y: auto;
   max-height: 400px;
}

   .xExceptionDetails > span {
      font-weight: bold;
      display: inline-block;
      margin-top: 5px;
      margin-bottom: 10px;
   }

   .xExceptionDetails > p {
      font-family: Consolas, Courier New, monospace;
      font-size: 11px;
      white-space: pre-wrap;
      padding-bottom: 10px;
      border-bottom: solid 1px gainsboro;
   }

      .xExceptionDetails > p[last] {
         border-bottom-style: none;
         padding-bottom: 0;
      }


.xDialogBackDrop {
   z-index: 90000;
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #171717;
   filter: alpha(opacity=75);
   -moz-opacity: .75;
   opacity: .75;
}

.xDialogContainer {
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 99999;
}

.xDialog {
   background-color: #171717;
   position: absolute;
   z-index: 99999;
   border-radius: 4px;
   -moz-border-radius: 4px;
}

   .xDialog .xDialogButton,
   .xDiagDetail .xDialogButton {
      position: relative;
      display: inline-block;
      top: 2px;
      height: 18px;
      width: 18px;
      font-family: "Segoe UI", Tahoma, Arial, sans-serif;
      font-size: 12px;
      text-align: center;
      padding-top: 1px;
      padding-bottom: 1px;
      color: black;
      background-color: white;
      border-radius: 2px;
      -moz-border-radius: 2px;
      cursor: pointer;
      background-repeat: no-repeat;
   }

      .xDialog .xDialogButton:hover,
      .xDiagDetail .xDialogButton:hover {
         background-color: lightgrey;
      }

.xDialogToggleButton {
   position: relative;
   display: inline-block;
   top: 0;
   height: 18px;
   width: 98px;
   background-color: white;
   border: solid 1px darkgray;
   border-radius: 2px;
   -moz-border-radius: 2px;
   padding-left: 3px;
   padding-right: 3px;
   margin: 5px;
   margin-bottom: 0;
   cursor: pointer;
}

   .xDialogToggleButton:hover { /* TODO: Better colors for these */
      background-color: lightgrey;
   }

   .xDialogToggleButton[ischecked='true'] {
      background-color: lightsteelblue;
   }

      .xDialogToggleButton[ischecked='true']:hover {
         background-color: #90a4be;
      }

.xDialogTitlebar > .xDialogToggleButton {
   height: 16px;
   margin: 0;
}

.xDialog .xDialogTextButton {
   width: auto;
   padding-left: 3px;
   padding-right: 3px;
   text-align: left;
}

.xDialog .xDialogImageButton {
   padding-left: 3px;
   padding-right: 3px;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 16px 16px;
}

.xDialog .xDialogImageAndTextButton,
.xDiagDetail .xDialogImageAndTextButton {
   width: auto;
   padding-left: 24px;
   padding-right: 3px;
   background-repeat: no-repeat;
   background-position: center;
   background-position: 5px center;
   background-size: 16px 16px;
   text-align: left;
}

.xDialog > .xDialogTitlebar {
   position: relative;
   top: 0;
   left: 0;
   right: 0;
   height: 35px;
   white-space: nowrap;
   overflow: hidden;
   background-color: #4461af;
   border-top-left-radius: 2px;
   -moz-border-radius-topleft: 2px;
   border-top-right-radius: 2px;
   -moz-border-radius-topright: 2px;
}

.xHSplit {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 5px;
   cursor: ns-resize;
   background-color: #939bd2;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAFAgMAAACFjHLVAAAACVBMVEVyfcWGj82Tm9KOAzYjAAAAOElEQVR4Xm2MsQkAIAwEDyEgDpDa2imDMzhAGsExxUJB9IsrnuPo3FOnkWPADmRdo6TqGyZf621NupUOtgaLlG4AAAAASUVORK5CYII=') /*SplitterHorz.png*/;
   background-repeat: no-repeat;
   background-position: center center;
}

.xHSplit[fixed] {
   cursor: default;
   height: 1px;
}

.xVSplit {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 5px;
   cursor: ew-resize;
   background-color: #939bd2;
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAABGAgMAAAB5zba0AAAACVBMVEVyfcWGj82Tm9KOAzYjAAAAMklEQVR4Xs2PQQ0AIAzE+kQLKmpifmYCE1NJ9gIJay6X9FkqOUmI8rNg94/VhxJ2RfUu0rUKUeJaj2AAAAAASUVORK5CYII=') /*SplitterVert.png*/;
   background-repeat: no-repeat;
   background-position: center center;
}

.xVSplit[fixed] {
   cursor: default;
   width: 1px;
}

.xDialog > .xDialogTitlebar > .xDialogTitlebarText {
   color: white;
   font-family: "Segoe UI", Tahoma, Arial, sans-serif;
   font-size: 14px;
   position: absolute;
   top: 7px;
   left: 12px;
   text-transform: uppercase;
}

.xDialog > .xDialogTitlebar > .xDialogButton {
   float: right;
   margin-right: 5px;
   margin-top: 5px;
   font-weight: bold;
   padding-left: 4px;
   padding-right: 4px;
   padding-top: 2px;
}

.xDialog > .xDialogTitlebar > .xDialogButton[disabled="true"] {
   background-color: lightgrey !important;
   cursor: default;
}

.xDialog > .xDialogTitlebar > .xDialogImageButton {
   padding: 0;
   padding-left: 0;
   padding-top: 0;
   padding-right: 0;
   padding-bottom: 0;
}

.xDialog > .xDialogTitlebar > .xDialogImageAndTextButton {
   padding-left: 22px;
   padding-right: 5px;
}

.xDialog > .xDialogTitlebar > .xDialogButtonSpacer {
   /* include a spacer on the button */
   margin-right: 25px;
}

.xDialogPopup {
   border: solid 3px #171717;
   height: auto;
   width: auto;
}

   .xDialogPopup .xString {
      padding: 35px;
      font-family: "Segoe UI", Tahoma, Arial, sans-serif;
      font-size: 24pt;
      font-weight: normal;
      color: darkslateblue;
      background-color: white;
      border-radius: 2px;
      -moz-border-radius: 2px;
   }

   /*
      transition types (map to TransitionType enum; Default (0) will have already been converted to Bar (1))
      1 - bar
      2 - none
   */

   /* None Transition */
   .xDialogPopup .xTransition[type='2'] {
      display: none !important;
   }

   /* Bar Transition */
   .xDialogPopup .xTransition[type='1'] {
      font-family: "Segoe UI", Tahoma, Arial, sans-serif;
      font-weight: normal;
      color: darkslateblue;
      background-color: white;
      border-radius: 2px;
      -moz-border-radius: 2px;
   }

      .xDialogPopup .xTransition[type='1'] .xTransitionTitle {
         padding: 35px 35px 15px 35px;
         font-size: 24pt;
         font-weight: normal;
         color: darkslateblue;
      }

      .xDialogPopup .xTransition[type='1'] .xTransitionBody {
         background-color: white;
         padding-bottom: 20px;
      }

      .xDialogPopup .xTransition[type='1'] ul.xTransitionList {
         margin: 0;
         list-style: none;
         overflow-y: auto;
         max-height: 250px;
      }

         .xDialogPopup .xTransition[type='1'] ul.xTransitionList li {
         }

            .xDialogPopup .xTransition[type='1'] ul.xTransitionList li.xPhase {
               font-weight: bold;
               padding-top: 5px;
            }

            .xDialogPopup .xTransition[type='1'] ul.xTransitionList li:first-child {
               padding-top: 0;
            }

            .xDialogPopup .xTransition[type='1'] ul.xTransitionList li.xStep {
               padding-left: 8px;
            }

               .xDialogPopup .xTransition[type='1'] ul.xTransitionList li.xStep[err] {
                  color: red;
               }

   .xDialogPopup .xBasic {
      position: absolute;
      top: 35px;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 3px;
      background-color: white;
      overflow: auto;
      border-bottom-left-radius: 2px;
      -moz-border-radius-bottomleft: 2px;
      border-bottom-right-radius: 2px;
      -moz-border-radius-bottomright: 2px;
   }

      .xDialogPopup .xBasic[noTitle] {
         top: 0;
         border-top-left-radius: 2px;
         -moz-border-radius-topleft: 2px;
         border-top-right-radius: 2px;
         -moz-border-radius-topright: 2px;
      }

.xMsgInfo {
   background-image: url(msgInformation.png);
}

.xMsgQuestion {
   background-image: url(msgQuestion.png);
}

.xMsgError {
   background-image: url(msgError.png);
}

.xDialogPopup > .xMsgContainer {
   position: relative;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: white;
   min-width: 300px;
   max-width: 800px;
   background-repeat: no-repeat;
   background-position: 20px 18px;
   border-radius: 2px;
   -moz-border-radius: 2px;
}

   .xDialogPopup > .xMsgContainer > .xMsg {
      padding: 35px 35px 35px 88px;
      font-family: "Segoe UI", Tahoma, Arial, sans-serif;
   font-size: 11px;
      font-weight: normal;
      color: black;
   }

   .xDialogPopup > .xMsgContainer > .xBtns {
      position: relative;
      left: 0;
      right: 0;
      bottom: 0;
      height: 50px;
      background-color: #f4f5f7;
      border-bottom-left-radius: 2px;
      -moz-border-radius-bottomleft: 2px;
      border-bottom-right-radius: 2px;
      -moz-border-radius-bottomright: 2px;
   }

.xDialog > .xMsgContainer .xDialogButton:first-of-type,
.xDialog > .xConfirmContainer .xDialogButton:first-of-type {
   margin-right: 8px;
}

.xDialog > .xMsgContainer .xDialogButton:last-of-type,
.xDialog > .xConfirmContainer .xDialogButton:last-of-type {
   margin-left: 8px;
}

.xDialog > .xMsgContainer .xDialogButton, .xDialog > .xConfirmContainer .xDialogButton {
   float: right;
   margin-top: 7px;
   margin-right: 4px;
   margin-left: 4px;
   padding: 5px 16px;
   border: solid 2px #d7d8d9;
}

   .xDialog > .xMsgContainer .xDialogButton:focus,
   .xDialog > .xConfirmContainer .xDialogButton:focus {
      border-color: black;
   }

   .xDialog > .xMsgContainer .xDialogButton:hover,
   .xDialog > .xConfirmContainer .xDialogButton:hover {
      color: white;
      background-color: #4461af;
   }

.xDialogPopup > .xConfirmContainer {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: white;
   background-repeat: no-repeat;
   background-position: 20px 18px;
   border-radius: 2px;
   -moz-border-radius: 2px;
}

   .xDialogPopup > .xConfirmContainer > .xBtns {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 50px;
      background-color: #f4f5f7;
      border-bottom-left-radius: 2px;
      -moz-border-radius-bottomleft: 2px;
      border-bottom-right-radius: 2px;
      -moz-border-radius-bottomright: 2px;
   }

   .xDialogPopup > .xConfirmContainer > .xContentContainer {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 50px;
      background-color: white;
      border-top-left-radius: 2px;
      -moz-border-radius-topleft: 2px;
      border-top-right-radius: 2px;
      -moz-border-radius-topright: 2px;
   }

.xDialogIFrame {
   border: solid 3px #171717;
   height: auto;
   width: auto;
}

   .xDialogIFrame > .xDialogIFrameContainer {
      position: absolute;
      top: 35px;
      right: 0;
      bottom: 0;
      left: 0;
   }

      .xDialogIFrame > .xDialogIFrameContainer > iframe {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         border-bottom-left-radius: 2px;
         -moz-border-radius-bottomleft: 2px;
         border-bottom-right-radius: 2px;
         -moz-border-radius-bottomright: 2px;
      }

.xDialogFixedFrame {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   /* height set in code */
   background-color: white;
   cursor: default;
}

   .xDialogFixedFrame > .xDialogTitlebar {
      /*TODO: cursor: row-resize;*/
      border-radius: 0;
      -moz-border-radius: 0;
      background: #4461af;
      background: -moz-linear-gradient(left, rgb(2, 3, 109) 0, rgb(68, 97, 175) 100%);
      background: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(2, 3, 109)), color-stop(100%, rgb(68, 97, 175)));
      background: -webkit-linear-gradient(left, rgb(2, 3, 109) 0, rgb(68, 97, 175) 100%);
      background: -o-linear-gradient(left, rgb(2, 3, 109) 0, rgb(68, 97, 175) 100%);
      background: -ms-linear-gradient(left, rgb(2, 3, 109) 0, rgb(68, 97, 175) 100%);
      background: linear-gradient(to right, rgb(2, 3, 109) 0, rgb(68, 97, 175) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#02036d', endColorstr='#4461af', GradientType=1);
   }

      .xDialogFixedFrame > .xDialogTitlebar > .xDialogTitlebarText {
      }

      .xDialogFixedFrame > .xDialogTitlebar > .xDialogButton {
      }

   .xDialogFixedFrame > .xDiagTabs {
      position: absolute;
      left: 0;
      top: 35px;
      bottom: 0;
      width: 100px;
      background-color: rgb(2, 3, 109);
      color: white;
      direction: rtl;
   }

      .xDialogFixedFrame > .xDiagTabs .xDiagTab {
         position: relative;
         right: 0;
         margin-left: 5px;
         margin-top: 8px;
         padding: 3px 5px 3px 5px;
         height: auto;
         text-transform: uppercase;
         overflow: hidden;
         font-family: "Segoe UI", Tahoma, Arial, sans-serif;
         font-weight: normal;
         font-size: 12px;
         text-align: right;
         color: white;
         cursor: pointer;
      }

         .xDialogFixedFrame > .xDiagTabs .xDiagTab:hover {
            background-color: rgb(65, 66, 146);
            border-bottom-left-radius: 3px;
            -moz-border-radius-bottomleft: 3px;
            border-top-left-radius: 3px;
            -moz-border-radius-topleft: 3px;
         }

         .xDialogFixedFrame > .xDiagTabs .xDiagTab[selected] {
            background-color: white;
            color: rgb(2, 3, 109);
            font-weight: bold;
            border-bottom-left-radius: 3px;
            -moz-border-radius-bottomleft: 3px;
            border-top-left-radius: 3px;
            -moz-border-radius-topleft: 3px;
         }

   .xDialogFixedFrame > .xDiagPanel {
      position: absolute;
      left: 100px;
      top: 35px;
      bottom: 0;
      right: 0;
      overflow: auto;
   }

      .xDialogFixedFrame > .xDiagPanel > .xDiagToolbar {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 26px;
         background-color: #dcdcdc;
         border-bottom: solid 1px darkgray;
      }

         .xDialogFixedFrame > .xDiagPanel > .xDiagToolbar > .xDialogButton {
            float: left;
            margin-left: 3px;
            margin-top: 1px;
            padding-top: 2px;
            padding-bottom: 0;
            border: solid 1px #dcdcdc;
            background-color: #dcdcdc;
         }

            .xDialogFixedFrame > .xDiagPanel > .xDiagToolbar > .xDialogButton[ischecked="true"] {
               border-color: #cacaca !important;
               background-color: #f3f3f3;
            }

            .xDialogFixedFrame > .xDiagPanel > .xDiagToolbar > .xDialogButton:hover {
               border-color: #fafafa;
               background-color: #fafafa;
            }

      .xDialogFixedFrame > .xDiagPanel > .xDiagIFrameContainer {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
      }

         .xDialogFixedFrame > .xDiagPanel > .xDiagIFrameContainer > iframe {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
         }

      .xDialogFixedFrame > .xDiagPanel .xDiagPanelDetails {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         white-space: pre;
         overflow-y: auto;
         font-family: Consolas, Courier New, monospace;
   font-size: 11px;
         padding: 5px;
         background-color: white;
      }

.xFixedTableContainer {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   padding-top: 25px; /* to account for the header */
   overflow-x: hidden;
}

   .xFixedTableContainer > .xFixedTableHeaderBackground {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      background-color: gainsboro;
      height: 25px;
   }

   .xFixedTableContainer > .xFixedTableFooterBackground {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: gainsboro;
      height: 25px;
   }

   .xFixedTableContainer > .xFixedTableContainerInner {
      overflow-x: hidden;
      overflow-y: auto;
      height: 100%;
   }

      .xFixedTableContainer > .xFixedTableContainerInner > table {
         width: 100%;
         overflow-x: hidden;
         overflow-y: auto;
      }

         .xFixedTableContainer > .xFixedTableContainerInner > table > thead > tr > th > div {
            position: absolute;
            top: 0;
            line-height: 25px;
            text-align: left;
            padding-left: 4px;
         }

         .xFixedTableContainer > .xFixedTableContainerInner > table > tfoot > tr {
            display: table-footer-group; /* prevents a phantom row from appearing in the table contents via mouse-over (IE only?) */
         }

            .xFixedTableContainer > .xFixedTableContainerInner > table > tfoot > tr > td {
               padding: 0;
            }

               .xFixedTableContainer > .xFixedTableContainerInner > table > tfoot > tr > td > div {
                  position: absolute;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  line-height: 25px;
                  text-align: left;
                  padding-left: 4px;
               }

   .xFixedTableContainer table th,
   .xFixedTableContainer table td {
      font-family: "Segoe UI", Tahoma;
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      -moz-text-overflow: ellipsis;
      text-overflow: ellipsis;
      border-collapse: collapse;
   }

   .xFixedTableContainer table td {
      padding: 2px 4px;
      border-right: solid 1px gainsboro;
   }

      .xFixedTableContainer table th[last],
      .xFixedTableContainer table td[last] {
         border-right-style: none;
}

      .xFixedTableContainer table td[icon] {
         background-position: center center;
         background-repeat: no-repeat;
      }

   .xFixedTableContainer table tr:hover td {
      background-color: cornsilk !important;
      color: black !important;
   }

div.watermarkPrompt {
   color: #ccc;
   font-family: "Segoe UI", Tahoma;
   font-size: 20px;
   padding: 10px;
}

/* paneltype = 0 ----> Output */
div[paneltype='0'] .xFixedTableContainer table tr[type='0'] td {
   background-color: white;
}

   div[paneltype='0'] .xFixedTableContainer table tr[type='0'] td[icon] {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAFVBMVEX///8AAAAAAAAAAAAAAABCQkJsbGyguecVAAAAB3RSTlMAFE1jZmZmn//RHgAAACNJREFUCNdjYCANMCobCYAZTK4hCmAGc1iqASoDLgVXTDwAACfUBB+NbIcaAAAAAElFTkSuQmCC') /*iconGridInfo.png*/;
      background-color: #ddd;
   }

div[paneltype='0'] .xFixedTableContainer table tr[type='1'] td {
   background-color: #e8ffe1;
}

   div[paneltype='0'] .xFixedTableContainer table tr[type='1'] td[icon] {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEVtj2P///+Js32Ap3R7oXB1mGqVwoem2Zev45+1IcBRAAAABnRSTlMAAHDW8vuAeEYkAAAAP0lEQVR4XoXNMQ0AIBADQPIOcMCABRCABYYXwIAC0FDZJA1JN/jpkvbTEO+9YaUnIs/diAoMwoElKFJZ7/+tA9oqEUW9kAEyAAAAAElFTkSuQmCC') /*iconGridAction.png*/;
      background-color: #bbf2aa;
   }

div[paneltype='0'] .xFixedTableContainer table tr[type='2'] td {
   background-color: #ffd8d8;
}

   div[paneltype='0'] .xFixedTableContainer table tr[type='2'] td[icon] {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEWZWlr///+/cXGzaWmsZWWjYGDPenroiYnzkJABUoL5AAAABnRSTlMAAHDW8vuAeEYkAAAALklEQVQI12MQhAIGvAwm02AFMEMlvcwJzDDr6EgGM8I7OkpRGXApuGK4doJ2AQDaKhFFDVaFugAAAABJRU5ErkJggg==') /*iconGridError.png*/;
      background-color: #ffacac;
   }

div[paneltype='0'] .xFixedTableContainer table tr[type='3'] td {
   background-color: #fffdd6;
}

   div[paneltype='0'] .xFixedTableContainer table tr[type='3'] td[icon] {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEWZllr///+/vHGzr2msqWWjn2DPy3ro44nz7pDKMJ4FAAAABnRSTlMAAHDW8vuAeEYkAAAALklEQVQI12MQhAIGvAwm02AFMEMlvcwJzDDr6EgGM8I7OkpRGXApuGK4doJ2AQDaKhFFDVaFugAAAABJRU5ErkJggg==') /*iconGridWarning.png*/;
      background-color: #fcf8aa;
   }

div[paneltype='0'] .xFixedTableContainer table tr[type='4'] td {
   background-color: #f7f7f7;
   color: #aaa;
}

   div[paneltype='0'] .xFixedTableContainer table tr[type='4'] td[icon] {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJ1BMVEWpqan////U1NTLy8vGxsa+vr6xsbGpqanIyMjd3d3j4+P39/f///+YlQ9yAAAAB3RSTlMAAAKXwOP9KMPY6wAAAFtJREFUeF59zTEOgCAMBVC9AWpgN54AT8Hq4u7gHRgYHd09BJyAcAALPZRNNHUxdnrJ/22r5pkviGFex5rQGh+3ntDtCFYTZMAjTwSVwJWFwdFdxlPz+nvw5+kFkf0eoLy0MdQAAAAASUVORK5CYII=') /*iconGridTiming.png*/;
      background-color: #eee;
   }

/* paneltype = 1 ----> Undo */
/* paneltype = 2 ----> ObjectInspector */

/* paneltype = 3 ----> RuleAnalyzer */
div[paneltype='3'] .xFixedTableContainer table tr[ruleState='T'] td[icon] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEX///9Vpjhjs0ZpvEt+1F+JmISa1IKm2pDKzn18AAAAAXRSTlMAQObYZgAAAEVJREFUeF51jcsRABAQQ11SggKoQQVmcF2fFpSgf4xwk0t2Xnaz6iehI3Bo5iB4vWMCdIIa5WzAjQW2SronVrMkv9rP2wlQdQg2aG8wjQAAAABJRU5ErkJggg==') /*iconCheckmark.png*/;
}

div[paneltype='3'] .xFixedTableContainer table tr[ruleState='F'] td[icon] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEX///+iICCiICA/YBTmAAAAAnRSTlMAf7YpoZUAAAAiSURBVHhehcexDQAACAJBKwqndwRG1WAPX1zyFcIcTfHrW2MwAoEz+QQpAAAAAElFTkSuQmCC') /*iconRedDot.png*/;
}

/* paneltype = 4 ----> FormulaAnalyzer */
div[paneltype='4'] .xFixedTableContainer table tr[formulaType='B'] td[icon] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEVMaXGAAADAwMDh/+66AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAADZJREFUeAFjQAEsIEIIiBk9gIToAgYBhrAGBlHWKAYG1tAMoHBoAohYwMAAFAcSUiD1HMgmAADZjwXVpWBUBQAAAABJRU5ErkJggg==') /*iconBoolean.png*/;
}

div[paneltype='4'] .xFixedTableContainer table tr[formulaType='N'] td[icon] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEVMaXGAAADAwMDh/+66AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAADBJREFUeAFjQAKsrCCitQFKhIY6MDCITVsAJMQYGBhDQ4GyUVFAiYgIBiihocGABgBYRwgQ1K+NPAAAAABJRU5ErkJggg==') /*iconNumber.png*/;
}

div[paneltype='4'] .xFixedTableContainer table tr[formulaType='T'] td[icon] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEVMaXGAAADAwMDh/+66AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAADdJREFUeAFjQAKMIILVAUQkgIgAICEYASQkQoBEaBiQyJoKVJYg2sDAuIDVAagWqIZpAdMKhBkA31IHQn/04ycAAAAASUVORK5CYII=') /*iconText.png*/;
}

/* paneltype = 5 ----> QueryAnalyzer */
div[paneltype='5'] .xFixedTableContainer table tr[queryType='B'] td[icon] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEVMaXGAAADAwMDh/+66AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAADZJREFUeAFjQAEsIEIIiBk9gIToAgYBhrAGBlHWKAYG1tAMoHBoAohYwMAAFAcSUiD1HMgmAADZjwXVpWBUBQAAAABJRU5ErkJggg==') /*iconBoolean.png*/;
}

div[paneltype='5'] .xFixedTableContainer table tr[queryType='N'] td[icon] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEVMaXGAAADAwMDh/+66AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAADBJREFUeAFjQAKsrCCitQFKhIY6MDCITVsAJMQYGBhDQ4GyUVFAiYgIBiihocGABgBYRwgQ1K+NPAAAAABJRU5ErkJggg==') /*iconNumber.png*/;
}

div[paneltype='5'] .xFixedTableContainer table tr[queryType='T'] td[icon] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAACVBMVEVMaXGAAADAwMDh/+66AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAADdJREFUeAFjQAKMIILVAUQkgIgAICEYASQkQoBEaBiQyJoKVJYg2sDAuIDVAagWqIZpAdMKhBkA31IHQn/04ycAAAAASUVORK5CYII=') /*iconText.png*/;
}

/* paneltype = 6 ----> Configuration */

/* paneltype = 7 ----> ServerLogs */
div[paneltype='7'] .xFixedTableContainer table tr[type='0'] td {
   background-color: white;
}

   div[paneltype='7'] .xFixedTableContainer table tr[type='0'] td[icon] {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAFVBMVEX///8AAAAAAAAAAAAAAABCQkJsbGyguecVAAAAB3RSTlMAFE1jZmZmn//RHgAAACNJREFUCNdjYCANMCobCYAZTK4hCmAGc1iqASoDLgVXTDwAACfUBB+NbIcaAAAAAElFTkSuQmCC') /*iconGridInfo.png*/;
      background-color: #ddd;
   }

div[paneltype='7'] .xFixedTableContainer table tr[type='1'] td {
   background-color: #fffdd6;
}

   div[paneltype='7'] .xFixedTableContainer table tr[type='1'] td[icon] {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEWZllr///+/vHGzr2msqWWjn2DPy3ro44nz7pDKMJ4FAAAABnRSTlMAAHDW8vuAeEYkAAAALklEQVQI12MQhAIGvAwm02AFMEMlvcwJzDDr6EgGM8I7OkpRGXApuGK4doJ2AQDaKhFFDVaFugAAAABJRU5ErkJggg==') /*iconGridWarning.png*/;
      background-color: #fcf8aa;
   }

div[paneltype='7'] .xFixedTableContainer table tr[type='2'] td {
   background-color: #ffd8d8;
}

   div[paneltype='7'] .xFixedTableContainer table tr[type='2'] td[icon] {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEWZWlr///+/cXGzaWmsZWWjYGDPenroiYnzkJABUoL5AAAABnRSTlMAAHDW8vuAeEYkAAAALklEQVQI12MQhAIGvAwm02AFMEMlvcwJzDDr6EgGM8I7OkpRGXApuGK4doJ2AQDaKhFFDVaFugAAAABJRU5ErkJggg==') /*iconGridError.png*/;
      background-color: #ffacac;
   }

div[paneltype='7'] .xFixedTableContainer table tr[type='3'] td {
   background-color: #eff8ff;
   color: #809eb6;
}

   div[paneltype='7'] .xFixedTableContainer table tr[type='3'] td[icon] {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEVXfJn///9tm79mkbNii6xchKN2qM+EvOiKxfNlNsUlAAAABnRSTlMAAHDW8vuAeEYkAAAALklEQVQI12MQhAIGvAwm02AFMEMlvcwJzDDr6EgGM8I7OkpRGXApuGK4doJ2AQDaKhFFDVaFugAAAABJRU5ErkJggg==') /*iconGridDiag.png*/;
      background-color: #d2e7f7;
   }


.xFixedTableContainer table tr[isSelected='true'] td {
   background-color: #d0e6f5 !important;
}

.xPager {
   display: inline-block;
   float: right;
   line-height: 17px;
}

.xPagerStatus {
    float: left;
}

.xPagerElement {
   position: relative;
   top: -1px;
   height: 15px;
   width: 12px;
   font-family: "Segoe UI", Tahoma, Arial, sans-serif;
   text-align: center;
   float: right;
   margin-right: 3px;
   margin-top: 3px;
}

.xPagerButton {
   padding-top: 3px;
   padding-bottom: 3px;
   border: solid 1px transparent;
   cursor: pointer;
   padding-left: 3px;
   padding-right: 3px;
}

   .xPagerButton[state='enabled']:hover {
      background-color: #efefef;
   }

   .xPagerButton[state='disabled'] {
      cursor: default;
   }

.xPagerIndexTextbox {
   top: -1px;
   height: 16px;
   width: 28px;
   font-size: 12px;
}

.xDiagSideBar {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 80px;
   background-color: rgb(68, 97, 175);
   overflow: auto;
   direction: rtl;
}

   .xDiagSideBar .xDialogToggleButton {
      width: 60px;
      height: auto;
      padding: 5px;
      text-align: center;
      text-transform: uppercase;
      border-style: none;
      background-color: rgb(68, 97, 175);
      color: white;
      -ms-user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
   }

      .xDiagSideBar .xDialogToggleButton:hover {
         background-color: rgb(90, 127, 229);
      }

      .xDiagSideBar .xDialogToggleButton[ischecked='true'] {
         background-color: rgb(218, 228, 255);
         color: rgb(50, 70, 128);
         font-weight: bold;
      }

         .xDiagSideBar .xDialogToggleButton[ischecked='true']:hover {
            background-color: rgb(218, 228, 255);
         }

      .xDiagSideBar .xDialogToggleButton[istab] {
         text-align: right;
         margin: 5px 0 0 5px;
         width: 65px;
         border-bottom-left-radius: 3px;
         -moz-border-radius-bottomleft: 3px;
         border-top-left-radius: 3px;
         -moz-border-radius-topleft: 3px;
         border-bottom-right-radius: 0;
         -moz-border-radius-bottomright: 0;
         border-top-right-radius: 0;
         -moz-border-radius-topright: 0;
      }

         .xDiagSideBar .xDialogToggleButton[istab][ischecked='true'] {
            background-color: white;
            color: rgb(68, 97, 175);
         }

.xDialogContainer[paneltype='4'] .xDiagSideBar {
   /* width: 106px; */
   min-width: 80px;
}

   .xDialogContainer[paneltype='4'] .xDiagSideBar .xDialogToggleButton[istab] {
      /* width: 91px; */
      min-width: 65px;
   }

   .xDialogContainer[paneltype='4'] .xDiagSideBar .xDialogToggleButton[istab][instType] {
      background-repeat: no-repeat;
      background-position: 5px, 5px;
   }
   .xDialogContainer[paneltype='4'] .xDiagSideBar .xDialogToggleButton[istab][instType='O'] {
      background-image: url('iconTokenOption.png');
   }
   .xDialogContainer[paneltype='4'] .xDiagSideBar .xDialogToggleButton[istab][instType='S'] {
      background-image: url('iconTokenSelection.png');
   }
   .xDialogContainer[paneltype='4'] .xDiagSideBar .xDialogToggleButton[istab][instType='R'] {
      background-image: url('iconTokenRule.png');
   }


.xDiagDetail {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: white;
   overflow: auto;
   height: 100%;
}

   .xDiagDetail .toolbar {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 30px;
      background-color: white;
      white-space: nowrap;
      border-bottom: 1px solid #efefef;
   }

      .xDiagDetail .toolbar > .btn,
      .xDiagDetail .toolbar > .groupHeader {
         position: relative;
         display: inline-block;
         top: 1px;
         height: 18px;
         font-family: "Segoe UI", Tahoma, Arial, sans-serif;
         font-size: 12px;
         text-align: center;
         float: left;
         margin: 3px 2px 0 1px;
         padding: 2px 2px 0 2px;
         border: solid 1px #ededed;
         background-color: #fafafa;
         color: black;
         border-radius: 2px;
         -moz-border-radius: 2px;
         cursor: pointer;
         width: auto;
      }

      .xDiagDetail .toolbar > .groupHeader {
         top: 3px;
         background-color: transparent;
         border-style: none;
      }

      .xDiagDetail .toolbar > .btn:first-child {
         margin-left: 5px;
      }


      .xDiagDetail .toolbar > .btn[ischecked="true"] {
         border-color: #cacaca !important;
         background-color: #d4defa;
      }

      .xDiagDetail .toolbar > .btn:hover {
         border-color: #ababab;
         background-color: #eaeaea;
         color: black;
      }

      .xDiagDetail .toolbar > .btn[ischecked="true"]:hover {
         border-color: #ababab !important;
         background-color: #e9edfa;
         color: black;
      }

      .xDiagDetail .toolbar > .xDialogButtonSpacer {
         /* include a spacer on the button */
         margin-right: 25px;
      }

   .xDiagDetail .body {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
   }

   /* if the .body is preceded via a .toolbar, bump the body down to accommodate */
   .xDiagDetail .toolbar ~ .body {
      top: 31px;
   }

   .xDiagDetail .header,
   .xDiagInspect .header {
      color: #222;
      font-size: 15px;
      padding: 2px 0 2px 5px;
      font-weight: 500;
   }

   .xDiagDetail .subheader,
   .xDiagInspect .subheader {
      color: #555;
      font-size: 13px;
      padding: 2px 0 2px 5px;
      font-weight: 500;
      font-variant: small-caps;
      background-color: #efefef;
   }

   .xDiagDetail .headerInfo,
   .xDiagInspect .headerInfo {
      color: #777;
      margin-left: 15px;
      margin-bottom: 2px;
   }

   .xDiagDetail .contentBlock,
   .xDiagInspect .contentBlock {
      margin-top: 6px;
      margin-bottom: 5px;
      padding-bottom: 8px;
      border-bottom: solid 1px #efefef;
   }

      .xDiagDetail .contentBlock table,
      .xDiagInspect .contentBlock table {
         border-collapse: collapse;
      }

         .xDiagDetail .contentBlock table td,
         .xDiagDetail .contentBlock table th .xDiagInspect .contentBlock table td,
         .xDiagInspect .contentBlock table th {
            padding-left: 5px;
            padding-right: 10px;
         }

         .xDiagDetail .contentBlock table th,
         .xDiagInspect .contentBlock table th {
            border-bottom: solid 1px #ddd;
            font-weight: 500;
            background-color: #eee;
            text-align: left;
         }

   .xDiagDetail .xSection,
   .xDiagInspect .xSection {
      margin-top: 0;
      margin-right: 5px;
      margin-left: 5px;
   }

.ruleTokenBlock {
   margin-left: 7px;
   padding-left: 8px;
}

.xDiagToken {
   position: relative;
   display: inline-block;
   margin: 2px;
   border: solid 1px transparent;
   white-space: nowrap;
   background-repeat: no-repeat;
   overflow: hidden;
   text-overflow: ellipsis;
}

   /* an 'info token' is one that has no mouse-over effects or adding spacing */
   .xDiagToken[infoToken] {
      margin: 0;
      border-style: none;
   }

   .xDiagToken[tokenType='Invalid'] > span:before,
   .xDiagToken[tokenType='Option'] > span:before,
   .xDiagToken[tokenType='Selection'] > span:before,
   .xDiagToken[tokenType='Category'] > span:before,
   .xDiagToken[tokenType='Formula'] > span:before,
   .xDiagToken[tokenType='Defn'] > span:before,
   .xDiagToken[tokenType='Rule'] > span:before,
   .xDiagToken[tokenType='Property'] > span:before,
   .xDiagToken[tokenType='Checkbox'] > span:before {
      position: absolute;
      top: 2px;
      left: 2px;
   }

   .xDiagToken[tokenType='SystemPropertiesNode'],
   .xDiagToken[tokenType='ContextPropertiesNode'],
   .xDiagToken[tokenType='CategoriesNode'] {
      height: 15px;
      line-height: 15px;
      padding: 2px 5px 2px 0;
      border-radius: 2px;
      -moz-border-radius: 2px;
      color: black;
   }

   .xDiagToken[tokenType='Operator'],
   .xDiagToken[tokenType='Literal'] {
      color: #555;
      height: 15px;
      line-height: 15px;
      padding: 2px 0;
   }

   .xDiagToken[tokenType='Invalid'],
   .xDiagToken[tokenType='Option'],
   .xDiagToken[tokenType='Selection'],
   .xDiagToken[tokenType='Category'],
   .xDiagToken[tokenType='Formula'],
   .xDiagToken[tokenType='Defn'],
   .xDiagToken[tokenType='Rule'],
   .xDiagToken[tokenType='Property'],
   .xDiagToken[tokenType='Checkbox'] {
      height: 15px;
      line-height: 15px;
      padding: 2px 5px 2px 20px;
      border-radius: 2px;
      -moz-border-radius: 2px;
      color: black;
   }

      .xDiagToken[tokenType='Invalid']:not([infoToken]):hover,
      .xDiagToken[tokenType='Option']:not([infoToken]):hover,
      .xDiagToken[tokenType='Selection']:not([infoToken]):hover,
      .xDiagToken[tokenType='Category']:not([infoToken]):hover,
      .xDiagToken[tokenType='Formula']:not([infoToken]):hover,
      .xDiagToken[tokenType='Defn']:not([infoToken]):hover,
      .xDiagToken[tokenType='Rule']:not([infoToken]):hover,
      .xDiagToken[tokenType='Property']:not([infoToken]):hover,
      .xDiagToken[tokenType='Checkbox']:not([infoToken]):hover {
         border: solid 1px lightgrey;
         background-color: ghostwhite;
         cursor: pointer;
      }

      .xDiagToken[tokenType='Invalid'] > span:before {
         content: url(iconTokenInvalid.png);
      }

      .xDiagToken[tokenType='Option'] > span:before {
         content: url(iconTokenOption.png);
      }

      .xDiagToken[tokenType='Selection'] > span:before {
         content: url(iconTokenSelection.png);
      }

      .xDiagToken[tokenType='Category'] > span:before {
         content: url(iconTokenCategory.png);
      }

      .xDiagToken[tokenType='Formula'] > span:before {
         content: url(iconTokenFormula.png);
      }

      .xDiagToken[tokenType='Defn'] > span:before {
         content: url(iconTokenDefinition.png);
      }

      .xDiagToken[tokenType='Rule'] > span:before {
         content: url(iconTokenRule.png);
      }

      .xDiagToken[tokenType='Property'] > span:before {
         content: url(iconTokenProperty.png);
      }

      .xDiagToken[tokenType='Checkbox'] > span:before {
         content: url(iconTokenCheckboxEmpty.png);
      }

      .xDiagToken[tokenType='Checkbox'][isChecked='1'] > span:before {
         content: url(iconTokenCheckboxChecked.png);
      }

   /* target the 'value' span that is immediately adjacent to the rule token */
   .xDiagToken + span.val {
      vertical-align: 8px;
      display: inline-block;
      color: green;
   }

      .xDiagToken + span.val:before {
         content: ' = ';
         color: darkgray;
         margin-left: -5px;
         margin-right: 3px;
      }

   .xDiagToken[ruleState='0'], /* False */
   .xDiagToken[ruleState='2'] { /* NotSelected */
   }

   .xDiagToken[ruleState='1'], /* True */
   .xDiagToken[ruleState='3'] { /* True */
      color: blue;
   }

   .xDiagToken[ruleState='4'] { /* Excluded */
      color: darkgray;
   }

   .xDiagToken[ruleState='5'] { /* Error */
      color: red;
   }

   .xDiagToken[ruleState='6'] { /* NotInConfig */
      color: darkgray;
      text-decoration: line-through;
   }

   .xDiagToken[emptyNode='true'] {
      filter: alpha(opacity=25) !important;
      -moz-opacity: .25 !important;
      opacity: .25 !important;
   }

.xDialogContainer[paneltype='4'] .xDiagToken {
   overflow: visible;
}

.xDiagStructuredText {
}

.xDiagStructuredText > div {
   font-family: Consolas, Courier New, monospace;
   font-size: 12px;
   white-space: pre;
   margin: 5px;
}

.xDiagTipButton {
   background-color: ghostwhite;
   border: solid 1px darkgrey;
}

   .xDiagTipButton:hover {
      background-color: lightgrey;
   }

.xDiagInspect {
   overflow: auto;
   height: 100%;
}

.xInspectTitlebar {
   height: 26px;
   white-space: nowrap;
   overflow: hidden;
   background-color: rgb(218, 228, 255);
   border-bottom: solid 1px darkgrey;
   margin-bottom: 7px;
}

.xInspectTitlebarText {
   color: rgb(50, 70, 128);
   font-family: "Segoe UI", Tahoma, Arial, sans-serif;
   font-size: 13px;
   position: relative;
   top: 5px;
   left: 5px;
   text-transform: uppercase;
}

.xPropInspectGrid {
   margin-left: 10px;
   border-collapse: collapse;
   width: 90%;
}

   .xPropInspectGrid th,
   .xPropInspectGrid td {
      border: 1px solid black;
      text-align: left;
      padding: 5px;
   }

   .xPropInspectGrid th {
      background-color: ghostwhite;
      font-size: 12px;
      text-transform: uppercase;
   }

   .xPropInspectGrid tr td {
      background-color: white;
   }

   .xPropInspectGrid tr.alt td {
      background-color: azure;
   }


/* target the 'value' span that is immediately adjacent to the rule token */
.xRuleToken + span.val {
   vertical-align: 4px;
   color: green;
}

   .xRuleToken + span.val:before {
      content: ' = ';
      color: darkgray;
   }


.xRuleFilter {
   position: absolute;
   top: 4px;
   right: 4px;
   z-index: 10;
}

.xRuleSearch {
   position: relative;
   top: 2px;
   z-index: 10;
   margin-left: 20px;
   width: 200px;
   height: 16px !important;
   /*background-image: url(iconMagGlass.png);
   background-position: right center;
   background-repeat: no-repeat;*/
   background-color: white !important;
   padding-left: 4px !important;
   padding-right: 4px !important;
   border: solid 1px #666 !important;
   vertical-align: middle !important;
}

   .xRuleSearch:hover {
      padding-left: 4px !important;
   }

   .xRuleSearch[disabled] {
      background-color: lightgrey !important;
   }

/* TODO: Combine the detail search styles (rule search may need to be updated anyway)*/
.xRuleDetailSearch {
   position: absolute;
   float: right;
   background-color: #4461af;
   z-index: 99999;
   border-left: solid 1px #171717;
   border-bottom: solid 1px #171717;
   -moz-border-bottom-left-radius: 2px;
   border-bottom-left-radius: 2px;
   padding: 4px;
}

   .xRuleDetailSearch input {
      width: 167px;
   }

.xFormulaDetailSearch {
   float: right;
   background-color: #4461af;
   z-index: 99999;
   border-left: solid 1px #171717;
   border-bottom: solid 1px #171717;
   -moz-border-bottom-left-radius: 2px;
   border-bottom-left-radius: 2px;
   padding: 4px;
}

.xRuleGraphInfoBlock {
   position: absolute;
   left: 0;
   top: 0;
   margin-bottom: 0;
   width: 100%;
   background-color: white;
   margin-top: 0 !important;
}

.xSection > #outerGraphContainer {
   position: absolute;
   top: 66px;
   left: 0;
   right: 0;
   bottom: 0;
}

.xDiagDetailGraphView {
   overflow: hidden;
}

.xDiagTip {
   position: absolute;
   background-color: white;
   z-index: 99999;
   border: 1px solid black;
   -moz-border-radius: 2px;
   border-radius: 2px;
   max-width: 75%;
   overflow: hidden;
}

   .xDiagTip > .xDiagToken {
      /* make sure the ellipsis shows properly by setting display to 'block', overriding the 'inline-block' default */
      display: block;
   }


   .xDiagTip .xDiagTipDetail {
      color: black;
      background-color: #eaeaea;
      border-top: solid 1px #ababab;
   }

      .xDiagTip .xDiagTipDetail table {
         width: 100%;
         border-collapse: collapse;
      }

         .xDiagTip .xDiagTipDetail table td {
            padding: 3px 6px 3px 3px;
            border-bottom: solid 1px #eaeaea;
         }

         .xDiagTip .xDiagTipDetail table tr:last-child td {
            border-bottom-style: none;
         }

         .xDiagTip .xDiagTipDetail table tr > td:not(:first-child) {
            background-color: white;
         }

.xLogControls,
.xRuleControls {
   display: inline-block;
   position: absolute;
   z-index: 99999;
   right: 0;
   top: 0;
   background-color: gainsboro;
   border: solid 1px darkgray;
   border-top: none;
   border-right: none;
   -moz-border-bottom-left-radius: 2px;
   border-bottom-left-radius: 2px;
}

   .xLogControls .xDialogImageButton,
   .xRuleControls .xDialogImageButton {
      position: relative;
      display: inline-block;
      cursor: pointer;
      height: 18px;
      padding-top: 2px;
   }

      .xLogControls .xDialogImageButton:hover,
      .xRuleControls .xDialogImageButton:hover {
         background-color: #efefef;
      }

.xTree ul,
.xTree li {
   list-style-type: none;
}

.xTreeRoot {
   margin: 5px;
   padding: 0;
}

.xTreeBranch {
   padding: 0;
   margin-left: 25px;
}

.xTreeLeaf {
   margin-left: 16px;
}

.xTreeNodeExpand,
.xTreeNodeCollapse {
   vertical-align: 7px;
}

.xExpandIcon {
   margin-right: 7px;
   content: url('logDetailPlus.png');
}

   .xExpandIcon.expanded {
      content: url('logDetailMinus.png');
   }

.xExpandableTree li {
   list-style: none;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

   .xExpandableTree li ul {
      display: none;
   }

   .xExpandableTree li > a {
      display: flex;
   }

      .xExpandableTree li > a:before {
         margin-right: 7px;
         content: url('logDetailPlus.png');
      }

   .xExpandableTree li.xTreeNodeExpand > a:before {
      content: url('logDetailMinus.png');
   }

   .xExpandableTree li > a > span {
      display: flex;
   }

   .xExpandableTree li.xTreeNodeExpand > ul {
      display: block;
   }

.xExpandableTree .xDiagToken {
   display: flex;
   padding-left: 0;
}

   .xExpandableTree .xDiagToken > span {
      display: flex;
   }

      .xExpandableTree .xDiagToken > span:before {
         margin-right: 7px;
         position: static;
      }

.xInspectHeader {
   background-color: gainsboro;
   height: 25px;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   padding: 0 10px;
}

table.xInspect {
   width: 100%;
   border-collapse: collapse;
}

   table.xInspect td {
      padding: 3px 6px 3px 3px;
      border-bottom: solid 1px #eaeaea;
      border-right: solid 1px #f0f0f0;
   }

   table.xInspect tr:not(:first-of-type) td:first-of-type {
      background-color: #d4defa;
      border-right: solid 1px #afc3fa;
      border-bottom: solid 1px #d4defa;
      white-space: nowrap;
      /* setting the width to 0 will cause the cell to size to contents */
      width: 0;
      min-width: 100px;
      padding-right: 8px;
   }

   table.xInspect td.xHeader {
      background-color: #4461af !important;
      color: white !important;
      font-size: 9px;
      font-weight: normal;
      text-transform: uppercase;
      padding: 2px;
      cursor: pointer;
   }

   table.xInspect tr[propid] td.na {
      background-color: #fafafa;
   }

   table.xInspect tr[propid] td:first-child:after {
      content: ':';
   }

   table.xInspect tr[propid]:hover td:not(:first-of-type) {
      background-color: #f6fbc7;
   }

   table.xInspect tr[propid]:hover td:first-of-type {
      background-color: burlywood;
   }

   table.xInspect tr:last-child td {
      border-bottom-style: none;
   }

   table.xInspect tr > td:not(:first-of-type) {
      background-color: white;
   }

   table.xInspect tr:first-of-type td {
      background-color: #eaeaea;
   }

      table.xInspect tr:first-of-type td:not(:first-of-type) {
         font-weight: bold;
         cursor: pointer;
      }

         table.xInspect tr:first-of-type td:not(:first-of-type):hover {
            background-color: burlywood;
         }

   table.xInspect tr > td > a {
      text-decoration: none;
      color: maroon;
   }

      table.xInspect tr > td > a:hover {
         text-decoration: underline;
      }

div.xItemList {
   margin-left: 25px;
   white-space: nowrap;
}

   div.xItemList img.xItemAction {
      cursor: pointer;
      display: inline-block;
      float: left;
      margin-right: 6px;
      margin-top: 5px;
   }

div.diagMenu {
   z-index: 99999;
   position: absolute;
   border: solid 1px black;
   background-color: white;
   /* max-height? */
   overflow: auto;
   white-space: nowrap;
}

   div.diagMenu div.sep {
      height: 1px;
      border-top: solid 1px #efefef;
      border-bottom: solid 1px #efefef;
      background-color: black;
   }

   div.diagMenu div.item {
      cursor: pointer;
      padding: 5px;
      color: black;
      position: relative;
   }

      div.diagMenu div.item:hover {
         background-color: burlywood;
      }

      div.diagMenu div.item[icon] {
         height: 15px;
         line-height: 15px;
         padding-left: 20px;
      }

         div.diagMenu div.item[icon] > span:before {
            position: absolute;
            top: 5px;
            left: 3px;
         }

      div.diagMenu div.item[icon='del'] > span:before {
         content: url(iconDelete.png);
      }

      div.diagMenu div.item[icon='mag'] > span:before {
         content: url(iconMagGlass.png);
      }

.xTreeNode[xNodeSelected='true'] {
   background-color: #bddbff;
}

   .xTooltip > .xNoSelContents {
      margin-top: 4px;
      border-top: burlywood 1px solid;
   }

   .xTooltip > .xNoSelContents > img {
      float: left;
      margin-top: 6px;
      margin-right: 6px;
   }

   .xTooltip > .xNoSelContents > div {
      margin-top: 6px;
   }


.xDiagContent[paneltype='1'] {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

   .xDiagContent[paneltype='1'] div.watermarkPrompt {
      margin-top: 20px;
   }

.xDiagContent[paneltype='4'], .xDiagContent[paneltype='5'] {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
}

.xDiagDetail .toolbar > .filterBtn {
   background-image: url('btnFilter.png');
   background-position: 2px 2px;
   background-repeat: no-repeat;
   padding-left: 22px;
}

.xDiagDetail .toolbar > .deleteBtn {
   background-image: url('iconDelete.png');
   background-position: 2px 2px;
   background-repeat: no-repeat;
   padding-left: 22px;
}


.xDiagDetail .toolbar > input[type='text'] {
   margin-top: 4px;
   margin-left: 5px;
   height: 16px;
}

.xFormulaTypeFilter {
   height: 22px;
   width: 100px;
   margin-left: 5px;
}

.xFormulaTokens {
   padding: 10px 10px 0 15px;
}

.xFormulaTokens .xDiagToken,
.xBasic[paneltype='3'] .xDiagToken {
   margin: 0;
   padding: 2px 0 2px 16px;
}

.xFormulaTokens .xDiagToken > span::before,
.xBasic[paneltype='3'] .xDiagToken > span::before {
   left: -1px;
}

.xFormulaTokens > span {
   margin: -2px;
}

.panel1Cover,
.panel2Cover {
   background-color: transparent;
   z-index: 100000;
   position: fixed;
}

#pgTabs {
   border-bottom: 1px solid #939bd2;
   flex-wrap: wrap;
}

.tab-control {
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
   height: 100%;
}

.tab-control.tab-control-left,
.tab-control.tab-control-right {
   flex-direction: row;
}

.tab-control.tab-control-top,
.tab-control.tab-control-bottom {
   flex-direction: column;
}

.tab-panes {
   flex: 1;
   vertical-align: top;
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.tab-panes.tab-panes-bottom {
   display: block;
   height: auto;
}

.tab-pane {
   display: none;
   vertical-align: top;
   overflow: hidden;
   width: 100%;
   height: 100%;
}

.tab-pane.tab-pane-bottom {
   height: auto;
}

.tab-pane.tab-pane.selected {
   display: block;
}

.tab-strip {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   background-image: url(actionTabStrip.png);
   background-repeat: repeat;
}

.tab-strip.tab-strip-left {
   flex-direction: column;
   border-bottom: 1px solid #939bd2;
}

.tab-strip.tab-strip-top {
   flex-direction: row;
}

.tab-strip.tab-strip-right {
   flex-direction: column;
}

.tab-strip.tab-strip-bottom {
   flex-direction: row;
   border-top: 1px solid #939bd2;
}

.action-panels .tab-strip.tab-strip-left,
.action-panels .tab-strip.tab-strip-right {
   width: 30px;
}

.tab-item {
   cursor: pointer;
   color: #444444;
   background-color: #efefef;
   text-overflow: ellipsis;
   display: inline-block;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border: #939bd2 solid 1px;
   white-space: nowrap;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -user-select: none;
}
.tab-item:focus {
   outline: none;
}

.tab-item.tab-item-left {
   display: inline-block;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   padding: 12px 4px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top-style: none;

}

.tab-item.tab-item-top {
   padding: 4px 12px;
   margin-bottom: -1px;
   border-bottom-color: #c6c6c6;
}

.tab-item.tab-item-right {
   display: inline-block;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   padding: 12px 4px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top-style: none;
}

.tab-item.tab-item-bottom {
   display: inline;
   padding: 4px 12px;
   margin-top: -1px;
}

.tab-item:hover {
   background-color: #d7ebf9;
}

.tab-item.error,
.tab-item.warn {
   background-color: red;
   color: white;
}

.tab-item.tab-item-top.error,
.tab-item.tab-item-top.warn {
   border-top-color: #aa0000;
   border-right-color: #aa0000;
   border-left-color: #aa0000;
}

.tab-item.selected {
   background-color: white;
}

.tab-item.callout {
    animation: tab-item-flash-unselected .75s infinite ease-in-out alternate;
}

.tab-item.selected.callout {
    animation: tab-item-flash-selected .75s infinite ease-in-out alternate;
}

@keyframes tab-item-flash-unselected {
    from {
        background-color: #efefef;
    }
    to {
        background-color: rgba(255, 229, 147, 1);
    }
}

@keyframes tab-item-flash-selected {
    from {
        background-color: white;
    }
    to {
        background-color: rgba(255, 229, 147, 1);
    }
}


.tab-item.tab-item-left.selected {
   border-right: transparent solid 1px;
   padding: 12px 6px 12px 4px;
}

.tab-item.tab-item-top.selected {
   border-bottom: transparent solid 1px;
   padding: 6px 12px 4px 12px;
}

.tab-item.tab-item-right.selected {
   border-left: transparent solid 1px;
   padding: 12px 6px 12px 4px;
}

.tab-item.tab-item-bottom.selected {
   border-top: transparent solid 1px;
   padding: 4px 12px 6px 12px;
}

/* Firefox does not properly calculate initial size of tabs with writing-mode: vertical-rl
   Tested with FF 56.0.2 (still a problem)
   For now the below explicit width is required
*/
@-moz-document url-prefix() {
   .tab-item.tab-item-left,
   .tab-item.tab-item-right {
      width: 15px;
   }
   .tab-item.tab-item-left.selected,
   .tab-item.tab-item-right.selected {
      width: 17px;
   }
}

.tab-item.selected.error,
.tab-item.selected.warn {
   background-color: #ff6666;
}

.action-panels {
   font-size: 11px;
}
.action-panels:focus {
   outline: none;
}

.action-panels-root {
   width: 100%;
   height: 100%;
}

.action-panels {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.action-panel {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   height: 100%;
   text-align: center;
   z-index: 0; /* Set to default, overriding xDialogFrame selector */
   background-color: white;
}

.action-panel > .action-panel-titlebar {
   height: 40px;
   white-space: nowrap;
   overflow: hidden;
   background-color: #002050;
   text-align: left;
}

.action-panel > .action-panel-titlebar > .action-panel-titlebar-text {
   display: inline-block;
   color: white;
   margin-top: 10px;
   margin-left: 12px;
   text-transform: uppercase;
   font-weight: 600;
}

.action-panel-inner {
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
}

.search-action-panel > .search-box {
   width: calc(100% - 80px);
   margin: 30px;
   margin-right: 50px;
}

.search-criteria {
   text-align: left;
   margin: 10px 20px;
   white-space: nowrap;
}

.search-criteria > .search-criteria-types {
   margin-bottom: 10px;
}

.search-criteria-expander {
   margin: 0 20px;
}

.search-results {
   margin-top: 30px;
   padding: 1px;
}

.search-results-table {
   table-layout: fixed;
   width: 100%;
   -webkit-border-horizontal-spacing: 0;
   -webkit-border-vertical-spacing: 0;
   border-spacing: 0;
   text-align: left;
}

.search-results-table thead tr {
   background-color: gainsboro;
}

.search-results-table th:first-child {
   width: 16px; /* Shorten the 'Type' column as it only shows an icon'*/
}

.search-results th,
.search-results td {
   padding: 1px 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
}

.search-results th:not(:last-child),
.search-results td:not(:last-child) {
   border-right: solid 1px gainsboro;
}

.search-results th {
   padding: 3px 8px;
}

.search-results th.sortable {
   cursor: pointer;
}

.table-header-glyph {
   display: inline-block;
   margin-left: 2px;
   width: 12px;
   height: 12px;
   background-size: contain;
}

.table-header-glyph.ascending {
   background-image: url('/experlogix/site/styles/Core/iconArrowUp.png');
}

.table-header-glyph.descending {
   background-image: url('/experlogix/site/styles/Core/iconArrowDown.png');
}

.search-result {
   color: #666666;
   padding: 6px 4px;
   cursor: pointer;
}

.search-result.disabled {
   -moz-opacity: .25;
   opacity: .25;
}

.search-result.error {
   color: red;
}

.search-result:hover {
   background-color: #f4d89d;
}

.search-result .search-result-glyph {
   display: inline-block;
   margin-bottom: -2px;
   width: 16px;
   height: 16px;
}

.search-result .search-result-glyph.lineitem {
   background-image: url('/experlogix/site/styles/Core/iconTokenLineItem.png');
}

.search-result .search-result-glyph.series {
   background-image: url('/experlogix/site/styles/Core/iconTokenSeries.png');
}

.search-result .search-result-glyph.model {
   background-image: url('/experlogix/site/styles/Core/iconTokenModel.png');
}

.search-result .search-result-glyph.modellink {
   background-image: url('/experlogix/site/styles/Core/iconTokenModelLink.png');
}

.search-result .search-result-glyph.category {
   background-image: url('/experlogix/site/styles/Core/iconTokenCategory.png');
}

.search-result .search-result-glyph.option {
   background-image: url('/experlogix/site/styles/Core/iconTokenOption.png');
}

.search-result .search-result-glyph.option.selected {
   background-image: url('/experlogix/site/styles/Core/iconTokenSelection.png');
}

.search-result .search-result-glyph.property {
   background-image: url('/experlogix/site/styles/Core/iconTokenProperty.png');
}

.flat-button {
   position: relative;
   display: inline-block;
   font-family: "Segoe UI", Tahoma, Arial, sans-serif;
   font-size: 12px;
   text-align: center;
   padding: 2px 4px;
   color: black;
   background-color: white;
   border-radius: 2px;
   -moz-border-radius: 2px;
   user-select: none;
   cursor: pointer;
   background-repeat: no-repeat;
}

.flat-button:hover {
   background-color: lightgray;
}

.flat-button.disabled {
   color: gray;
   cursor: default;
}

.close-button {
   background-image: url('/experlogix/site/styles/Core/iconClose.svg');
   background-position: 8px 6px;
   width: 18px;
   height: 18px;
}

.action-panel .close-button {
   margin: 9px;
   position: absolute;
   right: 0;
}

.search-results-none {
   font-size: 27px;
   color: #d6d6d6;
   font-style: italic;
   padding-top: 15px;
}

.results-popup-disclaimer {
   margin-top: 1px;
   font-size: 11px;
   color: black;
   background-color: cornsilk;
   border: burlywood 1px solid;
   font-weight: normal;
   padding-top: 2px;
   padding-bottom: 2px;
   text-align: center;
}

.search-box {
   display: inline-block;
}

.search-box > input {
   width: 100%;
   background-image: url('/experlogix/site/styles/Core/iconMagnify.png');
   background-position: right center;
   background-repeat: no-repeat;
   background-size: contain;
   font-size: 14px;
   padding-right: 20px;
}


.search-box > input::-ms-clear {
   display: none; /* Do not display IE's clear X button in searchbox input */
}

.search-box > input:hover {
   background-image: url('/experlogix/site/styles/Core/iconMagnifyHot.png');
}

.search-box > input:focus {
   background-image: url('/experlogix/site/styles/Core/iconMagnifyHot.png');
}

.search-results-footer {
   display: inline-block;
   width: 100%;
   text-align: left;
   padding-top: 6px;
}

.search-results-footer > .results-info {
   float: left;
   white-space: nowrap;
   line-height: 19px;
}

.search-highlight,
.xRgn.search-highlight,
.xRgn.search-highlight[err],
.xRgn.search-highlight:not([err]),
.xRgn.search-highlight[joinerr] {
   background-color: rgba(155,200,255,1);
}

.pager {
   float: right;
   white-space: nowrap;
}

.pager > .pager-page {
   width: 30px;
   vertical-align: top;
   text-align: center;
}

.pager > .flat-button {
   width: 16px;
   height: 16px;
   background-repeat: no-repeat;
   background-size: contain;
}

.pager > .flat-button.first {
   background-image: url('/experlogix/site/styles/Core/iconFirst.png');
}

.pager > .flat-button.first.disabled {
   background-image: url('/experlogix/site/styles/Core/iconFirstDis.png');
}

.pager > .flat-button.prev {
   background-image: url('/experlogix/site/styles/Core/iconPrev.png');
}

.pager > .flat-button.prev.disabled {
   background-image: url('/experlogix/site/styles/Core/iconPrevDis.png');
}

.pager > .flat-button.next {
   background-image: url('/experlogix/site/styles/Core/iconNext.png');
}

.pager > .flat-button.next.disabled {
   background-image: url('/experlogix/site/styles/Core/iconNextDis.png');
}

.pager > .flat-button.last {
   background-image: url('/experlogix/site/styles/Core/iconLast.png');
}

.pager > .flat-button.last.disabled {
   background-image: url('/experlogix/site/styles/Core/iconLastDis.png');
}

/*.pager button {
   margin: 0 1px;
   padding: 2px 4px;
   color: black;
   background-color: white;
   border: none;
   border-radius: 2px;
   font-weight: bold;
   font-family: "Segoe UI", Tahoma, Arial, sans-serif;
   font-size: 12px;
   cursor: pointer;
   user-select: none;
   min-width: 30px;
}*/

.pager button.active {
   background-color: cornsilk;
}

/*.pager button[disabled] {
   color: lightgray;
   cursor: default;
}*/

.expander {
   display: block;
}

.expander-header {
   text-align: left;
   white-space: nowrap;
   border-bottom: solid 1px lightgray;
}

.expander-header:hover {
   background-color: cornsilk;
}

.expander-header > .expander-glyph {
   display: inline-block;
   margin-bottom: -2px;
   width: 16px;
   height: 16px;
}

.expander-header.expanded > .expander-glyph {
   background-image: url('/experlogix/site/styles/Core/iconArrowDown.png');
}

.expander-header.collapsed > .expander-glyph {
   background-image: url('/experlogix/site/styles/Core/iconArrowRight.png');
}

.expander-content.expanded {
   display: block;
}

.expander-content.collapsed {
   display: none;
}

.DisplayCharacterCountDIV {
   font-size: 10px;
   color: #b3b1b1;
   padding-left: 3px;
   padding-top: 2px;
   margin-top: -20px;
}

.spinner.loading {
   padding: 50px;
   text-align: center;
}

.loading-text {
   width: 90px;
   position: absolute;
   top: calc(50% - 15px);
   left: calc(50% - 52px);
   text-align: center;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 14px;
}

.spinner.loading:before {
   content: "";
   height: 90px;
   width: 90px;
   margin: -15px auto auto -15px;
   position: absolute;
   top: calc(50% - 45px);
   left: calc(50% - 45px);
   border-width: 10px;
   border-style: solid;
   border-color: #2180c0 #ccc #ccc;
   border-radius: 100%;
   background-color: white;
   opacity: 0.85;
   animation: rotation 1.5s infinite linear;
}

@keyframes rotation {
   from {
      transform: rotate(0);
   }
   to {
      transform: rotate(359deg);
   }
}

.messages-icon-wrapper {
    display: block; /* IE requires we explictly set the display */
    position: relative;
}

.messages-count-label {
    display: block; /* IE requires we explictly set the display */
    writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb; /* lr-tb is deprecated; IE does not recognize horizontal-tb and uses the old writing mode */
    font-size: 9px;
    text-align: center;
    width: 20px;
    height: 17px;
    line-height: 14px;
    background-image: url(iconMessage.png);
    background-size: 20px;
    margin: 0 -2px;
    font-weight: 500;
}

.messages-action-panel {
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   text-align: left;
   font-size: 13px;
}

.messages-action-panel .inner {
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
}

.button-bar {
   display: flex;
   align-items: center;
   padding: 6px;
   min-height: 20px;
}

.button-bar .btn {
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   user-select: none;
   text-decoration: none;
   white-space: nowrap;
   padding: 1px;
   margin-left: 1px;
   margin-right: 1px;
   height: 20px;
   line-height: 20px;
}

.messages-action-panel .button-bar > a.align-right {
   margin-left: auto;
}

.messages-action-panel .xRgn:not(.xRgnStart) {
    margin-top: 0; /* usage of .xRgn causes margin */
}

.messages-action-panel .no-messages {
    padding: 8px;
    font-size: 23px;
    color: #d6d6d6;
    font-style: italic;
}

.messages-action-panel .ulist {
   padding-inline-start: 0;
   padding-inline-end: 0;
   margin: 5px 12px 0 25px;
}

.messages-action-panel .ulist ul {
   padding-inline-start: 25px;
}

.messages-action-panel span.message-header,
.messages-action-panel span.message-header {
   display: block;
   margin-top: 4px;
   margin-bottom: 4px;
}

.messages-action-panel span.message-highlight {
   font-weight: 700;
   color: #0072C5;
}

.messages-action-panel span.message-link {
   font-weight: normal;
   color: #0072C5;
   cursor: pointer;
}

.messages-action-panel span.message-link:hover {
   text-decoration: underline;
}

/* =============================================================== */
/* Placeholder text color/style across various browsers */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #dfe1e2;
    font-style: italic;
}

::-moz-placeholder { /* Firefox 19+ */
   color: #dfe1e2;
   font-style: italic;
}

:-ms-input-placeholder { /* IE 10+ */
   color: #dfe1e2;
   font-style: italic;
}

:-moz-placeholder { /* Firefox 18- */
   color: #dfe1e2;
   font-style: italic;
}

.xInputPlaceholder:empty:before {
   content: attr(placeholder);
   color: #dfe1e2;
   font-style: italic;
}
/* =============================================================== */

/* Quick Action Bar - BEGIN ====================================================== */
.xCfg > .xQAB {
   display: none;
   position: absolute;
   top: 92px;
   right: 0;
   left: 0;
   height: 45px;
   line-height: 45px;
   white-space: nowrap;
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   text-transform: uppercase;
}

.xQABBtns { /* container for buttons within the Quick Action Bar */
   position: absolute;
   left: 15px;
   top: 0;
   bottom: 0;
   z-index: 1;
   overflow: hidden;
}

.xCfg > .xQAB > .xQABBtns > * {
   display: inline;
   /* padding: 0 7px; */
}

.xCfg > .xQAB > .xQABBtns > img,
.xCfg > .xQAB > .xQABBtns > div {
   margin-right: 4px;
}

.xCfg > .xQAB img {
   vertical-align: middle;
   margin-top: -3px;
}

.xCfg > .xQABVisible {
   display: block;
}

.xCfg > .xQAB_CBFilter {
   top: 127px;
}

.xCfg > .xQAB_CategoryBar {
   top: 149px;
}

.xCfg > .xCbFilter.xQAB_CBFilter[withresults] + .xCb.xQAB_CategoryBar {
   top: 172px;
}

.xCfg > .xQAB_Body {
   top: 127px;
}

.xQAB_LabelIMG {
   margin-right: 5px;
   height: 16px
}

.xQAB_ButtonIMG {
   margin-right: 5px;
   height: 16px
}

.xQAB_Separator {
   margin: 0 4px;
}

.xQABButtonDisabled {
   color: #949494;
}

.xQABButtonWithImageDisabled {
   color: #949494;
}

.xQABBtns > div.xQABButton:hover {
   background-color: #d7ebf9;
}

.xQABBtns > div.xQABButtonWithImage:hover {
   background-color: #d7ebf9;
}
/* Quick Action Bar - END ====================================================== */

/* =============================================================== */
/* RANGE SLIDER */
input[type=range]::-ms-track {
   width: 100%;
   height: 100%;
   -webkit-appearance: none;
   margin: 0;
   padding: 0;
   border: 0 none;
   background: transparent;
   color: transparent;
   overflow: visible;
}

input[type=range]::-moz-range-track {
   width: 100%;
   height: 100%;
   -moz-appearance: none;
   margin: 0;
   padding: 0;
   border: 0 none;
   background: transparent;
   color: transparent;
   overflow: visible;
}

input[type=range] {
   width: 100%;
   height: 100%;
   -webkit-appearance: none;
   margin: 0;
   padding: 0;
   border: 0 none;
   background: transparent;
   color: transparent;
   overflow: visible;
}

input[type=range]:focus::-webkit-slider-runnable-track {
   background: transparent;
   border: transparent;
}

input[type=range]:focus {
   outline: none;
}

input[type=range]::-moz-focus-outer {
   border: 0 none;
}

input[type=range]::-ms-thumb {
   width: 20px;
   height: 20px;
   border-radius: 0;
   border: 0 none;
   background: transparent;
}

input[type=range]::-moz-range-thumb {
   width: 20px;
   height: 20px;
   border-radius: 0;
   border: 0 none;
   background: transparent;
}

input[type=range]::-webkit-slider-thumb {
   width: 20px;
   height: 20px;
   border-radius: 0;
   border: 0 none;
   background: transparent;
   -webkit-appearance: none;
}

input[type=range]::-ms-fill-lower {
   background: transparent;
   border: 0 none;
}

input[type=range]::-ms-fill-upper {
   background: transparent;
   border: 0 none;
}

input[type=range]::-ms-tooltip {
   display: none;
}

.xSliderShell {
   height: 20px;
   width: 130px;
   margin: 1px;
   border: 0 none;
   position: relative;
   left: 0;
   top: 0;
   overflow: visible;
}

.xSliderShell[focus] {
   border: 1px solid lightgray;
   margin: 0;
}

.xSlider {
   position: absolute;
   left: 0;
   top: 0;
   overflow: visible;
}

.xSliderTrack {
   background-color: transparent;
   position: absolute;
   height: 6px;
}

.xSliderFill {
   position: absolute;
   pointer-events: none;
   height: 6px;
}

.xSliderThumb {
   width: 18px;
   height: 18px;
   position: absolute;
   left: 0;
   top: 0;
   padding: 0;
   margin: 0;
   text-align: center;
   pointer-events: none;
}

table.xCatGrid .xCatGridInner td[error] .xSliderThumb,
table.xCatGrid .xCatGridInner td[error] .xSliderFill,
table.xCatGrid tr[error] td .xSliderThumb,
table.xCatGrid tr[error] td .xSliderFill,
table.xCatGrid tr[error] .xSliderFill,
table.xCatGrid tr[error] .xSliderThumb,
.xOBErr .xSliderFill,
.xOBErr .xSliderThumb {
   background-color: #ff6666;
}

.xSliderValue {
   width: 20px;
   height: 20px;
   line-height: 20px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 10px;
   position: absolute;
   left: 0;
   top: 0;
   border: 0 none;
   padding: 0;
   margin: 0;
   text-align: center;
   pointer-events: none;
}

.xOBErr .xSliderValue {
   color: white;
}

.xSliderValue[vis='0'] {
   display: none;
}
/* END RANGE SLIDER */

/* QUICK VIEW */
.xQV {
   color: #666;
   font-size: 12px;
   cursor: default;
   height: 100%;
   background-color: white;
   margin: 0;
   font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.xQV .infoBar {
   padding: 5px 10px;
   border-bottom: 1px solid saddlebrown;
   background-color: cornsilk;
   color: saddlebrown;
   font-size: 15px;
   background-image: url(iconInformation.png);
   background-repeat: no-repeat;
   background-position: 7px 7px;
}

.xQV .infoBar span {
   margin-left: 20px;
   display: block;
}

@media print {
   .xQV .infoBar span {
      /* remove the margin provided for the image */
      margin-left: 0;
   }
}

.xQV .modelHeader {
   font-weight: lighter;
   line-height: 30px;
   padding: 10px 15px;
   color: #262626;
}

.xQV .modelHeader.l1 {
   font-size: 27px;
}

.xQV .modelHeader.l2 {
   font-size: 24px;
}

.xQV .modelHeader.l3 {
   font-size: 21px;
}

.xQV .modelHeader.l4 {
   font-size: 18px;
}

.xQV .modelHeader.l5 {
   font-size: 15px;
}

.xQV .cat {
   font-size: 12px;
   color: #666;
   text-transform: uppercase;
   margin-top: 8px;
   font-weight: bolder;
   display: block;
   padding: 5px 10px;
}

.xQV .opt {
   overflow: hidden;
   margin: 4px 0 -1px;
   padding: 0 15px;
}

.xQV .opt div {
   background-color: inherit;
   padding: 4px 6px;
}

.xQV .opt .optDsc,
.xQV .opt .child-config {
   border: 1px solid transparent;
   transition: 0.3s;
   height: 16px;
}

.xQV .opt .optDsc.hasProps,
.xQV .opt .child-config {
   cursor: pointer;
}

.xQV .opt .optDsc.hasProps:hover,
.xQV .opt .child-config:hover {
   background-color: #ddd;
}

.xQV .opt .optDsc.active,
.xQV .opt .child-config.active {
   border: 1px solid #ddd;
   border-top: 2px solid #ddd;
   border-bottom: 1px solid #fff;
   padding-top: 3px;
}

.xQV .child-config,
.xQV .optDsc {
   float: left;
}

.xQV .optQty,
.xQV .optPrc {
   float: right;
}

.xQV .optPrc {
   min-width: 65px;
   text-align: right;
}

.xQV .total {
   height: 24px;
   color: #262626;
   background-color: #f8f8f8;
   border-top: solid 1px #d6d6d6;
   position: relative;
}

.xQV .totalCap {
   position: absolute;
   text-transform: uppercase;
   font-weight: bolder;
   top: 3px;
   left: 4px;
}

.xQV .totalPrc {
   position: absolute;
   right: 21px;
   width: 100px;
   top: 3px;
   text-align: right;
}

.xQV .props-section,
.xQV .child-section {
   border: 1px solid #ddd;
   margin: 0 15px 10px 15px;
}

.xQV .props-section {
   font-size: 12px;
   padding: 0 25px 0 25px;
}

.xQV .props-section .label {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   min-width: 150px;
   padding-right: 15px;
   vertical-align: text-top;
}
/* END QUICK VIEW */

.xObjectLinkIcon {
	margin-left: 15px;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.xObjectLinkIcon.disabled {
    opacity: 0.3;
    cursor: default;
}

.xObjectLinkIcon:first-child {
    margin-left: 0;
}

.xObjectLinkText {
	margin-left: 15px;
	vertical-align: middle;
	cursor: pointer;
}

.xObjectLinkText.disabled {
    opacity: 0.7;
    cursor: default;
}

.xObjectLinkText:first-child {
    margin-left: 0;
}

.xPageNotice {
   min-width: 500px;
   border: solid 3px #171717;
   background-color: white;
   background-repeat: no-repeat;
   background-position: 20px 18px;
   border-radius: 4px;
   -moz-border-radius: 4px;
   margin: 4px;
}

   .xPageNotice .title {
      font-weight: bold;
      font-size: 14px;
      margin: 15px 15px 10px 88px;
   }

   .xPageNotice .body {
      margin: 0 15px 20px 88px;
   }

   .xPageNotice .btnBar {
      height: 50px;
      background-color: #f4f5f7;
   }

   .xPageNotice div.btn {
      float: right;
      margin-top: 7px;
      margin-right: 4px;
      margin-left: 4px;
      padding: 5px 16px;
      border: solid 2px #d7d8d9;
   }

   .xPageNotice div.btn:first-of-type {
      margin-right: 8px;
   }

   .xPageNotice div.btn:last-of-type {
      margin-left: 8px;
   }

   .xPageNotice div.btn.left {
      float: left;
   }

   .xPageNotice div.btn:focus {
      border-color: black;
   }

   .xPageNotice div.btn:hover {
      color: white;
      background-color: #4461af;
   }


/* Core picker CSS overrides for FIXED HEADERS */
table#dataTable.xLookup {
	border-collapse: collapse;
}

table#dataTable.xLookup tbody#PickerTBODY {
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

table#dataTable.xLookup thead#PickerTHEAD {
    display: table-row;
}

table#dataTable.xLookup thead#PickerTHEAD tr {

}

table#dataTable.xLookup thead#PickerTHEAD th.xSelBox {
	padding-left: 3px;
	padding-right: 3px;
}

	table#dataTable.xLookup tbody#PickerTBODY tr td:not(.xSelBox):not(.xFilterHdr):not(.xSelectedOptionHeader):not(.xNoData),
	table#dataTable.xLookup thead#PickerTHEAD tr th:not(.xSelBox):not(.xFilterHdr):not(.xSelectedOptionHeader):not(.xNoData) {
		min-width: 45px;
		max-width: 45px;
		padding-right: 3px;
		padding-left: 3px;
		text-overflow: ellipsis;
	}

   table#dataTable.xLookup tbody#PickerTBODY tr td.xNoData:not(.xSelBox):not(.xFilterHdr):not(.xSelectedOptionHeader) {
      padding-top: 10px;
      padding-left: 30px;
   }

table#dataTable.xLookup tbody#PickerTBODY tr td:not(:first-of-type),
table#dataTable.xLookup tbody#PickerTBODY tr th:not(:first-of-type) {
	overflow: hidden;
	text-overflow: ellipsis;
}

.xLookupBody {
    width: calc(100% - 175px);
    overflow-x: auto;
    overflow-y: hidden;
}

table#dataTable.xLookup {
    table-layout: fixed;
    width: 100%;
}

table#dataTable.xLookup tbody#PickerTBODY tr td {
   padding-right: 3px;
   padding-left: 3px;
}

table#dataTable.xLookup thead#PickerTHEAD tr td {
   padding-right: 3px;
   padding-left: 3px;
}

table.xLookup tbody#PickerTBODY tr.xActiveFilter td {
	vertical-align: middle;
}

.xInputPlaceholder {
   cursor: text;
   overflow: hidden;
}

a.xConfigLink {
   background-color: #106ebe;
   border: solid 2px #106ebe;
   color: white !important;
   padding: 3px 5px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
   border-radius: 3px;
   margin-right: 3px;
}

a.xConfigLink:hover {
   background-color: ghostwhite;
   color: #106ebe !important;
}

a[ng-click] {
   cursor: pointer;
}

/* print styles */
@media print {
   .xCfgRoot,
   .xMainCfg,
   .xChildCfg {
      position: static;
      overflow: visible;
      width: 100%;
      margin: 0;
      border-style: none;
   }

   /* container for main configurator content */
   /* all !important to override inline CSS that gets injected at runtime */
   .xCfgRoot .xCfgInner > .multisplit-panel {
      position: static !important;
      width: 100% !important;
      overflow: visible !important;
      left: auto !important;
      right: auto !important;
   }

   .viewRgn {
      position: static;
      padding: 0;
   }

   .xMainCfg > .xBody,
   .xChildCfg > .xBody,
   #configPanel {
      position: static !important;
      width: 100% !important;
      overflow: visible !important;
      border-style: none !important;
      float: none;
   }

   .xMainCfg .xBody .xPage,
   .xChildCfg .xBody .xPage {
      position: static;
      overflow: visible;
      border-style: none;
   }

   /* main content adornment */
   .xCfgRoot .action-panels-root,
   .xCfg > .xTb,
   .xCfg > .xQAB,
   .xCfg > .xCb,
   .xCfg > .xCbFilter,
   .xCfg > .xSb {
      display: none;
   }

   #actionPanel,
   #diagPanel,
   .xDialog {
      display: none;
   }

   .xVSplit,
   .xHSplit {
      display: none;
   }

   .xCfgRoot .xCfgInner,
   .multisplit-panel {
      position: static !important;
      overflow: visible;
   }

   /* popout window content adornment */
   .xCfg > .xTb,
   .xCfg > .xSb {
      display: none;
   }
   .xCfg > .xBody {
      position: static;
      overflow: visible;
      border-style: none;
   }
}

/* START SETTINGS DIALOG */
.xStg {
   position: absolute;
   width: 298px;
   height: auto;
   background-color: white;
   border: solid 1px #ccc;
   z-index: 9999;
}

.xStg > .xRgnHdr {
   height: 25px;
   padding-top: 5px;
}

   .xStg > .xControls {
      margin: 10px 0 10px 20px;
   }

   .xStg > table.xControls {
      border-spacing: 0 2px;
      width: 250px;
   }

   .xStg > div.xControls {
      width: 189px;
      margin-bottom: 15px;
   }

   .xStg > .xControls > div.xBtn { /* from revert helper */
      width: 13px;
      height: 17px;
      border: solid 1px black;
      background-repeat: no-repeat;
      float: right;
      display: inline;
      border-radius: 2px;
      margin-top: 1px;
   }

   .xStg > .xControls > .xCalendar > input {
      padding-left: 2px;
      padding-right: 1px;
      border: solid 1px #ccc;
   }

   .xStg > .xControls > .xCalendar > input {
      padding-left: 2px;
      padding-right: 1px;
   }
/* END SETTINGS DIALOG */

/* BROWSER-SPECIFIC EXTENSIONS */
@-moz-document url-prefix() {
   table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] .xSort-controls {
      display: table;
   }

   table.xCatGrid[orientation="horizontal"] tbody[data-grouptype="selected"] tr > td.xSort {
      height: 100%;
   }
}
/* END BROWSER-SPECIFIC EXTENSIONS */

.fixed {
   position: sticky;
}

th.fixed,
.xRgnNav.fixed[fixed-nav-bar],
.xRgnTb.fixed[fixed-toolbar],
.xHGOuter.fixed[fixed-col-header],
.xRgnHdr.fixed[fixed-header] {
   z-index: 2;
}

/*.xRgnNav.fixed[fixed-nav-bar],
.xRgnTb.fixed[fixed-toolbar] {
   display: inline-block;
   left: 0;
}*/

.xRgnNavContainer.fixed {
   position: sticky;
   z-index: 2;
   border: 0;
   border-top: 0;
   border-bottom: 0;
}

.xRgnNavContainer.fixed.top {
   top: 0;
}

.xRgnNavContainer.fixed.bottom {
   z-index: 1;
}

.xRgnNavContainer.fixed.top > .fixed {
   display: block;
   left: 0;
}

.xRgnNavContainer.fixed.bottom > .fixed {
   display: block;
   left: 0;
}

.xHGOuter {
   overflow-x: auto;
   overflow-y: hidden;
}

.xRgnStickyGap {
   width: 100%;
   height: 0;
   background-color: white;
   position: sticky;
   top: 0;
   z-index: 3;
}

table.xInner {
   border: 0;
   border-top-width: 0;
   border-bottom-width: 0;
}

.xRgnGridHeaderContainer {
   overflow-x: hidden;
   overflow-y: hidden;
}


/* IMPORTS */

@import url('../../configurator/jscontrols/Calendar/Calendar.css');
@import url('../../configurator/jscontrols/ComboBox/ComboBox.css');
@import url('../../configurator/jscontrols/ScrollBar/jquery.mCustomScrollbar.css');
@import url('../../configurator/jscontrols/SearchBox/SearchBox.css');

/* NOTHING BELOW THIS COMMENT */