* {
  margin: 0;
  padding: 0;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub,
sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, figcaption, figure, footer, header,
hgroup, menu, nav, section, summary,
time, mark, audio, video, textarea {
  font-family: "Open Sans", Arial, "Sans-Serif";
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility !important;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub,
sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, figcaption, figure, footer, header,
hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: middle;
}

html, body {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  font-size: 0.9em;
  background-color: #e9ecf3;
  scrollbar-width: none;
}

body {
  position: relative;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

ul {
  list-style: outside none none;
}

/* Global scrollbar styling */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb {
  background: #dee2e6;
  border-radius: 4px;
  transition: background 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: #adb5bd;
}
*::-webkit-scrollbar-corner {
  background: #f8f9fa;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #dee2e6 #f8f9fa;
}

@keyframes animActiveElement {
  from {
    padding: 1px 2px;
    margin: 6px 2px 0px 0px;
  }
  to {
    padding: 3px 2px;
    margin: 2px 2px 0px 0px;
  }
}
@keyframes animAppMenuHeightHomePage {
  0% {
    height: 30px;
  }
  25% {
    height: 33px;
  }
  50% {
    height: 36px;
  }
  75% {
    height: 39px;
  }
  100% {
    height: 43px;
  }
}
@keyframes animAppMenuHeightOtherPage {
  0% {
    height: 43px;
  }
  25% {
    height: 39px;
  }
  50% {
    height: 36px;
  }
  75% {
    height: 33px;
  }
  100% {
    height: 30px;
  }
}
@keyframes animAppMenuPaddingHomePage {
  0% {
    margin-top: 0px;
  }
  25% {
    margin-top: 5px;
  }
  50% {
    margin-top: 9px;
  }
  75% {
    margin-top: 13px;
  }
  100% {
    margin-top: 17px;
  }
}
@keyframes animRotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.uiRotating {
  color: #FF4081 !important;
  -webkit-animation: animRotating 2s linear infinite;
  -moz-animation: animRotating 2s linear infinite;
  -ms-animation: animRotating 2s linear infinite;
  -o-animation: animRotating 2s linear infinite;
  animation: animRotating 2s linear infinite;
}

.phHeaderTODO {
  position: absolute;
  z-index: 1;
  font-size: 17px;
  display: block;
  width: 100%;
  text-align: center;
  height: 40px;
  color: white;
  background: linear-gradient(to bottom, #000000 0%, #565656 100%); /* W3C */
}

.phHeaderTODO:hover {
  z-index: 0;
}

.phHeaderTODO span {
  margin: 10px 0px 0px 0px;
  display: block;
}

.phNavigationTODO:hover {
  z-index: 2;
}

/* menu place holders + menu */
.phNavigation {
  position: relative;
  width: 100%;
  height: 40px;
  background: #000000; /* Old browsers */
  background: linear-gradient(to bottom, #000 0%, #616161 100%); /* W3C */
}

.phNavigation > .phLogo {
  float: left;
  width: 40px;
}

.phLogo > .imgHomeLogo {
  display: block;
  width: 50px;
  height: 40px;
}

.phLogo > .imgHomeLogo img {
  height: 100%;
  padding-left: 5px;
}

.phNavigation > .phMenu {
  float: left;
}

.dynamicMenuSource {
  display: none;
}

.phNavigation > .phModuleMenu {
  float: left;
}

.phBckgrdActMenu {
  float: left;
  margin: 10px 0px 0px 10px;
}

.phNavigation > .phModuleMenu li {
  background-color: #FFEB9C;
}

.phNavigation > .phModuleMenu li a {
  background-color: #FFEB9C;
  color: Black;
}

.uiMenu {
  padding: 0;
  margin: 0;
  list-style-type: none;
  height: 40px;
  z-index: 10000;
  background: #000000; /* Old browsers */
  background: linear-gradient(to bottom, #000 0%, #616161 100%); /* W3C */
}

.uiMenu li {
  float: left;
}

.uiMenu li a {
  padding: 13px 15px 13px 15px;
  display: block;
  color: #fff;
  text-decoration: none;
  font: 13px Arial, Sans-Serif;
  font-weight: bold;
}

.uiMenu li a:hover {
  color: #fff;
  cursor: pointer;
}

/* Submenu */
.uiMenu ul {
  position: absolute;
  left: -9999px;
  top: -9999px;
  list-style-type: none;
  z-index: 10000;
}

.uiMenu li {
  transition: all 0.1s;
}

.uiMenu li:hover {
  position: relative;
  background: #000;
}

.uiMenu li:hover a {
  color: #fff;
}

.uiMenu li:hover ul {
  left: 0px;
  top: 40px;
  padding: 0px;
  box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.25);
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.uiMenu li:hover ul li {
  background-color: #000;
}

.uiMenu li:hover ul li a {
  width: 215px;
  padding: 8px 5px;
  text-indent: 10px;
}

.uiMenu li:hover ul li:last-child {
  margin-top: -1px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.uiMenu li:hover ul li.uiMenuSeparator a {
  height: 1px;
  width: 225px;
  padding: 0;
  background-color: #D89000;
  box-sizing: border-box;
}

.uiMenu li:hover ul li a:hover {
  background: #ad6a11;
  color: #fff;
  background: #4286f4;
}

.uiMenu li:hover ul li:last-child a:hover {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.phNavigation > .phUserInfo {
  float: right;
}

.phUserInfo > .phUser {
  float: right;
}

.phUserInfo > .icoLogout {
  float: right;
}

.icoLogout > a {
  display: block;
  width: 40px;
  height: 40px;
  background: url("../../images/ux/icoLogout.png") no-repeat;
}

.icoLogout > a:hover {
  background: #dd9e00 url("../../images/ux/icoLogoutHover.png") no-repeat;
}

.phUser > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
  font: 11px Arial, Sans-Serif;
  margin-right: 5px;
}

.phUser > ul li {
  text-align: right;
  padding-top: 4px;
}

.phUser > ul li a {
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

.phUser > ul li a:hover {
  color: #dd9e00;
}

.phBreadcrumb {
  position: relative;
  width: 100%;
  height: 25px;
  padding: 6px 0px 0px 10px;
  box-sizing: border-box;
  background: #d3d3d3; /* Old browsers */
  background: linear-gradient(to bottom, #d3d3d3 0%, #b5b5b5 100%); /* W3C */
}

.phBreadcrumb > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 12px Arial, Sans-Serif;
}

/* menu place holders + menu */
/* Tile menu starts here*/
/* ============================================================
  TILE NAVIGATION
============================================================ */
/* nav styles */
.uiGridMenu {
  display: none;
}

.uiGridMenu .uiGridMenuSearch {
  width: 100%;
  text-align: center;
}
.uiGridMenu .uiGridMenuSearch input {
  width: 100%;
  max-width: 200px;
  height: 30px;
  text-align: center;
  border-radius: 3px;
  border: 2px solid #4e342e;
}

.uiGridMenu .uiGridMenuIcon {
  color: #f4f8fd;
  margin: 0px 10px 0px 0px;
  font-size: 15px;
}

.uiGridMenu .uiMenuGroup {
  background-color: #e9ecf3;
  margin-top: 15px;
  padding: 3px;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
}

.uiGridMenu.open {
  display: block;
}

.uiGridMenu ul {
  list-style: none;
}

.uiGridMenu li {
  vertical-align: top;
  display: inline-block;
  overflow: hidden;
  transition: background 0.3s;
  width: 120px;
  margin: 10px 3px;
}

.uiGridMenu a {
  display: block;
  padding: 10px;
  margin: 10px;
  text-decoration: none;
  color: #000;
  transition: background 0.3s, transform 0.3s;
}

.uiGridMenu a:hover {
  background-color: #f4f8fd;
  box-shadow: 3px 3px 5px #6a6767, -2px 1px 5px #6a6767;
}

/* smoother transitions */
.uiGridMenu li,
.uiGridMenu a {
  transform: translate3d(0, 0, 0);
}

.uiGridMenu a span {
  display: block;
}

.uiGridMenu li img {
  width: 50px;
}

/* media queries */
@media (max-width: 480px) {
  .uiGridMenu {
    display: block;
  }
  .uiGridMenu li {
    width: 40%;
  }
  .phMenu {
    display: none;
  }
}
@media all and (min-width: 480px) {
  .uiGridMenu {
    display: block;
  }
  .phMenu {
    display: none;
  }
}
@media all and (min-width: 768px) {
  .uiGridMenu a {
    text-align: center;
    padding: 0px;
  }
  .phMenu {
    display: none;
  }
}
@media all and (min-width: 1024px) {
  .uiGridMenu a {
    padding: 0px;
    margin-top: 5px;
  }
  .phMenu {
    display: block;
  }
}
.uiAppMenu {
  display: block;
}

.uiAppMenu .uiAppMenuSearch {
  z-index: 2; /* ensure it stays above scrolling content */
  background: #fff; /* or match your popup background */
  height: 30px;
  padding: 10px 10px;
}
.uiAppMenu .uiAppMenuSearch .uiAppMenuSearchBar {
  border-bottom: 2px solid #3F92FF;
}
.uiAppMenu .uiAppMenuSearch .uiAppMenuSearchBar input {
  width: 100%;
  height: calc(100% - 1px);
  min-height: 0px !important;
}

.uiAppMenu .uiMenuIcon {
  color: #333333;
  font-size: 18px;
}

.uiAppMenu .uiMenuGroupContainer {
  margin-top: 20px;
}

.uiAppMenu .uiMenuGroup {
  background: #e9ecf3;
  margin: 10px;
  padding: 10px 0px;
  border-radius: 10px;
  text-align: left;
}
.uiAppMenu .uiMenuGroup .uiMenuGroupTitle {
  font-weight: bold;
  font-size: 18px;
  margin-left: 10px;
  display: flex;
  align-items: center; /* Vertically center icon and text */
  gap: 8px;
  color: #333333;
}
.uiAppMenu .uiMenuGroup .uiMenuTitle {
  display: block;
  font-weight: bold;
  color: #333333;
  text-align: center;
}

.uiAppMenu.open {
  display: block;
}

.uiAppMenu ul {
  list-style: none;
}

.uiAppMenu li {
  vertical-align: top;
  display: inline-block;
  overflow: hidden;
  transition: background 0.3s;
  width: 100px;
  margin: 3px 3px;
  text-align: center;
}

.uiAppMenu li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 7px;
  margin: 3px;
  text-decoration: none;
  color: #333333;
}

.uiAppMenu li:hover .uiMenuTitle {
  color: #FF4081;
}

.uiAppMenu a span {
  display: block;
}

.uiAppMenu li img {
  width: 32px;
  margin-bottom: 6px;
  display: block;
}

/* media queries */
/* ============================================================
  NAVIGATION TOGGLE
============================================================ */
a.nav-toggle {
  display: block;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #dce6f0;
  color: #646464;
  text-align: center;
}

a.nav-toggle:hover {
  background-color: #c8d2dc;
}

@media all and (min-width: 480px) {
  a.nav-toggle {
    display: none;
  }
}
/* Tile menu ends here*/
.uiHorizontalScroll {
  width: 100%;
  overflow: auto;
  white-space: nowrap;
}

.uiHorizontalScroll .uiScrollItem {
  display: inline-block;
  float: unset !important;
}

.uiAppMenuRow img,
.uiTopMenuRow img {
  width: 25px;
  margin: 0px 3px;
}

.uiShortcutMenu {
  margin-left: 20px;
}
.uiShortcutMenu .uiShortcutMenuRow {
  color: #ffffff;
  text-decoration: none;
  font-weight: normal;
  cursor: pointer;
  margin: 0px 10px;
}
.uiShortcutMenu .uiShortcutMenuRow img {
  width: 25px;
  margin: 0px 3px;
}

.uiAppDrawerMenu .uiAppIcon {
  color: #3F92FF;
}
.uiAppDrawerMenu .uiMenuItem {
  cursor: pointer;
}
.uiAppDrawerMenu .MuiList-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.uiMasterLayout {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: #e9ecf3;
}

.uiMasterLayoutTopbar {
  height: 30px;
  min-height: 30px;
  background: #000000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  z-index: 2;
}

.uiMasterLayoutRow {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.uiMasterLayoutSidebar {
  width: 50px; /* adjust as needed */
  background: #000000;
  min-height: 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);
  z-index: 1;
}

.uiMasterLayoutMain {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.uiMainContentWithFooter {
  flex: 1 1 auto;
  padding-bottom: 50px;
  box-sizing: border-box;
}

.uiResetFloats {
  clear: both;
}

.uiAppContent {
  margin: 10px;
}

.uiAppPaper {
  background-color: #e9ecf3;
}

.uiAppSideMenu {
  margin-top: "35px";
  margin-bottom: "35px";
  width: "100%";
}

.uiAppHeader {
  background-color: #000000 !important;
}
.uiAppHeader .uiAppToolBar {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
}
.uiAppHeader .uiAppMenuIcon {
  padding: 3px 5px 3px 0px;
  margin-top: 0px;
}
.uiAppHeader .uiAppMenuLogo {
  margin-left: 12px;
}

.uiAppFooter {
  font-size: 10px;
  padding: 5px 5px;
  width: 100%;
  background-color: #504e4e !important;
  color: #fff;
}

.uiAppIcon {
  color: #ffffff;
}

.uiAppToolBar .uiAppRightMenu {
  float: right;
  display: flex;
  position: absolute;
  gap: 10px;
  right: 15px;
  height: 23px;
  margin-top: auto;
  margin-bottom: auto;
}
.uiAppToolBar .uiUserCulture {
  cursor: pointer;
}
.uiAppToolBar .uiAppIconWithLink,
.uiAppToolBar .uiAppIconWithTitle {
  color: #ffffff;
  text-decoration: none;
  font-weight: normal;
  display: flex;
  align-items: center; /* Vertically center icon and text */
  gap: 1px;
}
.uiAppToolBar .uiAppIconWithLink .uiAppIcon,
.uiAppToolBar .uiAppIconWithTitle .uiAppIcon {
  color: #3F92FF;
  margin: 0px 3px;
  font-size: 18px;
}
.uiAppToolBar .uiAppIconWithLink span,
.uiAppToolBar .uiAppIconWithTitle span {
  padding: 0px;
  font-weight: bold;
  display: inline-flex;
  vertical-align: super;
}
.uiAppToolBar .uiAppIconWithLink {
  cursor: pointer;
}
.uiAppToolBar .uiAppIconWithTitle {
  cursor: default;
}
.uiAppToolBar .uiAppIconWithTitle:hover {
  text-decoration: none;
}
.uiAppToolBar .uiAppWarningTag {
  padding: 1px 3px;
  background-color: white;
  color: red;
  border-left: 3px solid blue;
}

.uiServerProfile {
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
}
.uiServerProfile .uiSPInd {
  background-color: #999696;
  -moz-border-radius: 50%;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  border: 2px solid #ffffff;
}

.uiSPTest {
  border: none;
}
.uiSPTest .uiSPInd {
  background-color: #504E4E;
}

.uiSPLive {
  border: none;
}
.uiSPLive .uiSPInd {
  background-color: #3F92FF;
}

.uiWrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 10px;
}

.uiWrapper > .uiHeader {
  width: 100%;
  height: auto;
}

.uiWrapper > .uiHeader {
  background: #005005;
  box-shadow: 0px 0px 2px 1px #d1cfcf;
}

.uiWrapper > .uiHeader .uiHighlightKey {
  color: #ffffff;
}

.uiWrapper > .uiContents {
  padding: 1px;
  background: #e9ecf3;
}

.uiNavMenu {
  position: relative;
  padding: 3px 6px;
  height: 31px;
  overflow: auto;
}

.uiNavMenu .uiHighlightKey {
  font-size: 15px;
}

.uiNavMenu ul {
  list-style: none;
}

.uiNavMenu ul li {
  float: left;
  margin-top: 2px;
  margin-right: 10px;
}

.uiNavMenu ul li:last-child {
  margin-right: 0;
}

.uiNavMenu .uiActive {
  border-bottom: 2px solid #000;
}

.uiNavMenu > .uiNavPlan {
  float: left;
}

.uiNavMenu > .uiNavBckAct {
  display: block;
  width: 400px;
  margin: 0 auto;
}

.uiNavMenu > .uiNavUser {
  float: right;
}

.uiNavMenu > .uiNavUser li:first-child {
  width: 100px;
  padding: 0px 20px 0px 0px;
}

.detailcontents {
  box-sizing: border-box;
}

.detailcontents {
  position: relative;
}

.phLeftColumn,
.phRightColumn {
  position: fixed;
  width: 250px;
  top: 90px;
  height: calc(100% - 90px);
  padding: 0 5px 5px 5px;
}

.phMiddleColumn {
  position: relative;
  width: calc(100% - 507px);
  margin: 0 auto;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.detailcontents > .phMiddleColumn > .phSectionContents {
  padding: 2px 4px;
  margin: 5px;
  overflow: auto;
}

.phLeftColumn {
  left: 0;
}

.phRightColumn {
  right: 0;
}

.phSectionContents > .phHeader {
  display: block;
  overflow: auto;
}

.phPageFooter a {
  display: inline-block;
  width: 100px;
  background-color: #ccc;
  padding: 5px 10px;
  margin-bottom: 3px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.phPageFooter a:hover {
  color: #000;
  text-decoration: underline;
}

.phLeftColumn, .phRightColumn {
  position: fixed;
  width: 150px;
  height: calc(100% - 90px);
  padding: 0 5px 5px 5px;
  top: 100px;
}

.phMiddleColumn {
  position: relative;
  width: calc(100% - 160px);
  margin: 0px 160px 0px 0px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.phFullWidth {
  width: 100%;
  position: inherit;
  margin: 0px auto;
}

.phPageFooter a {
  width: 100%;
}

.phSectionContents > .phHeader {
  display: block;
  overflow: auto;
}

.FullWidthContainer,
.uiFitToContainer {
  width: 100%;
  padding: 10px;
}

.uiCol {
  display: block;
  float: left;
  width: 50%;
}

.uiSingleColumn {
  display: grid;
}

.uiFWGrid {
  clear: both;
}
.uiFWGrid > .uiRow {
  width: 100%;
  clear: both;
}
.uiFWGrid > .uiCol {
  display: block;
  width: 100%;
}

.uiGrid {
  clear: both;
}
.uiGrid > .uiRow {
  width: 100%;
  clear: both;
}
.uiGrid > .uiCol {
  display: block;
  float: left;
  width: unset;
}

.uiGridColTwo > .uiCol {
  display: block;
  float: left;
  width: 50%;
}

.uiGridColThree > .uiCol {
  display: block;
  float: left;
  width: 33%;
}

.uiGridColFour > .uiCol {
  display: block;
  float: left;
  width: 25%;
}

.MarginBottom50 {
  margin-bottom: 50px;
}

.uiBorderTop {
  border-top: 1px dotted #258625;
}

.uiFontSize11 {
  display: block;
  font-size: 11px;
}

.uiBlackContainer {
  background-color: #3e2723 !important;
  color: #ffffff !important;
}

.uiColorBlue {
  color: #0080ff;
}

.uiColorActionGrey,
.uiColorGrey {
  color: #999696;
}

.uiColorApproveAction,
.uiColorActionGreen,
.uiColorGreen {
  color: #43a047;
}

.uiColorRejectAction,
.uiColorNegativeAction,
.uiColorRed {
  color: #FF9800;
}

.uiColorAction {
  color: #3e2723;
}

.uiBlackContainer .uiColorAction {
  color: #fff;
}

.uiFloatRight {
  float: right;
}

.uiFloatLeft {
  float: left;
}

.uiTextLeft {
  text-align: left;
}

.App-logo {
  height: 80px;
  text-align: center;
  pointer-events: none;
}

input {
  height: 30px !important;
}

.uiSignInWrapper {
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dedede;
}
.uiSignInWrapper .uiSignInTitle {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.334;
}
.uiSignInWrapper .uiForm {
  width: 100%;
  margin-top: 0px;
}
.uiSignInWrapper .uiSigninInput {
  margin-top: 0px !important;
}
.uiSignInWrapper .uiSigninInput input {
  border: none !important;
}
.uiSignInWrapper .uiSigninLabel {
  margin-top: 10px;
  display: block;
  color: black;
  font-weight: bold;
}
.uiSignInWrapper .uiSubmit {
  color: #fff;
  font-weight: bold;
  background-color: #3F92FF;
  margin: 10px 0px 20px 0px;
  padding: 5px;
  font-size: large;
}
.uiSignInWrapper .uiSubmit .uiAppText2Compliment {
  color: #fff;
  font-weight: bold;
}
.uiSignInWrapper .uiSubmit:hover {
  color: #fff;
  background-color: #FF4081;
}

.uiSignInPaper {
  width: 350px;
  height: 550px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  background-color: #ffffff !important;
  border-radius: 10px;
}
.uiSignInPaper .uiLogoContainer {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: black;
  width: 100%;
  padding: 15px 5px;
  text-align: center;
}
.uiSignInPaper .uiForm {
  padding: 20px;
}

.uiGoogleSignin {
  cursor: pointer;
  border: medium none;
  padding: 3px 10px 3px 3px;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  border-radius: 10px;
  background-color: #ffffff;
}
.uiGoogleSignin img {
  margin-right: 5px;
}

.uiCultureList {
  margin: 10px 5px;
}
.uiCultureList span.uiLink {
  font-weight: normal;
  cursor: pointer;
  padding: 0px 5px;
  color: #000;
}
.uiCultureList span.uiActive {
  font-weight: bold;
  color: #000;
  padding: 0px 5px;
  text-decoration: underline;
}

.uiCompanyList {
  margin: 10px 5px;
}
.uiCompanyList .uiActive {
  font-weight: bold;
  color: #000;
}

.uiListScroll {
  height: 500px;
  overflow-y: scroll;
  overflow-x: scroll;
  scrollbar-width: none;
}

.uiHomeIntro {
  text-align: center;
  margin: 10px;
}

.uiWorkApproval .uiAppWFAction {
  display: none;
  position: absolute;
  background-color: #fff;
  z-index: 1000;
  box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.25);
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.uiWorkApproval:hover .uiAppWFAction {
  display: block;
}

#srTagAttributes {
  float: left;
  width: 870px;
}

#srAttributeHeader {
  margin-left: 50px;
  float: left;
  width: 300px;
}

.login-header {
  height: 75px;
  background-color: black;
  padding: 10px 20px;
}

.login-header .header-container {
  width: 100%;
}

.login-header .erpLogo {
  display: inline-block;
  width: 30%;
}

.login-header .erpLogo img {
  width: 100%;
  max-width: 150px;
}

.login-header .customerSupport {
  float: right;
  margin: 20px auto;
}

.login-header .customerSupport span {
  display: block;
  font-size: 16px;
  font-weight: bold;
  text-align: right;
  color: #C2C95C;
}

.login-header .customerSupport .slogan a {
  font-size: 12px;
  color: #Dc853D;
}

.frmLoginContainer {
  width: 450px;
  margin: 75px auto 0px auto;
}

.frmLoginInput {
  margin: 20px 0 0 0;
  background-color: #ffffff;
  border-radius: 3px;
  box-shadow: 0px 0px 4px 2px #d1cfcf;
}

.frmLoginInput > .frmInput {
  padding: 10px 0px 10px 65px;
}

.frmLoginInput ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: bold;
}

.frmLoginInput ul li {
  margin: 15px 0px 3px 0px;
}

.frmLoginInput ul li span {
  display: block;
}

.frmLoginInput ul li input {
  width: 300px;
}

.frmLoginInput ul li > select {
  width: 312px;
  padding: 5px;
  border: 1px solid #000;
  border-radius: 3px;
}

.frmLoginInput .phTitle {
  padding: 10px;
  background-color: #255d00 !important;
  color: #fff;
  font-weight: bold;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.frmLoginInput .uiGeneralAction {
  font-size: 15px;
  padding: 6px 20px;
}

.frmLoginInput .frmFooter {
  padding: 10px;
  clear: both;
  border-top: 3px solid #347bdc;
  color: #000;
  font-weight: bold;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 30px;
}

.frmLoginInput .frmFooter .left {
  float: left;
}

.frmLoginInput .frmFooter .right {
  float: right;
}

.frmLoginInput .messages {
  padding: 5px;
  display: block;
}

.phSearchPanel {
  border-radius: 10px;
}

.phSearchPanel .uiGroupContent {
  background-color: #fff;
}

.phSearchPanel > .phSearchFav {
  display: inline-block;
  padding: 5px 5px 5px 10px;
}

.phSearchPanel > .phSearchCriteria {
  position: relative;
  background-color: #E6E6E6;
}

.phSearchPanel > .phSearchNew {
  display: inline-block;
  padding: 5px 5px 3px 10px;
  overflow: visible;
}

.uiSelectedCriteria,
.uiSelectedChip {
  background-color: #ffffff;
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: scroll;
}
@media (min-width: 768px) {
  .uiSelectedCriteria,
  .uiSelectedChip {
    flex: 1 1 0;
  }
}

.uiSelectedCriteria ul,
.uiSelectedChip ul {
  padding: 0;
  margin: 0;
  background: none;
}

.frmSearch > .uiSearchAction {
  display: inline-block;
}

.frmSearch .uiAppMenuSearchBar {
  color: #333333;
  font-weight: bold;
  font-size: 15px;
  padding: 2px;
  height: 31px;
  border: 1px solid #c3cfe2;
  border-radius: 3px;
  background-color: #ffffff;
}
.frmSearch .uiAppMenuSearchBar input {
  height: 29px !important;
  min-height: 29px !important;
}
.frmSearch .uiAppMenuSearchBar:hover {
  border: 1px solid #c3cfe2;
}

.frmSearchCriteria .uiField {
  color: rgb(0, 0, 255);
  font-size: large;
}
.frmSearchCriteria .uiCriteria {
  color: #404040;
}
.frmSearchCriteria .uiValue {
  font-weight: bold;
  font-size: medium;
}
.frmSearchCriteria .ui-state-active {
  background-color: aqua;
}

/*search results group content*/
.uiGroupContentSR {
  background: #fff;
  border: 1px solid #c3cfe2;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 rgba(60, 60, 60, 0.12), 0 1.5px 3px 0 rgba(60, 60, 60, 0.08);
  margin: 0px;
  padding: 0;
  z-index: 0;
}

.uiDynamicGroupSection {
  height: 35px;
  position: relative;
}
.uiDynamicGroupSection > div > div {
  height: 40px;
  overflow: hidden;
}
.uiDynamicGroupSection .uiPreviousGroup {
  color: #0080ff;
  font-weight: bold;
  overflow: hidden;
  word-break: break-all;
  max-width: 70px;
  display: inline-block;
}
.uiDynamicGroupSection .uiDynamicGroupSelector {
  width: fit-content;
  font-size: 11px;
  display: inline-block;
  overflow: hidden;
  line-height: 11px;
  height: 15px;
}
.uiDynamicGroupSection .uiGroupButton {
  display: inline-flex;
  width: 25px;
  height: 25px;
}
.uiDynamicGroupSection .uiTabActive {
  background: #0080ff !important;
}

.uipopover {
  position: absolute;
  display: block;
  margin-left: 10px;
  padding: 10px;
  border: 1px solid #2864b6;
  z-index: 1000;
  box-sizing: border-box;
  height: auto;
  top: 77px;
  left: 10px;
  white-space: normal;
  background-color: #FFF;
  background-clip: padding-box;
  box-shadow: 1px 1px 2px 0px rgba(10, 10, 10, 0.5);
  border-radius: 10px;
}

.uipopover ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uipopover ul li {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
}

.uipopover ul li > #srcBldrCriteriaValue1,
.uipopover ul li > #srcBldrCriteriaValue2 {
  padding: 4px;
  border: 1px solid #2864b6;
  border-radius: 3px;
  margin-right: 7px;
}

.uipopover ul li > #srcBldrCriteriaValue1:focus,
.uipopover ul li > #srcBldrCriteriaValue2:focus {
  background-color: #FFF;
  border: 1px solid #000;
}

.uipopover ul li > select {
  padding: 4px;
  background-color: #FCFEFD;
  border: 1px solid #2864b6;
  border-radius: 3px;
  margin-right: 7px;
}

#search input[type=text] {
  width: 250px;
}

/* Company Master ends here */
.uiSHTBContent span {
  font-size: 110%;
}

.uiSHTBContent input[type=text] {
  width: 250px;
}

.uiSearchHead {
  border-radius: 10px;
  margin-top: 10px;
}

.uiItemPopupForm {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uiItemPopupForm li {
  display: block;
  overflow: auto;
  padding: 7px 0;
}

.uiItemPopupForm li .uiColumn {
  width: 50%;
  float: left;
}

.uiItemPopupForm li #uncstlbl {
  position: relative;
  width: 35%;
  float: left;
}

.uiItemPopupForm li #UOMLbl {
  position: relative;
  width: 15%;
  float: left;
}

.uiItemPopupForm li #taxamt {
  position: relative;
  width: 30%;
  float: right;
  margin-right: 143px;
}

.uiItemPopupForm li #itemdesc {
  position: relative;
  width: 100%;
  float: left;
}

.uiItemPopupForm li #UOMLbl span {
  display: block;
  width: 28px !important;
  padding-top: 5px;
  border: none !important;
  background: none;
  float: left;
}

.uiItemPopupForm li input[type=text] {
  width: 113px;
}

.phPopupContent {
  overflow-y: scroll;
}

.uiitemDetailMain {
  position: relative;
  margin-top: 5px;
  background-color: #FFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.uieditornew #searchItem {
  margin-left: 5px;
  margin-top: 5px;
}

.uiAccessory {
  text-align: left;
  height: 25px;
  width: 100%;
  background-color: #f4f8fd;
}

.uiitemImage {
  display: block;
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 15px;
  cursor: pointer;
}

.uiMediaDropZone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-width: 2px;
  border-radius: 3px;
  border-color: #eeeeee;
  border-style: dashed;
  background-color: #fafafa;
  color: #bdbdbd;
  outline: none;
  transition: border 0.24s ease-in-out;
}

.uiMediaActiveDropZone {
  border-color: #0080ff;
}

.uiMediaAcceptedDropZone {
  border-color: #43a047;
}

.uiMediaRejectedDropZone {
  border-color: #ff1744;
}

#itemDetailPart {
  margin-top: 60px;
}

.uiPPEditLine input[type=text] {
  width: 250px;
}

.uiAppWFAction {
  position: relative;
  border: 1px solid #ccc;
  padding: 1px 5px;
}

.uiAppWFAction > .phSectionTitle {
  text-align: center;
  background: #ccc;
  font-size: 12px;
  font-weight: bold;
  padding: 3px;
}

.uiAppWFAction > .phSectionContents {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 12px;
  overflow: auto;
}

/* for Approval workflow */
.uiApvWrkFlwActivity {
  margin-top: 2px;
}

.uiApvWrkFlwActivityInfo {
  position: relative;
  border-bottom: 1px solid #EFEBE9;
  overflow: auto;
}

.uiApvWrkFlwActivityInfo .appWrkFlwRowNumber {
  width: 18px;
  height: 18px;
  text-align: center;
  display: inline-block;
  border-bottom-right-radius: 3px;
  position: relative;
  margin-right: 5px;
  margin-top: 0px;
  background-color: #4e342e;
  color: white;
  font-size: 11px;
  float: left;
}

.uiApvWrkFlwActivityInfo .appWrkFlowRowContent {
  position: relative;
  padding: 5px;
  min-width: 150px;
}

.uiApvWrkFlwActivityInfo .appWrkFlowRowContent li {
  margin-bottom: 3px;
}

.uiApvWrkFlwActivityInfo .appWrkFlowRowContent .wrkFlowName {
  font-weight: bold;
}

.uiApvWrkFlwActivityInfo .appWrkFlowRowContent .rowColName {
  float: left;
  color: #800000;
  font-weight: bold;
}

.uiApvWrkFlwActivityInfo .appWrkFlowRowContent .rowColContent {
  float: left;
}

.uiImportItemsHeaderForm {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uiImportItemsHeaderForm li {
  position: relative;
  display: block;
  overflow: auto;
  padding: 7px 0;
}

.uiImportItemsHeaderForm li span {
  display: inline-block;
  padding-top: 5px;
  margin-left: 5px;
}

.uiImportItemsHeaderForm li .uiColumn {
  position: relative;
  width: 49%;
  float: left;
}

.uiImportItemsHeaderForm li input[type=text] {
  width: 130px;
}

/* for Item Packing */
.uiRBListHeader {
  background-color: #F1F1F1;
  font-weight: bold;
}

.uiDelRefBreakup ul li {
  text-align: center;
  width: 40px;
}

.uiDelRefBreakup ul span {
  text-align: center;
  width: 40px;
}

.uiIPListHeader {
  background-color: #F1F1F1;
  font-weight: bold;
}

.uiSHContent span {
  font-size: 110%;
}

.uiSHContent input[type=text] {
  width: 250px;
}

.uiSHOContent {
  float: left;
}

.uiSHOContent span {
  font-size: 110%;
}

.uiSHOContent input[type=text] {
  width: 250px;
}

/* For Tax Template */
.uiSHTContent {
  float: left;
}

.uiSHTContent span {
  font-size: 110%;
}

.uiSHTContent input[type=text] {
  width: 250px;
}

.uiTaxTemplateList ul li {
  text-align: center;
  width: 40px;
}

.uiTaxTemplateList ul span {
  text-align: center;
  width: 40px;
}

.uiTaxListHeader {
  background-color: #F1F1F1;
  font-weight: bold;
}

.uiTaxTemplateList li .uiTaxListHeader {
  background-color: rgb(241, 241, 241);
  font-weight: bold;
}

/* Tax Template ends here */
.uiHeaderForm li span {
  display: block;
  padding-top: 5px;
  margin-left: 5px;
}

.uiHeaderForm {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uiHeaderForm li {
  position: relative;
  display: block;
  overflow: auto;
  padding: 7px 0;
}

.uiHeaderForm li .uiColumn {
  position: relative;
  width: 27%;
  float: left;
}

.uiHeaderForm li .ui2Columns {
  position: relative;
  width: 45%;
  float: left;
}

.uiHeaderForm li .uiRightColumn {
  margin-left: 30px;
}

.uiHeaderForm li input[type=text] {
  width: 150px;
}

.uieditornew input[type=text] {
  width: 175px;
}

.uisave-cancelbutton {
  float: left;
  margin-left: 320px;
  cursor: pointer;
}

.uiTime {
  color: #fff;
  float: left;
  margin: 12px 0px 0px 10px;
  font-weight: bold;
}

.uiViewActivatorGreen ul li.uiTime,
.uiViewActivatorBlue ul li.uiTime {
  background: #b5b7bc;
  color: #000;
  cursor: default;
  border-bottom: 1px solid #000;
}

.uiViewActivatorGreen .uiFlexBox {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 8px;
  align-items: flex-start;
  padding: 0;
  margin: 0;
  list-style: none;
}

.uiDashGroupTitle {
  padding: 3px 0px;
  background-color: #d0e2ff;
  color: #333333;
  font-weight: bold;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.uiDashGroupTitleNA {
  padding: 3px 0px;
  box-shadow: 0px 3px 5px #0e0e0e;
  background-color: #000;
  color: #fff;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.uiDashViewS {
  height: 120px;
}

.uiDashViewD {
  height: 300px;
}

.uiCertResponse {
  display: inline-block;
}

/* for paging */
.uiSearchPaging .uiSimplePaging .uiPageNumber {
  text-align: center;
}

.btnFirstPage,
.btnLastPage,
.uiInvPagePre,
.uiInvPageNext,
.uiInvPageCurrent {
  min-width: 30px;
  height: 21px;
  float: left;
}

.btnFirstPage {
  background: url("../../images/ux/buttonFirstpage.png") no-repeat left top;
}

.btnLastPage {
  width: 55px;
  font-size: 13px;
  text-align: right;
  color: white;
  background: url("../../images/ux/buttonLastpage.png") no-repeat left top;
}

.uiInvPagePre {
  background: url("../../images/ux/psButtonPre.png") no-repeat left top;
}

.uiInvPageNext {
  background: url("../../images/ux/psButtonNext.png") no-repeat left top;
}

.btnFirstPage:disabled,
.btnLastPage:disabled,
.uiInvPagePre:disabled,
.uiInvPageNext:disabled {
  background-position: left -21px;
  cursor: default;
}

.uiInvPageCurrent {
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  padding: 0px 5px;
}

.uiOptions {
  display: inline-block;
}

.uiOptions td {
  display: inline-block;
  margin-left: 10px;
}

.uiOptions td label {
  display: inline-block;
  margin-left: 3px;
}

.uiConfigureAction {
  height: 25px;
  text-align: center;
  padding: 25px;
}

.uiSearchQCItemList {
  width: 350px;
}

.uiSearchSubList {
  min-width: 450px;
  text-align: left;
}
.uiSearchSubList .sItemCode {
  width: 120px;
  display: inline-block;
}
.uiSearchSubList .sItemID {
  width: 230px;
  display: inline-block;
}
.uiSearchSubList .sItemWeight {
  width: 50px;
  display: inline-block;
  text-align: center;
}
.uiSearchSubList .sBomWeight {
  width: 70px;
  display: inline-block;
  text-align: center;
}

.uiSearchRouteItemList {
  min-width: 500px;
  text-align: left;
}
.uiSearchRouteItemList .sSeqNo {
  width: 50px;
  text-align: center;
  display: inline-block;
}
.uiSearchRouteItemList .sTktNo {
  width: 70px;
  text-align: center;
  display: inline-block;
}
.uiSearchRouteItemList .sItemCode {
  width: 50px;
  text-align: center;
  display: inline-block;
}
.uiSearchRouteItemList .sRoute {
  width: 100px;
  display: inline-block;
}
.uiSearchRouteItemList .sPassengerName {
  width: 110px;
  text-align: center;
  display: inline-block;
}
.uiSearchRouteItemList .sTktClass {
  width: 70px;
  text-align: center;
  display: inline-block;
}
.uiSearchRouteItemList .sCost {
  width: 70px;
  display: inline-block;
  text-align: right;
}

.uiContextMenuProcessStatus {
  display: inline-block;
}
.uiContextMenuProcessStatus .uiContextMenu,
.uiContextMenuProcessStatus .uiLabel {
  float: left;
}

.phInvGrid {
  display: grid;
  grid-template-columns: 45fr 27fr 28fr;
  grid-template-areas: "tracker tracker tracker" "item header summary" "item customfield summary" "item terms summary" "supporting supporting supporting" "comment comment comment";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.phInvGrid .phSectionTracker {
  grid-area: tracker;
}
.phInvGrid .phSectionItem {
  grid-area: item;
  background: #fff;
}
.phInvGrid .phSectionItem .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.phInvGrid .phSectionHeader {
  grid-area: header;
  background: #fff;
}
.phInvGrid .phSectionHeader .phViewArea .phViewContent {
  max-height: 200px;
  overflow: auto;
}
.phInvGrid .phSectionCustomField {
  grid-area: customfield;
  background: #fff;
}
.phInvGrid .phSectionCustomField .phViewArea .phViewContent {
  max-height: 70px;
  overflow: auto;
}
.phInvGrid .phSectionTerms {
  grid-area: terms;
  background: #fff;
}
.phInvGrid .phSectionTerms .phViewArea .phViewContent {
  max-height: 110px;
  overflow: auto;
}
.phInvGrid .phSectionSummary {
  grid-area: summary;
  background: #fff;
}
.phInvGrid .phSectionSupportingInfo {
  grid-area: supporting;
  display: flex;
  column-gap: 15px;
}
.phInvGrid .phSectionSupportingInfo > div {
  flex-grow: 1;
  background: #fff;
  border-radius: 10px;
}
.phInvGrid .phSectionSupportingInfo .phSectionPayPlan {
  max-width: 27%;
  width: fit-content;
}
.phInvGrid .phSectionSupportingInfo .phSectionActions {
  max-width: 50%;
}
.phInvGrid .phSectionSupportingInfo .phViewArea .phViewContent {
  height: 150px;
  overflow: auto;
}
.phInvGrid .phSectionComment {
  grid-area: comment;
  background: #fff;
}

.uiSarasClientBhaktiEnt .phInvGrid {
  display: grid;
  grid-template-columns: 45fr 27fr 28fr;
  grid-template-areas: "tracker tracker tracker" "item header summary" "item header summary" "item terms summary" "customfield customfield customfield" "supporting supporting supporting" "comment comment comment";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionTracker {
  grid-area: tracker;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionItem {
  grid-area: item;
  background: #fff;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionItem .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionHeader {
  grid-area: header;
  background: #fff;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionHeader .phViewArea .phViewContent {
  max-height: 200px;
  overflow: auto;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionCustomField {
  grid-area: customfield;
  background: #fff;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionTerms {
  grid-area: terms;
  background: #fff;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionTerms .phViewArea .phViewContent {
  max-height: 110px;
  overflow: auto;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionSummary {
  grid-area: summary;
  background: #fff;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionSupportingInfo {
  grid-area: supporting;
  display: flex;
  column-gap: 15px;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionSupportingInfo > div {
  flex-grow: 1;
  background: #fff;
  border-radius: 10px;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionSupportingInfo .phSectionPayPlan {
  max-width: 27%;
  width: fit-content;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionSupportingInfo .phSectionActions {
  max-width: 50%;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionSupportingInfo .phViewArea .phViewContent {
  height: 150px;
  overflow: auto;
}
.uiSarasClientBhaktiEnt .phInvGrid .phSectionComment {
  grid-area: comment;
  background: #fff;
}

.uiSarasClientDDExim .phInvGrid {
  display: grid;
  grid-template-columns: 45fr 27fr 28fr;
  grid-template-areas: "tracker tracker tracker" "item header summary" "item header summary" "item terms summary" "customfield customfield customfield" "supporting supporting supporting" "comment comment comment";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.uiSarasClientDDExim .phInvGrid .phSectionTracker {
  grid-area: tracker;
}
.uiSarasClientDDExim .phInvGrid .phSectionItem {
  grid-area: item;
  background: #fff;
}
.uiSarasClientDDExim .phInvGrid .phSectionItem .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.uiSarasClientDDExim .phInvGrid .phSectionHeader {
  grid-area: header;
  background: #fff;
}
.uiSarasClientDDExim .phInvGrid .phSectionHeader .phViewArea .phViewContent {
  max-height: 350px;
  overflow: auto;
}
.uiSarasClientDDExim .phInvGrid .phSectionCustomField {
  grid-area: customfield;
  background: #fff;
}
.uiSarasClientDDExim .phInvGrid .phSectionCustomField .phViewArea .phViewContent {
  max-height: 155px;
  overflow: auto;
}
.uiSarasClientDDExim .phInvGrid .phSectionTerms {
  grid-area: terms;
  background: #fff;
}
.uiSarasClientDDExim .phInvGrid .phSectionTerms .phViewArea .phViewContent {
  max-height: 110px;
  overflow: auto;
}
.uiSarasClientDDExim .phInvGrid .phSectionSummary {
  grid-area: summary;
  background: #fff;
}
.uiSarasClientDDExim .phInvGrid .phSectionSupportingInfo {
  grid-area: supporting;
  display: flex;
  column-gap: 15px;
}
.uiSarasClientDDExim .phInvGrid .phSectionSupportingInfo > div {
  flex-grow: 1;
  background: #fff;
  border-radius: 10px;
}
.uiSarasClientDDExim .phInvGrid .phSectionSupportingInfo .phSectionPayPlan {
  max-width: 27%;
  width: fit-content;
}
.uiSarasClientDDExim .phInvGrid .phSectionSupportingInfo .phSectionActions {
  max-width: 50%;
}
.uiSarasClientDDExim .phInvGrid .phSectionSupportingInfo .phViewArea .phViewContent {
  height: 150px;
  overflow: auto;
}
.uiSarasClientDDExim .phInvGrid .phSectionComment {
  grid-area: comment;
  background: #fff;
}

.uiSarasPackageRestaurant .grid-container-303-parent .phViewAreaItem {
  display: grid;
  min-height: 80px;
  grid-template-rows: 20px 30px 20px;
  grid-template-columns: 12fr 20fr 23fr 15fr 30fr;
  grid-template-areas: "ref ref name name qty" "info info info info info" "cost cost cost cost action";
  grid-column-gap: 3px;
  grid-row-gap: 1px;
  border-bottom: 1px solid #EFEBE9;
}
.uiSarasPackageRestaurant .grid-container-303-parent .phViewAreaItem .phViewName {
  grid-area: name;
  overflow: hidden;
}
.uiSarasPackageRestaurant .grid-container-303-parent .phViewAreaItem .phViewRef {
  grid-area: ref;
}
.uiSarasPackageRestaurant .grid-container-303-parent .phViewAreaItem .phViewInfo {
  grid-area: info;
  margin-top: 10px;
}
.uiSarasPackageRestaurant .grid-container-303-parent .phViewAreaItem .phViewQty {
  grid-area: qty;
  font-size: 20px;
  align-self: center;
  justify-self: center;
}
.uiSarasPackageRestaurant .grid-container-303-parent .phViewAreaItem .phViewCost {
  grid-area: cost;
}
.uiSarasPackageRestaurant .grid-container-303-parent .phViewAreaItem .phViewAction {
  grid-area: action;
  align-self: center;
  justify-self: center;
}
.uiSarasPackageRestaurant .phInvGrid {
  grid-template-areas: "tracker tracker tracker" "supporting supporting supporting" "item header summary" "item customfield summary" "item customfield summary" "comment comment comment";
}
.uiSarasPackageRestaurant .phInvGrid .phSectionTerms {
  display: none;
}
.uiSarasPackageRestaurant .phInvGrid .phSectionCustomField {
  grid-area: customfield;
  background: #fff;
}
.uiSarasPackageRestaurant .phInvGrid .phSectionCustomField .phViewArea .phViewContent {
  max-height: 300px;
  overflow: auto;
}

.uiBoxItemLineNo {
  left: -4px;
  width: 30px;
  height: 20px;
  text-align: center;
  color: white;
  display: inline-block;
  position: relative;
  border-bottom-right-radius: 50%;
  background-color: #4e342e;
}

.uiBoxItem {
  margin: 1px 2px 10px 1px;
  border-radius: 10px;
}
.uiBoxItem .phKeyValueView {
  display: inline-block;
  margin-left: 5px;
}
.uiBoxItem .phKeyValueView .uiKey {
  width: 30px;
  margin: 0px 5px 0px 5px;
  font-weight: bold;
}
.uiBoxItem .phKeyValueView .uiValue {
  min-width: 30px;
}
.uiBoxItem .uiChildSection {
  display: none;
}
.uiBoxItem .uiChildSection > a {
  font-weight: bold;
  color: #0000FF;
  cursor: pointer;
  margin-right: 10px;
}
.uiBoxItem:hover .uiChildSection {
  display: block;
}
.uiBoxItem:hover {
  box-shadow: 5px 5px 5px #d1cfcf;
}

.phViewAreaItem {
  display: grid;
  grid-template-rows: 20px 20px auto 20px auto;
  grid-template-columns: 12fr 13fr 30fr 15fr 30fr;
  grid-template-areas: "header header header header header" "image name name name qty" "image info info info qty" "ref ref ref ref ref" "cost cost cost cost action" "cost cost cost cost action";
  grid-column-gap: 3px;
  grid-row-gap: 1px;
  border-bottom: 1px solid #EFEBE9;
}
.phViewAreaItem .phViewHeader {
  grid-area: header;
}
.phViewAreaItem .phViewImage {
  grid-area: image;
  max-height: 50px;
  width: 50px;
  align-self: center;
  justify-self: center;
}
.phViewAreaItem .phViewCode {
  grid-area: code;
}
.phViewAreaItem .phViewName {
  grid-area: name;
  overflow: hidden;
}
.phViewAreaItem .phViewRef {
  grid-area: ref;
}
.phViewAreaItem .phViewInfo {
  grid-area: info;
}
.phViewAreaItem .phViewAttr {
  grid-area: attr;
}
.phViewAreaItem .phViewQty {
  grid-area: qty;
  font-size: 20px;
  align-self: center;
  justify-self: center;
}
.phViewAreaItem .phViewCost {
  grid-area: cost;
}
.phViewAreaItem .phViewAction {
  grid-area: action;
  align-self: baseline;
  justify-self: center;
}
.phViewAreaItem .phViewChild {
  grid-area: child;
}

.phChildGroupViewAreaItem {
  display: grid;
  min-height: 120px;
  grid-template-rows: 20px 20px auto 20px 20px;
  grid-template-columns: 12fr 13fr 30fr 15fr 30fr;
  grid-template-areas: "header header header header header" "image name name name qty" "image info info info qty" "ref ref ref ref ref" "cost cost cost cost action" "childAlloc childAlloc childAlloc childAlloc childTotal";
  grid-column-gap: 3px;
  grid-row-gap: 1px;
  border-bottom: 1px solid #EFEBE9;
}
.phChildGroupViewAreaItem .phViewHeader {
  grid-area: header;
}
.phChildGroupViewAreaItem .phViewImage {
  grid-area: image;
  max-height: 50px;
  width: 50px;
  align-self: center;
  justify-self: center;
}
.phChildGroupViewAreaItem .phViewCode {
  grid-area: code;
}
.phChildGroupViewAreaItem .phViewName {
  grid-area: name;
  overflow: hidden;
}
.phChildGroupViewAreaItem .phViewRef {
  grid-area: ref;
}
.phChildGroupViewAreaItem .phViewInfo {
  grid-area: info;
}
.phChildGroupViewAreaItem .phViewAttr {
  grid-area: attr;
}
.phChildGroupViewAreaItem .phViewQty {
  grid-area: qty;
  font-size: 20px;
  align-self: center;
  justify-self: center;
}
.phChildGroupViewAreaItem .phViewCost {
  grid-area: cost;
}
.phChildGroupViewAreaItem .phViewAction {
  grid-area: action;
  align-self: center;
  justify-self: center;
}
.phChildGroupViewAreaItem .phViewAlloc {
  grid-area: childAlloc;
}
.phChildGroupViewAreaItem .phViewChildTotal {
  grid-area: childTotal;
  text-align: center;
}

.phProfileGrid .phSectionOutstanding {
  background: #fff;
}
.phProfileGrid .phSectionHeader {
  background: #fff;
}
.phProfileGrid .phSectionHeader .phViewArea .phViewContent {
  overflow: auto;
}
.phProfileGrid .phSectionProductList {
  background: #fff;
}
.phProfileGrid .phSectionProductList .phViewArea .phViewContent {
  overflow: auto;
}
.phProfileGrid .phSectionShorthand {
  background: #fff;
}
.phProfileGrid .phSectionShorthand .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.phProfileGrid .phSectionAnniv {
  background: #fff;
}
.phProfileGrid .phSectionAnniv .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.phProfileGrid .phSectionContact {
  background: #fff;
}
.phProfileGrid .phSectionContact .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.phProfileGrid .phSectionAddress {
  background: #fff;
}
.phProfileGrid .phSectionAddress .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.phProfileGrid .phSectionProductInfo {
  background: #fff;
}
.phProfileGrid .phSectionProductInfo .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.phProfileGrid .phSectionTerms {
  background: #fff;
}
.phProfileGrid .phSectionTerms .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.phProfileGrid .phSectionTax {
  background: #fff;
}
.phProfileGrid .phSectionTax .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.phProfileGrid .phSectionBank {
  background: #fff;
}
.phProfileGrid .phSectionBank .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.phProfileGrid .phSectionImage {
  background: #fff;
}
.phProfileGrid .phSectionImage .phViewArea .phViewContentContainer {
  min-height: 200px;
  max-height: 500px;
  overflow: auto;
}
.phProfileGrid .phSectionAttach {
  background: #fff;
}
.phProfileGrid .phSectionAttach .phViewArea .phViewContentContainer {
  min-height: 200px;
  max-height: 500px;
  overflow: auto;
}
.phProfileGrid .phSectionReference1 {
  min-height: 500px;
  overflow: auto;
}
.phProfileGrid .phSectionId {
  min-height: 400px;
  overflow: auto;
  background: #fff;
}
.phProfileGrid .phSectionMem {
  min-height: 400px;
  overflow: auto;
  background: #fff;
}

.phItemGrid .phSectionHeader {
  background: #ffffff;
}
.phItemGrid .phSectionHeader .phViewArea .phViewContent {
  max-height: 600px;
  overflow: auto;
}
.phItemGrid .phSectionGrouping {
  background: #ffffff;
}
.phItemGrid .phSectionGrouping .phViewArea .phViewContent {
  max-height: 250px;
  overflow: auto;
}
.phItemGrid .phSectionTag {
  background: #ffffff;
}
.phItemGrid .phSectionTag .phViewArea .phViewContent {
  max-height: 200px;
  overflow: auto;
}
.phItemGrid .phSectionAttr {
  background: #ffffff;
}
.phItemGrid .phSectionAttr .phViewArea .phViewContent {
  max-height: 200px;
  overflow: auto;
}
.phItemGrid .phSectionImage {
  background: #ffffff;
}
.phItemGrid .phSectionImage .phViewArea .phViewContent {
  max-height: 600px;
  overflow: auto;
}
.phItemGrid .phSectionTech {
  background: #ffffff;
}
.phItemGrid .phSectionTech .phViewArea .phViewContent {
  max-height: 600px;
  overflow: auto;
}
.phItemGrid .phSectionPrice {
  background: #ffffff;
}
.phItemGrid .phSectionPrice .phViewArea .phViewContent {
  max-height: 600px;
  overflow: auto;
}

.phVoucherGrid .phSectionHeader {
  background: #fff;
}
.phVoucherGrid .phSectionHeader .phViewArea .phViewContent {
  max-height: 500px;
  overflow: auto;
}
.phVoucherGrid .phSectionDetail {
  background: #fff;
}
.phVoucherGrid .phSectionDetail .phViewArea .phViewContent {
  max-height: 500px;
  overflow: auto;
}
.phVoucherGrid .phSectionTrans {
  background: #fff;
}
.phVoucherGrid .phSectionTrans .phViewArea .phViewContent {
  overflow: auto;
}
.phVoucherGrid .phSectionAttach {
  background: #fff;
}
.phVoucherGrid .phSectionAttach .phViewArea .phViewContent {
  min-height: 200px;
  max-height: 500px;
  overflow: auto;
}
.phVoucherGrid .phSectionComment {
  background: #fff;
}
.phVoucherGrid .phSectionComment .phViewArea .phViewContent {
  overflow: auto;
}

.phTaskGrid {
  display: grid;
  grid-template-columns: 30fr 30fr 40fr;
  grid-template-areas: "header detail group" "header detail group" "header detail attach" "header detail attach" "attr attr attr" "invlink invlink invlink" "log log log";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.phTaskGrid .phSectionHeader {
  grid-area: header;
  background: #fff;
}
.phTaskGrid .phSectionHeader .phViewArea .phViewContent {
  max-height: 500px;
  overflow: auto;
}
.phTaskGrid .phSectionDetail {
  grid-area: detail;
  background: #fff;
}
.phTaskGrid .phSectionDetail .phViewArea .phViewContent {
  max-height: 500px;
  overflow: auto;
}
.phTaskGrid .phSectionGrouping {
  grid-area: group;
  background: #fff;
}
.phTaskGrid .phSectionAttach {
  grid-area: attach;
  background: #fff;
}
.phTaskGrid .phSectionAttach .phViewArea .phViewContent {
  max-height: 500px;
  height: 120px;
  overflow: auto;
}
.phTaskGrid .phSectionAttr {
  grid-area: attr;
  background: #fff;
}
.phTaskGrid .phSectionComment {
  grid-area: log;
  background: #fff;
}
.phTaskGrid .phSectionInvLink {
  grid-area: invlink;
  background: #fff;
}

.grid-container-7022-parent .phTaskGrid {
  display: grid;
  grid-template-columns: 30fr 20fr 20fr 30fr;
  grid-template-areas: "header detail group group" "header detail group group" "header detail attach image" "header detail attach image" "attr attr attr attr" "invlink invlink invlink invlink" "log log log log";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.grid-container-7022-parent .phTaskGrid .phSectionHeader {
  grid-area: header;
  background: #fff;
}
.grid-container-7022-parent .phTaskGrid .phSectionHeader .phViewArea .phViewContent {
  max-height: 500px;
  overflow: auto;
}
.grid-container-7022-parent .phTaskGrid .phSectionDetail {
  grid-area: detail;
  background: #fff;
}
.grid-container-7022-parent .phTaskGrid .phSectionDetail .phViewArea .phViewContent {
  max-height: 500px;
  overflow: auto;
}
.grid-container-7022-parent .phTaskGrid .phSectionGrouping {
  grid-area: group;
  background: #fff;
}
.grid-container-7022-parent .phTaskGrid .phSectionAttach {
  grid-area: attach;
  background: #fff;
}
.grid-container-7022-parent .phTaskGrid .phSectionAttach .phViewArea .phViewContent {
  max-height: 500px;
  height: 120px;
  overflow: auto;
}
.grid-container-7022-parent .phTaskGrid .phSectionImage {
  grid-area: image;
  background: #fff;
}
.grid-container-7022-parent .phTaskGrid .phSectionImage .phViewArea .phViewContent {
  max-height: 500px;
  height: 120px;
  overflow: auto;
}
.grid-container-7022-parent .phTaskGrid .phSectionAttr {
  grid-area: attr;
  background: #fff;
}
.grid-container-7022-parent .phTaskGrid .phSectionComment {
  grid-area: log;
  background: #fff;
}
.grid-container-7022-parent .phTaskGrid .phSectionInvLink {
  grid-area: invlink;
  background: #fff;
}

.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid {
  display: grid;
  grid-template-columns: 30fr 20fr 20fr 30fr;
  grid-template-areas: "header detail group group" "header detail group group" "header detail attach attach" "header detail attach attach" "attr attr attr attr" "invlink invlink invlink invlink" "log log log log";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid .phSectionHeader {
  grid-area: header;
  background: #fff;
}
.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid .phSectionHeader .phViewArea .phViewContent {
  max-height: 500px;
  overflow: auto;
}
.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid .phSectionDetail {
  grid-area: detail;
  background: #fff;
}
.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid .phSectionDetail .phViewArea .phViewContent {
  max-height: 500px;
  overflow: auto;
}
.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid .phSectionGrouping {
  grid-area: group;
  background: #fff;
}
.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid .phSectionAttach {
  grid-area: attach;
  background: #fff;
}
.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid .phSectionAttach .phViewArea .phViewContent {
  max-height: 500px;
  height: 120px;
  overflow: auto;
}
.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid .phSectionAttr {
  grid-area: attr;
  background: #fff;
}
.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid .phSectionComment {
  grid-area: log;
  background: #fff;
}
.uiSarasClientHariOm .grid-container-70101-parent .phTaskGrid .phSectionInvLink {
  grid-area: invlink;
  background: #fff;
}

.uiSarasClientJV .grid-container-70101-parent .phTaskGrid {
  display: grid;
  grid-template-columns: 30fr 20fr 20fr 30fr;
  grid-template-areas: "header detail group group" "header detail group group" "header detail attach image" "header detail attach image" "attr attr attr attr" "invlink invlink invlink invlink" "log log log log" "budget budget budget budget";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionHeader {
  grid-area: header;
  background: #fff;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionHeader .phViewArea .phViewContent {
  max-height: 500px;
  overflow: auto;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionDetail {
  grid-area: detail;
  background: #fff;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionDetail .phViewArea .phViewContent {
  max-height: 500px;
  overflow: auto;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionGrouping {
  grid-area: group;
  background: #fff;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionAttach {
  grid-area: attach;
  background: #fff;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionAttach .phViewArea .phViewContent {
  max-height: 500px;
  height: 120px;
  overflow: auto;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionImage {
  grid-area: image;
  background: #fff;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionImage .phViewArea .phViewContent {
  max-height: 500px;
  height: 120px;
  overflow: auto;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionAttr {
  grid-area: attr;
  background: #fff;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionComment {
  grid-area: log;
  background: #fff;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionInvLink {
  grid-area: invlink;
  background: #fff;
}
.uiSarasClientJV .grid-container-70101-parent .phTaskGrid .phSectionBudget {
  grid-area: budget;
  background: #fff;
}

.phBudgetGrid .phSectionHeader {
  background: #fff;
}
.phBudgetGrid .phSectionHeader .phViewArea .phViewContent {
  min-height: 300px;
  max-height: 500px;
  overflow: auto;
}
.phBudgetGrid .phSectionAction {
  background: #fff;
}
.phBudgetGrid .phSectionAction .phViewArea .phViewContent {
  min-height: 300px;
  max-height: 500px;
  overflow: auto;
}

.phCompanyGrid {
  display: grid;
  grid-template-columns: 40fr 60fr;
  grid-template-areas: "search search" "detail branch" "detail branch";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.phCompanyGrid .phSectionSearch {
  grid-area: search;
  background: #fff;
}
.phCompanyGrid .phSectionEditor {
  grid-area: detail;
  background: #fff;
}
.phCompanyGrid .phSectionBranch {
  grid-area: branch;
  background: #fff;
}

.phAMCGrid {
  display: grid;
  grid-template-columns: 100fr;
  grid-template-areas: "header" "attr" "series" "attach";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.phAMCGrid .phSectionHeader {
  grid-area: header;
  background: #fff;
}
.phAMCGrid .phSectionAttr {
  grid-area: attr;
  background: #fff;
}
.phAMCGrid .phSectionSeries {
  grid-area: series;
  background: #fff;
}
.phAMCGrid .phSectionSeries .phViewArea .phViewContent {
  min-height: 55px;
  padding: 20px;
  overflow: auto;
}
.phAMCGrid .phSectionAttch {
  grid-area: attach;
  background: #fff;
}
.phAMCGrid .phSectionAttch .phViewArea .phViewContent {
  min-height: 100px;
  overflow: auto;
}

.grid-container-24-parent .uiBoxItem {
  margin: 5px 2px 10px 1px;
}
.grid-container-24-parent .phViewAreaItem {
  border-bottom: 1px solid #EFEBE9;
  display: grid;
  min-height: 50px;
  grid-template-rows: 20px auto;
  grid-template-columns: 25fr 45fr 15fr 15fr;
  grid-template-areas: "name name cost action" "info info info info";
  grid-column-gap: 3px;
  grid-row-gap: 1px;
}
.grid-container-24-parent .phViewAreaItem .phViewName {
  grid-area: name;
  overflow: hidden;
}
.grid-container-24-parent .phViewAreaItem .phViewInfo {
  grid-area: info;
}
.grid-container-24-parent .phViewAreaItem .phViewCost {
  grid-area: cost;
  font-size: 20px;
  align-self: center;
  justify-self: center;
}
.grid-container-24-parent .phViewAreaItem .phViewAction {
  grid-area: action;
  align-self: center;
  justify-self: center;
}
.grid-container-24-parent .phViewAreaItem .phViewChild {
  grid-area: child;
  display: none;
}

.grid-container-7020-parent .phTaskGrid {
  grid-template-columns: 30fr 30fr 40fr;
  grid-template-areas: "header detail attr" "group group group" "attach attach attach" "invlink invlink invlink" "log log log";
}

.uiBoxChoice ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
}

.uiBoxChoice ul li {
  display: inline-block;
  padding: 6px 12px;
  margin-right: 2px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background: #13a555;
  border-radius: 10px;
  cursor: pointer;
}

.uiBoxChoice ul li.selected {
  background: #000;
  color: #fff;
}

.uiPopupItem {
  background-color: #fff;
  height: 300px;
  width: 450px;
  overflow: auto;
  padding: 5px 5px;
  box-shadow: 3px 3px 5px #0e0e0e;
  border: 1px solid #0e0e0e;
}

.uiFormMini,
.uiPopupItem {
  background-color: #fff;
}

.notifyjs-rep-base {
  width: 250px;
  min-height: 50px;
  margin-bottom: 10px;
  background: #f2bcf8;
  padding: 1px;
  border-radius: 10px;
  box-shadow: 1px 1px 2px #0e0e0e;
}
.notifyjs-rep-base .cross {
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  cursor: pointer;
  top: 2px;
  right: 5px;
}
.notifyjs-rep-base .cross:after {
  content: "x";
  text-align: center;
  display: block;
  font-size: 15px;
  font-weight: bold;
  padding-top: 0px;
  color: #ba00e5;
}
.notifyjs-rep-base .title {
  color: #000;
  font-weight: bold;
  padding: 3px;
}
.notifyjs-rep-base .msg {
  padding: 3px;
  text-align: left;
  font-size: 12px;
}
.notifyjs-rep-base .msg .link {
  font-weight: bold;
  color: #000;
  font-size: 11px;
  text-decoration: underline;
}

.phSearchPanel .MuiIconButton-root {
  padding-top: 0px !important;
  padding-left: 0px !important;
  padding-bottom: 0px !important;
}
.phSearchPanel .MuiFormControl-marginNormal {
  margin-top: 0px;
}
.phSearchPanel .MuiInputAdornment-positionEnd {
  margin-left: 0px;
}
.phSearchPanel .MuiSvgIcon-root {
  font-size: 25px;
}
.phSearchPanel .MuiIconButton-root {
  color: #4e342e;
}

.MuiPaper-elevation3 hr {
  margin: 10px 10px 5px;
}
.MuiPaper-elevation3 .uiSaveAction {
  margin: 0px;
}

.uiCriteriaUpdater {
  padding: 5px;
}
.uiCriteriaUpdater .uiLbl {
  display: inline-block;
  width: 80px;
}
.uiCriteriaUpdater li {
  margin-top: 5px;
}
.uiCriteriaUpdater select {
  width: 150px;
}
.uiCriteriaUpdater input {
  width: 150px;
}
.uiCriteriaUpdater .uiActionButton {
  width: 150px;
  margin-left: 80px;
}
.uiCriteriaUpdater .MuiFormControl-root.MuiTextField-root.uiHide {
  float: right;
  width: 125px;
}
.uiCriteriaUpdater .MuiFormControl-root.MuiTextField-root.uiHide button {
  padding-top: 30px;
  padding-left: 0px;
  left: 0px;
}
.uiCriteriaUpdater span.MuiIconButton-label {
  text-align: left;
  display: block;
}
.uiCriteriaUpdater .MuiIconButton-root:hover {
  background-color: transparent;
}
.uiCriteriaUpdater .MuiFormHelperText-root.Mui-error {
  text-align: right;
}
.uiCriteriaUpdater .MuiInput-root {
  height: 20px;
}
.uiCriteriaUpdater .MuiIconButton-root {
  padding-left: 0px;
}
.uiCriteriaUpdater .MuiFormControl-marginNormal {
  margin: 0px;
}
.uiCriteriaUpdater .MuiInputAdornment-positionEnd {
  margin: 0px;
}

.phBookingGrid {
  display: grid;
  grid-template-columns: 40fr 15fr 15fr 30fr;
  grid-template-areas: "itin request request bHeader" "itin request request bHeader" "pax pax pax pax" "attach attach Trans Trans";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}
.phBookingGrid .phSectionPassenger {
  grid-area: pax;
  background: #fff;
}
.phBookingGrid .phSectionAttach {
  grid-area: attach;
  background: #fff;
}
.phBookingGrid .phSectionRequest {
  grid-area: request;
  background: #fff;
}
.phBookingGrid .phSectionItinerary {
  grid-area: itin;
  background: #fff;
}
.phBookingGrid .phSectionHeader {
  grid-area: bHeader;
  background: #fff;
}
.phBookingGrid .phSectionTrans {
  grid-area: Trans;
  background: #fff;
}

.phBookingItinGrid {
  display: grid;
  grid-template-rows: 20px 75px 20px 20px 20px 40px 20px;
  grid-template-columns: 32fr 10fr 10fr 12fr 16fr 15fr 5fr;
  grid-template-areas: "airlineName airlineName vehicle vehicle class class childViews" "orgDest orgDest orgDest orgDest pnr pnr actionBtn" "pax pax pax remark remark remark remark" "ref1 ref1 ref2 ref2 ref2 bkActionBtn bkActionBtn" "ref3 ref3 ref4 ref4 ref4 bkActionBtn bkActionBtn" "cost cost cost cost cost cost cost";
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  border-bottom: 1px solid #258625;
  padding: 2px 2px 2px 5px;
}
.phBookingItinGrid .uiLbl {
  display: inline-block;
  width: 40px;
}
.phBookingItinGrid .phAirlineName {
  grid-area: airlineName;
  background: #fff;
}
.phBookingItinGrid .phClass {
  grid-area: class;
  background: #fff;
}
.phBookingItinGrid .phVehicle {
  grid-area: vehicle;
  background: #fff;
}
.phBookingItinGrid .phConfirmDate {
  grid-area: confirmDate;
  background: #fff;
}
.phBookingItinGrid .phPnr {
  grid-area: pnr;
  background: #fff;
}
.phBookingItinGrid .phOrgDest {
  grid-area: orgDest;
  background: #fff;
}
.phBookingItinGrid .phCost {
  grid-area: cost;
  background: #fff;
}
.phBookingItinGrid .phIssueCancel {
  grid-area: bkActionBtn;
  background: #fff;
}
.phBookingItinGrid .phIssueCancel .uiConfirm, .phBookingItinGrid .phIssueCancel .uiCancel {
  height: 20px;
  line-height: 8px;
  margin-top: 2px;
}
.phBookingItinGrid .phActionBtn {
  grid-area: actionBtn;
  background: #fff;
}
.phBookingItinGrid .phPax {
  grid-area: pax;
  background: #fff;
}
.phBookingItinGrid .phPax div {
  margin-right: 3px;
}
.phBookingItinGrid .phRemark {
  grid-area: remark;
  background: #fff;
}
.phBookingItinGrid .phChildViews {
  grid-area: childViews;
  background: #fff;
}
.phBookingItinGrid .phRef1 {
  grid-area: ref1;
  background: #fff;
}
.phBookingItinGrid .phRef2 {
  grid-area: ref2;
  background: #fff;
}
.phBookingItinGrid .phRef3 {
  grid-area: ref3;
  background: #fff;
}
.phBookingItinGrid .phRef4 {
  grid-area: ref4;
  background: #fff;
}

.phFlightDetailGrid {
  display: grid;
  grid-template-rows: 25px 260px 115px 30px;
  grid-template-columns: 23% 21% 26% 30%;
  grid-template-areas: "back back back back" "flightDetail flightDetail costDetail costDetail" "baggage priceMsg costDetail costDetail" "pax pax pax pax";
  grid-row-gap: 1px;
}
.phFlightDetailGrid .phBackViews {
  grid-area: back;
  background: #fff;
}
.phFlightDetailGrid .phFlightDetailViews {
  grid-area: flightDetail;
  background: #fff;
}
.phFlightDetailGrid .phCostDetailViews {
  grid-area: costDetail;
  background: #fff;
}
.phFlightDetailGrid .phBaggageViews {
  grid-area: baggage;
  background: #fff;
}
.phFlightDetailGrid .phPriceMsgViews {
  grid-area: priceMsg;
  background: #fff;
}
.phFlightDetailGrid .phPaxViews {
  grid-area: pax;
  border-top: 1px solid rgb(49, 49, 49);
  background: #fff;
}

.phBookingDashboardGrid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-areas: "summary1 summary2 summary3 summary4 " "booking booking booking booking";
  grid-row-gap: 1px;
  padding: 10px;
  background: white;
}
.phBookingDashboardGrid .phSectionSummary1 {
  grid-area: summary1;
  background: #fff;
}
.phBookingDashboardGrid .phSectionSummary2 {
  grid-area: summary2;
  background: #fff;
}
.phBookingDashboardGrid .phSectionSummary3 {
  grid-area: summary3;
  background: #fff;
}
.phBookingDashboardGrid .phSectionSummary3 .uiTotal {
  float: left;
  margin: 0px 5px;
}
.phBookingDashboardGrid .phSectionSummary3 .uiPrice {
  padding-right: 6px;
}
.phBookingDashboardGrid .phSectionSummary4 {
  grid-area: summary4;
  background: #fff;
}
.phBookingDashboardGrid .phSectionSummary4 .uiTotal {
  float: left;
  margin: 0px 5px;
}
.phBookingDashboardGrid .phSectionSummary4 .uiPrice {
  padding-right: 6px;
}
.phBookingDashboardGrid .phSectionBooking {
  grid-area: booking;
  background: #fff;
}
.phBookingDashboardGrid .phAction {
  padding-bottom: 5px;
  border-bottom: 1.5px solid #b8860b;
}
.phBookingDashboardGrid .primaryTab {
  background: linear-gradient(to bottom, #b8860b 0%, #d5ae4f 100%);
  border-radius: 3px;
  color: white;
  width: 200px;
  text-align: center;
  display: inline-block;
  margin-right: 10px;
}
.phBookingDashboardGrid .uiTabsNav > li {
  border: 1.5px solid #007ff6;
  background-color: #fff;
  font-weight: bold;
  color: #007ff6;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.phQCRequestGrid {
  background: white;
}
.phQCRequestGrid .phSectionSamplingInfo {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-areas: "list group";
  grid-column-gap: 3px;
  background: white;
  overflow: hidden;
}
.phQCRequestGrid .phSectionSamplingInfo .phSectionSamplingList {
  grid-area: list;
  background: white;
  overflow-y: scroll;
}
.phQCRequestGrid .phSectionSamplingInfo .phSectionSamplingGroup {
  grid-area: group;
  background: white;
  overflow-y: scroll;
}
.phQCRequestGrid .phGroupSampling {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: "sd sp";
  grid-column-gap: 3px;
  background: white;
  overflow: hidden;
}
.phQCRequestGrid .phGroupSampling .phSectionSamplingDetail {
  grid-area: sd;
  background: white;
}
.phQCRequestGrid .phGroupSampling .phSectionSamplingParams {
  grid-area: sp;
  background: white;
  overflow-y: scroll;
}
.phQCRequestGrid .phGroupSampling .phSectionSamplingParams .uiSearchHeading {
  background-color: white;
  color: black;
  border-bottom: 1px solid rgb(63, 63, 63);
  margin-bottom: 2px;
}

.phPackingRequestGrid {
  background: white;
}
.phPackingRequestGrid .phSectionPackingList {
  background: white;
}
.phPackingRequestGrid .phSectionPackingListGroup {
  background: white;
}
.phPackingRequestGrid .phSectionPackingListDetail {
  background: white;
}
.phPackingRequestGrid .phSectionPackingListItem {
  background: white;
}

.phStorageGrid .phSectionHeader {
  background: #fff;
}
.phStorageGrid .phSectionHeader .uiGridColOne > ul > li,
.phStorageGrid .phSectionHeader .uiGridCol > ul > li {
  display: inline-block;
}
.phStorageGrid .phSectionPendingItems {
  background: #fff;
}
.phStorageGrid .phSectionPendingItems .phViewArea .phViewContentContainer {
  max-height: 515px;
  overflow: auto;
}
.phStorageGrid .phSectionLocations {
  background: #fff;
}
.phStorageGrid .phSectionLocations .phViewArea .phViewContent {
  overflow: hidden;
}
.phStorageGrid .phSectionLocations .phViewContent .uiRowBoxContainer {
  margin: 5px;
  border: 1px solid black;
  min-height: 150px;
}
.phStorageGrid .phSectionLocations .phViewContent .uiSelectedRowBoxContainer {
  margin: 5px;
  border: 1px solid #d0e2ff;
  background-color: #f4f8fd;
  min-height: 150px;
}
.phStorageGrid .phSectionLocations .phViewContent .uiRowBoxContainer .uiHeaderBlock,
.phStorageGrid .phSectionLocations .phViewContent .uiSelectedRowBoxContainer .uiHeaderBlock {
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px dashed #00600f;
  font-size: 11px;
}

.uiProductionTable .uiColumnQty {
  width: 70px;
}

.uiProductionTable .uiColumnQtySpacious {
  width: 70px;
}

.uiOSProdDetail {
  width: 150px;
}
.uiOSProdDetail .uiDetailRow {
  float: left;
  margin: 2px 10px 2px 0px;
  box-shadow: 2px 3px 3px 0px rgba(0, 0, 0, 0.25);
}
.uiOSProdDetail .uiDetailRow .uiProdInfoLeft {
  min-width: 30px;
  display: inline-block;
  text-align: center;
  padding: 3px 5px;
}
.uiOSProdDetail .uiDetailRow .uiProdInfoRight {
  min-width: 30px;
  display: inline-block;
  text-align: center;
  padding: 3px 5px;
}

.uiProdTaskDashRow {
  width: 280px;
}
.uiProdTaskDashRow .uiBar {
  width: 230px;
}
.uiProdTaskDashRow .uiBarInfo {
  width: 230px;
}
.uiProdTaskDashRow .uiDashboardGroup {
  width: 260px;
}
.uiProdTaskDashRow .uiDashboardGroup .uiRecordContainer {
  width: 230px;
}
.uiProdTaskDashRow .uiDashboardGroup .uiFooterBlock {
  width: 260px;
}
.uiProdTaskDashRow .uiBoxSection170 {
  max-width: 260px;
  width: 260px;
}
.uiProdTaskDashRow .uiDashViewD .uiContentBlock {
  width: 260px;
}

.uiCostCard .uiGroupRowTypeM .uiGroupType,
.uiCostCard .uiGroupRowTypeL .uiGroupType,
.uiCostCard .uiGroupRowTypeS .uiGroupType,
.uiCostCard .uiGroupRowTypeO .uiGroupType {
  color: #0080ff;
}
.uiCostCard .uiGroupRowTypeA .uiGroupType,
.uiCostCard .uiGroupRowTypeR .uiGroupType {
  color: #ff1744;
}
.uiCostCard .uiGroupTotal {
  border-top: 3px double #000;
  border-bottom: 1px solid #000;
  margin-top: 10px;
}

.uiProdPendingActions .uiGroupRowTypeMAT,
.uiProdPendingActions .uiGroupRowTypeTASK,
.uiProdPendingActions .uiGroupRowTypeINV,
.uiProdPendingActions .uiGroupRowTypeBAC,
.uiProdPendingActions .uiGroupRowTypePROG {
  background-color: #e9ecf3;
  font-size: 15px;
  font-weight: bold;
  padding: 5px 0px 3px 5px;
}
.uiProdPendingActions .uiSpacious {
  padding: 5px 0px 3px 5px;
}

.uiProdGridProcessContainer .uiTitle {
  color: #0080ff;
  font-weight: bold;
}
.uiProdGridProcessContainer .uiBar {
  border: 1px solid #828891;
  background-color: #bdbfc1;
  color: #000000;
  height: "15px";
  text-align: center;
  display: "flex";
  align-items: "center";
}
.uiProdGridProcessContainer .uiBarInfo {
  border: 1px solid #fff;
  background-color: #e5e6e8;
  color: #000000;
}
.uiProdGridProcessContainer .uiRow {
  height: "15px";
  text-align: left;
  display: "flex";
  align-items: "left";
}

.uiInsightContainer .uiTitle {
  display: inline-block;
  font-weight: bold;
  color: #333333;
  font-size: 18px;
  margin: 5px 0px;
  text-transform: uppercase;
}
.uiInsightContainer .uiInsightList .uiInsightHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0px 10px;
}
.uiInsightContainer .uiInsightList .uiInsightAction .uiDateRangeTrigger {
  background: #fff;
  padding: 2px 1px;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s;
}
.uiInsightContainer .uiInsightList .uiInsightAction .uiInsightActionContainer {
  margin: 5px;
}
.uiInsightContainer .uiInsightList .uiInsightAction .uiInsightLayoutIcon {
  border-right: 1px solid #fff;
  width: 30px;
  display: inline-block;
  height: 20px;
}
.uiInsightContainer .uiInsightList .uiInsightAction .uiInsightLayoutSelector {
  content: "";
  cursor: pointer;
  height: 20px;
  width: 15px;
  margin: 0px 0px;
  display: inline-block;
}
.uiInsightContainer .uiInsightList .uiInsightAction .uiInsightLayoutMenu {
  font-weight: bold;
  color: #fff;
}

.uiInsightView {
  background-color: #ffffff;
  padding: 10px;
  z-index: 0;
  border: 1px solid #c3cfe2;
  border-radius: 10px;
  height: 100%;
}
.uiInsightView .uiInsightTitle {
  color: #333333;
  font-weight: bold;
  font-size: 15px;
}
@media (max-width: 1366px) {
  .uiInsightView .uiInsightTitle {
    font-size: 12px;
  }
}
@media (max-width: 1024px) {
  .uiInsightView .uiInsightTitle {
    font-size: 11px;
  }
}
.uiInsightView .uiDateRangeTrigger {
  background: #fff;
  padding: 2px 1px;
  font-size: 1rem;
  color: #333;
  max-width: 220px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s;
  border: none;
  box-shadow: none;
  font-size: 12px;
}
.uiInsightView .uiHover {
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s;
}
.uiInsightView .uiHover:hover,
.uiInsightView .uiHover:focus {
  background: #f5f7fa;
  box-shadow: 0 2px 8px rgba(60, 60, 60, 0.1), 0 0 0 2px #f0f2f6;
  outline: none;
}
.uiInsightView .uiInsightViewActionContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.uiInsightView .uiInsightViewAction,
.uiInsightView .uiInsightViewActionTop,
.uiInsightView .uiInsightViewActionBottom {
  height: 35px;
  background-color: #ffffff;
  border-radius: 10px;
}
.uiInsightView .uiInsightViewAction .uiButtonText,
.uiInsightView .uiInsightViewActionTop .uiButtonText,
.uiInsightView .uiInsightViewActionBottom .uiButtonText {
  color: #4e342e;
}
.uiInsightView .uiInsightViewAction .uiInsightCriteriaEditor,
.uiInsightView .uiInsightViewActionTop .uiInsightCriteriaEditor,
.uiInsightView .uiInsightViewActionBottom .uiInsightCriteriaEditor {
  font-weight: bold;
  display: flex;
  height: 35px;
  align-items: center;
}
.uiInsightView .uiInsightViewAction .uiInsightViewActionLeft,
.uiInsightView .uiInsightViewActionTop .uiInsightViewActionLeft,
.uiInsightView .uiInsightViewActionBottom .uiInsightViewActionLeft {
  display: flex;
  gap: 3px;
}
.uiInsightView .uiInsightViewAction .uiInsightViewActionRight,
.uiInsightView .uiInsightViewActionTop .uiInsightViewActionRight,
.uiInsightView .uiInsightViewActionBottom .uiInsightViewActionRight {
  display: flex;
  height: 35px;
  align-items: center;
}
.uiInsightView .uiInsightViewActionTop {
  height: 35px;
  background-color: #ffffff;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
@media (max-width: 1024px) {
  .uiInsightView .uiInsightViewActionTop {
    height: 25px;
    align-items: flex-start !important;
  }
}
.uiInsightView .uiInsightViewActionBottom {
  height: 35px;
  background-color: #ffffff;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.uiInsightView .uiInsightViewContent {
  height: -webkit-calc(100% - 70px);
  height: -moz-calc(100% - 70px);
  height: calc(100% - 70px);
  background-color: #fff;
}
.uiInsightView .uiInsightViewContent .uiInsightCriteriaEditor {
  padding: 10px 0px;
  background-color: #ffffff;
  height: 100%;
}
.uiInsightView .uiInsightViewContentNoAction {
  height: 100%;
}
.uiInsightView .uiInsightDynamicViewWrapper {
  height: 100%;
}
.uiInsightView .uiInsightStatData {
  background-color: white;
}

.uiCalendarFlatLook {
  border: 0px;
  border-radius: 0px;
  height: auto;
  width: 80px;
  background-color: transparent;
}

.uiDashFixedHeader2 .uiCalendarFlatLook {
  color: #fff;
  width: 150px;
  border-color: #fff;
}
.uiDashFixedHeader2 .uiCalendarFlatLook input {
  text-align: center;
}
.uiDashFixedHeader2 .uiCalendarFlatLook .MuiSvgIcon-root {
  fill: #000 !important;
}
.uiDashFixedHeader2 .uiCalendarFlatLook:hover .MuiSvgIcon-root {
  fill: #FF4081 !important;
}

.phProdMainContainer > div > .phViewSection {
  padding: 10px;
}

.phSectionTaskDetail .uiTabContainer {
  margin-top: 10px;
}

.uiSarasTourAnnouncement {
  font-family: "Open Sans", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.uiSarasTourAnnouncement .uiSarasTourTitle {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 12px;
}
.uiSarasTourAnnouncement .uiSarasTourQuestion,
.uiSarasTourAnnouncement .uiSarasTourChanges {
  font-size: 14px;
  margin-bottom: 12px;
  text-align: center;
}

/*search layout with dynamic group*/
.uiDocSearchLayout {
  display: grid;
  gap: 0px;
  height: 100%;
  background-color: #ffffff;
  border-radius: 10px;
}
.uiDocSearchLayout .uiDynamicGroupColumn .uiListScroll {
  height: -webkit-calc(100vh - 50px);
  height: -moz-calc(100vh - 50px);
  height: calc(100vh - 50px);
  overflow-y: auto;
  overflow-x: hidden;
}
.uiDocSearchLayout .uiDynamicGroupColumn .uiListTitle {
  font-weight: bold;
  font-size: 14px;
}
.uiDocSearchLayout .uiDynamicGroupColumn .uiListRow {
  cursor: pointer;
  background-color: #e9ecf3;
  color: #333333;
  padding: 5px 10px;
  width: calc(100% - 20px);
  margin: 0px 0px 10px 0px;
  border: 1px solid #EFEBE9;
  box-shadow: none;
}
.uiDocSearchLayout .uiDynamicGroupColumn .uiSelectedListRow {
  background-color: #333333;
  color: #fff;
  padding: 5px 10px;
  margin: 0px 0px 10px 0px;
  width: calc(100% - 20px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.uiDocSearchLayout.uiTwoColumn {
  grid-template-columns: 250px 1fr; /* Adjust 200px to your preferred sidebar width */
}

.uiDocSearchLayout.uiOneColumn {
  grid-template-columns: 1fr;
}

.uiDynamicGroupColumn {
  padding: 10px;
  border-radius: 10px;
}

.uiResultViewColumn {
  background: #fff;
  border-radius: 10px;
}

.message {
  display: none;
}

.tooltip {
  color: #000;
}

.loading,
.uiInputMsg {
  top: 100px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  padding: 5px;
  box-shadow: 10px 10px 5px #888888;
  border-radius: 4px;
  z-index: 1000;
  display: block;
}

.uiWrapAny {
  overflow-wrap: anywhere;
}

.loading {
  background-color: #000;
  color: #fff;
}

.uiInputMsg {
  background-color: #a8e7f7;
  color: #0000ff;
}

.uiInputErr {
  background-color: #fdfdfd;
  border: 3px solid #f35d63;
  position: absolute;
  margin: 0px 10px;
  text-align: left;
  font-size: 15px;
  font-weight: bold;
  max-width: 350px;
  min-width: 250px;
  padding: 8px 3px;
  box-shadow: 7px 7px 5px #888888;
  border-radius: 3px;
  z-index: 1000;
  display: block;
  color: #ff1744;
}

.uiInlineErr {
  border-bottom: 1px solid #c3cfe2;
  text-align: left;
  font-weight: bold;
  padding: 5px 0px;
  margin-bottom: 5px;
  border-radius: 3px;
  display: inline-block;
  width: 100%;
  color: #333333;
}

.uiLbl {
  display: inline-block;
  width: 135px;
  font-weight: bold;
  text-align: left !important;
}

.uiLblS {
  display: inline-block;
  width: 90px;
  font-weight: bold;
  text-align: left !important;
}

.uiLblF {
  display: block;
  width: 100%;
  font-weight: bold;
  text-align: left !important;
}

.uiLblInLine {
  display: inline-block;
  font-weight: bold;
  margin: 0px 5px;
}

.uiVal {
  display: inline-block;
  padding: 3px 0px;
  text-align: justify;
}

.uiForm .uiLbl {
  width: 135px;
}

.uiFormFree .uiLbl {
  width: unset;
}

.uiFormMini .uiLbl {
  width: 60px;
}
.uiFormMini .uiLblInLine {
  font-weight: bold;
  width: 60px;
  margin-left: 10px;
}

.uiFormMacro .uiLbl {
  width: 50px;
  font-size: 10px;
}
.uiFormMacro .uiVal {
  width: 30px;
  font-size: 10px;
  text-align: center;
}

.uiShortHand .uiLbl {
  color: rgba(0, 0, 0, 0.87);
}

.uiBold {
  font-weight: bold;
}

.uiGridColOne > ul > li,
.uiGridCol > ul > li {
  margin: 3px 0px;
  box-sizing: border-box;
  border-bottom: 1px dotted #d0e2ff;
  overflow: auto;
  min-height: 25px;
}

.uiGridColOne > ul > li:last-child,
.uiGridCol > ul > li:last-child {
  border-bottom: none;
}

.uiGridColOne > .uiCol,
.uiGridCol > .uiCol {
  display: block;
  float: left;
  width: 100% !important;
}

.uiCol > ul > li {
  margin: 3px 0px;
  box-sizing: border-box;
  border-bottom: 1px dotted #d0e2ff;
  overflow: auto;
  min-height: 25px;
}

.uiCol > ul > li:last-child {
  border-bottom: none;
}

.uiCol > ul > li .uiAction {
  float: right;
}

.detailcontents .phSection .sAppWorkflow {
  height: 450px;
}

.detailcontents .phSection .sComments {
  height: 215px;
}

.phSectionContents > .phListHeader,
.phSectionContents > .phListContents,
.phSectionContents > .phListSummary {
  display: block;
  width: 100%;
  min-width: 180px;
}

.phSectionContents > .phListHeader,
.phSectionContents > .phListSummary {
  background-color: #eee;
}

.phSectionContents > .phListHeader {
  border-bottom: 1px solid #ccc;
}

.detailcontents > .phRightColumn .sFixed {
  height: 175px;
  overflow: auto;
}

.detailcontents > .phRightColumn > table {
  width: 100%;
  border-collapse: collapse;
}

.detailcontents > .phRightColumn table th,
.detailcontents > .phRightColumn table td {
  font-size: 12px !important;
  padding: 5px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}

.detailcontents > .phRightColumn table thead th {
  background-color: #eee;
  border-top: 1px solid rgba(50, 50, 50, 0.5);
  color: #000;
  font-weight: bold;
  text-align: left;
}

.detailcontents > .phRightColumn table .listHeader th {
  background-color: #eee;
}

.detailcontents > .phRightColumn .listSupplier td:first-child {
  width: 40%;
}

.detailcontents > .phRightColumn table tfoot td {
  background-color: #eee;
  font-weight: bold;
}

.detailcontents > .phRightColumn table tr td .listLabel,
.detailcontents > .phRightColumn table tr td .listData {
  display: inline-block;
}

.detailcontents > .phRightColumn table tr td .listLabel {
  width: 30px;
}

.phItemList {
  border: 1px solid #ccc;
  margin: 10px 0px;
  border-radius: 10px;
}

.uiDialogContent {
  margin: 5px;
}

.uiViewSections {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 10px;
}

.phViewArea {
  border-radius: 10px;
}
.phViewArea .phPopupContainer {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
}
.phViewArea .phPopupContainer .phPopupAction {
  padding: 0px 0px;
}
.phViewArea .phViewHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0px 1px;
}
.phViewArea .phViewHeading .phTitle {
  display: inline-block;
  font-weight: bold;
  color: #333333;
  font-size: 18px;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.phViewArea .phViewHeading .phAction {
  float: right;
}
.phViewArea .phViewHeading .phAction .uiApproveIconButton,
.phViewArea .phViewHeading .phAction .uiRejectIconButton,
.phViewArea .phViewHeading .phAction .uiActionIconButton {
  border: 1px solid #fff;
  padding: 0px;
  margin: 0px 3px;
}
.phViewArea .phViewHeading .phAction .uiActionButton {
  border: 1px solid #fff;
  padding: 3px 5px;
  margin: 0px 1px;
}
.phViewArea .phViewContent {
  background: #fff;
}
.phViewArea .phPopupContent {
  background: #fff;
  padding: 1px;
}
.phViewArea .phViewAction {
  background: #fff;
}
.phViewArea .uiBlackContainer .phViewAction {
  background: unset;
}
.phViewArea .phViewAction .phAction {
  margin: 5px;
}

.uiFormMini,
.uiForm {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uiFormMini li,
.uiForm li {
  position: relative;
  display: block;
  overflow: auto;
  padding: 7px 0;
}

.uiFormMini li .uiColumn,
.uiForm li .uiColumn {
  position: relative;
  width: 50%;
  float: left;
}

.uiFormMini li > span,
.uiForm li > span {
  padding-top: 5px;
  margin-left: 5px;
}

.uiFormMini li input[type=text],
.uiForm li input[type=text] {
  width: 175px;
}

.uiListTable,
.uiSearchResults {
  border-radius: 10px;
  scrollbar-width: none;
}
.uiListTable .uiCol_Fixed,
.uiSearchResults .uiCol_Fixed {
  border-left: 1px solid #EFEBE9;
}
.uiListTable .row-selector,
.uiSearchResults .row-selector {
  color: #000;
  cursor: pointer;
  text-decoration: none;
  width: 55px;
  padding: 3px 2px;
  display: block;
  text-align: center;
  background-color: #ffb1ff;
}
.uiListTable .row-selector:hover,
.uiSearchResults .row-selector:hover {
  color: #000;
  text-decoration: underline;
}
.uiListTable .row-selected .row-selector,
.uiSearchResults .row-selected .row-selector {
  background-color: #b1e1ff;
}
.uiListTable .uiTableBody .uiGridRowType_3, .uiListTable .uiSearchRow,
.uiSearchResults .uiTableBody .uiGridRowType_3,
.uiSearchResults .uiSearchRow {
  background-color: #fff;
  border-bottom: 1px solid #EFEBE9;
}
.uiListTable .uiTableBody .uiGridRowType_3:last-child, .uiListTable .uiSearchRow:last-child,
.uiSearchResults .uiTableBody .uiGridRowType_3:last-child,
.uiSearchResults .uiSearchRow:last-child {
  border-bottom: none;
}
.uiListTable .uiTableBody .uiGridRowType_3:hover, .uiListTable .uiSearchRow:hover,
.uiSearchResults .uiTableBody .uiGridRowType_3:hover,
.uiSearchResults .uiSearchRow:hover {
  background-color: #f4f8fd;
}
.uiListTable .uiTableBody .uiGridRowType_3:hover .uiCol_Fixed, .uiListTable .uiSearchRow:hover .uiCol_Fixed,
.uiSearchResults .uiTableBody .uiGridRowType_3:hover .uiCol_Fixed,
.uiSearchResults .uiSearchRow:hover .uiCol_Fixed {
  border-top: 1px solid #d0e2ff;
  border-bottom: 1px solid #d0e2ff;
}
.uiListTable .uiSearchHeading, .uiListTable .uiTableHeading .uiGridRowType_2,
.uiSearchResults .uiSearchHeading,
.uiSearchResults .uiTableHeading .uiGridRowType_2 {
  padding: 1px 0px;
  background-color: #d0e2ff;
  font-weight: bold;
  color: #333333;
}
.uiListTable .uiSearchSubList li,
.uiSearchResults .uiSearchSubList li {
  padding: 3px 0px 3px 0px;
  border-bottom: 1px solid #EFEBE9;
}
.uiListTable .uiSearchSubList li:last-child,
.uiSearchResults .uiSearchSubList li:last-child {
  padding: 3px 0px 0px 0px;
  border-bottom: none;
}
.uiListTable .uiSearchRow > td, .uiListTable .uiTableBody .uiCol_Fixed, .uiListTable .uiTableHeading .uiCol_Fixed,
.uiSearchResults .uiSearchRow > td,
.uiSearchResults .uiTableBody .uiCol_Fixed,
.uiSearchResults .uiTableHeading .uiCol_Fixed {
  padding: 1px 2px;
  border-bottom: 1px solid #EFEBE9;
}
.uiListTable .uiCompact .uiSearchRow > td, .uiListTable .uiCompact .uiTableBody .uiCol_Fixed, .uiListTable .uiCompact .uiTableHeading .uiCol_Fixed,
.uiSearchResults .uiCompact .uiSearchRow > td,
.uiSearchResults .uiCompact .uiTableBody .uiCol_Fixed,
.uiSearchResults .uiCompact .uiTableHeading .uiCol_Fixed {
  padding: 1px 2px;
  border-bottom: 1px solid #EFEBE9;
}
.uiListTable .uiComfortable .uiSearchRow > td, .uiListTable .uiComfortable .uiTableBody .uiCol_Fixed, .uiListTable .uiComfortable .uiTableHeading .uiCol_Fixed,
.uiSearchResults .uiComfortable .uiSearchRow > td,
.uiSearchResults .uiComfortable .uiTableBody .uiCol_Fixed,
.uiSearchResults .uiComfortable .uiTableHeading .uiCol_Fixed {
  padding: 3px 5px;
  border-bottom: 1px solid #EFEBE9;
}
.uiListTable .uiCozy .uiSearchRow > td, .uiListTable .uiCozy .uiTableBody .uiCol_Fixed, .uiListTable .uiCozy .uiTableHeading .uiCol_Fixed,
.uiSearchResults .uiCozy .uiSearchRow > td,
.uiSearchResults .uiCozy .uiTableBody .uiCol_Fixed,
.uiSearchResults .uiCozy .uiTableHeading .uiCol_Fixed {
  padding: 7px 7px;
  border-bottom: 1px solid #EFEBE9;
}
.uiListTable .uiTableHeading .uiColSearch,
.uiSearchResults .uiTableHeading .uiColSearch {
  cursor: pointer;
}
.uiListTable .uiImage,
.uiSearchResults .uiImage {
  height: 100px;
  width: 100px;
  align-self: center;
  justify-self: center;
}
.uiListTable .uiImage img,
.uiSearchResults .uiImage img {
  height: 100px;
  width: 100px;
}

.uiLabelWithAction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  padding: 0px 1px;
  position: relative;
}
.uiLabelWithAction .uiLWALabel {
  text-align: left;
  width: 100%;
}
.uiLabelWithAction .uiLWAAction {
  flex: 0 0 auto;
  margin: 0px 2px;
  display: flex;
  align-items: center;
  color: #FF4081;
}

.uiContentCenter, .uiListTable .uiSearchHeading .uiColumn, .uiListTable .uiColumnCenter {
  text-align: center;
  vertical-align: middle;
}

.uiBoxSection150 {
  width: 150px;
  max-width: 150px;
}

.uiBorderRoundAll {
  border-radius: 5px;
}

.uiBoxImage .uiInfoBlock, .uiBoxImage .uiActionBlock {
  display: none;
}

.uiBoxImage:hover .uiInfoBlock {
  display: block;
}

/*List Styles */
.uiSpacer5 {
  margin-top: 5px;
}

.uiBoxBlue {
  background-color: #fff;
  border: 1px solid #c3cfe2;
  margin: 10px 5px;
  padding: 5px;
}

.uiHighlightText {
  font-weight: bold;
}

.uiBlock, .block, .uiBlock100, .uiBoxData .sectionButton {
  display: block;
}

table {
  width: 100%;
  border-spacing: 0px;
  font-size: 0.9em;
}

.vAlign {
  vertical-align: middle;
}

.header-row {
  height: 35px;
  background-color: #c3cfe2;
  font-weight: bold;
  color: #fff;
}

.rowImage {
  height: 200px;
}

tbody > tr {
  border-bottom: 1px solid rgb(29, 110, 29);
}

.uipopover {
  position: absolute;
  left: 10px;
  top: 32px;
  border: 1px solid black;
  line-height: 39px;
  border-radius: 10px;
  color: black;
  box-sizing: border-box;
  padding: 8px;
  background-color: white;
  z-index: 100;
}

.uiSearchFilterChoices {
  max-height: 350px;
  overflow-y: scroll;
  overflow-x: auto;
  column-count: 3;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.uiTableHeading .uiLWALabel {
  text-align: center;
}
.uiTableHeading .uiLWAAction {
  color: #FF4081;
}

.listSearchResults table td .listItemDetails li > span,
.listSearchResults table th > span {
  display: inline-block;
  width: 100px;
  line-height: 1.5;
}

.listSearchResults table td .listItemDetails li > span.catimg {
  width: 20px;
  height: 100%;
  font-size: 9px;
  text-align: center;
}

.listItemDetails table tr td {
  padding-bottom: 25px;
}

.listItemDetails table tr td:last-child {
  padding: 0;
}

.listItemDetails table td .uiActionButton {
  background-color: #ccc;
}

.listItemDetails table td .uiActionButton:hover {
  background-color: #000;
}

.uiFrmSection {
  border: 1px solid #d0e2ff;
  border-radius: 10px;
  margin-top: 1px;
}

.uiSecTitle {
  display: block;
  font-weight: bold;
  padding: 8px 5px;
  color: #333333;
}

.uiSearchHeaderFilter {
  font-size: 12px !important;
}

.uiFrmSection .uiSecContents {
  width: 100%;
  display: block;
  overflow: auto;
}

.uiFrmSection .uiColumn {
  width: 35%;
  display: block;
  float: left;
}

.uiFrmSection .uiColumn span {
  display: block;
  padding: 3px 5px;
  float: left;
}

.uiFrmSection .uiColumn .uiInput {
  width: 60px;
}

.uiTimeInput {
  width: 50px;
  text-align: center;
  padding: 2px 1px;
}

.uiAddBox {
  height: 120px;
  width: 150px;
  text-align: center;
  margin: 20px 0px;
  border: 1px solid #000;
  font-size: 30px;
  background-color: #cecece;
}

.uiAddBox a {
  margin: 25% auto;
  display: block;
}

.uiAddBox a:hover {
  text-decoration: none;
}

.uiHighlightText {
  font-weight: bold;
}

.uiSectionInline {
  float: left;
}

.uiSection250 {
  width: 250px;
}

.uiSection300 {
  width: 300px;
}

.uiSection350 {
  width: 350px;
}

.uiSection370 {
  width: 370px;
}

.uiSection400 {
  width: 400px;
}

.uiSection450 {
  width: 450px;
}

.uiSection500 {
  width: 500px;
}

.uiGridColOne li > span,
.uiGridCol li > span,
.uiGridColTwo li > span,
.uiGridColThree li > span {
  display: inline-block;
  padding-top: 0px;
}

.uiGridColOne > ul,
.uiGridCol > ul,
.uiGridColTwo > ul,
.uiGridColThree > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uiGridColOne li,
.uiGridCol li,
.uiGridColTwo li,
.uiGridColThree li {
  display: block;
  overflow: auto;
  padding: 2px 0;
}

.uiGridColOne li #cmt,
.uiGridCol li #cmt,
.uiGridColTwo li #cmt,
.uiGridColThree li #cmt {
  position: relative;
  width: 100%;
  float: left;
}

.uiGridColOne li .uiColumn,
.uiGridCol li .uiColumn,
.uiGridColTwo li .uiColumn,
.uiGridColThree li .uiColumn {
  width: 50%;
  float: left;
}

.two-column {
  width: 50%;
  float: left;
}

.section-container {
  margin: 10px;
}

.uiRowWrap10 {
  margin: 10px;
}

.uiColumnContainer {
  width: 100%;
}

/*tabs */
.tab-list {
  border-bottom: 1px solid #ccc;
  padding-left: 0;
}

.tab-list-item {
  display: inline-block;
  list-style: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
}

.tab-list-active {
  background-color: white;
  border: solid #ccc;
  border-width: 1px 1px 0 1px;
}

.uiTabContainer {
  display: inline-block;
  margin-bottom: 1px;
}

.uiTabDetails {
  margin-top: 0px;
}

.uiTabDetails::after {
  content: "";
  display: table;
  clear: both;
}

.uiROHeader {
  background-color: #000000;
  color: White;
  font-weight: bold;
  padding: 10px;
}

.uiBlankColumn15 {
  height: 15px;
}

.uiSpacerUD10 {
  margin: 10px 0px;
}

.uiSpacer {
  margin-top: 0px;
}

.uiSpacer3 {
  margin-top: 3px;
}

.uiSpacer5 {
  margin-top: 5px;
}

.uiSpacer10 {
  margin-top: 10px;
}

.uiSpacer15 {
  margin-top: 15px;
}

.uiSpacer20 {
  margin-top: 20px;
}

.uiSpacer80 {
  margin-top: 80px;
}

.uiSpacerH5 {
  display: inline-block;
  margin: 0px 5px;
}

.uiSpacerR5 {
  display: inline-block;
  margin: 0px 5px 0px 0px;
}

.uiSpacerH10 {
  display: inline-block;
  margin: 0px 10px 0px 10px;
}

.uiSpacerH15 {
  display: inline-block;
  margin: 0px 15px;
}

.uiSpacerH20 {
  display: inline-block;
  margin: 0px 20px;
}

.uiSpacerH25 {
  display: inline-block;
  margin: 0px 25px;
}

.uiSpacerH30 {
  display: inline-block;
  margin: 0px 30px;
}

.uiSpacerH35 {
  display: inline-block;
  margin: 0px 35px;
}

.uiSpacerH50 {
  display: inline-block;
  margin: 0px 50px;
}

.uiSpacerH5 {
  margin: 0px 5px;
}

.uiSpacerL2 {
  margin-left: 2px;
}

.uiSpacerL5 {
  margin-left: 5px;
}

.uiSpacerL10 {
  margin-left: 10px;
}

.uiSpacerL20 {
  margin-left: 20px;
}

.uiSpacerL50 {
  margin-left: 50px;
}

.uiSpacerR2 {
  margin-right: 2px;
}

.uiHeight35 {
  height: 35px;
}

.uiFormEditor {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uiFormEditor li {
  position: relative;
  display: block;
  overflow: auto;
  padding: 7px 0;
}

.uiFormEditor li .uiColumn {
  position: relative;
  width: 50%;
  float: left;
}

.uiHeaderElement {
  font-weight: bold;
  margin: 3px 0px;
  color: darkgreen;
}

.uiBox {
  padding: 3px;
  width: auto;
  margin: 5px 0px;
}

.uiFlexBoxHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.uiFlexBox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.uiFlexBoxBaseLine {
  align-items: flex-end !important;
}

.uiFlexBoxRight {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.uiFlexBox15 {
  display: flex;
  align-items: center;
  gap: 15px;
}

.uiFlexBox3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
}

.uiBox300p {
  align-self: flex-start;
  width: 300px;
}

.uiIcon:hover {
  color: #FF4081;
}

.uiColumnSet {
  display: flex;
  flex-flow: row wrap;
  gap: 10px 0px;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.uiBoxSet {
  padding: 3px;
  width: auto;
  margin: 5px 0px;
}

li.uiColumns200 {
  width: 200px;
  float: left;
}

.uiBulletList {
  list-style: square none inside;
}

li.uiColumns300 {
  width: 300px;
  float: left;
}

.uiContentRight {
  text-align: right;
}

.uiAnnounceRow {
  padding: 5px;
}

.uiRowBoxContainer {
  border: 1px solid #0080ff;
  padding: 5px;
  margin: 10px 0px 0px 0px;
  border-radius: 10px;
}

.uiGroupHeader {
  margin-top: 10px;
}

.uiGroupContent {
  z-index: 0;
  margin-top: 1px;
  border-radius: 0px;
}

.uiRowBoxContainer2 {
  border: 1px solid #0080ff;
  border-top: 3px solid #0080ff;
  padding: 5px;
  margin: 0px 10px 10px 10px;
  border-radius: 10px;
}

.uiRoundedBox1 {
  background-color: #ffffff;
  border: 1px solid #008cff !important;
  padding: 5px 0px 0px 0px;
  border-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: inline-block;
}

.uiCircle20 {
  width: 20px;
  height: 20px;
  margin: 3px 0px 0px 0px;
  float: right;
  text-align: center;
  background-color: #4e342e;
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
}

.childSectionTitle {
  font-weight: bold;
}

.uiChildSection {
  padding: 0px 5px;
}

.uiRowBoxContainer .uiChildSection {
  padding: 0px;
}

.uiSectionContainer .uiActivator {
  font-weight: bold;
  color: #0000FF;
  cursor: pointer;
  margin-right: 10px;
}

.uiSectionContainer > a:hover,
.uiChildSection a:hover {
  color: #000;
}

.uiChildSection a {
  font-weight: bold;
  color: #0a8ab5;
  cursor: pointer;
  margin-right: 10px;
  text-decoration: underline;
}

.uiBlock,
.block,
.uiBlock100,
.uiBoxData .sectionButton {
  display: block;
}

.uiBlock100 {
  width: 100%;
}

.uiMultiTags {
  display: inline-block;
  padding: 0;
  margin: 0;
  background: none;
}

.uiMultiTags ul li {
  display: inline-block;
  margin-right: 7px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.uiTagInput {
  padding: 6px 0px;
}

.uiVal50p {
  width: 55%;
}

.uiVal20 {
  width: 20px;
}

.uiVal30 {
  width: 30px;
}

.uiVal40 {
  width: 40px;
}

.uiVal50 {
  width: 50px;
}

.uiVal70 {
  width: 70px;
}

.uiVal150 {
  width: 70px;
}

.uiAlignRight {
  text-align: right;
}

.uiShrinkInSort {
  max-width: 100%;
}

.uiBoxHiddenAction .uiActionBlock {
  display: none;
}
.uiBoxHiddenAction:hover .uiActionBlock {
  display: block;
}

.uiBoxAttachment {
  min-height: 70px;
}
.uiBoxAttachment .uiAccessory {
  height: 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border: 1px solid #ccc;
  border-bottom-style: none;
}
.uiBoxAttachment .uiRefFileBlock {
  display: block;
  padding: 5px;
  border: 1px solid #ccc;
  color: #fff;
  border-radius: 4px;
  margin: 3px 0px 0px 0px;
  width: 350px;
  background-color: #f4f8fd;
  text-align: center;
  font-size: 12px;
  height: 30px;
  overflow: hidden;
}
.uiBoxAttachment .uiFileBlock {
  display: block;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 3px 0px 0px 0px;
  width: 200px;
  background-color: #fff;
  text-align: center;
  font-size: 12px;
  height: 30px;
  overflow: hidden;
}
.uiBoxAttachment .uiInfoBlock {
  display: none;
  font-size: 11px;
  height: 15px;
  overflow: hidden;
  width: 200px;
}
.uiBoxAttachment:hover .uiInfoBlock {
  display: block;
}
.uiBoxAttachment .uiActionBlock {
  display: none;
}
.uiBoxAttachment:hover .uiActionBlock {
  display: block;
}

.uiBoxImage {
  min-height: 170px;
}
.uiBoxImage .uiAccessory {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border: 1px solid #ccc;
  border-bottom-style: none;
}
.uiBoxImage .uiFileBlock {
  display: block;
  position: relative;
  padding: 5px;
  border: 1px solid #ccc;
  border-top-style: none;
  border-radius: 4px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  width: 100%;
  background-color: #fff;
  text-align: center;
  font-size: 12px;
  height: 100px;
}
.uiBoxImage .uiFileBlock img {
  height: 80px;
  max-width: 100%;
}
.uiBoxImage .uiActionAdd {
  height: 100px;
  width: 155px;
  padding-top: 5px;
  background-position: left top;
  text-align: center;
}
.uiBoxImage .uiDefaultItemNo {
  display: none;
}
.uiBoxImage .uiDefaultItemYes {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -7px;
  right: -7px;
  background-color: #ff0204;
  border-radius: 50%;
  background: url(../../images/ux/icoCheck.png) no-repeat;
  background-size: 25px 25px;
}
.uiBoxImage .uiInfoBlock {
  display: none;
}
.uiBoxImage:hover .uiInfoBlock {
  display: block;
}
.uiBoxImage .uiActionBlock {
  display: none;
}
.uiBoxImage:hover .uiActionBlock {
  display: block;
}

.uiShrinkInSort .uiBoxImage {
  min-height: 100px;
}
.uiShrinkInSort .uiBoxImage .uiFileBlock {
  height: 70px;
}
.uiShrinkInSort .uiBoxImage .uiFileBlock img {
  height: 100%;
}
.uiShrinkInSort .uiBoxImage:hover .uiInfoBlock {
  display: none;
}
.uiShrinkInSort .uiBoxImage:hover .uiActionBlock {
  display: none;
}

.uiInfoAvailableYes {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: #ff0204;
  border-radius: 50%;
  background: url(../../images/ux/icoCheck.png) no-repeat;
  background-size: 25px 25px;
}

.uiBoxHeader .uiActionAdd {
  height: 30px;
  width: 155px;
  padding-top: 5px;
  background-position: left top;
  text-align: center;
}
.uiBoxHeader .uiMainBlockClear {
  display: block;
  padding: 1px 5px;
  border: 1px solid #d0e2ff;
  border-radius: 10px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  font-size: 12px;
  min-width: 100px;
  overflow: hidden;
}
.uiBoxHeader .uiMainBlock {
  display: block;
  padding: 1px 5px;
  border: 1px solid #d0e2ff;
  border-radius: 10px;
  margin: 3px 0px 0px 0px;
  background-color: #fff;
  text-align: center;
  font-size: 12px;
  min-width: 100px;
  overflow: hidden;
}
.uiBoxHeader .uiInfoBlock {
  font-size: 12px;
  min-width: 100px;
  overflow: hidden;
}
.uiBoxHeader .uiActionBlock {
  display: none;
}
.uiBoxHeader:hover .uiActionBlock {
  display: block;
}

.uiActionBlock a {
  display: inline-block;
  margin-right: 5px;
}

.uiBoxSection {
  margin: 5px 0px 0px 10px;
  border: 1px solid #ccc;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.uiBorderRoundAll {
  border-radius: 10px;
}

.uiBoxSection .composition-activator {
  padding: 5px 0px;
}

.uiBoxSection .uiBoxMessage {
  display: block;
  text-align: center;
  padding: 20px 0px;
}

.uiBoxSection150 {
  width: 150px;
  max-width: 150px;
}

.uiBoxSection170 {
  width: 170px;
  max-width: 170px;
}

.uiBoxSection200 {
  width: 200px;
  max-width: 200px;
}

.uiBoxSection150 .uiBoxData {
  min-height: 100px;
  max-height: 150px;
}

.uiBoxHeight150 {
  overflow: auto;
  height: 150px;
}

.uiRowHeight1 {
  min-height: 18px;
}

.uiRowHeight2 {
  min-height: 30px;
}

.uiBoxData50 {
  height: 50px;
  padding: 0px 5px;
}

.uiBoxSection200 {
  width: 200px;
  max-width: 200px;
}

.uiBoxSection250 {
  width: 250px;
  max-width: 250px;
}

.uiBoxSection300 {
  width: 300px;
  max-width: 300px;
}

.uiBoxSectionFullWidth {
  width: 100%;
}

.uiBoxSection200 .uiBoxData {
  min-height: 100px;
}

.uiBoxSectionFullWidth .uiBoxData {
  height: 100px;
  margin: 0px auto;
}

.uiBoxSection300 .uiScrollMsg {
  display: block;
  width: 230px;
  height: 25px;
  float: left;
}

.uiBoxTitle,
.uiListTable .uiTableTitle {
  width: 100%;
  height: 30px;
  font-weight: bold;
  background-color: rgba(245, 218, 167, 0.2117647059);
  color: #000;
}

.uiBoxTitle > span,
.uiListTable .uiTableTitle > span {
  padding: 5px;
  display: block;
  vertical-align: middle;
}

.uiBoxTitle .title {
  padding: 8px 0px 0px 5px;
}

.in-line,
.uiInline,
.uiBoxTitle .uiInline {
  display: inline-block;
}

.uiInlineFloat5 {
  float: left;
  margin: 5px 5px;
}

.uiInlineFloat {
  float: left;
  margin: 5px 15px;
}

.uiListTable .uiTableTitle span, .phTitle_disabled span {
  font-size: 15px;
}

.phTitle_disabled span {
  margin: 0px 0px 0px 5px;
}

.uiListTable .uiTableTitle span {
  display: block;
  margin: 0px 0px 0px 5px;
}

.uiListTable .uiTableTitle .title {
  float: left;
  padding: 8px 0px 0px 5px;
}

.uiBoxTitle .action,
.uiListTable .uiTableTitle .action {
  float: right;
}

.uiListTable .uiRow,
.uiListTable .uiSearchHeading {
  width: 100%;
  padding: 5px 0px;
}

.uiListTable .uiRow50 {
  width: 100%;
  height: 50px;
}

.uiListTable .uiRow70 {
  width: 100%;
  height: 70px;
}

.uiListTable .uiColumnCenter,
.uiColumnLeft, .uiColumnRight,
.uiListTable .uiColumn {
  display: inline-block;
}

.uiCellSmallImage {
  width: 100px;
}

.uiColumnRight {
  text-align: right;
}

.uiColumnLeft {
  text-align: left;
}

.uiROCellRight {
  display: block;
  text-align: right;
}

.uiCenter {
  text-align: center;
}

.uiROCellCenter {
  display: block;
  text-align: center;
}

.uiContentCenter,
.uiListTable .uiSearchHeading .uiColumn,
.uiListTable .uiColumnCenter {
  text-align: center;
  vertical-align: middle;
}

.uiListTable .uiColumn input {
  width: 95%;
  margin: 0px 3px;
}

.uiColumn20, .uiListTable .uiColumn20 {
  width: 20px;
}

.uiColumn30, .uiListTable .uiColumn30 {
  width: 30px;
}

.uiColumn50, .uiListTable .uiColumn50 {
  width: 50px;
}

.uiColumn60, .uiListTable .uiColumn60 {
  width: 60px;
}

.uiColumn70, .uiListTable .uiColumn70 {
  width: 70px;
}

.uiColumn70, .uiListTable .uiColumn70 {
  width: 70px;
}

.uiColumn90, .uiListTable .uiColumn90 {
  width: 90px;
}

.uiColumn100, .uiListTable .uiColumn100 {
  width: 100px;
}

.uiColumn130, .uiListTable .uiColumn130 {
  width: 130px;
}

.uiColumn150, .uiListTable .uiColumn150 {
  width: 150px;
}

.uiColumn170, .uiListTable .uiColumn170 {
  width: 170px;
}

.uiColumn200, .uiListTable .uiColumn200 {
  width: 200px;
}

.uiColumn240, .uiListTable .uiColumn240 {
  width: 240px;
}

.uiColumn350, .uiListTable .uiColumn350 {
  width: 350px;
}

.uiListTable .uiColumn250 {
  width: 250px;
}

.uiListTable .uiSpacious {
  padding: 0px 5px;
}

.uiListTable .uiExtraInfoAlways,
.uiListTable .uiExtraInfo {
  color: #045eef;
}

.uiListTable .uiExtraInfo {
  display: none;
}

.uiExtraInfo .uiLink {
  color: #4286f4;
  text-decoration: underline;
}

.uiHaveExtra:hover .uiExtraInfo {
  display: block;
}

.phSectionGroup {
  clear: both;
}

.phSectionGroup .phSectionColumn {
  float: left;
}

.phSectionGroup .ui2Column {
  width: 50%;
}

.uiBoxBlue {
  background-color: #fff;
  border: 1px solid #d0e2ff;
  margin: 10px 5px;
  padding: 5px;
}

.uiBoxBlue:hover {
  background-color: #f4f8fd;
}

.uiBoxPlain {
  background-color: #fff;
  border: 1px solid #d0e2ff;
  margin: 10px 5px;
  padding: 5px;
}

.uiH110 {
  width: 110px;
}

.uiBar {
  padding: 3px;
  border: 1px solid #828891;
  background-color: #bdbfc1;
  color: #000000;
  width: 140px;
  text-align: left;
  margin-top: 3px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.uiDashOver .uiBar {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.uiBarInfo {
  padding: 3px;
  border: 1px solid #fff;
  background-color: #e5e6e8;
  color: #000000;
  width: 140px;
  text-align: left;
  margin-top: 0px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.uiTableRecordBar {
  padding: 3px;
  border: 1px solid #828891;
  background-color: #bdbfc1;
  text-align: left;
  margin-top: 3px;
  overflow: hidden;
  position: relative;
}

.uiDashRowRCol {
  text-align: center;
  margin-left: 1px;
  top: 0px;
  height: 100%;
  color: #000;
  position: absolute;
  right: 0px;
  font-size: 11px;
  width: 25px;
}

.uiCenterLabel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.uiRecordContainer {
  position: relative;
}

.uiDashPop {
  height: 300px;
  width: 450px;
  background-color: #fff;
  overflow: auto;
  z-index: 999;
  padding: 5px 5px;
  box-shadow: 3px 3px 5px #0e0e0e;
  border: 1px solid #0e0e0e;
}

.uiDashPop .uiFormMini {
  background-color: #fff;
  list-style: outside none none;
  overflow: visible;
  text-align: left;
}
.uiDashPop .uiFormMini li {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 2px;
}
.uiDashPop .uiFormMini .uiLbl {
  width: 100px;
}

.uiDivider {
  border-bottom: 1px solid #4e342e;
}

.uiLeftAlignText {
  text-align: left;
}

.uiCenterAlignText {
  text-align: center;
}

.uiRightAlignText {
  text-align: right;
}

.uiPrimary {
  color: #d0e2ff;
  font-weight: bold;
}

.uiSecondary {
  color: #4e342e;
  font-weight: bold;
}

.uiSectionDividerTitle {
  margin-top: 5px;
  color: #4e342e;
  font-weight: bold;
}

.uiBlue {
  color: #0080ff;
  font-weight: bold;
}

.uiRed {
  color: #ff1744;
  font-weight: bold;
}

.uiGreen {
  color: #43a047;
  font-weight: bold;
}

.uiGrey {
  color: #999696;
  font-weight: bold;
}

.uiESort {
  min-height: 20px;
}

.uiESort li {
  min-height: 20px;
}

.uiDashboardGroup .uiHeaderBlock {
  height: auto;
}

.uiDashViewD .uiContentBlock {
  height: 245px;
  overflow-y: scroll;
}

.uiDashViewS .uiContentBlock {
  height: 100px;
}

.uiUnHighlight {
  font-size: 10px;
}

.uiDashboardGroup .uiFooterBlock {
  height: 29px;
  background-color: #fff;
  margin: 0px -5px 10px -5px;
  border-top: 1px solid #c3cfe2;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.uiDashboardGroup .uiFooterBlock .uiFlexBox3 {
  justify-content: center;
}

.uiDashFixedHeader1 {
  position: fixed;
  top: 35px;
  z-index: 1;
  background: #e9ecf3;
  width: calc(100% - 70px);
}

.uiDashFixedHeader2 {
  position: fixed;
  background: #e9ecf3;
  z-index: 1;
  width: calc(100% - 70px);
  margin-bottom: 15px;
  padding-bottom: 5px;
}

.uiDashFixedFooter2 {
  position: fixed;
  bottom: 35px;
  z-index: 1;
  background: #e9ecf3;
  padding: 5px 10px;
  width: calc(100% - 70px);
}

.uiDashContentLayer1 {
  margin: 30px 0px 250px 0px;
}

.autoDataTitle {
  font-size: large;
  font-weight: bold;
  color: #000;
}

.FormFields div {
  margin-top: 20px;
}

.formAction {
  margin: 10px 0px 5px 0px;
  clear: both;
}

.formAction a {
  display: inline-block;
  padding: 5px 10px;
  background-color: #0080ff;
  border: 0;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 3px;
}

.formAction a:hover {
  background-color: #6fb6fc;
  color: #000;
}

.UIdbSynch .uiActionHeader {
  background-color: #7d8888;
  padding: 5px;
  color: #fff;
}

.UIdbSynch .uiActionList {
  padding: 10px 5px;
  background-color: #e6e6aa;
}

.UIdbSynch .uiActionList span {
  margin-left: 10px;
  margin-right: 3px;
}

.UIdbSynch .uiActionResultHeader {
  background-color: #aad0ec;
  padding: 10px 5px;
}

.UIdbSynch .uiActionResultList {
  list-style: none;
  padding: 0px;
  margin: 10px;
}

.uiNoPadding {
  padding: 0px;
}

.uiPadding10 {
  padding: 10px;
}

.uiBox50PInline {
  width: 45%;
  display: inline-block;
}

.uiBox20PInline {
  width: 23%;
  display: inline-block;
}

.UIdbSynch .uiActionResultListRow {
  height: 250px;
}

.UIdbSynch .uiActionResultListRow .uiHeader {
  height: 50px;
  background-color: #e2d2bf;
  padding: 3px;
}

.UIdbSynch .uiActionResultListRow .uiContent {
  height: 200px;
  overflow: auto;
}

.UIdbSynch .uiActionResultListRowMini {
  height: 95px;
}

.uiPad5 {
  padding: 5px;
}

.uiFullScreen {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.uiFullScreen .editor {
  height: 100%;
  width: 100%;
}

.uiDisabled {
  color: #ff1744;
}

.uiItalic {
  font-style: italic;
}

.uiManualInfo {
  display: block;
  margin-top: 5px;
  color: #0080ff;
}

.uiExtraInfo {
  font-style: italic;
  display: block;
  margin-top: 5px;
}

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

.uiActionSection a {
  margin: 5px 2px;
}

.uiInlineBlock50p {
  width: 50%;
  float: left;
}

.uiTable {
  display: table;
}
.uiTable .uiRow {
  display: table-row;
}
.uiTable .uiCell {
  display: table-cell;
  padding: 0px 5px;
}

.phSectionMaterial .uiTable, .phSectionProcess .uiTable {
  width: 100%;
}

.uiSizeV30p {
  height: 30px;
}

.uiSizeV40p {
  height: 40px;
}

.uiSizeV70p {
  height: 70px;
}

.uiSize70p {
  width: 70%;
}

.uiRow {
  display: block;
  width: 100%;
  clear: both;
}

.uiRow1Column {
  display: block;
  width: 100%;
  clear: both;
}

.uiRow2Column {
  display: inline-block;
  width: 49%;
}

.uiRow3Column {
  display: inline-block;
  width: 33%;
}

.uiListTable .uiRow3Column,
.uiListTable .uiRow2Column,
.uiListTable .uiRow1Column {
  margin: 3px 0px;
  padding: 1px 1px;
  box-sizing: border-box;
  border-bottom: 1px dotted #d0e2ff;
  overflow: auto;
  min-height: 25px;
}

.uiListTable .uiRow3Column:last-child,
.uiListTable .uiRow2Column:last-child,
.uiListTable .uiRow1Column:last-child {
  border-bottom: none;
}

.uiListRow,
.uiSelectedListRow {
  margin: 10px 2px;
  padding: 3px 3px;
  border-bottom: 1px solid #EFEBE9;
  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.uiListRow:hover {
  background-color: #f4f8fd;
}

.uiSelectedListRow {
  background-color: #f4f8fd;
}

.uiActionIndicator {
  cursor: pointer;
}

.MuiPickersBasePicker-pickerView {
  background: white;
}

.uiError {
  position: absolute;
  bottom: -40px;
  left: 3px;
  background-color: rgb(211, 47, 47);
  color: white;
  z-index: 100;
  width: max-content;
  padding: 5px 11px;
  border-radius: 10px;
}

/* tabs */
.tabs {
  padding: 10px 3px 3px 5px !important;
}

.tab-list {
  border-bottom: 0px !important;
  padding-left: 0;
}

.tab-list-item {
  border: 1px solid rgb(189, 188, 188) !important;
  margin-right: 10px;
  padding: 3px 9px !important;
  cursor: pointer;
  font-size: 13px;
  width: fit-content;
  display: inline-block;
  font-weight: bold;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.tab-list-active {
  background-color: #008cff !important;
  border: 1px solid rgb(48, 48, 48) !important;
  color: white;
}

.tab-content {
  border-top: 1px solid black !important;
  box-sizing: border-box;
  padding: 5px 5px;
  width: 100%;
}

/*End Tabs */
.widthInherit {
  width: inherit;
}

.uiWidthMaxContent {
  width: max-content;
}

.uiWidth50p {
  width: 50%;
}

.uiBgWhite {
  background-color: #ffffff;
  color: #000;
}

.uiBgBlue {
  background: #0080ff;
  color: #fff;
}

.uiBgGreen {
  background: #43a047;
  color: #fff;
}

.uiConsolidatedVal {
  min-height: 18px;
  padding: 0px 15px;
  border: 1px solid #9fa6aa;
  border-radius: 3px;
  display: inline-block;
  margin: 0px 10px;
}

.uiBlockHeading {
  font-weight: bold;
  background: #01579b;
  color: white;
  text-align: center;
}

.uiXYGridContainer .uiListContainer {
  background-color: #e9ecf3;
}
.uiXYGridContainer .uiListRow {
  background-color: #fff;
}
.uiXYGridContainer .uiXYGrid {
  scrollbar-width: none;
}
.uiXYGridContainer .uiXYTitle {
  color: #fff;
  display: flex;
  align-items: center;
  text-align: center;
}
.uiXYGridContainer .uiXYTitle span {
  width: 100%;
}
.uiXYGridContainer .uiXYGridXRowHeight {
  height: 35px;
}
.uiXYGridContainer .uiXYGridColumn1, .uiXYGridContainer .uiXYGridColumn2,
.uiXYGridContainer .uiXYGridXRowWidth {
  width: 250px;
}
.uiXYGridContainer .uiXYGridColumn3 {
  background-color: #ffffff;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: scroll;
}
.uiXYGridContainer .uiXYTitle,
.uiXYGridContainer .uiXYColumn3Title {
  background-color: #3F92FF;
  font-weight: bold;
}
.uiXYGridContainer .uiXYGridYRowHeight {
  height: 150px;
}
.uiXYGridContainer .uiListTable {
  border-radius: 0px;
}
.uiXYGridContainer .uiGridXYCellContainer {
  overflow: scroll;
  scrollbar-width: none;
}

.uiDateRangeTrigger {
  background: #fff;
  padding: 2px 1px;
  font-size: 1rem;
  color: #333;
  max-width: 220px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s;
}

.uiHover {
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s;
}

.uiHover:hover,
.uiHover:focus {
  background: #f5f7fa;
  box-shadow: 0 2px 8px rgba(60, 60, 60, 0.1), 0 0 0 2px #f0f2f6;
  outline: none;
}

.uiMarginLeft15 {
  margin-left: 15px;
}

.phViewSection {
  border-radius: 10px;
  border: 1px solid #c3cfe2;
  background-color: #ffffff;
}
.phViewSection .phViewArea {
  border-radius: 10px;
  padding: 10px;
  background-color: #ffffff;
}
.phViewSection.phSectionTracker {
  border: 1px solid transparent;
  background-color: unset;
}
.phViewSection::after {
  content: "";
  display: table;
  clear: both;
}

.uiDialogAction .phAction {
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.uiPadding10 {
  padding: 10px;
}

.uiStickyElement {
  position: sticky;
  top: var(--sticky-top, 0px);
  z-index: 1000;
}

.uiStickyTable thead th {
  position: sticky;
  top: var(--sticky-top, 0px);
  z-index: 2;
}

.uiStickyTable thead {
  position: sticky; /* helps some browsers */
  top: var(--sticky-top, 0px);
  z-index: 1;
}

.uiStickyHeaderScrolling {
  background-color: #fff;
}

button {
  /*TODO check the impact of this on existing screens.*/
  /*display: block;*/
  cursor: pointer;
  border: none;
  border: medium none;
}

input[type=password],
input[type=text] {
  min-height: 18px;
  padding: 2px 1px;
  border: 1px solid #9fa6aa;
  border-radius: 3px;
}

.uiAppSearchIcon {
  color: #FF4081;
  font-size: 18px;
}

.uiSearchText {
  height: 30px;
  padding: 1px 1px;
  border: none;
  background-color: white;
}

.uiSearchText:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

select {
  min-height: 22px;
}

.uiDefaultIconButton {
  margin: "0px 5px 0px 0px";
  cursor: pointer;
}

.uiDeleteIconButton,
.uiApproveIconButton,
.uiRejectIconButton,
.uiActionIconButton {
  display: inline-block;
  background-color: #ffffff;
  color: #ffffff;
  padding: 0px;
  margin: 0px 3px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.uiDeleteIconButton {
  background-color: #ffffff;
  color: #ff1744;
}

.uiApproveIconButton {
  background-color: #ffffff;
  color: #43a047;
}

.uiApproveIconButton {
  background-color: #ffffff;
  color: #43a047;
}

.uiRejectIconButton {
  background-color: #ffffff;
  color: #ff1744;
}

.uiCheckRowSelector {
  text-align: center;
}
.uiCheckRowSelector input[type=checkbox] {
  width: 20px;
  max-width: 20px;
}

.uiRowSelector,
.sectionButton,
.uiAction a,
.uiRiskyOption,
.uiSaveActionButton, .uiActionButton, .uiActionButtonBlue {
  display: inline-block;
  background-color: #ffffff;
  color: #3F92FF;
  padding: 5px 5px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

.uiActionButtonBlue {
  background-color: #347bdc;
}

.uiRowSelector {
  padding: 2px 2px;
  width: 65px;
}

.uiTooltip {
  font-size: 12px;
  line-height: 1.2;
}

.uiSaveAction,
.uiCancelAction,
.uiGeneralAction {
  padding: 6px 12px;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
}

.uiSaveActionButton, .uiSaveAction, .uiPrimaryAction {
  background-color: #ffffff !important;
}
.uiSaveActionButton .uiAppText2Compliment, .uiSaveAction .uiAppText2Compliment, .uiPrimaryAction .uiAppText2Compliment {
  color: #3F92FF !important;
}

.uiGeneralAction, .uiSecondaryAction,
.uiCancelAction {
  background-color: #ffffff !important;
  background-color: #f5f5f5 !important;
  border: 1px solid #e0e0e0;
  font-weight: normal;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.uiGeneralAction .uiBrandColor1, .uiSecondaryAction .uiBrandColor1,
.uiCancelAction .uiBrandColor1 {
  color: #333333 !important;
}
.uiGeneralAction .uiAppText2Compliment, .uiSecondaryAction .uiAppText2Compliment,
.uiCancelAction .uiAppText2Compliment {
  color: #999696 !important;
  color: #333333 !important;
}

.uiRowSelector.uiSelected {
  background: #347bdc;
}

.uiGroupControl10 {
  margin: 0px 10px 0px 10px;
}

.uiHoverRound:hover {
  background-color: #EFEBE9;
  border-radius: 50%;
}

.uiActionIconRound {
  height: 22px;
  width: 22px;
  margin: 0px 3px;
  padding: 0px;
  cursor: pointer;
}

.uiActionIconSimple {
  height: 22px;
  width: 22px;
  margin: 0px 3px;
  padding: 2px;
  cursor: pointer;
}

.uiActionAddFav {
  height: 25px;
  width: 25px;
  display: inline-block;
  margin: 0px;
  cursor: pointer;
  color: #4e342e;
}

.uiActionSelFav {
  height: 25px;
  width: 15px;
  display: inline-block;
  background: url(../../images/ux/arrow_down.png) no-repeat;
  background-size: 25px 25px;
  background-position: center;
  margin: 0px;
  cursor: pointer;
}

.uiActionWithMenu {
  color: #333333;
  font-weight: bold;
  font-size: 15px;
  padding: 2px 2px 2px 8px;
  border: 1px solid #c3cfe2;
  border-radius: 4px;
  background-color: #ffffff;
}
.uiActionWithMenu:hover {
  border: 1px solid #c3cfe2;
}

.uiActionWithMenuSelector {
  content: "";
  cursor: pointer;
  height: 10px;
  width: 15px;
  margin: 0px 3px;
  display: inline-block;
  background: url(../../images/ux/arrow_down.png) no-repeat;
  background-size: 25px 25px;
  background-position: center;
}

.uiActionSearch {
  height: 25px;
  width: 25px;
  margin: 0px 5px 0px 5px;
  cursor: pointer;
  color: #4e342e;
}

button:disabled {
  background-color: #504E4E;
  color: #ffffff !important;
  cursor: not-allowed !important;
}

.uiActionRefresh {
  height: 25px;
  width: 25px;
  display: inline-block;
  margin: 0px 5px 0px 5px;
  cursor: pointer;
  color: #4e342e;
}

.uiBrandColor1 {
  color: #FF4081;
}

.uiBrandColor2 {
  color: #3F92FF;
}

.uiColorNeutralAction {
  color: #333333;
}
.uiColorNeutralAction:hover {
  color: #FF4081;
}

.uiDisabledIconButton {
  color: #504E4E;
  cursor: not-allowed !important;
}

.uiAppText2Compliment {
  color: #3F92FF;
  font-weight: bold;
}

.uiDisabledIconButton .uiAppText2Compliment {
  color: #504E4E;
}

.uiButtonAppText2 {
  background-color: #ffffff !important;
}

.uiBrandColor3 {
  color: #3F92FF;
}

.uiSarasIcon {
  height: 25px;
  width: 25px;
  color: #4e342e;
}

.uiProgressScopeClass {
  color: #EFEBE9;
}

.uiProgressClass {
  color: #0080ff;
}

.uiProgressLabelClass {
  font-size: 10px;
  color: #999696;
}

.uiComfortText {
  padding: 0px 1px;
}

.uiGridText {
  padding: 3px 2px;
}

.uiPriority {
  padding: 3px;
  width: 35px;
  display: inline-block;
  text-align: center;
  margin-left: 10px;
}

.uiActionAdd {
  height: 25px;
  width: 25px;
  background: url(../../images/ux/add.png) no-repeat;
  background-size: 25px 25px;
  cursor: pointer;
}

.uiBlack {
  background: #373737;
}

.uiWrapper > .uiHeader .uiSaveAction, .uiWrapper > .uiHeader .uiGeneralAction {
  border: 1px solid #fff;
}

.uiRiskyOption {
  background: #c5c3b6;
  border-bottom: 2px solid #7b4406;
  border-right: 1px solid #7b3d07;
}

hr {
  border: 1px solid #F1F1f1;
}

.uiDeleteActionCross::after {
  content: "x";
  text-align: center;
  display: block;
  font-size: 11px;
  padding-top: 0px;
  color: #fff;
}

.uiDeleteActionCross {
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  cursor: pointer;
  top: -7px;
  right: -7px;
  background-color: #ff0204;
  border-radius: 50%;
}

.btnSubmitApproval {
  text-align: center;
  width: auto;
  display: inline-block;
  padding: 5px 10px;
  margin: 0px auto;
  background-color: #0080ff;
  border: 0;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
}

.uiLink,
.uiLinkBlack,
.uiLinkWhite,
.uiLinkBlue {
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

.uiLink {
  color: #000;
}

.uiLinkRow {
  color: #000;
  cursor: pointer;
  text-decoration: none;
}

.uiLinkRow:hover {
  background-color: #f4f8fd;
}

.uiLinkBlack {
  color: #000000;
}

.uiLinkWhite {
  color: #000000;
}

.uiLinkBlue {
  color: #d0e2ff;
}

.uiLinkBlack:hover,
.uiLinkWhite:hover,
.uiLink:hover {
  text-decoration: none;
  color: #FF4081;
}

.uiChkLabel {
  display: inline-block;
}

.uiFrmText {
  width: 90%;
}

.uiFrmTextWithSH {
  width: 80%;
}

.onoffswitch {
  display: inline-block;
}

.uiNotifyNo::before {
  background-image: none;
}

.uiDialog {
  overflow: visible;
}

.ui-autocomplete {
  max-height: 300px;
  min-width: 250px;
  overflow-y: auto;
  overflow-x: auto;
  z-index: 99999999999999;
}

.uiNotifyYes::before {
  content: " ";
  background-image: url("../../images/ux/Notify.png");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position-x: right;
  height: 25px;
  width: 25px;
  display: inline-block;
}

.uiOnOff {
  padding: 5px;
}

fieldset.uiSwitch label.ui-state-active,
fieldset.uiSwitch label {
  width: 100px;
  padding: 3px;
}

.sectionButton {
  border-radius: 4px;
}

.uiBoxData .uiActionActivator {
  margin: 20px auto;
  display: block;
  width: 300px;
}

.uiBoxSection300 .uiCommentLink {
  display: block;
  width: 50px;
  height: 25px;
  cursor: pointer;
  float: right;
  text-align: center;
  top: -5px;
  position: relative;
}

.uiCommentLink {
  content: " ";
  background-image: url("../../images/ux/comment.png");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: center;
  width: 25px;
  height: 25px;
  display: block;
  float: right;
}

.uiViewActivatorBlue ul li, .uiViewActivatorGreen ul li {
  display: inline-block;
  margin: 3px 2px 0px 0px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-radius: 4px;
}

.uiViewActivatorBlue ul li {
  padding: 4px 10px;
  background: #347bdc; /* W3C */
}

.uiViewActivatorBlue ul li a, .uiViewActivatorGreen ul li a {
  color: #fff;
  text-decoration: none;
}

.uiViewActivatorBlue ul li:hover,
.uiViewActivatorGreen ul li:hover,
.uiViewActivatorBlue ul li:hover span,
.uiViewActivatorGreen ul li:hover span {
  cursor: pointer;
}

.uiPrint {
  background-position: left bottom;
  background-size: 24px 24px;
  height: 25px;
  width: 25px;
  display: inline-block;
  cursor: pointer;
  background-repeat: no-repeat;
  margin-top: 2.5px;
}

.uiPrintIcon1 {
  background-image: url(../../images/ux/ui-print-general.png);
}

.uiPrintIcon2 {
  background-image: url(../../images/ux/TaskActivityLogReport.png);
  background-color: transparent;
}

.uiPrintIcon3 {
  background-image: url(../../images/ux/TaskCallReport.png);
  background-color: transparent;
}

.uiDashSHLink {
  cursor: pointer;
  color: #fff;
}

.uiSearchLink {
  background-image: url(../../images/ux/search-items.png);
  background-position: left bottom;
  background-size: 15px 15px;
  height: 22px;
  width: 20px;
  display: inline-block;
  cursor: pointer;
  background-repeat: no-repeat;
}

/* CMNSearchNewFields, CMNSearchSavedFields ends here */
.uiDropDownCombo {
  height: 28px;
  width: 250px;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

.uiGridFilterCombo1 {
  color: #fff;
  font-weight: bold;
  background-color: #02660f;
}

.uiConfirmDialogInput input[type=text] {
  width: 95%;
  margin: 3px 5px;
}

.uiContextMenu {
  width: 24px;
  min-height: 24px;
  display: inline-block;
}

.uiContextMenu {
  background: url("../../images/ux/btnContextMenu.png") no-repeat right top;
}

.uiContextMenu:disabled {
  color: #fff;
  background: #9a5e1b;
  border-bottom: 2px solid #5f3404;
  border-right: 2px solid #5f3404;
  background-position: left -21px;
  cursor: default;
}

.uiHighlightKey {
  font-size: 17px;
}

.uiHighlightGreen {
  font-size: 17px;
  color: #43a047;
}

.uiHighlightRed {
  font-size: 17px;
  color: #ff1744;
}

.uiHighlightBlue {
  font-size: 17px;
  color: #0080ff;
}

.uiHighlightBlueRegular {
  font-size: 11px;
  color: #0080ff;
}

.uiHighlightRedLineThrough {
  font-size: 11px;
  color: #ff1744;
  text-decoration: line-through;
}

.uiTextRight {
  text-align: right;
}

.frmSearchCriteria {
  width: 100%;
  padding-top: 0px;
}

.uiFormInput100p {
  width: 100%;
}

.uiTabs {
  position: relative;
  background: none;
  box-shadow: none;
  border: none;
}
.uiTabs .uiTabsNav {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 3px;
}
.uiTabs .uiTabsNav .uiTab {
  list-style: none;
  border: 1px dotted #333333;
  background: #ffffff;
  color: #333333;
  font-weight: 600;
  padding: 5px 13px;
  margin: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.uiTabs .uiTabsNav .uiTab:hover {
  color: #333333;
}
.uiTabs .uiTabsNav .uiTabActive {
  border: 1px solid #333333;
  background: #333333;
  color: #fff !important;
  font-weight: bold !important;
  cursor: default;
  border-radius: 4px;
}
.uiTabs .uiTabsNav .uiTabActive:hover {
  color: #333333;
}
.uiTabs .uiTabsNav .uiTabActive a {
  color: #fff !important;
}
.uiTabs .hiddenTabs {
  display: none;
  height: 0;
  overflow: hidden;
}

.uiRadio {
  display: inline-block;
}
.uiRadio input[type=radio] {
  margin: 0px 2px;
}
.uiRadio label {
  margin: 0px 10px 0px 5px;
  vertical-align: baseline;
}

.darkGoldenBtn {
  cursor: pointer;
  background: darkgoldenrod;
  color: white;
  font-size: 100%;
  font-weight: bold;
}

.uiDnDDropTarget {
  min-height: "200px";
  min-width: "143px";
  height: "120%";
}

.uiDnDDragOverList {
  background-color: #EFEBE9;
}

.uiButtonIconWithText {
  display: flex;
  margin: 0px 5px;
  cursor: pointer;
}
.uiButtonIconWithText .uiButtonText {
  align-self: center;
  padding-left: 3px;
  color: #fff;
}

.uiFlexDistributed {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .uiFlexDistributed {
    flex-wrap: wrap;
  }
}

.uiFlexDistributedNoWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.uiFlex50p {
  display: flex;
}
.uiFlex50p .uiFlexCol {
  flex: 1;
}

.uiFlexGap15 {
  gap: 15px;
}

.uiStyledMenuItemLabel {
  padding: 5px !important;
  margin: 1px 0px !important;
}
.uiStyledMenuItemLabel li {
  padding: 0px !important;
  margin: 1px 0px !important;
}
.uiStyledMenuItemLabel li .MuiListItemText-root {
  padding: 0px !important;
  margin: 0px !important;
}
.uiStyledMenuItemLabel .uiMenuItemLabel {
  padding: 10px;
  width: 100%;
  display: block;
}

.uiMarginT5 {
  margin-top: 5px;
}

.uiMarginT10 {
  margin-top: 10px;
}

.uiWrkFlwActivityStatusApproved {
  display: inline-block;
  background: #00B050;
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding: 3px 5px;
  min-width: 70px;
}

.uiWrkFlwActivityStatusRejected {
  display: inline-block;
  background: #FF5050;
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding: 3px 5px;
  min-width: 70px;
}

.uiWrkFlwActivityStatusPending {
  display: inline-block;
  background: #00B0F0;
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding: 3px 5px;
  min-width: 70px;
}

.uiWrkFlwActivityStatusSkipped {
  display: inline-block;
  background: #E7E6E6;
  text-align: center;
  font-weight: bold;
  color: rgb(72, 72, 72);
  padding: 3px 5px;
  width: 50px;
}

.uiWorkFlowIndicateApprove {
  background-image: url("../../images/ux/icoCheck.png");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 0px 0px;
  width: 25px;
  height: 25px;
  float: left;
  margin-right: 10px;
  cursor: pointer;
}

.uiWorkFlowIndicateReject {
  background-image: url("../../images/ux/icoNoCheck.png");
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 0px 0px;
  width: 25px;
  height: 25px;
  float: left;
  cursor: pointer;
}

.uiBatchReviewApprove {
  background-image: url("../../images/ux/icoCheck.png");
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: 56px 4px;
  width: 75px;
  display: inline-block;
  float: none;
  margin-right: 10px;
  cursor: pointer;
  text-align: left;
}

.uiBatchReviewReject {
  background-image: url("../../images/ux/icoNoCheck.png");
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: 56px 4px;
  width: 75px;
  display: inline-block;
  float: none;
  cursor: pointer;
  text-align: left;
}

.uiApprover .uiPLDIndicateApprove {
  background-image: url("../../images/ux/icoCheck.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  margin: 0px 5px 0px 5px;
  width: 31px;
  height: 31px;
  float: left;
  cursor: pointer;
}

.uiApprover .uiPLDIndicateReject {
  background-image: url("../../images/ux/icoNoCheck.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  margin: 0px 5px 0px 5px;
  width: 31px;
  height: 31px;
  float: left;
  cursor: pointer;
}

.uiP_HighestPriority {
  background: #00B050;
  color: #fff;
}

.uiP_HighPriority {
  background: #66FF33;
  color: #005005;
}

.uiP_VeryUrgent {
  background: #CCFF99;
  color: #d0e2ff;
}

.uiP_Urgent {
  background: #FFFF00;
  color: #4e342e;
}

.uiP_NormalPriority {
  background-color: #FFCD2D;
  color: #000000;
}

.uiP_LowPriority {
  background: #FF9933;
}

.uiP_PriorityNotSet {
  background: #FF5050;
  color: #fff;
}

.uiC_FullConfidence {
  background: #00B050;
}

.uiC_VeryHighConfidence {
  background: #3BF500;
}

.uiC_HighConfidence {
  background: #CCFF99;
}

.uiC_NotSoBad {
  background: #FFFF00;
}

.uiC_Confidence50_50 {
  background: #FFCD2D;
  color: #000000;
}

.uiC_LowConfidence {
  background: #FF9933;
}

.uiC_NoConfidence {
  background: #FF5050;
}

.uiHighlightError {
  color: #ff1744;
}

.uiHighlightMsg {
  color: #0080ff;
}

.labReviewStatusApproved {
  display: inline-block;
  background-color: #00B050;
  width: 13px;
  height: 13px;
  color: #f7f9fc;
  border: 1px solid #000;
  border-radius: 50%;
}

.labReviewStatusRejected {
  display: inline-block;
  background-color: #FF5050;
  width: 13px;
  height: 13px;
  border: 1px solid #000;
  color: #fff;
  border-radius: 50%;
}

.labReviewStatusOnHold {
  display: inline-block;
  background-color: #E7E6E6;
  width: 13px;
  height: 13px;
  border: 1px solid #000;
  border-radius: 50%;
}

.labReviewStatusQuarantine {
  display: inline-block;
  background-color: #FF8C00;
  width: 13px;
  height: 13px;
  border: 1px solid #000;
  color: #fff;
  border-radius: 50%;
}

.labReviewStatusDraft {
  display: inline-block;
  background-color: #44DCFF;
  width: 13px;
  height: 13px;
  border: 1px solid #000;
  color: #000;
  border-radius: 50%;
}

.labReviewStatusUnderTest {
  display: inline-block;
  background-color: #FFD700;
  width: 13px;
  height: 13px;
  border: 1px solid #000;
  color: #000;
  border-radius: 50%;
}

.docReviewStatusNotSubmitted,
.docReviewStatusPending,
.docReviewStatusApproved,
.docReviewStatusRejected,
.docReviewStatusSkipped {
  display: inline-block;
  height: 24px;
  padding: 3px 15px;
  border: 1px solid #fff;
  border-radius: 4px;
}

.uiStatusCompactReviewNotSubmitted,
.docReviewStatusNotSubmitted {
  background-color: #fcba03;
  color: #000;
}

.uiStatusCompactReviewPending,
.docReviewStatusPending {
  background-color: #5076ff;
  color: #fff;
}

.uiStatusCompactReviewApproved,
.docReviewStatusApproved {
  background-color: #00B050;
  color: #fff;
}

.uiStatusCompactReviewRejected,
.docReviewStatusRejected {
  background-color: tomato;
  color: #fff;
}

.uiStatusCompactReviewSkipped,
.docReviewStatusSkipped {
  background-color: #E7E6E6;
  color: #000;
}

.uiBoxTitle .uiReviewStatus {
  border: 1px solid #fff;
  display: inline-block;
}

.uiStatusCompactDocument,
.uiStatusCompactFinance,
.uiStatusCompactReview,
.uiStatusCompactQC,
.uiStatusCompact {
  border: 1px solid #fff;
  display: inline-block;
  height: 24px;
  width: 24px;
  text-align: center;
  border-radius: 50%;
  padding: 3px 3px;
}

.uiDocumentStatus {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  padding: 0px 10px;
}

.uiRoundedText {
  text-align: center;
  border-radius: 4px;
  padding: 3px;
}

.autoDataAction {
  font-weight: bold;
}

.autoDataManualAction {
  color: #d3a01d;
}

.autoDataExecuted {
  color: #18840a;
}

.autoDataActionFailed {
  color: #f24624;
}

.autoDataProposed {
  color: #4286f4;
}

.uiCertReviewStatus2 {
  background-image: url("../../images/ux/icoCheck.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width: 25px;
  height: 25px;
  float: left;
  margin-right: 3px;
  cursor: pointer;
}

.uiCertReviewStatus3 {
  background-image: url("../../images/ux/icoNoCheck.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width: 25px;
  height: 25px;
  float: left;
  margin-right: 3px;
  cursor: pointer;
}

.uiGridRowType_1 {
  height: 30px;
  font-weight: bold;
  text-align: center;
}

.uiGridRowType_2 {
  height: 30px;
  background-color: #d0e2ff;
  font-weight: bold;
  text-align: center;
  color: #333333;
}

.uiGridRowType_2 td.uiCol_Repeat {
  background-color: #dcae42;
  color: #000;
}

.uiGridRowType_3 td.uiCol_Repeat {
  background-color: rgba(245, 218, 167, 0.2117647059);
}

.uiGridRowType_3 {
  height: 30px;
}

.uiCol_Repeat .uiROCellCenter {
  font-size: 15px;
}

.uiItemParentRow {
  background-color: #f4f8fd;
}

.uiItemBatchRow {
  background-color: #EFEBE9;
}

.uiHighlightMatTypeMAIN {
  background-color: #43a047;
  width: 75px;
  display: inline-block;
  color: #fff;
}

.uiHighlightMatTypeSF {
  background-color: #0080ff;
  width: 75px;
  display: inline-block;
  color: #fff;
}

.uiHighlightMatTypeNIR {
  background-color: #999696;
  width: 75px;
  display: inline-block;
  color: #fff;
}

.uiApiLog_success {
  color: #43a047;
}

.uiApiLog_error {
  color: #ff1744;
}

.ui-helper-clearfix:before, .ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

/*end tabs */
.ui-icon {
  background-image: url(../../images/ux/ui-icons_222222_256x240.png);
}

.ui-state-default .ui-icon {
  background-image: url(../../images/ux/ui-icons_ef8c08_256x240.png);
}

.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
  background-image: url(../../images/ux/ui-icons_ef8c08_256x240.png);
}

.uiStateActive .ui-icon {
  background-image: url(../../images/ux/ui-icons_ef8c08_256x240.png);
}

.ui-state-highlight .ui-icon {
  background-image: url(../../images/ux/ui-icons_228ef1_256x240.png);
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url(../../images/ux/ui-icons_ffd27a_256x240.png);
}

.ui-tooltip {
  background-color: #000;
  color: #fff;
  opacity: unset;
}

.uiAutoCompleteInput {
  background-color: #c6f7bb;
}

.ui-menu-item {
  background-color: #ccced1;
  color: black;
  border: 1px solid white;
}

.uiMenuGreen .ui-menu-item:hover {
  background: #007ff6;
  color: #fff;
}
.uiMenuGreen .ui-menu-item:hover .uiMenuItemLabel {
  background: #007ff6;
  color: #fff;
}
.uiMenuGreen .ui-menu-item a, .uiMenuGreen .uiDeleteActionCross {
  padding: 0px;
}
.uiMenuGreen .uiMenuItem {
  padding: 3px 1px;
}

.frmSearchCriteria .uiStateActive {
  background: #f4f8fd;
}

.ui-menu .ui-menu-item a.uiStateActive, .uiStateActive a {
  color: #fff;
}

.uiActionSection,
.uiDialog .uiDialogAction {
  margin-top: 5px;
  border-top: 0px solid #c3cfe2;
  background: #fff;
  height: 50px;
  padding: 0px;
}

.ui-menu {
  position: absolute;
  width: 200px;
  z-index: 999999;
}

.switchOnOffLabel.uiStateActive, .uiDayWorking,
.switchOnOffLabel, .uiDayHoliday {
  padding: 1px;
  min-width: 20px;
  width: auto;
  display: inline-block;
  text-align: center;
}

.switchOnOffLabel, .uiDayHoliday {
  background-color: #cecac4 !important;
  padding: 3px !important;
  color: #000 !important;
  border: 1px solid #6d6b69 !important;
}

.switchOnOffLabel.uiStateActive, .uiDayWorking {
  background-color: #178223 !important;
  padding: 3px !important;
  color: #fff !important;
  border: 1px solid #647c4d !important;
}

.switchOnOffLabel .switchOnOff {
  display: none;
}
.switchOnOffLabel span {
  display: none;
}

.uiOnOff.uiStateActive, .switchOnOffLabel {
  padding: 5px;
}

.ui-datepicker-trigger {
  content: url("../../images/ux/calendar.gif");
  margin-left: 2px;
}

.onoffswitch-inner {
  text-align: left;
}

.onoffswitch-inner:before {
  background-color: #188124;
}

/*DocSearchCriteria Style */
.uiHideMuiDatepickerTxt .MuiInput-underline:before, .uiHideMuiDatepickerTxt .MuiInput-underline:hover {
  border: none !important;
}

.uiHideMuiDatepickerTxt .MuiInput-underline:after, .uiHideMuiDatepickerTxt .MuiInput-underline:after:hover {
  border: none;
}

.uiHideMuiDatepickerTxt {
  margin: 0px;
  overflow: hidden;
  width: 50px !important;
}

.uiHideMuiDatepickerTxt input[type=text] {
  visibility: hidden;
  width: 1px;
}

.uiDatePicker {
  margin-top: unset !important;
  margin-bottom: unset !important;
  overflow: hidden;
}
.uiDatePicker .MuiInput-underline {
  border-bottom: none !important;
}
.uiDatePicker .MuiInput-underline::before {
  border-bottom: none !important;
}
.uiDatePicker .MuiSvgIcon-root {
  color: #333333 !important;
}
.uiDatePicker .MuiSvgIcon-root:hover {
  color: #FF4081 !important;
}

.phViewHeading .uiDatePicker svg {
  fill: white;
}

/*end DocSearchCriteria Style */
.searchSelectContainer {
  height: 500px;
}

.MuiPopover-root {
  z-index: 100001 !important;
}

.MuiChip-deleteIcon:hover {
  color: #FF4081 !important; /* Replace with your brand color */
  background-color: transparent; /* Optional: remove background */
}

/* Reactour Styles */
.reactour__helper,
.reactour__helper--is-open,
[accentcolor="#3F92FF"] {
  background: #e3f2fd !important;
  color: #181d20 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 16px rgba(63, 146, 255, 0.12) !important;
}

.reactour__helper,
.reactour__helper--is-open {
  padding: 20px !important;
}

.reactour__close,
.reactour__arrow,
button[aria-label=Close] {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  font-size: large;
  color: #3F92FF !important;
  background: none !important;
  border: none !important;
  z-index: 100002 !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 14px;
}
.reactour__close svg,
.reactour__arrow svg,
button[aria-label=Close] svg {
  width: 14px;
  height: 14px;
}

div[data-tour-elem=controls] {
  justify-content: space-between !important;
}

.reactour__button {
  background: #3F92FF !important;
  color: #fff !important;
  border-radius: 4px !important;
}

button[data-tour-elem=left-arrow],
button[data-tour-elem=right-arrow] {
  background: none !important;
  color: #3F92FF !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  border: none !important;
}
button[data-tour-elem=left-arrow] svg,
button[data-tour-elem=right-arrow] svg {
  stroke: #fff !important;
}

button[data-tour-elem=left-arrow]:disabled,
button[data-tour-elem=right-arrow]:disabled {
  background: #e3e3e3 !important;
  color: #999 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  box-shadow: none !important;
}
button[data-tour-elem=left-arrow]:disabled svg,
button[data-tour-elem=right-arrow]:disabled svg {
  stroke: #999 !important;
}

.reactour__dots,
nav[data-tour-elem=navigation] {
  display: none !important;
}

.reactour__dot,
nav[data-tour-elem=navigation] button {
  background: #3F92FF !important;
  border-radius: 50% !important;
}

[data-tour-elem=badge] {
  background: #3F92FF !important;
  color: #fff !important;
}

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