/*
  MSCRM-Unified-Client-Embedded.css
   Copyright (c) 2005-2021, Experlogix, LLC
*/

.xCore {
/*   font-family: "Segoe UI Light", "Segoe UI Semilight", "Segoe UI Regular", "Segoe UI", Tahoma, Helvetica, Arial, sans-serif; */
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 13px;
}

.xCfgRoot {
   background-color: #fff;
}

.xCfg {
/*   font-family: "Segoe UI Light", "Segoe UI Semilight", "Segoe UI Regular", "Segoe UI", Tahoma, Helvetica, Arial, sans-serif; */
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: rgb(62, 62, 62);
   background-color: white;
}

.xCfg .xMainCfg,
.xCfg .xChildCfg{
   margin-left: 20px;
   margin-right: 20px;
}

.xCfg > .xCompareBody,
.xCfg > .xQVNotice {
   top: 42px;
}

.xCfg > .xTbMask {
   height: 90px;
   background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5) 100%);
}

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

.xCfg > .xTb,
.xCfg > .xMsgTb {
   height: 42px;
   border-style: none;
   background-color: white;
   left: 0;
   right: 0;
   box-sizing: border-box;
}

.xCfg > .xTb {
   border-bottom: solid 1px rgb(216, 216, 216);
}

.xCfg > .xMsgTb {
   border-top: solid 1px rgb(216, 216, 216);
}

.xCfg > .xBody {
   left: 200px;
   right: 10px;
}

.xBody > .mCSB_inside > .mCSB_container {
   margin-right: 10px;
}

.xPopOutLargeText {
   color: #ccc;
}

.xPage .expPageTitle, /* deprecated */
.xTitle {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 28px;
   line-height: 42px;
   color: rgb(51, 51, 51);
   margin-top: 18px;
   margin-bottom: 18px;
   border-style: none;
   padding-bottom: 0;
   padding-left: 10px;
}

div.infoBar,
.xQV .infoBar,
.xIB {
   color: black;
   background-color: #FFF19D;
   border-color: #D7D889;
}
div.infoBar span,
.xQV .infoBar span,
.xIB {
   color: black;
}
.xIB[data-message-group="warn"][data-message-state="locked"] {
   background-image: url(btnInfoLock.png);
}
.xIB-group .xIB:first-of-type { border-color: #D7D889; }
.xIB-group .xIB:last-of-type { border-color: #D7D889; }

.xTb > .xTbBtns > a > img {
   float: left; /* apply the 'float' specifically to images within buttons */
}

.xMainCfg > .xTb > .xTbBtns,
.xMainCfg > .xMsgTb > .xTbBtns,
.xMainCfg > .xQAB > .xQABBtns {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   white-space: nowrap;
}

.xMainCfg:not([nocatbar]) > .xTb > .xTbBtns,
.xMainCfg:not([nocatbar]) > .xMsgTb > .xTbBtns,
.xMainCfg:not([nocatbar]) > .xQAB > .xQABBtns,
.xChildCfg:not([nocatbar]) > .xTb > .xTbBtns,
.xChildCfg:not([nocatbar]) > .xMsgTb > .xTbBtns,
.xChildCfg:not([nocatbar]) > .xQAB > .xQABBtns {
   left: 200px;
}

.xTb > .xTbBtns,
.xMsgTb > .xTbBtns,
.xLookupTb > .xTbBtns {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.xCfg > .xSb {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   padding-bottom: 2px;
   height: 28px;
   background-color: rgb(216, 216, 216);
   border-style: none;
}

.xCfg:not([nocatbar]) > .xSb {
   left: 200px;
}

.xCfg > .xSb > .xSbVer {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-weight: 400;
   font-size: 13px;
   margin-top: 7px;
}

.xTb > .xTbBtns > a,
.xRgnTb > .xTbBtns > a,
.xMsgTb > .xTbBtns > a,
.xQABBtns a {
   font-family: Segoe UI Regular, "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #333;
   text-transform: capitalize;
   text-overflow: ellipsis;
   height: 42px;
   display: inline-block;
}

.xQABBtns a {
   float: none;
}

.xHSplit, .xVSplit {
   background-color: rgb(59, 121, 183);
   background-image: none;
}
/* ideally make these 4px universally */
.xHSplit { height: 5px; }
.xVSplit { width: 5px; }


.xQABBtns a {
   color: black;
}

   .xTb > .xTbBtns > a,
   .xTb > .xTbBtns > span,
   .xRgnTb > .xTbBtns > a,
   .xMsgTb > .xTbBtns > a,
   .xLookupTb > .xTbBtns > a {
      margin: 0;
      padding: 0 12px;
   }

.xRgnTb > .xTbBtns > a {
   margin-top: 0;
}

.xLookupTb > .xTbBtns {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}
.xLookupTb > .xTbBtns * span {
   padding: 11px 0 0 0;
}

.xLookupTb > .xTbBtns > a.xSel:hover,
.xLookupTb > .xTbBtns > a.xSel,
.xLookupTb > .xTbBtns > a {
   padding: 0 14px;
   font-weight: normal;
}

.xLookupTb > .xTbBtns > a {
   margin-top: 0;
   color: #333;
   font-size: 14px;
   height: 42px;
   padding: 0 14px;
   margin: 0;
}

/*.xLookupTb > .xTbBtns > a:hover {
   background-color: rgb(47, 95, 144);   
}*/

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

.xTbBtns > a.xSel {
   border-style: none;
   background-color: rgb(239, 239, 239);
}

.xTbBtns > a.xSel:hover {
   border-style: none;
   background-color: rgb(200, 200, 200);
}

.xTbBtns > a:hover {
   border-style: none;
   background-color: rgb(216, 216, 216);
}

.xTbBtns > a#b6:hover,
.xTbBtns > a#b24[err]:hover,
.xTbBtns > a#b14[err]:hover {
   background-color: #BF0000;
}

.xTbBtns > a#b14 > div {
   height: 29px;
   background-position: bottom;
   background-image: url("btnHelp.png");
}

.xTbBtns > a#b14[err] > div {
   background-image: url("btnHelp_Error.png");
}

.xTbBtns > .xTbMsg {
   font-family: "Segoe UI Regular", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-weight: 400;
   /*
      Due to the toolbar being aligned to the right of the category bar, the message is hoisted out of the flow of the toolbar
      to not push the buttons and consume too much space.
   */
   position: absolute;
   color: #BF0000;
   font-size: 10px;
   padding: 0 0 0 5px;
}

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

.xTbBtns > a#b6,
.xTbBtns > a#b24[err] {
   background-color: #EA4B35;
}


.xCb a {
   font-family: "Segoe UI Regular", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   color: #333;
   border-style: none;
   padding: 5px 0 5px 14px;
   margin-top: 0;
}

.xCb a[hasSel="1"] {
   font-style: italic;
}

.xCbBtns > a:hover {
   border-style: none;
   padding: 5px 0 5px 14px;
   background-color: white;
   box-shadow: rgba(0, 0, 0, 0.1) 1px 4px 8px;
   transition: background-color 200ms ease 0s;
}

.xCbBtns > a.xCbErr {
   background-color: #EA4B35;
   color: white;
}

.xCbBtns > a.xCbErr:hover {
   background-color: #BF0000;
}

.xCb > .mCSB_scrollTools .mCSB_buttonUp,
.xCb > .mCSB_scrollTools .mCSB_buttonDown {
   height: 14px;
}

.xCb > .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown {
   background-position: -112px -86px;
}

.xCfg > .xMsgBody,
.xCfg > .xWebUploaderBody {
   bottom: 62px;
   background: white;
}

.xRgn {
   font-family: "Segoe UI Regular", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
}

.xMsgBody > .xPage .xRgn {
   border-style: none;
}

.xMsgBody .xRgn .xRgnHdr,
.xMsgBody .xRgn .xRgnHdrGL {
   margin-top: auto;
   padding-left: 5px;
}

.xMsgBody .xRgn .xRgnHdr > span,
.xMsgBody .xRgn .xRgnHdrGL > span {
   cursor: default;
}

/* indent the options, remove the explicit 100% width on the column DIV (verify option scrolling in IE 10 and earlier) */
.xRgn .xInner td > div.xOB,
.xRgn .xInner td > div.xOBErr,
.xRgn .xInner td > div.xOBDis {
   width: auto;
   margin: 10px;
   font-family: "Segoe UI Regular", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
}

/* make sure that the JS controls don't inherit the margin specified above */
.xRgn .xInner td > div.xComboBox,
.xRgn .xInner td > div.xCalendar {
   margin-left: 0;
}

.xRgn:not(.xRgnStart) {
   margin-top: 21px;
}

.xMsgBody .xRgn:not(.xRgnStart), /* ensure that the top margin doesn't apply in the Configuration Message dialog */
.xRgn[joinprev='1'] {            /* top margin should not apply if the category is joined with the previous one */
   margin-top: -1px;             /* auto; making is -1 helps ensure that the ':after' pseudo content is not visible when joined */
}

.xMsgBody .xRgn { /* ensure that the top margin doesn't apply in the Configuration Message dialog */
   margin-right: 0;
}

.xRgn ~ .xRgn[joinprev='1'] {
   border-top-style: none;
}

.xRgn .xRgnHdr,
.xStg > .xRgnHdr {
   height: auto;
   background-color: white;
   border-style: none;
}

.xRgn .xRgnHdrGL {
   height: auto;
   background-color: #3b79b7;
}

   .xRgn .xRgnHdrGL a[display='button'] {
      color: white;
   }

.xRgn a[display='button']:hover {
   background-color: #e4eef9;
}

      .xRgn .xRgnHdrGL a[display='button']:hover {
         background-color: rgb(47, 95, 144);
      }

   .xRgn .xRgnHdr > span,
   .xRgn .xRgnHdrGL > span,
   .xStg > .xRgnHdr > span {
      font-family: "Segoe UI Regular", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
      font-size: 17px;
      font-weight: 400;
      color: #333;
      cursor: pointer;
      padding: 4px 14px 4px 8px;
      text-transform: uppercase;
   }

   .xRgn .xRgnHdrGL > span {
      color: white;
   }

.xRgn .xRgnNav {
   border-style: none;
   background-color: white;
}

   .xRgn .xRgnNav > input[type="text"] {
      height: 20px;
      margin-top: 1px;
      border: solid 1px #eee;
   }

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

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

.xRgn .xRgnTb {
   background-color: white;
   height: 42px;
   padding: 0;
}

/*
.xRgn[collapsed] .xRgnTb {
   padding-bottom: 5px;
}
*/

.xRgnTb > .xRgnTbCaption {
   color: #666;
   line-height: 42px;
   padding: 0 8px;
}

.xRgnTb > .xTbBtns {
   height: 42px;
   padding: 0;
}

.xRgnTb > .xTbBtns > a {
   background-color: white;
   color: #333;
}

.xRgnTb > .xTbBtns > a:hover {
   border-style: none;
   background-color: rgb(216, 216, 216);
}

.xRgn tr.xSubHdr {
   font-family: "Segoe UI Semibold", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #555555;
   text-transform: uppercase;
   padding-left: 10px;
   padding-bottom: 3px;
}

   .xRgn tr.xSubHdr > td {
      border-style: none;
      padding-left: 10px;
   }

.xRgn {
   border-bottom: solid 1px rgb(207, 205, 204);
   /*border: solid 1px rgb(207, 205, 204);*/
}

   .xRgn[err] {
      background-color: #f5d1ce !important;
      border: solid 1px #d6493a;
   }

      .xRgn[err] .xRgnHdr {
         border-bottom-color: #d6493a;
      }

      .xRgn[err] .xRgnTb {
         border-bottom-color: #ffa8a8;
      }

   .xRgn:not([err]) {
      background-color: white;
   }

   .xRgn[joinerr] {
      background-color: #f9e4e1;
      border: solid 1px #d6493a;
   }

   .xRgn[err] .xRgnHdr,
   .xRgn[err] .xRgnHdrGL {
      background-color: #EA4B35;
   }

      .xRgn[err] .xRgnHdr > span,
      .xRgn[err] .xRgnHdrGL > span {
         color: white;
      }

   .xRgn[joinerr] .xRgnHdr,
   .xRgn[joinerr] .xRgnHdrGL {
      background-color: #EA4B35;
   }

      .xRgn[joinerr] .xRgnHdr > span,
      .xRgn[joinerr] .xRgnHdrGL > span {
         color: white;
      }

   .xRgn[err] .xRgnTb > .xTbBtns,
   .xRgn[err] .xRgnTb > .xTbBtns a {
      background-color: #ffa8a8;
      color: white;
   }

   .xRgn[err] .xRgnTb > .xTbBtns > a:hover {
      background-color: #EA4B35;
   }

.xRgnHdrBtns > a { opacity: .6; }
.xRgnHdrBtns > a:hover { opacity: 1; }

.xRgnHdrBtns > a#help,
.xRgnHdrBtns > a#help:hover {
   background-image: url(btnHelpCat.png);
}

.xRgnHdrBtns > a#po,
.xRgnHdrBtns > a#po:hover {
   background-image: url(btnPopOut.png);
}

.xRgnHdrBtns > a#pd,
.xRgnHdrBtns > a#pd:hover {
   background-image: url(btnDock.png);
}

.xRgn[err] .xRgnHdrBtns > a#help,
.xRgn[joinerr] .xRgnHdrBtns > a#help {
   background-image: url(btnHelpCat_Error.png);
}

.xRgnHdrBtns > a#btnPin,
.xRgnHdrBtns > a#btnPin:hover {
   background-image: url(btnPinCat.png);
}

.xRgn[err] .xRgnHdrBtns > a#btnPin,
.xRgn[joinerr] .xRgnHdrBtns > a#btnPin {
   background-image: url(btnPinCat_Error.png);
}

.xRgnHdrBtns > a#btnPin.pinned,
.xRgnHdrBtns > a#btnPin:hover.pinned {
   background-image: url(btnPinnedCat.png);
}

.xRgn[err] .xRgnHdrBtns > a#btnPin.pinned,
.xRgn[joinerr] .xRgnHdrBtns > a#btnPin.pinned {
   background-image: url(btnPinnedCat_Error.png);
}

.xRgn[err] .xRgnHdrBtns > a#po,
.xRgn[joinerr] .xRgnHdrBtns > a#po {
   background-image: url(btnPopOut_Error.png);
}

.xRgn[err] .xRgnHdrBtns > a#pd,
.xRgn[joinerr] .xRgnHdrBtns > a#pd {
   background-image: url(btnDock_Error.png);
}

.xRgnHdrBtns > a#hs,
.xRgnHdrBtns > a#hs:hover {
   background-image: url(btnCollapse.png);
}

.xRgn[err] .xRgnHdrBtns > a#hs,
.xRgn[joinerr] .xRgnHdrBtns > a#hs {
   background-image: url(btnCollapse_Error.png);
}


.xRgnHdrBtns > a,
.xRgnHdrBtns a {
   height: 28px;
}

.xRgn .xAMDropdown a[display='button'] {
   color: #505050;
}

/* begin styles for line item selection screen transforms */
.xRgn a[display='button'],
.xSelectedGL {
   text-transform: uppercase;
   color: black;
   padding: 5px 6px 4px 7px;
}

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

.xSelectedGL:hover {
   background-color: rgb(47, 95, 144);
   color: white;
}

      .xSelectedGL[sel] {
         background-color: rgb(67, 136, 204);
         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA25pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMWMxZGUzNS04NTk3LWQzNGUtYWRiYS1lNzMxMTcxZTA0MDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzNDQTJDMjY3RDY5MTFFOTlFOTBBRkY4REQ5Mjk0OTYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzNDQTJDMjU3RDY5MTFFOTlFOTBBRkY4REQ5Mjk0OTYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUEyQzYzNUY2ODQzMTFFOTk4M0JGOTJFRUI2N0MwQjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUEyQzYzNjA2ODQzMTFFOTk4M0JGOTJFRUI2N0MwQjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4PTx/PAAAAvklEQVR42qSTMQ7DIAxFA0LdOEEnOAJbN45ulnTqFWDrIViov1QqikIihCUrMfg/g+OIUsq2YupsUwgx3KuFVZNME4U15zuGCNlTr5yINKc69js0cua+IQTtvYf4yf6eAlRxjBHiXNflrNgYk9smtwA9Iz46gUPyjPiv82w7Qu7yi2PCEzGLd8St8zodAQjJFTIS9wBRJwqDhPeU0s1a+zg79ndC/SEABsjwzh1ADWY/X33aX+HVv1Fui/YRYACfpbtS0RNOBQAAAABJRU5ErkJggg==') /*iconDotCheck.png*/ !important;
      }
/* end styles for line item selection screen transforms */

/*
.xOB,
.xOBDis,
.xOBErr {
   padding-bottom: 5px;
}
*/

.xOB:not(:first-of-type),
.xOBDis:not(:first-of-type),
.xOBErr:not(:first-of-type) {
   border-top:solid 1px rgb(216, 216, 216);
   padding-top:8px;
}

.xRgn[err] .xInner td > div.xOB:not(:first-of-type),
.xRgn[err] .xInner td > div.xOBDis:not(:first-of-type),
.xRgn[err] .xInner td > div.xOBErr:not(:first-of-type),
.xRgn[joinerr] .xInner td > div.xOB:not(:first-of-type),
.xRgn[joinerr] .xInner td > div.xOBDis:not(:first-of-type),
.xRgn[joinerr] .xInner td > div.xOBErr:not(:first-of-type) {
   border-top-color: #eba298;
}


.xOBErr,
.xOBErr .xL,
.xOBErr .xP {
   color: #EA4B35 !important;
}
.xOBErr a[display='button'] {
   color: #993123 !important;
}


.xOB img[oi],
.xOBDis img[oi],
.xOBErr img[oi] {
   margin: 4px 20px 4px 4px;
}

.xOB a:not(.tab-item) {
   color: rgba(17, 96, 183, 1);
   text-decoration: none;
}

.xCCfg a {
   font-size: 12px;
   margin-top: 10px;
}

.xOB > :not(.xCCfg) a:after {
   padding-left: 7px;
}

.xOB a:hover :not(.tab-item) {
   color: #505050;
}

.xOB a[display='button']:hover {
   color: black;
}

.xL {
   font-family: "Segoe UI Regular", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-weight: 400;
   font-size: 16px;
   color: black;
}

.xP {
   color: rgb(68, 68, 68);
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
}

.xP tr {
   height: 26px;
}

.xP td[ct='p'] {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: rgb(51, 51, 51);
   font-weight: 600;
}

/*
   EXPERIMENTAL

.xP td[ct='p']:hover {
   border: solid 1px black;
   background-color: white;
}
.xP td[ct='p']:hover * {
   font-weight: normal;
}
*/

.xP .err {
   color: red !important;
}

.xP td[req]:after {
   color: #e32;
   content: ' *';
   display: inline;
   font-weight: bold;
}

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

input,
textarea,
.xP input,
.xP textarea,
.xInputPlaceholder {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: rgb(51, 51, 51);
}

.xP input[type='text'] {
   /* width: 131px */
   width: 138px;
   margin-left: -7px
}

input[type="text"],
textarea,
.xInputPlaceholder {
   border: solid 1px transparent;
   background-color: transparent !important;
   /* fix alignment and sizing so the values line up with non-input fields */
   border-left-style: none;
   padding-left: 7px; /* 0 */
   padding-right: 4px;
}

input[type="text"]:hover,
textarea:hover,
.xInputPlaceholder:hover {
   border: solid 1px black;
   font-weight: normal;
   padding-left: 6px;
   /*
   background-color: #f3f1f1;
   padding-left: 2px;
   padding-right: 1px;
   */
}

input[type="text"]:focus,
textarea:focus {
   border: solid 1px #ccc;
   background-color: white;
   padding-left: 6px;
   font-weight: normal;
}

/* 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% - 27px);
}

.xP div.xHelper > input + div,
.xP div.xHelper > textarea + div, 
.xP div.xHelper > div + div {
   border-color: #bbb;
   height: 17px;
   background-image: url(cboBrowseImg.png);
}

.xP div.xHelper > input[type="text"] + div:hover {
   border-color: #bbb;
   background-image: url(cboBrowseHot.png);
}

.xP div.xHelper[helper='reset'] > input[type="text"] + div,
.xP div.xHelper[helper='revert'] > input + div,
.xP div.xHelper[helper='revert'] > textarea + div,
.xP div.xHelper[helper='reset'] > textarea + div,
.xP div.xHelper[helper='revert'] > div + div,
.xP div.xHelper[helper='reset'] > div + div {
   background-image: url('cboRevert.png');
   border-color: #bbb;
}

   .xP div.xHelper[helper='reset'] > input[type="text"] + div:hover,
   .xP div.xHelper[helper='revert'] > input + div:hover,
   .xP div.xHelper[helper='revert'] > textarea + div:hover,
   .xP div.xHelper[helper='revert'] > div + div:hover {
      background-image: url('cboRevertHot.png');
      background-color: #f3f1f1;
   }

.xP div.xHelper > input:hover + div,
.xP div.xHelper > textarea:hover + div,
.xP div.xHelper > div + div {
   border-left-color: transparent !important;
}

.xP div.xHelper[helper='menu'] > input[type="text"] + div {
   background-image: url('cboImg.png');
}

.xP div.xHelper[helper='menu'] > input[type="text"] + div:hover {
   background-image: url('cboHot.png');
}

div.xComboBox {
   height: 21px
}

div.xEdit {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   padding-top: 0;
   padding-bottom: 1px;
}

.xActiveFilter .xComboEdit input.xEdit {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   width: calc(100% - 4px);
}

.xEdit:hover {
   font-weight: normal;
}

   /* Category Bar grouping */
   .xCb a.xCbGrpHdr {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #333;
   text-transform: uppercase;
   font-weight: 600;
   padding-left: 14px;
}

.xCb a.xCbGrpHdr:not(:first-of-type) {
   margin-top: 6px;
}

.xCb a.xCbGrpHdr[barstyle="Default"][barError],
.xCb a.xCbGrpHdr[barstyle="Modern"][barError],
.xCb a.xCbGrpHdr[barstyle="Tree"][barError] {
   background-color: #EA4B35;
   color: white;
}

.xCb a.xCbGrpHdr[barstyle="Default"][barError]:hover,
.xCb a.xCbGrpHdr[barstyle="Modern"][barError]:hover,
.xCb a.xCbGrpHdr[barstyle="Tree"][barError]:hover {
   background-color: #BF0000;
}

.xCb a.xCbGrpHdr[barstyle="Modern"] {
   padding-left: 18px;
}

.xCb a.xCbGrpHdr[barstyle="Modern"][barstate="open"] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAS1BMVEX///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZc5lTSAAAAGHRSTlMAAIRIt+cMJPldjckP7TZmpc/zGD97kAliHkOiAAAASUlEQVR4XuXINxKAIBRAQR9gzvnf/6Qq6owgpZ1bbvQbWm7q2Zhr48TpNDs7x2kKuyVeV/XRjd+0+3a8ml6GMdCTzASaZbX9pQ2UjwSdKyTJDAAAAABJRU5ErkJggg==') /*catHdrModernOpen.png*/;
   background-repeat: no-repeat;
}

.xCb a.xCbGrpHdr[barstyle="Modern"][barstate="closed"] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAS1BMVEX///9mZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZc5lTSAAAAGHRSTlMAAAyE513JNqUY83sJkM8/7Wb5jQ+3JEiwIWQdAAAASElEQVR4XtXONw6AQBDF0F1yzsH3PykFNEiukXD5ipkf/lGaxLs3k+XKUJTKUNXKNG1nDL3xMMqRaZaXy7rJkv2w3Wd8Ch90AeWjBJ1NomhrAAAAAElFTkSuQmCC') /*catHdrModernClosed.png*/;
   background-repeat: no-repeat;
}

.xCbBtns[barstyle="Modern"][grp] > a {
   padding-left: 14px;
}

.xCb a.xCbGrpHdr[barstyle="Tree"] {
   padding-left: 18px;
   background-position: left center;
   background-position-x: 3px;
   background-repeat: no-repeat;
}

.xCb a.xCbGrpHdr[barstyle="Tree"][barstate="open"] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALCAYAAACksgdhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFHGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA0LTE3VDEzOjE1OjQ4LTA2OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNC0yNlQxNjoyNzoyMy0wNjowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wNC0yNlQxNjoyNzoyMy0wNjowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpjMjA4ZmY2Ny1mYjFjLTk0NDEtODkzMC01MjVjMzYzYzM4ODAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6YzIwOGZmNjctZmIxYy05NDQxLTg5MzAtNTI1YzM2M2MzODgwIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YzIwOGZmNjctZmIxYy05NDQxLTg5MzAtNTI1YzM2M2MzODgwIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpjMjA4ZmY2Ny1mYjFjLTk0NDEtODkzMC01MjVjMzYzYzM4ODAiIHN0RXZ0OndoZW49IjIwMTktMDQtMTdUMTM6MTU6NDgtMDY6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz742EkJAAAAJElEQVQoFWP4//8/A6mYYYhpYomcmYYLE9L0HwtOo65NwyDIAUWAjCsp2pnHAAAAAElFTkSuQmCC');
}

.xCb a.xCbGrpHdr[barstyle="Tree"][barstate="closed"] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALCAYAAACksgdhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFHGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA0LTE3VDEzOjE1OjQ4LTA2OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNC0yNlQxNjoyNjo1MS0wNjowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wNC0yNlQxNjoyNjo1MS0wNjowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpjZGQ0MjYzMC00MDA2LWMzNDItYTUyNS03ZjRhMGZiYzAzYzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Y2RkNDI2MzAtNDAwNi1jMzQyLWE1MjUtN2Y0YTBmYmMwM2M5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Y2RkNDI2MzAtNDAwNi1jMzQyLWE1MjUtN2Y0YTBmYmMwM2M5Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpjZGQ0MjYzMC00MDA2LWMzNDItYTUyNS03ZjRhMGZiYzAzYzkiIHN0RXZ0OndoZW49IjIwMTktMDQtMTdUMTM6MTU6NDgtMDY6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7BmSonAAAAO0lEQVQoFWP4//8/A6mYgaqaWCJnpiFhkjT9J0oTmg3/kfmENP3HgtOobhMMo/gJ2V+ENKURpYlmkQsAeKtmvS+VZiYAAAAASUVORK5CYII=');
}

.xCbBtns[barstyle="Tree"][grp] > a {
   padding-left: 19px;
}

/* Property Grid */
table.xCatGrid[banded='false'] tr[error],
table.xCatGrid[banded='false'] tr[error] > td,
table.xCatGrid[banded='false'] tr[error] > td > input[type='text'],
table.xCatGrid[banded='false'] tr[error] > td > textarea,
table.xCatGrid[banded='false'] tr[error] > td > div.xComboBox > div.xComboEdit > div.xEdit,
table.xCatGrid[banded='false'] tr[error] > td > div.xCalendar > input,
table.xCatGrid[banded='false'] .xCatGridInner td[error] > input[type='text']:not(:focus),
table.xCatGrid[banded='false'] .xCatGridInner td[error] > textarea,
table.xCatGrid[banded='false'] .xCatGridInner td[error] > div.xComboBox > div.xComboEdit > div.xEdit,
table.xCatGrid[banded='false'] .xCatGridInner td[error] > div.xCalendar > input,
table.xCatGrid[banded='false'] .xCatGridInner td[error],
table.xCatGrid[banded='false'] tr > td[err],
table.xCatGrid[banded='false'] tr > td[err] > input[type='text'],
table.xCatGrid[banded='false'] tr > td[err] > textarea,
table.xCatGrid[banded='true'] tr[error]:nth-child(odd),
table.xCatGrid[banded='true'] tr[error]:nth-child(odd) > td,
table.xCatGrid[banded='true'] tr[error]:nth-child(odd) > td > input[type='text']:not(:focus),
table.xCatGrid[banded='true'] tr[error]:nth-child(odd) > td > textarea,
table.xCatGrid[banded='true'] tr[error]:nth-child(odd) > td > div.xComboBox > div.xComboEdit > div.xEdit,
table.xCatGrid[banded='true'] tr[error]:nth-child(odd) > td > div.xCalendar > input,
table.xCatGrid[banded='true'] .xCatGridInner td[error]:nth-child(even) > input[type='text']:not(:focus),
table.xCatGrid[banded='true'] .xCatGridInner td[error]:nth-child(even) > textarea,
table.xCatGrid[banded='true'] .xCatGridInner td[error]:nth-child(even) > div.xComboBox > div.xComboEdit > div.xEdit,
table.xCatGrid[banded='true'] .xCatGridInner td[error]:nth-child(even) > div.xCalendar > input,
table.xCatGrid[banded='true'] .xCatGridInner td[error]:nth-child(even),
table.xCatGrid[banded='true'] tr:nth-child(odd) > td[err],
table.xCatGrid[banded='true'] tr:nth-child(odd) > td[err] > input[type='text']:not(:focus),
table.xCatGrid[banded='true'] tr:nth-child(odd) > td[err] > textarea {
   color: white !important;
   background-color: #ffa8a8 !important;
}

table.xCatGrid[banded='true'] tr[error]:nth-child(even),
table.xCatGrid[banded='true'] tr[error]:nth-child(even) > td,
table.xCatGrid[banded='true'] tr[error]:nth-child(even) > td > input[type='text']:not(:focus),
table.xCatGrid[banded='true'] tr[error]:nth-child(even) > td > textarea,
table.xCatGrid[banded='true'] tr[error]:nth-child(even) > td > div.xComboBox > div.xComboEdit > div.xEdit,
table.xCatGrid[banded='true'] tr[error]:nth-child(even) > td > div.xCalendar > input,
table.xCatGrid[banded='true'] .xCatGridInner td[error]:nth-child(odd) > input[type='text']:not(:focus),
table.xCatGrid[banded='true'] .xCatGridInner td[error]:nth-child(odd) > textarea,
table.xCatGrid[banded='true'] .xCatGridInner td[error]:nth-child(odd) > div.xComboBox > div.xComboEdit > div.xEdit,
table.xCatGrid[banded='true'] .xCatGridInner td[error]:nth-child(odd) > div.xCalendar > input,
table.xCatGrid[banded='true'] .xCatGridInner td[error]:nth-child(odd),
table.xCatGrid[banded='true'] tr:nth-child(even) > td[err],
table.xCatGrid[banded='true'] tr:nth-child(even) > td[err] > input[type='text']:not(:focus),
table.xCatGrid[banded='true'] tr:nth-child(even) > td[err] > textarea {
   color: white !important;
   background-color: #ff9999 !important;
}

/* sortdir = 0  ---> not sorted
sortdir = 1  ---> sorted ascending
sortdir = 2  ---> sorted descending */
table.xCatGrid[orientation="horizontal"][sortable] thead th[sortdir='1']:before {
   content: url('hdrAsc.gif') ' ';
   white-space: nowrap;
   display: inline;
}

table.xCatGrid[orientation="horizontal"][sortable] thead th[sortdir='2']:before {
   content: url('hdrDsc.gif') ' ';
   white-space: nowrap;
   display: inline;
}

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

table.xCatGrid[orientation="horizontal"] tr:nth-child(odd) {
   background-color: rgba(0,0,0,0.61);
}

table.xCatGrid tr > th {
   height: 36px;
   border-bottom-color: #f4f4f4;
}

table.xCatGrid tr.totalPrice {
   border-top: 1px solid #d6d6d6;
}

table.xCatGrid[orientation="horizontal"] tr > th,
div.xTableHdr {
   background-color: white;
   border-bottom: solid 1px #d6d6d6;
   color: rgb(4, 89, 153);
   font-size: 15px;
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   text-overflow: ellipsis;
   /* any border styles set in the template for properties should not be present in the headers in the UCI style */
   border-top-style: hidden;
   border-left-style: hidden;
   border-right-style: hidden;
}

table.xCatGrid tr > th.xTableHdr,
div.xTableHdr {
   text-transform: uppercase;
   font-weight: bold;
   border-bottom-style: none;
   border-top-style: none;
   padding-top: 5px;
}

.xStickyColHdr table.xCatGrid tr > th {
   border-top: none;
   border-bottom: none;
}

.xStickyColHdr {
   border-top: solid 1px #d6d6d6;
   border-bottom: solid 1px #d6d6d6;
   background-color: #f5f5f5;
}

table.xCatGrid[orientation="horizontal"] tr > td {
   height: 40px;
   border-bottom-style: none;
   border-bottom-color: #d6d6d6;
   /* NOTE: any borders specified in the template will inherit the 'color' attribute of the <TD> and will not be influenced by the 'border-*-color'' attribute in the CSS.
   alternatively, if the color is set in the <COL> element it will work (sort of), but not be controllable by the UI style.
   as a result, the border will be black by default. */
}

table.xCatGrid[orientation="horizontal"] tbody:not([data-grouptype='header']) tr:hover td:not(.xSubCat),
table.xCatGrid[orientation="horizontal"] tbody:not([data-grouptype='header']) tr.hovered td:not(.xSubCat),
table.xCatGrid[orientation="horizontal"] tbody:not([data-grouptype='header']) tr:hover td input[type="text"],
table.xCatGrid[orientation="horizontal"] tbody:not([data-grouptype='header']) tr.hovered td input[type="text"],
table.xCatGrid[orientation="horizontal"] tbody:not([data-grouptype='header']) tr:hover td:not([proplocked]) .xInputPlaceholder,
table.xCatGrid[orientation="horizontal"] tbody:not([data-grouptype='header']) tr.hovered td:not([proplocked]) .xInputPlaceholder,
table.xCatGrid[orientation="horizontal"] tbody:not([data-grouptype='header']) tr:hover td textarea,
table.xCatGrid[orientation="horizontal"] tbody:not([data-grouptype='header']) tr.hovered td textarea {
   background-color: #d8d8d8 !important;
   font-weight: 600;
}

table.xCatGrid[orientation="horizontal"][banded="false"] tr[error] td,
table.xCatGrid[orientation="horizontal"][banded="false"] tr[error] td input[type="text"],
table.xCatGrid[orientation="horizontal"][banded="false"] tr[error] td textarea,
table.xCatGrid[orientation="vertical"][banded="false"] table.xCatGridInner tr > td[error],
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error]:nth-child(odd) td,
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error]:nth-child(odd) td input[type="text"],
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error]:nth-child(odd) td textarea,
table.xCatGrid[orientation="vertical"][banded="true"] table.xCatGridInner tr > td[error]:nth-child(even) {
   background-color: #ffa8a8 !important;
   color: white !important;
}

table.xCatGrid[orientation="horizontal"][banded="true"] tr[error]:nth-child(even) td,
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error]:nth-child(even) td input[type="text"],
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error]:nth-child(even) td textarea,
table.xCatGrid[orientation="vertical"][banded="true"] table.xCatGridInner tr > td[error]:nth-child(odd) {
   background-color: #ff9999 !important;
   color: white !important;
}

table.xCatGrid[orientation="horizontal"][banded="false"] tr:hover td[err],
table.xCatGrid[orientation="horizontal"][banded="false"] tr.hovered td[err],
table.xCatGrid[orientation="horizontal"][banded="false"] tr:hover td[err] input[type="text"]:not(:focus),
table.xCatGrid[orientation="horizontal"][banded="false"] tr.hovered td[err] input[type="text"]:not(:focus),
table.xCatGrid[orientation="horizontal"][banded="false"] tr:hover td[err] textarea,
table.xCatGrid[orientation="horizontal"][banded="false"] tr.hovered td[err] textarea,
table.xCatGrid[orientation="horizontal"][banded="false"] tr[error]:hover td,
table.xCatGrid[orientation="horizontal"][banded="false"] tr[error].hovered td,
table.xCatGrid[orientation="horizontal"][banded="false"] tr[error]:hover td input[type="text"]:not(:focus),
table.xCatGrid[orientation="horizontal"][banded="false"] tr[error].hovered td input[type="text"]:not(:focus),
table.xCatGrid[orientation="horizontal"][banded="false"] tr[error]:hover td textarea,
table.xCatGrid[orientation="horizontal"][banded="false"] tr[error].hovered td textarea,
table.xCatGrid[orientation="horizontal"][banded="true"] tr:hover td[err],
table.xCatGrid[orientation="horizontal"][banded="true"] tr.hovered td[err],
table.xCatGrid[orientation="horizontal"][banded="true"] tr:hover td[err] input[type="text"]:not(:focus),
table.xCatGrid[orientation="horizontal"][banded="true"] tr.hovered td[err] input[type="text"]:not(:focus),
table.xCatGrid[orientation="horizontal"][banded="true"] tr:hover td[err] textarea,
table.xCatGrid[orientation="horizontal"][banded="true"] tr.hovered td[err] textarea,
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error]:hover td,
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error].hovered td,
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error]:hover td input[type="text"]:not(:focus),
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error].hovered td input[type="text"]:not(:focus),
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error]:hover td textarea,
table.xCatGrid[orientation="horizontal"][banded="true"] tr[error].hovered td textarea {
   background-color: #ea7b82 !important;
}

table.xCatGrid[orientation="horizontal"] tr[error] td,
table.xCatGrid[orientation="vertical"] table.xCatGridInner tr > td[error] {
   color: #EA4B35;
}

table.xCatGrid[orientation="horizontal"] tr > td.xSubCat,
table.xCatGrid[orientation="vertical"] tr > td.xSubCat {
   font-family: "Segoe UI Semibold", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #555555;
   padding-top: 10px;
   text-transform: uppercase;
   white-space: nowrap;
   text-overflow: ellipsis;
   background-color: white;
   border-top-style: none;
   border-bottom: solid 1px #d8d8d8;
   height: 28px;
   border-collapse: collapse;
}

table.xCatGrid tr > td.xSubCat span {
   margin-top: -13px;
   margin-left: 8px;
}

.xHGOuter .xHGLeft td.xSubCat span {
   margin-top: -13px;
}

table.xCatGrid[orientation="vertical"] table.xCatGridInner tr > td {
   height: 28px;
   border-right-style: none;
   border-right-color: #d6d6d6;
}

table.xCatGrid tr > td.xCtl > input[type='text'],
table.xCatGrid tr > td.xCtl > .xInputPlaceholder,
table.xCatGrid tr > td.xCtl > textarea {
   border: solid 1px transparent;
   background-color: transparent;
   /* fix alignment and sizing so the values line up with non-input fields */
   border-left-style: none;
   padding-left: 3px;
   padding-right: 4px;
   margin-top: 4px;
   margin-bottom: 7px;
}

table.xCatGrid tr > td.xCtl > input[type='text']:hover,
table.xCatGrid tr > td.xCtl > .xInputPlaceholder:hover,
table.xCatGrid tr > td.xCtl > textarea:hover {
   border: solid 1px #ccc;
   background-color: #f3f1f1;
   padding-left: 3px;
   padding-right: 3px;
}

table.xCatGrid[orientation=horizontal] tr > td.xCtl > div.xHelper > input[type='text']:not(:focus):hover {
   margin-left: 1px;
}

table.xCatGrid[orientation=vertical] tr > td.xCtl > div.xHelper > input[type='text']:not(:focus):hover {
   margin-left: 0;
}

table.xCatGrid[orientation=vertical] tr > td.xCtl > div.xHelper > input[type='text']:not(:focus):hover + div.xIHBtn {
   margin-left: -15px;
}

table.xCatGrid tr > td.xCtl > .xInputPlaceholder:hover {
   padding-left: 2px;
}

table.xCatGrid tr > td.xCtl > .xHelper > .xInputPlaceholder:hover {
   border: solid 1px #ccc;
   background-color: #f3f1f1;
   padding-left: 3px;
}

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

table.xCatGrid tr > td.xCtl > input[type='text']:focus,
table.xCatGrid tr > td.xCtl > textarea:focus {
   border: solid 1px #ccc;
   background-color: white;
   padding-left: 2px;
   padding-right: 1px;
}

/* OPTION REORDERING STYLES */
table.xCatGrid[orientation="horizontal"] a.xSort-retain > .xSort-img,
table.xCatGrid[orientation="horizontal"] a.xSort-revert > .xSort-img,
.xRgnTb > .xTbBtns > a.xSort-retain > .xSort-img,
.xRgnTb > .xTbBtns > a.xSort-revert > .xSort-img {
   height: 16px;
   width: 16px;
}

/* #666 fill */
table.xCatGrid a.xSort-retain > .xSort-img {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M15.3 9.94l.7.7L10.65 16 7.8 13.14l.7-.7 2.15 2.14z' fill='%23666'%2F%3E%3Cg data-name='Layer 2'%3E%3Cg data-name='Layer 1'%3E%3Cpath d='M4 0h12v1H4zM0 0h2v1H0zm4 4h12v1H4zM0 4h2v1H0zm4 4h11v1H4zM0 8h2v1H0zm4 4h3v1H4zm-4 0h2v1H0z' fill='%23666'%2F%3E%3Cpath d='M0 0h16v16H0z' fill='none'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

table.xCatGrid a.xSort-revert > .xSort-img {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M15.82 12.33a2.85 2.85 0 0 0-.56-.85 2.67 2.67 0 0 0-.85-.56 2.53 2.53 0 0 0-1-.21H9.93l1.93-1.94-.76-.67-3.27 3.27 3.27 3.28.75-.75-2.2-2.17h3.83c2.134 0 2.134 3.2 0 3.2h-.1V16a2.53 2.53 0 0 0 1-.21c.317-.13.606-.32.85-.56a2.85 2.85 0 0 0 .56-.85 2.61 2.61 0 0 0 0-2.05z' fill='%23666'%2F%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M4 0h12v1H4zM0 0h2v1H0zm4 4h12v1H4zM0 4h2v1H0zm4 4h5v1H4zm9 0h3v1h-3zM0 8h2v1H0zm4 4h3v1H4zm-4 0h2v1H0z' fill='%23666' data-name='Layer 1'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

table.xCatGrid[orientation="horizontal"] .xSort-retain,
table.xCatGrid[orientation="horizontal"] .xSort-revert {
   top: 7px;
}

/* #FFF fill */

.xRgnTb a.xSort-retain > .xSort-img {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M15.3 9.94l.7.7L10.65 16 7.8 13.14l.7-.7 2.15 2.14z' fill='%23FFF'%2F%3E%3Cg data-name='Layer 2'%3E%3Cg data-name='Layer 1'%3E%3Cpath d='M4 0h12v1H4zM0 0h2v1H0zm4 4h12v1H4zM0 4h2v1H0zm4 4h11v1H4zM0 8h2v1H0zm4 4h3v1H4zm-4 0h2v1H0z' fill='%23FFF'%2F%3E%3Cpath d='M0 0h16v16H0z' fill='none'%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.xRgnTb a.xSort-revert > .xSort-img {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M15.82 12.33a2.85 2.85 0 0 0-.56-.85 2.67 2.67 0 0 0-.85-.56 2.53 2.53 0 0 0-1-.21H9.93l1.93-1.94-.76-.67-3.27 3.27 3.27 3.28.75-.75-2.2-2.17h3.83c2.134 0 2.134 3.2 0 3.2h-.1V16a2.53 2.53 0 0 0 1-.21c.317-.13.606-.32.85-.56a2.85 2.85 0 0 0 .56-.85 2.61 2.61 0 0 0 0-2.05z' fill='%23FFF'%2F%3E%3Cg data-name='Layer 2'%3E%3Cpath d='M4 0h12v1H4zM0 0h2v1H0zm4 4h12v1H4zM0 4h2v1H0zm4 4h5v1H4zm9 0h3v1h-3zM0 8h2v1H0zm4 4h3v1H4zm-4 0h2v1H0z' fill='%23FFF' data-name='Layer 1'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.xRgnTb .xSort-retain > .xSort-img,
.xRgnTb .xSort-revert > .xSort-img {
   margin-top: 13px;
}
/* END OPTION REORDERING STYLES */


.xComboBox > .xComboEdit {
   border-color: #bbb;
   border-right-style: none;
}

.xComboBox > .xImage {
   border-color: #bbb;
}

.xComboBox:hover .xComboEdit,
.xComboBox:hover .xImage {
   background-color: #f3f1f1;
}

div.xImage {
   border-right-style: solid;
   height: 17px;
   width: 13px;
}

div.xImage[displayMode="Dropdown"] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAARAgMAAAB7kc4PAAAACVBMVEX///////8AAACO9MPsAAAAAnRSTlMAGGX/VW4AAAAvSURBVHhefcshAQAhEACwvTgafB8iIEBQgTxEQF1KGjA/bzE6JQ+Rm281zIr/sS7KGASvqIGibgAAAABJRU5ErkJggg==') /*cboImg.png*/ !important;
}

div.xImage[displayMode="Dropdown"][hot] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAARAgMAAAB7kc4PAAAACVBMVEUAAADz8fH///9bVaxKAAAAMklEQVR4Xn3MMREAIBADwWuQgB8sfBE/iAATUUkGAd/spMgctjdXajiMLGZYCtWcf+8B9KYd2n0xfxoAAAAASUVORK5CYII=') /*cboHot.png*/ !important;
}

div.xImage[displayMode="Picker"] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAARBAMAAAD00TuvAAAAD1BMVEX///8AAAAAAAAAAAAAAABRO2rwAAAABHRSTlMAZswAmIZJSgAAACRJREFUeF61x7EBAAAExMCwiREYwf5D+Uqhd6nCN4tU4F1q/xpMtAK5PeUwNAAAAABJRU5ErkJggg==') /*cboBrowseImg.png*/ !important;
}

div.xImage[displayMode="Picker"][hot] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAARBAMAAAD00TuvAAAAGFBMVEUAAAA+RUs/RUtARku0tbi1tbjz8fH///9CFr8lAAAANUlEQVR4Xq2NuwkAIBQDgzO4igvJe9ZB/KxvFHQC74oUKQ7zQIyy+b89uSRqyJJo0eT7b38B8rcvB7vLrm8AAAAASUVORK5CYII=') /*cboBrowseHot.png*/ !important;
}

input.xCal {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
}

.xCfg > .xLookupBody {
   top: 42px;
   left: 0;
   bottom: 66px;
   background-color: #fff;
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
}

.xCfg > .xLookupPreview {
   font-size: 14px;
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   top: 42px;
   right: 0;
   bottom: 66px;
   width: 190px;
   background-color: #fff;
}

.xCfg > .xLookupPreview > span {
   font-size: 14px;
   line-height: 18px;
   padding-top: 10px;
   text-transform: uppercase;
   font-weight: 500;
   border-bottom-color: transparent;
   text-align: center;
}

#expSelOptions {
   top: 32px;
   padding: 0;
}

#expSelOptions > div > img {
   padding: 4px;
}

#expSelOptions > div {
   margin-top: 5px;
   margin-bottom: 15px;
   border-style: none;
}

#expSelOptions > div > div.props {
   margin-top: 5px;
   margin-bottom: 5px;
}

#expSelOptions > div > div.props > div > span {
   padding-top: 3px;
   padding-right: 3px;
}

table.xLookup th.xFilterHdr {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAwFBMVEX///95fIm5u8P8/Pz///+0tr1VWmqQk5+TlqLNz9fw8PP19fb6+vp/gpD9/PuGipe4u8NTV2fk5Ofl5ejm5unp6eyZnqnx8vPy8/VWW2qVmKOXmqTT1tzW2N7h4ubj5Oi6vcS7vcS7vcW7vsVbX2+LjplcYHCTlaBlaXlucoJ3e4lMUWGbnqft7u/v8PKdoKmeoq2foazz9PX09PX09Pb09fagpK/3+Peqq7SqrbWtsLn9/f3+/v7//vz//v56fopvLrzdAAAAAXRSTlMAQObYZgAAAHlJREFUeF6NzTUOxDAARNExhmmZmZkZ7n+rRFakxNXu6+Y3g98E7YUpSgf0AZOUnLNyOh66cw8whMMVVrZMgkTjdk3mxy1awRfKfuXzl1tokTFS9+n7WW0vmtlVf8g23hY5FWZL5O2YPdLChdcmWjDWnUgLs7pc4k8xRygJ5GZsAbQAAAAASUVORK5CYII=') /*btnFilter.png*/;
}

table.xLookup th {
   border-bottom: none;
   font-weight: normal;
   padding-left: 2px;
   padding-top: 8px;
   padding-bottom: 8px;
}

table.xLookup th:hover:not(.xFilterHdr) {
   background-image: none !important;
   background-color: #d7ebf9;
}

table.xLookup #PickerTHEAD tr {
   border-bottom: solid 1px #ccc;
}

table.xLookup #PickerTBODY {
   font-size: 14px;
}

table.xLookup #PickerTBODY tr td {
   height: 32px;
}

table.xLookup #PickerTBODY tr:nth-child(odd) td {
/* alternating row colors in picker?
   would need to account for messages in rows (i.e. no rows matching criteria, etc...)
   where the color would not be desirable
   background-color: #efefef;
*/
}

table.xLookup #PickerTBODY tr:hover td:not(.xNoData) {
   font-weight: 600;
/* alternating row colors in picker?
   background-color: #d8d8d8;
*/
}

table.xLookup tr.xSel,
table.xLookup tr.xHoverSel,
table.xLookup tr.xHoverSel td {
   background-color: rgba(231, 239, 247, 1);
}

table.xLookup tr.xHover,
table.xLookup tr.xHover td {
   background-color: rgba(231, 239, 247, .5);
}

table.xLookup td.xNoData {
   background-color: white;
   font-size: 27px;
   color: #d6d6d6;
}

.xLookupBody > .xPage {
   border: none;
}

table.xLookup tr.xActiveFilter > td {
   height: auto;
   border-bottom: none;
   padding-top: 6px;
   padding-bottom: 6px;
}

table.xLookup tr.xActiveFilter > td > input {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color: #666;
   margin: 0;
   padding: 0;
}

table.xLookup tr > td {
   height: 28px;
   border-bottom-style: none;
}

table.xLookupQuickBar {
   height: 24px;
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   border-style: none;
}

.xCfg > .xLookupTb {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   bottom: 24px;
   height: 42px;
   border-top: solid 1px rgb(216, 216, 216);
   border-bottom-style: none;
   background-color: white;
}

.xCfg > .xLookupTb > .xTbBtns {
   color: white;
}

.xCfg > .xLookupTb > .xTbText {
   font-family: "Segoe UI Light", "Segoe UI Semilight", "Segoe UI Regular", "Segoe UI", Tahoma, Helvetica, Arial, sans-serif;
   padding-top: 0;
   margin-top: 9px;
   font-size: 14px;
   color: #333;
}

table.xCompare {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
}

   table.xCompare tr.cat > td {
      border-color: transparent;
      background-color: transparent;
      font-size: 12px;
      color: #666;
      text-transform: uppercase;
      font-weight: bold;
   }

table.xCompare tr.opt > td.rowHdr {
   background-color: transparent;
}

table.xCompare tr.opt > td[expandButton].rowHdr {
   font-weight: normal;
   color: rgba(19, 96, 183, 1);
}

table.xCompare tr.opt > td[expandButton].rowHdr:hover {
   color: #505050;
}

table.xCompare tr.optProp > td {
   border-color: transparent;
}

table.xCompare tr.optPropAlt > td {
   background-color: #efefef;
   border-color: #efefef;
}

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

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

/* web uploader dialog */

div.xWuSection table tr > th {
   /* match colors from table.xCatGrid tr > th */
   border-bottom-color: #d6d6d6;
   border-right: solid 1px white;
}

/* web uploader dialog */

/* 
   -----------------------
   because structurally the .xTbText bar (which contains the series/model + branding) is actually part of the toolbar, but needs to appear above it, adjust the positioning
   of both bars accordingly
*/
.xMainCfg > .xTb,
.xChildCfg > .xTb {
   top: 48px;
   height: 42px;
}

.xTb > .xTbText {
   background-color: #efefef;
   font-size: 20px;
   line-height: 32px;
   text-transform: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   text-align: left;
   margin-top: -48px;
   padding: 8px 0px 0px 28.6px;
   height: 40px;
   color: black;
}

.xTb > .xTbText > b {
   font-weight: 600;
   text-transform: uppercase;
}

.xTb .xTbBranding {
   position: absolute;
   top: 0;
   right: 3px;
   margin-top: -40px;
   z-index: 98;
}
.xTb > .xTbBranding img {
   width: 166px;
   height: 34px;
}

.xCfg > .xCbFilter {
   background-color: white;
   left: 0;
   height: 42px;
   border: 1px solid #c6c6c6;
   border-right: solid 1px rgb(102, 102, 102);
   width: 200px;
}

.xCfg > .xCbFilter > .xCbFilterResults {
   text-align: left;
   padding-left: 14px;
   top: 41px;
   position: absolute;
}

.xCfg > .xCbFilter > input[type="text"] {
   color: rgb(102, 102, 102);
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   margin: 0;
   padding: 0 0 0 6px;
   width: 193px;
   font-weight: normal;
}

.xCfg > .xCbFilter > input[type="text"]:hover,
.xCfg > .xCbFilter > input[type="text"]:focus {
   background-color: white;
   border-style: none;
   margin: 0;
   padding: 0 0 0 6px;
}

.xCfg > .xCbFilter > input::placeholder {
   color: rgba(168, 168, 168, 1);
}

.xCfg > .xCbFilter + .xCb {
   top: 90px;
   border-style: none;
   box-sizing: border-box;
   background-color: rgb(239, 239, 239);
   border-right: solid 1px rgb(216, 216, 216);
}

.xCfg > .xCbFilter[withResults] + .xCb {
   top: 113px;
   border-top-style: none;
}

.xCfg > .xBody {
   top: 40px;
}

.xMainCfg > .xCb,
.xCfg > .xCb,
.xCfg > .xCbFilter {
   top: 48px;
   left: 0;
   bottom: 0;
   width: 200px;
   background-color: rgb(239, 239, 239);
   border-style: none;
   border-right: solid 1px rgb(216, 216, 216);
   border-bottom: solid 1px rgb(239, 239, 239);
}

.xCfg > .xCbFilter > input {
   background-color: rgb(239, 239, 239);
}

.xCfg[popout] > .xBody {
   top: 42px;
   right: 0;
   bottom: 30px;
   left: 0;
}

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

.xMainCfg > .xBody,
.xChildCfg > .xBody {
   top: 90px;
   right: 0;
   bottom: 28px;
   left: 200px;
   border-style: none;
}

table.xCatGrid[orientation="horizontal"][banded='true'] tbody tr:nth-child(even),
table.xCatGrid[orientation="vertical"][banded='true'] tbody col:nth-child(even),
table.xCatGrid[orientation="horizontal"][banded='true'] tbody tr:nth-child(even) > td,
table.xCatGrid[orientation="vertical"][banded='true'] tbody col:nth-child(even) > td {
   background-color: #e9f4fc;
}

table.xCatGrid[orientation="horizontal"][banded='true'] tbody tr:nth-child(odd),
table.xCatGrid[orientation="vertical"][banded='true'] tbody col:nth-child(odd),
table.xCatGrid[orientation="horizontal"][banded='true'] tbody tr:nth-child(odd) > td,
table.xCatGrid[orientation="vertical"][banded='true'] tbody col:nth-child(odd) > td {
   background-color: white;
}

table.xCatGrid tr > td > div.xHelper > input[type='text'] {
   margin-top: 1px;
   margin-left: 1px;
   padding-bottom: 1px;
   padding-right: 0;
}

table.xCatGrid tr > td > div.xHelper > div.xIHBtn {
   background-image: url(cboBrowseImg.png);
}

   table.xCatGrid tr > td > div.xHelper > div.xIHBtn:hover {
      border-color: #bbb;
      background-image: url(cboBrowseHot.png);
      background-color: #f3f1f1;
   }

table.xCatGrid tr > td > div.xHelper[helper='reset'] > div.xIHBtn,
table.xCatGrid tr > td > div.xHelper[helper='revert'] > div.xIHBtn {
   background-image: url('cboRevert.png');
   height: 19px;
   border-color: #bbb;
}

   table.xCatGrid tr > td > div.xHelper[helper='reset'] > div.xIHBtn:hover,
   table.xCatGrid tr > td > div.xHelper[helper='revert'] > div.xIHBtn:hover {
      background-image: url('cboRevertHot.png');
      background-color: #f3f1f1;
   }

table.xCatGrid tr > td > div.xHelper[helper='menu'] > div:not(.xComboBox) {
   background-image: url('cboImg.png');
}

table.xCatGrid tr > td > div.xHelper[helper='menu'] > div:not(.xComboBox) {
   background-image: url('cboHot.png');
}

/* searchbox overrides */
div.xSearchBox {
   display: inline-block;
   vertical-align: top;
   background-color: #fff;
   background-image: url(btnSearchBox.png);
   background-position: right center;
   background-repeat: no-repeat;
   border: solid 1px #d3d3d3;
   border-radius: 1px;
   width: 200px;
   height: 40px;
   border: solid 1px #f3f1f1;
   margin-left: 5px;
}

div.xSearchBox::placeholder {
   color: rgba(168, 168, 168, 1);
}

div.xSearchBox:hover {
   display: inline-block;
   vertical-align: top;
   background-color: #fff;
   background-image: url(btnSearchBox_Hot.png);
   background-position: right center;
   background-repeat: no-repeat;
   border: solid 1px #d3d3d3;
   border-radius: 1px;
   width: 200px;
}

.xRgn[err] div.xSearchBox,
.xRgn[err] div.xSearchBox > input {
   background-color: #ffcccc;
}
.xRgn[err] div.xSearchBox > input::placeholder {
   color: #ff9999;
}
.xRgn[err] div.xSearchBox {
   border-color: #ffa8a8;
}
.xRgn[err] div.xSearchBox:hover {
   border-color: #EA4B35;
}

div.xSearchBox > input {
   font-size: 14px;
   margin-top: 10px;
   font-weight: 400;
}

div.xSearchBox[optionSelector] > input {
   font-size: 12px;
   margin-top: 0;
}

div.xSearchBox > input:hover,
div.xSearchBox > input:focus {
   border-style: none;
   background-color: white;
}

div.xSearchBoxDropDown > div.xItem:hover {
   background-color: #cce6d0;
}

div.xSearchBoxDropDown > div.xItem[sel]:hover {
   background-color: #b1d6f0;
}

div.xSearchBoxDropDown > div.xItem[sel] {
   background-color: #cce6d0;
}

.xDialogPopup .xTransition {
   border: solid 0;
}

.xDialogPopup .xTransition[type='1'] {
}

.xDialogPopup .xTransition[type='1'] .xTransitionTitle {
   color: black;
}

.xDialog {
   background-color: white;
}

.xDialog.xDialogIFrame {
   border: solid 0;
   background-color: white;
}

.xDialog > .xDialogTitlebar {
   background-color: rgba(17, 96, 183, 1);
}

.xDialog > .xDialogTitlebar > .xDialogTitlebarText {
   font-family: "Segoe UI Semibold", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
}

.xSep {
   background-color: #ececec;
}

/* Core Overrides */

.xTb img, .xMsgTb img, .xLookupTb img, .xRgnTb img, .xRgnTb input {
   padding: 0;
   padding-top: 13px;
}

/* for images (separators) that are directly on the toolbar */
.xTbBtns > img {
   /* is there a better way to get the separator to align properly? */
   position: relative;
/*   top: -10px; */
}

.xTbBtns * span {
   padding: 11px 0 0 7px;
}

.xBody > .xPage .xRgn[joinerr]:after,
.xBody > .xPage .xRgn[err]:after {
   border-color: #EA4B35;
   background: #900000;
}

div.xComboItem[header], div.xComboItem[header] > div {
   background-color: #001ca5;
}

.tab-strip {
   background-image: none;
}

.action-panels .tab-strip.tab-strip-left,
.action-panels .tab-strip.tab-strip-right {
   background-color: rgb(51, 51, 51);
   width: 48px;
}

.tab-control {
   border-color: #bbb;
}

.tab-item {
   background-color: white;
   border-style: none;
   text-transform: capitalize;
   font-family: "Segoe UI Regular", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 16px;
   font-weight: normal;
   color: rgb(0, 0, 0);
}

.tab-item:hover {
   background-color: transparent;
   border-style: none;
}

.tab-item.tab-item-top {
   margin: 2px 20px 0 0;
   padding: 4px 0;
}

/* for now, until the action panel icons can be "theme-aware", force tabs to be white */

.tab-item.tab-item-right,
.tab-item.tab-item-right.selected {
   margin: 0;
   background-color: white;
}

.tab-item.tab-item-right {
   padding: 12px 16px 12px 4px;
}
.tab-item.tab-item-right:hover {
   background-color: rgb(231, 239, 247); 
}

.tab-item.tab-item-top.selected {
   border-bottom: solid 2px rgb(0, 102, 255);
   margin: 2px 20px 0 0;
   padding: 4px 0;
   font-family: "Segoe UI Semibold", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
}

.tab-item.tab-item-right.selected {
   border-right: solid 4px rgb(0, 102, 255);
   padding: 12px 12px 12px 4px;
}

.tab-item.tab-item-bottom.selected {
   border-top: solid 2px rgb(0, 102, 255);;
}

.tab-item.tab-item-left,
.tab-item.tab-item-left.selected {
   margin: 0;
   padding: 12px 4px 12px 12px;
   background-color: rgb(51, 51, 51);
}

.tab-item.tab-item-left.selected {
   border-left: solid 4px white;
   background-color: rgb(0, 0, 0);
}

.tab-item:hover {
   font-family: "Segoe UI Semibold", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
}

.tab-item.error:hover,
.tab-item.warn:hover {
   background-color: #EA4B35;
}

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

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

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

.messages-count-label

div.xCCfg > a[display='button'] {
   font-size: 12px;
   line-height: 14px;
   color: rgba(17, 96, 183, 1);
}

div.xCCfg > a[display='button']:hover {
   background-color: rgba(231, 239, 247, 1);
   color: black;
}

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

.action-panels-root {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 12px;
}

.action-panel > .action-panel-titlebar {
   background-color: #efefef;
   height: 48px;
}

.action-panel > .action-panel-titlebar > .action-panel-titlebar-text {
   font-size: 14px;
   color: black;
   margin-top: 13px;
}

.button-bar {
   background-color: white;
   padding: 0;
   height: 42px;
   border-top: solid 1px rgb(216, 216, 216);
   box-sizing: border-box;
}

.search-results-none,
.messages-action-panel .no-messages {
   font-size: 15px;
   color: #333;
}

.results-popup-disclaimer {
   background-color: rgba(232, 127, 4, .2);
   border: 1px dotted #e87f04;
}

.action-panel .close-button {
   margin: 11px;
}

.button-bar .btn {
   padding: 0 14px;
   height: 42px;
   color: #333;
}

.button-bar .btn span {
   margin-left: 12px;
}

.button-bar .btn:hover {
   border-style: none;
   background-color: rgb(216, 216, 216);
}

.button-bar .btn.toggled {
   border-style: none;
   background-color: rgb(200, 200, 200);
}

/* Quick Action Bar - BEGIN ====================================================== */
.xCfg > .xQAB {
   top: 90px;
   right: 0;
   left: 0;
   height: 40px;
   line-height: normal;
   background-color: white;
   font-family: Segoe UI Regular, "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 14px;
   text-transform: capitalize;
   border-bottom: solid 1px rgb(216, 216, 216);
}

.xCfg > .xBody.xQAB_Body {
   top: 136px;
}

.xCfg > .xTbMask.xQAB_ToolBarMask {
   height: 131px;
}

.xCfg > .xQAB > .xQABBtns > img,
.xCfg > .xQAB > .xQABBtns > div {
   display: inline-block;
   padding: 9px 14px 0 14px;
   margin: 0;
}


.xQAB_LabelIMG { margin: 0; }
.xCfg > .xQAB > .xQABBtns > img.xQAB_Image_Small { padding: 5px 4px 0 4px; vertical-align: baseline; }
.xCfg > .xQAB > .xQABBtns > img.xQAB_Separator { padding: 0; vertical-align: baseline; }

/* .xCfg > .xQAB img { margin: 0; }
.xCfg > .xQAB > .xQABBtns > .xQAB_ButtonIMG,
.xCfg > .xQAB > .xQABBtns > img.xQAB_Image_Small,
.xCfg > .xQAB > .xQABBtns > img.xQAB_Image_Standard,
.xCfg > .xQAB > .xQABBtns > img.xQAB_Separator {
   padding-top: 0;
} */

.xQABBtns > div.xQABButton:hover,
.xQABBtns > div.xQABButtonWithImage:hover {
   background-color: #c2c2c2;
}
/* Quick Action Bar - END ====================================================== */


.xPage {
   top: 77px;
}

.xCb a[filter="incl"] > span {
   color: rgba(17, 96, 183, 1);
}


/*.xCb a:first-of-type {*/
/*   margin-top: 10px;*/
/*}*/

div.xCombo {
   border: 1px solid #c6c6c6;
}

div.xComboItem[header], div.xComboItem[header] > div {
   background-color: rgba(224, 224, 224, 1) !important;
   color: #505050 !important;
}

table.xLookup tr.xActiveFilter td {
   vertical-align: middle;
}

div.xComboItem[selected] {
   background-color: rgba(231, 239, 247, 1);
}

div.xComboItem[focused] {
   background-color: rgba(231, 239, 247, 1);
   border: 1px dotted rgba(224, 224, 224, 1);
}

.xCfg > .xCbFilter > .xCbFilterResults {
   border: 1px dotted #e87f04;
   background: rgba(232, 127, 4, .2);
   padding-top: 3px;
   padding-bottom: 3px;
   width: 200px;
   box-sizing: border-box;
}

.xP td {
   padding: 0 20px 0 20px;
}


.xRgnHdrBtns > div.xSearchBox {
   margin-top: 6px;
}

.multisplit-panel:not(.collapsed) > .viewRgn {
   padding: 21px;
}

#pgTabs {
   padding-left: 21px;
   width: calc(100% - 21px);
   margin-top: 3px;
   border-style: none;
}

.siblingPageViewRgn {
   width: calc(100% - 42px); /* to account for 21px padding around categories */
   top: 0;
   padding: 0 21px;
   margin: 21px 0;
}

.xRgnNavContainer.fixed {
   border: solid 1px rgb(207, 205, 204);
   border-top: 0;
   border-bottom: 0;
}

   .xRgnNavContainer.fixed.top {
      /*top: 8px;*/
      border-top: solid 1px rgb(207, 205, 204);
   }

table.xInner {
   border: solid 1px rgb(207, 205, 204);
   border-top-width: 0;
   border-bottom-width: 0;
}

/* POSTBACK TOOLBAR INDICATOR */
.xCfg > .xTbMask.xTbPostback > .content {
}
.xCfg > .xTbMask.xTbPostback > .content > .spinner {
   left: 32px;
   top: 16px;
}
.xCfg > .xTbMask.xTbPostback > .content > .spinner:before {
   height: 23px;
   width: 23px;
   border-width: 5px;
}
.xCfg > .xTbMask.xTbPostback > .content > .text {
   left: 70px;
   top: 16px;
   font-size: 25px;
}
/* END POSTBACK TOOLBAR INDICATOR */

/* RANGE SLIDER */
.xSliderTrack {
   border: 1px solid #ccc;
}

.xSliderFill {
   border: 1px solid #ccc;
   background: #f3f1f1;
}

.xSliderThumb {
   background-color: #f3f1f1;
   border: 1px solid #ccc;
}
/* END RANGE SLIDER */

.xRecalcLines {
   top: 185px;
}

/* QUICK VIEW */
.xCfg > .xQVBody {
   top: 50px;
   margin: 0 12px 12px 10px;
}

.xCfg > .xQVBody iframe {
   border: 1px solid #c6c6c6;
}

.xQV {
   font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.xQV .cat {
   background-color: #f3f3f3;
   border-bottom: 1px solid #c6c6c6;
   border-top: 1px solid #c6c6c6;
}

@media print {
   .xQV .cat {
      border-bottom: none;
   }
}

.xQV .total {
   border-top: 1px solid #c6c6c6;
}
/* END QUICK VIEW */

/* OVERVIEW */
.xOverviewIcon {
	width: 14px;
	height: 14px;
	cursor: pointer;
	float: right;
	margin-top: -18px;
	margin-right: 1px;
}

.xOverviewIFrame {
	width: calc(100% + 6px) !important;
	height: calc(100% - 45px) !important;
	position: absolute;
	top: 40px;
	right: 0;
	bottom: 0;
	left: 0;
	margin-left: -3px;
}
/* END OVERVIEW */

/* SELECTED OPTION - PICKER */
.xSelectedOptionRow {
	background-color: #f6f6f6;
	border-bottom: 1px solid;
}

table#dataTable.xLookup {
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   background-color: white;
}

table#dataTable.xLookup thead#PickerTHEAD tr > th {
   color: rgb(4, 89, 153);
   font-size: 15px;
   text-overflow: ellipsis;
   white-space: nowrap; /* headers should not wrap in UCI */
   border-top-style: hidden;
   border-left-style: hidden;
   border-right-style: hidden;
   border-bottom: solid 1px #d6d6d6;
}

table#dataTable.xLookup thead#PickerTHEAD tr > th > img {
   margin-top: 2px;
   float: right;
}

table#dataTable.xLookup thead#PickerTHEAD tr.xSelectedOptionRow th {
   background-image: url('iconDotCheck.png');
   background-repeat: no-repeat;
   background-position: center;
   border-bottom: solid 1px #d6d6d6;
}
/* END SELECTED OPTION - PICKER */

/* START SETTINGS DIALOG */
.xStg { /* from .xCore */
   font-family: "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
   font-size: 13px;
   color: #505050;
}

.xStg > .xRgnHdr {
   padding-top: 9px;
   padding-bottom: 9px;
}

.xStg > .xControls > div.xBtn { /* from revert helper */
   background-image: url('cboRevert.png');
}

.xStg > .xControls > div.xBtn:hover {
   background-image: url('cboRevertHot.png');
}
/* END SETTINGS DIALOG */