@charset "UTF-8";
.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

html {
  height: 100%;
  font-family: -apple-system,Helvetica Neue,Roboto,Arial,sans-serif; }

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  src: url("../fonts/Poppins-SemiBold.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  src: url("../fonts/Poppins-Bold.ttf");
  font-display: swap; }

.bodyDisplay {
  height: 100%;
  margin: 0px;
  overflow: hidden; }

.app-content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column; }
  .app-content.app-autolinkmenu .modulListBar {
    display: none; }

.contTop {
  height: 50px;
  display: flex;
  flex-shrink: 0; }

.contWarning {
  background-color: #fcf8e5;
  box-sizing: border-box;
  line-height: 2;
  font-size: 14px;
  padding-left: 10px; }

.contWarningRed {
  background-color: #f79aa5; }

.compLogo {
  display: flex;
  width: 100px;
  justify-content: center;
  align-items: center;
  background-color: #3992de;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset -5px 0 5px -3px rgba(0, 0, 0, 0.1), inset -5px 0 3px -4px rgba(0, 0, 0, 0.15);
  padding: 7px 9px;
  box-sizing: border-box; }

.compLogoFooter {
  display: flex;
  width: 75px;
  justify-content: center;
  align-items: center;
  padding: 7px 9px;
  box-sizing: border-box; }

.compLogoWhite {
  background-color: #FFFFFF; }

.imgCompLogo {
  max-width: 100%;
  /*max-width: 100%;
    max-height: 100%;*/
  object-fit: contain; }

.contBar {
  background-color: #1d2361;
  flex-grow: 1;
  display: flex;
  color: #FFFFFF;
  font-size: 16px; }

.contBar .contMenuInfo {
  display: flex;
  align-items: center;
  color: #ffffff;
  flex-shrink: 0; }

.contBar .contUserInfo {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center; }

.contBar .contCompName {
  border-right: 1px solid white;
  height: 100%;
  display: flex;
  align-items: center;
  padding-right: 25px; }

.contBar .contUserOuter {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%; }

.contBar .contUserInner {
  display: flex;
  cursor: pointer;
  align-items: center;
  padding-left: 12px;
  padding-right: 15px;
  height: 100%;
  width: 100%; }

.contBar .contUserLogo {
  background-image: url("../Images/icons/icons_16px_white_02_person02 16px.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  margin-right: 8px; }

.contBar .contUserButton {
  background-image: url("../Images/icons/icons_12px_white_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px; }

.contBar .contUserName {
  margin-right: 8px; }

.contBar .contUserPopUp {
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  width: 380px;
  top: calc(100% + 5px);
  right: 5px;
  z-index: 4;
  background-color: #FFFFFF;
  color: #2E3849; }

.contBar .contUserPopUp .top {
  border-bottom: 1px solid #d7d7d7;
  padding: 15px;
  display: flex;
  align-items: center; }

.contBar .contUserPopUp .imgLeft {
  border-radius: 25px;
  background-color: #6B74AF;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF; }

.contBar .contUserPopUp .contentRight {
  padding-left: 15px;
  font-size: 14px; }

.contBar .contUserPopUp .name {
  font-weight: bold;
  padding-bottom: 3px; }

.contBar .contUserPopUp .bottom {
  padding: 10px 15px; }

.contBar .contUserPopUp .listItem {
  padding: 5px 0px; }

.contBar .contUserPopUp .listItemText {
  font-size: 15px;
  cursor: pointer; }

.contBar .contUserPopUp .listItemText:hover {
  text-decoration: underline; }

.contBar .contUserPopUp .listItemText:before {
  content: '• '; }

.contBar .contHomeIcon {
  width: 20px;
  height: 20px;
  display: block;
  cursor: pointer;
  margin-right: 16px; }

.ly-modulname {
  font-weight: bold;
  font-size: 16px;
  padding-left: 12px;
  padding-right: 12px; }

.ly-menuname {
  font-size: 16px; }

.contBottom {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  height: 100%;
  position: relative; }

.modulBar {
  position: absolute;
  height: 100%;
  width: 100px;
  background-color: #1d2361;
  background-clip: padding-box;
  box-shadow: inset -5px 0 5px -3px rgba(0, 0, 0, 0.1), inset -5px 0 3px -4px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  z-index: 1; }
  .modulBar .modulSearch {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer; }
    .modulBar .modulSearch .labelSearch {
      display: none;
      font-size: 13px;
      color: #FFFFFF; }
  .modulBar .iconSearch {
    display: none;
    cursor: pointer;
    width: 20px;
    height: 20px; }
  .modulBar.modulBarHovered .labelSearch {
    display: block; }
  .modulBar.modulBarHovered .iconSearch {
    display: block;
    margin-right: 12px; }

.menuSearchResultCont .modulGroupTitle {
  color: rgba(0, 0, 0, 0.87);
  font-size: 24px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4; }

.menuSearchResultCont .modulTitle {
  color: rgba(0, 0, 0, 0.87);
  font-size: 20px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4;
  margin-left: 12px;
  margin-bottom: 5px; }

.menuSearchResultCont .modulContent {
  margin-left: 24px; }

.modulItemCont {
  display: flex;
  width: 100px;
  justify-content: center;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  box-sizing: border-box; }
  .modulItemCont img {
    width: 32px; }

.modulListBar {
  overflow: hidden;
  display: flex;
  flex-direction: column; }

.modulListOuterBar {
  flex-shrink: 0;
  flex-grow: 1;
  height: 0px; }

.modulListInnerBar {
  width: calc(100% + 24px);
  overflow: auto;
  overflow-x: hidden;
  box-sizing: content-box;
  height: 100%; }

.modulItemCont:hover {
  background-color: rgba(255, 255, 255, 0.15); }

.modulIconScrollTop {
  position: absolute;
  background-color: #e7598c;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background-image: url("../Images/icons/icons_12px_white_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(180deg);
  z-index: 2; }

.modulIconScrollBottom {
  position: absolute;
  background-color: #e7598c;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  bottom: 0;
  left: 0;
  background-image: url("../Images/icons/icons_12px_white_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2; }

.mdl-modulName {
  display: none;
  font-size: 13px;
  color: #FFFFFF; }

.modulBar {
  transition-property: width;
  transition-duration: 0.3s;
  width: 100px; }

.modulBarHovered {
  width: 189px;
  z-index: 10; }

.modulBarHovered .modulItemCont {
  width: 189px;
  justify-content: flex-start;
  padding-left: 15px;
  padding-right: 5px; }

.modulBarHovered .imgModulIcon {
  margin-right: 12px;
  flex-shrink: 0; }

.modulBarHovered .mdl-modulName {
  display: block; }

.menuListLoading {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0; }

.loaderMenu {
  top: 50px;
  position: relative;
  left: 50%; }

.loaderMenuSearch {
  top: 10px;
  position: relative;
  left: 50%; }

/*Modul Group*/
.modulGroupItemList {
  display: none;
  overflow: hidden;
  padding-left: 1px;
  margin-left: 8px;
  margin-right: 8px; }

.modulGroupItemList .modulGroupItem.first {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px; }

.modulGroupItemList .modulGroupItem.last {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px; }

.modulGroupItem {
  position: relative;
  cursor: pointer;
  padding: 5px 5px;
  background-color: #FFFFFF;
  border: 1px solid #d7d7d7;
  font-size: 13px;
  color: #2E3849;
  margin-left: -1px;
  box-sizing: border-box;
  width: 58px;
  text-align: center; }

.modulGroupItem.selected {
  background-color: #47BAE2;
  border: 1px solid #47BAE2;
  z-index: 1;
  color: #FFFFFF; }

.modulGroupCurrent {
  font-size: 16px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.87); }

.modulGroupCont {
  box-sizing: border-box;
  height: 50px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

.modulGroupItemList {
  display: flex; }

/*
.modulBar:hover {
    .modulGroupCurrent {
        display: none;
    }

    .modulGroupItemList {
        display: flex;
    }
}
    */
/*Menu List*/
.menuListCont {
  height: 100%;
  width: 525px;
  overflow: auto;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: #f7f7ff;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  padding: 20px 10px;
  box-sizing: border-box;
  z-index: 4; }

.menuListContWide {
  width: 769px; }

.ml-modulName {
  font-weight: bold;
  font-size: 18px;
  color: #2E3849;
  color: #313431;
  margin-bottom: 24px;
  padding-left: 3px; }

.ml-section {
  margin-bottom: 30px; }

.ml-group {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: bold;
  color: #2E3849;
  padding-left: 3px; }

.ml-menuList-cont {
  display: flex;
  flex-wrap: wrap; }

.ml-menuGroup-title {
  font-size: 14px;
  margin-bottom: 5px;
  border-bottom: 1px solid #d7d7d7;
  margin-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px; }

.ml-menuGroup-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; }
  .ml-menuGroup-list .ml-menuItem {
    flex-shrink: 0; }

.ml-menuItem {
  position: relative;
  display: flex;
  width: 230px;
  box-sizing: border-box;
  height: 32px;
  align-items: center;
  background-color: white;
  margin-right: 5px;
  margin-bottom: 5px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer; }
  .ml-menuItem .ml-menuFavourite {
    position: absolute;
    right: 0px;
    top: 1px; }
    .ml-menuItem .ml-menuFavourite:hover .favouriteIcon {
      background-image: url("../Images/icons/bookmark-full.svg");
      background-repeat: no-repeat;
      background-position: center; }
    .ml-menuItem .ml-menuFavourite .favouriteIcon {
      display: none;
      width: 16px;
      height: 16px;
      background-size: 16px; }
  .ml-menuItem:hover .favouriteIcon {
    background-image: url("../Images/icons/bookmark-outline.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: block; }
  .ml-menuItem.isFavourite .favouriteIcon {
    display: block;
    background-image: url("../Images/icons/bookmark-full.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .ml-menuItem.isFavourite:hover .favouriteIcon {
    background-image: url("../Images/icons/bookmark-full.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .ml-menuItem.isFavourite .ml-menuFavourite:hover .favouriteIcon {
    background-image: url("../Images/icons/bookmark-outline.svg");
    background-repeat: no-repeat;
    background-position: center; }

.ml-innerItem {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 15px;
  border-right: 2px solid transparent;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  height: 100%;
  flex-grow: 1;
  box-sizing: border-box;
  padding-right: 12px; }

.ml-menuBorder {
  width: 5px;
  height: 100%;
  background-color: #68CAAF;
  flex-shrink: 0; }

.ml-innerItem:hover {
  border-right: 2px solid #6A88BF;
  border-top: 2px solid #6A88BF;
  border-bottom: 2px solid #6A88BF; }

.ml-menuName {
  flex-grow: 1;
  color: #2E3849;
  font-size: 13px; }

.ml-menuAdd:hover {
  opacity: 0.8; }

.ml-menuItem.no-url {
  cursor: default; }

.ml-menuItem.no-url .ml-menuName {
  color: orange; }

/*End Menu List*/
/*View Area*/
.viewAreaCont {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #F4F5F8; }

.menuViewCont {
  flex-grow: 1;
  background-color: #F4F5F8;
  overflow: hidden;
  position: relative;
  height: 100%; }

/*End View Area*/
/*Tabsheet Menu*/
.tsMenuCont {
  display: flex;
  height: 30px;
  background-color: rgba(56, 165, 232, 0.08);
  padding-left: 12px;
  overflow: hidden;
  flex-shrink: 0; }

.tsMenuItem {
  width: 140px;
  box-sizing: border-box;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.87);
  cursor: pointer;
  overflow: hidden;
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  border: 1px solid transparent;
  margin-right: 8px; }

.tsMenuItem:focus {
  border: 1px dotted rgba(0, 0, 0, 0.12); }

.tsMenuItemActive {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 600;
  line-height: 1.4;
  background-color: #F4F5F8; }

.tsMenuItemInactive:hover {
  background-color: rgba(56, 165, 232, 0.24); }

.tsMenuName {
  padding-right: 10px;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.tsMenuClose {
  display: flex;
  padding: 2px;
  align-items: center; }

.tsMenuItemInactive .tsMenuClose:hover {
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.5); }

.tsMenuItemActive .tsMenuClose:hover {
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.1); }

/*End Tabsheet Menu*/
.menuContentContainer {
  height: 100%; }

.contLyDisplay {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto; }

.contLyInnerDisplay {
  height: calc(100% - 27px);
  display: flex;
  flex-direction: column;
  overflow: auto; }

.contLyHelp {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto; }

.contLyInnerHelp {
  height: calc(100% - 27px);
  display: flex;
  flex-direction: column;
  overflow: auto; }

.contLyInnerDisplayNoFooter {
  height: 100%; }

.displayContent {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 0px; }

.displayContent.scrolled {
  padding-bottom: 28px; }

/*RibbonHd*/
.contRibbonHd {
  display: flex;
  align-items: center;
  padding: 8px 20px;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
  background-color: #F4F5F8;
  position: sticky;
  border: 1px solid transparent;
  top: 0px; }
  .contRibbonHd .contRibbonCustomComponent {
    display: flex;
    align-items: center; }
  .contRibbonHd .contRibbonCustomComponent[data-position="3"] .rbCstCompCont {
    padding-left: 0; }

.contRibbonHd .statusLogo {
  width: 10px;
  height: 10px;
  border-radius: 25px;
  margin-right: 5px; }

.contRibbonHd .calendarSymbol {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url("../Images/icons/icons_calendar 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.contRibbonHd .otherSymbol {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url("../Images/icons/icons_gear 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.contRibbonHd .filterSymbol {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url("../Images/icons/icons_filter 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px; }

.contRibbonHd .ribbonPropItemCont.dataOptionActive {
  background-color: #6B74AF; }
  .contRibbonHd .ribbonPropItemCont.dataOptionActive .ribbonOptionText {
    color: #FFFFFF; }
  .contRibbonHd .ribbonPropItemCont.dataOptionActive .filterSymbol {
    background-image: url("../Images/icons/icons_filter 16 px white.png");
    background-repeat: no-repeat;
    background-position: center; }

.contRibbonHd .searchFieldCont {
  padding-right: 3px; }

.contRibbonHd .searchFieldCont.narrow {
  position: absolute;
  top: 44px;
  z-index: 3;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  background: #F4F5F8;
  padding: 20px;
  border: 1px solid #d7d7d7; }

.contRibbonHd .tabSheetHdCont {
  width: 100%;
  padding-bottom: 10px; }

.contRibbonHd .rbCstCompCont {
  padding-left: 5px;
  padding-right: 5px; }

.contRibbonHd.ribbonAndTabsheetSideBySide {
  flex-direction: row; }
  .contRibbonHd.ribbonAndTabsheetSideBySide .tabSheetHdCont {
    width: auto;
    flex-shrink: 0;
    padding-bottom: 0px; }

.contRibbonHd.ribbonDataMaster {
  background-color: #F4F5F8; }

.contRibbonHd.scrolled {
  border-bottom: 1px solid #d7d7d7;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  background-color: rgba(244, 245, 248, 0.8); }

.contRibbonProperty {
  display: inline-flex;
  border-radius: 2px;
  background-color: #ffffff;
  border: 1px solid #d7d7d7;
  height: 32px;
  align-items: center;
  position: relative;
  box-sizing: border-box; }

.contRibbonProperty:hover {
  border: 1px solid #38A5E8; }

.contRibbonProperty.disabled {
  opacity: 0.5; }
  .contRibbonProperty.disabled:hover {
    cursor: default;
    border: 1px solid #d7d7d7; }
  .contRibbonProperty.disabled .ribbonPropItemContActive {
    cursor: default; }

.contRibbonSection {
  margin-bottom: 15px; }

.contRibbonSectionTtl {
  font-size: 12px;
  font-weight: bold;
  color: #2E3849;
  margin-bottom: 5px; }

.contRibbonContent {
  position: absolute;
  top: calc(100% + 8px);
  box-sizing: border-box;
  width: 515px;
  background-color: #F4F5F8;
  border: 1px solid #d7d7d7;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  z-index: 1; }

.contRibbonInnerContent {
  padding: 12px; }

.contRibbonButtonContainer {
  border-top: 1px solid #d7d7d7;
  height: 42px;
  padding-right: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center; }

.contRibbonPropOuter {
  position: relative;
  flex-shrink: 0; }

.ribbonPropItemCont {
  display: flex;
  padding: 0px 12px;
  box-sizing: border-box;
  height: 100%;
  align-items: center; }

.ribbonPropItemCont {
  border-right: 1px solid #d7d7d7; }

.ribbonPropItemCont.ribbonPropItemContLast {
  border-right: none; }

.ribbonPropItemContActive {
  cursor: pointer; }

.rib-separator {
  width: 10px;
  flex-shrink: 0; }

.rib-separator-line {
  height: 23px;
  width: 1px;
  margin-left: 5px;
  margin-right: 5px;
  border-left: 1px solid #C4C4C4;
  flex-shrink: 0; }

.sep-colon {
  margin-right: 2px; }

.contRibbonSearch {
  position: relative;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end; }

.rib-other-cont {
  position: relative; }

.rib-other-dropdown {
  position: absolute;
  z-index: 1;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 500px;
  overflow: auto;
  width: 230px;
  background-color: #F4F5F8;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  border: 1px solid #d7d7d7;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box; }
  .rib-other-dropdown.inForeignObject {
    position: static;
    width: 180px; }
    .rib-other-dropdown.inForeignObject .rib-other-item {
      padding-top: 8px;
      padding-bottom: 8px; }
  .rib-other-dropdown.styleESS {
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
    .rib-other-dropdown.styleESS .rib-other-item:not(:last-child) {
      border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
    .rib-other-dropdown.styleESS .rib-other-item:hover {
      border-top: 1px solid transparent;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent; }
    .rib-other-dropdown.styleESS .rib-other-item:hover:last-child {
      border-bottom: 1px solid transparent; }

.rib-display-outercont {
  display: flex;
  flex-shrink: 0; }

@media only screen and (max-height: 800px) {
  .rib-other-dropdown {
    max-height: 400px; } }

.rib-other-dropdown-inner {
  height: 100%;
  background-color: #F4F5F8;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  border: 1px solid #d7d7d7;
  width: 230px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  overflow: visible;
  pointer-events: initial; }

.rib-import-option {
  right: 240px; }

.rib-other-dropdown .rib-other-separator:last-child {
  display: none; }

.rib-other-item {
  width: 100%;
  font-size: 13px;
  color: #2E3849;
  padding: 10px 3px;
  cursor: default;
  box-sizing: border-box;
  border: 1px solid transparent; }

.rib-other-item:not(.rib-other-item-inactive) {
  cursor: pointer; }

.rib-other-item:not(.rib-other-item-inactive):hover {
  border: 1px solid #38A5E8; }

.rib-other-item-inactive {
  cursor: default;
  color: #C4C4C4; }

.rib-other-separator {
  width: 100%;
  height: 1px;
  border-top: 1px solid #d7d7d7;
  box-sizing: border-box; }

/*End RibbonHd*/
/*Form Search*/
.popUpFormSearch {
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2; }

.popSearchInner {
  width: 90%;
  height: 80%;
  background: #F4F5F8;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  border: 1px solid #d7d7d7;
  display: flex;
  flex-direction: column; }

.popSearchInner .title {
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #d7d7d7;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0; }

.popSearchInner .search {
  flex-shrink: 0; }

.popSearchInner .title-text {
  flex-grow: 1; }

.popSearchInner .grid {
  flex-grow: 1;
  border-top: 1px solid #d7d7d7;
  height: 0;
  overflow: hidden; }

.popSearchInner .grid .cp-gridLike {
  margin-top: -1px; }

.popSearchInner .buttonCont {
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 10px;
  display: flex;
  justify-content: flex-end; }

.cp-searchMaster {
  width: 500px;
  height: 768px; }
  .cp-searchMaster .title-close {
    flex-shrink: 0;
    height: 18px;
    width: 18px;
    cursor: pointer;
    margin: auto;
    background-image: url("../Images/icons/icons_cross 12 px grey.png");
    background-repeat: no-repeat;
    background-position: center; }

.buttoneditTableStyle {
  margin-left: -1px; }

/*End Form Search*/
.contLyEntry {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; }

.entryContent {
  flex-grow: 1;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; }

.entryDetail {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%; }

.entrySaveCont {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  border-top: 1px solid #d7d7d7;
  position: relative;
  align-items: center;
  margin-top: -1px; }

/*Entry Option*/
.saveOptionCont {
  z-index: 1;
  position: absolute;
  transform: translateY(-100%);
  background-color: #F4F5F8;
  right: 10px;
  top: -15px;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  padding: 17px;
  font-size: 14px; }

.saveOptionCont .title {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 15px; }

.saveOptionCont .statusTitle {
  padding-bottom: 5px; }

.saveOptionCont .actionCont {
  border-top: 3px solid #009e73;
  box-sizing: border-box;
  width: 100%;
  background-color: white;
  padding: 10px; }

.saveOptionCont .actionTitle {
  padding-bottom: 5px; }

.saveOptionCont .actionItem {
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #d7d7d7;
  cursor: pointer; }

.saveOptionCont .actionItem:hover {
  border-bottom: 1px solid #38A5E8; }

.entryComponentContainer {
  border: 1px solid #d7d7d7;
  padding: 10px; }

/*End Entry Option*/
.ribbonNonEditMode {
  display: flex;
  width: 100%; }

.ribbonEditMode {
  display: flex;
  width: 100%;
  justify-content: flex-end; }

/*height also refer to coSetShowFooter*/
.displayFooterHome {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  box-sizing: border-box;
  color: #2E3849;
  font-size: 12px;
  position: absolute;
  width: calc(100% - 28px);
  bottom: 0;
  z-index: 1;
  background-color: #F4F5F8;
  border-top: 2px solid #ededed;
  width: 100%; }

.displayFooterHome .footerLeft {
  flex-grow: 1; }

.displayFooterHome .footerRight {
  align-items: center;
  flex-shrink: 0;
  margin-left: 20px;
  /*margin-right: 20px;*/
  display: flex; }

.displayFooter {
  display: flex;
  padding: 2px 8px;
  box-sizing: border-box;
  color: #2E3849;
  font-size: 12px;
  /*width: calc(100% - 28px);*/
  bottom: 0;
  z-index: 1;
  background-color: #F4F5F8;
  flex-shrink: 0;
  display: flex;
  align-items: center; }

.displayFooter .footerLeft {
  flex-grow: 1; }

.displayFooter .footerRight {
  align-items: center;
  flex-shrink: 0;
  margin-left: 20px;
  /*margin-right: 20px;*/
  display: flex; }

.displayFooter2 {
  display: flex;
  padding: 2px 8px;
  box-sizing: border-box;
  color: #2E3849;
  font-size: 12px;
  /*width: calc(100% - 28px);*/
  bottom: 0;
  z-index: 1;
  background-color: #F4F5F8;
  flex-shrink: 0;
  display: flex;
  align-items: center; }

.displayFooter2 .footerLeft {
  flex-grow: 1; }

.displayFooter2 .footerRight {
  flex-shrink: 0;
  margin-left: 20px;
  /*margin-right: 20px;*/
  display: flex;
  align-items: center; }

.footerEntry {
  position: absolute;
  left: 8px;
  color: #2E3849;
  font-size: 12px; }

.formSearchContainer,
.formSearchMasterContainer {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
  top: 0;
  left: 0; }

.formSearchContainer .popSearchInner {
  position: relative;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  height: 85%; }

.formSearchContainer .search {
  display: flex; }

.formSearchContainer .periodFilterSection {
  display: flex;
  margin-left: 25px;
  align-items: center; }

.formSearchContainer .periodFilterLabel {
  flex-shrink: 0;
  color: #2E3849;
  margin-right: 10px;
  font-size: 13px; }

.formSearchContainer .periodFilterSearch {
  margin-left: 10px; }

.formSearchMasterContainer .popSearchInner {
  position: relative;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  height: 85%; }

@media (max-width: 768px) {
  .formSearchMasterContainer .popSearchInner {
    width: 99%;
    height: 99%; } }

.cp-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vw;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: none; }

/*frmDataMaster*/
.frmDataMaster .contRibbonMaster {
  display: flex; }

/***/
/*Numbering Layout*/
.contLyNumbering {
  display: flex;
  height: 100%;
  color: #2E3849; }
  .contLyNumbering .lNum-left {
    width: 230px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-right: 1px solid #d7d7d7;
    height: 100%;
    display: flex;
    flex-direction: column; }
  .contLyNumbering .lNum-tsOuter {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    flex-shrink: 0;
    height: 0; }
  .contLyNumbering .lNum-tsInner {
    width: calc(100% + 21px);
    overflow: auto;
    height: 100%; }
  .contLyNumbering .lNum-tsInner2 {
    width: 230px; }
  .contLyNumbering .lNum-right {
    flex-grow: 1;
    height: 100%;
    overflow: hidden; }
  .contLyNumbering .dNumberingContainer {
    height: 100%; }
  .contLyNumbering .dNumberingContainer > div {
    height: 100%; }

.lNumC-container {
  height: 100%;
  display: flex;
  flex-direction: column; }

.lNumC-container .lNumC-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding-left: 8px;
  padding-right: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  box-sizing: border-box;
  border-top: 1px solid #d7d7d7;
  position: relative;
  align-items: center;
  margin-top: -1px;
  min-height: 45px; }

.lNumC-container .lNumC-footer .copyright {
  flex-grow: 1;
  color: #2E3849;
  font-size: 12px; }

.lNumC-container .lNumC-footer .lNumC-save {
  flex-shrink: 0; }

.lNumC-container .lNumC-contentContainer {
  box-sizing: border-box;
  padding: 10px 20px;
  flex-grow: 1;
  overflow: auto; }

.lNumC-container .lNumC-footer {
  flex-shrink: 0; }

.lNumC-container .lNumC-row {
  display: flex;
  margin-bottom: 25px; }

.lNumC-container .row-spaceBetween {
  justify-content: space-between; }

.lNumC-container .row-shadowed {
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 0; }

.lNumC-container .boxNumbering, .lNumC-container .lNumC-autoNumber, .lNumC-container .lNumC-reuseNumber {
  width: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  padding: 0px 20px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  height: 59px; }

.lNumC-container .boxNumbering .label, .lNumC-container .lNumC-autoNumber .label, .lNumC-container .lNumC-reuseNumber .label {
  font-size: 14px !important; }

.lNumC-container .lNumC-reuseNumber {
  margin-left: -1px; }

.lNumC-container .boxNumbering2, .lNumC-container .lNumC-numFormat, .lNumC-container .lNumC-numSimulation {
  width: 48%;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  padding: 20px;
  background-color: #FFFFFF;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 14px;
  align-items: flex-start; }

.lNumC-container .notUseReuseNumber .lNumC-autoNumber {
  width: 100%; }

.lNumC-container .numBoxLabel {
  padding-right: 10px;
  box-sizing: border-box; }

.lNumC-container .numBoxValue {
  word-wrap: break-word;
  overflow: hidden; }

.lNumC-container .lNumC-title {
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 20px;
  display: flex; }

.lNumC-container .lNumC-titleText {
  flex-grow: 1; }

.lNumC-container .lNumC-titleButtonCont .cp-container {
  position: relative; }

.lNumC-container .num-configText {
  padding-right: 10px;
  box-sizing: border-box;
  width: 30%; }

.lNumC-container .num-configComponent {
  width: 70%;
  display: flex;
  align-items: center; }

.lNumC-container .num-rowCompCont {
  width: 100%;
  margin-bottom: -5px; }
  .lNumC-container .num-rowCompCont.flexWrap {
    display: flex;
    flex-wrap: wrap; }

.lNumC-container .num-rowComponent {
  display: flex;
  align-items: center;
  margin-bottom: 5px; }

.lNumC-container .charText {
  padding-left: 5px; }

.lNumC-container .alwRun-cont {
  display: flex;
  justify-content: center; }

.lNumC-container .segmentName {
  font-weight: bold; }

.lNumC-container .numberingGrid {
  margin-bottom: 15px; }

.lNumC-container .numberingGrid .headerCol {
  font-weight: bold; }

.lNumC-container .separator-cont {
  width: 100%;
  display: flex;
  justify-content: center; }

.lNumC-container .fromCol {
  overflow: visible !important; }

.lNumC-container .separatorCol {
  overflow: visible !important; }

.lNumC-container .configCol {
  overflow: visible !important; }

.lNumC-container .addSegmentCont {
  display: flex;
  margin-top: 15px;
  margin-bottom: 15px; }

/**/
/*Layout Form Detail*/
.lyFormDetail {
  flex-grow: 1;
  display: flex;
  margin-left: 20px;
  margin-right: 20px;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 0;
  margin-bottom: 3px;
  margin-top: 3px;
  color: #2E3849;
  overflow: hidden;
  height: 100%; }

.lyFormDetail .lfd-left {
  box-sizing: border-box;
  width: 240px;
  border-right: 1px solid #d7d7d7;
  flex-shrink: 0;
  overflow: auto; }

.lyFormDetail .lfd-right {
  box-sizing: border-box;
  background-color: #FFFFFF;
  flex-grow: 1;
  overflow: auto; }

.lyFormDetail .lfd-innerRight {
  padding: 28px;
  box-sizing: border-box; }

.lyFormDetail.narrowPadding .lfd-innerRight {
  padding: 5px; }

.lyFormDetail.sectionRightNoPadding .lfd-innerRight {
  padding: 0px;
  box-sizing: border-box; }

.lyFormDetail.noPadding {
  margin: 0; }

.lyFormDetail .header-container {
  box-sizing: border-box;
  padding-top: 28px;
  padding-bottom: 14px;
  padding-left: 28px;
  padding-right: 28px;
  border-bottom: 1px solid #d7d7d7; }

.lyFormDetail .header1 {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px; }

.lyFormDetail .header2 {
  font-size: 12px;
  font-weight: bold; }

.lyFormDetail .lfd-itemRow {
  display: flex;
  margin-bottom: 15px; }

.lyFormDetail .lfd-itemRowFlat {
  margin-bottom: 15px; }

.lyFormDetail .itemRow1 {
  display: flex;
  line-height: 1.5;
  padding: 5px 8px; }

.lyFormDetail .itemRow1 .rowLeft {
  flex-grow: 1;
  padding-right: 10px;
  font-weight: bold;
  font-size: 15px; }

.lyFormDetail .itemRow1 .rowRight {
  flex-shrink: 0;
  font-size: 15px; }

.lyFormDetail .itemRow1Container {
  padding: 0px 15px;
  box-sizing: border-box; }

.lyFormDetail .itemRow1Line {
  height: 1px;
  border-top: 1px solid #d7d7d7;
  box-sizing: border-box; }

.lyFormDetail .lfd-itemColFixed {
  flex-shrink: 0; }

.lyFormDetail .lfd-itemCol {
  margin-left: 10px;
  margin-right: 10px; }

.lyFormDetail .lfd-itemCol.first {
  margin-left: 0px; }

.lyFormDetail .lfd-itemCol.last {
  margin-right: 0px; }

.lyFormDetail .labelNoWrap {
  white-space: nowrap; }

.lyFormDetail .outGbContainer {
  width: 100%; }

.lyFormDetail .itemRow2 {
  display: flex; }

.lyFormDetail .itemRow2Col {
  line-height: 1.5; }

.lyFormDetail .itemRow2Col.first {
  margin-right: 10px; }

.lyFormDetail .itemRow2Col.last {
  margin-left: 10px; }

.lyFormDetail .itemRow2ColFixed {
  flex-shrink: 0; }

.lyFormDetail .itemRow2InnerCol {
  display: flex;
  margin-right: 5px;
  align-items: center; }

.colAttchLabel {
  font-weight: bold;
  margin-bottom: 5px; }

.transColumnarContFormDetail {
  padding: 15px !important; }

.transColumnarContFormDisplayDetail {
  padding-top: 14px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  padding-bottom: 0px !important; }

.innerItemCont {
  padding: 15px; }

.itemRow3Cont {
  display: table; }

.itemRow3 {
  display: table-row; }

.itemRow3Data {
  display: table-cell;
  font-size: 13px;
  vertical-align: middle; }

.itemRow3Data.left {
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold; }

.itemRow3 .itemRow3Data {
  padding-bottom: 15px;
  border-bottom: 1px solid #d7d7d7; }

.itemRow3:not(.first) .itemRow3Data {
  padding-top: 10px; }

.itemRow3Data.right {
  padding-left: 10px;
  padding-right: 10px;
  width: 100%; }

.bulletItem {
  display: flex;
  align-items: center; }

.bulletItem::before {
  background-image: url("../Images/icons/bullet.svg");
  background-repeat: no-repeat;
  background-position: center;
  content: ' ';
  width: 15px;
  height: 15px;
  display: inline-block;
  background-size: 15px;
  margin-right: 3px; }

/***/
/*Subscription*/
.lySubscription {
  display: flex;
  height: 100%;
  overflow: auto;
  color: #2E3849;
  /*Label*/
  /***/
  /*Margin*/
  /***/ }
  .lySubscription .subs-left {
    box-sizing: border-box;
    width: calc(100% - 350px);
    padding-right: 5px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px; }
  .lySubscription .subs-right {
    box-sizing: border-box;
    width: 350px;
    padding-left: 5px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px; }
  .lySubscription .whiteBox {
    border: 1px solid #d7d7d7;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 0;
    background-color: #FFFFFF;
    box-sizing: border-box;
    margin-bottom: 10px; }
  .lySubscription .paddingBox1 {
    padding: 20px; }
  .lySubscription .paddingBox2 {
    padding: 15px; }
  .lySubscription .header1 {
    display: flex;
    margin-bottom: 25px; }
    .lySubscription .header1 .hd-left {
      width: 60%;
      padding-right: 8px; }
    .lySubscription .header1 .hd-right {
      width: 40%; }
    .lySubscription .header1 .boxGrey1 {
      border: 1px solid #d7d7d7;
      background-color: #F4F5F8;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 10px; }
    .lySubscription .header1 .boxWhite1 {
      border: 1px solid #d7d7d7;
      border-top: none;
      display: flex;
      justify-content: center;
      padding: 15px 10px; }
  .lySubscription .label1 {
    font-size: 24px;
    line-height: 1.5;
    margin-top: 5px; }
  .lySubscription .label2 {
    font-size: 17px; }
  .lySubscription .label3 {
    font-size: 14px;
    line-height: 1.5; }
  .lySubscription .label4 {
    font-size: 20px;
    margin-top: 5px; }
  .lySubscription .label5 {
    font-size: 14px;
    color: #2C61D7;
    cursor: pointer; }
  .lySubscription .label6 {
    font-size: 14px; }
  .lySubscription .label7 {
    font-size: 13px; }
  .lySubscription .label8 {
    font-size: 13px;
    line-height: 1.5; }
  .lySubscription .labelBold {
    font-weight: bold; }
  .lySubscription .marginBottom1 {
    margin-bottom: 20px; }
  .lySubscription .marginBottom2 {
    margin-bottom: 10px; }
  .lySubscription .marginBottom3 {
    margin-bottom: 15px; }
  .lySubscription .marginBottom4 {
    margin-bottom: 7px; }
  .lySubscription .marginRight1 {
    margin-right: 10px; }
  .lySubscription .marginTop1 {
    margin-top: 20px; }
  .lySubscription .btn-list {
    display: flex; }
  .lySubscription .header2 {
    display: flex;
    margin-bottom: 10px; }
    .lySubscription .header2 .left {
      flex-grow: 1;
      padding-left: 7px; }
    .lySubscription .header2 .right {
      flex-shrink: 0;
      padding-right: 7px; }
  .lySubscription .boxGrey2 {
    background-color: #F4F5F8;
    padding: 15px 8px; }
  .lySubscription .itemRow1 {
    display: flex; }
    .lySubscription .itemRow1 .rowLeft {
      flex-grow: 1; }
    .lySubscription .itemRow1 .rowRight {
      flex-shrink: 0; }
  .lySubscription .boxGrey3 {
    display: flex;
    background-color: #F4F5F8;
    border: 1px solid #d7d7d7;
    padding: 15px 10px;
    align-items: center; }
    .lySubscription .boxGrey3 .left {
      flex-grow: 1;
      padding-right: 10px; }
    .lySubscription .boxGrey3 .right {
      flex-shrink: 0; }
  .lySubscription .btn-list2 {
    display: flex;
    justify-content: space-between;
    margin-top: 5px; }
  .lySubscription .btn-list3 {
    display: flex; }
  .lySubscription .boxWhite2Cont {
    display: flex;
    flex-wrap: wrap;
    margin: -3px; }
    .lySubscription .boxWhite2Cont .boxWhite2 {
      width: calc(50% - 6px);
      box-sizing: border-box;
      border: 1px solid #d7d7d7;
      display: flex;
      align-items: center;
      padding: 10px;
      margin: 3px; }
      .lySubscription .boxWhite2Cont .boxWhite2 .icon {
        margin-right: 10px; }
      .lySubscription .boxWhite2Cont .boxWhite2 .label {
        padding-right: 5px;
        font-size: 13px;
        font-weight: bold; }
  @media only screen and (max-width: 992px) {
    .lySubscription {
      flex-direction: column; }
      .lySubscription .subs-left {
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px; }
      .lySubscription .subs-right {
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px; } }

/***/
.rib-other-item {
  font-weight: normal; }

.fe-2-cont .fe-2-innerCont {
  padding: 36px 80px 40px 80px; }

.fe-2-cont .groupHeader {
  font-size: 16px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4;
  padding-bottom: 12px; }

.coModulOpen {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1d2361;
  box-shadow: inset -5px 0 5px -3px rgba(0, 0, 0, 0.1), inset -5px 0 3px -4px rgba(0, 0, 0, 0.1); }

.menuNavigation {
  display: flex;
  align-items: center;
  padding-left: 12px; }
  .menuNavigation .current {
    font-weight: bold;
    font-size: 18px; }
  .menuNavigation .sep {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 14px; }
  .menuNavigation .nonCurrent {
    cursor: pointer;
    font-size: 14px; }

.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

:root {
  --vacancyLeftBasis: 35; }

html {
  height: 100%; }

body {
  margin: 0px;
  height: 100%;
  font-family: Arial; }

/* 
    Jika Height diberi 100%, HRCloud menu OD - Location jadi muncul Scroll setelah memilih Grup Perusahaan
    Height 100% muncul Scroll apabila container dari dxGridContainer adalah overflow:visible dan container merupakan turunan lebih dari 1 flexbox column.
*/
.dxGridContainer {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  overflow: auto;
  flex-direction: column;
  flex-grow: 1; }

.dxGridContainerEntry {
  box-sizing: border-box;
  flex-grow: 1;
  overflow: auto;
  height: 100%;
  display: flex;
  flex-direction: column; }

/*Columnar*/
.detHeaderCont {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  padding-bottom: 22px; }
  .detHeaderCont .label {
    white-space: nowrap; }
  .detHeaderCont.noPadH {
    padding-left: 0px;
    padding-right: 0px; }
  .detHeaderCont.noPadV {
    padding-bottom: 0px; }

.detHeaderCont > .innerCont {
  background: #ffffff;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 20px 10px 20px;
  border: 1px solid #d7d7d7;
  display: flex;
  justify-content: space-between;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 0;
  position: relative; }

.detHeaderCont.bgTransparent > .innerCont {
  background: transparent; }

.columnar-font, .statusStr, .detHeaderCont .label, .detHeaderCont .separator, .detHeaderCont .data, .detHeaderCont .statusStr, .detHeaderCont .collapsedCont .label, .displayColumnar .label, .displayColumnar .separator, .displayColumnar .data {
  font-size: 12px;
  color: #2E3849; }

.statusCont {
  display: flex;
  align-items: center; }
  .statusCont.statusContFull {
    width: 100%; }
  .statusCont .labelLeft {
    flex-grow: 1;
    padding-right: 8px;
    box-sizing: border-box; }

.statusLogo {
  width: 10px;
  height: 10px;
  border-radius: 25px;
  margin-right: 5px;
  flex-shrink: 0; }

.statusStr {
  font-weight: normal; }

.statusCont.statusGridColumn .statusStr {
  font-size: inherit;
  overflow: hidden;
  text-overflow: ellipsis; }

.clickable {
  color: #2C61D7; }

.clickable:hover {
  text-decoration: underline;
  cursor: pointer; }

.detHeaderCont .column {
  display: table; }

.detHeaderCont .row {
  display: table-row; }

.detHeaderCont .rowBold {
  font-weight: bold; }

.detHeaderCont .label {
  display: table-cell;
  color: #5A6881;
  padding: 5px 0 5px 0;
  padding-right: 10px; }

.detHeaderCont.nonBoxSingleRow .expandedCont .label {
  font-size: 14px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important; }

.detHeaderCont .innerContSingleRow .expandedCont .label {
  font-size: 13px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.detHeaderCont .clickable {
  color: #2C61D7; }

.detHeaderCont .clickable:hover {
  text-decoration: underline;
  cursor: pointer; }

.detHeaderCont .separator {
  display: table-cell;
  padding: 5px 0 5px 0;
  padding-right: 3px; }

.detHeaderCont .data {
  display: table-cell;
  padding: 5px 0 5px 0;
  vertical-align: top;
  word-wrap: break-word;
  white-space: pre-wrap; }

.detHeaderCont .dataBold {
  font-weight: bold; }

.detHeaderCont .dataNull {
  color: #5A6881 !important; }

.detHeaderCont .outerColumn {
  padding-right: 10px;
  box-sizing: border-box;
  flex-shrink: 1; }

.detHeaderCont .outerColumn:not(.first-col) {
  padding-left: 10px; }

.detHeaderCont .statusCont:not(.row) {
  display: flex;
  align-items: center; }

.detHeaderCont .row.statusCont {
  display: table-row;
  align-items: flex-start; }

.detHeaderCont .row.statusCont .data {
  display: flex;
  align-items: center; }

.detHeaderCont .statusLogo {
  width: 10px;
  height: 10px;
  border-radius: 25px;
  margin-right: 5px; }

.detHeaderCont .outerColumnHd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative; }

.detHeaderCont .columnHd > .transHd {
  display: flex; }

.detHeaderCont .outerColumnHd:not(.first-col) {
  padding-left: 10px; }

.detHeaderCont .outerColumn.last-col {
  padding-right: 0px; }

.detHeaderCont.borderSepRight .outerColumnBorder:not(.last-col), .detHeaderCont.borderSepRight .innerContSingleRow .outerColumnHd:not(.last-col), .detHeaderCont.borderSepRight .innerContSingleRow .outerColumn:not(.last-col) {
  border-right: 1px solid #d7d7d7; }

.detHeaderCont.borderSepLeft .outerColumnBorder:not(.first-col), .detHeaderCont.borderSepLeft .innerContSingleRow .outerColumnHd:not(.first-col), .detHeaderCont.borderSepLeft .innerContSingleRow .outerColumn:not(.first-col) {
  border-left: 1px solid #d7d7d7; }

.detHeaderCont .transHd {
  font-size: 16px;
  line-height: 1.5;
  font-weight: bold;
  color: #2E3849; }

.detHeaderCont .transHd .dataTransHd {
  font-size: 16px;
  line-height: 1.5;
  font-weight: bold;
  color: #2E3849;
  word-wrap: break-word; }

.detHeaderCont .transHd2 {
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: bold;
  flex-direction: row !important;
  color: #2E3849; }
  .detHeaderCont .transHd2 .labelTransHd2 {
    margin-right: 3px; }

.detHeaderCont.noExpandCollapse .expandedCont {
  width: 100% !important; }

.detHeaderCont .transHd3 {
  flex-direction: row !important;
  align-items: center; }

.detHeaderCont .lbhd3 {
  font-size: 14px;
  line-height: 1.5; }

.detHeaderCont .collExpandContainer {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 20px;
  width: 20px;
  box-sizing: border-box;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center; }

.detHeaderCont .collExpandContainer.expanded {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.detHeaderCont .collExpandContainer.collapsed {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_left 12px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.detHeaderCont .expandedCont {
  display: flex;
  width: calc(100% - 20px); }

.detHeaderCont .collapsedCont {
  display: flex;
  width: calc(100% - 20px); }

.detHeaderCont .collapsedCont .item {
  display: flex;
  padding-right: 30px;
  align-items: center; }

.detHeaderCont .collapsedCont .itemHd {
  padding-right: 40px; }

.detHeaderCont .collapsedCont .transHdCollapsed {
  padding-bottom: 0px;
  white-space: nowrap; }

.detHeaderCont .collapsedCont .labelCollapsed {
  white-space: nowrap; }

.detHeaderCont .collapsedCont .data {
  min-width: 100px; }

.detHeaderCont .columnarLabel {
  font-size: 14px;
  color: #2E3849;
  font-weight: bold;
  margin-bottom: 5px; }

.detHeaderCont .columnarValue {
  font-size: 13px;
  color: #2E3849;
  margin-top: 4px; }

.detHeaderCont .label.hasOpt {
  display: flex;
  align-items: center; }

.detHeaderCont .label .innerLabel {
  flex-grow: 1; }

.detHeaderCont .row.usePrevNext {
  position: relative; }

.detHeaderCont .row.usePrevNext {
  /*
        .dataTransHd {
            width: calc(100% - 70px);
        }
            */ }
  .detHeaderCont .row.usePrevNext .label {
    width: calc(100% - 70px); }
  .detHeaderCont .row.usePrevNext .data {
    width: calc(100% - 70px); }

.detHeaderCont .prevNextCont {
  position: absolute;
  top: 0px;
  right: 4px; }

.detHeaderCont .prevNextContCollapsed {
  position: relative;
  margin-left: 8px; }

.detHeaderCont .outerColumn {
  position: relative; }
  .detHeaderCont .outerColumn.hasPrevNext .column {
    max-width: calc(100% - 70px); }

.detHeaderTs {
  margin-top: 10px; }

.detHeaderCont .innerContSingleRow {
  padding-top: 20px;
  padding-bottom: 20px; }

.detHeaderCont .innerContSingleRow .column {
  display: block; }

.detHeaderCont .innerContSingleRow .row {
  display: flex;
  flex-direction: column; }

.detHeaderCont .innerContSingleRow .separator {
  display: none; }

.detHeaderCont .innerContSingleRow .label {
  font-weight: bold;
  color: #2E3849;
  padding-bottom: 5px; }

.detHeaderCont.borderSepLeft .innerContSingleRow .outerColumnHd.nonBorder {
  border-left: none; }

.detHeaderCont.borderSepLeft .innerContSingleRow .outerColumn.nonBorder {
  border-left: none; }

.detHeaderCont.borderSepRight .innerContSingleRow .outerColumnHd.nonBorder {
  border-right: none; }

.detHeaderCont.borderSepRight .innerContSingleRow .outerColumn.nonBorder {
  border-right: none; }

.detHeaderCont .collapsedCont .separator {
  display: block; }

.detHeaderCont .collapsedCont .label {
  font-weight: normal;
  display: table-cell;
  padding-right: 15px;
  color: #5A6881; }

.detHeaderCont.columnar-collapsed .innerContSingleRow {
  padding-top: 10px;
  padding-bottom: 10px; }

.valueHeight1 {
  padding-top: 0px !important;
  line-height: 2; }

.detHeaderCont.nonBox {
  padding: 0; }

.detHeaderCont.nonBox > .innerCont {
  box-shadow: none; }

.detHeaderCont.nonBox .collExpandContainer {
  right: 0px;
  top: 0px; }

.detHeaderCont.nonBox .innerCont {
  padding: 0;
  border: none; }

.detHeaderCont.nonBoxSingleRow {
  padding: 0; }

.detHeaderCont.nonBoxSingleRow .innerCont {
  padding: 0;
  border: none; }

.detHeaderCont.nonBoxSingleRow > .innerCont {
  box-shadow: none; }

.detHeaderCont.nonBoxSingleRow:not(.nonBoxSingleRowBordered) .innerContSingleRow .outerColumn {
  border: none; }

.detHeaderCont .imgCont {
  width: 100px;
  height: 100px;
  border-radius: 144px;
  overflow: hidden;
  background: white; }

.detHeaderCont .imgColumnar {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.detHeaderCont .imgAltColumnar {
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  height: 100%;
  width: 100%;
  font-size: 32px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.87); }

.detHeaderCont .isCollapsedGrow {
  flex-grow: 1; }

.detHeaderCont.blueFullWidth {
  padding: 0px; }
  .detHeaderCont.blueFullWidth .innerCont {
    background: #1C61A7;
    color: white;
    border: none; }
    .detHeaderCont.blueFullWidth .innerCont .label {
      color: white; }
    .detHeaderCont.blueFullWidth .innerCont .separator {
      color: white; }
    .detHeaderCont.blueFullWidth .innerCont .data {
      color: white; }
    .detHeaderCont.blueFullWidth .innerCont .dataNull {
      color: white !important; }
    .detHeaderCont.blueFullWidth .innerCont .dataTransHd {
      color: white; }
    .detHeaderCont.blueFullWidth .innerCont .dataHdBig {
      font-size: 28px;
      font-family: Poppins, sans-serif;
      font-weight: 700;
      line-height: 1.4;
      line-height: 45px; }
    .detHeaderCont.blueFullWidth .innerCont .statusStr {
      color: white; }
  .detHeaderCont.blueFullWidth .transHd {
    color: white; }
  .detHeaderCont.blueFullWidth .collExpandContainer.expanded {
    background-image: url("../Images/icons/icons_12px_white_02_arrow_down 12 px.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .detHeaderCont.blueFullWidth .collExpandContainer.collapsed {
    background-image: url("../Images/icons/icons_12px_white_02_arrow_left 12px.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .detHeaderCont.blueFullWidth .cp-previewImage.previewPopUp {
    height: 100%;
    width: 100%; }
    .detHeaderCont.blueFullWidth .cp-previewImage.previewPopUp .currImgCont {
      height: 100%;
      width: 100%; }
      .detHeaderCont.blueFullWidth .cp-previewImage.previewPopUp .currImgCont .currImg {
        object-fit: cover; }

.detHeaderCont.columnVMiddle .expandedCont {
  align-items: center; }

.detHeaderCont.columnarVertical {
  padding: 28px;
  padding-bottom: 0px; }
  .detHeaderCont.columnarVertical > .innerCont {
    background: transparent; }
  .detHeaderCont.columnarVertical .row.transHd {
    margin-bottom: 8px; }
  .detHeaderCont.columnarVertical .dataTransHd {
    font-weight: bold;
    font-size: 18px; }
  .detHeaderCont.columnarVertical .outerColumnHd {
    padding: 0px; }
  .detHeaderCont.columnarVertical .row {
    display: block;
    margin-bottom: 18px; }
  .detHeaderCont.columnarVertical .separator {
    display: none; }
  .detHeaderCont.columnarVertical .label {
    display: block;
    padding: 0px;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, 0.87);
    line-height: 1.4;
    font-size: 12px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }
  .detHeaderCont.columnarVertical .data {
    display: block;
    line-height: 1.4;
    padding: 0px; }

.detHeaderCont.isWrap .innerCont .expandedCont {
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -10px; }
  .detHeaderCont.isWrap .innerCont .expandedCont .outerColumn {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px; }

/*End Columnar*/
.detail-sep-h {
  height: 20px;
  flex-shrink: 0; }

.sep-h {
  height: 20px;
  flex-shrink: 0; }

.pid-clickablecol {
  color: #2C61D7 !important; }

.pid-clickablecol:hover {
  text-decoration: underline; }

.dt-content {
  flex-grow: 1;
  height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; }

.detailContent {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%; }
  .detailContent > div {
    flex-shrink: 0; }
  .detailContent > .dxGridContainerEntry {
    flex-shrink: 1; }
  .detailContent > .dxGridContainer {
    flex-shrink: 1; }

.buttonGroup {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  flex-shrink: 0;
  padding-bottom: 8px; }
  .buttonGroup.topBordered {
    border-top: 1px solid #d7d7d7;
    padding-top: 8px; }
  .buttonGroup.noPadRight {
    padding-right: 0px; }
  .buttonGroup.padTop {
    padding-top: 8px; }

.buttonGroup.withInfo {
  padding-left: 20px;
  justify-content: space-between;
  align-items: center; }

.buttonGroup.withInfo .mg-1 {
  margin-left: 5px;
  margin-right: 5px; }

.buttonGroup.withInfo .info {
  font-size: 14px;
  flex-grow: 1; }

.buttonGroup.withInfo > .rightContent {
  display: flex;
  align-items: center;
  flex-shrink: 0; }

.buttonGroup.withInfo > .component {
  display: flex;
  align-items: center; }
  .buttonGroup.withInfo > .component > .marginRight1 {
    margin-right: 10px; }
  .buttonGroup.withInfo > .component > .marginRight2 {
    margin-right: 5px; }

.buttonGroup.withInfo .componentWithLabel {
  display: flex;
  align-items: center; }
  .buttonGroup.withInfo .componentWithLabel .label {
    margin-right: 7px;
    font-size: 12px; }

.dt-option {
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
  flex-shrink: 0;
  padding-top: 3px;
  padding-bottom: 3px; }

.tsCont {
  flex-shrink: 0; }
  .tsCont.tsContAtTop {
    margin-top: 8px; }

/*Entry Form*/
.entryFormCont {
  display: flex;
  height: 100%;
  color: #2E3849; }

.entryFormCont .formLeft {
  padding: 30px;
  box-sizing: border-box;
  width: calc(100% - 225px);
  overflow: auto; }

.entryFormCont .formRight {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  border-left: 1px solid #d7d7d7;
  width: 225px;
  overflow: auto; }

.entryFormCont .formTitle {
  font-size: 20px;
  font-weight: bold;
  color: #2E3849;
  padding-bottom: 12px; }

.entryFormCont .formSectionContent {
  padding: 20px;
  box-sizing: border-box;
  padding-bottom: 0px; }

.entryFormCont .entrySection {
  padding-bottom: 24px; }

.entryFormCont .row {
  display: flex; }

.entryFormCont .column {
  padding-left: 10px;
  padding-right: 10px; }

.entryFormCont .column:first-child {
  padding-left: 0px; }

.entryFormCont .column:last-child {
  padding-right: 0px; }

.entryFormCont .mainAttach {
  display: flex; }

.entryFormCont .attachInfo {
  padding-left: 20px; }

.entryFormCont .labelTitleAttach {
  font-size: 13px;
  font-weight: bold;
  padding-bottom: 5px; }

.entryFormCont .labelInfoAttach {
  font-size: 12px; }

.entryFormCont .cp-groupBox .title {
  font-size: 14px; }

/*End Entry Form*/
/*Tutor*/
.tutorCont {
  display: flex;
  align-items: center; }

.tutorIcon {
  background-image: url("../Images/icons/icons_lightbulb green 32px.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  flex-shrink: 0; }

.tutorInfo {
  font-size: 12px;
  color: #2E3849;
  white-space: pre-line;
  line-height: 1.5; }

/*End Tutor*/
/*Form Button Group*/
.formButtonGroupCont {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-top: -10px; }

.formButtonGroupCont .fbgLabel {
  align-self: flex-start;
  padding-right: 20px;
  font-size: 12px;
  line-height: 1.5; }

.formButtonGroupCont .fbgBtnGrp {
  flex-shrink: 0; }

/***/
/*Display Form*/
.dispForm {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  color: #2E3849;
  font-size: 12px;
  position: relative;
  margin-top: 5px; }

.dispFormLeft {
  width: calc(100% - 270px); }

.dispFormRight {
  width: 250px;
  margin-left: 10px;
  position: fixed;
  right: 30px; }

.boxDispContainer {
  background-color: #ffffff;
  border: 1px solid #d7d7d7;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 0;
  margin-bottom: 15px;
  box-sizing: border-box; }
  .boxDispContainer.fitSize {
    margin-bottom: 0px;
    height: 100%;
    overflow: hidden; }

.boxDispContainerWithImage {
  display: flex;
  margin-left: 20px;
  margin-right: 20px; }

.boxDispContainer.noMarginBottom {
  margin-bottom: 0px; }

.boxDispContainerRounded {
  border-radius: 7px; }

.boxDispContainer .cp-groupBox {
  padding: 12px; }

.boxDispContainer .boxDispContent {
  padding: 15px 17px; }

.boxDispContainer .textHeader span {
  color: #2E3849;
  font-size: 15px;
  font-weight: bold; }

.boxDispContainer .textHeader {
  margin-bottom: 25px; }

.boxDispContainer .boxRight {
  padding: 20px;
  box-sizing: border-box;
  width: 100%; }

.boxDispContainer .boxRightCenter {
  display: flex;
  align-items: center; }

.boxDispContainer .displaySection {
  display: flex;
  padding-bottom: 12px;
  font-size: 12px; }

.boxDispContainer.noBorder {
  border: none; }

.sectionBoxContainer {
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
  height: 100%; }
  .sectionBoxContainer.fullWidth {
    padding: 0px;
    border-bottom: 1px solid #d7d7d7; }
    .sectionBoxContainer.fullWidth .boxDispVertTs {
      border-right: none;
      width: 240px; }
    .sectionBoxContainer.fullWidth .boxDispContentWithTs .cp-tabSheetDtCont {
      padding: 10px;
      width: 220px; }

.outerScrollHidden {
  position: relative;
  overflow: hidden !important;
  height: 100%; }

.innerScrollHidden {
  width: calc(100% + 21px);
  overflow: auto;
  height: 100%; }

.boxDispContentWithTs {
  display: flex;
  height: 100%; }

.boxDispContentWithTs .boxDispVertTs {
  width: 167px;
  flex-shrink: 0;
  background-color: #F4F5F8;
  border-right: 1px solid #d7d7d7;
  overflow: auto; }

.boxDispContentWithTs .boxDispVertTsContent {
  width: calc(100% - 167px);
  height: 100%;
  overflow: auto; }

.boxDispContentWithTs .cp-tabSheetDtCont {
  width: 167px; }

.boxDispVertTsInnerContent {
  padding: 18px;
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; }

.dispBoxTitle {
  font-size: 16px;
  color: #2E3849;
  font-weight: bold;
  margin-bottom: 15px;
  flex-shrink: 0;
  display: flex;
  min-height: 32px;
  align-items: center; }
  .dispBoxTitle .titleLeft {
    flex-grow: 1; }
  .dispBoxTitle .titleRight {
    flex-shrink: 0; }

.dispBoxContent {
  flex-grow: 1; }

.dispBoxBottom {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  box-sizing: border-box; }

/***/
/*Diberi overflow:hidden karena HR Cloud OD - Location muncul scroll. See: dxGridContainer*/
.tabHdContent {
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; }
  .tabHdContent > div {
    flex-shrink: 0; }

.imageViewerContainer {
  padding: 17px;
  border-right: 1px solid #d7d7d7; }

/*Entry Row Horizontal*/
.entryRowH {
  width: 100%;
  padding: 20px 15px;
  border-bottom: 1px solid #d7d7d7;
  border-top: 1px solid #d7d7d7;
  box-sizing: border-box;
  margin-top: -1px; }

.entryRowHItem {
  width: 100%;
  display: flex;
  align-items: center; }

.entryRowHItem:not(:last-child) {
  margin-bottom: 12px; }

.entryRowHLabel {
  width: 25%;
  flex-shrink: 0;
  font-size: 14px;
  color: #2E3849; }

.entryRowHValue {
  width: 75%;
  flex-shrink: 0; }

.entryRowHValuePair {
  display: flex;
  width: 100%; }

.entryRowHRight {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center; }

.buttonRemove {
  background-image: url("../Images/icons/PID_Silang.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
  cursor: pointer; }

.entryRowHAddItem {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end; }

.entryRowHLeft.width-1 {
  width: 50%; }

.entryRowHSingle {
  padding-bottom: 10px; }

.entryRowHSingleItem {
  display: flex; }

.entryRowHLeft.width-full {
  flex-grow: 1; }

.entryRowHRight.width-remainder {
  flex-grow: 0;
  flex-shrink: 0;
  padding-left: 5px;
  box-sizing: border-box; }

/*End Entry List*/
/*hint-btnInfoCont*/
.hint-btnInfoCont {
  padding: 10px;
  width: 100%;
  white-space: normal; }

.hint-btnInfoCont .title {
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  color: #2E3849;
  margin-bottom: 7px; }

.hint-btnInfoCont .value {
  text-align: left;
  font-size: 12px;
  color: #2E3849; }

.hint-btnInfoCont .statusCont {
  margin-bottom: 12px; }

/***/
/*Display Columnar*/
.displayColumnar .column {
  display: table; }

.displayColumnar .row {
  display: table-row; }

.displayColumnar .row div {
  line-height: 1; }

.displayColumnar .label {
  display: table-cell;
  color: #5A6881;
  padding: 5px 0 5px 0;
  padding-right: 10px; }

.displayColumnar .separator {
  display: table-cell;
  padding: 5px 0 5px 0;
  padding-right: 3px; }

.displayColumnar .data {
  display: table-cell;
  padding: 5px 0 5px 0;
  vertical-align: top;
  word-wrap: break-word; }

.displayColumnar .dataBold {
  font-weight: bold; }

.displayColumnar .dataNull {
  color: #5A6881 !important; }

.displayColumnar .outerColumn {
  padding-right: 10px;
  box-sizing: border-box;
  flex-shrink: 0; }

/***/
/*Button Box*/
.btn-box {
  width: 100%;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 13px;
  border: 1px solid #d7d7d7;
  cursor: pointer; }

.btn-box .title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 3px; }

.btn-box .hint {
  font-size: 12px; }

/***/
/*Option Line*/
.optionLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px; }

.optionLine .leftTitle {
  font-weight: bold;
  font-size: 14px; }

.optionLine .rightComponent {
  display: flex; }

.optionLine .compItem:not(:last-child) {
  margin-right: 5px; }

/***/
.boxDispBtnCont {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 15px;
  border-bottom: 1px solid #d7d7d7; }

.boxDispBtnContNoBorder {
  border-bottom: none; }

.boxDispBtnCont.withInfo {
  justify-content: space-between; }

.boxDispGridCont {
  display: flex;
  width: 100%;
  justify-content: center; }

.boxDispGrid {
  width: 85%; }

/*Personalization*/
.ps-container {
  height: 100%;
  padding-top: 25px;
  overflow: auto;
  box-sizing: border-box; }

.ps-container .ps-innerContainer {
  position: relative;
  width: 80%;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden; }

.ps-container .ps-bgTop {
  position: absolute;
  background: linear-gradient(to right, #42b2ce, #39a2d6, #3992de);
  width: 100%;
  height: 259px; }

.ps-container .ps-bgBottom {
  position: absolute;
  background-color: #d6e7ef;
  width: 100%;
  height: 100%; }

.ps-container .ps-content {
  position: relative; }

.ps-container .ps-header {
  padding: 30px 45px;
  color: #FFFFFF;
  display: flex; }

.ps-container .ps-header-left {
  flex-grow: 1; }

.ps-container .ps-header-right {
  flex-shrink: 0; }

.ps-container .ps-hd-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px; }

.ps-container .ps-hd-hint {
  font-size: 16px; }

.ps-container .ps-personalizationItemCont {
  padding-left: 45px;
  padding-right: 45px;
  box-sizing: border-box;
  padding-bottom: 30px; }

.ps-popUp {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: none;
  display: flex;
  justify-content: center;
  color: #2E3849;
  overflow: auto; }

.ps-innerPopUp {
  width: calc(80% - 90px);
  box-sizing: border-box;
  background-color: #FFFFFF;
  position: absolute;
  top: 53px;
  border: 1px solid #d7d7d7;
  padding: 40px;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25); }

.ps-popUp .ps-popUp-top {
  display: flex;
  margin-bottom: 8px; }

.ps-popUp .ps-popUp-title {
  font-weight: bold;
  font-size: 18px; }

.ps-popUp .ps-popUp-topHint {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px; }

.ps-popUp .ps-popUp-buttonCont {
  display: flex; }

.ps-popUp .ps-popUp-buttonItem {
  margin-right: 10px; }

.ps-popUp .ps-popUp-lineItem {
  display: flex;
  align-items: center; }

.ps-popUp .ps-popUp-lineItem:not(:last-child) {
  border-bottom: 1px solid #d7d7d7; }

.ps-popUp .ps-popUp-lineItem {
  padding: 20px; }

.ps-popUp .lineIcon {
  margin-right: 30px;
  flex-shrink: 0; }

.ps-popUp .lineIcon img {
  width: 32px;
  height: 32px; }

.ps-popUp .lineText {
  font-weight: bold;
  font-size: 14px;
  width: 105px;
  flex-shrink: 0; }

.ps-popUp .lineHint {
  font-size: 13px;
  line-height: 1.5; }

.ps-popUp .ps-popUp-close {
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer; }

/***/
.closeBtn {
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer; }

.closeBtnWhite {
  background-image: url("../Images/icons/icons 12px white_cross 12 px.svg");
  background-repeat: no-repeat;
  background-position: center; }

/*Trans Columnar*/
.transColumnarCont {
  box-sizing: border-box;
  padding: 10px; }

.transColumnarCont .transColumnarRow {
  margin-bottom: 18px; }

.transColumnarCont .transColumnarClickable {
  color: #2C61D7;
  cursor: pointer;
  font-size: 12px; }

.transColumnarCont .transColumnarLabel, .transColumnarCont .transColumnarLabel .labelText {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 5px; }

.transColumnarCont .transColumnarValue, .transColumnarCont .transColumnarValue .labelText {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  font-size: 12px; }

.transColumnarContNoPad {
  padding: 0px !important; }

/***/
/*Label*/
.lbStyle-1 {
  color: #2E3849;
  display: inline-block;
  font-weight: bold;
  font-size: 13px; }

.lbStyle-mrg1 {
  margin-right: 4px; }

.lbStyle-2 {
  color: #2E3849;
  display: inline-block;
  font-size: 13px; }

.lbStyle-3 {
  color: #2E3849;
  display: inline-block;
  font-size: 12px; }

.lbStyle-20 {
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
  color: #2E3849; }

.lbStyle-18 {
  display: inline-block;
  font-size: 14px;
  color: #2E3849; }

.lbStyle-16 {
  display: inline-block;
  font-size: 14px;
  color: #2E3849; }

.lbStyle-14 {
  display: inline-block;
  font-size: 14px;
  color: #5A6881; }

.lbStyle-Grey {
  color: #5A6881; }

.lbStyle-Bold {
  font-weight: bold; }

.lbStyle-memo {
  white-space: pre-wrap;
  line-height: 22px; }

.eduLangCriteria {
  display: flex;
  margin: 0px 6px 6px 0px;
  background-color: white;
  padding: 10px 10px;
  border-radius: 10px; }

.eduLangSeperator {
  width: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 16px; }

.lbAlignBottomRight {
  justify-content: flex-end;
  text-align: right;
  align-items: flex-end !important; }

.labelBold {
  color: #2E3849 !important;
  font-weight: bold !important; }

.labelBold2 {
  color: #2E3849 !important;
  font-weight: bold !important;
  font-size: 14px !important; }

.labelGrey {
  color: #5A6881 !important;
  font-weight: normal !important; }

.labelBlockContainer {
  margin-bottom: -5px; }

.labelBlock {
  display: block;
  margin-bottom: 5px; }

/**/
.columnarLeftBlue {
  border-left: 3px solid #3B93DB;
  padding-left: 8px !important; }

.detailSideValue {
  width: 236px;
  flex-shrink: 0;
  height: 100%;
  border-left: 1px solid #d7d7d7;
  border-top: 1px solid #d7d7d7; }

.detailInnerSideValue {
  height: 100%;
  display: flex;
  flex-direction: column; }

.detailInnerContentValue {
  overflow: auto;
  padding: 0px 8px;
  box-sizing: border-box; }

.detailSideValue .detailInnerContentTitle {
  flex-shrink: 0; }

.detailSideValue .row-value {
  border-left: none;
  background-color: #F4F5F8; }

.detailSideValue .row-total-value {
  position: sticky;
  bottom: 0; }

/*Layout 2*/
.dispLayout2 {
  height: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex; }

.dispInnerLayout2 {
  height: 100%;
  display: flex;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  box-sizing: border-box;
  width: 100%; }

.dl2-topLeftCorner {
  position: absolute;
  transform: translate(-50%, -50%); }

.dl2-leftContent {
  width: 195px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative; }

.dl2-rightContent {
  z-index: 1;
  flex-grow: 1;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column; }
  .dl2-rightContent.dl2-rightContentHideTabSheet {
    width: 100%; }
  .dl2-rightContent > .stretch {
    flex-grow: 1;
    height: 0; }
  .dl2-rightContent > .fixed {
    flex-shrink: 0; }

.dl2-expCollTask {
  display: none;
  position: absolute;
  background-color: white;
  border-radius: 40px;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  width: 24px;
  height: 24px;
  top: 30px;
  right: -12px;
  background-image: url("../Images/icons/icons_arrow left 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  cursor: pointer;
  background-size: 11px 11px;
  background-position: 6px; }

@keyframes showAnimation {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes hideAnimation {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    display: none; } }
  .dl2-expCollTask.hidden {
    display: block;
    opacity: 0;
    animation: hideAnimation 500ms cubic-bezier(0.2, 0, 0, 1) 0s; }
  .dl2-expCollTask.shown {
    display: block;
    opacity: 1;
    animation: showAnimation 500ms cubic-bezier(0.2, 0, 0, 1) 0s; }
  .dl2-expCollTask.collapsed {
    background-image: url("../Images/icons/icons_arrow right 16 px grey.png");
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    opacity: 1; }
  .dl2-expCollTask:hover {
    background-color: #dff1fb; }

@keyframes collapseAnimation {
  0% {
    width: 195px; }
  100% {
    width: 20px; } }

@keyframes expandAnimation {
  0% {
    width: 20px; }
  100% {
    width: 195px; } }

.dl2-leftContent.collapsed {
  width: 20px;
  animation: collapseAnimation 250ms cubic-bezier(0.2, 0, 0, 1) 0s; }
  .dl2-leftContent.collapsed > .dl2-tabsheetCont {
    display: none; }

.dl2-leftContent.expanded {
  animation: expandAnimation 250ms cubic-bezier(0.2, 0, 0, 1) 0s; }

.dl2-title {
  display: none;
  color: #2E3849;
  padding-top: 18px;
  padding-bottom: 10px;
  padding-left: 14px;
  padding-right: 10px;
  font-size: 18px;
  font-weight: bold;
  min-height: 49px;
  box-sizing: border-box; }

.dl2-tabsheetCont {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  flex-shrink: 0;
  height: 0;
  background-color: white; }

.dl2-tabsheetInnerCont {
  width: calc(100% + 21px);
  overflow: auto;
  height: 100%; }

.dl2-tabsheetInner2Cont {
  width: 195px; }

.dl2-rightInnerContent {
  height: 100%; }

.frmDataMaster {
  height: 100%;
  display: flex;
  flex-direction: column; }

.display2Content {
  flex-grow: 1;
  /*
        changed from overflow auto to overflow visible: so pop up search ribbon for small screen not being clipped by tabsheet
        if become problem looked for another solution
    */
  overflow: visible;
  height: 100%; }

.display2Content > div {
  height: 100%;
  width: 100%; }

.dl2-rightContent .display2Content {
  height: 0; }

/***/
.columnarEntryRowTableContainer {
  display: table;
  width: 100%;
  border-collapse: separate;
  margin: 10px 0px 0px 0px; }

.columnarEntryRowTableContainer .columnarEntryRow {
  display: table-row;
  margin-bottom: 8px; }

.columnarEntryRowTableContainer .columnarEntryRow > .label {
  display: table-cell;
  font-size: 13px;
  color: #2E3849;
  box-sizing: border-box;
  width: 100px;
  padding-right: 5px; }

.columnarEntryRowTableContainer .columnarEntryRow > .value {
  display: table-cell;
  padding-bottom: 10px; }

.columnarEntryRowTableContainer .halfColumn {
  width: 49%;
  display: inline-block;
  vertical-align: top; }

.columnarEntryRowTableContainer .checkItem {
  margin-bottom: 8px; }

/* sideTabBarContainer */
.sideTabBarContainer {
  display: flex;
  flex-grow: 1;
  position: relative; }

.sideTabBarContent {
  width: 50px;
  flex-shrink: 0; }

.sideTabBarItem {
  color: #2E3849;
  writing-mode: vertical-lr;
  width: 25px;
  border-right: 5px solid #CECECE;
  box-sizing: border-box;
  padding: 5px 6px 5px 0px;
  font-size: 12px;
  margin-left: 5px;
  margin-bottom: 5px;
  cursor: pointer; }

.sideTabBarItem:hover {
  border-right: 5px solid #3992DE;
  color: #3992DE; }

.sideTabBarAbsOuterContent {
  flex-shrink: 0;
  right: 50px;
  height: 100%; }

.sideTabBarAbsContent {
  height: 100%; }

.objectPDF {
  display: block; }

/**/
.gridFullContainer {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  overflow: hidden; }

.groupBoxInfo {
  font-size: 14px;
  color: #2E3849; }

/*New Employee*/
.ne-outercont {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  border-top: 1px solid #d7d7d7; }

.ne-outercont .ne-leftsection {
  width: 300px;
  flex-shrink: 0;
  box-sizing: border-box;
  border-right: 1px solid #d7d7d7;
  padding: 17px;
  overflow: auto; }
  .ne-outercont .ne-leftsection.noPadding {
    padding: 0px; }

.ne-outercont .ne-leftsectionInner {
  width: 300px;
  box-sizing: border-box; }

.ne-outercont .ne-leftsectionPadding {
  padding: 17px; }

.ne-outercont .ne-rightsection {
  width: calc(100% - 300px);
  box-sizing: border-box;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF; }
  .ne-outercont .ne-rightsection .tsContainerTop {
    flex-shrink: 0; }
  .ne-outercont .ne-rightsection .sectionContainerBottom {
    flex-grow: 1;
    overflow: auto;
    height: 100%; }
  .ne-outercont .ne-rightsection .tsContent {
    height: 100%; }

.ne-outercont .ne-contentBox {
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 18px;
  box-sizing: border-box; }
  .ne-outercont .ne-contentBox .ne-contentInnerBox {
    height: 100%;
    border: 1px solid #d7d7d7;
    box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
    box-sizing: border-box;
    display: flex; }
  .ne-outercont .ne-contentBox .ne-boxSideLeft {
    position: relative;
    width: 200px;
    box-sizing: border-box;
    border-right: 1px solid #d7d7d7;
    overflow: hidden; }
  .ne-outercont .ne-contentBox .ne-boxSideInnerLeft {
    overflow: auto;
    height: 100%;
    width: calc(100% + 21px); }
  .ne-outercont .ne-contentBox .ne-boxSideRight {
    width: calc(100% - 200px);
    box-sizing: border-box;
    background-color: #FFFFFF;
    overflow: auto; }

.ne-outercont .attachCont {
  display: flex;
  margin-bottom: 14px; }
  .ne-outercont .attachCont .attachLeft {
    flex-shrink: 0; }
  .ne-outercont .attachCont .attachRight {
    margin-left: 10px;
    flex-grow: 1;
    display: flex;
    align-items: center; }

.ne-outercont .ne-contentTitle {
  display: flex;
  align-items: center;
  font-weight: bold;
  padding: 18px 14px 0px 20px;
  font-size: 16px;
  color: #2E3849; }
  .ne-outercont .ne-contentTitle .content-left {
    margin-right: 20px; }
  .ne-outercont .ne-contentTitle .content-left-full {
    flex-grow: 1; }

.ne-tableCont {
  box-sizing: border-box;
  padding-left: 20px;
  color: #2E3849; }
  .ne-tableCont .tColumn {
    box-sizing: border-box; }

.ne-tableBHeader {
  display: flex;
  font-weight: bold;
  font-size: 14px; }
  .ne-tableBHeader .tColumn {
    border-bottom: 3px solid #2E3849;
    padding-bottom: 5px;
    padding-left: 13px; }

.ne-tableBRow {
  display: flex;
  font-size: 13px; }
  .ne-tableBRow .tColumn {
    border-bottom: 1px solid #d7d7d7;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 11px;
    display: flex;
    align-items: center; }
    .ne-tableBRow .tColumn .colComponent {
      width: 100%; }
  .ne-tableBRow .column2 {
    padding-left: 0px;
    padding-right: 0px; }

.tsContainerTop {
  margin-top: 10px; }

.ne-innerEntryCont {
  height: 100%;
  overflow: auto; }

/***/
/*headerContStyle1*/
.headerContStyle1 {
  padding: 12px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  border-top: 1px solid #d7d7d7;
  border-left: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
  color: #2E3849;
  align-items: center; }
  .headerContStyle1 .headerLabel1 {
    font-weight: bold;
    font-size: 15px;
    margin-right: 12px; }
  .headerContStyle1 .headerLabel2 {
    font-size: 13px; }

/***/
.mtdetail-cont {
  height: 100%;
  position: relative;
  border-bottom: 1px solid #d7d7d7; }

.mdetail-memobox {
  width: calc(100% - 223px);
  margin: auto;
  border: 1px solid #d7d7d7;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px; }

.mdetail-memotitle {
  padding: 10px;
  color: #2E3849;
  font-size: 13px;
  display: flex;
  border-bottom: 1px solid #d7d7d7; }
  .mdetail-memotitle .right {
    font-weight: bold; }

.mdetail-memocontent {
  background: #FFFFFF;
  box-sizing: border-box;
  min-height: 500px;
  padding: 20px;
  flex-direction: column; }

.edit-memo-container {
  box-sizing: border-box;
  flex-grow: 1;
  height: 100%;
  display: flex;
  position: relative;
  color: #353535;
  flex-direction: column; }
  .edit-memo-container .edit-memo-template {
    width: 77px;
    border-right: 1px solid #d7d7d7;
    box-sizing: border-box;
    height: 60px;
    flex-shrink: 0;
    padding: 0px 10px;
    cursor: pointer; }
    .edit-memo-container .edit-memo-template .innerItem {
      box-sizing: border-box;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      flex-direction: column; }
      .edit-memo-container .edit-memo-template .innerItem .itemLabel {
        color: #2C61D7;
        font-size: 12px;
        margin-top: 3px; }
    .edit-memo-container .edit-memo-template.itemActived {
      background-color: #d9dbdd; }
  .edit-memo-container .edit-memo-memobox {
    flex-grow: 1;
    background: #F4F5F8;
    overflow: auto;
    padding-top: 20px !important;
    padding-bottom: 20px !important; }
  .edit-memo-container .ql-container.ql-snow {
    width: 100%;
    border: none !important; }
  .edit-memo-container .ql-tooltip.ql-editing {
    transform: translateX(61px); }
  .edit-memo-container .edit-memo-memotoolbar {
    display: flex;
    align-items: center; }
  .edit-memo-container .ql-editor {
    overflow: visible !important;
    background-color: #FFFFFF !important;
    height: auto;
    margin-bottom: 20px;
    min-height: 400px;
    box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
    border: 1px solid #d7d7d7;
    padding: 30px;
    line-height: initial; }
  .edit-memo-container .editmemo-firstline {
    display: flex; }
  .edit-memo-container .ql-toolbar.ql-snow {
    border: none !important; }
  .edit-memo-container .edit-memo-bottomcont {
    display: flex;
    box-sizing: border-box;
    border: 1px solid #d7d7d7;
    background: #FFF;
    flex-grow: 1;
    height: 100%;
    position: relative;
    overflow: hidden; }
  .edit-memo-container .pageSepLine {
    border-top: 1px solid #d7d7d7; }

.row-he-table:not(:last-child) {
  margin-bottom: 5px; }

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

.dispMemoTemp {
  display: flex;
  flex-wrap: wrap;
  padding-right: 20px; }

.dispPageItemContainer {
  margin-bottom: 15px;
  width: calc(50% - 20px);
  box-sizing: border-box;
  margin-left: 20px; }

.rowContentHorizontal {
  display: flex;
  align-items: center; }
  .rowContentHorizontal .compLabel {
    min-width: 100px;
    color: #2E3849;
    font-size: 12px; }

.columnarGreyBackground {
  background-color: #F4F5F8;
  width: 100%; }
  .columnarGreyBackground .innerCont {
    padding: 10px !important;
    background-color: #F4F5F8; }

.colRowCont1 {
  display: flex;
  align-items: center; }
  .colRowCont1 .label {
    flex-grow: 1; }

.circleInfo {
  background-color: #38a169;
  border-radius: 50px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: white;
  font-weight: bold; }

.entryCustomButton {
  display: flex;
  position: relative; }

.popUpAttrContainer {
  display: flex; }
  .popUpAttrContainer .textHeaderPopUp {
    margin-bottom: 15px; }
    .popUpAttrContainer .textHeaderPopUp span {
      font-size: 15px;
      font-weight: bold; }
  .popUpAttrContainer .imageViewerContainer {
    display: flex;
    align-items: flex-start; }

.cp-formPopUp .inner-popUp .empAttrPopUpWrapper {
  padding: 10px; }

.detailSideBySide {
  flex-grow: 1;
  height: 100%;
  display: flex;
  overflow: auto;
  border-top: 1px solid #d7d7d7;
  color: #2E3849; }
  .detailSideBySide .sectionTop {
    border-bottom: 1px solid #d7d7d7;
    box-sizing: border-box;
    padding: 18px 28px;
    display: flex;
    flex-shrink: 0; }
  .detailSideBySide .sectionContent {
    box-sizing: border-box;
    padding: 18px 28px; }
  .detailSideBySide.noBorder {
    border-top: none; }
  .detailSideBySide > .columnarLeft {
    flex-shrink: 0;
    width: 220px;
    box-sizing: border-box;
    border-right: 1px solid #d7d7d7; }
    .detailSideBySide > .columnarLeft .columnarLeftContent {
      width: 220px; }
  .detailSideBySide .buttonContainer {
    padding: 17px 22px;
    box-sizing: border-box; }
  .detailSideBySide .columnarContent {
    padding-left: 22px;
    padding-right: 22px;
    box-sizing: border-box; }
  .detailSideBySide .colHeader {
    margin-bottom: 16px; }
  .detailSideBySide .hd1, .detailSideBySide .hd1 .labelText {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5; }
  .detailSideBySide .hd2, .detailSideBySide .hd2 .labelText {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5; }
  .detailSideBySide > .contentRight {
    flex-grow: 1;
    background-color: #FFFFFF;
    overflow: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; }
    .detailSideBySide > .contentRight.transparent {
      background-color: transparent; }
    .detailSideBySide > .contentRight.withPadLeft {
      padding-left: 20px; }
    .detailSideBySide > .contentRight > .body {
      box-sizing: border-box;
      overflow: auto;
      flex-grow: 1; }
      .detailSideBySide > .contentRight > .body > .bodyInner {
        padding: 13px 20px; }
    .detailSideBySide > .contentRight > .footer {
      flex-shrink: 0;
      border-top: 1px solid #d7d7d7;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
      display: flex; }
      .detailSideBySide > .contentRight > .footer .footerItem {
        font-weight: bold;
        font-size: 14px;
        padding-left: 8px;
        padding-right: 8px; }
      .detailSideBySide > .contentRight > .footer .alignLeft {
        text-align: left; }
      .detailSideBySide > .contentRight > .footer .alignCenter {
        text-align: center; }
      .detailSideBySide > .contentRight > .footer .alignRight {
        text-align: right; }

.textGreen {
  color: #029d72 !important; }

.textRed {
  color: #F04D5D !important; }

.outerScroller {
  overflow: hidden;
  position: relative; }

.innerScroller {
  width: calc(100% + 21px);
  overflow: auto;
  height: 100%; }

.bgGrey {
  background-color: #F4F5F8; }

.bgGreen {
  background-color: #38A169; }

.bgRed {
  background-color: #F04D5D; }

.mg-1-right {
  margin-right: 8px !important; }

.mg-2-right {
  margin-right: 4px; }

.mg-3-right {
  margin-right: 24px; }

.mg-1-left {
  margin-left: 8px; }

.mg-2-left {
  margin-left: 4px; }

.mg-3-left {
  margin-left: 24px; }

.mg-1-top {
  margin-top: 15px; }

.mg-4-top {
  margin-top: 24px; }

.mg-5-top {
  margin-top: 48px; }

.mg-6-top {
  margin-top: 30px; }

.mg-1-bottom {
  margin-bottom: 15px; }

.mg-2-bottom {
  margin-bottom: 7px; }

.mg-3-bottom {
  margin-bottom: 12px; }

.mg-4-bottom {
  margin-bottom: 24px; }

.pad-1-left {
  padding-left: 8px !important; }

.pad-2-left {
  padding-left: 4px !important; }

.pad-3-left {
  padding-left: 24px !important; }

.pad-1-top {
  padding-top: 15px; }

.pad-2-top {
  padding-top: 7px; }

.pad-1-bottom {
  padding-bottom: 15px; }

.pad-2-bottom {
  padding-bottom: 7px; }

.mg-line-bottom {
  margin-bottom: 2px; }

.pad-1-h {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box; }

.pad-2-h {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box; }

.pad-3-h {
  padding-left: 4px;
  padding-right: 4px;
  box-sizing: border-box; }

.pad-4-h {
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box; }

.displayBoxHalfCont {
  display: flex; }
  .displayBoxHalfCont .displayBoxHalfLeft {
    width: 50%;
    box-sizing: border-box;
    padding-right: 10px; }
  .displayBoxHalfCont .displayBoxHalfRight {
    width: 50%;
    box-sizing: border-box;
    padding-left: 10px; }

.displayBoxItem {
  background-color: #FFFFFF;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  padding: 20px;
  margin-top: -1px; }

.displayBoxItem2 {
  background-color: #FFFFFF;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  padding: 8px;
  color: #2E3849; }

.labelStyle1 {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
  color: #2E3849; }

.valueStyle1 {
  font-size: 13px;
  color: #2E3849;
  margin-bottom: 5px; }

.displayBoxHalfCont .policyItemContainer {
  margin-bottom: -5px; }

.displayBoxHalfCont .columnarLeftBlue {
  margin-bottom: 5px; }

.showApprTrackButton {
  display: flex;
  color: #2C61D7;
  font-size: 14px; }
  .showApprTrackButton .innerShowApprTrackButton {
    cursor: pointer; }
  .showApprTrackButton .showApprTrackDisplay {
    margin-left: 7px;
    margin-top: 5px; }

.itemPointList {
  color: #2E3849;
  margin-left: 10px; }
  .itemPointList.highMarginLeft {
    margin-left: 25px; }
  .itemPointList > li {
    margin-bottom: 4px; }

.popUpLineSepHor {
  width: calc(100% + 60px);
  height: 1px;
  border-bottom: 1px solid #d7d7d7;
  margin-left: -30px; }

.hintIcon {
  display: inline-block;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  margin-left: 8px;
  background-image: url("../Images/icons/icons_info 16px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.shiftColorBox {
  border-radius: 2px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 75px;
  font-weight: bold;
  color: white;
  text-shadow: 0px 0px 5px #333; }

.cursorClickable {
  cursor: pointer; }

.hintContainerFull {
  width: 100%;
  text-align: left; }

.hintBoxTitle {
  font-weight: bold; }

.bgTransparent {
  background-color: transparent; }
  .bgTransparent .innerCont {
    background-color: transparent; }

.parentDateDataBox.isDisplay {
  opacity: 0.5; }

.dateDataBox {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  margin: 2px;
  box-sizing: border-box; }
  .dateDataBox.yBox {
    background-color: transparent;
    border-style: solid;
    border-width: 3px; }

.dateDataBoxTwoColor {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  margin: 2px;
  box-sizing: border-box;
  overflow: hidden; }
  .dateDataBoxTwoColor .dateDataBoxTop {
    height: 50%; }
  .dateDataBoxTwoColor .dateDataBoxBottom {
    height: 50%; }

.codeNameInfo {
  color: #2E3849;
  padding-right: 15px;
  box-sizing: border-box; }
  .codeNameInfo .codeInfo {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 2px; }
  .codeNameInfo .nameInfo {
    font-size: 13px; }

.cursorPointer {
  cursor: pointer; }

.deleteBox {
  border-radius: 2px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 45px;
  border: 1px solid #d7d7d7;
  background-image: url("../Images/icons/icons 12px color_dump 12 px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.textInfo {
  font-size: 14px;
  color: #2E3849; }

.popUpSearchCont {
  display: flex;
  padding: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
  align-items: center; }

.popUpSearchField {
  width: 300px; }

.popUpFilter {
  margin-left: 8px; }

/*Flex*/
.flexVCenterBox {
  display: flex;
  align-items: center; }
  .flexVCenterBox.HCenter {
    justify-content: center; }
  .flexVCenterBox.HRight {
    justify-content: flex-end; }
  .flexVCenterBox .stretch {
    flex-grow: 1; }
  .flexVCenterBox .fixed {
    flex-shrink: 0; }

.flexWrapped {
  flex-wrap: wrap; }

.flexHStretch {
  display: flex; }
  .flexHStretch.spaceBetween {
    justify-content: space-between; }
  .flexHStretch .stretch {
    flex-grow: 1; }
  .flexHStretch.equal .stretch {
    flex-basis: 100%; }
  .flexHStretch .fixed {
    flex-shrink: 0; }
  .flexHStretch.center {
    align-items: center; }
  .flexHStretch.centerH {
    justify-content: center; }
  .flexHStretch.rightH {
    justify-content: flex-end; }

.flexColumn {
  display: flex;
  flex-direction: column; }
  .flexColumn.middle {
    justify-content: center; }
  .flexColumn.spaceBetween {
    justify-content: space-between; }
  .flexColumn.centerH {
    align-items: center; }
  .flexColumn > .stretch {
    flex-grow: 1;
    height: 0; }
  .flexColumn > .fixed {
    flex-shrink: 0; }

/**/
.splitHalf {
  display: flex; }
  .splitHalf .item:first-child {
    width: calc(50% - 8px);
    margin-right: 8px; }
  .splitHalf .item:last-child {
    width: calc(50% - 8px);
    margin-left: 8px; }

.underline {
  height: 1px;
  width: 100%;
  border-bottom: 1px solid #d7d7d7;
  box-sizing: border-box; }

.underlineBlack {
  height: 1px;
  width: 100%;
  border-bottom: 1px solid #2E3849;
  box-sizing: border-box; }

.summTotal {
  width: 125px;
  text-align: right; }

.popUpSumm {
  border-bottom: 1px solid #d7d7d7;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #FFFFFF;
  z-index: 1; }

.expandedIcon {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px; }

.collapsedIcon {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(90deg);
  width: 12px;
  height: 12px; }

.summHdCont {
  margin-right: 40px;
  flex-grow: 1;
  flex-basis: 0;
  margin-top: 1px; }

.canClick {
  cursor: pointer; }

.cancelBtn {
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
  height: 15px;
  cursor: pointer; }

.refreshProcess {
  background-image: url("../Images/icons/icons_16px_color_02_refresh 16 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 35px;
  height: 35px;
  background-size: 35px;
  cursor: pointer; }

.btnOuterCont {
  display: flex; }

.splitBoxSumm {
  width: 100%;
  display: flex;
  justify-content: space-around; }
  .splitBoxSumm.split3 .item {
    width: calc(33.3% - 15px); }
  .splitBoxSumm.split3 .item2 {
    width: 30%;
    padding: 20px; }
  .splitBoxSumm.split3 .itemTotal {
    width: 40%; }
  .splitBoxSumm.split3 .subItem {
    padding-left: 20px; }
  .splitBoxSumm.split3 .subItemFirst {
    padding-left: 100px; }
  .splitBoxSumm .subItem {
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    display: flex;
    flex-direction: column; }
  .splitBoxSumm .subItem:last-child {
    border-right: 1px solid #d7d7d7; }
  .splitBoxSumm .item {
    border: 1px solid #d7d7d7;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px; }
    .splitBoxSumm .item .label {
      font-size: 12px;
      width: 110px; }
    .splitBoxSumm .item .currency {
      font-size: 12px;
      margin-left: 5px;
      margin-right: 5px; }
    .splitBoxSumm .item .amount {
      font-size: 16px;
      font-weight: bold;
      text-align: right;
      flex-grow: 1; }
  .splitBoxSumm .red {
    color: #F04D5D; }
  .splitBoxSumm .itemRow {
    display: flex;
    align-items: center; }
  .splitBoxSumm .dataTotal {
    display: flex;
    color: #2E3849;
    align-items: center; }
    .splitBoxSumm .dataTotal .label {
      font-size: 16px;
      font-weight: bold;
      flex-grow: 1;
      margin-right: 8px; }
    .splitBoxSumm .dataTotal .amount {
      font-size: 24px;
      font-weight: bold;
      flex-shrink: 0;
      margin-right: 8px; }
    .splitBoxSumm .dataTotal .currency {
      font-size: 12px;
      flex-shrink: 0; }
  .splitBoxSumm .subHead {
    font-size: 14px;
    margin-bottom: 5px; }
  .splitBoxSumm .data {
    display: flex;
    color: #2E3849;
    align-items: center; }
    .splitBoxSumm .data .amount {
      font-size: 18px;
      font-weight: bold;
      flex-shrink: 0;
      margin-right: 8px; }
    .splitBoxSumm .data .currency {
      font-size: 12px;
      flex-shrink: 0; }
  .splitBoxSumm .itemTotal {
    background-color: #F4F5F8; }

.iconError {
  background-image: url("../Images/icons/icons_warning 16 px red.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  margin-right: 5px; }

.iconError2 {
  background-image: url("../Images/icons/icons 16px white_warning 16 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 28px;
  height: 28px;
  margin-left: 5px;
  margin-right: 5px;
  background-size: 18px;
  border-radius: 100px;
  background-color: #e25a88; }

.lineHd {
  line-height: 1.5; }

.tsHdCont {
  padding-top: 8px; }

.borderLeftGrey {
  border-left: 1px solid #d7d7d7; }

.noPadLeft {
  padding-left: 0px !important; }

.noPadRight {
  padding-right: 0px !important; }

.borderRightGrey {
  border-right: 1px solid rgba(0, 0, 0, 0.12); }

.formManyCont {
  display: flex;
  height: 100%; }
  .formManyCont .leftSide {
    width: 267px;
    flex-shrink: 0;
    height: 100%;
    background-color: #1C61A7; }
    .formManyCont .leftSide .tabCont {
      padding-left: 8px;
      padding-right: 8px;
      margin-top: 21px; }
    .formManyCont .leftSide .buttonCont {
      width: 100%;
      padding: 0px 8px;
      box-sizing: border-box; }
  .formManyCont .rightSide {
    height: 100%;
    background-color: #FFFFFF;
    flex-grow: 1; }
    .formManyCont .rightSide .formContentContainer {
      height: 100%;
      display: flex;
      flex-direction: column; }
      .formManyCont .rightSide .formContentContainer .formContent {
        flex-grow: 1;
        overflow: auto; }
      .formManyCont .rightSide .formContentContainer .buttonSaveCont {
        flex-shrink: 0;
        display: flex;
        box-sizing: border-box;
        padding: 24px;
        padding-bottom: 8px; }
        .formManyCont .rightSide .formContentContainer .buttonSaveCont .contLeft {
          display: flex;
          flex-grow: 1; }
        .formManyCont .rightSide .formContentContainer .buttonSaveCont .contRight {
          display: flex;
          flex-shrink: 0; }

.whiteBoxBordered {
  background-color: #FFFFFF;
  border: 1px solid #d7d7d7;
  box-sizing: border-box; }

.whiteBoxBoxShadowed {
  background-color: #FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
  box-sizing: border-box; }

.boxRounded {
  border-radius: 12px; }

.boxRounded2 {
  border-radius: 4px; }

.summaryContBox {
  border-radius: 10px;
  overflow: hidden; }
  .summaryContBox.bgWhite {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.12); }
  .summaryContBox.bgBlue {
    background-color: #547CD6; }
  .summaryContBox.bgTransparent {
    background-color: transparent; }
  .summaryContBox.withPad {
    padding: 36px; }
  .summaryContBox .section {
    padding: 12px 24px;
    box-sizing: border-box; }
    .summaryContBox .section.total {
      background-color: #343434;
      color: #FFFFFF; }
    .summaryContBox .section:not(:last-child) {
      border-bottom: 1px solid rgba(0, 0, 0, 0.12); }

.summaryValueBox {
  width: 96px;
  height: 94px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  background-color: #38A169;
  color: #FFFFFF;
  border-radius: 8px; }
  .summaryValueBox .value {
    font-size: 32px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4; }
  .summaryValueBox .info {
    font-size: 10px;
    font-family: sans-serif;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase; }

/*#region Padding Quartet*/
.padq-1 {
  padding: 4px; }

.padq-2 {
  padding: 8px; }

.padq-3 {
  padding: 12px; }

.padq-4 {
  padding: 16px; }

.padq-5 {
  padding: 20px; }

.padq-6 {
  padding: 24px; }

.padq-1-left {
  padding-left: 4px; }

.padq-2-left {
  padding-left: 8px; }

.padq-3-left {
  padding-left: 12px; }

/*#endregion*/
/*#region Margin Quartet*/
.mgq-1-top {
  margin-top: 4px !important; }

.mgq-1-right {
  margin-right: 4px !important; }

.mgq-1-bottom {
  margin-bottom: 4px !important; }

.mgq-1-left {
  margin-left: 4px !important; }

.mgq-1 {
  margin: 4px !important; }

.padq-1-top {
  padding-top: 4px !important; }

.padq-1-right {
  padding-right: 4px !important; }

.padq-1-bottom {
  padding-bottom: 4px !important; }

.padq-1-left {
  padding-left: 4px !important; }

.padq-1 {
  padding: 4px !important; }

.mgq-2-top {
  margin-top: 8px !important; }

.mgq-2-right {
  margin-right: 8px !important; }

.mgq-2-bottom {
  margin-bottom: 8px !important; }

.mgq-2-left {
  margin-left: 8px !important; }

.mgq-2 {
  margin: 8px !important; }

.padq-2-top {
  padding-top: 8px !important; }

.padq-2-right {
  padding-right: 8px !important; }

.padq-2-bottom {
  padding-bottom: 8px !important; }

.padq-2-left {
  padding-left: 8px !important; }

.padq-2 {
  padding: 8px !important; }

.mgq-3-top {
  margin-top: 12px !important; }

.mgq-3-right {
  margin-right: 12px !important; }

.mgq-3-bottom {
  margin-bottom: 12px !important; }

.mgq-3-left {
  margin-left: 12px !important; }

.mgq-3 {
  margin: 12px !important; }

.padq-3-top {
  padding-top: 12px !important; }

.padq-3-right {
  padding-right: 12px !important; }

.padq-3-bottom {
  padding-bottom: 12px !important; }

.padq-3-left {
  padding-left: 12px !important; }

.padq-3 {
  padding: 12px !important; }

.mgq-4-top {
  margin-top: 16px !important; }

.mgq-4-right {
  margin-right: 16px !important; }

.mgq-4-bottom {
  margin-bottom: 16px !important; }

.mgq-4-left {
  margin-left: 16px !important; }

.mgq-4 {
  margin: 16px !important; }

.padq-4-top {
  padding-top: 16px !important; }

.padq-4-right {
  padding-right: 16px !important; }

.padq-4-bottom {
  padding-bottom: 16px !important; }

.padq-4-left {
  padding-left: 16px !important; }

.padq-4 {
  padding: 16px !important; }

.mgq-5-top {
  margin-top: 20px !important; }

.mgq-5-right {
  margin-right: 20px !important; }

.mgq-5-bottom {
  margin-bottom: 20px !important; }

.mgq-5-left {
  margin-left: 20px !important; }

.mgq-5 {
  margin: 20px !important; }

.padq-5-top {
  padding-top: 20px !important; }

.padq-5-right {
  padding-right: 20px !important; }

.padq-5-bottom {
  padding-bottom: 20px !important; }

.padq-5-left {
  padding-left: 20px !important; }

.padq-5 {
  padding: 20px !important; }

.mgq-6-top {
  margin-top: 24px !important; }

.mgq-6-right {
  margin-right: 24px !important; }

.mgq-6-bottom {
  margin-bottom: 24px !important; }

.mgq-6-left {
  margin-left: 24px !important; }

.mgq-6 {
  margin: 24px !important; }

.padq-6-top {
  padding-top: 24px !important; }

.padq-6-right {
  padding-right: 24px !important; }

.padq-6-bottom {
  padding-bottom: 24px !important; }

.padq-6-left {
  padding-left: 24px !important; }

.padq-6 {
  padding: 24px !important; }

.mgq-7-top {
  margin-top: 28px !important; }

.mgq-7-right {
  margin-right: 28px !important; }

.mgq-7-bottom {
  margin-bottom: 28px !important; }

.mgq-7-left {
  margin-left: 28px !important; }

.mgq-7 {
  margin: 28px !important; }

.padq-7-top {
  padding-top: 28px !important; }

.padq-7-right {
  padding-right: 28px !important; }

.padq-7-bottom {
  padding-bottom: 28px !important; }

.padq-7-left {
  padding-left: 28px !important; }

.padq-7 {
  padding: 28px !important; }

.mgq-8-top {
  margin-top: 32px !important; }

.mgq-8-right {
  margin-right: 32px !important; }

.mgq-8-bottom {
  margin-bottom: 32px !important; }

.mgq-8-left {
  margin-left: 32px !important; }

.mgq-8 {
  margin: 32px !important; }

.padq-8-top {
  padding-top: 32px !important; }

.padq-8-right {
  padding-right: 32px !important; }

.padq-8-bottom {
  padding-bottom: 32px !important; }

.padq-8-left {
  padding-left: 32px !important; }

.padq-8 {
  padding: 32px !important; }

.mgq-9-top {
  margin-top: 36px !important; }

.mgq-9-right {
  margin-right: 36px !important; }

.mgq-9-bottom {
  margin-bottom: 36px !important; }

.mgq-9-left {
  margin-left: 36px !important; }

.mgq-9 {
  margin: 36px !important; }

.padq-9-top {
  padding-top: 36px !important; }

.padq-9-right {
  padding-right: 36px !important; }

.padq-9-bottom {
  padding-bottom: 36px !important; }

.padq-9-left {
  padding-left: 36px !important; }

.padq-9 {
  padding: 36px !important; }

.mgq-10-top {
  margin-top: 40px !important; }

.mgq-10-right {
  margin-right: 40px !important; }

.mgq-10-bottom {
  margin-bottom: 40px !important; }

.mgq-10-left {
  margin-left: 40px !important; }

.mgq-10 {
  margin: 40px !important; }

.padq-10-top {
  padding-top: 40px !important; }

.padq-10-right {
  padding-right: 40px !important; }

.padq-10-bottom {
  padding-bottom: 40px !important; }

.padq-10-left {
  padding-left: 40px !important; }

.padq-10 {
  padding: 40px !important; }

/*#endregion*/
/*#region Border*/
.borderGreyStd {
  border: 1px solid #d7d7d7; }

.borderGreyStdDashed {
  border: 1px dashed #d7d7d7; }

.borderGreyStdLeft {
  border-left: 1px solid #d7d7d7; }

.borderGreyStdRight {
  border-right: 1px solid #d7d7d7; }

.borderGreyStdTop {
  border-top: 1px solid #d7d7d7; }

.borderGreyStdBottom {
  border-bottom: 1px solid #d7d7d7; }

.borderLightBottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.48); }

.borderTopGrey {
  border-top: 1px solid #d7d7d7; }

.borderBottomGrey {
  border-bottom: 1px solid #d7d7d7; }

.borderTransparent {
  border: 1px solid transparent; }

/*#endregion*/
.buttonListFlex {
  display: flex;
  padding: 0px 8px; }
  .buttonListFlex .buttonItem {
    flex-grow: 1;
    margin-left: 8px;
    margin-right: 8px;
    max-width: 225px; }
  .buttonListFlex .buttonSearch {
    flex-grow: 0;
    width: 56px; }
  .buttonListFlex .buttonOther {
    max-width: 106px; }
  .buttonListFlex.noPadding {
    padding: 0px;
    margin: 0px -8px; }

.buttonOtherListFlex {
  display: flex;
  margin-top: 18px;
  margin-left: 24px; }
  .buttonOtherListFlex.noMarginLeft {
    margin-left: 0px; }
  .buttonOtherListFlex .buttonItem {
    flex-grow: 1;
    margin-left: 16px;
    margin-right: 16px;
    max-width: 152px; }

/*#region Box Shadow*/
.box-shadow-light {
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px; }

.boxShadowedPopUp {
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25); }

/*#endregion*/
/*#region Background*/
.bgBlue {
  background-color: #3B93DB !important; }

.bgLightBlue {
  background-color: #67C5F1 !important; }

.bg-color-primary-100 {
  background-color: #D7F8FD; }

.bg-color-primary-200 {
  background-color: #B0EDFC; }

.bg-color-primary-300 {
  background-color: #87DAF8; }

.bg-color-primary-400 {
  background-color: #67C5F1; }

.bg-color-primary-500 {
  background-color: #38A5E8; }

.bg-color-primary-600 {
  background-color: #2881C7; }

.bg-color-primary-700 {
  background-color: #1C61A7; }

.bg-color-base-100 {
  background-color: #FFFFFF; }

.bg-color-base-200 {
  background-color: #F8F9FB; }

.bg-color-base-300 {
  background-color: #F4F5F8; }

.bg-color-danger-100 {
  background-color: #FEE4DB; }

.bg-color-danger-200 {
  background-color: #FDC4B8; }

.bg-color-danger-300 {
  background-color: #FA9D94; }

.bg-color-danger-400 {
  background-color: #F67879; }

.bg-color-danger-500 {
  background-color: #F04D5D; }

.bg-color-danger-600 {
  background-color: #CE3854; }

.bg-color-danger-700 {
  background-color: #AC264C; }

.bg-color-danger-800 {
  background-color: #8B1843; }

.bg-color-danger-900 {
  background-color: #730E3D; }

.bg-color-info-100 {
  background-color: #DEEBFC; }

.bg-color-info-200 {
  background-color: #BDD6FA; }

.bg-color-info-300 {
  background-color: #9ABBF2; }

.bg-color-info-400 {
  background-color: #7DA1E6; }

.bg-color-info-500 {
  background-color: #547CD6; }

.bg-color-info-600 {
  background-color: #3D5FB8; }

.bg-color-danger-transparent-100 {
  background-color: rgba(240, 77, 93, 0.08); }

.bg-color-dark-transparent-300 {
  background-color: rgba(0, 0, 0, 0.2); }

/*#endregion*/
::ms-reveal {
  display: none; }

body > .fileInput {
  display: none; }

.fullBox {
  height: 100%;
  width: 100%;
  box-sizing: border-box; }

.toolboxContent {
  box-sizing: border-box;
  padding: 16px; }

.toolboxContentH {
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px; }

.mssBarWidth {
  width: 320px; }

.approvalTtlCont {
  display: flex;
  padding: 8px;
  box-sizing: border-box;
  align-items: center;
  overflow: hidden; }

.approvalCurrentCont {
  overflow: hidden; }

.approvalTitle {
  font-size: 20px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4;
  flex-shrink: 0;
  cursor: pointer;
  margin-bottom: 4px; }
  .approvalTitle:hover {
    text-decoration: underline; }

.approvalCurrent {
  font-size: 20px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }
  .approvalCurrent.hasSelected {
    cursor: pointer; }
    .approvalCurrent.hasSelected:hover {
      text-decoration: underline; }

.approvalInfo {
  font-size: 12px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important; }

.mssBarTrans {
  width: 100%;
  height: 100%;
  overflow: hidden; }

.mssBarTop {
  padding: 8px;
  box-sizing: border-box;
  padding-top: 0px; }

.apprGroupOption {
  margin-bottom: 4px; }

.apprBarMid {
  display: flex; }

.apprTransSearch {
  flex-grow: 1;
  margin-right: 4px; }

.apprTransRefresh {
  flex-shrink: 0; }

.mssContentContainer {
  display: flex;
  flex-direction: column;
  height: 100%; }

.mssContent {
  flex-grow: 1;
  height: 0;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column; }
  .mssContent > .mssItemFix {
    flex-shrink: 0; }
  .mssContent > .mssItemFull {
    flex-grow: 1;
    height: 0; }

.mssBottomContainer {
  display: flex;
  box-sizing: border-box;
  flex-shrink: 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #d7d7d7; }

.mssBottomFiller {
  flex-grow: 1; }

.approvalFooter {
  border-top: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
  padding: 6px 8px;
  color: rgba(0, 0, 0, 0.87); }

.apprApplicantList {
  overflow: auto;
  background-color: #FFFFFF;
  border-right: 1px solid #d7d7d7; }

.popUpFilterCont {
  padding: 16px 24px; }

.appDateListGrouped .rowChild div {
  box-sizing: border-box; }

.apprApplicantList .noDataBoxCont {
  border-right: none; }

.borderHoveredBlue {
  border: 1px solid transparent; }

.borderHoveredBlue:hover {
  border: 1px solid #9ABBF2; }

.approvalBar .cp-tabSheetDtCont.cp-whiteBgBlueBorder {
  border-right: 0px; }
  .approvalBar .cp-tabSheetDtCont.cp-whiteBgBlueBorder .item-cont:not(.item-cont-active) {
    border-right: 1px solid #d7d7d7; }

.segmentSelectionCont .divContentImgP {
  width: 24px;
  flex-shrink: 0;
  margin-top: 2px; }

.segmentSelectionCont .elementNode {
  border-radius: 50%;
  background-color: #F4F5F8;
  margin-left: 1px;
  height: 15px;
  width: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  box-sizing: border-box; }

.segmentSelectionCont .elementActive {
  border-radius: 50%;
  background-color: #79b63a;
  margin-left: -1px;
  height: 15px;
  width: 15px; }

.segmentSelectionCont .elementLine {
  min-height: 35px;
  border-left: 1px solid;
  margin-left: 8px;
  margin-top: -1px;
  border-color: #dee3f7;
  height: 100%; }

.segmentSelectionCont .divCircle {
  padding-left: 0px;
  position: relative;
  z-index: 1; }

.segmentSelectionCont .elementHdForm {
  display: flex; }

.segmentSelectionCont.activeable .elementHdForm {
  cursor: pointer; }

.segmentSelectionCont .labelMenu {
  font-size: 13px;
  font-weight: bold;
  font-family: Arial;
  color: #081c39; }

.segmentSelectionCont .labelMenuAct {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: #79b63a;
  font-weight: bold; }

.segmentSelectionOuterCont {
  height: 100%;
  border-right: 1px solid #d7d7d7;
  box-sizing: border-box;
  padding-top: 18px;
  padding-right: 18px;
  background-color: white;
  overflow: auto; }

.segmentSelectionTreeCont .divContentLabelP {
  display: flex; }

.segmentSelectionTreeCont .divContentImgP {
  flex-shrink: 0;
  display: flex;
  align-items: center; }

.segmentSelectionTreeCont .elementNode {
  border-radius: 50%;
  background-color: #9fa09f;
  margin-left: 1px;
  height: 11px;
  width: 11px; }

.segmentSelectionTreeCont .elementActive {
  border-radius: 50%;
  background-color: #79b63a;
  margin-left: -1px;
  height: 15px;
  width: 15px; }

.segmentSelectionTreeCont .elementLine {
  min-height: 20px;
  border-left: 1px solid;
  margin-left: 13px;
  margin-top: -1px;
  border-color: #9fa09f; }

.segmentSelectionTreeCont .divCircle {
  padding-left: 7px;
  flex-shrink: 0;
  width: 20px;
  display: flex;
  align-items: center; }

.segmentSelectionTreeCont .elementHdForm {
  cursor: pointer; }

.segmentSelectionTreeCont .labelMenu {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  flex-grow: 1; }

.segmentSelectionTreeCont .labelMenuAct {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: #79b63a;
  font-weight: bold;
  flex-grow: 1; }

.segmentSelectionTreeCont .labelMenu, .segmentSelectionTreeCont .labelMenuAct {
  padding-top: 4px;
  padding-bottom: 4px; }

.segmentSelectionTreeCont .labelMenuGroup {
  font-weight: bold;
  font-size: 14px; }

.segmentSelectionTreeCont .elementHdGroup {
  cursor: default; }

.segmentSelectionTreeCont.style2 .divCircle {
  padding-left: 6px; }

.segmentSelectionTreeCont.style2 .labelMenu {
  color: #707070; }

.segmentSelectionTreeCont.style2 .labelMenuAct {
  color: #157BB9; }

.segmentSelectionTreeCont.style2 .elementActive {
  background-color: #157BB9; }

.segmentSelectionTreeCont.style2 .elementNode {
  background-color: #d3d3d3; }

.segmentSelectionTreeCont.style2 .divContentImgP {
  margin-left: 10px;
  border: 1px solid transparent; }

.segmentSelectionTreeCont.style2 .divContentLabelP {
  margin-left: 10px; }

.segmentSelectionTreeCont.style2 .active .divContentImgP {
  border: 1px solid #157BB9;
  border-radius: 10px; }

.segmentSelectionTreeCont.style2 .elementActive {
  height: 8px;
  width: 8px;
  margin-left: 2px; }

.segmentSelectionTreeCont.style2 .elementLine {
  border-left: 1px dashed;
  border-left-color: #d3d3d3; }

.trESSLeaveTable {
  border-collapse: collapse; }
  .trESSLeaveTable .trESSLeaveHd td {
    padding: 4px;
    border: 1px solid #d7d7d7;
    text-align: center; }
  .trESSLeaveTable .trESSLeaveHd span {
    font-size: 14px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }
  .trESSLeaveTable .trESSLeaveDt td {
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    padding: 4px;
    border: 1px solid #d7d7d7;
    height: 35px;
    text-align: center; }
  .trESSLeaveTable .trESSLeaveDt .tdLeaveTitle {
    font-size: 14px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left; }

.divModuleCont {
  overflow: auto;
  /*height: 100%;*/
  display: flex;
  flex-wrap: wrap; }
  .divModuleCont .cardSeq {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    margin-top: -1px;
    display: flex;
    height: 30px;
    align-items: center;
    transform: translateX(1px);
    justify-content: center;
    border-bottom-left-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    background-color: #38a5e8;
    color: white; }
  .divModuleCont .descCourseModule {
    min-height: 35px; }

.cardContTRModule {
  padding: 20px 22px;
  border-radius: 12px;
  background-color: white;
  display: flex;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  cursor: default;
  width: 475px;
  margin: 20px 0;
  margin-left: 20px; }

.cardContTRModule.selected {
  border: 1px solid #38a5e8; }

.cardImgTRModule {
  display: flex;
  width: 115px;
  margin-right: 30px;
  align-items: flex-start;
  justify-content: center;
  position: relative; }

.modulesTitle {
  cursor: pointer; }

.ImgTRModule {
  display: flex;
  width: 115px;
  height: 115px;
  border-radius: 12px;
  overflow: hidden;
  object-fit: cover;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer; }

.ImgIconTRModule {
  position: absolute;
  transform: translate(-55px, 100px);
  width: 27px; }

.cardLeftTRModule {
  display: flex;
  flex-direction: column;
  width: 100%;
  /*margin-right: 30px;*/ }

.cardRightTRModule {
  display: flex;
  width: 50%;
  flex-direction: column; }

.headerTRModule {
  display: flex;
  flex-direction: column;
  width: 100%; }

.headerTRModule2 {
  display: flex;
  width: 100%;
  margin-top: 4px; }

.contentTRModule {
  display: flex;
  width: 100%;
  flex-direction: column; }

.dataTRModule {
  display: flex;
  margin-top: 6px;
  width: 100%; }

.descTRModule {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; }

.codeTRModule {
  display: flex;
  align-items: flex-end; }

.descTRModuleDet {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; }

.labelTRModule {
  width: 40%;
  display: flex; }

.valueTRModule {
  width: 60%;
  display: flex; }

.labelTRModuleDet {
  width: 35%;
  display: flex; }

.labelTRModuleDetTab {
  width: 170px;
  display: flex; }

.valueDescTRModule {
  text-align: justify;
  white-space: pre-line;
  width: 60%; }

.ne-outercont .ne-leftsection.leftTR {
  width: 200px;
  /*border-right: none;*/ }

.ne-outercont .attachCont.attachTR {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
  align-items: center; }

.ne-outercont .ne-rightsection.rightTR {
  width: calc(100%);
  /*padding: 18px 20px 18px 18px;*/ }

.attchComp {
  display: flex;
  align-items: flex-end; }

.noDataTRModule {
  opacity: 0.7;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

.readMoreTRModule {
  font-size: 12px;
  /*padding-left: 3px;*/ }

.TRModuleFlex {
  display: flex; }

.displayMaxScreen {
  padding-right: calc(100% - 1200px); }

/*margin-right harus disesuain dengan padding yg ada di .boxDispVertTsInnerContent*/
.boxDispVertTsInnerContent.displayMaxScreen {
  margin-right: 18px; }

.pid-outerContainer {
  padding-left: 2px;
  padding-right: 2px;
  box-sizing: border-box;
  margin: auto; }

.pid-compGrid {
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
  flex-wrap: wrap;
  margin-top: 15px; }
  .pid-compGrid .pid-compOuterItem {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    flex-shrink: 0;
    padding-bottom: 30px;
    width: 100%; }
  .pid-compGrid .pid-compItem {
    border-radius: 4px;
    /*box-shadow: rgba(0, 0, 0, 0.21) 0px 0px 10px 0px;*/
    border: 1px solid #c6c6c6;
    min-height: 100px;
    height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box; }
    .pid-compGrid .pid-compItem:hover {
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px 0px;
      border-color: #777777; }
      .pid-compGrid .pid-compItem:hover .CompName {
        color: #017eb7; }

.pid-compGridOuter {
  display: flex; }

.pid-vacGrid {
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
  flex-wrap: wrap;
  margin-top: 15px;
  flex-direction: column; }
  .pid-vacGrid .pid-vacOuterItem {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    flex-shrink: 0;
    padding-bottom: 15px;
    width: 100%; }
  .pid-vacGrid .pid-vacItem {
    border-radius: 20px;
    /*box-shadow: rgba(0, 0, 0, 0.21) 0px 0px 10px 0px;*/
    border: 1px solid #c6c6c6;
    min-height: 100px;
    height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    .pid-vacGrid .pid-vacItem:hover {
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px 0px;
      border: 1px solid #1e47a9; }
    .pid-vacGrid .pid-vacItem.focus {
      border: 2px solid #1e47a9; }
    .pid-vacGrid .pid-vacItem .VacantName {
      font-size: 17px;
      font-weight: bold;
      margin-bottom: 6px;
      color: #134baa; }
    .pid-vacGrid .pid-vacItem .VacantSpec {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.87);
      max-height: 66px;
      overflow: hidden; }
    .pid-vacGrid .pid-vacItem .CompLogo {
      width: 65px;
      height: 65px;
      object-fit: contain;
      margin-bottom: 8px; }
    .pid-vacGrid .pid-vacItem .CompLogoCont {
      margin-right: 12px; }
    .pid-vacGrid .pid-vacItem .CompCont {
      margin-top: 8px;
      margin-bottom: 8px; }
    .pid-vacGrid .pid-vacItem .CompName {
      font-size: 15px;
      font-weight: bold;
      color: #2e3849; }
      .pid-vacGrid .pid-vacItem .CompName:hover {
        text-decoration: underline; }
    .pid-vacGrid .pid-vacItem .LocationStr {
      color: rgba(0, 0, 0, 0.6);
      font-size: 15px;
      margin-bottom: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .pid-vacGrid .pid-vacItem .CompNameCont {
      margin-bottom: 6px; }
    .pid-vacGrid .pid-vacItem .ActDateCont {
      margin-top: 12px;
      font-size: 15px;
      color: #134baa;
      display: flex;
      font-weight: bold; }

.pid-vacGridContainer {
  display: flex;
  flex-direction: row; }
  .pid-vacGridContainer .pid-vacGridContainer-left {
    flex-basis: calc(var(--vacancyLeftBasis) * 1%); }
  .pid-vacGridContainer .pid-vacGridContainer-right {
    flex-basis: calc(100% - var(--vacancyLeftBasis) * 1%); }
  .pid-vacGridContainer .pid-outerRightContainer {
    margin-left: 20px;
    border-radius: 20px;
    margin-top: 15px;
    height: 100vh;
    top: 20px;
    box-sizing: border-box;
    position: sticky;
    background: #f3f5f7; }
  .pid-vacGridContainer .pid-innerRightContainer {
    padding: 16px;
    height: calc(100% - 40px);
    display: flex;
    gap: 10px;
    flex-direction: column;
    overflow: auto; }
    .pid-vacGridContainer .pid-innerRightContainer .pid-defaultDtCont {
      gap: 20px;
      display: flex;
      flex-direction: column; }
      .pid-vacGridContainer .pid-innerRightContainer .pid-defaultDtCont .pid-defaultDtTtl {
        font-size: 24px;
        line-height: 10px;
        color: #2e3849;
        font-weight: 500; }
      .pid-vacGridContainer .pid-innerRightContainer .pid-defaultDtCont .pid-defaultDtSubTtl {
        font-size: 16px;
        color: #5a6881; }
    .pid-vacGridContainer .pid-innerRightContainer .pid-defaultDtImgCont {
      display: flex;
      align-items: center;
      flex-direction: column;
      padding-top: 90px; }
      .pid-vacGridContainer .pid-innerRightContainer .pid-defaultDtImgCont .pid-defaultDtImg {
        height: 175px; }

.pid-headerCont {
  height: 57px;
  background-color: #1d2361; }

.pid-headerMenuCont {
  padding: 10px; }

.pid-headerMenu {
  font-family: sans-serif;
  font-size: medium;
  color: white;
  padding: 10.5px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative; }
  .pid-headerMenu.current {
    text-decoration: underline; }

.pid-headerMenuInner {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 5px;
  border-radius: 100px; }

.ClientInfoText, .pid-compItem .ClientAddr, .pid-compItem .ClientPhone, .pid-compItem .ClientEmail, .pid-compItem .CompSector, .pid-compItem .VacantCount, .pid-compItem .NewVacantDate {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 8px;
  min-height: 19px; }

.pid-compItem .CompName {
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 8px;
  color: #1c52ad; }

.pid-compItem .CompLogoCont {
  margin-right: 15px;
  margin-bottom: 5px; }

.pid-compItem .CompLogo {
  width: 60px;
  height: 60px;
  object-fit: contain; }

.pid-compItem .LocationStr {
  font-size: 15px;
  color: #6f6f6f;
  margin-bottom: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.pid-compItem .ClientAddr {
  margin-bottom: 4px; }

.pid-compItem .ClientPhone {
  margin-bottom: 4px; }

.pid-compItem .ClientEmail {
  margin-bottom: 4px; }

.pid-compItem .CompSector {
  color: #686868;
  font-weight: bold; }

.pid-compItem .VacantCount {
  color: #379920;
  font-weight: bold;
  margin-bottom: 0px; }
  .pid-compItem .VacantCount:hover {
    text-decoration: underline; }

.pid-compItem .NewVacantDate {
  color: #134ba8;
  font-weight: bold;
  margin-bottom: 0px;
  min-height: initial; }

.pid-compItem .bottomPart {
  margin-bottom: 8px; }

.pid-compItem .noData {
  color: #777777; }
  .pid-compItem .noData:hover {
    text-decoration: none; }

.pid-pagingCont {
  display: flex;
  justify-content: center;
  margin-bottom: 8px; }
  .pid-pagingCont .pagingItem {
    display: flex;
    cursor: pointer;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid gainsboro;
    box-shadow: rgba(0, 0, 0, 0.21) 0px 0px 10px 0px;
    border-radius: 2px;
    margin-left: 2px;
    margin-right: 2px; }
    .pid-pagingCont .pagingItem.selected {
      background-color: #dff1fb; }

.pid-searchContainerOuter {
  display: flex;
  margin-top: 12px;
  justify-content: space-between; }
  .pid-searchContainerOuter .pid-searchContainer {
    /*width: 330px;*/ }
    .pid-searchContainerOuter .pid-searchContainer .cp-boxLikeComponent .boxBorder {
      border-color: transparent;
      overflow: hidden;
      background-color: #f3f3f3; }
    .pid-searchContainerOuter .pid-searchContainer .cp-comboboxCont {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px; }
      .pid-searchContainerOuter .pid-searchContainer .cp-comboboxCont .boxBorder {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px; }
      .pid-searchContainerOuter .pid-searchContainer .cp-comboboxCont .input {
        font-weight: bold; }
    .pid-searchContainerOuter .pid-searchContainer .cp-buttonEditCont .boxBorder {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px; }
    .pid-searchContainerOuter .pid-searchContainer .input {
      font-size: 14px !important;
      background: transparent; }
    .pid-searchContainerOuter .pid-searchContainer .cp-comboboxCont {
      height: 43px; }
      .pid-searchContainerOuter .pid-searchContainer .cp-comboboxCont .input {
        padding-left: 12px; }
    .pid-searchContainerOuter .pid-searchContainer .cp-buttonEditCont .inner {
      height: 43px; }
    .pid-searchContainerOuter .pid-searchContainer .cp-searchField .comboBoxCont {
      width: 180px !important; }
    .pid-searchContainerOuter .pid-searchContainer .cp-searchField .buttonEditCont {
      width: 300px !important; }
      .pid-searchContainerOuter .pid-searchContainer .cp-searchField .buttonEditCont .input::placeholder {
        font-size: 14px; }
    .pid-searchContainerOuter .pid-searchContainer .cp-buttonEditCont .searchButton {
      background-size: 20px !important;
      margin-right: 10px;
      width: 24px; }
    .pid-searchContainerOuter .pid-searchContainer .separatorSearchContainer {
      height: 43px;
      background-color: #f3f3f3;
      width: 2px;
      display: flex;
      align-items: center; }
      .pid-searchContainerOuter .pid-searchContainer .separatorSearchContainer .separatorSearch {
        width: 1px;
        border-left: 1px solid #dfdfdf;
        height: 30px; }

.pid-headContainer {
  border-bottom: 1px solid #e6e6e6;
  margin-top: 2px;
  display: flex;
  justify-content: center; }
  .pid-headContainer .pid-floatSpotLight {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 504px;
    padding: 10px;
    display: flex;
    align-items: center; }

.pid-spotLight {
  position: relative;
  width: 100%;
  background: url("../SpotLight/SpotLight.png") no-repeat center center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40vh; }

.contUserPopUp {
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  border: 1px solid #d7d7d7;
  border-radius: 12px;
  width: 280px;
  top: calc(100% + 5px);
  right: 5px;
  z-index: 4;
  background-color: #FFFFFF;
  color: #2E3849;
  cursor: default; }

.contUserPopUp .top {
  padding: 15px;
  align-items: center; }
  .contUserPopUp .top .imgTop {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    width: 75px;
    height: 75px;
    border-radius: 100px;
    background-color: #0964FD;
    margin-bottom: 8px; }
    .contUserPopUp .top .imgTop img {
      width: 41px; }
  .contUserPopUp .top .profileBottom {
    text-align: center; }

.contUserPopUp .imgLeft {
  border-radius: 25px;
  background-color: #6B74AF;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF; }

.contUserPopUp .contentRight {
  padding-left: 15px;
  font-size: 14px; }

.contUserPopUp .name {
  font-weight: bold;
  padding-bottom: 3px; }

.contUserPopUp .email {
  font-weight: normal; }

.contUserPopUp .bottom {
  padding: 10px 15px; }

.contUserPopUp .listItem {
  padding: 10px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold; }

.contUserPopUp .listItem:hover {
  background-color: #eef4ff;
  color: #0c67fc; }

.contUserPopUp .listItemText {
  font-size: 15px;
  cursor: pointer; }

.contUserPopUp .listItemText:before {
  content: ''; }

.navToRegister {
  text-align: center;
  display: flex;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  font-size: 13px;
  margin-top: 17px;
  color: #0864fb; }

.navToFgPass {
  text-align: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  margin-top: 20px;
  color: #0864fb; }

.dNavLoginAdmin {
  padding: 5px 10px;
  /*background-color: white;
    color: #000000;*/
  cursor: pointer; }

.cOutCont {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 60px; }

.pidBoxContainer {
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px 0px;
  padding: 25px;
  box-sizing: border-box;
  border-radius: 8px; }
  .pidBoxContainer.topNoRadius {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px; }

.clientProfileOuterCont .ClientLogoCont {
  position: absolute;
  top: -73px;
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: flex-start;
  align-items: center; }

.clientProfileOuterCont .ClientLogo {
  display: block;
  max-width: 140px;
  max-height: 140px;
  border-radius: 8px;
  box-sizing: border-box;
  margin-top: 3px;
  margin-bottom: 3px;
  object-fit: contain; }

.clientProfileOuterCont .compTopPartContainer {
  padding-top: 77px; }
  .clientProfileOuterCont .compTopPartContainer.noImageHeader {
    padding-top: 25px; }
    .clientProfileOuterCont .compTopPartContainer.noImageHeader .ClientLogoCont {
      position: static; }

.clientProfileOuterCont .ClientName {
  font-size: 26px;
  font-weight: bold; }

.clientProfileOuterCont .hdRight {
  margin-left: 30px; }

.clientProfileOuterCont .compAttrCont {
  display: grid;
  font-size: 14px;
  grid-template-columns: 15px 1fr 15px 1fr;
  grid-template-rows: auto;
  grid-gap: 15px 7px;
  margin-top: 18px; }
  .clientProfileOuterCont .compAttrCont .label {
    display: flex;
    align-items: center;
    color: #777777; }
  .clientProfileOuterCont .compAttrCont .value {
    font-weight: 500;
    color: #676767; }
  .clientProfileOuterCont .compAttrCont .icon {
    display: flex; }

.pidLink {
  color: #379920;
  text-decoration: none; }
  .pidLink:visited {
    text-decoration: none; }

.pidOverviewFooter {
  margin-top: 22px;
  display: flex; }

.compMain {
  margin-top: 22px;
  border: 1px solid #d9d9d9; }

.pidCardTitle {
  font-weight: bold;
  font-size: 18px; }

.pidCardSubTitle {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 12px; }

.styledBox {
  margin-top: 8px;
  margin-bottom: 16px; }
  .styledBox .hRuler {
    border: medium;
    height: 2px;
    background-color: #f3f3f3; }

.pidCardContent {
  margin-top: 20px; }

.pidContentValue {
  font-size: 14px;
  line-height: 1.7;
  color: #676767; }

.pidCardBoxCont {
  margin-top: 24px; }

.pid-langContainer {
  display: flex;
  align-items: center; }
  .pid-langContainer .pid-langItem {
    cursor: pointer;
    font-family: sans-serif;
    font-size: medium;
    color: white;
    font-weight: 600;
    padding-left: 2px;
    padding-right: 2px; }
  .pid-langContainer .pid-langSeparator {
    height: 15px;
    margin-left: 2px;
    margin-right: 2px;
    border-right: 2px solid white;
    width: 2px;
    box-sizing: border-box; }

.portalLayoutContainer {
  overflow: auto; }

.pid-profilePortal {
  padding-top: 30px; }
  .pid-profilePortal .UserName {
    font-size: 22px;
    font-weight: bold; }
  .pid-profilePortal .detailCont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 600px;
    grid-gap: 30px;
    margin-bottom: 30px; }
  .pid-profilePortal .label {
    margin-top: 20px;
    font-size: 14px;
    color: #acacad;
    text-transform: uppercase;
    font-weight: bold; }
  .pid-profilePortal .value {
    font-size: 16px;
    margin-top: 3px; }
  .pid-profilePortal .EditInfo {
    color: #017eb7;
    font-size: 16px;
    margin-left: 0.5em;
    cursor: pointer; }

.compImgHeader {
  width: 100%;
  object-fit: cover; }

.pid-popUpOuterCont {
  position: absolute;
  z-index: 1001;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.65);
  top: 0;
  left: 0; }
  .pid-popUpOuterCont .pid-popUpCont {
    width: 500px;
    min-height: 300px;
    background: white; }
  .pid-popUpOuterCont .pid-popUpTitleCont {
    padding: 16px;
    display: flex;
    border-bottom: 1px solid #c6c6c6; }
  .pid-popUpOuterCont .pid-popUpTitle {
    text-transform: uppercase;
    flex-grow: 1;
    font-weight: bold;
    font-size: 16px; }
  .pid-popUpOuterCont .pid-popUpClose {
    flex-shrink: 0;
    height: 12px;
    width: 12px;
    cursor: pointer;
    background-image: url("../Images/icons/icons_cross 12 px grey.png");
    background-repeat: no-repeat;
    background-position: center; }
  .pid-popUpOuterCont .pid-popUpContent {
    padding: 20px 30px; }
  .pid-popUpOuterCont .inputCont {
    width: 100%;
    padding-bottom: 16px; }
  .pid-popUpOuterCont .buttonCont {
    display: flex;
    justify-content: flex-end;
    padding: 16px 30px;
    border-top: 1px solid #c6c6c6; }
    .pid-popUpOuterCont .buttonCont .buttonItem:not(:first-child) {
      margin-left: 10px; }

.loginCont {
  position: relative;
  flex-direction: column;
  align-items: center;
  height: 100%;
  display: flex;
  overflow: auto;
  bottom: 0;
  /*margin-top:100px;*/ }

.loginBoxOuterCont {
  z-index: 1;
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding-bottom: 100px; }

.loginBoxCont {
  background-clip: padding-box;
  border: 6px solid #c8c8c8;
  width: 390px;
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 0px 27px;
  padding-bottom: 30px; }

.welcomeCont {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 19px;
  color: #393839;
  text-align: left; }

.loginCont .inputCont {
  width: 100%;
  padding-bottom: 16px; }

.loginLabel {
  color: #7b797b;
  font-size: 12px;
  font-weight: bold;
  padding-left: 3px;
  text-align: left; }

.divTextLogin {
  position: relative;
  display: block;
  border-bottom: 1px solid #B8CCE4;
  height: 30px;
  background: #FFFFFF;
  padding: 1px 5px;
  padding-bottom: 5px; }

.divTextLoginfocus {
  border-bottom: 3px solid #3B93DB !important; }

.inputText {
  border: 1px solid transparent !important;
  font: 9pt arial !important;
  height: 28px;
  overflow: hidden;
  width: 99%;
  color: #232323; }

.inputText:focus {
  border: 1px solid transparent !important;
  outline: none !important; }

.inputText:disabled {
  background: transparent; }

.divTextLoginPass {
  position: relative;
  display: flex;
  width: 100%;
  border-bottom: 1px solid #B8CCE4;
  height: 30px;
  background: #FFFFFF;
  padding: 1px 5px;
  padding-bottom: 5px; }

.divTextLoginPassfocus {
  border-bottom: 3px solid #3B93DB !important; }

.btnLoginCont {
  margin-top: 10px;
  margin-bottom: 5px; }

.buttonSignUp {
  width: 100%;
  text-align: center;
  height: 40px;
  background: #38A5E8;
  color: white;
  border-radius: 3px;
  font-weight: bold;
  border: none;
  font-size: 14px; }

.divViewPass {
  height: 32px;
  width: 35px;
  cursor: pointer;
  background-image: url("../../Images/viewPassword.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-color: White; }

.divViewPass.visible {
  background-image: url("../../Images/viewPassword2.svg") !important; }

.bodyDisplay {
  width: calc(100%);
  height: calc(100%);
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.contErrorLogin {
  font-size: 12px;
  background-color: #FFE7E7;
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
  box-sizing: border-box;
  color: #353535;
  border-radius: 5px;
  margin-bottom: 7px;
  padding-left: 12px;
  display: flex;
  align-items: center; }

.logoCompCont {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  box-sizing: border-box;
  text-align: center; }

.bgLogin {
  /*position: fixed;*/
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  z-index: -9; }

.loginLabel2 {
  color: #7b797b;
  font-size: 12px;
  font-weight: bold;
  padding-left: 3px;
  text-align: left; }

.buttonConfirmCancel {
  width: 270px;
  text-align: center;
  height: 30px;
  background: #38A5E8;
  color: white;
  border-radius: 3px;
  font-weight: bold;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding-bottom: 3px; }

.TextBox {
  border: 1px solid transparent;
  font: 9pt arial !important;
  border-bottom: 1px solid #B8CCE4;
  margin-left: 2px;
  height: 15px;
  padding: 1px 5px;
  padding-bottom: 5px; }

.pid-profileBox {
  border: 1px solid #c6c6c6;
  margin-bottom: 30px;
  box-sizing: border-box; }
  .pid-profileBox .title {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    background-color: #f3f3f3; }
  .pid-profileBox .content {
    padding: 30px;
    box-sizing: border-box; }

.pid-divider {
  width: 100%;
  height: 1px;
  background-color: #d4d5d8; }

.pid-popUpOuterContainer {
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  top: 0;
  left: 0; }
  .pid-popUpOuterContainer .pid-popUpContainer {
    width: 300px;
    background-color: #ffffff;
    height: 100%;
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column; }
    .pid-popUpOuterContainer .pid-popUpContainer .titleCont {
      flex-shrink: 0;
      display: flex;
      padding: 18px;
      border-bottom: 1px solid #d7d7d7;
      display: flex;
      align-items: center; }
      .pid-popUpOuterContainer .pid-popUpContainer .titleCont .title {
        flex-grow: 1;
        font-size: 16px;
        font-weight: bold; }
      .pid-popUpOuterContainer .pid-popUpContainer .titleCont .btnClose {
        background-image: url("../Images/icons/icons_cross 12 px grey.png");
        background-repeat: no-repeat;
        background-position: center;
        flex-shrink: 0;
        height: 12px;
        width: 12px;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center; }
    .pid-popUpOuterContainer .pid-popUpContainer .contentCont {
      flex-grow: 1;
      height: 0;
      padding: 18px;
      overflow: auto; }
    .pid-popUpOuterContainer .pid-popUpContainer .footerCont {
      flex-shrink: 0;
      padding: 18px;
      border-top: 1px solid #d7d7d7; }
    .pid-popUpOuterContainer .pid-popUpContainer .filterTitleCont {
      margin-bottom: 12px; }
    .pid-popUpOuterContainer .pid-popUpContainer .filterTitle {
      font-size: 16px;
      font-weight: bold; }
    .pid-popUpOuterContainer .pid-popUpContainer .filterGroupCont {
      margin-bottom: 24px; }
  .pid-popUpOuterContainer.vacancyDetail .pid-popUpContainer {
    width: 85%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

.loginBoxOuterCont {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding-bottom: 10px !important; }
  .loginBoxOuterCont .loginBoxInfo {
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 30px;
    color: #ffffff;
    width: 500px;
    text-align: center;
    line-height: 1.5; }
  .loginBoxOuterCont .loginBoxInfoAdmin {
    width: 550px; }
  .loginBoxOuterCont .loginBoxCont {
    border: none;
    border-radius: 4px;
    width: 320px;
    padding: 0px 35px 30px 35px;
    margin-bottom: 10px; }
  .loginBoxOuterCont .divTextLogin, .loginBoxOuterCont .divTextLoginPass {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 3px 8px; }
  .loginBoxOuterCont .inputText {
    padding: 0px !important; }
  .loginBoxOuterCont .inputText::placeholder {
    font-weight: bold; }
  .loginBoxOuterCont .divTextLoginfocus {
    border: none !important; }
  .loginBoxOuterCont .divTextLogin.divTextLoginfocus {
    border: 1px solid #d9d9d9 !important; }
  .loginBoxOuterCont .welcomeCont {
    font-size: 22px; }
  .loginBoxOuterCont .logoCompCont {
    height: 28px; }
  .loginBoxOuterCont .divViewPass {
    width: 25px;
    background-size: 20px; }
  .loginBoxOuterCont .buttonSignUp {
    background-color: #0964fd;
    border-radius: 6px; }

.loginCont {
  background-color: #706f6d !important; }

.Body {
  overflow: auto !important; }
  .Body .divSeeMore {
    text-align: left; }
  .Body .vacanciesStyleShowBtn {
    display: inline-block;
    background-color: #0964fd;
    padding: 5px 25px;
    border-radius: 6px;
    box-sizing: border-box;
    border: 1px solid #0964fd; }
  .Body .vacanciesStyleApplyBtnCareer {
    display: inline-block;
    color: #5369f5; }
  .Body .divSeeMore {
    width: auto !important; }
    .Body .divSeeMore a {
      white-space: nowrap; }
  .Body .divVacBtnCont {
    padding: 0px 18px 10px 18px; }
  .Body .vacanciesStylePosTitleBack {
    padding-top: 15px; }
  .Body .dvFindJobInner {
    width: 28px;
    height: 28px; }
  .Body .searchJobStyleBtn {
    width: 16px !important;
    height: 16px !important; }
  .Body .TextBoxKeySearchJob {
    width: 236px !important; }
  .Body .divSortBy {
    display: flex;
    border-top: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 40px; }
    .Body .divSortBy .classCB {
      height: 100%;
      color: black !important;
      height: calc(100% + 2px);
      appearance: none;
      -webkit-appearance: none;
      width: 107px !important;
      font-weight: bold;
      font-size: 12px;
      margin-left: 5px;
      height: 41px;
      padding-left: 32px !important; }
  .Body .textBoxSearchJob {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important; }
  .Body .dvInfoJobTitle span {
    line-height: normal; }
  .Body .dInfoHeader {
    border-bottom: 1px solid #dbdbdb; }
  .Body .dvInfoCtgAttr {
    font-size: 12px; }
  .Body .dInfoNote {
    line-height: 1.7;
    font-size: 14px; }
  .Body .divSubmitBtn {
    border-radius: 6px !important;
    width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #0964fd !important;
    color: white !important;
    font-weight: normal !important; }

.contOuterProfileTop {
  background-color: #eef4ff; }
  .contOuterProfileTop .contProfileTop {
    padding-left: 36px;
    padding-right: 36px;
    box-sizing: border-box;
    margin: auto;
    padding-top: 30px;
    padding-bottom: 30px; }
  .contOuterProfileTop .UserName {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px; }
  .contOuterProfileTop .UserNameInfo {
    font-size: 14px;
    color: #6e6d6e; }

.profileImage {
  width: 120px;
  height: 120px;
  border-radius: 200px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center; }
  .profileImage img {
    width: 65px; }

.pidGroupBoxHd {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 4px;
  padding-right: 4px;
  border-bottom: 1px solid #d7d7d7;
  margin-bottom: 24px; }

.pidLbEntry {
  font-size: 14px;
  color: #6a6a6a;
  margin-bottom: 8px; }

.profileContentContainer {
  max-width: 600px; }

.pidEntrySection {
  margin-bottom: 16px; }

.groupSectionCont {
  margin-bottom: 42px; }

.pid-headerForCompany {
  background-color: #0964fd;
  cursor: pointer; }

.clientLogoHd {
  width: 70px;
  padding: 5px;
  box-sizing: border-box;
  background-color: white;
  display: flex;
  justify-content: center; }
  .clientLogoHd img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain; }

.clientLogoCareer {
  display: block;
  object-fit: contain;
  height: 50px;
  width: 50px;
  margin-right: 8px; }

.sortByIcon {
  position: absolute;
  left: 0;
  top: 14px;
  pointer-events: none; }

.vacanciesStylePagging {
  border-radius: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px !important;
  height: 35px !important;
  margin-left: 8px;
  margin-right: 8px; }

/*#region Tabsheet*/
.tsERCHd {
  display: flex;
  background-color: #f6f7fb;
  height: auto !important;
  padding-left: 24px !important;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 8px; }
  .tsERCHd .elementheader {
    background-color: transparent !important;
    border: none !important; }

.tabactive, .tabnotactive {
  width: auto !important;
  margin-right: 24px;
  float: none !important;
  padding-top: 8px;
  padding-bottom: 6px;
  font-weight: bold;
  background-color: transparent !important;
  border: none !important; }

.tabactive {
  border: none !important;
  background: transparent !important;
  border-bottom: 4px solid #0964fb !important; }
  .tabactive .tabfont {
    font-size: 14px;
    color: #0964fb;
    font-weight: bold;
    font-family: Arial; }

.tabnotactive {
  border: none !important;
  background: transparent !important; }
  .tabnotactive .tabfont {
    font-size: 14px;
    color: #676767;
    font-weight: bold;
    font-family: Arial; }

/*#endregion Tabsheet*/
.stdpanelcolor {
  background-color: transparent !important;
  padding-top: 16px; }
  .stdpanelcolor font {
    font-size: 22px !important;
    font-family: Arial !important;
    color: #000000 !important; }

/*#region Grid*/
/*
.mainheader {
    border: none !important;
    background-color: #f6f7fb !important;

    .itemheader {
        border: none !important;
        background-color: #f6f7fb;

        span {
            font-size: 14px !important;
        }
    }
}

.maindatalist {
    border: 1px solid $border-grey-std !important;
}

#divContentcph1 {
    height: 100%;
}
    */
.mainheader {
  border: none !important;
  background-color: #f6f7fb !important;
  height: 38px !important;
  border-bottom: 1px solid #d7d7d7 !important;
  display: flex;
  align-items: center; }
  .mainheader .itemheader {
    border: none !important;
    background-color: #f6f7fb; }
  .mainheader span {
    font-weight: bold !important; }

.itemdatalist, .alternatingdatalist {
  height: 33px !important;
  border-bottom: 1px solid #d7d7d7 !important; }

.maindatalist {
  border: 1px solid #d7d7d7 !important; }

/*#endregion Grid*/
#divContentcph1 {
  flex-grow: 1;
  height: 0;
  overflow: auto !important; }

.maindatalist {
  border: 1px solid #d7d7d7 !important; }

.stdmenulist {
  border: none !important; }

.headergrid {
  background-color: #f6f7fb !important;
  font-weight: bold;
  height: 28px;
  border: none !important;
  border-bottom: 1px solid #d7d7d7 !important; }

.elementfocusgrid {
  background-color: #ebf8ff !important; }

.itemdatalist {
  background-color: white !important; }

td.dxgv {
  height: 25px !important;
  vertical-align: middle !important;
  color: #676767 !important;
  border: none !important;
  border-bottom: 1px solid #d7d7d7 !important; }

.mainheadertree {
  border-bottom: none !important; }

#cph1_cpSetCanElDt_dlCanElHd {
  border-top: none !important; }

.loginCanUser, .registerCanCont {
  background-image: url("../Images/icons/candidate_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

.defaultCont, .loginAdminCont {
  background-image: url("../Images/icons/admin_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }

.loginCanUser:before, .registerCanCont:before, .defaultCont:before, .loginAdminCont:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); }

.BackgroundCareerTop {
  background-color: #eef4ff;
  display: flex; }
  .BackgroundCareerTop .BackgroundCareer {
    background-color: transparent !important; }
  .BackgroundCareerTop .BackgroundCareerRight {
    flex-grow: 1; }

.BackgroundCareerFormTop {
  background-color: #eef4ff; }
  .BackgroundCareerFormTop .BackgroundCareer {
    background-color: transparent !important; }
  .BackgroundCareerFormTop .BackgroundCareerRight {
    flex-grow: 1; }

#divAppForm {
  border-bottom: none !important; }
  #divAppForm label {
    color: #000065 !important;
    font-size: 22px !important; }

.careerFormTopRowCont {
  margin-bottom: 12px;
  display: flex;
  align-items: center; }
  .careerFormTopRowCont .careerFormTopRow {
    display: block !important;
    flex-shrink: 0;
    flex-grow: 1; }
    .careerFormTopRowCont .careerFormTopRow .divLabelJobApplied {
      float: none !important; }
    .careerFormTopRowCont .careerFormTopRow .divJobApplied {
      float: none !important; }
    .careerFormTopRowCont .careerFormTopRow .classLabel-JobApplied {
      font-weight: normal !important;
      color: #71706f !important; }
    .careerFormTopRowCont .careerFormTopRow .careerFormTopValue {
      color: #312e7d !important;
      font-weight: bold !important;
      font-size: 14px; }
  .careerFormTopRowCont .careerFormTopIconCont {
    flex-shrink: 0;
    background-color: white;
    padding: 5px;
    border-radius: 5px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px; }

#ContentHolder_divShowPhoto {
  width: auto !important;
  flex-shrink: 0; }

#ContentHolder_divShowUploadPhoto {
  flex-shrink: 0; }

.careerShowPhotoCont {
  display: flex;
  flex-shrink: 0;
  align-items: center; }

.classLabelPhoto {
  float: none !important;
  overflow: visible;
  white-space: nowrap !important;
  border-bottom: none !important;
  color: white !important;
  font-weight: bold !important;
  margin: 0px !important;
  margin-left: 5px !important; }

#uploadFromMF {
  display: flex;
  background-color: #0964fd;
  box-sizing: border-box;
  padding: 9px 16px;
  border-radius: 8px; }

.BtnCareerCont {
  display: flex;
  justify-content: center;
  align-items: center; }
  .BtnCareerCont .BtnClass {
    background-color: white !important;
    border: 1px solid #0964fd !important;
    color: #0964fd !important;
    border-radius: 6px;
    height: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center; }
  .BtnCareerCont .BtnClassSubmit {
    background-color: #0964fd !important;
    border: 1px solid #0964fd !important;
    color: white !important; }

.dvInfoJobPopUp {
  padding: 10px !important; }

.labelRadio {
  margin-left: 4px !important;
  line-height: 12px !important; }

.labelCheckbox {
  margin-left: 4px !important;
  line-height: 12px !important; }

.radioButtonListCont label {
  margin-left: 4px !important;
  margin-right: 10px !important;
  display: inline-block !important;
  line-height: 12px !important;
  height: 20px !important; }

.careerFormContainer .maindatalist {
  border: none !important; }

.divViewAll {
  cursor: pointer;
  font-weight: bold; }

.segmentHdTitle {
  font-weight: bold;
  margin-bottom: 12px;
  font-size: 20px;
  padding-bottom: 4px;
  border-bottom: 1px solid #d7d7d7;
  color: #404040; }

.modeViewAll .segmentHdTitle {
  margin-top: 18px; }

.careerFormContainer > .divContentRow {
  padding: 0px !important; }

.pid-headerMenuMobile {
  display: none;
  border-left: 2px white solid;
  padding: 5px; }

.btnMenu-Mobile {
  width: 35px;
  color: white;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer; }

.pid-popUpMenu {
  display: none;
  position: absolute;
  top: 59px;
  right: 0px;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100vw;
  z-index: 10; }
  .pid-popUpMenu ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  .pid-popUpMenu li {
    padding: 10px;
    padding-left: 20px;
    cursor: pointer;
    border-left: 4px solid white;
    height: 32px;
    line-height: 32px; }
  .pid-popUpMenu li:last-child {
    border-bottom: 1px solid #ddd; }
  .pid-popUpMenu .active {
    border-left: 4px solid #1d2361; }
  .pid-popUpMenu .forCompany {
    color: #134baa;
    font-weight: 700; }

.pid-JobDetail {
  margin: 20px;
  margin-top: 0px; }
  .pid-JobDetail .CompLogo {
    width: 80px;
    object-fit: contain;
    margin-bottom: 0px; }
  .pid-JobDetail .pid-JobDetailHdCont {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .pid-JobDetail .pid-JobDetailHdTtl {
    color: #134baa; }
  .pid-JobDetail .pid-JobDetailPost {
    font-size: 14px;
    color: #5a6881;
    font-weight: 400;
    display: block;
    margin-bottom: 20px; }
  .pid-JobDetail .pid-NotesWrapper {
    line-height: 26px;
    /*ul li span {
            display:block;
            text-indent:-1.5em;
            padding-left: 1.5em;
        }*/ }
    .pid-JobDetail .pid-NotesWrapper ul {
      list-style-position: outside;
      padding-left: 20px; }

.displayMaxScreen {
  padding-right: calc(100% - 1200px); }

.ud-info-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  width: 100%; }

.ud-info-item {
  display: flex;
  flex-direction: row;
  min-width: 180px;
  width: 48%;
  gap: 16px; }

.ud-info-question {
  display: flex;
  flex-direction: row;
  min-width: 180px;
  width: 48%;
  gap: 0px; }

.ud-info-item img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 8px; }

.ud-info-item span {
  line-height: 20px;
  font-size: 14px; }

.ud-info-question span {
  line-height: 26px; }

.flex-item {
  flex: 1 1 50%;
  box-sizing: border-box; }

@media (max-width: 768px) {
  .flex-item {
    flex: 1 1 100%; } }

.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

/*Entry Header*/
.entryHeader {
  box-sizing: border-box;
  padding: 20px 38px 0px 20px;
  display: flex;
  flex-shrink: 0; }
  .entryHeader.noCollapse {
    padding-right: 20px; }

.entryHeader.padStyle2 {
  padding: 10px 20px; }

.entryHeader.marginStyle2 {
  margin: 10px 20px;
  padding: 0px; }

.entryHeaderNormRightPad {
  padding-right: 20px; }

.entryHeader.borderBottomGrey {
  border-bottom: 1px solid #d7d7d7; }

.entryHeader.noPadding {
  padding: 0px; }

.labelEntry {
  color: rgba(0, 0, 0, 0.87);
  font-family: -apple-system, Helvetica Neue, Arial, sans-serif;
  padding-bottom: 8px;
  padding-left: 5px;
  font-size: 13px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4; }
  .labelEntry .labelText {
    font-size: 13px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.87); }

.labelEntry.labelEntryLg .cp-label {
  font-size: 14px; }

.entrySection {
  padding-bottom: 20px; }
  .entrySection .entryCompBtn {
    display: flex;
    height: 57px;
    align-items: flex-end; }

.entrySection.noPaddingBottom {
  padding-bottom: 0px; }

.entryHeaderRow {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding-left: 20px;
  margin-left: -12px;
  margin-right: -12px;
  padding-right: 20px;
  width: 100%; }
  .entryHeaderRow.fullWidth {
    width: calc(100% + 24px); }
  .entryHeaderRow.noPaddingRight {
    padding-right: 0px; }
  .entryHeaderRow.noPaddingLeft {
    padding-right: 0px; }
  .entryHeaderRow.noPadding {
    padding: 0px; }
  .entryHeaderRow.labelNoPadding .labelEntry {
    padding-left: 0px; }
  .entryHeaderRow.entryHeaderRowDt {
    padding-left: 8px;
    padding-right: 8px; }
  .entryHeaderRow .entrySectionRow {
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 17px;
    flex-shrink: 0; }
    .entryHeaderRow .entrySectionRow.split1 {
      width: calc(100% - 24px); }
    .entryHeaderRow .entrySectionRow.split2 {
      width: calc(50% - 24px); }
    .entryHeaderRow .entrySectionRow.split3 {
      width: calc(33.3% - 24px); }
    .entryHeaderRow .entrySectionRow.split4 {
      width: calc(25% - 24px); }

.entryHeaderRowHorOuterCont {
  margin-bottom: -17px; }

.entryHeaderRowHor {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin-left: -12px;
  margin-right: -12px; }
  .entryHeaderRowHor.fullWidth {
    width: calc(100% + 24px); }
  .entryHeaderRowHor.noPaddingRight {
    padding-right: 0px; }
  .entryHeaderRowHor.noPaddingLeft {
    padding-right: 0px; }
  .entryHeaderRowHor.noPadding {
    padding: 0px; }
  .entryHeaderRowHor.labelNoPadding .labelEntry {
    padding-left: 0px; }
  .entryHeaderRowHor .entrySectionRow {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 17px;
    flex-shrink: 0;
    box-sizing: border-box; }
    .entryHeaderRowHor .entrySectionRow.split1 {
      width: 100%; }
    .entryHeaderRowHor .entrySectionRow.split2 {
      width: 50%; }
    .entryHeaderRowHor .entrySectionRow.split3 {
      width: 33.3%; }
    .entryHeaderRowHor .entrySectionRow.split4 {
      width: 25%; }

.entryComponent.nonLabel {
  margin-top: 27px; }

.entryComponent.nonLabelColumn {
  min-height: 61px;
  padding-top: 27px;
  box-sizing: border-box; }

.entryAddInfo {
  display: flex;
  font-size: 12px;
  color: #2E3849;
  margin-top: 9px;
  margin-left: 7px;
  margin-bottom: 6px; }
  .entryAddInfo .addInfoSep {
    margin-right: 3px; }
  .entryAddInfo .addInfoValue {
    margin-right: 10px; }
  .entryAddInfo .labelText {
    font-size: 12px;
    color: #2E3849; }

.entryRowWrap {
  flex-wrap: wrap; }

.entryRow {
  display: flex; }
  .entryRow .entryRowPairColumnLeft {
    width: calc(50% - 5px);
    margin-right: 5px;
    display: flex; }
  .entryRow .entryRowPairColumnRight {
    width: calc(50% - 5px);
    margin-left: 5px;
    display: flex; }
  .entryRow .entryRPComp {
    flex-grow: 1; }
  .entryRow .entryRPCompFix {
    flex-shrink: 0; }
  .entryRow .entryRPHint {
    padding-left: 6px;
    font-size: 13px;
    color: #2E3849;
    border-bottom: 1px solid #d7d7d7;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-right: 6px; }
    .entryRow .entryRPHint .labelText {
      font-size: 13px;
      color: #2E3849; }

.entryRow.entryRowCenter {
  align-items: center; }

.rowSep {
  font-size: 12px;
  margin-left: 7px;
  margin-right: 7px;
  color: #2E3849; }

.entryHeader.entryHeaderColumn {
  flex-direction: column; }

.entryHeader .column {
  box-sizing: border-box; }

.entryHeader .column:not(:last-child) {
  padding-right: 20px; }

.entryHeaderCont {
  position: relative;
  box-sizing: border-box; }
  .entryHeaderCont.entryHeaderContAtTop {
    border-top: 1px solid #d7d7d7;
    /*Prevent double border with Grid*/
    margin-top: -1px; }

.entryHeaderCont .collExpHeader {
  position: absolute;
  top: 8px;
  right: 16px;
  width: 16px;
  height: 16px;
  cursor: pointer; }

.entryHeaderCont .expanded {
  background-image: url("../Images/icons/icons_arrow left 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-90deg); }

.entryHeaderCont .collapsed {
  background-image: url("../Images/icons/icons_arrow left 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

/*End Entry Header*/
/*Entry Header Display*/
.entryHeaderDisp {
  display: flex;
  box-sizing: border-box;
  padding: 8px 20px;
  font-size: 14px;
  border-bottom: 1px solid #d7d7d7;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  cursor: pointer;
  padding-right: 38px; }
  .entryHeaderDisp.entryHeaderDispAtBottom {
    margin-bottom: 0px; }

.entryHeaderDisp {
  font-size: 14px; }
  .entryHeaderDisp .hdTitle {
    font-weight: bold;
    color: #2C61D7;
    padding-right: 20px; }
  .entryHeaderDisp .item {
    display: flex;
    padding-right: 20px; }
  .entryHeaderDisp .itemTitle {
    margin-right: 5px;
    color: #5A6881; }
  .entryHeaderDisp .separator {
    color: #5A6881;
    margin-right: 5px; }
  .entryHeaderDisp .itemValue {
    color: #2E3849; }
  .entryHeaderDisp .itemMain {
    font-size: 15px;
    color: #2E3849; }
    .entryHeaderDisp .itemMain .itemTitle {
      font-weight: bold;
      color: #2E3849; }
    .entryHeaderDisp .itemMain .separator {
      font-weight: bold; }
    .entryHeaderDisp .itemMain .itemValue {
      font-weight: bold; }

/*End Entry Header Display*/
.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

/* Deprecated */
.labelH1Bold {
  font-size: 32px !important;
  font-weight: bold !important; }

/* Deprecated */
.labelH2Bold {
  font-size: 13px !important;
  font-weight: bold !important; }

/* Deprecated */
.labelH3 {
  font-size: 28px !important; }

/* Deprecated */
.labelH4 {
  font-size: 18px !important; }

/* Deprecated */
.labelH4Bold {
  font-size: 18px !important;
  font-weight: bold !important; }

/* Deprecated */
.label1 {
  font-size: 16px !important; }

/* Deprecated */
.label1Bold {
  font-size: 16px !important;
  font-weight: bold !important; }

/* Deprecated */
.label2 {
  font-size: 14px !important; }

/* Deprecated */
.label2Bold {
  font-size: 14px !important;
  font-weight: bold !important; }

/* Deprecated */
.label3 {
  font-size: 12px !important; }

/* Deprecated */
.label4 {
  font-size: 10px !important; }

/* Deprecated */
.label3Bold {
  font-size: 12px !important;
  font-weight: bold !important; }

.labelRed {
  color: #F04D5D !important; }

/* Deprecated */
.labelLightGrey {
  color: #5A6881 !important; }

/* Deprecated */
.labelLightGreyText {
  fill: #5A6881 !important; }

/* Deprecated */
.labelWhite {
  color: #FFFFFF; }

/* Deprecated */
.labelLightBlack {
  color: #2E3849; }

.h1 {
  font-size: 36px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4; }

.h2 {
  font-size: 32px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4; }

.h3 {
  font-size: 28px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4; }

.h4 {
  font-size: 24px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4; }

.h5 {
  font-size: 20px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4; }

.h6 {
  font-size: 16px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4; }

.s1 {
  font-size: 16px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important; }

.s2 {
  font-size: 14px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important; }

.s2half {
  font-size: 13px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important; }

.s3 {
  font-size: 12px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important; }

.body1 {
  font-size: 20px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

.body2 {
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

.body3 {
  font-size: 14px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

.body4 {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

.textAlignCenter {
  text-align: center; }

.label-xtra-m-semibold {
  font-size: 13px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.label-xtra-s-semibold {
  font-size: 12px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.label-std-m-bold {
  font-size: 13px;
  font-family: sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.label-std-s-regular {
  font-size: 12px;
  font-family: sans-serif;
  line-height: 1.4; }

.label-std-s-bold {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.label-std-s-bold-upper {
  font-size: 10px;
  font-family: sans-serif;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase; }

.label-std-xs-bold-upper {
  font-size: 9px;
  font-family: sans-serif;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase; }

.color-text-primary-high {
  color: rgba(0, 0, 0, 0.87); }

.color-text-primary-med {
  color: rgba(0, 0, 0, 0.6); }

.color-text-primary-low {
  color: rgba(0, 0, 0, 0.38); }

.color-text-alter-button {
  color: #FFFFFF; }

.color-text-alter-top {
  color: white; }

.color-text-alter-high {
  color: rgba(255, 255, 255, 0.87); }

.color-text-alter-med {
  color: rgba(255, 255, 255, 0.6); }

.color-text-primary-500 {
  color: #38A5E8; }

.color-text-success-300 {
  color: #8AE2A1 !important; }

.color-danger-500 {
  color: #F04D5D; }

.color-info-500 {
  color: #547CD6; }

.color-text-greent-std {
  color: #79b63a; }

/*#region E-Rec*/
.pLabel1 {
  color: #676767; }

.pLabel2 {
  font-weight: bold; }

/*#endregion*/
.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

/*dispPolicy*/
.dispPolicy {
  display: flex;
  color: #2E3849;
  height: 100%; }

.dispPolicy .policyLeft {
  display: flex;
  flex-direction: column;
  width: 205px;
  flex-shrink: 0; }

.dispPolicy .policyTitle {
  display: flex;
  font-size: 16px;
  font-weight: bold;
  height: 45px;
  box-sizing: border-box;
  align-items: center;
  border-right: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  flex-shrink: 0;
  padding-left: 20px; }

.dispPolicy .policyModulItemCont {
  position: relative;
  flex-grow: 1;
  height: 100%;
  overflow: hidden; }

.dispPolicy .policyModulItemBorder {
  width: 100%;
  height: 100%;
  border-right: 1px solid #d7d7d7;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  pointer-events: none; }

.dispPolicy .policyModulItemInnerCont {
  overflow: auto;
  height: 100%;
  width: calc(100% + 21px);
  position: relative;
  z-index: 1; }

.dispPolicy .policyModulItemInnerCont2 {
  width: 204px; }

.dispPolicy .policyModulItem {
  display: flex;
  align-items: center;
  font-size: 13px;
  height: 45px;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  margin-top: -1px;
  flex-shrink: 0;
  cursor: pointer;
  border-right: none;
  background-color: #FFFFFF;
  width: 204px; }

.dispPolicy .policyModulItem.activated {
  background-color: #F4F5F8;
  border-right: none;
  font-weight: bold;
  width: 205px; }

.dispPolicy .policyModulItem.activated .polModulIcon {
  border-left: 2px solid #3B93DB; }

.dispPolicy .polModulRemainder {
  flex-grow: 1;
  border-right: 1px solid #d7d7d7; }

.dispPolicy .polModulIcon {
  padding-left: 18px;
  padding-right: 20px;
  border-left: 2px solid transparent;
  height: 100%;
  display: flex; }

.dispPolicy .polModulIcon img {
  display: block; }

.dispPolicy .policyRight {
  flex-grow: 1;
  background-color: #F4F5F8; }

.dispPolicy .policyTop {
  display: flex;
  align-items: center;
  padding-left: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  box-sizing: border-box;
  padding-right: 10px;
  height: 45px;
  border-bottom: 1px solid #d7d7d7;
  flex-shrink: 0; }

.dispPolicy .policyBottom {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 20px 10px 8px;
  height: 45px;
  flex-shrink: 0;
  border-top: 1px solid #d7d7d7; }

.dispPolicy .policyTopTitle {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: bold;
  padding-top: 10px;
  padding-left: 20px;
  padding-bottom: 10px;
  padding-right: 20px;
  display: flex; }

.dispPolicy .policyBtnCont .cp-container {
  position: relative; }

.dispPolicy .policyTopBtnCont .cp-container {
  position: relative; }

.dispPolicy .policyTopBtnCont .rib-other-item {
  font-weight: normal; }

.dispPolicy .policyTopTitleText {
  flex-grow: 1; }

.dispPolicy .policyCopyright {
  flex-grow: 1;
  color: #353535;
  font-size: 12px; }

.dispPolicy .policyRight {
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  z-index: 1; }

.dispPolicy .policyRight > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #F4F5F8; }

.dispPolicy .contentPolicy {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #F4F5F8; }

.dispPolicy .policyBtnCont {
  flex-shrink: 0; }

.dispPolicy .policyInnerCont {
  overflow: auto;
  flex-grow: 1;
  box-sizing: border-box;
  padding-left: 30px;
  padding-right: calc(100% - 1200px);
  margin-right: 30px; }

.dispPolicy .policyGroupHeader {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px; }

.dispPolicy .policySection {
  display: flex;
  margin-bottom: 30px; }

.dispPolicy .policySection.hasChildren {
  margin-bottom: 15px; }

.dispPolicy .policyLabel {
  flex-grow: 1;
  box-sizing: border-box;
  padding-right: 30px; }

.dispPolicy .policyLabelName {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 7px; }

.dispPolicy .policyLabelHint {
  font-size: 13px; }

.dispPolicy .policyComponent {
  flex-shrink: 0;
  width: 300px;
  box-sizing: border-box;
  padding-right: 5%; }

.dispPolicy .policySectionChild {
  display: flex;
  font-size: 13px;
  font-weight: bold;
  align-items: center;
  padding-left: 20px; }

.dispPolicy .policySectionChild.lastChild {
  margin-bottom: 30px; }

.dispPolicy .labelLeft {
  padding-right: 10px; }

.dispPolicy .labelRight {
  padding-left: 10px; }

.dispPolicy .policyGroupHeaderHint {
  font-size: 13px;
  margin-bottom: 15px; }

.dispPolicy .policySectionLine {
  display: flex;
  margin-top: -1px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  align-items: center; }

.dispPolicy .policySectionLine.alt {
  background-color: #F4F5F8; }

.dispPolicy .policySectionLine .policyLabel {
  font-size: 13px;
  font-weight: bold;
  padding-left: 10px; }

.dispPolicy .policyBody {
  padding-bottom: 30px;
  padding-top: 20px; }

.dispPolicy .policyInnerSpaceCont {
  padding-bottom: 20px; }

.policyColumnContainer {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box; }

.policyColumnContainer .policyHalfColumnLeft {
  width: 50%;
  box-sizing: border-box;
  padding-right: 10px; }

.policyColumnContainer .policyHalfColumnRight {
  width: 50%;
  box-sizing: border-box;
  padding-left: 10px; }

/***/
/*dispPolicy2*/
.dispPolicy2 {
  display: flex;
  color: #2E3849;
  height: 100%;
  background-color: #F4F5F8; }

.dispPolicy2 .policyLeft {
  display: flex;
  flex-direction: column;
  width: 215px;
  flex-shrink: 0;
  border-right: 1px solid #d7d7d7;
  border-top: 1px solid #d7d7d7;
  border-left: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  box-sizing: border-box; }

.dispPolicy2 .policyRight {
  flex-grow: 1;
  display: flex;
  flex-direction: column; }

.dispPolicy2 .policyTitle {
  flex-shrink: 0;
  padding-top: 10px;
  padding-left: 20px;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold; }

.dispPolicy2 .policyContent {
  flex-grow: 1;
  overflow: auto; }

.dispPolicy2 .policyFooter {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding-left: 8px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  border-top: 1px solid #d7d7d7;
  position: relative;
  align-items: center;
  margin-top: -1px;
  min-height: 53px; }

.dispPolicy2 .copyright {
  flex-grow: 1;
  color: #353535;
  font-size: 12px; }

.dispPolicy2 .policySave {
  flex-shrink: 0; }

.dispPolicy2 .outerBarLeft {
  height: 100%;
  overflow: hidden; }

.dispPolicy2 .innerBarLeft {
  overflow: auto;
  height: 100%;
  width: calc(100% + 21px); }

.dispPolicy2 .innerBarLeft2 {
  width: 215px; }

.policyContentContainer {
  display: flex;
  box-sizing: border-box;
  padding: 0px 30px 10px 30px; }

.policyContentContainer .policyHalfColumnLeft {
  width: 50%;
  box-sizing: border-box;
  padding-right: 10px; }

.policyContentContainer .policyHalfColumnRight {
  width: 50%;
  box-sizing: border-box;
  padding-left: 10px; }

.numberingBtnCont .cp-container {
  position: relative; }

@media only screen and (max-width: 992px) {
  .policyContentContainer {
    flex-wrap: wrap; }
  .policyContentContainer .policyHalfColumnLeft {
    width: 100%;
    padding-right: 0px; }
  .policyContentContainer .policyHalfColumnRight {
    width: 100%;
    padding-left: 0px; } }

.policyGroupBox {
  padding: 10px 5px 10px 5px; }

.policyItemLabel .labelText {
  font-weight: bold; }

.policyItemLabel {
  margin-bottom: 10px;
  box-sizing: border-box; }

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

.policyItemContent {
  padding-top: 10px;
  padding-left: 10px;
  box-sizing: border-box; }

.policyItemContentRow {
  font-size: 13px;
  padding-right: 10px; }

.policyItemColumnBox {
  display: flex; }

.policyItemContentRow {
  padding-bottom: 10px; }

.policyItemContentTable {
  display: table; }

.policyItemColumnRow {
  display: table-row; }

.policyItemColumnData {
  display: table-cell;
  padding-right: 20px;
  padding-bottom: 10px; }

.policyRowItem {
  font-size: 13px; }

.policyComponentMidItem {
  display: inline-block;
  padding: 0px 2px;
  box-sizing: border-box; }

.policyItemContainer .columnarLeftBlue {
  padding-top: 1px;
  padding-bottom: 1px; }

.policyItemContainer {
  background-color: #FFFFFF;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  padding: 20px 20px;
  margin-top: -1px; }

.policyRowItem {
  margin: 10px 0px; }

.contentContainer {
  box-sizing: border-box;
  padding-top: 5px;
  padding-left: 30px;
  padding-right: 10px;
  width: 100%; }

.policyRowInnerItem {
  margin: 10px 0;
  padding-left: 25px;
  box-sizing: border-box; }

.policyRowMultiItem {
  display: flex;
  align-items: center; }

.policyComponentWithLabel {
  display: flex;
  align-items: center; }

.policyComponentWithLabel .labelRight {
  font-size: 13px; }

/***/
.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

* {
  outline: none; }

/*PIDHint*/
.pidHint-cont {
  position: absolute;
  min-width: 100px;
  box-sizing: border-box;
  padding: 0px 5px;
  height: 25px;
  font-size: 12px;
  text-align: center;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5; }

.pidHint-cont.pidHint-error {
  white-space: nowrap;
  padding: 2px 5px;
  box-sizing: border-box;
  max-width: 250px;
  width: auto;
  height: auto;
  min-height: 25px;
  white-space: pre-wrap; }

.pidHint-cont.pidHint-label {
  width: 350px;
  text-align: left;
  box-sizing: border-box;
  padding: 10px;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  border: 1px solid #d7d7d7;
  background-color: #F4F5F8;
  color: #2E3849;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  white-space: pre-line; }

.pidHint-cont.pidHint-ess {
  text-align: left;
  box-sizing: border-box;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  background-color: transparent;
  color: #2E3849;
  font-size: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  font-weight: normal;
  line-height: 1.5;
  white-space: normal;
  padding: 0;
  margin: 0; }

/*Button Trustee*/
.btn-trust-cont {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  flex-shrink: 0; }

.btn-trust-cont > .innerBtn {
  height: 32px; }

.btn-trust-cont-inactive {
  cursor: default;
  opacity: 0.5; }

.btn-trust-sy-1 {
  width: 60px;
  border-radius: 3px;
  background-color: #38a169;
  color: #ffffff; }

.btn-trust-sy-1[data-type="refresh"] {
  width: 50px; }

.btn-trust-sy-1:not(.btn-trust-cont-inactive):hover {
  opacity: 0.8; }

.btn-trust-sy-2 > .innerBtn {
  width: 50px;
  border-radius: 0px;
  border: 1px solid transparent; }

.btn-trust-sy-2:hover > .innerBtn {
  border: 1px solid #38A5E8 !important; }

.btn-trust-sy-3 {
  width: 60px;
  border-radius: 3px;
  background-color: #FFFFFF;
  border: 1px solid #d7d7d7;
  color: #2E3849; }

.btn-trust-sy-3 > .innerBtn {
  width: 60px; }

.btn-trust-sy-3:not(.btn-trust-cont-inactive):hover {
  border: 1px solid #38A5E8 !important; }

.btn-trust-sy-4 {
  font-size: 11px;
  font-weight: bold;
  width: 78px;
  border-radius: 3px;
  background-color: #3F3F3F;
  color: #ffffff; }

.btn-trust-sy-5 {
  font-size: 11px;
  font-weight: bold;
  width: 78px;
  border-radius: 3px;
  background-color: transparent;
  color: #353535; }

.btn-img-other {
  margin-right: 5px; }

.btn-trust-group {
  display: flex;
  position: relative; }

.btn-trust-group.sep-right {
  border-right: 1px solid #C4C4C4;
  padding-right: 5px; }

.btn-trust-group .btn-trust-cont:not(.btn-trust-cont-first) {
  border-left: 1px solid transparent;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px; }

.btn-trust-group .btn-trust-cont:not(.btn-trust-cont-last) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px; }

.btn-trust-cont[data-type=filter] > .innerBtn {
  background-image: url("../Images/icons/icons_filter 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.btn-trust-cont[data-type=filter].activated > .innerBtn {
  background-color: #6B74AF;
  background-image: url("../Images/icons/icons_filter 16 px white.png");
  background-repeat: no-repeat;
  background-position: center; }

.no-pevent {
  pointer-events: none; }

/*End Button Trustee*/
/*Textbox*/
.cp-textBoxCont {
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  height: 32px;
  display: flex;
  background-color: #FFFFFF;
  position: relative;
  align-items: center; }
  .cp-textBoxCont.cp-maskHour .cp-textBoxContInput {
    text-align: center; }
  .cp-textBoxCont.cp-display {
    border-top: none;
    border-left: none;
    border-right: none; }
    .cp-textBoxCont.cp-display .cp-textBoxContInput {
      background-color: #ecedf0; }
  .cp-textBoxCont.cp-standard2.boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #d7d7d7; }
  .cp-textBoxCont.cp-standard2.boxBorder.cp-focused {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #d7d7d7; }
  .cp-textBoxCont.cp-standard2.cp-error.boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #F04D5D; }

.cp-textBoxContInput {
  width: 0;
  flex-grow: 1;
  border: none;
  box-sizing: border-box;
  padding: 0px 6px;
  height: 100%; }

.cp-textBoxCont .searchButton {
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 24px;
  cursor: pointer; }

.cp-textBoxCont .viewPassword {
  width: 25px;
  height: 24px;
  cursor: pointer;
  margin-right: 5px;
  background-image: url("../Images/icons/viewPassword.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-textBoxCont .viewPassword.visible {
  background-image: url("../Images/icons/viewPassword2.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-textBoxCont .flag {
  background-image: url("../Images/icons/id-flag.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 24px;
  background-size: auto 24px; }

.cp-textBoxCont.cp-bold .cp-textBoxContInput {
  font-weight: bold; }

.cp-textBoxCont.error-top .errorCont {
  position: absolute;
  right: 0;
  transform: translateY(-100%);
  top: 0; }

.cp-textBoxCont.cp-grid .errorCont {
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1px;
  cursor: default; }

.cp-textBoxCont.cp-grid {
  height: 30px; }

.cp-textBoxCont.cp-disabled.disabledStyleStandard .cp-textBoxContInput {
  background-color: #FFFFFF; }

.cp-textBoxCont.cp-alignRight .cp-textBoxContInput {
  text-align: right !important; }

.cp-textBoxCont.cp-focused:not(.cp-textBoxLogin) {
  border: 1px solid #38A5E8;
  box-shadow: 0 0 3px 0px rgba(16, 91, 142, 0.25); }

.cp-textBoxCont.error-right .errorCont {
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1px;
  cursor: default; }

.cp-textBoxCont.cp-textBoxLogin {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #CECECE !important; }
  .cp-textBoxCont.cp-textBoxLogin.boxBorder {
    box-shadow: none !important; }
  .cp-textBoxCont.cp-textBoxLogin .cp-textBoxContInput:hover {
    box-shadow: none !important; }

.cp-textBoxCont.cp-textBoxLoginFocused {
  border-bottom: 3px solid #3B93DB !important; }

.cp-textBoxCont.cp-error {
  border: 1px solid #bd2431; }

.cp-textBoxCont.cp-entryTransNo {
  background-color: transparent;
  height: 38px; }
  .cp-textBoxCont.cp-entryTransNo.boxBorder {
    border-radius: 4px; }
  .cp-textBoxCont.cp-entryTransNo .cp-textBoxContInput {
    color: rgba(255, 255, 255, 0.87);
    background-color: rgba(0, 0, 0, 0.08); }
  .cp-textBoxCont.cp-entryTransNo .cp-textBoxContInput::placeholder {
    color: rgba(255, 255, 255, 0.6); }
  .cp-textBoxCont.cp-entryTransNo.cp-disabled {
    background-color: rgba(0, 0, 0, 0.08) !important; }
    .cp-textBoxCont.cp-entryTransNo.cp-disabled .cp-textBoxContInput {
      background-color: rgba(0, 0, 0, 0.08) !important; }

.cp-textBoxCont.cp-standardBig {
  border-radius: 10px;
  height: 42px; }
  .cp-textBoxCont.cp-standardBig .cp-textBoxContInput {
    font-size: 16px;
    padding-left: 12px;
    background: transparent; }

.cp-buttonEditCont.cp-standardBig .inner {
  border-radius: 10px;
  height: 42px; }

.cp-buttonEditCont.cp-standardBig .input {
  font-size: 16px;
  padding-left: 12px;
  background: transparent; }

.cp-buttonEditCont.cp-standardBig .searchButton {
  margin-right: 10px; }

.cp-textBoxCont.cp-erec {
  border-radius: 6px;
  overflow: hidden; }

/*End Textbox*/
/*Combobox*/
.cp-comboboxCont {
  height: 32px;
  background-color: white;
  position: relative;
  text-align: left; }
  .cp-comboboxCont.cp-standard2 .boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #d7d7d7; }
  .cp-comboboxCont.cp-standard2.cp-focused .boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #d7d7d7; }
  .cp-comboboxCont.cp-standard2.cp-error .boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #F04D5D; }
  .cp-comboboxCont.cp-standardBig {
    height: 42px;
    border-radius: 10px; }
    .cp-comboboxCont.cp-standardBig .inner {
      height: 42px;
      border-radius: 10px; }
    .cp-comboboxCont.cp-standardBig input {
      font-size: 16px;
      padding-left: 10px;
      background: transparent; }
    .cp-comboboxCont.cp-standardBig .selection-cont .selection-item {
      font-size: 16px;
      padding-left: 10px; }

.cp-comboboxCont .inner {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  align-content: center; }

.cp-comboboxCont .input {
  border: none;
  flex-grow: 1;
  padding: 0px 6px;
  box-sizing: border-box;
  width: 0; }

.cp-comboboxCont .arrow {
  height: 100%;
  width: 24px;
  background-repeat: no-repeat;
  background-position: center; }

.cp-comboboxCont.cp-noBorder > .inner {
  border: 1px solid transparent; }

.cp-comboboxCont .currImageCont {
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 4px;
  box-sizing: border-box; }

.cp-comboboxCont .currImageText {
  margin-left: 8px; }

.selection-cont {
  position: absolute;
  width: 100%;
  background: white;
  border-left: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  box-sizing: border-box;
  z-index: 2;
  max-height: 200px;
  overflow: auto; }
  .selection-cont .selection-item {
    display: flex;
    align-items: center;
    min-height: 19px;
    padding: 4px 4px;
    cursor: default; }
    .selection-cont .selection-item .selection-imagetext {
      margin-left: 8px; }
  .selection-cont .selection-item:hover {
    background-color: #C4C4C4; }

.selection-cont.overflowedY {
  border-top: 1px solid #d7d7d7; }

.cp-comboboxCont.overflowedY .selection-cont {
  top: 0px;
  transform: translateY(-100%);
  border-top: 1px solid #d7d7d7; }

.cp-comboboxCont:not(.cp-disabled) .arrow {
  cursor: pointer; }

.cp-comboboxCont:not(.cp-disabled) .arrow:hover {
  background-color: #C4C4C4; }

.cp-comboboxCont.cp-grid {
  height: 30px; }

.cp-comboboxCont.cp-grid .input {
  text-align: left !important; }

.cp-comboboxCont.cp-grid .inner {
  height: 30px; }

.cp-comboboxCont:not(.cp-grid) .errorCont {
  position: absolute;
  right: 0;
  transform: translateY(-100%);
  top: 0; }

.cp-comboboxCont.cp-grid .errorCont {
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 33px;
  cursor: default; }

.cp-comboboxCont.cp-error .inner {
  border: 1px solid #bd2431; }

.cp-comboboxCont.cp-disabled:not(.disabledStyleStandard) .inner {
  background-color: #F4F5F8; }

.cp-comboboxCont.cp-disabled:not(.disabledStyleStandard) .input {
  background-color: #F4F5F8; }

.cp-comboboxCont.cp-focused {
  z-index: 2; }

.cp-comboboxCont.cp-focused .inner {
  border: 1px solid #38A5E8;
  box-shadow: 0 0 3px 0px rgba(16, 91, 142, 0.25); }

/*End Combobox*/
/*RadioButton*/
.cp-radioButtonCont {
  display: flex; }
  .cp-radioButtonCont.shortItemPadding > .item {
    padding-top: 6px;
    padding-bottom: 6px; }
  .cp-radioButtonCont.cp-bold {
    font-weight: bold; }
  .cp-radioButtonCont.cp-hintTypeIcon .content {
    display: flex;
    align-items: center; }
  .cp-radioButtonCont .hintIcon {
    display: inline-block;
    flex-shrink: 0;
    height: 16px;
    width: 16px;
    vertical-align: middle;
    margin-left: 8px;
    background-image: url("../Images/icons/icons_info 16px.svg");
    background-repeat: no-repeat;
    background-position: center; }

.cp-radioButtonCont > .item {
  box-sizing: border-box;
  background-color: #FFFFFF;
  border: 1px solid #d7d7d7;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  cursor: pointer; }
  .cp-radioButtonCont > .item .text {
    line-height: 1.5; }

.cp-radioButtonCont > .item .innerItem {
  display: flex;
  align-items: center; }

.cp-radioButtonCont > .item .img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 30px; }

.cp-radioButtonCont > .item .img-content {
  width: 10px;
  height: 10px;
  border-radius: 25px; }

.cp-radioButtonCont > .item .hintText {
  font-size: 11px; }

.cp-radioButtonCont.alignment .item {
  padding: 5px !important; }

.cp-radioButtonCont.cp-policy > .item {
  padding: 20px 10px; }

.cp-radioButtonCont.cp-policy > .item .img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: initial;
  margin-right: 10px; }

.cp-radioButtonCont.cp-policy > .item .img-content {
  width: 20px;
  height: 20px;
  border-radius: 25px;
  box-sizing: border-box; }

.cp-radioButtonCont.cp-policy > .item:not(.selected) .img-content {
  border: 1px solid #38a169; }

.cp-radioButtonCont.cp-policy > .item.selected .img-content {
  background-color: #38a169; }

.cp-radioButtonCont.cp-withSymbol .item:not(.selected) .img-content {
  border: 1px solid #848284; }

.cp-radioButtonCont.cp-withSymbol .item.selected .img-content {
  background-color: #38a169; }

.cp-radioButtonCont.cp-nowrap.cp-horizontal .item:not(:first-child) {
  border-left: 1px solid transparent; }

.cp-radioButtonCont.cp-wrapped {
  flex-wrap: wrap; }

.cp-radioButtonCont.cp-wrapped .item:not(.first-row) {
  border-top: 1px solid transparent; }

.cp-radioButtonCont.cp-wrapped .item:not(.first-column) {
  border-left: 1px solid transparent; }

.cp-radioButtonCont.cp-withoutSymbol .item {
  padding-left: 20px;
  padding-top: 12px;
  padding-bottom: 12px; }

.cp-radioButtonCont.cp-withoutSymbol .item.selected {
  color: #ffffff;
  background-color: #38a169; }

.cp-radioButtonCont.cp-withoutSymbol .text {
  font-weight: 600;
  font-size: 14px; }

.cp-radioButtonCont.cp-withoutSymbol .hintText {
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.5; }

.cp-radioButtonCont.cp-customContent .item {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 12px; }

.cp-radioButtonCont.cp-customContent .item.selected {
  color: #ffffff;
  background-color: #38a169; }

.cp-radioButtonCont.cp-customContent .text {
  font-weight: 600;
  font-size: 14px; }

.cp-radioButtonCont.cp-customContent .hintText {
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.5; }

.cp-radioButtonCont.cp-customContent .itemOrientation {
  text-align: center;
  cursor: pointer; }
  .cp-radioButtonCont.cp-customContent .itemOrientation .label {
    margin-top: 3px; }

.cp-radioButtonCont.cp-customContent .marginSelection {
  display: flex;
  cursor: pointer; }
  .cp-radioButtonCont.cp-customContent .marginSelection .leftSide {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 20px; }
  .cp-radioButtonCont.cp-customContent .marginSelection .rightSide {
    flex-grow: 1; }
  .cp-radioButtonCont.cp-customContent .marginSelection .name {
    font-weight: bold;
    margin-bottom: 3px; }
  .cp-radioButtonCont.cp-customContent .marginSelection .info {
    display: flex; }
    .cp-radioButtonCont.cp-customContent .marginSelection .info .left {
      margin-right: 15px; }
  .cp-radioButtonCont.cp-customContent .marginSelection .row:not(:last-child) {
    margin-bottom: 3px; }

.cp-radioButtonCont.cp-customContentBlue .item {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 12px; }

.cp-radioButtonCont.cp-customContentBlue .item.selected {
  color: #ffffff;
  background-color: #3B93DB; }

.cp-radioButtonCont.cp-customContentBlue .text {
  font-weight: 600;
  font-size: 14px; }

.cp-radioButtonCont.cp-customContentBlue .hintText {
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.5; }

.cp-radioButtonCont.cp-customContentBlue .itemOrientation {
  text-align: center;
  cursor: pointer; }
  .cp-radioButtonCont.cp-customContentBlue .itemOrientation .label {
    margin-top: 3px; }

.cp-radioButtonCont.cp-customContentBlue .marginSelection {
  display: flex;
  cursor: pointer; }
  .cp-radioButtonCont.cp-customContentBlue .marginSelection .leftSide {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 20px; }
  .cp-radioButtonCont.cp-customContentBlue .marginSelection .rightSide {
    flex-grow: 1; }
  .cp-radioButtonCont.cp-customContentBlue .marginSelection .name {
    font-weight: bold;
    margin-bottom: 3px; }
  .cp-radioButtonCont.cp-customContentBlue .marginSelection .info {
    display: flex; }
    .cp-radioButtonCont.cp-customContentBlue .marginSelection .info .left {
      margin-right: 15px; }
  .cp-radioButtonCont.cp-customContentBlue .marginSelection .row:not(:last-child) {
    margin-bottom: 3px; }

.cp-radioButtonCont.cp-customContentBlueWhiteShadowed .item {
  border: 1px solid transparent;
  background-color: #FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  border-radius: 12px;
  padding: 24px;
  overflow: hidden; }

.cp-radioButtonCont.cp-customContentBlueWhiteShadowed .item:not(:last-child) {
  margin-bottom: 20px; }

.cp-radioButtonCont.cp-customContentBlueWhiteShadowed .item.selected {
  border: 1px solid #38A5E8;
  border-top: 1px solid #38A5E8;
  background-color: rgba(56, 165, 232, 0.08); }

.cp-radioButtonCont.cp-customContentBlueWhiteShadowed .item.selected:not(:first-child) {
  border-top: 1px solid #38A5E8 !important; }

.cp-radioButtonCont.cp-customContentBlueWhiteShadowed .text {
  font-weight: 600;
  font-size: 14px; }

.cp-radioButtonCont.cp-customContentBlueWhiteShadowed .hintText {
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.5; }

.cp-radioButtonCont.cp-customContentBlueWhiteShadowed .itemOrientation {
  text-align: center;
  cursor: pointer; }
  .cp-radioButtonCont.cp-customContentBlueWhiteShadowed .itemOrientation .label {
    margin-top: 3px; }

.cp-radioButtonCont.cp-customContentBlueWhiteShadowed .marginSelection {
  display: flex;
  cursor: pointer; }
  .cp-radioButtonCont.cp-customContentBlueWhiteShadowed .marginSelection .leftSide {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 20px; }
  .cp-radioButtonCont.cp-customContentBlueWhiteShadowed .marginSelection .rightSide {
    flex-grow: 1; }
  .cp-radioButtonCont.cp-customContentBlueWhiteShadowed .marginSelection .name {
    font-weight: bold;
    margin-bottom: 3px; }
  .cp-radioButtonCont.cp-customContentBlueWhiteShadowed .marginSelection .info {
    display: flex; }
    .cp-radioButtonCont.cp-customContentBlueWhiteShadowed .marginSelection .info .left {
      margin-right: 15px; }
  .cp-radioButtonCont.cp-customContentBlueWhiteShadowed .marginSelection .row:not(:last-child) {
    margin-bottom: 3px; }

.cp-radioButtonCont > .item > .addContent {
  cursor: initial; }

.cp-radioButtonCont.cp-vertical {
  flex-direction: column; }

.cp-radioButtonCont.cp-vertical .item:not(:first-child) {
  border-top: 1px solid transparent; }

.cp-radioButtonCont.cp-vertical.noLineSeparator {
  border: 1px solid #d7d7d7; }
  .cp-radioButtonCont.cp-vertical.noLineSeparator .item {
    border: 1px solid transparent; }

.cp-radioButtonCont.cp-disabled .item {
  opacity: 0.5;
  cursor: default; }

.cp-radioButtonCont.cp-disabled.cp-disabledNormal .item {
  opacity: 1;
  cursor: default; }

.cp-radioButtonCont.cp-disabled.cp-policy .item {
  opacity: 1;
  cursor: default; }

.cp-radioButtonCont:not(.cp-disabled) .item:hover {
  border: 1px solid #38A5E8 !important; }

.cp-radioButtonCont.cp-styleESS .iconBoxCont {
  margin-right: 18px;
  flex-shrink: 0; }

.cp-radioButtonCont.cp-styleESS:not(.cp-disabled) .item:hover {
  border: 1px solid rgba(0, 0, 0, 0.48) !important; }
  .cp-radioButtonCont.cp-styleESS:not(.cp-disabled) .item:hover.selected {
    background-color: rgba(255, 255, 255, 0.08);
    border: 2px solid #000000 !important; }

.cp-radioButtonCont.cp-styleESS .innerItem {
  width: 100%; }

.cp-radioButtonCont.cp-styleESS .item {
  padding: 5px 24px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(0, 0, 0, 0.48) !important;
  margin-bottom: 12px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  height: 61px;
  font-size: 16px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important; }
  .cp-radioButtonCont.cp-styleESS .item .imgChecked {
    display: none; }
  .cp-radioButtonCont.cp-styleESS .item.selected {
    background-color: rgba(255, 255, 255, 0.08);
    border: 2px solid #000000 !important; }
    .cp-radioButtonCont.cp-styleESS .item.selected .imgChecked {
      display: block; }

.cp-radioButtonCont.cp-styleESS .content {
  flex-grow: 1;
  padding-right: 5px;
  box-sizing: border-box; }

.cp-radioButtonCont.cp-styleESS .imgIcon {
  flex-shrink: 0; }

/*End RadioButton*/
/*DateBox*/
.cp-dateBoxCont {
  display: inline-flex;
  width: 100%;
  position: relative; }
  .cp-dateBoxCont.cp-standard2 .boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #d7d7d7; }
  .cp-dateBoxCont.cp-standard2.cp-focused .boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #d7d7d7; }
  .cp-dateBoxCont.cp-standard2.cp-error .boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #F04D5D; }

.cp-dateBoxCont .innerCont {
  height: 32px;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  align-items: center;
  display: flex;
  background-color: #FFFFFF;
  width: 100%; }

.cp-dateBoxCont .input {
  height: 100%;
  box-sizing: border-box;
  border: none;
  width: 0;
  flex-grow: 1;
  padding: 0px 6px;
  padding-right: 0px; }

.cp-dateBoxCont .arrowDown {
  position: static;
  display: flex;
  align-items: center;
  height: 100%;
  width: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none; }

.cp-dateBoxCont.error-right .errorCont {
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1px;
  cursor: default; }

.cp-dateBoxCont.error-top .errorCont {
  position: absolute;
  right: 0;
  transform: translateY(-100%);
  top: 0; }

.cp-dateBoxCont.error-rightOuter .errorCont {
  position: absolute;
  right: -20px;
  top: 7px; }

.cp-dateBoxCont.cp-standardBig .innerCont {
  height: 42px;
  border-radius: 10px; }

.cp-dateBoxCont.cp-standardBig .input {
  font-size: 16px;
  padding-left: 12px;
  background: transparent; }

.cp-dateBoxCont:not(.cp-disabled) .arrowDown {
  cursor: pointer; }

.cp-dateBoxCont:not(.cp-disabled) .arrowDown:hover {
  background-color: #C4C4C4; }

.cp-dateBoxCont.cp-grid .innerCont {
  height: 30px; }

.cp-dateBoxCont.cp-grid .errorCont {
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1px;
  cursor: default; }

.cp-dateBoxCont.cp-error .innerCont {
  border: 1px solid #bd2431; }

.ui-datepicker {
  z-index: 4 !important; }

.cp-dateBoxCont.cp-disabled .input {
  background-color: #F4F5F8; }

.cp-dateBoxCont.cp-disabled .innerCont {
  background-color: #F4F5F8; }

.ui-datepicker-calendar th:first-child, .ui-datepicker-calendar td:first-child {
  padding-left: 25px; }

.ui-datepicker-calendar th:last-child, .ui-datepicker-calendar td:last-child {
  padding-right: 25px; }

.ui-datepicker-close {
  border-radius: 0 !important;
  border: 1px solid #106db5 !important;
  opacity: 1 !important;
  font-weight: normal !important;
  color: #106db5 !important;
  display: none; }

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("../fonts/glyphicons-halflings-regular.eot");
  src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg"); }

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1; }

.glyphicon-chevron-left:before {
  content: "\e079"; }

.glyphicon-chevron-right:before {
  content: "\e080"; }

.cp-dateBoxCont.cp-focused .innerCont {
  border: 1px solid #38A5E8;
  box-shadow: 0 0 3px 0px rgba(16, 91, 142, 0.25); }

/*End DateBox*/
/*Period*/
.cp-periodCont {
  display: inline-flex;
  align-items: center; }
  .cp-periodCont.cp-stretch {
    width: 100%;
    display: flex; }
    .cp-periodCont.cp-stretch.asAtMonths .periodStartMonth {
      flex-grow: 0.7; }
    .cp-periodCont.cp-stretch.asAtMonths .periodStartYear {
      flex-grow: 0.3; }

.cp-periodCont .separator {
  margin-left: 10px;
  margin-right: 10px; }

/*End Period*/
/*Button Edit*/
.cp-buttonEditCont {
  position: relative; }
  .cp-buttonEditCont.error-right .errorCont {
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 1px;
    cursor: default; }
  .cp-buttonEditCont.cp-standard2 .boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #d7d7d7; }
  .cp-buttonEditCont.cp-standard2.cp-focused .boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #d7d7d7; }
  .cp-buttonEditCont.cp-standard2.cp-error .boxBorder {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #F04D5D; }
  .cp-buttonEditCont .colorIconCont {
    width: 15px;
    height: 15px;
    margin-left: 8px; }
  .cp-buttonEditCont .imgIcon {
    width: 21px;
    height: 21px;
    margin-left: 8px;
    object-fit: contain; }

.cp-buttonEditCont .inner {
  position: relative;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  background-color: #FFFFFF;
  display: flex;
  height: 32px;
  align-items: center; }

.cp-buttonEditCont .input {
  border: none;
  padding: 6px;
  width: 0;
  flex-grow: 1;
  padding-right: 2px; }

.cp-buttonEditCont .searchButton {
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 22px;
  cursor: pointer; }

.cp-buttonEditCont .buttonCont {
  height: 32px;
  width: 100%;
  box-sizing: border-box;
  padding: 3px;
  border-left: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
  cursor: pointer; }

.cp-buttonEditCont .innerButton {
  background-color: #3B93DB;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

.cp-buttonEditCont .iconPlus {
  background-image: url("../Images/icons/icons_plus 12 px white.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 12px;
  width: 12px;
  margin-right: 5px; }

.cp-buttonEditCont .buttonText {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold; }

.cp-buttonEditCont.cp-readonly .inner {
  background-color: #FFFFFF; }

.cp-buttonEditCont.cp-readonly .input {
  background-color: #FFFFFF;
  cursor: pointer; }

.cp-buttonEditCont.cp-readonly .searchButton {
  background-color: #FFFFFF; }

.cp-buttonEditCont.cp-grid .inner {
  height: 30px; }

.cp-buttonEditCont.cp-grid .input {
  /*firefox: button edit dalam grid border kepotong jika height tidak 100%*/
  height: 100%;
  box-sizing: border-box; }

.cp-buttonEditCont:not(.cp-grid).error-top .errorCont {
  position: absolute;
  right: 0;
  transform: translateY(-100%);
  top: 0; }

.cp-buttonEditCont.cp-grid .errorCont {
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1px;
  cursor: default; }

.cp-buttonEditCont.cp-error .inner {
  border: 1px solid #bd2431; }

.cp-buttonEditCont.cp-disabled .inner {
  background-color: #F4F5F8; }

.cp-buttonEditCont.cp-disabled .input {
  background-color: #F4F5F8; }

.cp-buttonEditCont.cp-disabled .searchButton {
  cursor: default; }

.cp-buttonEditCont.cp-styleESS .inner {
  border-radius: 6px;
  height: 56px;
  border: 1px solid transparent;
  padding: 0px 20px; }
  .cp-buttonEditCont.cp-styleESS .inner .input {
    font-size: 16px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }
    .cp-buttonEditCont.cp-styleESS .inner .input::placeholder {
      font-size: 16px !important;
      font-family: Poppins, sans-serif !important;
      font-weight: 600 !important;
      line-height: 1.4 !important; }

.cp-buttonEditCont.cp-styleESS .searchButton {
  background-size: 18px; }

.dropDownCont {
  position: absolute;
  width: 100%;
  top: calc(100% + 2px);
  box-sizing: border-box;
  background-color: #FFFFFF;
  z-index: 3;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  margin-top: 4px; }

.inputCodeCont {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 10px; }

.inputCodeLabel {
  font-size: 9px;
  font-family: sans-serif;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 2px; }

.inputCode {
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  width: 100%;
  padding: 7px 6px;
  box-sizing: border-box; }

.cp-buttonEditCont.cp-focused {
  z-index: 1; }

.cp-buttonEditCont.cp-focused .inner {
  border: 1px solid #38A5E8;
  box-shadow: 0 0 3px 0px rgba(16, 91, 142, 0.25); }

/*End Button Edit*/
/*Search Dropdown*/
::placeholder {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.38); }

.searchDropDownCont {
  z-index: 1;
  max-height: 175px;
  overflow: hidden; }
  .searchDropDownCont .sdd-itemList {
    max-height: 175px;
    overflow: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    box-sizing: border-box; }

.sdd-loading-cont {
  display: flex;
  justify-content: center; }

.sdd-infoNode {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  padding: 7px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.5;
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6); }

.sdd-nodata {
  padding: 0px; }

.sdd-infoNode {
  white-space: normal; }

.sdd-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 32px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0px 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); }

.sdd-item-hovered {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }

/*End Search Dropdown*/
/*TabSheetDt*/
.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

.cp-tabSheetDtCont {
  position: relative; }
  .cp-tabSheetDtCont.noPaddingHor {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important; }
  .cp-tabSheetDtCont .btnScroller {
    flex-shrink: 0; }
    .cp-tabSheetDtCont .btnScroller.prev {
      margin-right: 4px; }
    .cp-tabSheetDtCont .btnScroller.next {
      margin-left: 4px; }
  .cp-tabSheetDtCont .item-cont {
    flex-shrink: 0; }

.cp-tabSheetDtCont.useHScroll {
  align-items: center; }
  .cp-tabSheetDtCont.useHScroll .itemContainer {
    flex-grow: 1;
    overflow: hidden;
    display: flex; }
  .cp-tabSheetDtCont.useHScroll.cp-detail2 .itemContainer {
    justify-content: center; }

.cp-tabSheetDtCont.noPaddingVer {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

.cp-tabSheetDtCont.cp-horizontal {
  display: flex;
  font-size: 13px;
  font-weight: bold;
  border-bottom: 1px solid #d7d7d7;
  margin: 0 20px 10px 20px; }

.cp-tabSheetDtCont.cp-horizontal .item-cont {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 8px;
  padding-top: 8px;
  box-sizing: border-box;
  border-top: 1px solid transparent;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.87);
  text-align: center;
  min-width: 110px;
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }
  .cp-tabSheetDtCont.cp-horizontal .item-cont.pressed {
    font-size: 12px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }

.cp-tabSheetDtCont.cp-horizontal .item-cont:focus {
  border-left: 1px dotted rgba(0, 0, 0, 0.2);
  border-right: 1px dotted rgba(0, 0, 0, 0.2);
  border-top: 1px dotted rgba(0, 0, 0, 0.2);
  border-bottom: 3px solid rgba(56, 165, 232, 0.24); }

.cp-tabSheetDtCont.cp-horizontal .item-cont-active {
  border-bottom: 3px solid #3B93DB;
  font-size: 12px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.cp-tabSheetDtCont.cp-horizontal .item-cont-active:focus {
  border-bottom: 3px solid #3B93DB; }

.cp-tabSheetDtCont.cp-horizontal .item-cont:not(.item-cont-active):hover {
  border-bottom: 3px solid rgba(56, 165, 232, 0.24); }

.cp-tabSheetDtCont.cp-vertical {
  display: flex;
  font-size: 13px;
  flex-direction: column; }
  .cp-tabSheetDtCont.cp-vertical .item-cont {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: #2E3849;
    text-align: left;
    border-top: 1px solid #d7d7d7;
    margin-top: -1px; }
  .cp-tabSheetDtCont.cp-vertical .item-cont-active {
    font-weight: bold; }

.tabSheetHdCont .cp-tabSheetDtCont {
  margin: 0; }

.cp-tabSheetDtCont.cp-sideBar {
  display: flex;
  font-size: 13px;
  flex-direction: column; }
  .cp-tabSheetDtCont.cp-sideBar .item-cont {
    display: flex;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
    color: #2E3849;
    text-align: left;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    margin-top: -1px;
    background-color: #FFFFFF;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
    .cp-tabSheetDtCont.cp-sideBar .item-cont .tabName {
      font-size: 12px;
      font-family: Poppins, sans-serif;
      font-weight: 600;
      line-height: 1.4; }
  .cp-tabSheetDtCont.cp-sideBar .item-cont-active {
    background-color: #38a169;
    color: #FFFFFF;
    font-size: 13px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
    .cp-tabSheetDtCont.cp-sideBar .item-cont-active .tabName {
      color: #FFFFFF;
      font-size: 13px;
      font-family: Poppins, sans-serif;
      font-weight: 600;
      line-height: 1.4; }
  .cp-tabSheetDtCont.cp-sideBar .item-cont::after {
    content: ' ';
    background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    padding-left: 3px;
    transform: rotate(-90deg); }
  .cp-tabSheetDtCont.cp-sideBar .item-cont-active::after {
    background-image: url("../Images/icons/icons_arrow_down 12 px white.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-tabSheetDtCont.cp-sideBar .groupHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    color: #878787;
    font-size: 14px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }
  .cp-tabSheetDtCont.cp-sideBar .groupCollExp {
    width: 12px;
    height: 12px;
    padding-left: 3px;
    cursor: pointer; }
  .cp-tabSheetDtCont.cp-sideBar .groupCollExp.expanded {
    background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-tabSheetDtCont.cp-sideBar .groupCollExp.collapsed {
    background-image: url("../Images/icons/icons_arrow_left 12px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }

.cp-tabSheetDtCont.cp-sideBarBlue {
  display: flex;
  font-size: 13px;
  flex-direction: column; }
  .cp-tabSheetDtCont.cp-sideBarBlue .item-cont {
    display: flex;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
    color: #2E3849;
    text-align: left;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    margin-top: -1px;
    background-color: #FFFFFF;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
  .cp-tabSheetDtCont.cp-sideBarBlue .item-cont-active {
    color: #FFFFFF;
    background-color: #38A5E8;
    font-size: 13px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
  .cp-tabSheetDtCont.cp-sideBarBlue .item-cont::after {
    content: ' ';
    background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    padding-left: 3px;
    transform: rotate(-90deg); }
  .cp-tabSheetDtCont.cp-sideBarBlue .item-cont-active::after {
    background-image: url("../Images/icons/icons_arrow_down 12 px white.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-tabSheetDtCont.cp-sideBarBlue .groupHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.87);
    font-size: 14px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }
  .cp-tabSheetDtCont.cp-sideBarBlue .groupCollExp {
    width: 12px;
    height: 12px;
    padding-left: 3px;
    cursor: pointer; }
  .cp-tabSheetDtCont.cp-sideBarBlue .groupCollExp.expanded {
    background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-tabSheetDtCont.cp-sideBarBlue .groupCollExp.collapsed {
    background-image: url("../Images/icons/icons_arrow_left 12px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }

.cp-tabSheetDtCont.noArrow .item-cont::after {
  display: none; }

.cp-tabSheetDtCont.noArrow .item-cont-active::after {
  display: none; }

.cp-tabSheetDtCont.nameWrapped .tabName {
  word-wrap: break-word;
  overflow: hidden; }

.cp-tabSheetDtCont.cp-policy {
  display: flex;
  font-size: 13px;
  flex-direction: column; }

.cp-tabSheetDtCont.cp-policy .item-cont {
  display: flex;
  justify-content: space-between;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 15px;
  padding-bottom: 15px;
  box-sizing: border-box;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.87);
  text-align: left;
  border-bottom: 1px solid #d7d7d7;
  font-size: 12px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.cp-tabSheetDtCont.cp-policy .item-cont-active {
  color: #FFFFFF;
  background-color: #38a169;
  font-size: 13px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.cp-tabSheetDtCont.cp-policy .groupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  color: #2E3849;
  font-size: 13px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.cp-tabSheetDtCont.cp-policy .groupCollExp {
  width: 12px;
  height: 12px;
  padding-left: 3px;
  cursor: pointer; }

.cp-tabSheetDtCont .groupHeader {
  cursor: pointer; }

.cp-tabSheetDtCont .group-cont.expanded .groupCollExp {
  background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-tabSheetDtCont .group-cont.collapsed .groupCollExp {
  background-image: url("../Images/icons/icons_arrow_left 12px grey.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-tabSheetDtCont .group-cont.collapsed .groupContent {
  display: none; }

.cp-tabSheetDtCont.cp-stepWizard {
  display: flex;
  align-items: center; }
  .cp-tabSheetDtCont.cp-stepWizard .item-cont {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    cursor: pointer;
    font-size: 13px; }
    .cp-tabSheetDtCont.cp-stepWizard .item-cont .tabSeq {
      border-radius: 50px;
      background-color: #C4C4C4;
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 8px; }
    .cp-tabSheetDtCont.cp-stepWizard .item-cont .tabName::after {
      display: block;
      content: attr(title);
      font-weight: bold;
      height: 1px;
      overflow: hidden;
      visibility: hidden; }
  .cp-tabSheetDtCont.cp-stepWizard .tabSep {
    height: 2px;
    border: 2px solid #d7d7d7;
    width: 20px;
    margin-left: 12px;
    margin-right: 12px;
    box-sizing: border-box; }
  .cp-tabSheetDtCont.cp-stepWizard .item-cont.item-cont-active .tabSeq {
    background-color: #38a169;
    color: #FFFFFF; }
  .cp-tabSheetDtCont.cp-stepWizard .item-cont.item-cont-active .tabName {
    font-weight: bold; }

.cp-tabSheetDtCont.cp-detail {
  display: flex;
  margin: 0px;
  padding: 5px 0px 0px 5px;
  font-size: 13px;
  font-weight: bold;
  border-bottom: 1px solid #d7d7d7; }
  .cp-tabSheetDtCont.cp-detail .item-cont {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 8px;
    padding-top: 8px;
    box-sizing: border-box;
    border-top: 3px solid transparent;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.87);
    text-align: center;
    min-width: 110px;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    border-bottom: 1px solid transparent; }
    .cp-tabSheetDtCont.cp-detail .item-cont.pressed {
      background-color: rgba(56, 165, 232, 0.08);
      border-top: 3px solid rgba(56, 165, 232, 0.32);
      font-size: 12px;
      font-family: Poppins, sans-serif;
      font-weight: 600;
      line-height: 1.4; }
  .cp-tabSheetDtCont.cp-detail .item-cont-active {
    border-top: 3px solid #38A5E8;
    color: #2E3849;
    background-color: #FFFFFF;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
  .cp-tabSheetDtCont.cp-detail .item-cont:focus {
    border-top: 3px solid rgba(56, 165, 232, 0.24);
    border-left: 1px dotted rgba(0, 0, 0, 0.2);
    border-right: 1px dotted rgba(0, 0, 0, 0.2);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2); }
  .cp-tabSheetDtCont.cp-detail .item-cont-active:focus {
    border-top: 3px solid #38A5E8;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
  .cp-tabSheetDtCont.cp-detail .item-cont:not(.item-cont-active):hover {
    border-top: 3px solid rgba(56, 165, 232, 0.24); }

.cp-tabSheetDtCont.cp-listForm {
  color: #FFFFFF;
  cursor: pointer; }
  .cp-tabSheetDtCont.cp-listForm .item-cont {
    display: flex;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px; }
    .cp-tabSheetDtCont.cp-listForm .item-cont:hover {
      background-color: rgba(56, 165, 232, 0.24); }
    .cp-tabSheetDtCont.cp-listForm .item-cont.item-cont-active {
      background-color: #38A5E8; }
      .cp-tabSheetDtCont.cp-listForm .item-cont.item-cont-active .tabSeq {
        background-color: #67C5F1; }
  .cp-tabSheetDtCont.cp-listForm .tabSeq {
    flex-shrink: 0;
    font-size: 13px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4;
    margin-right: 12px;
    height: 19px;
    width: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: rgba(56, 165, 232, 0.24); }
  .cp-tabSheetDtCont.cp-listForm .tabName {
    flex-grow: 1;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4; }

.cp-tabSheetDtCont.cp-verticalBlue {
  display: flex;
  font-size: 13px;
  flex-direction: column;
  padding: 15px;
  box-sizing: border-box; }
  .cp-tabSheetDtCont.cp-verticalBlue .item-cont {
    display: flex;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
    color: #2E3849;
    text-align: left;
    margin-top: -1px;
    background-color: transparent;
    font-size: 13px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
  .cp-tabSheetDtCont.cp-verticalBlue .item-cont-active {
    color: #FFFFFF;
    background-color: #38A5E8;
    border-radius: 6px;
    font-size: 13px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
  .cp-tabSheetDtCont.cp-verticalBlue .groupHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.87);
    font-size: 14px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }
  .cp-tabSheetDtCont.cp-verticalBlue .groupCollExp {
    width: 12px;
    height: 12px;
    padding-left: 3px;
    cursor: pointer; }
  .cp-tabSheetDtCont.cp-verticalBlue .groupCollExp.expanded {
    background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-tabSheetDtCont.cp-verticalBlue .groupCollExp.collapsed {
    background-image: url("../Images/icons/icons_arrow_left 12px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }

.cp-tabSheetDtCont.cp-verticalBlueNonRounded .item-cont-active {
  border-radius: 0px; }

.cp-tabSheetDtCont.cp-detail2 {
  display: flex;
  margin: 0px;
  padding: 5px 0px 0px 5px;
  font-size: 13px;
  font-weight: bold;
  justify-content: center; }
  .cp-tabSheetDtCont.cp-detail2 .item-cont {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 8px;
    padding-top: 8px;
    box-sizing: border-box;
    border-top: 3px solid transparent;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    min-width: 110px;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent; }
    .cp-tabSheetDtCont.cp-detail2 .item-cont.pressed {
      background-color: rgba(56, 165, 232, 0.08);
      border-top: 3px solid rgba(56, 165, 232, 0.32);
      font-size: 12px;
      font-family: Poppins, sans-serif;
      font-weight: 600;
      line-height: 1.4; }
  .cp-tabSheetDtCont.cp-detail2 .item-cont-active {
    border-top: 3px solid #38A5E8;
    color: #2E3849;
    background-color: #FFFFFF;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
  .cp-tabSheetDtCont.cp-detail2 .item-cont:focus {
    border-top: 3px solid rgba(56, 165, 232, 0.24);
    border-left: 1px dotted rgba(0, 0, 0, 0.2);
    border-right: 1px dotted rgba(0, 0, 0, 0.2);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2); }
  .cp-tabSheetDtCont.cp-detail2 .item-cont-active:focus {
    border-top: 3px solid #38A5E8;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
  .cp-tabSheetDtCont.cp-detail2 .item-cont:not(.item-cont-active):hover {
    border-top: 3px solid rgba(56, 165, 232, 0.24); }

.cp-tabSheetDtCont.cp-horizontalGrouped {
  display: flex; }
  .cp-tabSheetDtCont.cp-horizontalGrouped .group-cont {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    margin-right: 18px; }
  .cp-tabSheetDtCont.cp-horizontalGrouped .groupHeader {
    font-size: 12px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: default; }
  .cp-tabSheetDtCont.cp-horizontalGrouped .groupContent {
    display: flex; }
  .cp-tabSheetDtCont.cp-horizontalGrouped .item-cont {
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #d7d7d7;
    padding: 8px 12px;
    border-radius: 8px;
    margin-left: 8px;
    cursor: pointer; }
    .cp-tabSheetDtCont.cp-horizontalGrouped .item-cont.item-cont-active {
      border: 1px solid #3B93DB; }

.tabSheetDet2Container {
  width: 100%;
  background-color: rgba(56, 165, 232, 0.08);
  box-sizing: border-box; }

.cp-tabSheetDtCont.cp-whiteBgBlueBorder {
  display: flex;
  font-size: 13px;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid #d7d7d7;
  background-color: #FFFFFF; }
  .cp-tabSheetDtCont.cp-whiteBgBlueBorder .item-cont {
    display: flex;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
    color: #2E3849;
    text-align: left;
    border: 1px solid #d7d7d7;
    margin-top: -1px;
    background-color: #FFFFFF;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4;
    border-right: 1px solid transparent;
    flex-shrink: 0; }
  .cp-tabSheetDtCont.cp-whiteBgBlueBorder .item-cont-active {
    border: 1px solid #38A5E8;
    z-index: 1; }
  .cp-tabSheetDtCont.cp-whiteBgBlueBorder .groupHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.87);
    font-size: 14px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }
  .cp-tabSheetDtCont.cp-whiteBgBlueBorder .groupCollExp {
    width: 12px;
    height: 12px;
    padding-left: 3px;
    cursor: pointer; }
  .cp-tabSheetDtCont.cp-whiteBgBlueBorder .groupCollExp.expanded {
    background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-tabSheetDtCont.cp-whiteBgBlueBorder .groupCollExp.collapsed {
    background-image: url("../Images/icons/icons_arrow_left 12px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }

.cp-tabSheetDtCont.cp-borderedBlue {
  display: flex;
  font-size: 13px;
  flex-direction: column;
  box-sizing: border-box; }
  .cp-tabSheetDtCont.cp-borderedBlue .item-cont {
    display: flex;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
    color: #2E3849;
    text-align: left;
    margin-top: -1px;
    background-color: transparent;
    font-size: 13px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4;
    box-sizing: border-box;
    border: 1px solid transparent; }
  .cp-tabSheetDtCont.cp-borderedBlue .item-cont-active {
    background-color: rgba(56, 165, 232, 0.16);
    border: 1px solid #38A5E8;
    border-radius: 6px;
    font-size: 13px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4; }
  .cp-tabSheetDtCont.cp-borderedBlue .groupHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.87);
    font-size: 14px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }
  .cp-tabSheetDtCont.cp-borderedBlue .groupCollExp {
    width: 12px;
    height: 12px;
    padding-left: 3px;
    cursor: pointer; }
  .cp-tabSheetDtCont.cp-borderedBlue .groupCollExp.expanded {
    background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-tabSheetDtCont.cp-borderedBlue .groupCollExp.collapsed {
    background-image: url("../Images/icons/icons_arrow_left 12px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-tabSheetDtCont.cp-borderedBlue .item-cont::after {
    content: ' ';
    background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    padding-left: 3px;
    transform: rotate(-90deg); }

.cp-tabSheetDtCont.cp-vertical2 .divContentLabelP {
  display: flex; }

.cp-tabSheetDtCont.cp-vertical2 .divContentImgP {
  flex-shrink: 0;
  display: flex;
  align-items: center; }

.cp-tabSheetDtCont.cp-vertical2 .elementNode {
  border-radius: 50%;
  background-color: #9fa09f;
  margin-left: 1px;
  height: 11px;
  width: 11px; }

.cp-tabSheetDtCont.cp-vertical2 .elementLine {
  min-height: 20px;
  border-left: 1px solid;
  margin-left: 13px;
  margin-top: -1px;
  border-color: #9fa09f; }

.cp-tabSheetDtCont.cp-vertical2 .divCircle {
  padding-left: 7px;
  flex-shrink: 0;
  width: 20px;
  display: flex;
  align-items: center; }

.cp-tabSheetDtCont.cp-vertical2 .elementHdForm {
  cursor: pointer; }

.cp-tabSheetDtCont.cp-vertical2 .labelMenu {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  flex-grow: 1; }

.cp-tabSheetDtCont.cp-vertical2 .labelMenuAct {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: #79b63a;
  font-weight: bold;
  flex-grow: 1; }

.cp-tabSheetDtCont.cp-vertical2 .labelMenu, .cp-tabSheetDtCont.cp-vertical2 .labelMenuAct {
  padding-top: 4px;
  padding-bottom: 4px; }

.cp-tabSheetDtCont.cp-vertical2 .labelMenuGroup {
  font-weight: bold;
  font-size: 14px; }

.cp-tabSheetDtCont.cp-vertical2 .elementHdGroup {
  cursor: default; }

.cp-tabSheetDtCont.cp-vertical2 .divCircle {
  padding-left: 6px; }

.cp-tabSheetDtCont.cp-vertical2 .labelMenu {
  color: #707070; }

.cp-tabSheetDtCont.cp-vertical2 .labelMenuAct {
  color: #157BB9; }

.cp-tabSheetDtCont.cp-vertical2 .elementNode {
  background-color: #d3d3d3; }

.cp-tabSheetDtCont.cp-vertical2 .divContentImgP {
  margin-left: 10px;
  border: 1px solid transparent; }

.cp-tabSheetDtCont.cp-vertical2 .divContentLabelP {
  margin-left: 10px; }

.cp-tabSheetDtCont.cp-vertical2 .elementLine {
  border-left: 1px dashed;
  border-left-color: #d3d3d3; }

.cp-tabSheetDtCont.cp-vertical2 .item-cont {
  cursor: pointer; }

.cp-tabSheetDtCont.cp-vertical2 .item-cont-active .divContentImgP {
  border: 1px solid #157BB9;
  border-radius: 10px; }

.cp-tabSheetDtCont.cp-vertical2 .item-cont-active .elementNode {
  border-radius: 50%;
  background-color: #157BB9;
  height: 8px;
  width: 8px;
  margin-left: 2px; }

.cp-tabSheetDtCont.cp-vertical2 .item-cont-active .labelMenu {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: #157BB9;
  font-weight: bold;
  flex-grow: 1; }

.cp-tabSheetDtCont.cp-vertical2 .item-cont:last-child .divContentLabelP {
  display: none; }

.cp-tabSheetDtCont.cp-task {
  display: flex;
  font-size: 13px;
  flex-direction: column;
  background-color: #FFFFFF; }
  .cp-tabSheetDtCont.cp-task .item-cont {
    display: flex;
    justify-content: space-between;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 22px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
    color: #2E3849;
    text-align: left;
    background-color: #FFFFFF;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4; }
    .cp-tabSheetDtCont.cp-task .item-cont .tabName {
      font-size: 12px;
      font-family: sans-serif;
      font-weight: 400;
      line-height: 1.4; }
  .cp-tabSheetDtCont.cp-task .item-cont-active {
    background-color: #dff1fb;
    color: black;
    padding-right: 5px;
    border: 1px solid #5cb6ec;
    border-radius: 4px; }
    .cp-tabSheetDtCont.cp-task .item-cont-active .tabName {
      font-weight: bold; }
  .cp-tabSheetDtCont.cp-task .groupHeader {
    display: flex;
    align-items: center;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.87);
    background-color: white;
    font-size: 14px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }
  .cp-tabSheetDtCont.cp-task .groupCollExp {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    cursor: pointer; }
  .cp-tabSheetDtCont.cp-task .group-cont.expanded .groupCollExp {
    background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-tabSheetDtCont.cp-task .group-cont.collapsed .groupCollExp {
    background-image: url("../Images/icons/icons_arrow_down 12 px grey.svg");
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-90deg); }

/*End TabSheetDt*/
/*Button Group*/
.cp-buttonGroup {
  display: flex; }

.cp-buttonGroup .innerBtnGrp {
  display: flex;
  position: relative; }

.cp-buttonGroup .innerBtnGrp .cp-buttonCont:not(.cp-buttonCont-first) > .innerBtn {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important; }

.cp-buttonGroup .innerBtnGrp .cp-buttonCont:not(.cp-buttonCont-first):not(:hover):not(:focus).cp-buttonCont-sy-3 > .innerBtn {
  border-left: 1px solid transparent !important; }

.cp-buttonGroup .innerBtnGrp .cp-buttonCont:not(.cp-buttonCont-first):not(:hover):not(:focus).cp-buttonCont-sy-9 > .innerBtn {
  border-left: 1px solid transparent !important; }

.cp-buttonGroup .innerBtnGrp .cp-buttonCont:not(.cp-buttonCont-first).btn-disabled.cp-buttonCont-sy-3 > .innerBtn {
  border-left: 1px solid transparent !important; }

.cp-buttonGroup .innerBtnGrp .cp-buttonCont:not(.cp-buttonCont-first).btn-disabled.cp-buttonCont-sy-9 > .innerBtn {
  border-left: 1px solid transparent !important; }

.cp-buttonGroup .innerBtnGrp .cp-buttonCont:not(.cp-buttonCont-last) > .innerBtn {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important; }

.cp-buttonGroup .innerBtnSep {
  width: 10px;
  flex-shrink: 0; }

.cp-buttonGroup .innerBtnGrpOther {
  position: relative; }

.cp-buttonGroup .btnGrpOtherDropDown {
  position: absolute;
  z-index: 3;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 500px;
  overflow: auto;
  width: 230px;
  border: 1px solid #d7d7d7;
  background-color: #F4F5F8;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  border: 1px solid #d7d7d7;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box; }

.cp-buttonGroup .other-item {
  width: 100%;
  font-size: 13px;
  color: #2E3849;
  padding: 10px 3px;
  cursor: default;
  box-sizing: border-box;
  border: 1px solid transparent; }

.cp-buttonGroup .other-item:not(.btn-other-disabled) {
  cursor: pointer; }

.cp-buttonGroup .other-item:not(.btn-other-disabled):hover {
  border: 1px solid #38A5E8; }

.cp-buttonGroup .other-item-inactive {
  cursor: default;
  color: #C4C4C4; }

.cp-buttonGroup .btn-other-disabled {
  cursor: default;
  color: #C4C4C4; }

/*End Button Group*/
/*#region Memo*/
.cp-memo.tallOnFocus {
  z-index: 0; }
  .cp-memo.tallOnFocus .inner {
    z-index: 1; }

.cp-memo.styleESS .inner {
  border-radius: 6px;
  padding: 20px 22px; }

.cp-memo.styleESS .input {
  padding: 0px; }

.cp-memo.gridHeightType .inner {
  padding-top: 0px;
  padding-bottom: 0px;
  height: 30px;
  min-height: initial; }

.cp-memo.gridHeightType .input {
  height: 100%;
  line-height: 1; }

.cp-memo.useRadius .boxBorder {
  border-radius: 6px; }

.cp-memo.cp-standard2 .boxBorder {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #d7d7d7; }

.cp-memo.cp-standard2.cp-focused .boxBorder {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #d7d7d7; }

.cp-memo.cp-standard2.cp-error .boxBorder {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #F04D5D; }

.cp-memo.cp-standard2 .inner {
  padding-left: 6px;
  padding-right: 6px; }

.cp-memo.cp-standardBig .inner {
  border-radius: 10px; }

.cp-memo.cp-standardBig .input {
  font-size: 16px;
  padding-left: 12px;
  background: transparent; }

.cp-memo.cp-standardBig .input::placeholder {
  font-size: 16px;
  padding-left: 12px; }

.cp-memo .inner {
  position: relative;
  display: flex;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #FFFFFF;
  min-height: 33px; }

.cp-memo .input {
  border: none;
  box-sizing: border-box;
  padding: 0px 6px;
  width: 100%;
  overflow: hidden;
  resize: none; }

.cp-memo.cp-error .inner {
  border: 1px solid #bd2431; }

.cp-memo:not(.cp-grid) .errorCont {
  position: absolute;
  right: 0;
  transform: translateY(-100%);
  top: 0; }

.cp-memo.cp-grid .errorCont {
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1px;
  cursor: default; }

.cp-memo.cp-disabled .inner {
  background-color: #F4F5F8; }

.cp-memo.cp-disabled .input {
  background-color: #F4F5F8; }

.cp-memo.cp-focused .inner {
  border: 1px solid #38A5E8;
  box-shadow: 0 0 3px 0px rgba(16, 91, 142, 0.25); }

.cp-memo.tallOnFocus {
  height: 33px;
  position: relative; }

.cp-memo.tallOnFocus .inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%; }

.cp-memo.tallOnFocus .input {
  height: 100% !important; }

.cp-memo.openOnClick {
  position: relative;
  width: 100%; }
  .cp-memo.openOnClick .inner {
    display: block;
    min-height: initial;
    flex-direction: column;
    padding-bottom: 8px;
    position: absolute;
    height: auto;
    width: 100%;
    transform: translateY(-30%);
    left: 25px;
    z-index: 1;
    border-radius: 6px;
    padding: 10px; }
    .cp-memo.openOnClick .inner .input {
      flex-shrink: 0;
      padding: 0px; }
  .cp-memo.openOnClick .noData {
    color: #2C61D7; }
  .cp-memo.openOnClick .noData:hover {
    text-decoration: underline; }
  .cp-memo.openOnClick .currDataSpan {
    white-space: pre; }
    .cp-memo.openOnClick .currDataSpan:hover {
      text-decoration: underline; }

.cp-memo.cp-disabled.disabledStyleStandard .inner {
  background-color: #FFFFFF; }

.cp-memo.cp-disabled.disabledStyleStandard .input {
  background-color: #FFFFFF; }

.cp-memo.styleForm .inner {
  padding-top: 0px;
  padding-bottom: 0px;
  min-height: initial; }

.cp-memo.styleForm .input {
  min-height: 26px; }

/*#endregion*/
/*#region checkbox*/
.cp-checkBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: normal; }
  .cp-checkBox.entryLabelSize .label span {
    font-size: 14px; }
  .cp-checkBox.cp-grid:not(.cp-disabled) .inner:focus .checkCont, .cp-checkBox.cp-standard:not(.cp-disabled) .inner:focus .checkCont {
    border: 1px solid #38A5E8;
    box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px; }

.cp-checkBox > .inner {
  display: inline-flex;
  cursor: pointer;
  align-items: center; }

.cp-checkBox > .textHint {
  font-size: 12px;
  padding-left: 25px;
  padding-top: 7px;
  color: #2E3849;
  line-height: 1.5; }

.cp-checkBox > .inner .input {
  margin-right: 5px;
  cursor: pointer; }

.cp-checkBox > .inner .label {
  font-size: 14px;
  line-height: 1.5; }

.cp-checkBox > .inner .svg-checkbox {
  width: 13px;
  height: 13px;
  background-color: #FFFFFF;
  margin-right: 5px;
  vertical-align: top;
  display: block; }

.cp-checkBox > .inner .checkCont {
  border: 1px solid #C4C4C4;
  background-color: #fff;
  vertical-align: top;
  margin-right: 6px;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  flex-shrink: 0; }

.cp-checkBox > .inner .ceLine {
  stroke: black;
  stroke-width: 1.5px; }

.cp-checkBox > .inner .hintIcon {
  display: inline-block;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  margin-left: 3px;
  background-image: url("../Images/icons/icons_info 16px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-checkBox.cp-bold > .inner .label {
  font-weight: bold; }

.cp-checkBox.cp-grid .inner {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  height: 30px;
  box-sizing: border-box; }

.cp-checkBox.cp-grid .checkCont {
  margin-right: 0px; }

.cp-checkBox.cp-grid.cp-disabled .inner {
  background-color: #F4F5F8;
  cursor: default; }

.cp-checkBox.cp-gridDisplay .inner {
  height: 22px; }

.cp-checkBox.cp-disabled.cp-disabledTransparent .checkCont {
  opacity: 0.5;
  background-color: #F4F5F8; }

.cp-checkBox.cp-disabled .inner {
  cursor: default; }

.cp-checkBox.cp-checkListStyle {
  width: 100%;
  height: 100%; }

.cp-checkBox.cp-checkListStyle .inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px; }

.cp-checkBox.cp-checkListStyle .label {
  font-size: 12px; }

.cp-checkBox.cp-halfBoxStyle .checkCont {
  border-radius: 2px;
  width: 21px;
  height: 21px;
  display: flex;
  justify-content: center;
  align-items: center; }

.cp-checkBox.cp-halfBoxStyle .svg-checkbox {
  width: 18px;
  height: 18px;
  margin-right: 0px;
  /*margin-top: 2px;
        margin-left: 2px;*/ }

.cp-checkBox.cp-halfBoxStyle .ceLine {
  stroke: #38a169;
  stroke-width: 4px; }

.cp-checkBox.cp-halfBoxStyle .halfBox {
  width: 13px;
  height: 13px;
  background-color: #38a169;
  border-radius: 2px; }

.cp-checkBox.cp-policy > .inner {
  box-sizing: border-box; }
  .cp-checkBox.cp-policy > .inner .checkCont {
    border: 1px solid #38a169;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center; }
  .cp-checkBox.cp-policy > .inner .svg-checkbox {
    background-color: #38a169;
    margin-right: 0px; }
  .cp-checkBox.cp-policy > .inner .ceLine {
    stroke: #FFFFFF;
    stroke-width: 2px; }

.cp-checkBox.cp-policy.ce-selected > .inner .checkCont {
  background-color: #38a169;
  background-image: url("../Images/icons/icons 12px white_tick small 12px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-checkBox.cp-policy.cp-disabled {
  cursor: no-drop; }
  .cp-checkBox.cp-policy.cp-disabled .checkCont {
    opacity: 0.7; }
  .cp-checkBox.cp-policy.cp-disabled .label {
    opacity: 0.7; }

.cp-checkBox.cp-display > .inner {
  box-sizing: border-box; }
  .cp-checkBox.cp-display > .inner .checkCont {
    border: 1px solid #C4C4C4;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center; }
  .cp-checkBox.cp-display > .inner .svg-checkbox {
    background-color: transparent;
    margin-right: 0px; }
  .cp-checkBox.cp-display > .inner .ceLine {
    stroke: #FFFFFF;
    stroke-width: 2px; }

.cp-checkBox.cp-display.ce-selected > .inner .checkCont {
  background-image: url("../Images/icons/icons 12px black_tick small 12px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-checkBox.cp-display.cp-disabled {
  cursor: default; }

.cp-checkBox.cp-analysisField .inner {
  padding: 10px;
  border-bottom: 1px solid #d7d7d7;
  width: 100%;
  box-sizing: border-box; }

.cp-checkBox.noLabel > .inner .checkCont {
  margin-right: 0px; }

.cp-checkBox.noLabel .label {
  display: none; }

.cp-checkBox.cp-custom .checkCont {
  width: auto;
  height: auto; }

.cp-checkBox.cp-box .inner .label {
  border: 1px solid #d7d7d7;
  padding: 8px;
  background-color: white;
  color: rgba(0, 0, 0, 0.6);
  border-radius: 8px; }

.cp-checkBox.cp-box.ce-selected .inner .label {
  border: 1px solid #79b63a;
  color: #79b63a;
  background-color: #f7fbef; }

.cp-checkBox.cp-box.cp-disabled {
  opacity: 0.5; }

.cp-checkBox.fullWidth .inner {
  width: 100%; }

.cp-checkBox.fullWidth .label {
  width: 100%;
  text-align: center; }

.cp-checkBox.cp-rceFilter .svg-checkbox {
  background-color: #0864fc; }

.cp-checkBox.cp-rceFilter .ceLine {
  stroke: #FFFFFF; }

.cp-checkBox.cp-rceFilter .checkCont {
  border-radius: 3px;
  overflow: hidden; }

.cp-checkBox.cp-rceFilter.ce-selected .checkCont {
  border-color: #0864fc; }

/*#endregion checkbox*/
/*#Form PopUp*/
.cp-formPopUp {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  /* 3 -> 4 above ess leave entry pop up*/
  z-index: 4; }
  .cp-formPopUp.popUp-right {
    background-color: rgba(75, 75, 75, 0.2); }

.cp-formPopUp .inner-popUp {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 500px;
  background-color: #F4F5F8;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column; }

.cp-formPopUp .title-popUp {
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #2E3849;
  flex-shrink: 0;
  border-bottom: 1px solid #d7d7d7;
  display: flex; }

.cp-formPopUp .title-popUpLabel {
  flex-grow: 1; }

.cp-formPopUp .title-popUpClose {
  flex-shrink: 0;
  height: 18px;
  width: 18px;
  cursor: pointer;
  margin: auto;
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-formPopUp .contentWrap {
  padding: 14px;
  box-sizing: border-box;
  overflow: auto;
  flex-grow: 1;
  height: 100%; }

.cp-formPopUp .buttonContPopUp {
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #d7d7d7; }

.cp-formPopUp .entrySection {
  padding-bottom: 20px; }

.cp-formPopUp.noPadding .contentWrap {
  padding: 0px; }

.cp-formPopUp.noBorder .inner-popUp {
  border: none; }

.cp-formPopUp.coverLightTransparent {
  background: rgba(0, 0, 0, 0.2); }

.cp-formPopUp.isRounded .inner-popUp {
  border-radius: 8px;
  overflow: hidden; }

.cp-formPopUp.popUp-center .inner-popUp {
  right: initial;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  width: 80%; }

.cp-formPopUp.popUp-center.popUp-standardHeight .inner-popUp {
  height: 80%; }

.cp-formPopUp.popUp-center.popUp-tallWide .inner-popUp {
  height: 95%;
  width: 95%; }

.cp-formPopUp.popUp-center.popUp-tallWide .contentWrap {
  height: 0; }

.cp-formPopUp.popUp-center.popUp-news .inner-popUp {
  height: 100%;
  width: 80%; }

.cp-formPopUp.popUp-center.popUp-news .content {
  font-size: 16px; }

.cp-formPopUp.popUp-center.popUp-news .contentWrap {
  padding-left: 10%;
  padding-right: 10%; }

.cp-formPopUp.popUp-center.popUp-autoHeight .inner-popUp {
  height: auto;
  max-height: 90%; }

.cp-formPopUp.popUp-floating {
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  right: initial;
  bottom: initial;
  z-index: 4;
  pointer-events: none; }
  .cp-formPopUp.popUp-floating .title-popUp {
    cursor: move; }
  .cp-formPopUp.popUp-floating.popUp-autoHeight .inner-popUp {
    height: auto; }
  .cp-formPopUp.popUp-floating .inner-popUp {
    position: relative;
    height: auto;
    max-height: 90%;
    pointer-events: all; }
  .cp-formPopUp.popUp-floating.popUp-tallHeight .inner-popUp {
    height: 95%; }

.cp-formPopUp.popUp-center.popUp-overflow .contentWrap, .cp-formPopUp.popUp-floating.popUp-overflow .contentWrap {
  overflow: visible; }

.cp-formPopUp.popUp-filter {
  height: auto;
  width: auto;
  left: 0;
  top: 0;
  right: initial; }
  .cp-formPopUp.popUp-filter .inner-popUp {
    position: static;
    height: auto;
    width: 308px;
    border-radius: 6px; }
  .cp-formPopUp.popUp-filter .contentWrap {
    padding: 0px; }
  .cp-formPopUp.popUp-filter .triangle {
    position: absolute;
    width: 12px;
    height: 16px;
    top: 10px;
    left: -11px; }
    .cp-formPopUp.popUp-filter .triangle polygon {
      fill: #F4F5F8; }
    .cp-formPopUp.popUp-filter .triangle polyline {
      stroke: #d7d7d7;
      fill: transparent; }

/**/
/*#Label*/
.cp-label {
  display: inline-block; }

.cp-label .must {
  color: red !important; }

.cp-label .hintText {
  font-weight: normal;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 4px; }

.cp-label .hintIcon {
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  margin-left: 3px;
  background-image: url("../Images/icons/icons_info 16px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-label .labelText {
  line-height: 1.5; }

/***/
/*Button Edit Text*/
.cp-buttonEditText {
  display: flex;
  position: relative; }

.cp-buttonEditText .inner {
  height: 32px;
  display: flex;
  width: 100%;
  box-sizing: border-box; }

.cp-buttonEditText .codeCont {
  display: flex;
  width: 30%;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  align-items: center; }

.cp-buttonEditText .inputCode {
  border: none;
  padding: 7px 6px;
  flex-grow: 1;
  height: 100%; }

.cp-buttonEditText .nameCont {
  position: relative;
  width: 70%;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  background: #fff;
  display: flex;
  height: 100%;
  align-items: center; }

.cp-buttonEditText .inputName {
  border: none;
  padding: 7px 6px;
  width: 0;
  flex-grow: 1;
  height: 100%;
  box-sizing: border-box; }

.cp-buttonEditText .searchButton {
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 22px;
  cursor: pointer; }

.cp-buttonEditText.cp-grid .errorCont {
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1px;
  cursor: default; }

.cp-buttonEditText.cp-disabled .inner {
  background-color: #F4F5F8; }

.cp-buttonEditText.cp-disabled .inputCode {
  background-color: #F4F5F8; }

.cp-buttonEditText.cp-disabled .inputName {
  background-color: #F4F5F8; }

.cp-buttonEditText.cp-disabled .codeCont {
  background-color: #F4F5F8; }

.cp-buttonEditText.cp-disabled .nameCont {
  background-color: #F4F5F8; }

.cp-buttonEditText.cp-disabled .searchButton {
  cursor: default; }

.cp-buttonEditText.error-top .errorCont {
  position: absolute;
  right: 0;
  transform: translateY(-100%);
  top: 0; }

.cp-buttonEditText.error-right .errorCont {
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1px;
  cursor: default; }

/**/
/*region Message Box*/
.contMsgBox {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 10;
  pointer-events: none;
  top: 0;
  left: 0; }

.contMsgBox .msgNonBlock {
  pointer-events: none;
  height: 100%;
  width: 100%;
  position: relative; }

.contMsgBox .msgBlock {
  pointer-events: all;
  height: 100%;
  width: 100%;
  position: relative; }

.cp-messageBox {
  display: flex;
  width: 350px;
  position: absolute;
  top: 50px;
  right: 20px;
  min-height: 130px;
  font-size: 13px;
  color: #2E3849;
  pointer-events: all; }

.cp-messageBox .left {
  flex-shrink: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 5px; }

.cp-messageBox .right {
  flex-grow: 1;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; }

.cp-messageBox .title {
  font-weight: bold;
  padding-bottom: 5px;
  flex-shrink: 0; }

.cp-messageBox .message {
  flex-grow: 1;
  overflow: hidden;
  margin-bottom: 12px; }

.cp-messageBox .innerMessage {
  white-space: pre-wrap; }

.cp-messageBox .linkItem {
  text-decoration: underline;
  color: #2C61D7;
  cursor: pointer; }

.cp-messageBox.cp-warning .message {
  max-height: 355px;
  overflow: auto;
  white-space: normal; }

.cp-messageBox .btn-close-btm-cont {
  flex-shrink: 0; }

.cp-messageBox .btn-close-btm {
  padding: 5px;
  text-align: center;
  width: 50px;
  display: inline-block;
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer; }

.cp-messageBox .btn-close-top {
  width: 12px;
  height: 12px;
  right: 10px;
  top: 10px;
  position: absolute;
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer; }

.cp-messageBox.cp-info .left {
  background-color: #3992de; }

.cp-messageBox.cp-info .right {
  background-color: #94cbff;
  border: 1px solid #3992de; }

.cp-messageBox.cp-info .btn-close-btm {
  background-color: #3992de; }

.cp-messageBox.cp-success .left {
  background-color: #009e73; }

.cp-messageBox.cp-success .right {
  background-color: #a5e7d6;
  border: 1px solid #009e73; }

.cp-messageBox.cp-success .btn-close-btm {
  background-color: #009e73; }

.cp-messageBox.cp-error .left {
  background-color: #bd2431; }

.cp-messageBox.cp-error .right {
  background-color: #f79aa5;
  border: 1px solid #bd2431; }

.cp-messageBox.cp-error .btn-close-btm {
  background-color: #bd2431; }

.cp-messageBox.cp-warning {
  top: 40%;
  left: 47%;
  transform: translate(-50%, -50%);
  height: auto;
  width: 370px; }

.cp-messageBox.cp-warning .innerWarning {
  width: 500px;
  background-color: #F4F5F8;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  padding: 20px; }

.cp-messageBox.cp-warning .btn-close-btm-cont {
  justify-content: center;
  display: flex; }

.bodyLogin .contMsgBox {
  top: 0; }

.bodyLogin .cp-messageBox {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

/**/
/*region Attachment*/
.cp-attachItem {
  white-space: initial; }

.cp-attachItem.cp-entry.cp-standard .inner {
  position: relative;
  display: flex;
  width: 223px;
  height: 50px;
  border: 2px dotted #C4C4C4;
  box-sizing: border-box; }

.cp-attachItem.cp-entry.cp-standard .left {
  flex-shrink: 0;
  width: 50px;
  background-image: url("../Images/Icons/icons_upload 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-attachItem.cp-entry.cp-standard .right {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-right: 3px; }

.cp-attachItem.cp-entry.cp-standard .title {
  font-size: 13px;
  padding-bottom: 2px;
  font-weight: bold;
  color: #2E3849;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 16px; }

.cp-attachItem.cp-entry.cp-standard .info {
  font-size: 13px;
  padding-bottom: 2px;
  color: #2E3849; }

.cp-attachItem.cp-entry.cp-standard .remove {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-attachItem.cp-standard.cp-entry:not(.cp-filled) .inner {
  cursor: pointer; }

.cp-attachItem.cp-standard.cp-entry.cp-filled .left {
  cursor: pointer; }

.cp-attachItem.cp-standard.cp-entry.cp-filled .title {
  cursor: pointer; }

.cp-attachItem.cp-standard.cp-entry.cp-filled .title:hover {
  text-decoration: underline; }

.cp-attachItem.cp-standard.cp-entry:not(.cp-disabled) .inner:hover {
  border: 2px solid #38A5E8; }

.cp-attachItem.cp-display .inner {
  background-color: #E9F4FF;
  padding: 5px 10px;
  margin-right: 5px;
  box-sizing: border-box;
  border: 1px solid transparent;
  cursor: pointer; }

.cp-attachItem.cp-display .inner:hover {
  border: 1px solid #38A5E8; }

.cp-attachItem.cp-display .title {
  font-size: 13px;
  color: #2E3849; }

.cp-attachItem.cp-entryGrid .innerBtn {
  min-height: 84px;
  height: auto !important; }

.cp-attachItem.cp-entryGrid .inner .title {
  font-size: 12px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 8px;
  margin-top: 24px; }

.cp-attachItem.cp-entryGrid .inner .info {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 24px; }

.cp-attachItem.cp-entryGrid .imgIcon {
  flex-shrink: 0;
  padding-right: 8px; }

.cp-attachment .fileDesc {
  margin-top: 5px; }

.cp-attachment .cp-attachItem.cp-entry:not(:last-child) {
  padding-bottom: 5px; }

.cp-attachment.cp-attchDisplay {
  display: flex; }

.attachment-coverView {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background-color: rgba(75, 75, 75, 0.2); }

.attachment-coverView .inner {
  background-color: #F4F5F8;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; }

.attachment-coverView .addFileContent {
  flex-shrink: 0; }

.attachment-coverView .close {
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  cursor: pointer;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background-size: 50%; }

.attachment-coverView .fileNameView {
  font-weight: bold;
  font-size: 15px;
  padding-bottom: 8px;
  flex-shrink: 0; }

.attachment-coverView .fileView {
  text-align: center;
  height: calc(100% - 26px);
  overflow: auto;
  flex-grow: 1; }

.attachment-coverView .objectPDF {
  width: 100%;
  height: 100%; }

.cp-attachItem.cp-image .outer {
  border: 1px solid #d7d7d7;
  border-radius: 144px;
  box-sizing: border-box;
  width: 130px;
  height: 130px;
  padding: 5px;
  position: relative; }

.cp-attachItem.cp-image .inner {
  background-color: #FFFFFF;
  border-radius: 144px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden; }

.cp-attachItem.cp-image .iconPlus {
  background-image: url("../Images/icons/icons_plus 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px; }

.cp-attachItem.cp-image .remove {
  position: absolute;
  right: 5px;
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-size: 12px; }

.cp-attachItem.cp-image .setDefault {
  position: absolute;
  right: 24px;
  background-image: url("../Images/icons/PID_SetDefault.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-size: 20px; }

.cp-attachItem.cp-image .btn-cont {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  height: 20px; }

.cp-attachItem.cp-image .imgData {
  object-fit: contain;
  width: 100%;
  height: 100%; }

.cp-attachItem.cp-image.cp-disabled .btn-cont {
  display: none !important; }

.cp-attachItem.cp-image.cp-disabled .inner {
  cursor: not-allowed; }

.cp-attachItem.cp-image .iconPendingChanges {
  position: absolute;
  top: 10px;
  left: 10px; }

.cp-attachItem.cp-image .uploadPending {
  text-align: center; }

.cp-attachItem.cp-image.default .outer {
  border: 1px solid red; }

.cp-attachItem.cp-image.cp-filled .outer:hover .btn-cont {
  display: block; }

.cp-attachItem.cp-image .outer:hover {
  border: 1px solid #38A5E8; }

.cp-attachment.cp-attchImage {
  display: flex;
  margin: -13px;
  flex-wrap: wrap; }

.cp-attachment.cp-attchImage .cp-image {
  margin: 13px; }

.cp-attachment.autoSizing .cp-attachItem .inner {
  width: auto;
  height: auto;
  min-height: 50px; }

.cp-attachment.autoSizing .cp-attachItem .title {
  overflow: visible;
  white-space: normal; }

/*endregion Attachment*/
/*region PopUp Center*/
.popUpCenter {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3; }

.popUpCenter .inner-popUp {
  background-color: #F4F5F8;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  padding: 20px; }

.popUpCenter .title {
  color: #2E3849;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px; }

/**/
/*popUpAuto*/
.popUpAuto {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3; }
  .popUpAuto .inner-popUp {
    background-color: #F4F5F8;
    box-sizing: border-box;
    border: 1px solid #d7d7d7;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
    padding: 20px; }
  .popUpAuto .title {
    color: #2E3849;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px; }

/**/
/*region ConfirmBox*/
.cp-confirmBox {
  z-index: 5 !important; }

.cp-confirmBox .inner-confirm {
  width: 500px; }

.cp-confirmBox .btn-cont {
  display: flex;
  justify-content: center; }

.cp-confirmBox .title {
  color: #2E3849;
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 10px; }

.cp-confirmBox .message {
  color: #2E3849;
  font-size: 16px;
  padding-bottom: 15px; }

/*endregion*/
/*region GroupBox*/
.cp-groupBox {
  border-bottom: 1px solid #d7d7d7;
  padding: 5px;
  display: flex;
  align-items: center; }
  .cp-groupBox.noPaddingHor {
    padding-left: 0px;
    padding-right: 0px; }

.cp-groupBox .title {
  color: #2E3849;
  font-size: 16px;
  font-weight: bold;
  flex-shrink: 0; }

.cp-groupBox .expandCollapse {
  width: 15px;
  height: 15px;
  cursor: pointer; }

.cp-groupBox .spacer {
  flex-grow: 1; }

.cp-groupBox .expanded {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: none; }

.cp-groupBox .collapsed {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_left 12px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-groupBox.style2 {
  padding: 0px; }
  .cp-groupBox.style2 .title {
    letter-spacing: 1px;
    font-size: 22px;
    color: white;
    padding: 8px 80px 8px 26px;
    background-color: #38A5E8;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    font-family: Poppins, sans-serif !important; }

.cp-groupBox.style3 {
  padding: 6px; }
  .cp-groupBox.style3 .title {
    letter-spacing: 1px;
    font-family: Poppins, sans-serif !important; }

.cp-groupBox .icon {
  margin-right: 6px; }

.cp-groupBox .grpBtnCont {
  flex-shrink: 0;
  margin-right: 8px; }

.cp-groupBox.no-underline {
  border-bottom: none; }

/*endregion*/
/*region SideHelper*/
.cp-sideHelper .listCont {
  padding: 15px 5px; }

.cp-sideHelper .item {
  font-size: 12px;
  padding-bottom: 15px; }
  .cp-sideHelper .item.nonClickable .text {
    color: #2E3849;
    cursor: default; }
  .cp-sideHelper .item.nonClickable .text:hover {
    cursor: default;
    text-decoration: none; }

.cp-sideHelper .text:hover {
  text-decoration: underline;
  cursor: pointer; }

.cp-sideHelper.sy-horizontal .listCont {
  display: flex;
  align-items: center; }

.cp-sideHelper.sy-horizontal .separator {
  width: 14px;
  height: 2px;
  background-color: #d7d7d7;
  margin: 0px 8px; }

.cp-sideHelper.sy-horizontal .item {
  padding-bottom: 0px;
  color: #2C61D7; }

.cp-sideHelper.sy-standard .text::before {
  content: '• '; }

.cp-sideHelper .text {
  display: inline-block; }

.cp-sideHelper.sy-sequence .item {
  display: flex;
  padding-bottom: 8px;
  padding-top: 8px;
  padding-left: 5px;
  padding-right: 5px;
  align-items: center; }

.cp-sideHelper.sy-sequence .item:hover {
  cursor: pointer;
  background-color: #F8F9FB; }

.cp-sideHelper.sy-sequence .sequence {
  font-size: 13px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4;
  width: 19px;
  height: 19px;
  background-color: #DEEBFC;
  margin-right: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px; }

.cp-sideHelper.sy-sequence .text {
  font-size: 12px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important; }

.cp-sideHelper.sy-sequence .text:hover {
  text-decoration: none; }

.cp-sideHelper.sy-sequence .listCont {
  padding: 0px;
  padding-left: 12px;
  padding-right: 12px; }

.cp-sideHelper.sy-sequence .shGroupBox {
  padding-left: 12px;
  padding-right: 10px;
  box-sizing: border-box; }
  .cp-sideHelper.sy-sequence .shGroupBox .title {
    font-size: 14px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }

.cp-sideHelper.noGroupBox .listCont {
  padding: 0px 5px; }

/*endregion*/
/*region Grid Like*/
.cp-gridLike {
  flex-grow: 1;
  overflow: hidden; }

/**/
/*Box Content*/
.boxContent {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #d7d7d7;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }

.boxContent .boxTopContent {
  display: flex;
  max-width: 100%;
  justify-content: center;
  align-items: center; }

.boxContent .boxBottomContent {
  display: flex;
  max-width: 100%;
  overflow: hidden;
  margin-top: 10px; }

.boxContent .assg {
  width: 100px;
  flex-shrink: 5;
  text-align: center;
  color: #2E3849;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  top: 6px; }

.boxContent .labelTop {
  font-size: 13px;
  text-align: center;
  margin-bottom: 5px; }

.boxContent .labelHelper {
  position: relative;
  top: 7px;
  margin-left: 5px; }

/**/
/*Mini Grid*/
.cp-miniGrid {
  box-sizing: border-box; }

.cp-miniGrid.rowCanClick .contentRow {
  cursor: pointer; }

.cp-miniGrid.collapsed .content {
  display: none; }

.cp-miniGrid.collapsed .noDataBoxCont {
  display: none; }

.cp-miniGrid .header {
  display: flex;
  border-top: 1px solid #d7d7d7; }

.cp-miniGrid.noHeaderBorder .header {
  border: none; }

.cp-miniGrid .loadingCont {
  display: flex;
  justify-content: center; }

.cp-miniGrid .headerCol {
  box-sizing: border-box;
  align-self: center;
  font-size: 14px;
  padding-top: 8px;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 8px;
  border-right: 1px solid transparent;
  flex-shrink: 0; }

.cp-miniGrid .headerCol.first-col {
  border-left: 1px solid transparent; }

.cp-miniGrid .headerCol.dt-number {
  text-align: center; }

.cp-miniGrid .headerCol.align-left {
  text-align: left; }

.cp-miniGrid .headerCol.align-center {
  text-align: center; }

.cp-miniGrid .headerCol.align-right {
  text-align: right; }

.cp-miniGrid .contentRow {
  display: flex;
  position: relative;
  margin-top: -1px; }

.cp-miniGrid .content {
  background-color: #FFFFFF;
  margin-top: 1px; }

.cp-miniGrid .contentCol {
  box-sizing: border-box;
  border-left: 1px solid #d7d7d7;
  padding: 10px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  word-break: break-word; }

.cp-miniGrid.noPadFirstCol .contentCol.first-col {
  padding-left: 0px; }

.cp-miniGrid .contentCol .fieldNode {
  flex-grow: 1;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis; }

.cp-miniGrid .contentCol .optFieldNode {
  flex-shrink: 0;
  padding-right: 3px; }

.cp-miniGrid .contentCol.dt-number {
  text-align: right;
  justify-content: flex-end; }

.cp-miniGrid .contentCol.dt-number .fieldNode {
  text-align: right; }

.cp-miniGrid .contentCol.dt-string.hasOpt {
  display: block; }

.cp-miniGrid .contentCol.dt-string .fieldNode {
  display: inline;
  flex-grow: 0;
  padding-right: 3px;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis; }

.cp-miniGrid .contentCol.dt-string .optFieldNode {
  display: inline;
  flex-shrink: 0;
  color: #5A6881; }

.cp-miniGrid .contentCol.align-left {
  justify-content: flex-start; }

.cp-miniGrid .contentCol.align-center {
  justify-content: center; }

.cp-miniGrid .contentCol.align-right {
  justify-content: flex-end; }

.cp-miniGrid .centerBold {
  display: inline;
  text-align: center !important;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  word-break: break-word; }

.cp-miniGrid .contentCol.first-col {
  border-left: none; }

.cp-miniGrid .contentRow {
  border: 1px solid #d7d7d7; }

.cp-miniGrid .contentCol.clickable .textContent {
  color: #2C61D7; }

.cp-miniGrid .contentCol.clickable .textContent:hover {
  text-decoration: underline; }

.cp-miniGrid .removeRow {
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  background-image: url("../Images/icons/icons_cross 8 px white.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px;
  background-color: #3F3F3F;
  border: 1px solid #C4C4C4; }

.cp-miniGrid .contentRow:hover .removeRow {
  display: block; }

.cp-miniGrid .contentRow.focused .removeRow {
  display: block; }

.cp-miniGrid .buttonCont {
  position: absolute;
  right: 0px;
  height: 100%;
  align-items: center;
  display: flex; }

.cp-miniGrid .buttonCont .buttonItem {
  width: 28px;
  height: 28px;
  border-radius: 40px;
  margin-right: 10px;
  cursor: pointer;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  box-sizing: border-box; }
  .cp-miniGrid .buttonCont .buttonItem.customButtonWithObject {
    width: auto;
    height: auto; }
  .cp-miniGrid .buttonCont .buttonItem.buttonBgWhite {
    background-color: #FFFFFF; }
  .cp-miniGrid .buttonCont .buttonItem.buttonBgGreen {
    background-color: #38a169; }
  .cp-miniGrid .buttonCont .buttonItem.buttonBgDarkGrey {
    background-color: #3F3F3F; }

.cp-miniGrid .buttonCont .buttonItem.disabled {
  opacity: 0.5;
  cursor: default; }

.cp-miniGrid .buttonCont .buttonItem.buttonCustom {
  background-image: url("../Images/icons/");
  background-repeat: no-repeat;
  background-position: center; }

.cp-miniGrid .buttonCont .buttonItem.buttonNew {
  background-color: #38a169;
  background-image: url("../Images/icons/icons_plus 12 px white.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-miniGrid .buttonCont .buttonItem.buttonEdit {
  background-color: #38a169;
  background-image: url("../Images/icons/icons_edit 12 px white.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-miniGrid .buttonCont .buttonItem.buttonDelete {
  background-color: #3F3F3F;
  background-image: url("../Images/icons/icons_cross 12 px white.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-miniGrid .buttonCont .buttonItem.buttonMoveUp {
  background-color: #38a169;
  background-size: 14px;
  transform: rotate(180deg);
  background-image: url("../Images/icons/icons_arrow_down_line 12 px white.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-miniGrid .buttonCont .buttonItem.buttonMoveDown {
  background-color: #38a169;
  background-size: 14px;
  background-image: url("../Images/icons/icons_arrow_down_line 12 px white.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-miniGrid .buttonCont .buttonItem.buttonMoveUpWhite {
  background-color: white;
  background-size: 14px;
  border: 1px solid #d7d7d7;
  transform: rotate(-90deg);
  background-image: url("../Images/icons/icons 16px color_full arrow 16px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-miniGrid .buttonCont .buttonItem.buttonMoveDownWhite {
  background-color: white;
  background-size: 14px;
  border: 1px solid #d7d7d7;
  transform: rotate(90deg);
  background-image: url("../Images/icons/icons 16px color_full arrow 16px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-miniGrid .buttonCont .buttonItem.buttonFilter {
  background-color: #38a169;
  background-size: 14px;
  background-image: url("../Images/icons/icons 16px white_filter 16 px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-miniGrid .buttonCont .buttonItem.buttonOther {
  background-color: #FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
  background-image: url("../Images/icons/more-horizontal-outline.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-miniGrid .buttonContTransp {
  opacity: 0.5; }
  .cp-miniGrid .buttonContTransp .buttonItem {
    box-shadow: none; }
  .cp-miniGrid .buttonContTransp .buttonItem.buttonEdit {
    background-color: transparent;
    background-image: url("../Images/icons/icons_edit 12 px grey.png");
    background-repeat: no-repeat;
    background-position: center; }

.cp-miniGrid .columnBox {
  padding-top: 5px;
  padding-bottom: 5px; }

.cp-miniGrid .overflowVisible {
  overflow: visible !important; }

.cp-miniGrid.btnPosTop .buttonCont {
  align-items: flex-start;
  padding-top: 12px; }

.cp-miniGrid.btnPosMiddle .buttonCont {
  align-items: center; }

.cp-miniGrid.btnPosBottom .buttonCont {
  align-items: flex-end;
  padding-bottom: 12px; }

.cp-miniGrid.fullToBottom {
  height: 100%; }
  .cp-miniGrid.fullToBottom .content {
    height: 100%; }
  .cp-miniGrid.fullToBottom .contentRow {
    border-right: 1px solid transparent; }
  .cp-miniGrid.fullToBottom .noDataBoxCont {
    height: 100%; }

.miniGridStyle1 .cp-miniGrid .contentRow {
  background-color: #F4F5F8;
  border: none; }

.miniGridStyle1 .cp-miniGrid .altRow {
  background-color: #FFFFFF; }

.miniGridStyle1 .cp-miniGrid .hd1 {
  font-size: 16px; }

.miniGridStyle1 .cp-miniGrid .header {
  border-bottom: 1px solid #d7d7d7; }

.miniGridStyle1 .cp-miniGrid .headerCol {
  font-weight: bold; }

.miniGridStyle1 .cp-miniGrid .overflowVisible {
  overflow: visible !important; }

.miniGridStyleTotal .cp-miniGrid .content {
  background-color: transparent; }

.miniGridStyleTotal .cp-miniGrid .contentRow {
  border: none; }

.miniGridStyleTotal .cp-miniGrid .contentCol {
  font-size: 14px;
  font-weight: bold;
  padding-top: 3px;
  padding-bottom: 3px; }

.miniGridStyleTotal .cp-miniGrid .hd1 {
  font-size: 16px; }

.miniGridStyleTotal .cp-miniGrid .header {
  border-bottom: 1px solid #d7d7d7; }

.miniGridStyle2 .cp-miniGrid .contentRow {
  padding-left: 14px;
  padding-right: 14px; }

.miniGridStyle3 .cp-miniGrid {
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #ebebeb; }
  .miniGridStyle3 .cp-miniGrid .contentRow {
    background-color: #F4F5F8;
    border: none; }
  .miniGridStyle3 .cp-miniGrid .altRow {
    background-color: #FFFFFF; }
  .miniGridStyle3 .cp-miniGrid .hd1 {
    font-size: 16px; }
  .miniGridStyle3 .cp-miniGrid .headerCol {
    font-weight: bold; }
  .miniGridStyle3 .cp-miniGrid .overflowVisible {
    overflow: visible !important; }

.miniGridHoverShadow .contentRow:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px; }

.miniGridStyleLegend .cp-miniGrid .contentCol {
  padding: 8px 8px; }

.essSelectionListGrid .cp-miniGrid .content {
  background-color: transparent;
  margin-top: -12px; }

.essSelectionListGrid .cp-miniGrid .contentRow {
  background-color: #FFFFFF;
  margin-top: 12px;
  border-radius: 6px; }

.essSelectionListGrid .cp-miniGrid .title {
  font-size: 12px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.87);
  margin-bottom: 4px; }

.essSelectionListGrid .cp-miniGrid .info {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.87); }

.essGridRowHeight .cp-miniGrid .contentRow {
  min-height: 84px; }

.bgGreyWithMargin .cp-miniGrid .contentRow {
  background-color: #F4F5F8;
  margin-bottom: 8px;
  border: 1px solid #F4F5F8 !important;
  border-radius: 4px; }

.bgWhiteWithMargin .cp-miniGrid .content {
  background: transparent; }

.bgWhiteWithMargin .cp-miniGrid .contentRow {
  background-color: #FFFFFF;
  margin-bottom: 8px;
  border-radius: 4px;
  border: none; }

.roundedItem {
  border-radius: 4px; }

.withRadius .cp-miniGrid .contentRow {
  border-radius: 4px; }

.focusableBox .cp-miniGrid .contentRow.focused {
  border: 1px solid #38A5E8 !important; }

.attachmentGrid .cp-miniGrid .contentRow {
  min-height: 84px; }

.transparentBgWhiteItem .cp-miniGrid .content {
  background-color: transparent; }

.transparentBgWhiteItem .cp-miniGrid .contentRow {
  background-color: #FFFFFF; }

.borderRowOnly .content {
  margin-top: 0px; }

.borderRowOnly .contentRow {
  border: none;
  border-top: 1px solid #d7d7d7; }

.cp-miniGrid.focusable .contentRow {
  cursor: pointer; }

.cp-miniGrid.focusable .focused {
  border: 1px solid #38A5E8;
  z-index: 1; }

.cp-miniGrid.noBorderColumn .contentCol {
  border: none; }

.cp-miniGrid.noRowSideBorder .contentRow {
  border-left: none;
  border-right: none; }

.cp-miniGrid.noRowSideBorder .contentRow.focused {
  border-left: none;
  border-right: none; }

.cp-miniGrid.noRowTopBorder .contentRow {
  border-top: none; }

.cp-miniGrid.noRowTopBorder .contentRow.focused {
  border-top: none; }

.cp-miniGrid.noRowBottomBorder .contentRow:last-child {
  border-bottom: none; }

.cp-miniGrid.noRowBottomBorder .contentRow.focused:last-child {
  border-bottom: none; }

.cp-miniGrid.rowDisplayWrap .header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between; }

.cp-miniGrid.rowDisplayWrap .content {
  display: flex;
  flex-wrap: wrap;
  /*Putting left row and right row to the same height*/
  align-items: stretch;
  justify-content: space-between; }

.cp-miniGrid.rowDisplayWrap .contentRow {
  margin-left: -1px;
  box-sizing: border-box;
  flex-wrap: wrap; }

.cp-miniGrid.rowDisplayWrapCross {
  display: flex; }

.cp-miniGrid.rowDisplayWrapCross .content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; }

.cp-miniGrid.rowDisplayWrapCross .contentRow {
  box-sizing: border-box;
  flex-wrap: wrap; }

.cp-miniGrid.rowDisplayWrapCross .contentRight .contentRow {
  margin-left: -1px; }

/***/
/*Item List*/
.cp-itemList {
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  background-color: #FFFFFF;
  border: 1px solid #d7d7d7; }
  .cp-itemList.tranparentBackground {
    background-color: transparent;
    border: none; }
  .cp-itemList.noPaddingContainer {
    padding: 0px; }
  .cp-itemList.shift {
    align-items: center;
    border: none;
    padding: 0px;
    background: transparent; }
    .cp-itemList.shift .content {
      flex-grow: 0; }
    .cp-itemList.shift .item {
      border-radius: 4px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 40px;
      font-weight: bold;
      color: white;
      text-shadow: 0px 0px 5px #333;
      cursor: pointer;
      border: 1px solid #d7d7d7; }
  .cp-itemList .btnPrev {
    margin-right: 10px; }
  .cp-itemList .btnNext {
    margin-left: 10px; }
  .cp-itemList.pagingScroll .content {
    flex-wrap: nowrap;
    overflow: hidden; }
  .cp-itemList.pagingScroll .item {
    flex-shrink: 0; }
  .cp-itemList .highRadius {
    border-radius: 50px !important; }
  .cp-itemList .mediumRadius {
    border-radius: 15px !important; }
  .cp-itemList .lowRadius {
    border-radius: 8px !important; }

.cp-itemList .listTitle {
  width: 100px;
  font-weight: bold;
  flex-shrink: 0; }

.cp-itemList .content {
  display: flex;
  flex-grow: 1;
  margin: -5px -5px;
  flex-wrap: wrap; }

.cp-itemList .item {
  position: relative;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  padding: 10px;
  margin: 5px 5px;
  border-radius: 4px;
  min-width: 55px; }

.cp-itemList .label {
  text-align: center;
  font-weight: bold; }

.cp-itemList .desc {
  margin-top: 3px;
  text-align: center;
  color: #2C61D7; }

.cp-itemList.vertical .item {
  width: 100%; }

.cp-itemList .buttonDelete {
  position: absolute;
  right: 0;
  width: 15px;
  height: 15px;
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 5px; }

.cp-itemList.useButtonDelete .item {
  padding-right: 25px; }

.cp-itemList.itemAlignLeft .label {
  text-align: left; }

.cp-itemList.itemAlignLeft .desc {
  text-align: left; }

.cp-itemList.itemAlignCenter .label {
  text-align: center; }

.cp-itemList.itemAlignCenter .desc {
  text-align: center; }

.cp-itemList.itemAlignCenter .value {
  text-align: center; }

.cp-itemList.itemAlignRight .label {
  text-align: right; }

.cp-itemList.itemAlignRight .desc {
  text-align: right; }

.cp-itemList.itemPlain .item {
  border: none;
  padding: 0; }

.cp-itemList.card {
  padding: 0px;
  border: none; }
  .cp-itemList.card .value {
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.87);
    font-size: 20px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4; }
  .cp-itemList.card .itemContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1; }
  .cp-itemList.card .label {
    font-size: 14px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: rgba(0, 0, 0, 0.87);
    white-space: nowrap;
    text-overflow: ellipsis; }
  .cp-itemList.card .imgIcon {
    margin-right: 8px; }
  .cp-itemList.card .desc {
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.87);
    white-space: nowrap;
    text-overflow: ellipsis; }
  .cp-itemList.card .item {
    display: flex;
    width: 286px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
    padding: 15px 16px; }

.cp-itemList.contentAlignCenter .content {
  justify-content: center; }

.cp-itemList.contentAlignRight .content {
  justify-content: flex-end; }

.cp-itemList.focusable .item {
  cursor: pointer; }

.cp-itemList.focusable .focused {
  z-index: 1; }
  .cp-itemList.focusable .focused.standard {
    border: 1px solid #38A5E8; }

.itemListHor .cp-itemList {
  border: none;
  padding: 0px; }
  .itemListHor .cp-itemList .row {
    display: flex;
    align-items: flex-end; }
  .itemListHor .cp-itemList .innerRow {
    padding: 15px; }
  .itemListHor .cp-itemList .row.hd {
    background: linear-gradient(to right, #38a169, #50ba7d, #68d391);
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    color: #FFFFFF;
    font-size: 16px; }
  .itemListHor .cp-itemList .item {
    border: none;
    min-width: 270px;
    flex-shrink: 0; }
  .itemListHor .cp-itemList .innerContent {
    border-radius: 6px;
    overflow: hidden;
    background-color: #F4F5F8; }
  .itemListHor .cp-itemList .content {
    flex-wrap: nowrap;
    overflow: auto; }

.itemListColumnarCard .cp-itemList {
  border: none; }
  .itemListColumnarCard .cp-itemList .content {
    flex-wrap: nowrap;
    overflow: auto; }
  .itemListColumnarCard .cp-itemList .item {
    flex-shrink: 0;
    padding: 0px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15); }
  .itemListColumnarCard .cp-itemList .innerContent {
    display: flex;
    position: relative; }
  .itemListColumnarCard .cp-itemList .leftContent {
    width: 140px;
    flex-shrink: 0;
    background-color: #5a67d8;
    box-sizing: border-box;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 20px;
    padding-right: 20px; }
  .itemListColumnarCard .cp-itemList .rightContent {
    width: 221px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -15px;
    color: #2E3849; }
  .itemListColumnarCard .cp-itemList .optionContent {
    position: absolute;
    display: none;
    top: 10px;
    right: 10px; }
  .itemListColumnarCard .cp-itemList .innerContent:hover .optionContent {
    display: block; }
  .itemListColumnarCard .cp-itemList .optionButton {
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background-color: #3F3F3F;
    cursor: pointer;
    background-image: url("../Images/icons/icons_burger 12 px white.png");
    background-repeat: no-repeat;
    background-position: center; }
  .itemListColumnarCard .cp-itemList .rowGroup {
    margin-bottom: 16px; }
  .itemListColumnarCard .cp-itemList .rowTitle {
    margin-bottom: 8px; }
  .itemListColumnarCard .cp-itemList .rowValue {
    display: flex;
    align-items: flex-end; }
  .itemListColumnarCard .cp-itemList .value {
    margin-right: 5px; }

/***/
/*Group Option*/
.cp-groupOption {
  position: relative; }

.cp-groupOption .contDisplay {
  display: inline-flex;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #d7d7d7;
  height: 32px;
  align-items: center;
  position: relative;
  box-sizing: border-box; }

.cp-groupOption .contDisplay:hover {
  border: 1px solid #38A5E8; }

.cp-groupOption .itemCont {
  display: flex;
  padding: 0px 12px;
  box-sizing: border-box;
  height: 100%;
  align-items: center; }

.cp-groupOption .itemContActive {
  cursor: pointer; }

.cp-groupOption .itemCont:not(.itemContLast) {
  border-right: 1px solid #d7d7d7; }

.cp-groupOption .statusLogo {
  width: 10px;
  height: 10px;
  border-radius: 25px;
  margin-right: 5px; }

.cp-groupOption .calendarSymbol {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url("../Images/icons/icons_calendar 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-groupOption .otherSymbol {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url("../Images/icons/icons_gear 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-groupOption .listSymbol {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url("../Images/icons/icons 16px color_list 16 px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-groupOption .filterSymbol {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-image: url("../Images/icons/icons_filter 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-groupOptionPopUp.contContentOuter {
  position: absolute;
  top: calc(100% + 8px);
  box-sizing: border-box;
  width: 515px;
  background-color: #F4F5F8;
  border: 1px solid #d7d7d7;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  z-index: 3; }
  .cp-groupOptionPopUp.contContentOuter .contContentInner {
    padding: 12px; }
  .cp-groupOptionPopUp.contContentOuter .section {
    margin-bottom: 15px; }
  .cp-groupOptionPopUp.contContentOuter .title {
    font-size: 12px;
    font-weight: bold;
    color: #2E3849;
    margin-bottom: 5px; }
  .cp-groupOptionPopUp.contContentOuter .statusLogo {
    width: 10px;
    height: 10px;
    border-radius: 25px;
    margin-right: 5px; }
  .cp-groupOptionPopUp.contContentOuter .buttonContainer {
    border-top: 1px solid #d7d7d7;
    height: 42px;
    padding-right: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center; }
  .cp-groupOptionPopUp.contContentOuter .compContList {
    display: flex; }
    .cp-groupOptionPopUp.contContentOuter .compContList .cp-pidComponent:not(:last-child) {
      margin-right: 8px; }
  .cp-groupOptionPopUp.contContentOuter .hintLabel {
    font-size: 12px;
    color: #2E3849;
    margin-bottom: 5px; }

/**/
/*#region Notice */
.divNotice {
  background-color: #FFFFFF;
  border: 1px solid DarkGray;
  min-width: 40px;
  overflow: hidden;
  padding: 2px 15px;
  vertical-align: middle;
  width: auto;
  text-align: left; }

.NoticeTitle {
  font-size: 10pt;
  fill: #353535;
  color: #353535;
  font-weight: bold; }

.NoticeText {
  font-size: 10pt;
  fill: #353535;
  color: #353535;
  font-weight: bold; }

/*#endregion */
/*Search Field*/
.cp-searchField {
  display: flex;
  gap: 4px; }

.cp-searchField .comboBoxCont {
  width: 40%; }

.cp-searchField .buttonEditCont {
  width: 60%;
  margin-left: -1px; }

.cp-searchField.noComboBox .buttonEditCont {
  width: 100%;
  margin-left: 0px; }

.cp-searchField .cp-comboboxCont.cp-focused {
  z-index: 2; }

.cp-searchField .cp-buttonEditCont.focused {
  z-index: 1; }

.cp-searchField .removeCont {
  background-image: url("../Images/icons/PID_Silang.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 32px;
  height: 32px;
  background-size: 22px;
  cursor: pointer; }

.cp-searchField.withTransparency {
  height: 32px;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 5px; }
  .cp-searchField.withTransparency ::placeholder {
    color: rgba(255, 255, 255, 0.6); }
  .cp-searchField.withTransparency .cp-comboboxCont {
    color: rgba(255, 255, 255, 0.87);
    background-color: transparent;
    border-radius: 8px 0px 0px 8px; }
    .cp-searchField.withTransparency .cp-comboboxCont .input {
      color: rgba(255, 255, 255, 0.87);
      background-color: transparent; }
    .cp-searchField.withTransparency .cp-comboboxCont .arrow {
      background-color: transparent; }
    .cp-searchField.withTransparency .cp-comboboxCont .arrow {
      background-image: url("../Images/icons/icons_12px_white_02_arrow_down 12 px.svg");
      background-repeat: no-repeat;
      background-position: center; }
  .cp-searchField.withTransparency .buttonEditCont {
    margin-left: 0px; }
  .cp-searchField.withTransparency .cp-buttonEditCont .inner {
    color: rgba(255, 255, 255, 0.87);
    background-color: transparent;
    border-radius: 0px 8px 8px 0px; }
    .cp-searchField.withTransparency .cp-buttonEditCont .inner .input {
      background-color: transparent;
      color: rgba(255, 255, 255, 0.87); }
  .cp-searchField.withTransparency .boxBorder {
    border: none !important; }
  .cp-searchField.withTransparency .separatorSearchContainer {
    display: flex;
    align-items: center;
    height: 100%;
    width: 1px; }
    .cp-searchField.withTransparency .separatorSearchContainer .separatorSearch {
      background-color: transparent;
      width: 1px;
      height: 18px;
      border-left: 1px solid #FFFFFF; }

.cp-searchField.sizeLarger {
  height: 46px; }
  .cp-searchField.sizeLarger .cp-comboboxCont {
    height: 46px; }
  .cp-searchField.sizeLarger .cp-buttonEditCont .inner {
    height: 46px; }
  .cp-searchField.sizeLarger .input {
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4; }
  .cp-searchField.sizeLarger ::placeholder {
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4; }

/***/
/*PopUp Validation*/
.cp-popUpValidation {
  z-index: 4; }

.cp-popUpValidation.popUpCenter .inner-popUpValidation {
  height: 500px; }

.cp-popUpValidation.popUpCenter .content {
  overflow: auto; }

.cp-popUpValidation.popUpMultiGrid .inner-popUpValidation {
  height: auto; }

.cp-popUpValidation .inner-popUpValidation {
  width: 600px;
  max-height: 95%;
  display: flex;
  flex-direction: column; }

.cp-popUpValidation .info {
  margin-bottom: 5px;
  font-size: 13px; }

.cp-popUpValidation .content {
  height: 100%; }

.cp-popUpValidation .contentMulti {
  flex-grow: 1;
  overflow: auto;
  margin-bottom: -10px; }
  .cp-popUpValidation .contentMulti .label {
    font-size: 14px;
    color: #2E3849;
    margin-bottom: 5px; }
  .cp-popUpValidation .contentMulti .contentItemContainer {
    margin-bottom: 10px; }

.cp-popUpValidation .btnCont {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  box-sizing: border-box; }

/***/
/*Preview Image*/
.cp-previewImage .currImgCont {
  width: 200px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding-bottom: 15px;
  margin: auto;
  position: relative; }

.cp-previewImage .currImg {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain; }

.cp-previewImage .otherImgOuterCont {
  display: flex;
  justify-content: center;
  position: relative;
  margin-right: -5px; }

.cp-previewImage .otherImgCont {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 3px;
  border: 1px solid #d7d7d7;
  cursor: pointer;
  margin-right: 5px; }

.cp-previewImage .otherImg {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain; }

.cp-previewImage .magImgCont {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px solid #d7d7d7;
  pointer-events: none;
  background-repeat: no-repeat;
  box-sizing: border-box; }

.cp-previewImage.previewPopUp .currImgCont {
  padding-bottom: 0px; }

.cp-previewImage.previewPopUp .currImg {
  cursor: pointer; }

.imagePreviewPopUpCont {
  height: 100%; }
  .imagePreviewPopUpCont .currImgPopUpCont {
    height: 90%;
    padding-bottom: 18px;
    box-sizing: border-box; }
  .imagePreviewPopUpCont .currImgPopUp {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain; }
  .imagePreviewPopUpCont .otherImgOuterPopUpCont {
    display: flex;
    justify-content: center;
    margin-right: -5px;
    height: 10%; }
  .imagePreviewPopUpCont .otherImgCont {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 3px;
    border: 1px solid #d7d7d7;
    cursor: pointer;
    margin-right: 5px; }
  .imagePreviewPopUpCont .otherImg {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain; }

/***/
/*Category List*/
.cp-categoryList .catItem {
  border: 1px solid #d7d7d7;
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  margin-top: -1px;
  position: relative; }

.cp-categoryList .catListCont {
  position: relative;
  margin-top: 1px;
  background-color: #FFF; }

.cp-categoryList .catItemName {
  width: 100px;
  font-weight: bold;
  flex-shrink: 0; }

.cp-categoryList .catItemList {
  display: flex;
  flex-grow: 1;
  margin: -5px;
  flex-wrap: wrap; }

.cp-categoryList .item {
  position: relative;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  padding: 10px;
  margin: 5px;
  border-radius: 3px;
  min-width: 55px; }

.cp-categoryList .item.focused {
  border: 1px solid #38A5E8;
  z-index: 1; }

.cp-categoryList .label {
  text-align: center;
  font-weight: bold; }

.cp-categoryList .desc {
  margin-top: 3px;
  text-align: center;
  color: #2C61D7; }

.cp-categoryList .desc.clickable:hover {
  text-decoration: underline; }

.cp-categoryList.focusable .catItem {
  cursor: pointer; }

.cp-categoryList.focusable .focused {
  border: 1px solid #38A5E8;
  z-index: 1; }

.cp-categoryList.noRowSideBorder .catItem {
  border-left: none;
  border-right: none; }

.cp-categoryList.noRowSideBorder .catItem.focused {
  border-left: none;
  border-right: none; }

.cp-categoryList.noRowTopBorder .catItem {
  border-top: none; }

.cp-categoryList.noRowTopBorder .catItem.focused {
  border-top: none; }

/***/
/*Button Info*/
.cp-buttonInfo {
  position: relative;
  white-space: normal; }

.cp-buttonInfo .inner {
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  display: flex;
  align-items: stretch;
  background-color: #FFFFFF;
  min-height: 37px; }

.cp-buttonInfo .info {
  flex-grow: 1;
  border-right: 1px solid #d7d7d7;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  color: #2C61D7;
  display: flex;
  align-items: center; }

.cp-buttonInfo .button {
  flex-shrink: 0;
  width: 35px;
  width: 16px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer; }

.cp-buttonInfo.btn-list .button {
  background-image: url("../Images/icons/icons_list 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-buttonInfo.cp-ribbonStyle .inner {
  min-height: 32px; }

/***/
/*region Product Selector*/
.productSelectorCont {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  height: 100%;
  width: 100%; }

.cp-productSelector {
  height: 100%;
  width: 100%;
  background-color: #F4F5F8;
  display: flex;
  flex-direction: column; }

.cp-productSelector .ps-head {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #d7d7d7;
  padding: 5px 15px;
  flex-shrink: 0; }

.cp-productSelector .ps-body {
  height: 100%;
  flex-grow: 1;
  display: flex;
  overflow: hidden; }

.cp-productSelector .prodListCont {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 67%;
  height: 100%; }

.cp-productSelector .prodCartOuterCont {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 33%;
  height: 100%;
  border-left: 1px solid #d7d7d7;
  display: flex;
  flex-direction: column; }

.cp-productSelector .ps-buttonCont {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  border-top: 1px solid #d7d7d7;
  position: relative; }

.cp-productSelector .ps-title {
  flex-shrink: 0;
  font-weight: bold;
  font-size: 16px;
  margin-right: 23px; }

.cp-productSelector .ps-optionCont {
  flex-grow: 1;
  display: flex; }

.cp-productSelector .ps-close {
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px;
  cursor: pointer; }

.cp-productSelector .ps-searchField {
  width: 400px; }

.cp-productSelector .ps-filterItem {
  width: 100px;
  margin-right: 3px; }

.cp-productSelector .sep-line {
  border-left: 1px solid #d7d7d7;
  width: 1px;
  margin-left: 3px;
  margin-right: 4px; }

.cp-productSelector .prodListCont {
  padding-left: 10px;
  padding-right: 10px;
  overflow: auto; }

.cp-productSelector .prodItemCont {
  width: 100%;
  height: 90px;
  background-color: #FFFFFF;
  margin-top: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 0;
  display: flex; }

.cp-productSelector .prodImg {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain; }

.cp-productSelector .prodItemCont .prodItemLeft {
  width: 80px;
  flex-shrink: 0;
  height: 100%; }

.cp-productSelector .prodItemCont .prodItemRight {
  flex-grow: 1;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -3px;
  margin-bottom: -3px; }

.cp-productSelector .prodItemCont .prodItemHead {
  margin-top: 3px;
  margin-bottom: 3px; }

.cp-productSelector .prodItemCont .prodItemName {
  font-weight: bold;
  font-size: 14px; }

.cp-productSelector .prodItemCont .prodFieldSep {
  margin-left: 2px;
  margin-right: 2px; }

.cp-productSelector .prodItemCont .prodFieldCont {
  display: flex;
  margin-top: 3px;
  margin-bottom: 3px; }

.cp-productSelector .prodItemCont .prodFieldLabel {
  color: #5A6881; }

.cp-productSelector .prodItemCont .prodCatSep {
  color: #5A6881; }

.cp-productSelector .prodItemCont .prodItemButton {
  display: flex;
  align-items: center;
  padding-right: 5px; }

.cp-productSelector .prodCartOuterCont .prodCartTtl {
  flex-shrink: 0;
  padding: 10px;
  font-weight: bold;
  font-size: 14px; }

.cp-productSelector .prodCartOuterCont .prodCartCont {
  flex-grow: 1;
  overflow: auto;
  padding: 10px;
  margin-bottom: 10px; }

.cp-productSelector .prodCartOuterCont .prodCartNoItem {
  flex-grow: 1;
  padding: 0px 10px;
  color: #5A6881; }

.cp-productSelector .prodCartOuterCont .prodCartTotalCont {
  flex-shrink: 0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  border-top: 1px solid #d7d7d7; }

.cp-productSelector .prodCartOuterCont .totalLabel {
  font-size: 15px; }

.cp-productSelector .prodCartOuterCont .totalCurr {
  font-size: 15px;
  color: #5A6881; }

.cp-productSelector .prodCartOuterCont .totalAmount {
  font-size: 15px; }

.cp-productSelector .prodCartOuterCont .prodCartPopUpCont {
  position: absolute;
  background-color: #F4F5F8;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  padding: 10px;
  border: 1px solid #d7d7d7;
  top: 15px;
  left: 0px;
  transform: translateX(-100%);
  width: 300px; }

.cp-productSelector .prodCartOuterCont .pc-prodName {
  font-size: 14px;
  margin-bottom: 8px; }

.cp-productSelector .prodCartOuterCont .pc-qtyCont {
  display: flex; }

.cp-productSelector .prodCartOuterCont .pcQty {
  box-sizing: border-box;
  width: calc(40% - 5px);
  flex-shrink: 0; }

.cp-productSelector .prodCartOuterCont .pcQtyUOMSep {
  box-sizing: border-box;
  width: 10px;
  flex-shrink: 0; }

.cp-productSelector .prodCartOuterCont .pcUOM {
  box-sizing: border-box;
  width: calc(60% - 5px);
  flex-shrink: 0; }

.cp-productSelector .prodCartOuterCont .pcCompSection {
  margin-bottom: 13px; }

.cp-productSelector .prodCartOuterCont .pcLabelSection {
  margin-bottom: 8px; }

.cp-productSelector .prodCartOuterCont .pcCompSectionFlex {
  display: flex; }

.cp-productSelector .prodCartOuterCont .pcCompLeft {
  flex-shrink: 0; }

.cp-productSelector .prodCartOuterCont .pcCompRight {
  flex-grow: 1; }

.cp-productSelector .prodCartOuterCont .pcDelProd {
  display: inline-block; }

.cp-productSelector .prodShowMore {
  color: #2C61D7;
  display: flex;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 13px; }

.cp-productSelector .prodShowMoreText:hover {
  cursor: pointer;
  text-decoration: underline; }

/***/
/*Incrementor*/
.cp-incrementor .inner {
  box-sizing: border-box;
  height: 32px;
  border: 1px solid #38a169;
  background-color: #FFFFFF;
  width: 100%;
  display: flex;
  border-radius: 3px; }

.cp-incrementor .btn {
  height: 100%;
  width: 25px;
  flex-shrink: 0;
  cursor: pointer; }

.cp-incrementor .btnPlus {
  background-image: url("../Images/icons/icons_plus 8 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-incrementor .btnMin {
  background-image: url("../Images/icons/icons_minus 8 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-incrementor .inputCont {
  flex-grow: 1; }

.cp-incrementor .input {
  border: none;
  width: 100%;
  flex-grow: 1;
  height: 100%;
  text-align: center; }

/***/
/*CheckList*/
.cp-checkList .innerCL {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1px; }

.cp-checkList .itemCont {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border: 1px solid #d7d7d7;
  background-color: #FFFFFF;
  box-sizing: border-box;
  margin-right: -1px;
  margin-bottom: -1px; }

.cp-checkList.repeatVertical .innerCL {
  flex-direction: column; }

.cp-checkList.style2 .itemCont {
  border: none;
  background-color: transparent; }

/***/
/*Filter Option*/
.cp-filterOption {
  position: relative; }

.cp-filterOption .itemContFO {
  display: flex;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  padding: 0px 6px;
  cursor: pointer;
  border-bottom: 2px solid transparent; }

.cp-filterOption .itemContFO:hover {
  border-bottom: 2px solid #3B93DB; }

.cp-filterOption .placeholder {
  flex-grow: 1; }

.cp-filterOption .icon {
  flex-shrink: 0;
  background-image: url("../Images/icons/icons_12px_color_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px; }

.cp-filterOption.style2 .contContentOuter {
  background-color: #FFFFFF;
  border-radius: 8px; }

.cp-filterOption.style2 .placeholder {
  color: #38A5E8; }

.cp-filterOption.style2 .icon {
  background-image: url("../Images/icons/icons_12px_blue_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.cp-filterOption.style2 .iconFilter {
  background-image: url("../Images/icons/funnel-outline-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: none; }

.cp-filterOption.style2 .itemContFO {
  border-radius: 8px;
  height: 40px;
  border: 1px solid transparent; }

.cp-filterOption.style2 .itemContFO:hover {
  border: 1px solid transparent;
  background-color: rgba(56, 165, 232, 0.16); }

.cp-filterOption.style2.hasFilter .itemContFO {
  background-color: #38A5E8;
  border: 1px solid transparent; }
  .cp-filterOption.style2.hasFilter .itemContFO .icon {
    display: none; }
  .cp-filterOption.style2.hasFilter .itemContFO .iconFilter {
    display: block; }

.cp-filterOption.style2.hasFilter .placeholder {
  color: rgba(255, 255, 255, 0.87); }

.cp-filterOption.style2.opened .itemContFO {
  border: 1px solid #38A5E8; }

.cp-filterOption.style2 .buttonContainer {
  background-color: #F8F9FB;
  border-top: none;
  height: 62px;
  padding-right: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-radius: 0px 0px 8px 8px; }

.cp-filterOption .contContentOuter {
  position: absolute;
  top: calc(100% + 8px);
  box-sizing: border-box;
  width: 700px;
  background-color: #F4F5F8;
  border: 1px solid #d7d7d7;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  z-index: 3; }

.cp-filterOption .contContentInner {
  padding: 12px; }

.cp-filterOption .title {
  font-size: 12px;
  font-weight: bold;
  color: #2E3849;
  margin-bottom: 5px; }

.cp-filterOption .buttonContainer {
  border-top: 1px solid #d7d7d7;
  height: 42px;
  padding-right: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center; }

.cp-filterOption.popUpWidthAuto .contContentOuter {
  width: auto;
  min-width: 360px; }

.cp-filterOption.opened .itemContFO {
  border-bottom: 2px solid #3B93DB; }

.cp-filterOption.hasFilter .itemContFO {
  border-bottom: 2px solid #3B93DB; }

/***/
/*Yes No*/
.cp-yesNo {
  display: flex; }

.cp-yesNo .ynItem {
  text-align: center;
  width: 100px;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  cursor: pointer;
  font-size: 13px; }

.cp-yesNo .ynItem.activated {
  border-bottom: 2px solid #38a169;
  font-weight: bold; }

.cp-yesNo .ynItem:not(.activated):hover {
  border-bottom: 2px solid rgba(0, 158, 115, 0.3); }

.cp-yesNo.disabled .ynItem {
  cursor: default;
  opacity: 0.5; }

.cp-yesNo.disabled .ynItem:not(.activated):hover {
  border-bottom: 2px solid transparent; }

/***/
/*Donut Chart*/
.cp-donutChart {
  position: relative; }

.cp-donutChart svg {
  position: absolute; }

.cp-donutChart .text {
  text-anchor: middle; }

.cp-donutChart .overlay {
  position: absolute;
  top: 0.5px;
  left: 0.5px;
  border-radius: 1000px; }

.cp-donutChart.style-1 .arc-0 {
  fill: #63a6f7; }

.cp-donutChart.style-1 .arc-1 {
  fill: #cecfce; }

.cp-donutChart.style-1 .text {
  fill: #2E3849;
  font-weight: bold; }

.cp-donutChart.style-1 .currRemainingText {
  fill: #2C61D7; }

.cp-donutChart.style-2 .arc-0 {
  fill: #63a6f7; }

.cp-donutChart.style-2 .arc-1 {
  fill: #ffffff; }

.cp-donutChart.style-2 .text {
  fill: #ffffff; }

.cp-donutChart.style-2 .overlay {
  background-color: #42b2ce;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25); }

/***/
/*Input OTP*/
.cp-inputOTP .inner {
  display: flex;
  height: 50px; }

.cp-inputOTP .inputItemCont {
  border-bottom: 1px solid #d7d7d7;
  height: 100%;
  box-sizing: border-box; }

.cp-inputOTP .inputItemCont:not(:last-child) {
  margin-right: 15px; }

.cp-inputOTP .inputItem {
  border: none;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: bold; }

/***/
/*No Data Box*/
.noDataBoxCont {
  text-align: center;
  border: 1px solid #d7d7d7;
  min-height: 43px;
  color: #2E3849;
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  justify-content: center;
  font-size: 12px;
  width: 100%;
  box-sizing: border-box; }
  .noDataBoxCont.noBorder {
    border: 1px solid transparent; }
  .noDataBoxCont.noBorderLeftWeak {
    border: 1px solid transparent;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.6);
    text-align: left;
    justify-content: flex-start; }
  .noDataBoxCont.numbering {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 21px; }
  .noDataBoxCont.numbering .icon {
    background-image: url("../Images/icons/icons_lightbulb green 32px.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px;
    width: 32px;
    height: 32px;
    margin-right: 15px; }
  .noDataBoxCont.analysisDesign {
    background-color: #F4F5F8;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 21px;
    border: none; }
    .noDataBoxCont.analysisDesign .icon {
      background-image: url("../Images/icons/icons_lightbulb green 32px.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 32px;
      width: 32px;
      height: 32px;
      margin-right: 15px; }
  .noDataBoxCont.customText {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 21px;
    border: none;
    background-color: #F4F5F8; }
    .noDataBoxCont.customText .icon {
      background-image: url("../Images/icons/icons_lightbulb green 32px.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 32px;
      width: 32px;
      height: 32px;
      margin-right: 15px; }
  .noDataBoxCont.customTextTransparent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 21px;
    border: none;
    background-color: transparent; }
    .noDataBoxCont.customTextTransparent .icon {
      background-image: url("../Images/icons/icons_lightbulb green 32px.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 32px;
      width: 32px;
      height: 32px;
      margin-right: 15px; }
  .noDataBoxCont.customTextTransparentBordered {
    border: 1px solid #d7d7d7; }

/***/
/*Personalization Item*/
.cp-personalizationItem {
  display: flex;
  background-color: white;
  box-sizing: border-box;
  margin-bottom: 10px;
  border: 1px solid #d7d7d7;
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 24px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 0;
  border-radius: 3px; }

.cp-personalizationItem:hover {
  /*border: 1px solid $border-grey-darker;
    box-shadow: $box-shadow-light;*/ }

.cp-personalizationItem .pi-checkBox {
  margin-right: 5px; }

.cp-personalizationItem .pi-text {
  padding-right: 10px;
  flex-grow: 1;
  color: #2E3849; }

.cp-personalizationItem .pi-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  margin-top: 1px;
  margin-bottom: 12px; }

.cp-personalizationItem .pi-hint {
  font-size: 14px; }

.cp-personalizationItem .pi-arrow {
  background-image: url("../Images/icons/arrow_right_grey.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 23px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer; }

/***/
.cp-gridLike .dx-datagrid-rowsview, .cp-gridLike .dx-treelist-rowsview {
  border-bottom: 1px solid #d7d7d7; }

.dx-datagrid-group-footer, .dx-datagrid-total-footer {
  border-top: none !important; }

/*Loading Bar*/
.cp-loadingBar {
  display: flex;
  width: 100%;
  align-items: center; }
  .cp-loadingBar .loadBar {
    position: relative;
    width: calc(100% - 50px);
    height: 25px; }
  .cp-loadingBar .loadOverLay {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #efebef; }
  .cp-loadingBar .loadProgress {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #6bd7ce, #63c3d6, #5ab2de); }
  .cp-loadingBar .loadedText {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 40px;
    color: #2E3849;
    font-size: 15px; }

/***/
/*warning Circle*/
.cp-warningCircle {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 3px solid #FFFFFF;
  background-color: #e7598c;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25); }

/***/
/*Formula*/
.cp-formula {
  position: relative; }
  .cp-formula .formulaInput {
    background: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #d7d7d7;
    z-index: 1; }
  .cp-formula .formulize-item {
    background-color: #F4F5F8 !important;
    border: 1px solid #d7d7d7 !important;
    font-size: 13px !important;
    padding: 2px 7px !important;
    margin: 3px !important; }
  .cp-formula .formulaLabel {
    font-size: 13px;
    margin-top: 15px; }
  .cp-formula .formulize-wrapper .formulize-alert {
    z-index: 1 !important; }
  .cp-formula .formulize-container {
    padding-bottom: 9px !important; }
  .cp-formula .inputCodeContainer {
    position: absolute;
    z-index: 5; }
  .cp-formula .formulaInputCode {
    padding: 5px;
    border: 1px solid #d7d7d7; }
  .cp-formula .formulaInputCode:focus {
    border: 1px solid #38A5E8; }

/***/
/*Style Box*/
.cp-styleBox.style-box-container {
  display: flex;
  height: 28px; }

.cp-styleBox .style-box-container-small {
  height: 25px; }

.cp-styleBox .style-box-container > .style-box-innercontainer:not(:last-child) {
  padding-right: 5px; }

.cp-styleBox .style-box-innercontainer {
  height: 100%;
  display: flex; }

.cp-styleBox .style-box-innercontainer > .style-box-item:first-child {
  border-left: none;
  margin-left: 0px; }

.cp-styleBox .style-box-item {
  height: 100%;
  width: 28px;
  border: none;
  box-sizing: border-box;
  background-color: #ffffff;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -1px; }

.cp-styleBox .style-box-item-small {
  width: 25px; }

.cp-styleBox .style-box-item-bold {
  background-image: url("../Images/icons/PID_B.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-styleBox .style-box-item-bold-selected {
  background-image: url("../Images/icons/PID_B-Over.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-styleBox .style-box-item-italic {
  background-image: url("../Images/icons/PID_I.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-styleBox .style-box-item-italic-selected {
  background-image: url("../Images/icons/PID_I-Over.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-styleBox .style-box-item-underline {
  background-image: url("../Images/icons/PID_U.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-styleBox .style-box-item-underline-selected {
  background-image: url("../Images/icons/PID_U-Over.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-styleBox .style-box-alignment-container {
  position: relative;
  display: flex;
  border: 1px solid #d7d7d7;
  background-color: white;
  height: 100%;
  width: auto;
  box-sizing: border-box;
  cursor: pointer; }

.cp-styleBox .style-box-alignment-item {
  width: 30px;
  height: 100%;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center; }

.cp-styleBox .style-box-alignment-arrow {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.cp-styleBox .style-box-alignment-item[data-value='1'] {
  background-image: url("../Images/icons/PID_ButtonLeft.gif");
  background-repeat: no-repeat;
  background-position: center; }

.cp-styleBox .style-box-alignment-item[data-value='2'] {
  background-image: url("../Images/icons/PID_ButtonCenter.gif");
  background-repeat: no-repeat;
  background-position: center; }

.cp-styleBox .style-box-alignment-item[data-value='3'] {
  background-image: url("../Images/icons/PID_ButtonRight.gif");
  background-repeat: no-repeat;
  background-position: center; }

.cp-styleBox .style-box-alignment-select {
  position: absolute;
  top: 100%;
  border-left: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
  z-index: 5; }

.cp-styleBox .style-box-alignment-select > div {
  height: 30px; }

.cp-styleBox .style-box-alignment-select > div:hover {
  background-color: #addbf7; }

.cp-styleBox .CheckBoxImg {
  background-color: white; }

.cp-styleBox .style-box-item-align {
  height: 100%;
  width: 28px;
  box-sizing: border-box;
  background-color: #ffffff;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: -1px;
  border: 1px solid #d7d7d7 !important; }
  .cp-styleBox .style-box-item-align.button-selected {
    background-color: #addbf7;
    border: none !important; }
  .cp-styleBox .style-box-item-align:first-child {
    margin-left: 0px; }
  .cp-styleBox .style-box-item-align.left {
    background-image: url("../Images/icons/PID_ButtonLeft.gif");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-styleBox .style-box-item-align.center {
    background-image: url("../Images/icons/PID_ButtonCenter.gif");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-styleBox .style-box-item-align.right {
    background-image: url("../Images/icons/PID_ButtonRight.gif");
    background-repeat: no-repeat;
    background-position: center; }

/***/
/*Save Transaction*/
.cp-saveTransaction {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1; }
  .cp-saveTransaction .st-inner {
    position: relative;
    width: 450px;
    border: 1px solid #d7d7d7;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
    background-color: #F4F5F8;
    top: 45%;
    left: 45%;
    transform: translate(-50%, -50%);
    padding: 20px; }
  .cp-saveTransaction .title {
    color: #2E3849;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px; }
  .cp-saveTransaction .topContainer {
    display: flex; }
  .cp-saveTransaction .btnCont {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    box-sizing: border-box; }
  .cp-saveTransaction .transItemCont {
    margin-bottom: 5px;
    font-size: 13px;
    color: #2E3849;
    font-weight: bold;
    min-height: 32px; }
  .cp-saveTransaction .transItemInfo {
    display: flex;
    align-items: center; }
  .cp-saveTransaction .msgDescItem {
    color: #5A6881; }
  .cp-saveTransaction .itemStatus {
    margin-right: 10px;
    width: 30px; }

/***/
/*Save Step Transaction*/
.cp-saveStepTransaction {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1; }
  .cp-saveStepTransaction .st-inner {
    position: relative;
    width: 450px;
    border: 1px solid #d7d7d7;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
    background-color: #F4F5F8;
    top: 45%;
    left: 45%;
    transform: translate(-50%, -50%);
    padding: 20px; }
  .cp-saveStepTransaction .title {
    color: #2E3849;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px; }
  .cp-saveStepTransaction .topContainer {
    display: flex; }
  .cp-saveStepTransaction .btnCont {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    box-sizing: border-box; }
  .cp-saveStepTransaction .transItemCont {
    margin-bottom: 5px;
    font-size: 13px;
    color: #2E3849;
    font-weight: bold;
    min-height: 32px; }
  .cp-saveStepTransaction .transItemInfo {
    display: flex;
    align-items: center;
    justify-content: center; }
  .cp-saveStepTransaction .msgDescItem {
    text-align: center;
    color: #5A6881; }
  .cp-saveStepTransaction .itemStatus {
    margin-right: 10px;
    width: 28px; }
  .cp-saveStepTransaction .stepCountCont {
    color: #2E3849;
    border-bottom: 1px solid #d7d7d7;
    font-size: 16px;
    padding-bottom: 8px;
    margin-bottom: 5px;
    text-align: center;
    font-weight: bold; }
  .cp-saveStepTransaction .successCont {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #2E3849;
    font-weight: bold; }

/***/
/*Toolbar*/
.toolBarCont {
  box-sizing: border-box;
  height: 100%;
  background-color: #F4F5F8;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  border-right: 1px solid #d7d7d7;
  overflow: hidden;
  z-index: 1;
  flex-shrink: 0; }

.toolBarContFloat {
  position: absolute;
  left: 12px; }

.cp-toolbar {
  position: relative;
  height: 100%;
  overflow: hidden; }
  .cp-toolbar.cp-toolbarFloat {
    border: 1px solid #d7d7d7;
    box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
    background-color: #F4F5F8; }
    .cp-toolbar.cp-toolbarFloat .toolbarItem:last-child > .innerItem {
      border-bottom: none; }
  .cp-toolbar .inner {
    overflow: auto;
    width: calc(100% + 21px);
    height: 100%;
    overflow-x: hidden; }
  .cp-toolbar .toolbarItem {
    height: 60px;
    width: 75px;
    box-sizing: border-box;
    padding: 0px 10px;
    cursor: pointer; }
  .cp-toolbar .toolbarItem.itemActived {
    background-color: #d9dbdd; }
  .cp-toolbar .innerItem {
    border-bottom: 1px solid #d7d7d7;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; }
  .cp-toolbar .itemImage {
    font-size: 11px; }

.toolbarContentPopUp {
  z-index: 2;
  position: absolute;
  left: 75px;
  height: 100%; }
  .toolbarContentPopUp.toolbarContentPopUpFloat {
    left: 88px; }
  .toolbarContentPopUp .buttonContPopUp {
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #d7d7d7; }
  .toolbarContentPopUp .toolbarContent {
    height: 100%;
    background: #F4F5F8;
    border-left: 1px solid #d7d7d7;
    border-right: 1px solid #d7d7d7;
    box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
    width: 450px;
    display: flex;
    flex-direction: column; }
    .toolbarContentPopUp .toolbarContent.dataFieldContent {
      width: 450px; }
    .toolbarContentPopUp .toolbarContent.fieldFormulaContent {
      width: 850px; }
    .toolbarContentPopUp .toolbarContent.fieldCalcContent {
      width: 850px; }
    .toolbarContentPopUp .toolbarContent.layoutContent {
      width: 350px; }
    .toolbarContentPopUp .toolbarContent.sortingContent {
      width: 650px; }
  .toolbarContentPopUp .contentColumnarContainer {
    flex-grow: 1;
    overflow: auto;
    color: #2E3849;
    padding: 15px; }
    .toolbarContentPopUp .contentColumnarContainer .columnarTitle {
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 10px; }
    .toolbarContentPopUp .contentColumnarContainer .innerCont {
      background: #F4F5F8 !important; }
  .toolbarContentPopUp .innerContentContainer {
    padding: 15px; }
  .toolbarContentPopUp .bottomBordered {
    border-bottom: 1px solid #d7d7d7; }
  .toolbarContentPopUp .itemContentContainer {
    flex-grow: 1;
    overflow: auto;
    color: #2E3849; }
  .toolbarContentPopUp .dataTableHeading {
    display: flex;
    margin-bottom: 5px; }
    .toolbarContentPopUp .dataTableHeading .headingLabel {
      font-size: 14px;
      font-weight: bold; }
  .toolbarContentPopUp .headerContainer {
    flex-shrink: 0;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 12px;
    border-bottom: 1px solid #d7d7d7; }
    .toolbarContentPopUp .headerContainer .title {
      flex-grow: 1;
      font-weight: bold;
      font-size: 14px; }
    .toolbarContentPopUp .headerContainer .close {
      background-image: url("../Images/icons/icons_cross 12 px grey.png");
      background-repeat: no-repeat;
      background-position: center;
      width: 15px;
      height: 15px;
      cursor: pointer; }
  .toolbarContentPopUp .searchBoxCont {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 10px; }
  .toolbarContentPopUp .sideBySide {
    display: flex;
    height: 100%;
    flex-grow: 1;
    overflow: hidden; }
    .toolbarContentPopUp .sideBySide > .leftBar {
      flex-shrink: 0;
      width: 210px;
      height: 100%;
      overflow: auto; }
    .toolbarContentPopUp .sideBySide > .rightContent {
      flex-grow: 1;
      height: 100%;
      box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
      z-index: 1;
      overflow: auto;
      display: flex;
      flex-direction: column; }

.filterCriteriaContent, .filterAnalysisView {
  width: 850px !important; }
  .filterCriteriaContent.filterAnalysisView, .filterAnalysisView.filterAnalysisView {
    width: 100%; }
  .filterCriteriaContent .filterCriteriaContainer, .filterAnalysisView .filterCriteriaContainer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%; }
  .filterCriteriaContent .filterHeader, .filterAnalysisView .filterHeader {
    display: flex;
    padding: 20px;
    align-items: center;
    flex-shrink: 0; }
  .filterCriteriaContent .fieldName, .filterAnalysisView .fieldName {
    font-size: 13px;
    font-weight: bold;
    margin-right: 15px;
    min-width: 120px; }
  .filterCriteriaContent .filterGridSelection, .filterAnalysisView .filterGridSelection {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%; }
  .filterCriteriaContent .buttonSelectionCont, .filterAnalysisView .buttonSelectionCont {
    display: flex;
    align-items: center;
    padding: 0px 8px 8px 8px;
    flex-shrink: 0; }
    .filterCriteriaContent .buttonSelectionCont > .label, .filterAnalysisView .buttonSelectionCont > .label {
      flex-grow: 1;
      font-size: 13px; }
    .filterCriteriaContent .buttonSelectionCont > .btGrp, .filterAnalysisView .buttonSelectionCont > .btGrp {
      flex-shrink: 0; }
  .filterCriteriaContent .filterGridSelectionGridContainer, .filterAnalysisView .filterGridSelectionGridContainer {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; }
  .filterCriteriaContent .filterBoxContainer, .filterAnalysisView .filterBoxContainer {
    padding: 0px 8px;
    padding-left: 155px; }
  .filterCriteriaContent .filterBoxBetweenContainer, .filterAnalysisView .filterBoxBetweenContainer {
    display: flex; }
  .filterCriteriaContent .filterInfoAnd, .filterAnalysisView .filterInfoAnd {
    font-size: 13px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px; }
  .filterCriteriaContent .filterInfo, .filterAnalysisView .filterInfo {
    font-size: 13px;
    margin-top: 5px; }

/***/
/*Page Item Component*/
.cp-pageItemComponent.selected .contentCont {
  border: 1px solid #38A5E8; }

.cp-pageItemComponent .titleCont {
  display: flex;
  color: #2E3849;
  font-size: 12px;
  margin-bottom: 5px; }

.cp-pageItemComponent .title {
  margin-right: 5px; }

.cp-pageItemComponent .addTitle {
  font-weight: bold;
  flex-grow: 1; }

.cp-pageItemComponent .clear {
  color: #2C61D7;
  cursor: pointer; }

.cp-pageItemComponent .contentCont {
  background-color: #FFFFFF;
  border: 1px solid #d7d7d7;
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center; }

.cp-pageItemComponent .imageCont {
  max-width: 100%;
  padding: 3px;
  box-sizing: border-box; }

.cp-pageItemComponent .image {
  max-width: 100%; }

.cp-pageItemComponent .noData {
  width: 100%;
  color: #5A6881;
  text-align: center;
  font-size: 12px; }

.cp-pageItemComponent .itemDataCont {
  display: flex;
  padding: 10px 10px;
  box-sizing: border-box;
  width: 100%; }

.cp-pageItemComponent .leftContent {
  text-align: left; }

.cp-pageItemComponent .centerContent {
  text-align: center; }

.cp-pageItemComponent .rightContent {
  text-align: right; }

.cp-pageItemComponent .itemContent {
  width: 33.3%;
  flex-shrink: 0;
  word-wrap: break-word; }

.cp-pageItemComponent.clickable {
  color: #2E3849; }
  .cp-pageItemComponent.clickable .contentCont:hover {
    border: 1px solid #38A5E8;
    cursor: pointer; }

.cp-pageItemComponent.clickable:hover {
  text-decoration: none; }

.pageItemContainer {
  margin-bottom: 15px; }

/***/
/*Color Box*/
.cp-colorBox .dx-texteditor-input {
  min-height: 30px; }

.cp-colorBox .dx-colorbox-input-container {
  border: 1px solid #d7d7d7; }

.cp-colorBox.gridStyle {
  height: 30px !important; }
  .cp-colorBox.gridStyle .dx-colorbox-input {
    padding-left: 40px !important;
    padding-right: 34px !important; }

.cp-colorBox.focused .dx-colorbox-input-container {
  border: 1px solid #38A5E8; }

.cp-colorBox .dx-colorbox-color-result-preview {
  z-index: initial !important; }

/***/
/*Pager*/
.cp-pager {
  display: flex;
  justify-content: center;
  font-size: 13px;
  color: #2E3849;
  margin-top: 8px; }
  .cp-pager .navButton {
    cursor: pointer; }
  .cp-pager .navButton:hover {
    text-decoration: underline; }

/**/
/*PIDInfoBox*/
.cp-infoBox {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 15px 21px;
  color: #2E3849;
  font-size: 12px;
  border: 1px solid #d7d7d7; }
  .cp-infoBox.marginNormal {
    margin: 20px; }
  .cp-infoBox .inner {
    display: flex;
    align-items: center; }
  .cp-infoBox .icon {
    background-image: url("../Images/icons/icons_lightbulb green 32px.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    flex-shrink: 0; }
  .cp-infoBox .info {
    font-size: 12px;
    color: #2E3849;
    white-space: pre-line;
    line-height: 1.5; }

/**/
.cp-highlightedLabel {
  display: flex;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  width: 60px;
  font-weight: bold;
  font-size: 14px; }

.columnarGrid table {
  width: calc(100% - 1px);
  border-collapse: collapse; }
  .columnarGrid table td {
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    padding: 10px;
    box-sizing: border-box;
    font-size: 12px; }
  .columnarGrid table td:first-child {
    border-left: 1px solid #d7d7d7; }
  .columnarGrid table td:last-child {
    border-right: 1px solid #d7d7d7; }
  .columnarGrid table .caption {
    white-space: nowrap;
    color: #5A6881; }
  .columnarGrid table .separator {
    color: #5A6881;
    padding-left: 0px;
    padding-right: 0px; }
  .columnarGrid table .header {
    border: none;
    font-weight: bold; }
  .columnarGrid table .header:first-child {
    border: none; }
  .columnarGrid table .header:last-child {
    border: none; }

/*Timeline*/
.timelineContainer {
  box-sizing: border-box;
  padding-left: 30px;
  padding-right: 30px; }

.cp-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #2E3849; }
  .cp-timeline .diagram {
    display: flex;
    align-items: center;
    margin-bottom: 18px; }
  .cp-timeline .circle {
    width: 32px;
    height: 32px;
    border-radius: 32px;
    background-color: #d7d7d7;
    border: 3px solid #d7d7d7;
    box-sizing: border-box;
    flex-shrink: 0; }
  .cp-timeline .circleActive {
    background-color: #38a169; }
  .cp-timeline .line {
    height: 5px;
    border-bottom: 5px solid #d7d7d7;
    flex-grow: 1;
    margin-left: -1px;
    margin-right: -1px; }
  .cp-timeline .warnImg {
    width: 38px;
    margin-bottom: 5px; }
  .cp-timeline .warnLabel {
    font-size: 12px; }
  .cp-timeline .loadingContainer {
    height: 120px;
    display: flex;
    align-items: center; }
  .cp-timeline .boxContainer {
    display: flex;
    width: 100%;
    margin-left: -4px;
    margin-right: -4px; }
    .cp-timeline .boxContainer .box {
      flex-grow: 1;
      margin-left: 4px;
      margin-right: 4px;
      box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
      min-height: 107px;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 16px 12px 16px 12px;
      text-align: center;
      flex-basis: 0; }
      .cp-timeline .boxContainer .box .title {
        margin-bottom: 10px; }
      .cp-timeline .boxContainer .box .itemRow {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 8px; }
      .cp-timeline .boxContainer .box .value {
        font-size: 20px;
        font-weight: bold;
        margin-right: 6px;
        color: #2C61D7; }
      .cp-timeline .boxContainer .box .label {
        flex-grow: 0; }
  .cp-timeline.styleApproval .diagram {
    margin-bottom: 22px; }
  .cp-timeline.styleApproval .circle {
    background-color: #D7D8DA;
    border: 3px solid #D7D8DA; }
  .cp-timeline.styleApproval .circleActive {
    background-color: #696969;
    border: 3px solid #D7D8DA;
    background-image: url("../Images/icons/icons_16px_white_02_tick medium 16px.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .cp-timeline.styleApproval .line {
    background-color: #D7D8DA; }
  .cp-timeline.styleApproval .box {
    box-shadow: none;
    border: none;
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: initial; }
  .cp-timeline .infoCont {
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.87); }

/**/
.cp-ribbonPeriod {
  flex-grow: 1;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  position: relative; }
  .cp-ribbonPeriod .currDisplay {
    display: flex; }
  .cp-ribbonPeriod .ribbonOptionComponent {
    text-align: center; }
  .cp-ribbonPeriod .chgPeriodCont {
    display: flex;
    justify-content: center;
    margin-top: 10px; }
    .cp-ribbonPeriod .chgPeriodCont .cp-buttonCont:not(:last-child) {
      margin-right: 5px; }

.cp-ribbonPeriod.ribbonPrevNext {
  display: flex;
  justify-content: center;
  align-items: center; }
  .cp-ribbonPeriod.ribbonPrevNext .btPrev {
    padding-top: 10px;
    padding-bottom: 10px; }
  .cp-ribbonPeriod.ribbonPrevNext .btNext {
    padding-top: 10px;
    padding-bottom: 10px; }
  .cp-ribbonPeriod.ribbonPrevNext .currDate {
    flex-grow: 0;
    width: 200px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer; }

/*Chart*/
.svg-chart {
  width: 100%; }

/*PIDGaugeBarChart*/
.gaugeBarPad {
  padding-top: 40px;
  padding-bottom: 40px; }

.cp-barLineChart {
  overflow: auto; }
  .cp-barLineChart .legendContainer {
    display: flex;
    justify-content: center;
    padding-top: 15px; }
  .cp-barLineChart .legendItem {
    display: flex;
    align-items: center;
    margin-right: 16px; }
  .cp-barLineChart .legendColor {
    width: 10px;
    height: 10px;
    border-radius: 25px;
    margin-right: 5px; }

.cp-gaugeBarChart .svg-chart {
  width: 100%;
  border-radius: 5px; }

/**/
.errorCont {
  white-space: normal; }

.cp-boxLikeComponent.boxBorder, .cp-boxLikeComponent .boxBorder {
  border: 1px solid rgba(0, 0, 0, 0.12); }

.cp-boxLikeComponent:not(.cp-disabled) .boxBorder:hover {
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08); }

.cp-boxLikeComponent.boxBorder:not(.cp-disabled):hover {
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08); }

.cp-boxLikeComponent.cp-focused.boxBorder, .cp-boxLikeComponent.cp-focused .boxBorder {
  border: 1px solid #38A5E8;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
  z-index: 1; }

.cp-boxLikeComponent.cp-error.boxBorder, .cp-boxLikeComponent.cp-error .boxBorder {
  border: 1px solid #F04D5D; }

.cp-boxLikeComponent.cp-disabled:not(.disabledStyleStandard).boxBorder, .cp-boxLikeComponent.cp-disabled:not(.disabledStyleStandard) .boxBorder, .cp-boxLikeComponent.cp-disabled:not(.disabledStyleStandard) input, .cp-boxLikeComponent.cp-disabled:not(.disabledStyleStandard) .input {
  background-color: #F4F5F8; }

.cp-boxLikeComponent.cp-disabled.disabledStyleStandard.boxBorder, .cp-boxLikeComponent.cp-disabled.disabledStyleStandard .boxBorder, .cp-boxLikeComponent.cp-disabled.disabledStyleStandard input, .cp-boxLikeComponent.cp-disabled.disabledStyleStandard .input {
  background-color: #FFFFFF; }

/*#region Form Entry Wizard*/
.cp-formEntryWizard {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.48);
  display: flex;
  justify-content: center; }
  .cp-formEntryWizard > .outerContent {
    position: relative;
    flex-shrink: 0;
    background-color: #547CD6;
    width: 720px;
    height: 100%; }
    .cp-formEntryWizard > .outerContent > .content {
      position: relative;
      height: 100%;
      width: 100%;
      overflow: hidden; }
  .cp-formEntryWizard .sectionButtonCont {
    display: flex; }
  .cp-formEntryWizard .section {
    height: 100%;
    width: 100%;
    position: relative; }
    .cp-formEntryWizard .section .sectionButtonCont {
      position: absolute;
      bottom: 12px;
      right: 20px; }
    .cp-formEntryWizard .section .sectionContent {
      width: 100%;
      height: 100%;
      overflow: auto;
      box-sizing: border-box; }
      .cp-formEntryWizard .section .sectionContent .sectionInnerContent {
        padding-bottom: 85px; }
  .cp-formEntryWizard .entryTitle {
    font-size: 24px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    color: #FFFFFF;
    width: 100%;
    text-align: center;
    padding-top: 41px;
    padding-bottom: 25px; }
  .cp-formEntryWizard .entryTitle2 {
    font-size: 32px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding-top: 77px;
    padding-left: 114px;
    padding-right: 114px;
    padding-bottom: 24px; }
  .cp-formEntryWizard .entryTitle3 {
    font-size: 32px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding-top: 20px;
    padding-left: 114px;
    padding-right: 114px;
    padding-bottom: 18px; }
  .cp-formEntryWizard .entryTitle4 {
    font-size: 32px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding-top: 70px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px; }
  .cp-formEntryWizard .entryTitle5 {
    font-size: 32px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.87);
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding-top: 20px;
    padding-left: 114px;
    padding-right: 114px;
    padding-bottom: 18px; }
  .cp-formEntryWizard .entryTitle6 {
    font-size: 32px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.87);
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding-top: 20px;
    padding-left: 114px;
    padding-right: 114px;
    padding-bottom: 2px; }
  .cp-formEntryWizard .entryInfo {
    font-size: 20px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
    padding-left: 114px;
    padding-right: 114px;
    padding-bottom: 24px; }
  .cp-formEntryWizard .entryInfo2 {
    font-size: 20px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
    padding-left: 145px;
    padding-right: 145px;
    padding-bottom: 24px; }
  .cp-formEntryWizard .entryInfo3 {
    font-size: 20px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    padding-left: 114px;
    padding-right: 114px;
    padding-bottom: 24px; }
  .cp-formEntryWizard .entryCompCont {
    padding-left: 114px;
    padding-right: 114px; }
  .cp-formEntryWizard .entryCompCont2 {
    padding-left: 30px;
    padding-right: 30px; }
  .cp-formEntryWizard .entryCompCont3 {
    padding-left: 200px;
    padding-right: 200px; }
  .cp-formEntryWizard .progressBar {
    position: absolute;
    top: 0px;
    z-index: 1;
    width: 100%; }
    .cp-formEntryWizard .progressBar .progressBarItemCont {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      box-sizing: border-box;
      padding: 12px 21px 12px 9px; }
    .cp-formEntryWizard .progressBar .progressItem {
      border-radius: 2px;
      height: 2px;
      flex-grow: 1;
      margin-left: 3px;
      margin-right: 3px;
      opacity: 0.2;
      background-color: #FFFFFF; }
      .cp-formEntryWizard .progressBar .progressItem.active {
        opacity: 1; }
    .cp-formEntryWizard .progressBar .progressBarPreviewCont {
      display: none;
      width: 100%;
      background-color: #181818;
      flex-wrap: nowrap;
      position: absolute;
      top: 0; }
      .cp-formEntryWizard .progressBar .progressBarPreviewCont .progressPreview:first-child {
        margin-left: 4px; }
      .cp-formEntryWizard .progressBar .progressBarPreviewCont .progressPreview:last-child {
        margin-right: 8px; }
      .cp-formEntryWizard .progressBar .progressBarPreviewCont .progressPreview {
        display: none;
        cursor: pointer;
        border-radius: 6px;
        margin-top: 14px;
        margin-right: 2px;
        margin-bottom: 8px;
        background-color: rgba(255, 255, 255, 0.24);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 92px;
        padding: 10px;
        flex-grow: 1;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        font-size: 12px;
        font-family: Poppins, sans-serif;
        font-weight: 600;
        line-height: 1.4; }
        .cp-formEntryWizard .progressBar .progressBarPreviewCont .progressPreview .previewTitle {
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center; }
        .cp-formEntryWizard .progressBar .progressBarPreviewCont .progressPreview .previewIndex {
          position: absolute;
          height: 26px;
          width: 26px;
          top: -13px;
          background-color: #181818;
          color: white;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center; }
        .cp-formEntryWizard .progressBar .progressBarPreviewCont .progressPreview.current {
          cursor: default;
          background-color: #FFFFFF; }
          .cp-formEntryWizard .progressBar .progressBarPreviewCont .progressPreview.current .previewTitle {
            color: rgba(0, 0, 0, 0.87); }
          .cp-formEntryWizard .progressBar .progressBarPreviewCont .progressPreview.current .previewIndex {
            background-color: #38A169; }
        .cp-formEntryWizard .progressBar .progressBarPreviewCont .progressPreview.disabled {
          cursor: default;
          opacity: 0.4; }
  .cp-formEntryWizard .progressBarItemCont:hover .progressBarPreviewCont {
    display: flex; }
  .cp-formEntryWizard .progressBar:hover {
    background: red; }
    .cp-formEntryWizard .progressBar:hover .progressBarPreviewCont {
      display: flex; }
  .cp-formEntryWizard .progressBarPreviewCont:hover {
    display: flex; }
  .cp-formEntryWizard .progressPreview:hover:not(.current):not(.disabled) {
    background-color: rgba(255, 255, 255, 0.32); }
  .cp-formEntryWizard .otherSectionCont {
    position: relative; }
  .cp-formEntryWizard .selectOptionCont {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 145px; }
  .cp-formEntryWizard .closeBtn {
    border-radius: 50px;
    height: 35px;
    width: 35px;
    right: -40px;
    background-color: #222222;
    position: absolute; }

/*#endregion*/
/*#region Tree Explorer*/
.cp-treeExplorer .titleRow {
  display: flex;
  align-items: center; }

.cp-treeExplorer .pathDirectory {
  margin-bottom: 5px;
  flex-grow: 1;
  font-size: 16px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 5px; }

.cp-treeExplorer .nav {
  margin-left: 5px;
  margin-right: 5px; }

.cp-treeExplorer .navClickable {
  color: #2C61D7; }

.cp-treeExplorer .navClickable:hover {
  text-decoration: underline;
  cursor: pointer; }

.cp-treeExplorer .content {
  margin-left: -20px; }

.cp-treeExplorer .itemOuterCont {
  margin-left: 20px; }

.cp-treeExplorer .itemCont .expandCollapse {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_left 12px.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px;
  transform: rotate(180deg);
  margin-right: 8px; }

.cp-treeExplorer .itemCont.expanded .expandCollapse {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  transform: none; }

.cp-treeExplorer .itemCont {
  border: 1px solid rgba(0, 0, 0, 0.12);
  margin-bottom: 5px;
  padding: 10px;
  display: flex;
  align-items: center;
  position: relative; }
  .cp-treeExplorer .itemCont .explorable {
    cursor: pointer;
    color: #2C61D7; }
  .cp-treeExplorer .itemCont .explorable:hover {
    text-decoration: underline; }
  .cp-treeExplorer .itemCont.selected {
    border: 1px solid #38A5E8; }

.cp-treeExplorer .buttonCont {
  position: absolute;
  right: 0px;
  display: flex;
  align-items: center; }
  .cp-treeExplorer .buttonCont .innerButtonCont {
    display: flex;
    margin-right: 8px; }

/*#endregion*/
.sep-v {
  width: 20px;
  flex-shrink: 0; }

.cp-treeChart .labelAddRoot {
  padding: 8px;
  font-size: 14px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important; }

.cp-treeChart .chartContainer {
  overflow: auto;
  height: 100%;
  width: 100%; }

.cp-treeChart .noDataText {
  font-size: 14px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  width: 100%;
  text-align: center;
  padding-top: 12px; }

.cp-treeChart .node {
  /*use important to override inline style, which inline style is necessary for saveToPNG*/ }
  .cp-treeChart .node .rectBox {
    stroke: #d7d7d7; }
  .cp-treeChart .node.focused .rectBox {
    stroke: #547CD6 !important;
    stroke-width: 3 !important; }

.cp-treeChart .fullscreenBtnCont {
  position: absolute;
  display: flex;
  top: 5px;
  left: 5px; }

.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

/*Columnar*/
.detHeaderCont {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  padding-bottom: 22px; }
  .detHeaderCont .label {
    white-space: nowrap; }
  .detHeaderCont.noPadH {
    padding-left: 0px;
    padding-right: 0px; }
  .detHeaderCont.noPadV {
    padding-bottom: 0px; }

.detHeaderCont > .innerCont {
  background: #ffffff;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 20px 10px 20px;
  border: 1px solid #d7d7d7;
  display: flex;
  justify-content: space-between;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 3px 0;
  position: relative; }

.detHeaderCont.bgTransparent > .innerCont {
  background: transparent; }

.columnar-font, .statusStr, .detHeaderCont .label, .detHeaderCont .separator, .detHeaderCont .data, .detHeaderCont .statusStr, .detHeaderCont .collapsedCont .label, .displayColumnar .label, .displayColumnar .separator, .displayColumnar .data {
  font-size: 12px;
  color: #2E3849; }

.statusCont {
  display: flex;
  align-items: center; }
  .statusCont.statusContFull {
    width: 100%; }
  .statusCont .labelLeft {
    flex-grow: 1;
    padding-right: 8px;
    box-sizing: border-box; }

.statusLogo {
  width: 10px;
  height: 10px;
  border-radius: 25px;
  margin-right: 5px;
  flex-shrink: 0; }

.statusStr {
  font-weight: normal; }

.statusCont.statusGridColumn .statusStr {
  font-size: inherit;
  overflow: hidden;
  text-overflow: ellipsis; }

.clickable {
  color: #2C61D7; }

.clickable:hover {
  text-decoration: underline;
  cursor: pointer; }

.detHeaderCont .column {
  display: table; }

.detHeaderCont .row {
  display: table-row; }

.detHeaderCont .rowBold {
  font-weight: bold; }

.detHeaderCont .label {
  display: table-cell;
  color: #5A6881;
  padding: 5px 0 5px 0;
  padding-right: 10px; }

.detHeaderCont.nonBoxSingleRow .expandedCont .label {
  font-size: 14px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important; }

.detHeaderCont .innerContSingleRow .expandedCont .label {
  font-size: 13px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.detHeaderCont .clickable {
  color: #2C61D7; }

.detHeaderCont .clickable:hover {
  text-decoration: underline;
  cursor: pointer; }

.detHeaderCont .separator {
  display: table-cell;
  padding: 5px 0 5px 0;
  padding-right: 3px; }

.detHeaderCont .data {
  display: table-cell;
  padding: 5px 0 5px 0;
  vertical-align: top;
  word-wrap: break-word;
  white-space: pre-wrap; }

.detHeaderCont .dataBold {
  font-weight: bold; }

.detHeaderCont .dataNull {
  color: #5A6881 !important; }

.detHeaderCont .outerColumn {
  padding-right: 10px;
  box-sizing: border-box;
  flex-shrink: 1; }

.detHeaderCont .outerColumn:not(.first-col) {
  padding-left: 10px; }

.detHeaderCont .statusCont:not(.row) {
  display: flex;
  align-items: center; }

.detHeaderCont .row.statusCont {
  display: table-row;
  align-items: flex-start; }

.detHeaderCont .row.statusCont .data {
  display: flex;
  align-items: center; }

.detHeaderCont .statusLogo {
  width: 10px;
  height: 10px;
  border-radius: 25px;
  margin-right: 5px; }

.detHeaderCont .outerColumnHd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative; }

.detHeaderCont .columnHd > .transHd {
  display: flex; }

.detHeaderCont .outerColumnHd:not(.first-col) {
  padding-left: 10px; }

.detHeaderCont .outerColumn.last-col {
  padding-right: 0px; }

.detHeaderCont.borderSepRight .outerColumnBorder:not(.last-col), .detHeaderCont.borderSepRight .innerContSingleRow .outerColumnHd:not(.last-col), .detHeaderCont.borderSepRight .innerContSingleRow .outerColumn:not(.last-col) {
  border-right: 1px solid #d7d7d7; }

.detHeaderCont.borderSepLeft .outerColumnBorder:not(.first-col), .detHeaderCont.borderSepLeft .innerContSingleRow .outerColumnHd:not(.first-col), .detHeaderCont.borderSepLeft .innerContSingleRow .outerColumn:not(.first-col) {
  border-left: 1px solid #d7d7d7; }

.detHeaderCont .transHd {
  font-size: 16px;
  line-height: 1.5;
  font-weight: bold;
  color: #2E3849; }

.detHeaderCont .transHd .dataTransHd {
  font-size: 16px;
  line-height: 1.5;
  font-weight: bold;
  color: #2E3849;
  word-wrap: break-word; }

.detHeaderCont .transHd2 {
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: bold;
  flex-direction: row !important;
  color: #2E3849; }
  .detHeaderCont .transHd2 .labelTransHd2 {
    margin-right: 3px; }

.detHeaderCont.noExpandCollapse .expandedCont {
  width: 100% !important; }

.detHeaderCont .transHd3 {
  flex-direction: row !important;
  align-items: center; }

.detHeaderCont .lbhd3 {
  font-size: 14px;
  line-height: 1.5; }

.detHeaderCont .collExpandContainer {
  position: absolute;
  right: 10px;
  top: 10px;
  height: 20px;
  width: 20px;
  box-sizing: border-box;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center; }

.detHeaderCont .collExpandContainer.expanded {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.detHeaderCont .collExpandContainer.collapsed {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_left 12px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.detHeaderCont .expandedCont {
  display: flex;
  width: calc(100% - 20px); }

.detHeaderCont .collapsedCont {
  display: flex;
  width: calc(100% - 20px); }

.detHeaderCont .collapsedCont .item {
  display: flex;
  padding-right: 30px;
  align-items: center; }

.detHeaderCont .collapsedCont .itemHd {
  padding-right: 40px; }

.detHeaderCont .collapsedCont .transHdCollapsed {
  padding-bottom: 0px;
  white-space: nowrap; }

.detHeaderCont .collapsedCont .labelCollapsed {
  white-space: nowrap; }

.detHeaderCont .collapsedCont .data {
  min-width: 100px; }

.detHeaderCont .columnarLabel {
  font-size: 14px;
  color: #2E3849;
  font-weight: bold;
  margin-bottom: 5px; }

.detHeaderCont .columnarValue {
  font-size: 13px;
  color: #2E3849;
  margin-top: 4px; }

.detHeaderCont .label.hasOpt {
  display: flex;
  align-items: center; }

.detHeaderCont .label .innerLabel {
  flex-grow: 1; }

.detHeaderCont .row.usePrevNext {
  position: relative; }

.detHeaderCont .row.usePrevNext {
  /*
        .dataTransHd {
            width: calc(100% - 70px);
        }
            */ }
  .detHeaderCont .row.usePrevNext .label {
    width: calc(100% - 70px); }
  .detHeaderCont .row.usePrevNext .data {
    width: calc(100% - 70px); }

.detHeaderCont .prevNextCont {
  position: absolute;
  top: 0px;
  right: 4px; }

.detHeaderCont .prevNextContCollapsed {
  position: relative;
  margin-left: 8px; }

.detHeaderCont .outerColumn {
  position: relative; }
  .detHeaderCont .outerColumn.hasPrevNext .column {
    max-width: calc(100% - 70px); }

.detHeaderTs {
  margin-top: 10px; }

.detHeaderCont .innerContSingleRow {
  padding-top: 20px;
  padding-bottom: 20px; }

.detHeaderCont .innerContSingleRow .column {
  display: block; }

.detHeaderCont .innerContSingleRow .row {
  display: flex;
  flex-direction: column; }

.detHeaderCont .innerContSingleRow .separator {
  display: none; }

.detHeaderCont .innerContSingleRow .label {
  font-weight: bold;
  color: #2E3849;
  padding-bottom: 5px; }

.detHeaderCont.borderSepLeft .innerContSingleRow .outerColumnHd.nonBorder {
  border-left: none; }

.detHeaderCont.borderSepLeft .innerContSingleRow .outerColumn.nonBorder {
  border-left: none; }

.detHeaderCont.borderSepRight .innerContSingleRow .outerColumnHd.nonBorder {
  border-right: none; }

.detHeaderCont.borderSepRight .innerContSingleRow .outerColumn.nonBorder {
  border-right: none; }

.detHeaderCont .collapsedCont .separator {
  display: block; }

.detHeaderCont .collapsedCont .label {
  font-weight: normal;
  display: table-cell;
  padding-right: 15px;
  color: #5A6881; }

.detHeaderCont.columnar-collapsed .innerContSingleRow {
  padding-top: 10px;
  padding-bottom: 10px; }

.valueHeight1 {
  padding-top: 0px !important;
  line-height: 2; }

.detHeaderCont.nonBox {
  padding: 0; }

.detHeaderCont.nonBox > .innerCont {
  box-shadow: none; }

.detHeaderCont.nonBox .collExpandContainer {
  right: 0px;
  top: 0px; }

.detHeaderCont.nonBox .innerCont {
  padding: 0;
  border: none; }

.detHeaderCont.nonBoxSingleRow {
  padding: 0; }

.detHeaderCont.nonBoxSingleRow .innerCont {
  padding: 0;
  border: none; }

.detHeaderCont.nonBoxSingleRow > .innerCont {
  box-shadow: none; }

.detHeaderCont.nonBoxSingleRow:not(.nonBoxSingleRowBordered) .innerContSingleRow .outerColumn {
  border: none; }

.detHeaderCont .imgCont {
  width: 100px;
  height: 100px;
  border-radius: 144px;
  overflow: hidden;
  background: white; }

.detHeaderCont .imgColumnar {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.detHeaderCont .imgAltColumnar {
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  height: 100%;
  width: 100%;
  font-size: 32px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.87); }

.detHeaderCont .isCollapsedGrow {
  flex-grow: 1; }

.detHeaderCont.blueFullWidth {
  padding: 0px; }
  .detHeaderCont.blueFullWidth .innerCont {
    background: #1C61A7;
    color: white;
    border: none; }
    .detHeaderCont.blueFullWidth .innerCont .label {
      color: white; }
    .detHeaderCont.blueFullWidth .innerCont .separator {
      color: white; }
    .detHeaderCont.blueFullWidth .innerCont .data {
      color: white; }
    .detHeaderCont.blueFullWidth .innerCont .dataNull {
      color: white !important; }
    .detHeaderCont.blueFullWidth .innerCont .dataTransHd {
      color: white; }
    .detHeaderCont.blueFullWidth .innerCont .statusStr {
      color: white; }
  .detHeaderCont.blueFullWidth .transHd {
    color: white; }
  .detHeaderCont.blueFullWidth .collExpandContainer.expanded {
    background-image: url("../Images/icons/icons_12px_white_02_arrow_down 12 px.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .detHeaderCont.blueFullWidth .collExpandContainer.collapsed {
    background-image: url("../Images/icons/icons_12px_white_02_arrow_left 12px.svg");
    background-repeat: no-repeat;
    background-position: center; }
  .detHeaderCont.blueFullWidth .cp-previewImage.previewPopUp {
    height: 100%;
    width: 100%; }
    .detHeaderCont.blueFullWidth .cp-previewImage.previewPopUp .currImgCont {
      height: 100%;
      width: 100%; }
      .detHeaderCont.blueFullWidth .cp-previewImage.previewPopUp .currImgCont .currImg {
        object-fit: cover; }

.detHeaderCont.columnVMiddle .expandedCont {
  align-items: center; }

.detHeaderCont.columnarVertical {
  padding: 28px;
  padding-bottom: 0px; }
  .detHeaderCont.columnarVertical > .innerCont {
    background: transparent; }
  .detHeaderCont.columnarVertical .row.transHd {
    margin-bottom: 8px; }
  .detHeaderCont.columnarVertical .dataTransHd {
    font-weight: bold;
    font-size: 18px; }
  .detHeaderCont.columnarVertical .outerColumnHd {
    padding: 0px; }
  .detHeaderCont.columnarVertical .row {
    display: block;
    margin-bottom: 18px; }
  .detHeaderCont.columnarVertical .separator {
    display: none; }
  .detHeaderCont.columnarVertical .label {
    display: block;
    padding: 0px;
    margin-bottom: 5px;
    color: rgba(0, 0, 0, 0.87);
    line-height: 1.4;
    font-size: 12px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.4 !important; }
  .detHeaderCont.columnarVertical .data {
    display: block;
    line-height: 1.4;
    padding: 0px; }

.detHeaderCont.isWrap .innerCont .expandedCont {
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -10px; }
  .detHeaderCont.isWrap .innerCont .expandedCont .outerColumn {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px; }

/*End Columnar*/
* {
  padding: 0px;
  margin: 0px; }

.colorblack, .f1, .fb1, .fb1blue, .fb1gray, .fb1green, .fb1white, .fb1red, .f1blue, .f1gray, .f1green, .f1white, .f1red, .f2, .fb2, .fb2blue, .fb2gray, .fb2green, .fb2white, .fb2red, .f2blue, .f2gray, .f2green, .f2white, .f2red, .dx-texteditor-input, .dx-item .dx-list-item, .dx-list-item-content, .dx-item .dx-list-item .dx-list-item-selected, .radiobuttonstyle, .custom-combobox, .custom-combobox-toggle, .custom-combobox-input, .ui-selecbox-pid, .ui-selecbox-pid li.ui-menu-item, .ui-selecbox-pid li:hover, .ui-selecbox-pid li:focus, .ui-selecbox-pid li.ui-menu-item:hover, .ui-selecbox-pid li.ui-menu-item:focus, .ui-selecbox-pid li a.ui-corner-all, .ui-selecbox-pid li a.ui-corner-all:hover, .ui-selecbox-pid li a.ui-corner-all:focus, .PIDProgress-title, .f3, .fb3, .fb3blue, .fb3gray, .fb3green, .fb3white, .fb3red, .f3blue, .f3gray, .f3green, .f3white, .f3red, .dx-selectbox, .dx-scrollview-content, .ulRibbonComboBox, .f4, .fb4, .fb4blue, .fb4gray, .fb4green, .fb4white, .fb4red, .f4blue, .f4gray, .f4green, .f4white, .f4red, .f5, .fb5, .fb5blue, .fb5gray, .fb5green, .fb5white, .fb5red, .f5blue, .f5gray, .f5green, .f5white, .f5red, .f6, .fb6, .fb6blue, .fb6gray, .fb6green, .fb6white, .fb6red, .f6blue, .f6gray, .f6green, .f6white, .f6red, .f7, .fb7, .fb7blue, .fb7gray, .fb7green, .fb7white, .fb7red, .f7blue, .f7gray, .f7green, .f7white, .f7red {
  fill: #353535 !important;
  color: #353535 !important; }

.colorblue, .f1blue, .f2blue, .f3blue, .f4blue, .f5blue, .f6blue, .f7blue, .fb1blue, .fb2blue, .fb3blue, .fb4blue, .fb5blue, .fb6blue, .fb7blue {
  fill: #156EB7;
  color: #156EB7; }

.colorgray, .f1gray, .f2gray, .f3gray, .f4gray, .f5gray, .f6gray, .f7gray, .fb1gray, .fb2gray, .fb3gray, .fb4gray, .fb5gray, .fb6gray, .fb7gray {
  fill: #767676;
  color: #767676; }

.colorgreen, .f1green, .f2green, .f3green, .f4green, .f5green, .f6green, .f7green, .fb1green, .fb2green, .fb3green, .fb4green, .fb5green, .fb6green, .fb7green {
  fill: #3C9602;
  color: #3C9602; }

.colorwhite, .f1white, .f2white, .f3white, .f4white, .f5white, .f6white, .f7white, .fb1white, .fb2white, .fb3white, .fb4white, .fb5white, .fb6white, .fb7white {
  fill: #ffffff !important;
  color: #ffffff !important; }

.colorred, .f1red, .f2red, .f3red, .f4red, .f5red, .f6red, .f7red, .fb1red, .fb2red, .fb3red, .fb4red, .fb5red, .fb6red, .fb7red {
  fill: #ff0000;
  color: #ff0000; }

.textBold, .fb1, .fb1blue, .fb1gray, .fb1green, .fb1white, .fb1red, .fb2, .fb2blue, .fb2gray, .fb2green, .fb2white, .fb2red, .fb3, .fb3blue, .fb3gray, .fb3green, .fb3white, .fb3red, .fb4, .fb4blue, .fb4gray, .fb4green, .fb4white, .fb4red, .fb5, .fb5blue, .fb5gray, .fb5green, .fb5white, .fb5red, .fb6, .fb6blue, .fb6gray, .fb6green, .fb6white, .fb6red, .fb7, .fb7blue, .fb7gray, .fb7green, .fb7white, .fb7red {
  font-weight: bold; }

.textHTMLPre {
  white-space: pre-line; }

.textAlignCenter {
  text-align: center; }

.textAlignRight {
  text-align: right; }

.f1, .fb1, .fb1blue, .fb1gray, .fb1green, .fb1white, .fb1red, .f1blue, .f1gray, .f1green, .f1white, .f1red {
  font-size: 7pt;
  font-family: -apple-system, Helvetica Neue, Roboto, Arial, sans-serif; }

.f2, .fb2, .fb2blue, .fb2gray, .fb2green, .fb2white, .fb2red, .f2blue, .f2gray, .f2green, .f2white, .f2red, .dx-texteditor-input, .dx-item .dx-list-item, .dx-list-item-content, .dx-item .dx-list-item .dx-list-item-selected, .radiobuttonstyle, .custom-combobox, .custom-combobox-toggle, .custom-combobox-input, .ui-selecbox-pid, .ui-selecbox-pid li.ui-menu-item, .ui-selecbox-pid li:hover, .ui-selecbox-pid li:focus, .ui-selecbox-pid li.ui-menu-item:hover, .ui-selecbox-pid li.ui-menu-item:focus, .ui-selecbox-pid li a.ui-corner-all, .ui-selecbox-pid li a.ui-corner-all:hover, .ui-selecbox-pid li a.ui-corner-all:focus, .PIDProgress-title {
  font-size: 8pt;
  font-family: -apple-system, Helvetica Neue, Roboto, Arial, sans-serif; }

.f3, .fb3, .fb3blue, .fb3gray, .fb3green, .fb3white, .fb3red, .f3blue, .f3gray, .f3green, .f3white, .f3red, .dx-selectbox, .dx-scrollview-content, .ulRibbonComboBox {
  font-size: 9pt !important;
  font-family: -apple-system, Helvetica Neue, Roboto, Arial, sans-serif !important; }

.f4, .fb4, .fb4blue, .fb4gray, .fb4green, .fb4white, .fb4red, .f4blue, .f4gray, .f4green, .f4white, .f4red {
  font-size: 10pt;
  font-family: -apple-system, Helvetica Neue, Roboto, Arial, sans-serif; }

.f5, .fb5, .fb5blue, .fb5gray, .fb5green, .fb5white, .fb5red, .f5blue, .f5gray, .f5green, .f5white, .f5red {
  font-size: 11pt;
  font-family: -apple-system, Helvetica Neue, Roboto, Arial, sans-serif; }

.f6, .fb6, .fb6blue, .fb6gray, .fb6green, .fb6white, .fb6red, .f6blue, .f6gray, .f6green, .f6white, .f6red {
  font-size: 12pt;
  font-family: -apple-system, Helvetica Neue, Roboto, Arial, sans-serif; }

.f7, .fb7, .fb7blue, .fb7gray, .fb7green, .fb7white, .fb7red, .f7blue, .f7gray, .f7green, .f7white, .f7red {
  font-size: 13pt;
  font-family: -apple-system, Helvetica Neue, Roboto, Arial, sans-serif; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite; }

.loaderSmall {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 11px;
  height: 11px;
  animation: spin 2s linear infinite; }

.loadingScreenWindow {
  box-shadow: 0 1px 5px #51565b;
  position: absolute;
  padding: 5px;
  background: #ffffff; }

.divContentLineBlock {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap; }

/*Show Loading*/
.ui-widget-overlay.ui-front {
  z-index: 5; }

.loadingScreenWindow {
  z-index: 5; }

/*End Show Loading*/
.loading-popup-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99; }

.loadingScreen {
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50px, -50px);
  background: white;
  border: 1px solid #d7d7d7;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25);
  font-family: -apple-system, Helvetica Neue, Arial, sans-serif;
  font-size: 12px;
  box-sizing: border-box;
  padding: 10px; }

.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

.dx-datagrid {
  line-height: inherit;
  z-index: 0; }

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
  vertical-align: middle; }

.dx-datagrid-headers {
  background-color: #F4F5F8;
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 600;
  line-height: 1.4;
  border-left: 1px solid #D7D7D7;
  border-right: 1px solid #D7D7D7;
  border-bottom: 1px none #D7D7D7; }

.dx-widget {
  color: rgba(0, 0, 0, 0.87);
  font-weight: normal;
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  line-height: 1.35715; }

.dx-scrollable-wrapper {
  border-left: 1px solid #D7D7D7;
  border-right: 1px solid #D7D7D7; }

.dx-datagrid-rowsview .dx-row {
  border-top: 1px none #D7D7D7;
  border-bottom: 1px solid #D7D7D7;
  height: 32px;
  line-height: 20px; }

.dx-header-row {
  height: 32px;
  line-height: 20px; }

.dx-header-row td {
  background-color: #F4F5F8; }

.dx-datagrid .dx-datagrid-content-fixed .dx-datagrid-table .dx-header-row td.dx-col-fixed {
  background-color: #F4F5F8; }

.dx-header-row .labelRed {
  color: #2E3849 !important; }

.dx-datagrid-group-panel {
  font-size: 13px;
  -ms-touch-action: pinch-zoom;
  touch-action: pinch-zoom; }

.dx-datagrid .dx-row-alt.dx-row:not(.dx-row-removed) {
  border-top: 1px none #D7D7D7;
  border-bottom: 1px solid #D7D7D7; }

.dx-datagrid-header-panel {
  border: 1px solid #ddd !important; }

.dx-datagrid-rowsview .dx-selection.dx-row > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
  background-color: rgba(56, 165, 232, 0.16);
  border-bottom: 1px solid #38A5E8 !important;
  border-top: 1px solid #38A5E8 !important;
  color: #333;
  box-sizing: border-box; }

.dx-datagrid-rowsview .dx-row.dx-edit-row > td {
  border-bottom: 1px solid #ddd; }

.dx-edit-row {
  background-color: white !important; }

.dx-editor-cell .dx-highlight-outline {
  border: 1px solid #7A7A7A; }

.dx-selectbox {
  text-align: left;
  border-radius: 0px; }

.dx-scrollview-content {
  text-align: left;
  border-radius: 0px; }

.dx-command-select {
  width: 30px !important;
  min-width: 30px !important; }

.dx-datagrid .dx-row > td {
  padding: 5px; }

.dx-datagrid-rowsview .dx-texteditor-input {
  padding: 0 5px;
  min-height: 21px; }

.divEnableWrap > .dx-datagrid-text-content {
  white-space: normal !important; }

.dx-editor-cell .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
  font-size: 8pt; }

.dx-datagrid-rowsview .dx-texteditor-input {
  min-height: 20px; }

.dx-highlight-outline {
  padding: 5px; }

.dx-datagrid-checkbox-size .dx-checkbox-icon {
  height: 14px;
  width: 14px; }

/*dx-datagrid Footer*/
.dx-datagrid-group-footer, .dx-datagrid-total-footer {
  border: 1px solid #D7D7D7; }

.dx-datagrid-total-footer > .dx-datagrid-content {
  padding-top: 1px;
  padding-bottom: 1px; }

.dx-datagrid-total-footer > .dx-datagrid-content td {
  padding: 0px 1px 0px 1px;
  line-height: 23px; }

.dx-row.dx-column-lines.dx-datagrid-group-footer td {
  /*padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 1px;*/
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 0px;
  padding-right: 1px; }

.dx-datagrid-group-footer .dx-datagrid-summary-item {
  color: rgba(51, 51, 51, 0.9);
  border: 1px solid #D7D7D7;
  padding: 5px 5px 5px 5px;
  height: 23px; }

.dx-datagrid-total-footer .dx-datagrid-summary-item {
  color: rgba(51, 51, 51, 0.9);
  border: 1px solid #D7D7D7;
  padding: 0px 5px 0px 5px;
  height: 23px; }

.dx-datagrid-total-footer {
  text-align: left; }

.dx-row.dx-datagrid-group-footer > td {
  border-top: 1px solid #c7c7c7;
  border-left-width: 0;
  border-right-width: 0;
  background-color: #E1E1E1; }

/**/
/*Scrollbar*/
.gbGridView .dx-scrollbar-horizontal, .gbGridView .dx-scrollbar-horizontal .dx-scrollable-scroll {
  height: 15px !important; }

/*.gbGridView .dx-scrollbar-vertical, .gbGridView .dx-scrollbar-vertical .dx-scrollable-scroll {
    width: 15px !important;
}*/
/**/
.tableRibbbonComboBox {
  padding-right: 5px;
  padding-top: 5px;
  height: 18px;
  line-height: 18px;
  vertical-align: middle; }

.ulRibbonComboBox {
  margin: 0;
  text-align: left;
  text-decoration: none;
  vertical-align: middle;
  padding: 0px;
  height: 24px;
  line-height: 24px;
  padding-top: 2px;
  padding-right: 5px; }

.ulRibbonComboBox li {
  display: inline-block;
  list-style: none outside none;
  text-align: left;
  text-decoration: none;
  vertical-align: middle;
  height: 26px;
  line-height: 26px; }

.ulRibbonComboBox li span {
  display: inline-block;
  list-style: none outside none;
  text-align: left;
  text-decoration: none;
  vertical-align: middle;
  padding-right: 5px;
  height: 26px;
  line-height: 22px; }

/*texteditor*/
.dx-texteditor.dx-state-focused,
.dx-texteditor.dx-state-active {
  border-color: #ddd;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

/*.dx-texteditor.dx-invalid.dx-rtl .dx-texteditor-input {
padding: 5px 5px 5px;
padding-left: 34px;
}

.dx-texteditor.dx-show-clear-button:not(.dx-texteditor-empty).dx-invalid.dx-rtl .dx-texteditor-input {
    padding: 5px 5px 5px;
    padding-left: 68px;
}

.dx-rtl .dx-show-clear-button .dx-texteditor-input,
.dx-rtl.dx-show-clear-button .dx-texteditor-input {
    padding: 5px 5px 5px;
    padding-left: 34px;
}*/
.dx-texteditor {
  background: #fff;
  border: 0px none #ddd !important;
  border-radius: 0px; }

.dx-texteditor-input {
  margin: 0;
  padding: 5px 2px 5px;
  background: #fff;
  color: #000000; }

.dx-item .dx-list-item {
  margin: 0;
  padding: 5px 2px 5px;
  background: #fff;
  color: #333;
  height: 22px;
  line-height: 22px;
  border-bottom: 1px solid #ddd !important; }

.dx-list-item-content {
  margin: 0;
  padding: 5px 2px 5px;
  background: #fff;
  color: #333;
  height: 22px;
  line-height: 22px;
  border-bottom: 1px solid #ddd !important; }

.dx-item .dx-list-item .dx-list-item-selected {
  margin: 0;
  padding: 5px 2px 5px;
  background: #fff;
  color: #333;
  border-bottom: 1px solid #ddd !important; }

/*.dx-invalid.dx-dropdowneditor-button-visible.dx-rtl .dx-texteditor-input {
    padding: 5px 5px 5px;
    padding-left: 60px;
}*/
/*texteditor*/
/*Check Box*/
.dx-switch.dx-state-readonly .dx-switch-container {
  border-color: #ddd;
  background-color: #fff; }

.dx-switch.dx-state-active .dx-switch-handle:before {
  background-color: #204d73; }

.dx-switch.dx-state-active .dx-switch-container {
  border-color: #ddd;
  background-color: rgba(96, 96, 96, 0.2); }

.dx-switch.dx-state-hover .dx-switch-handle:before {
  background-color: #337ab7; }

.dx-switch.dx-state-hover .dx-switch-container {
  background-color: transparent;
  border-color: #ddd; }

.dx-switch.dx-state-focused {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.dx-switch.dx-state-focused .dx-switch-container {
  border-color: #ddd; }

.dx-switch.dx-state-focused .dx-switch-handle:before {
  background-color: #337ab7; }

.dx-switch.dx-state-focused.dx-state-active .dx-switch-handle:before {
  background-color: #204d73; }

.dx-switch-handle:before {
  background-color: #f82021; }

.dx-switch-on-value .dx-switch-handle:before {
  background-color: #54b027; }

.checkboxstyle {
  cursor: pointer !important;
  display: inline-block;
  line-height: 24px !important;
  min-height: 24px;
  overflow: hidden;
  vertical-align: middle; }

.checkboxstyle:focus {
  outline: 0 !important; }

.checkboxstyle img {
  line-height: 19px;
  vertical-align: middle;
  margin: 1px 5px 1px 1px; }

.checkboxstyle img:focus {
  outline: 1px solid #ddd !important; }

.checkboxstyle span {
  line-height: 19px;
  vertical-align: middle; }

/*switch*/
/*grid*/
.dx-toolbar .dx-toolbar-items-container {
  height: 25px;
  overflow: visible; }

/*grid*/
/*#region radio button */
.radiobuttonstyle {
  display: inline-block;
  width: 100%; }

.pid_checkboxstyle {
  cursor: pointer !important;
  display: inline-block;
  line-height: 20px !important;
  min-height: 19px;
  overflow: hidden;
  position: relative;
  vertical-align: middle; }

.pid_checkboxstyle:focus {
  outline: 0 !important; }

.pid_checkboxstyle img {
  line-height: 20px;
  vertical-align: middle;
  margin: 1px 5px 1px 1px; }

.pid_checkboxstyle img:focus {
  outline: 1px solid #ddd !important; }

.pid_checkboxstyle span {
  line-height: 20px;
  vertical-align: middle; }

.pid_checkboxdisabledstyle {
  cursor: default !important;
  min-height: 21px;
  line-height: 20px;
  vertical-align: middle; }

.pid_checkboxdisabledstyle img {
  width: 14px;
  height: 14px;
  line-height: 20px;
  vertical-align: middle;
  padding-right: 5px; }

.pid_checkboxdisabledstyle span {
  line-height: 20px;
  vertical-align: middle; }

/*#endregion */
/*#region ComboBox */
.custom-combobox {
  position: relative;
  display: inline-block;
  height: 21px; }

.custom-combobox-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-left: -1px;
  padding: 0; }

.custom-combobox-input {
  text-shadow: none;
  outline: none;
  margin: 0;
  padding: 3px 0px;
  padding-left: 5px; }

.custom-combobox-input:disabled {
  background-color: #efefef; }

.ui-selecbox-pid {
  background: #ffffff;
  text-shadow: none;
  text-align: left;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  overflow-y: auto;
  max-height: 150px;
  z-index: 10; }

.ui-selecbox-pid li.ui-menu-item {
  background: #ffffff;
  text-shadow: none;
  text-align: left;
  border: none !important; }

.ui-selecbox-pid li:hover {
  background: #ddd !important;
  text-shadow: none;
  text-align: left;
  border: none !important; }

.ui-selecbox-pid li:focus {
  background: #ddd !important;
  text-shadow: none;
  text-align: left;
  border: none !important; }

.ui-selecbox-pid li.ui-menu-item:hover {
  background: #ddd !important;
  text-shadow: none;
  text-align: left;
  border: none !important; }

.ui-selecbox-pid li.ui-menu-item:focus {
  background: #ddd !important;
  text-shadow: none;
  text-align: left;
  border: none !important; }

.ui-selecbox-pid li a.ui-corner-all {
  background: #ffffff !important;
  text-shadow: none;
  text-align: left;
  border: none !important;
  min-height: 15px; }

.ui-selecbox-pid li a.ui-corner-all:hover {
  background: #ddd !important;
  text-shadow: none;
  text-align: left;
  border: none !important; }

.ui-selecbox-pid li a.ui-corner-all:focus {
  background: #ddd !important;
  text-shadow: none;
  text-align: left;
  border: none !important; }

.custom-selecbox-a {
  background: #ffffff !important; }

.custom-selecbox-a:hover {
  background: #ddd !important;
  outline: none; }

.custom-selecbox-a:visited {
  background: #ddd !important;
  outline: none; }

.custom-selecbox-a:active {
  background: #ddd !important;
  outline: none; }

.a-disable-sb {
  pointer-events: none;
  background: #ebebe4 !important; }

/*#endregion */
.dx-numberbox div input {
  text-align: right !important; }

.dx-cell-modified div {
  overflow: hidden;
  text-overflow: ellipsis; }

.dx-state-disabled, .dx-state-disabled div, .dx-state-disabled div input {
  background-color: #E7E7E7 !important; }

.PIDProgress {
  height: 15px;
  overflow: hidden;
  background-color: #eaeaea;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }

.PIDProgress.gradient .PIDProgress-bar {
  height: 100%;
  background-size: 100% 20px;
  background-color: #5ab3d9;
  background-image: -moz-linear-gradient(left, #69d6ce 0%, #54a6dd 100%);
  background-image: -webkit-linear-gradient(left, #69d6ce 0%, #54a6dd 100%);
  background-image: -o-linear-gradient(left, #69d6ce 0%, #54a6dd 100%);
  background-image: -ms-linear-gradient(left, #69d6ce 0%, #54a6dd 100%);
  background-image: linear-gradient(to left, #69d6ce 0%, #54a6dd 100%); }

.ui-datepicker-calendar th:first-child, .ui-datepicker-calendar td:first-child {
  padding-left: 25px; }

.ui-datepicker-calendar th:last-child, .ui-datepicker-calendar td:last-child {
  padding-right: 25px; }

.custom-combobox-toggle {
  background-color: transparent !important; }

.custom-combobox input, .custom-combobox a {
  background-color: transparent !important; }

.dx-treelist-headers {
  background-color: #F4F5F8;
  color: #3A3A3A;
  border-left: 1px solid #D7D7D7;
  border-right: 1px solid #D7D7D7;
  border-bottom: 1px none #D7D7D7;
  font-weight: bold; }

.dx-treelist-rowsview .dx-selection.dx-row > td, .dx-treelist-rowsview .dx-selection.dx-row:hover > td {
  background-color: rgba(56, 165, 232, 0.16);
  border-bottom: 1px solid #38A5E8 !important;
  border-top: 1px solid #38A5E8 !important;
  color: #333;
  box-sizing: border-box; }

.dx-treelist-container {
  z-index: 0; }

.dx-treelist-headers .dx-treelist-table .dx-row > td {
  vertical-align: middle; }

.dx-treelist .dx-row > td {
  padding: 5px; }

.dx-treelist-icon-container {
  height: 15px; }

.dx-group-cell {
  color: rgba(0, 0, 0, 0.7); }

.dx-pid-cell-disabled {
  line-height: 30px !important;
  height: 30px;
  padding: 0px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #F4F5F8; }

.dx-focusable:not(.hasFixed) .dx-row.dx-data-row:hover td {
  border-top: 1px solid #38A5E8 !important;
  border-bottom: 1px solid #38A5E8 !important; }

.dx-focusable .dx-row.dx-data-row:hover td {
  cursor: pointer; }

.pid-buttongrid-cont {
  text-align: center !important; }

.pid-buttongrid {
  width: 16px;
  height: 16px;
  background-image: url("../Images/icons/icons_show details 16 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block; }

.pid-removeitem {
  width: 16px;
  height: 16px;
  background-image: url("../Images/icons/icons 12px color_dump 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block; }

.dx-editor-cell {
  overflow: visible !important;
  cursor: default !important; }

.dx-datagrid-focus-overlay {
  border: none; }

.dx-datagrid-headers {
  border-top: 1px solid #D7D7D7; }

.dx-datagrid-header-panel {
  border-bottom: none !important; }

.dx-treelist-headers {
  border-top: 1px solid #D7D7D7; }

.dxCellWrapped {
  white-space: initial; }

.dxCellPreLine {
  white-space: pre-line !important; }

.dx-data-row > td {
  line-height: 20px; }

.dx-datagrid-group-footer .dx-datagrid-summary-item {
  height: 29px !important; }

.dx-selection > td {
  background-color: rgba(56, 165, 232, 0.16) !important;
  border-top: 1px solid black !important;
  z-index: 1; }

.dx-datagrid .dx-row-alt > td, .dx-datagrid .dx-row-alt > tr > td {
  border-top: initial;
  border-bottom: initial; }

.dx-colorbox-overlay .dx-colorview-button-cell {
  padding: 10px 20px !important; }

.dx-colorbox-overlay .dx-popup-content {
  padding: 10px 20px; }

.dx-colorbox-overlay .dx-colorview-palette, .dx-colorbox-overlay .dx-colorview-hue-scale {
  height: 200px !important; }

.dx-colorbox-overlay .dx-colorview-palette {
  width: 255px !important; }

.dx-colorbox-overlay .dx-colorview-hue-scale-wrapper {
  height: 202px !important; }

.dx-colorbox-overlay .dx-texteditor-input {
  min-height: 21px;
  padding-top: 3px;
  padding-bottom: 3px; }

.dx-colorbox-overlay .dx-colorview-color-preview-container {
  margin-bottom: 10px !important; }

.dx-colorbox-overlay .dx-colorview-container label {
  line-height: 23px !important; }

.dx-colorbox-overlay .dx-colorview-container label .dx-texteditor {
  margin-bottom: 5px !important; }

.dx-editor-cell .dx-dropdowneditor {
  margin-left: 0px !important; }

.dx-editor-cell .dx-colorbox-input-container {
  border: none !important; }

.dx-row-focused > td {
  color: #2E3849 !important;
  background-color: rgba(56, 165, 232, 0.16) !important; }

tr.dx-data-row:focus-within > td {
  background-color: rgba(56, 165, 232, 0.16) !important; }

.frmdgSearch tr.dx-data-row:focus-within > td {
  background-color: rgba(56, 165, 232, 0.25) !important; }

.dx-header-row .dxHeaderWrapped {
  white-space: normal !important; }
  .dx-header-row .dxHeaderWrapped .dx-datagrid-text-content {
    white-space: normal !important; }

.dx-header-row .dxHeaderPreLine {
  white-space: pre-line !important; }
  .dx-header-row .dxHeaderPreLine .dx-datagrid-text-content {
    white-space: pre-line !important; }

.dx-alignright-cell {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis; }

.dx-datagrid .textRed td {
  color: #F04D5D !important; }

.dx-pivotgrid-vertical-headers, .dx-pivotgrid-horizontal-headers {
  background-color: #F4F5F8 !important; }
  .dx-pivotgrid-vertical-headers span, .dx-pivotgrid-horizontal-headers span {
    color: #2E3849 !important;
    font-weight: bold; }

.dx-datagrid-rowsview .dx-datagrid-content.dx-datagrid-content-fixed {
  border-left: 1px solid #D7D7D7; }

.dx-celltemplate-multiedit {
  padding: 1px !important; }

.dx-loadpanel-content {
  border: none !important;
  background: transparent !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important; }

.dx-loadindicator-segment {
  background: #3498DB !important; }

.dx-gridbase-a11y-status-container {
  width: 0;
  height: 0;
  overflow: hidden; }

.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

.cp-buttonCont > .innerBtn {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 12px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4; }

.cp-buttonCont.hasLabel.cp-iconLeft .imgIconCont {
  margin-right: 5px;
  flex-shrink: 0; }

.cp-buttonCont .imgIconCont {
  display: inline-flex;
  justify-content: center;
  height: 100%;
  align-items: center; }

.cp-buttonCont.growAtIcon .imgIconCont {
  flex-grow: 1; }

.cp-buttonCont.highRadius > .innerBtn {
  border-radius: 15px !important; }

.cp-buttonCont.mediumRadius > .innerBtn {
  border-radius: 8px !important; }

.cp-buttonCont.cp-iconTop .innerBtn {
  flex-direction: column-reverse; }

.cp-buttonCont.cp-iconTop .labelButton {
  padding-top: 2px;
  flex-shrink: 0; }

.cp-buttonCont.cp-iconTop.growAtLabel .labelButton {
  flex-grow: 1; }

.cp-buttonCont.cp-iconTop .imgIconCont {
  padding-top: 8px;
  /*temporary?*/
  min-height: 16px; }

.cp-buttonCont.cp-height-1 > .innerBtn {
  height: 32px; }

.cp-buttonCont.cp-width-1 > .innerBtn {
  width: 80px; }

.cp-buttonCont.cp-width-2 > .innerBtn {
  width: 130px; }

.cp-buttonCont.cp-width-3 > .innerBtn {
  width: 60px; }

.cp-buttonCont.cp-width-3.roundButton > .innerBtn {
  width: 60px !important;
  height: 60px !important; }

.cp-buttonCont.cp-width-4 > .innerBtn {
  padding-left: 15px;
  padding-right: 15px; }

.cp-buttonCont.cp-width-5 > .innerBtn {
  width: 78px; }

.cp-buttonCont.cp-width-6 > .innerBtn {
  width: 34px; }

.cp-buttonCont.cp-width-8 > .innerBtn {
  width: 180px;
  padding-left: 15px;
  padding-right: 15px; }

.cp-buttonCont.cp-width-9 > .innerBtn {
  width: 45px;
  padding-left: 15px;
  padding-right: 15px; }

.cp-buttonCont.cp-height-4 > .innerBtn .labelButton {
  padding-top: 5px;
  padding-bottom: 5px; }

.cp-buttonCont.cp-height-6 {
  height: 100%; }
  .cp-buttonCont.cp-height-6 > .innerBtn .labelButton {
    padding-top: 5px;
    padding-bottom: 5px; }

/*#region Alignment*/
.cp-buttonCont.alignLeft > .innerBtn {
  justify-content: flex-start; }

.cp-buttonCont.alignCenter > .innerBtn {
  justify-content: center; }

.cp-buttonCont.alignRight > .innerBtn {
  justify-content: flex-end; }

/*#endregion*/
.cp-buttonCont.cp-buttonCont-rounded > .innerBtn {
  border-radius: 5px; }

/*#region Style 1*/
.cp-buttonCont.cp-buttonCont-sy-1 > .innerBtn {
  background-color: #38A169 !important;
  color: #FFFFFF;
  border: 1px solid #38A169; }

.cp-buttonCont.cp-buttonCont-sy-1:not(.btn-disabled):hover > .innerBtn {
  background-color: #65C689 !important; }

.cp-buttonCont.cp-buttonCont-sy-1:not(.btn-disabled):focus > .innerBtn {
  background-color: #65C689 !important;
  border: 1px solid #288A60; }

.cp-buttonCont.cp-buttonCont-sy-1:not(.btn-disabled).pressed > .innerBtn {
  background-color: #288A60 !important; }

/*#endregion*/
/*#region Style 2*/
.cp-buttonCont.cp-buttonCont-sy-2 > .innerBtn {
  background-color: #38A5E8 !important;
  color: #FFFFFF;
  border: 1px solid #38A5E8; }

.cp-buttonCont.cp-buttonCont-sy-2:not(.btn-disabled):hover > .innerBtn {
  background-color: #67C5F1 !important; }

.cp-buttonCont.cp-buttonCont-sy-2:not(.btn-disabled):focus > .innerBtn {
  background-color: #67C5F1 !important;
  border: 1px solid #2881C7; }

.cp-buttonCont.cp-buttonCont-sy-2:not(.btn-disabled).pressed > .innerBtn {
  background-color: #2881C7 !important; }

/*#endregion*/
/*#region Style 3*/
.cp-buttonCont.cp-buttonCont-sy-3 > .innerBtn {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #FFFFFF; }

.cp-buttonCont.cp-buttonCont-sy-3:not(.btn-disabled):hover > .innerBtn {
  background-color: #F8F9FB !important;
  z-index: 1; }

.cp-buttonCont.cp-buttonCont-sy-3:not(.btn-disabled):focus > .innerBtn {
  background-color: #F8F9FB !important;
  border: 1px solid #38A5E8 !important;
  z-index: 1; }

.cp-buttonCont.cp-buttonCont-sy-3:not(.btn-disabled).pressed > .innerBtn {
  background-color: #FFFFFF !important;
  z-index: 1; }

/*#endregion*/
.cp-buttonCont-sy-4 > .innerBtn {
  border-radius: 3px;
  border: 1px solid transparent !important; }

.cp-buttonCont-sy-4:not(.btn-disabled):hover > .innerBtn {
  border: 1px solid #38A5E8 !important; }

.cp-buttonCont-sy-4.activated > .innerBtn {
  background-color: #6B74AF !important; }

/*#region Style 5*/
.cp-buttonCont-sy-5 > .innerBtn {
  background-color: #343434 !important;
  color: #FFFFFF;
  border: 1px solid transparent; }

.cp-buttonCont.cp-buttonCont-sy-5:not(.btn-disabled):hover > .innerBtn {
  background-color: #454545 !important; }

.cp-buttonCont.cp-buttonCont-sy-5:not(.btn-disabled):focus > .innerBtn {
  background-color: #454545 !important;
  border: 1px solid #222222 !important;
  z-index: 1; }

.cp-buttonCont.cp-buttonCont-sy-5:not(.btn-disabled).pressed > .innerBtn {
  background-color: #222222 !important; }

/*#endregion*/
.cp-buttonCont-sy-6 > .innerBtn {
  background-color: #FFFFFF;
  color: #2E3849;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.25); }

.cp-buttonCont-sy-7 > .innerBtn {
  background-color: #3965de;
  color: #FFFFFF;
  border: 1px solid #6386de; }

.cp-buttonCont-sy-8 > .innerBtn {
  background: linear-gradient(to right, #3196c6, #39a2ce, #42b2ce);
  color: #FFFFFF; }

.cp-buttonCont-sy-9 > .innerBtn {
  background: #FFFFFF;
  border: 1px solid #d7d7d7;
  color: #2C61D7; }

.cp-buttonCont-sy-9:not(.btn-disabled):hover > .innerBtn {
  border: 1px solid #38A5E8 !important; }

.cp-buttonCont-sy-9 .labelButton {
  flex-grow: 1;
  text-align: left; }

.cp-buttonCont-sy-9 .imgIconCont {
  flex-grow: 0;
  flex-shrink: 0; }

.cp-buttonCont-sy-10 > .innerBtn {
  background: #FFFFFF;
  border: 1px solid #d7d7d7;
  color: #2C61D7; }

.cp-buttonCont-sy-10:not(.btn-disabled):hover > .innerBtn {
  border: 1px solid #38A5E8 !important; }

.cp-buttonCont-sy-11 > .innerBtn {
  background: transparent !important;
  border: 1px solid #d7d7d7;
  color: #FFFFFF !important; }

.cp-buttonCont-sy-24 > .innerBtn {
  background: transparent !important;
  border: 1px solid #d7d7d7;
  color: #FFFFFF !important; }

.cp-buttonCont-sy-24:not(.btn-disabled) .innerBtn:hover {
  background-color: rgba(255, 255, 255, 0.2) !important; }

.cp-buttonCont-sy-12:not(.btn-disabled):hover > .innerBtn {
  border: 1px solid #38A5E8 !important;
  z-index: 1; }

.cp-buttonCont-sy-12 > .innerBtn {
  color: #2E3849;
  background-color: #FFFFFF;
  font-size: 12px;
  padding-left: 12px !important;
  padding-right: 12px !important;
  justify-content: flex-start; }
  .cp-buttonCont-sy-12 > .innerBtn .imgIconCont {
    flex-grow: 0; }
    .cp-buttonCont-sy-12 > .innerBtn .imgIconCont img {
      width: 12px; }

.cp-buttonCont-sy-13 > .innerBtn {
  color: #2E3849;
  background-color: transparent;
  font-size: 12px;
  padding-left: 12px !important;
  padding-right: 12px !important;
  border: none; }

/*#region Style 14*/
.cp-buttonCont.cp-buttonCont-sy-14 > .innerBtn {
  background-color: transparent !important;
  border: 1px solid #2C61D7 !important;
  color: #2C61D7 !important; }

.cp-buttonCont.cp-buttonCont-sy-14:not(.btn-disabled):hover > .innerBtn {
  background-color: rgba(84, 124, 214, 0.08) !important; }

.cp-buttonCont.cp-buttonCont-sy-14:not(.btn-disabled):focus > .innerBtn {
  background-color: rgba(84, 124, 214, 0.08) !important;
  border: 1px solid #204AB8 !important; }

.cp-buttonCont.cp-buttonCont-sy-14:not(.btn-disabled).pressed > .innerBtn {
  background-color: #204AB8 !important;
  color: #FFFFFF !important;
  border: 1px solid #204AB8 !important; }

/*#endregion*/
/*#region Style 15*/
.cp-buttonCont.cp-buttonCont-sy-15 > .innerBtn {
  background-color: #6B74AF !important;
  border: 1px solid transparent !important;
  color: #FFFFFF; }

/*#endregion*/
/*#region Style 16*/
.cp-buttonCont-sy-16 > .innerBtn {
  background-color: #0F0F0F !important;
  color: #FFFFFF;
  border: 1px solid transparent; }

.cp-buttonCont.cp-buttonCont-sy-16:not(.btn-disabled):hover > .innerBtn {
  background-color: #454545 !important; }

.cp-buttonCont.cp-buttonCont-sy-16:not(.btn-disabled):focus > .innerBtn {
  background-color: #454545 !important;
  border: 1px solid #222222 !important;
  z-index: 1; }

.cp-buttonCont.cp-buttonCont-sy-16:not(.btn-disabled).pressed > .innerBtn {
  background-color: #222222 !important; }

/*#endregion*/
/*#region Style 17*/
.cp-buttonCont.cp-buttonCont-sy-17 {
  background-color: #F4F5F8;
  border-radius: 8px; }

.cp-buttonCont.cp-buttonCont-sy-17 > .innerBtn {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.87);
  background-color: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px; }

.cp-buttonCont.cp-buttonCont-sy-17:not(.btn-disabled):hover > .innerBtn {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  z-index: 1; }

.cp-buttonCont.cp-buttonCont-sy-17:not(.btn-disabled):focus > .innerBtn {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  z-index: 1; }

.cp-buttonCont.cp-buttonCont-sy-17:not(.btn-disabled).pressed > .innerBtn {
  background-color: rgba(56, 165, 232, 0.08) !important;
  z-index: 1; }

/*#endregion*/
/*#region Style 18*/
.cp-buttonCont.cp-buttonCont-sy-18 {
  background-color: transparent;
  border-radius: 4px; }

.cp-buttonCont.cp-buttonCont-sy-18 > .innerBtn {
  font-size: 12px;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.87);
  background-color: transparent;
  border: none !important;
  border-radius: 4px; }

.cp-buttonCont.cp-buttonCont-sy-18:not(.btn-disabled):hover > .innerBtn {
  z-index: 1;
  background-color: rgba(56, 165, 232, 0.24); }

.cp-buttonCont.cp-buttonCont-sy-18:not(.btn-disabled):focus > .innerBtn {
  z-index: 1; }

.cp-buttonCont.cp-buttonCont-sy-18.activated {
  background-color: #38A5E8; }

/*#endregion*/
/*#region Style 19*/
.cp-buttonCont.cp-buttonCont-sy-19 > .innerBtn {
  font-size: 12px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #343434;
  background-color: #F8F9FB;
  border: 1px solid #F8F9FB; }

.cp-buttonCont.cp-buttonCont-sy-19:not(.btn-disabled):hover > .innerBtn {
  background-color: rgba(56, 165, 232, 0.16) !important; }

/*#endregion*/
/*#region Style 20*/
.cp-buttonCont.cp-buttonCont-sy-20 > .innerBtn {
  background-color: #FFFFFF !important;
  border: 1px solid #2C61D7 !important;
  color: #2C61D7 !important; }

.cp-buttonCont.cp-buttonCont-sy-20:not(.btn-disabled):hover > .innerBtn {
  background-color: #FFFFFF !important; }

.cp-buttonCont.cp-buttonCont-sy-20:not(.btn-disabled):focus > .innerBtn {
  background-color: rgba(84, 124, 214, 0.08) !important;
  border: 1px solid #204AB8 !important; }

.cp-buttonCont.cp-buttonCont-sy-20:not(.btn-disabled).pressed > .innerBtn {
  background-color: #204AB8 !important;
  color: #FFFFFF !important;
  border: 1px solid #204AB8 !important; }

/*#endregion*/
/*#region Style 21*/
.cp-buttonCont.cp-buttonCont-sy-21 > .innerBtn {
  background-color: #F04D5D !important;
  color: #FFFFFF;
  border: 1px solid #F04D5D; }

.cp-buttonCont.cp-buttonCont-sy-21:not(.btn-disabled):hover > .innerBtn {
  background-color: #F67879 !important; }

.cp-buttonCont.cp-buttonCont-sy-21:not(.btn-disabled):focus > .innerBtn {
  background-color: #F67879 !important;
  border: 1px solid #CE3854; }

.cp-buttonCont.cp-buttonCont-sy-21:not(.btn-disabled).pressed > .innerBtn {
  background-color: #CE3854 !important; }

/*#endregion*/
/*#region Style 22*/
.cp-buttonCont.cp-buttonCont-sy-22 > .innerBtn {
  background-color: #0882ff !important;
  color: #FFFFFF;
  border: 1px solid #38A5E8; }

.cp-buttonCont.cp-buttonCont-sy-22:not(.btn-disabled):hover > .innerBtn {
  background-color: #67C5F1 !important; }

.cp-buttonCont.cp-buttonCont-sy-22:not(.btn-disabled):focus > .innerBtn {
  background-color: #67C5F1 !important;
  border: 1px solid #2881C7; }

.cp-buttonCont.cp-buttonCont-sy-22:not(.btn-disabled).pressed > .innerBtn {
  background-color: #2881C7 !important; }

/*#endregion*/
/*#region Style 23*/
.cp-buttonCont.cp-buttonCont-sy-23 > .innerBtn {
  background-color: #0964fd !important;
  color: #FFFFFF;
  border: 1px solid transparent; }

.cp-buttonCont.cp-buttonCont-sy-23:not(.btn-disabled):hover > .innerBtn {
  background-color: #0964fd !important; }

.cp-buttonCont.cp-buttonCont-sy-23:not(.btn-disabled):focus > .innerBtn {
  background-color: #0964fd !important;
  border: 1px solid transparent; }

.cp-buttonCont.cp-buttonCont-sy-23:not(.btn-disabled).pressed > .innerBtn {
  background-color: #0964fd !important; }

/*#endregion*/
.cp-buttonCont.cp-btnOther .imgIconCont {
  margin-right: 5px;
  flex-grow: initial; }

.cp-buttonCont.cp-btnOther .labelButton {
  margin-right: 0px !important; }

.cp-buttonCont.cp-btnOther > .innerBtn {
  font-size: 11px;
  font-weight: bold; }

.cp-buttonCont.btn-disabled > .innerBtn {
  cursor: default;
  opacity: .34; }

.cp-buttonCont.cp-iconRight .labelButton {
  margin-right: 5px; }

.cp-buttonCont.roundButton > .innerBtn {
  width: 35px !important;
  height: 35px !important;
  border-radius: 50px !important; }

.cp-buttonCont.roundButton.cp-width-7 > .innerBtn {
  width: 25px !important;
  height: 25px !important; }

.btn-option-cont {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  height: 100%;
  align-items: center;
  width: 16px;
  padding-right: 2px; }

.btn-main {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  align-items: center;
  height: 100%;
  border-right: 1px solid #4aba9c; }

.btn-option {
  background-image: url("../Images/icons/icons_12px_white_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px; }

.cp-buttonCont.btn-withOption {
  position: relative; }

.cp-buttonCont.btn-withOption > .innerBtn {
  width: 80px; }

.cp-buttonCont.btn-withOption .imgIconCont {
  border-right: 1px solid #4aba9c;
  flex-grow: 1; }

.cp-buttonCont.btn-withOption .optionBtn {
  background-image: url("../Images/icons/icons_12px_white_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  width: 16px;
  height: 100%;
  padding-right: 2px; }

.cp-buttonCont.btn-withOption .dropDownCont {
  position: absolute;
  z-index: 1;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: 500px;
  overflow: auto;
  width: 230px;
  background-color: #F4F5F8;
  box-shadow: rgba(0, 0, 0, 0.16) 0 0 5px 0px;
  border: 1px solid #d7d7d7;
  padding: 10px;
  box-sizing: border-box; }

.cp-buttonCont.btn-withOption .dropDownItem {
  width: 100%;
  font-size: 13px;
  color: #2E3849;
  padding: 10px 3px;
  box-sizing: border-box;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left; }

.cp-buttonCont.btn-withOption .dropDownItem:hover {
  border: 1px solid #38A5E8; }

.cp-buttonCont.btn-withOption.btn-withOptionWhite .imgIconCont {
  border-right: 1px solid rgba(0, 0, 0, 0.12); }

.cp-buttonCont.btn-withOption.btn-withOptionWhite .optionBtn {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.btn-withOption.btn-withOptionWhite .btn-main, .btn-withOption.btn-withOptionWhite .imgIconCont {
  border-right: 1px solid #d7d7d7; }

.btn-withOption.btn-withOptionWhite .btn-option, .btn-withOption.btn-withOptionWhite .optionBtn {
  background-image: url("../Images/icons/icons_12px_color_02_arrow_down 12 px.svg");
  background-repeat: no-repeat;
  background-position: center; }

.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

.essTitleCont {
  display: flex;
  box-sizing: border-box;
  padding-left: 45px;
  padding-right: 45px;
  padding-top: 31px;
  flex-shrink: 0; }
  .essTitleCont .titleLabel {
    font-size: 24px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.87);
    flex-grow: 1; }
  .essTitleCont .titleButton {
    display: flex;
    flex-shrink: 0; }

.essContentCont {
  display: flex;
  width: 1024px;
  margin: auto;
  margin-top: auto;
  margin-top: 20px;
  flex-shrink: 0;
  flex-grow: 1; }

.essSummaryList .cp-itemList {
  background-color: transparent;
  border: none;
  height: 112px; }

.essSummaryList .item {
  width: 281px;
  height: 92px;
  padding: 0px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08); }

.essSummaryList .btnPrevNext {
  display: flex;
  align-items: center; }

.essSummaryListDt .cp-itemList {
  background-color: transparent;
  border: none;
  padding: 0; }

.essSummaryListDt .item {
  width: calc(50% - 10px);
  height: 92px;
  padding: 0px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08); }

.essSummCont {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.12);
  margin-bottom: 20px;
  width: 1024px; }
  .essSummCont .topLabel {
    font-size: 20px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.87);
    padding: 15px 15px 15px 15px; }
  .essSummCont .essSummTopCont {
    box-sizing: border-box;
    padding-bottom: 10px;
    padding-top: 10px;
    overflow: hidden;
    background-color: #547CD6; }
  .essSummCont .essSummCont2 {
    box-sizing: border-box;
    padding: 16px 0px;
    overflow: hidden;
    background-color: rgba(84, 124, 214, 0.16); }
  .essSummCont .essSummCont3 {
    background-color: #FFFFFF; }

.essSummCont2 {
  overflow: visible; }
  .essSummCont2 .essSummTopCont {
    border-radius: 10px 10px 0px 0px; }
  .essSummCont2 .essSummBottomCont {
    border-radius: 0px 0px 10px 10px; }

.essDataCont {
  position: relative;
  padding: 0px 28px 0px 0px; }
  .essDataCont .cp-miniGrid {
    padding-left: 3px;
    padding-right: 3px; }
    .essDataCont .cp-miniGrid .contentRow {
      border: none; }
    .essDataCont .cp-miniGrid .contentRow:hover {
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12); }

.essCardView {
  display: flex;
  background-color: #FFFFFF;
  height: 100%;
  width: 100%;
  color: rgba(0, 0, 0, 0.87); }
  .essCardView .partLeft {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    padding-left: 12px; }
    .essCardView .partLeft .labelName {
      font-size: 14px !important;
      font-family: Poppins, sans-serif !important;
      font-weight: 600 !important;
      line-height: 1.4 !important; }
    .essCardView .partLeft .labelInfo {
      font-size: 12px;
      font-family: sans-serif;
      font-weight: 400;
      line-height: 1.4;
      color: rgba(0, 0, 0, 0.38); }
    .essCardView .partLeft .labelWarning {
      font-size: 9px;
      font-family: sans-serif;
      font-weight: 600;
      line-height: 1.4;
      text-transform: uppercase;
      color: #F04D5D;
      margin-top: 4px; }
  .essCardView.partTotal .partRight {
    background-color: #FEF0D8; }
  .essCardView.partTotal .val {
    color: #547CD6; }
  .essCardView.partTotal.canHover:hover .partRight {
    background-color: #F8873F; }
  .essCardView.partTotal.canHover:hover .val {
    color: #FFFFFF; }
  .essCardView.partTotal.canHover:hover .info {
    color: #FFFFFF; }
  .essCardView.partPositive .partRight {
    background-color: #F4F5F8; }
  .essCardView.partPositive .val {
    color: #547CD6; }
  .essCardView.partPositive.canHover:hover .partRight {
    background-color: #38A169; }
  .essCardView.partPositive.canHover:hover .val {
    color: #FFFFFF; }
  .essCardView.partPositive.canHover:hover .info {
    color: #FFFFFF; }
  .essCardView.partNegative .partRight {
    background-color: #FDC4B8; }
  .essCardView.partNegative.canHover:hover .partRight {
    background-color: #F67879; }
  .essCardView.partNegative.canHover:hover .val {
    color: #FFFFFF; }
  .essCardView.partNegative.canHover:hover .info {
    color: #FFFFFF; }
  .essCardView .partRight {
    flex-shrink: 0;
    width: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .essCardView .partRight .val {
      font-size: 32px;
      font-family: Poppins, sans-serif;
      font-weight: 700;
      line-height: 1.4; }
    .essCardView .partRight .info {
      font-size: 10px;
      font-family: sans-serif;
      font-weight: 600;
      line-height: 1.4;
      text-transform: uppercase; }

.essWhiteBox {
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
  width: 100%;
  box-sizing: border-box; }
  .essWhiteBox.padNormal {
    padding: 28px 30px; }

.popUpSummaryCont {
  padding: 12px;
  height: 100%;
  box-sizing: border-box;
  background-color: #F4F5F8;
  overflow: auto; }

.essSummBottomCont .groupContainer {
  padding-top: 0px; }

.essSummBottomCont .groupContent {
  padding: 0px 14px 0px 14px; }

.essSummBottomCont .gridColumnarCont {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto 1fr auto auto 1fr;
  grid-gap: 4px 6px;
  padding: 10px; }
  .essSummBottomCont .gridColumnarCont .label {
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: #777777; }
  .essSummBottomCont .gridColumnarCont .separator {
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4; }
  .essSummBottomCont .gridColumnarCont .value {
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    min-height: 19px; }

.essSummBottomCont .segmentWidgetCont {
  margin-bottom: 14px; }

.essSummBottomCont .gbWidget {
  margin-bottom: 4px; }

.essSummBottomCont .cp-miniGrid .contentRow {
  border: none !important; }

.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

.lyHomeContOuter {
  height: 100%;
  overflow-y: auto; }

.lyHomeContOuter {
  overflow: hidden !important; }

.lyHomeCont {
  color: rgba(0, 0, 0, 0.87);
  height: 100%;
  padding: 35px 6%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden; }
  .lyHomeCont .lyInnerCont {
    border-radius: 8px;
    background-color: blue; }
  .lyHomeCont .boxItem, .lyHomeCont .homeHeader, .lyHomeCont .lyHomeStyle2 .homeHeader2, .lyHomeStyle2 .lyHomeCont .homeHeader2, .lyHomeCont .lyHomeStyle3 .homeHeader2, .lyHomeStyle3 .lyHomeCont .homeHeader2, .lyHomeCont .lyHomeStyle4 .homeHeader2, .lyHomeStyle4 .lyHomeCont .homeHeader2 {
    border-radius: 8px; }
  .lyHomeCont .homeHeader {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12); }
    .lyHomeCont .homeHeader .topHeader {
      height: 350px;
      position: relative;
      overflow: hidden; }
      .lyHomeCont .homeHeader .topHeader .spotLightCont {
        height: 100%;
        width: 100%;
        position: relative; }
      .lyHomeCont .homeHeader .topHeader .imgSpotlight {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0; }
        .lyHomeCont .homeHeader .topHeader .imgSpotlight.fit {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      .lyHomeCont .homeHeader .topHeader .notifCont {
        position: absolute;
        right: 80px;
        top: 0px;
        height: 100%;
        min-width: 10px;
        z-index: 1; }
    .lyHomeCont .homeHeader .bottomHeader {
      box-sizing: border-box;
      padding: 24px;
      overflow: hidden;
      background-color: #FFFFFF; }
  .lyHomeCont .homeItemCont {
    display: flex;
    flex-wrap: wrap;
    /*margin-left: -10px;
        margin-right: -10px;*/ }
    .lyHomeCont .homeItemCont .homeItem {
      display: flex;
      flex-direction: column;
      height: 400px;
      flex: 0 0 25%;
      max-width: 25%;
      /*padding-left: 10px;*/
      padding-right: 20px;
      padding-bottom: 20px;
      box-sizing: border-box; }
    .lyHomeCont .homeItemCont .homeItemAnn {
      cursor: pointer;
      height: 415px;
      box-sizing: border-box;
      flex: 0 0 100%;
      max-width: 100%;
      display: flex;
      flex-direction: column; }
      .lyHomeCont .homeItemCont .homeItemAnn .homeItemAnnContent {
        display: flex;
        flex-direction: column;
        padding-top: 16px;
        height: 415px; }
    .lyHomeCont .homeItemCont .homeItemContent {
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      /*height: 100%;*/
      flex-grow: 1;
      width: 100%;
      overflow: hidden; }
      .lyHomeCont .homeItemCont .homeItemContent.blueBg {
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
        background-color: #1C61A7; }
      .lyHomeCont .homeItemCont .homeItemContent.whiteBg {
        background-color: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.12); }
      .lyHomeCont .homeItemCont .homeItemContent.borderTopWhite {
        border-top: 5px solid white; }
      .lyHomeCont .homeItemCont .homeItemContent.borderTopLightBlue {
        border-top: 5px solid #38A5E8; }
      .lyHomeCont .homeItemCont .homeItemContent.borderTopBlue {
        border-top: 5px solid #547CD6; }
      .lyHomeCont .homeItemCont .homeItemContent.borderTopOrange {
        border-top: 5px solid #F8873F; }
      .lyHomeCont .homeItemCont .homeItemContent.borderTopGreen {
        border-top: 5px solid #38A169; }
    .lyHomeCont .homeItemCont .innerContent {
      padding: 18px;
      display: flex;
      flex-direction: column;
      height: 100%;
      box-sizing: border-box; }
    .lyHomeCont .homeItemCont .innerContent.satAppsCont {
      padding: 0;
      overflow-y: auto;
      flex-direction: row;
      flex-wrap: wrap; }
      .lyHomeCont .homeItemCont .innerContent.satAppsCont .satAppsContent {
        display: flex;
        width: 100%;
        flex-wrap: wrap; }
    .lyHomeCont .homeItemCont .padHContent {
      padding-left: 24px;
      padding-right: 24px; }
    .lyHomeCont .homeItemCont .notifCardContent {
      flex-grow: 1;
      overflow: auto;
      height: 0px; }
    .lyHomeCont .homeItemCont[data-divide="1"] .homeItem {
      flex: 0 0 100%;
      max-width: 100%; }
    .lyHomeCont .homeItemCont[data-divide="2"] .homeItem {
      flex: 0 0 50%;
      max-width: 50%; }
    .lyHomeCont .homeItemCont[data-divide="3"] .homeItem {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
    .lyHomeCont .homeItemCont[data-divide="4"] .homeItem {
      flex: 0 0 25%;
      max-width: 25%; }
    .lyHomeCont .homeItemCont[data-divide="5"] .homeItem {
      flex: 0 0 20%;
      max-width: 20%; }
  .lyHomeCont .homeItemTitle {
    font-size: 14px;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    line-height: 1.4;
    width: 100%;
    /*color: $color-base-100;*/
    box-sizing: border-box;
    border-radius: 4px;
    margin-bottom: 8px;
    display: flex; }
    .lyHomeCont .homeItemTitle .label {
      flex-grow: 1; }
    .lyHomeCont .homeItemTitle .refresh {
      cursor: pointer;
      width: 16px;
      height: 16px;
      background-image: url("../Images/icons/icons_refresh_grey.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 16px; }
    .lyHomeCont .homeItemTitle.bgLightBlue {
      background-color: #38A5E8; }
    .lyHomeCont .homeItemTitle.bgBlue {
      background-color: #547CD6; }
    .lyHomeCont .homeItemTitle.bgOrange {
      background-color: #F8873F; }
    .lyHomeCont .homeItemTitle.bgGreen {
      background-color: #38A169; }
  .lyHomeCont .homeItemInfo {
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 16px;
    color: rgba(0, 0, 0, 0.6); }
  .lyHomeCont .homeItemTrans {
    flex-grow: 1;
    overflow: auto;
    height: 0; }
  .lyHomeCont .homeItemRefresh {
    flex-grow: 1;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer; }
    .lyHomeCont .homeItemRefresh .itemRefreshIcon {
      background-image: url("../Images/icons/icons_refresh_grey.svg");
      background-repeat: no-repeat;
      background-position: center;
      width: 32px;
      height: 32px;
      background-size: 32px; }
    .lyHomeCont .homeItemRefresh .imgNoData {
      background-image: url("../Images/icons/img_no_trans.svg");
      background-repeat: no-repeat;
      background-position: center;
      width: 85px;
      height: 85px;
      background-size: 85px; }
    .lyHomeCont .homeItemRefresh .itemRefreshInfo {
      margin-top: 16px;
      color: rgba(0, 0, 0, 0.6);
      text-align: center;
      font-size: 14px;
      font-family: sans-serif;
      font-weight: 400;
      line-height: 1.4; }
  .lyHomeCont .newsImgCont {
    border-radius: 8px;
    width: 100%;
    height: 190px;
    background-color: #F8F9FB;
    display: flex;
    align-items: center;
    justify-content: center; }
    .lyHomeCont .newsImgCont .newsImg {
      object-fit: contain;
      width: 100%;
      height: 100%; }
      .lyHomeCont .newsImgCont .newsImg.noImg {
        object-fit: initial;
        width: initial;
        height: initial; }
  .lyHomeCont .pagingSpotlight {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    position: absolute;
    bottom: 16px;
    z-index: 1;
    left: 0;
    transform: translateX(30px); }
  .lyHomeCont .pagingAnnouncement {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: 0; }
  .lyHomeCont .pagingSpotlight .bullet {
    flex-shrink: 0;
    height: 10px;
    width: 10px;
    margin-top: 8px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 25px;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer; }
  .lyHomeCont .pagingAnnouncement .bullet {
    flex-shrink: 0;
    height: 7px;
    width: 7px;
    margin-top: 8px;
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 25px;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer; }
  .lyHomeCont .pagingSpotlight .bullet.active {
    background-color: white;
    border: 1px solid lightblue; }
  .lyHomeCont .pagingAnnouncement .bullet.active {
    background-color: #38A5E8; }
  .lyHomeCont .newContentCont {
    flex-grow: 1;
    overflow: hidden;
    padding: 24px;
    display: flex;
    flex-direction: column; }
    .lyHomeCont .newContentCont.isInBox {
      padding-bottom: 12px; }
  .lyHomeCont .newsTitle {
    font-size: 16px;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    cursor: pointer; }
  .lyHomeCont .newsInfo {
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.6);
    font-style: italic; }
  .lyHomeCont .newsContent {
    flex-grow: 1;
    height: 0;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    overflow: hidden;
    white-space: pre-line;
    color: rgba(0, 0, 0, 0.6); }
  .lyHomeCont .newsReadMore {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 16px;
    color: #2C61D7;
    font-weight: bold; }
    .lyHomeCont .newsReadMore .newsReadMoreText:hover {
      cursor: pointer;
      text-decoration: underline; }
    .lyHomeCont .newsReadMore .imgReadMore {
      cursor: pointer;
      width: 8px;
      height: 8px;
      background-image: url("../Images/icons/icon_chevron_right_blue.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 8px; }
  .lyHomeCont .newsAttach {
    flex-shrink: 0;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 4px;
    color: #2C61D7; }
    .lyHomeCont .newsAttach .newsAttachText:hover {
      cursor: pointer;
      text-decoration: underline; }
  .lyHomeCont .newsDate {
    flex-shrink: 0;
    font-size: 12px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.6);
    font-weight: bold;
    margin-bottom: 4px; }
  .lyHomeCont .homeNews {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth; }
    .lyHomeCont .homeNews .newContentCont {
      overflow: hidden;
      padding: 0;
      padding-left: 12px;
      display: flex;
      flex-direction: column; }
      .lyHomeCont .homeNews .newContentCont.isInBox {
        padding-bottom: 12px; }
  .lyHomeCont .divNewsContNew {
    display: flex;
    min-width: 500px;
    max-width: 500px;
    height: 150px;
    padding: 16px;
    background-color: white;
    border-radius: 8px;
    margin-right: 16px;
    border: 1px solid rgba(0, 0, 0, 0.12); }
    .lyHomeCont .divNewsContNew .newsImgCont {
      height: 100% !important;
      width: 150px !important; }
      .lyHomeCont .divNewsContNew .newsImgCont .newsImg {
        object-fit: cover;
        width: 150px;
        height: 100%;
        border-radius: 8px; }
        .lyHomeCont .divNewsContNew .newsImgCont .newsImg.noImg {
          object-fit: initial;
          width: 150px;
          height: 100%; }

.notifItem {
  color: rgba(0, 0, 0, 0.87);
  right: 0px;
  position: absolute;
  border-radius: 8px;
  width: 439px;
  padding: 24px;
  background-color: #FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
  box-sizing: border-box; }
  .notifItem.typeGreeting {
    display: flex; }
    .notifItem.typeGreeting .imgCont {
      width: 50px;
      flex-shrink: 0; }
    .notifItem.typeGreeting .imgLay {
      width: 100%; }
  .notifItem .emotGreet {
    display: flex;
    justify-content: center;
    font-size: 40px;
    line-height: 1; }
    .notifItem .emotGreet .emotGreetIcon {
      width: 40px;
      height: 40px; }
  .notifItem.typeItem {
    position: relative;
    height: 230px;
    overflow: visible;
    display: flex;
    flex-direction: column; }
    .notifItem.typeItem .contNotifList {
      flex-grow: 1;
      height: 0px;
      position: relative;
      overflow: hidden; }
    .notifItem.typeItem .paging {
      display: flex;
      flex-shrink: 0;
      justify-content: flex-start;
      margin-top: 8px; }
      .notifItem.typeItem .paging .bullet {
        flex-shrink: 0;
        height: 8px;
        width: 8px;
        margin-top: 8px;
        margin-left: 4px;
        margin-right: 4px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.08);
        cursor: pointer; }
        .notifItem.typeItem .paging .bullet.active {
          background-color: #38A5E8; }
    .notifItem.typeItem .contNotifItem {
      left: 0px;
      top: 0px;
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 100%; }
      .notifItem.typeItem .contNotifItem.notif {
        display: flex;
        flex-direction: column; }
        .notifItem.typeItem .contNotifItem.notif .title {
          font-size: 16px !important;
          font-family: Poppins, sans-serif !important;
          font-weight: 600 !important;
          line-height: 1.4 !important;
          flex-shrink: 0; }
        .notifItem.typeItem .contNotifItem.notif .date {
          font-size: 12px;
          font-family: sans-serif;
          font-weight: 400;
          line-height: 1.4;
          color: rgba(0, 0, 0, 0.6);
          flex-shrink: 0;
          margin-bottom: 8px;
          font-weight: bold; }

.cp-notifList.announcementStyle {
  width: 100%;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  height: 100%; }
  .cp-notifList.announcementStyle .content {
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    /*color: $color-text-primary-med;*/
    overflow: auto; }
  .cp-notifList.announcementStyle .innerNotifContent {
    white-space: pre-line; }

.cp-notifList.notifStyle .content {
  font-size: 14px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.6);
  flex-grow: 1;
  overflow: auto; }

.cp-notifList.notifCardStyle {
  width: 100%;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  height: 100%; }
  .cp-notifList.notifCardStyle .content {
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.6);
    flex-grow: 1;
    overflow: auto; }
  .cp-notifList.notifCardStyle .innerNotifContent {
    white-space: pre-line; }

.cp-notifList.newsStyle {
  width: 100%;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  height: 100%;
  display: flex;
  flex-direction: column; }
  .cp-notifList.newsStyle .paging {
    margin-bottom: 12px; }

.cp-notifList .outerContNotifItem {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  left: 0px;
  top: 0px;
  width: 100%; }
  .cp-notifList .outerContNotifItem .contNotifItem {
    position: initial;
    height: 50%; }
  .cp-notifList .outerContNotifItem .separator {
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    margin-left: -5px;
    margin-right: -5px; }
    .cp-notifList .outerContNotifItem .separator .innerSeparator {
      width: 100%;
      height: 1px;
      border-top: 1px solid rgba(0, 0, 0, 0.12); }

.cp-notifList .buttonClose {
  background-color: #FFFFFF;
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center;
  height: 32px;
  width: 32px;
  border-radius: 50px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
  position: absolute;
  left: calc(100% + 8px);
  top: 0px;
  cursor: pointer; }

.cp-notifList .videoCont {
  margin-top: 5px; }
  .cp-notifList .videoCont .videoContInner {
    cursor: pointer;
    display: inline-flex; }
    .cp-notifList .videoCont .videoContInner .iconVideoPlay {
      width: 40px;
      opacity: 0.6; }

.popUpNews .title {
  font-size: 28px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 5px; }

.popUpNews .content {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  white-space: pre-line; }

.popUpNews p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em; }

.popUpNews ol {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 1em; }

.popUpNews .newsAttach {
  flex-shrink: 0;
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 4px;
  color: #2C61D7; }
  .popUpNews .newsAttach .newsAttachText:hover {
    cursor: pointer;
    text-decoration: underline; }

.popUpNews .popUpNewsImgCont {
  display: flex;
  /*justify-content: center;*/
  width: 100%;
  /*margin: auto;*/
  margin-bottom: 16px; }

.popUpNews .popUpNewsImg {
  max-width: 100%;
  border-radius: 8px; }

.lyHomeCont.homeNew {
  color: black;
  padding: 32px 6%;
  box-sizing: border-box;
  overflow: hidden; }

.lyHomeStyle2 {
  /*display: flex;
    flex-direction: column;*/
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden; }
  .lyHomeStyle2 .lyHomeCont {
    overflow: hidden;
    height: auto; }
  .lyHomeStyle2 .homeHeader2 {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12); }
    .lyHomeStyle2 .homeHeader2 .topHeader2 {
      height: 200px;
      position: relative;
      overflow: hidden; }
      .lyHomeStyle2 .homeHeader2 .topHeader2 .spotLightCont2 {
        height: 100%;
        width: 100%;
        position: relative; }
      .lyHomeStyle2 .homeHeader2 .topHeader2 .imgSpotlight2 {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0; }
        .lyHomeStyle2 .homeHeader2 .topHeader2 .imgSpotlight2.fit {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      .lyHomeStyle2 .homeHeader2 .topHeader2 .divGreetingCont2 {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 100%; }
        .lyHomeStyle2 .homeHeader2 .topHeader2 .divGreetingCont2 .divGreetingContent {
          padding: 28px 50px;
          z-index: 1;
          width: 100%;
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          justify-content: space-between;
          overflow-x: auto; }
        .lyHomeStyle2 .homeHeader2 .topHeader2 .divGreetingCont2 .divBtnActionCont {
          overflow-x: auto; }
  .lyHomeStyle2 .bgFull {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover; }

.lyHomeStyle3 {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden; }
  .lyHomeStyle3 .lyHomeCont {
    overflow-y: auto;
    height: auto;
    width: calc(100% - 300px);
    padding: 28px; }
  .lyHomeStyle3 .displayFooterHome {
    width: calc(100% - 300px) !important; }
  .lyHomeStyle3 .homeHeader2 {
    width: 300px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    height: 100%; }
    .lyHomeStyle3 .homeHeader2 .topHeader2 {
      height: 100%;
      position: relative;
      overflow: hidden; }
      .lyHomeStyle3 .homeHeader2 .topHeader2 .spotLightCont2 {
        height: 100%;
        width: 100%;
        position: relative; }
      .lyHomeStyle3 .homeHeader2 .topHeader2 .imgSpotlight2 {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0; }
        .lyHomeStyle3 .homeHeader2 .topHeader2 .imgSpotlight2.fit {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      .lyHomeStyle3 .homeHeader2 .topHeader2 .divHeaderContent {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow-y: auto;
        height: 100%; }
      .lyHomeStyle3 .homeHeader2 .topHeader2 .divGreetingCont2 {
        display: flex;
        flex-direction: column;
        width: calc(100% - 40px);
        position: relative;
        z-index: 1;
        padding: 24px 20px; }
        .lyHomeStyle3 .homeHeader2 .topHeader2 .divGreetingCont2 .divGreetingContent {
          display: flex;
          width: 100%;
          flex-direction: column; }
      .lyHomeStyle3 .homeHeader2 .topHeader2 .dlbSatApps {
        padding: 0 20px;
        width: calc(100% - 40px);
        font-size: 12px;
        font-family: sans-serif;
        font-weight: 400;
        line-height: 1.4;
        font-weight: bold; }
  .lyHomeStyle3 .bgFull {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover; }
  .lyHomeStyle3 .imgQuickAccess {
    background-image: url("../Images/icons/icons_quickaccess.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 12px;
    height: 12px;
    background-size: 12px; }

.lyHomeStyle4 {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden; }
  .lyHomeStyle4 .displayFooterHome {
    width: calc(100% - 300px) !important; }
  .lyHomeStyle4 .contTop {
    display: none; }
  .lyHomeStyle4 .contBottom {
    height: 100%; }
  .lyHomeStyle4 .lyHomeCont {
    overflow-y: auto;
    height: auto;
    width: calc(100% - 300px);
    padding: 28px;
    height: calc(100% - 40px); }
    .lyHomeStyle4 .lyHomeCont .homeItemAnn {
      height: 380px !important; }
      .lyHomeStyle4 .lyHomeCont .homeItemAnn .homeItemAnnCont {
        height: 100% !important; }
      .lyHomeStyle4 .lyHomeCont .homeItemAnn .homeItemAnnContent {
        padding: 0 !important;
        height: 100% !important; }
    .lyHomeStyle4 .lyHomeCont .homeNews {
      flex-wrap: wrap;
      overflow: hidden; }
      .lyHomeStyle4 .lyHomeCont .homeNews .innerContent {
        padding: 0 !important; }
      .lyHomeStyle4 .lyHomeCont .homeNews .newsImgCont {
        border-radius: 0;
        height: 170px; }
        .lyHomeStyle4 .lyHomeCont .homeNews .newsImgCont .newsImg {
          object-fit: cover; }
      .lyHomeStyle4 .lyHomeCont .homeNews .newContentCont {
        padding: 16px; }
      .lyHomeStyle4 .lyHomeCont .homeNews .newsReadMore {
        margin-top: 22px; }
    .lyHomeStyle4 .lyHomeCont .divHomeHalfContainer {
      display: flex;
      width: 100%;
      padding-top: 24px; }
      .lyHomeStyle4 .lyHomeCont .divHomeHalfContainer .divHomeHalfLeft {
        display: flex;
        flex-direction: column;
        min-width: 50%;
        margin-right: 8px; }
      .lyHomeStyle4 .lyHomeCont .divHomeHalfContainer .divHomeHalfRight {
        display: flex;
        flex-direction: column;
        min-width: 50%;
        margin-right: 8px; }
  .lyHomeStyle4 .homeHeader2 {
    width: 300px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    height: 100%;
    transition: 150ms ease-in; }
    .lyHomeStyle4 .homeHeader2 .topHeader2 {
      height: 100%;
      position: relative;
      overflow: hidden; }
      .lyHomeStyle4 .homeHeader2 .topHeader2 .spotLightCont2 {
        height: 100%;
        width: 100%;
        position: relative; }
      .lyHomeStyle4 .homeHeader2 .topHeader2 .imgSpotlight2 {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0; }
        .lyHomeStyle4 .homeHeader2 .topHeader2 .imgSpotlight2.fit {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      .lyHomeStyle4 .homeHeader2 .topHeader2 .divHeaderContent {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow-y: auto;
        height: 100%; }
      .lyHomeStyle4 .homeHeader2 .topHeader2 .divGreetingCont2 {
        display: flex;
        flex-direction: column;
        width: calc(100% - 40px);
        position: relative;
        z-index: 1;
        padding: 24px 20px; }
        .lyHomeStyle4 .homeHeader2 .topHeader2 .divGreetingCont2 .divGreetingContent {
          display: flex;
          width: 100%;
          flex-direction: column; }
      .lyHomeStyle4 .homeHeader2 .topHeader2 .dlbSatApps {
        padding: 0 20px;
        width: calc(100% - 40px);
        font-size: 12px;
        font-family: sans-serif;
        font-weight: 400;
        line-height: 1.4;
        font-weight: bold; }
  .lyHomeStyle4 .homeHeader2.hide {
    width: 0px !important;
    transition: 150ms ease-out; }
  .lyHomeStyle4 .bgFull {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    object-fit: cover; }
  .lyHomeStyle4 .imgQuickAccess {
    background-image: url("../Images/icons/icons_quickaccess.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 12px;
    height: 12px;
    background-size: 12px; }

.lyHomeStyle5 {
  height: 100%;
  overflow-y: auto;
  /*.homeHeader2 {
        @extend .boxItem;
        width: 300px;
        overflow: hidden;
        border: 1px solid $color-dark-transparent-200;
        height: 100%;

        .topHeader2 {
            height: 100%;
            position: relative;
            overflow: hidden;

            .spotLightCont2 {
                height: 100%;
                width: 100%;
                position: relative;
            }

            .imgSpotlight2 {
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;

                &.fit {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            .divHeaderContent {
                display: flex;
                flex-direction: column;
                width: 100%;
                overflow-y: auto;
                height: 100%;
            }

            .divGreetingCont2 {
                display: flex;
                flex-direction: column;
                width: calc(100% - 40px);
                position: relative;
                z-index: 1;
                padding: 24px 20px;

                .divGreetingContent {
                    display: flex;
                    width: 100%;
                    flex-direction: column;
                }
            }

            .dlbSatApps {
                padding: 0 20px;
                width: calc(100% - 40px);
                @include body4;
                font-weight: bold;
            }
        }
    }

    .bgFull {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        object-fit: cover
    }

    .imgQuickAccess {
        @include bgIcon('icons_quickaccess.svg');
        width: 12px;
        height: 12px;
        background-size: 12px;
    }*/ }
  .lyHomeStyle5 .lyHomeCont .homeItemAnn {
    height: 380px !important; }
    .lyHomeStyle5 .lyHomeCont .homeItemAnn .homeItemAnnCont {
      height: 100% !important; }
    .lyHomeStyle5 .lyHomeCont .homeItemAnn .homeItemAnnContent {
      padding: 0 !important;
      height: 100% !important; }
  .lyHomeStyle5 .lyHomeCont .homeNews {
    flex-wrap: wrap;
    overflow: hidden; }
    .lyHomeStyle5 .lyHomeCont .homeNews .innerContent {
      padding: 0 !important; }
    .lyHomeStyle5 .lyHomeCont .homeNews .newsImgCont {
      border-radius: 0;
      height: 170px; }
      .lyHomeStyle5 .lyHomeCont .homeNews .newsImgCont .newsImg {
        object-fit: cover; }
    .lyHomeStyle5 .lyHomeCont .homeNews .newContentCont {
      padding: 16px; }
    .lyHomeStyle5 .lyHomeCont .homeNews .newsReadMore {
      margin-top: 22px; }
  .lyHomeStyle5 .lyHomeCont .divHomeHalfContainer {
    display: flex;
    width: 100%;
    padding-top: 24px; }
    .lyHomeStyle5 .lyHomeCont .divHomeHalfContainer .divHomeHalfLeft {
      display: flex;
      flex-direction: column;
      min-width: 50%;
      margin-right: 8px; }
    .lyHomeStyle5 .lyHomeCont .divHomeHalfContainer .divHomeHalfRight {
      display: flex;
      flex-direction: column;
      min-width: 50%;
      margin-right: 8px; }

.divAnnSpotCont {
  display: flex; }

.puVideoAnnCont {
  width: 100%;
  margin-top: 16px; }

.puVideoAnnContent {
  width: 100%;
  border-radius: 8px;
  /*box-shadow: 0 1px 5px rgba(0, 0, 0, 10%);*/
  border: 1px solid grey;
  background-color: white; }

.whiteBg {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12); }

.borderTopWhite {
  border-top: 5px solid white; }

.borderTopLightBlue {
  border-top: 5px solid #38A5E8; }

.borderTopBlue {
  border-top: 5px solid #547CD6; }

.borderTopOrange {
  border-top: 5px solid #F8873F; }

.borderTopGreen {
  border-top: 5px solid #38A169; }

.homeItemAnn .innerContent {
  padding: 0 !important; }

.homeItemAnn .contNotifItem .contNotifItemInner {
  padding: 18px !important;
  padding-bottom: 40px !important;
  overflow: auto; }

.divExpandCont {
  width: 100%;
  height: 48px;
  background-color: white;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.12); }
  .divExpandCont .divExpandInner {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 8px 16px; }
    .divExpandCont .divExpandInner .imgExpandCont {
      width: 18px;
      height: 18px;
      /*border: 1px solid $border-grey-std;*/
      /*padding: 6px;*/
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 4px; }
      .divExpandCont .divExpandInner .imgExpandCont .imgExpand {
        width: 100%;
        height: 100%; }
    .divExpandCont .divExpandInner .imgExpandCont:hover {
      opacity: 0.8; }
    .divExpandCont .divExpandInner .imgExpandCont:active {
      opacity: 0.6; }

@media only screen and (min-width: 0px) {
  .lyHomeStyle2 .homeItemAnn, .lyHomeStyle3 .homeItemAnn {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important; }
  .lyHomeStyle2 .divAnnSpotCont, .lyHomeStyle3 .divAnnSpotCont {
    flex-direction: column !important; } }

@media only screen and (min-width: 570px) {
  .lyHomeStyle2 .homeItemAnn {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-right: 0 !important; }
  .lyHomeStyle2 .divAnnSpotCont {
    flex-direction: column !important; } }

@media only screen and (min-width: 875px) {
  .lyHomeStyle3 .homeItemAnn {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    margin-right: 0 !important; }
  .lyHomeStyle3 .divAnnSpotCont {
    flex-direction: column !important; } }

@media only screen and (max-width: 900px) {
  .lyHomeStyle4 .divHomeHalfContainer, .lyHomeStyle5 .divHomeHalfContainer {
    flex-direction: column-reverse; }
    .lyHomeStyle4 .divHomeHalfContainer .divHomeHalfLeft, .lyHomeStyle5 .divHomeHalfContainer .divHomeHalfLeft {
      width: 100% !important;
      margin-right: 0 !important; }
    .lyHomeStyle4 .divHomeHalfContainer .divHomeHalfRight, .lyHomeStyle5 .divHomeHalfContainer .divHomeHalfRight {
      width: 100% !important;
      margin-left: 0 !important; } }

@media only screen and (min-width: 1024px) {
  .lyHomeStyle2 .homeItemAnn {
    flex: 0 0 33.3% !important;
    max-width: 33.3% !important;
    margin-right: 18px !important; }
  .lyHomeStyle2 .divAnnSpotCont {
    flex-direction: row !important; } }

@media only screen and (min-width: 1275px) {
  .lyHomeStyle3 .homeItemAnn {
    flex: 0 0 33.3% !important;
    max-width: 33.3% !important;
    margin-right: 18px !important; }
  .lyHomeStyle3 .divAnnSpotCont {
    flex-direction: row !important; } }

@media only screen and (min-width: 1366px) {
  .lyHomeStyle2 .homeItemAnn {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    margin-right: 18px !important; }
  .lyHomeStyle2 .divAnnSpotCont {
    flex-direction: row !important; } }

@media only screen and (min-width: 1560px) {
  .lyHomeStyle3 .homeHeader2 {
    width: 350px; }
  .lyHomeStyle3 .displayFooterHome {
    width: calc(100% - 350px) !important; }
  .lyHomeStyle3 .lyHomeCont {
    width: calc(100% - 350px); } }

@media only screen and (min-width: 1608px) {
  .lyHomeStyle3 .homeItemAnn {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    margin-right: 18px !important; }
  .lyHomeStyle3 .divAnnSpotCont {
    flex-direction: row !important; } }

@media only screen and (max-width: 650px) {
  .lyHomeStyle4 .contTop {
    display: flex; }
  .lyHomeStyle4 .homeHeader2 {
    position: absolute !important;
    z-index: 2 !important; }
  .lyHomeStyle4 .contBottom {
    height: calc(100% - 48px); }
    .lyHomeStyle4 .contBottom .lyHomeCont {
      width: 100% !important; }
  .lyHomeStyle4 .displayFooterHome {
    width: 100% !important; } }

@media only screen and (max-width: 300px) {
  .lyHomeStyle4 .contTop {
    display: flex; }
  .lyHomeStyle4 .homeHeader2 {
    position: absolute !important;
    z-index: 5 !important;
    width: 100% !important; }
  .lyHomeStyle4 .contBottom {
    height: calc(100% - 48px); }
    .lyHomeStyle4 .contBottom .lyHomeCont {
      width: 100% !important; }
  .lyHomeStyle4 .displayFooterHome {
    width: 100% !important; } }

:root {
  --dT-primary-blue: #4A90E2;
  --dT-light-blue: #9ccbff;
  --dT-text-color: #2c3e50; }

.dt-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--dT-text-color);
  padding: 12px; }

.dt-search {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 30px; }

.dt-input {
  width: 99%;
  padding: 10px 14px;
  background-color: var(--dT-light-blue);
  transition: box-shadow 0.3s ease;
  font-size: 13px;
  border-radius: 12px; }

.dt-input:focus {
  outline: none; }

table.dataTable {
  width: 100% !important;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; }

table.dataTable thead {
  background-color: var(--dT-primary-blue);
  color: white; }

table.dataTable th,
table.dataTable td {
  padding: 12px 16px;
  text-align: left; }

/*table.dataTable td {
    cursor:pointer;
}*/
table.dataTable tbody tr:hover {
  background-color: #f0f8ff; }

.dt-paging .dt-paging-button {
  background-color: white;
  color: var(---dT-primary-blue);
  border: 1px solid var(---dT-primary-blue);
  border-radius: 6px;
  margin: 0 4px;
  padding: 6px 10px;
  transition: all 0.3s ease; }

.dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button:hover {
  background-color: var(---dT-primary-blue);
  color: white; }

.dt-info {
  color: #555;
  font-size: 13px;
  margin-top: 10px; }

.dt-length {
  display: none !important; }

div.dt-container div.dt-layout-row {
  margin: 0;
  margin-bottom: 10px; }

div.dt-container .dt-search input {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px; }

div.dt-container .dt-search input:hover {
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08); }

div.dt-container .dt-search input:focus {
  border: 1px solid #38A5E8; }

div.dt-container .dt-search input::-webkit-input-placeholder {
  font-size: 13px; }

div.dt-container .dt-search input::-moz-placeholder {
  font-size: 13px; }

div.dt-container .dt-search input:-ms-input-placeholder {
  font-size: 13px; }

div.dt-container .dt-search input::placeholder {
  font-size: 13px; }

div.dt-container div.dt-layout-row div.dt-layout-cell {
  font-size: 13px; }

@media (max-width: 768px) {
  .dt-container {
    padding: 6px; } }

/*
.dt-scroll-body{
    overflow-y:auto;
    scrolbar-gutter: stable both-edges;
}

.dt-scroll-body::-webkit-scrollbar {
    width:8px;
}

.dt-scroll-body::-webkit-scrollbar-thumb {
    background: var(--dT-light-blue);
    border-radius: 4px;
}

.dt-scroll-body::-webkit-scrollbar-track {
    background: #f0f8ff;
}

.dt-scroll-body {
    scrollbar-width: thin;
    scrollbar-color: var(--dT-light-blue) #f0f8ff;
}

table.dt-table{
    width:100% !important;
    box-sizing: border-box;
}

div.dt-scroll {
    width: calc(100% - 11px);
}*/
.component-font, .ribbonPropItemCont, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine, .cp-textBoxContInput, .cp-textBoxCont .phoneCode, .cp-comboboxCont .inner, .cp-comboboxCont .input, .selection-cont, .cp-radioButtonCont, .cp-dateBoxCont .input, .cp-periodCont, .cp-buttonEditCont .input, .inputCode, .sdd-item, .cp-memo .input, .cp-checkBox > .inner .label, .cp-label, .cp-buttonEditText .inputCode, .cp-buttonEditText .inputName, .cp-sideHelper .item, .cp-miniGrid, .cp-miniGrid .headerCol, .cp-itemList, .cp-groupOption .itemCont, .cp-categoryList, .cp-buttonInfo .inner, .cp-productSelector, .cp-incrementor .input, .cp-filterOption, .cp-yesNo, .cp-inputOTP, .dx-pid-cell-disabled {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

@media only screen and (min-width: 1200px) {
  .displayMaxScreenCard {
    padding-right: calc(100% - 1200px); } }

@media (min-width: 768px) {
  .pid-compGrid .pid-compOuterItem {
    width: 50%; } }

@media (min-width: 1024px) {
  .pid-compGrid .pid-compOuterItem {
    width: 33.3%; } }

@media (min-width: 1024px) {
  .clientProfileOuterCont .ClientName {
    font-size: 30px; } }

@media (min-width: 1260px) {
  .pid-outerContainer {
    width: 1200px; } }

@media (min-width: 1260px) {
  .cOutCont {
    width: 1200px;
    padding-left: 30px;
    padding-right: 30px; } }

@media (min-width: 1440px) {
  .cOutCont {
    width: 1400px;
    padding-left: 20px;
    padding-right: 20px; } }

@media (min-width: 1260px) {
  .contOuterProfileTop .contProfileTop {
    width: 1200px; } }

@media (max-width: 488px) {
  .ud-info-item, .ud-info-question {
    flex: 1 1 100%;
    max-width: 100%; } }

@media (max-width: 768px) {
  :root {
    --vacancyLeftBasis: 100; }
  .pid-headerMenuMobile {
    display: flex; }
  .pid-headerMenuWeb {
    display: none; }
  #vacancyGrid-Details {
    display: none; }
  .pid-spotLight {
    background: url("../SpotLight/SpotLight-Mobile.png") no-repeat center center/cover;
    max-height: 340px;
    width: 100vw;
    height: 30vh;
    background-size: cover;
    background-position: center; }
  .pid-headContainer .pid-floatSpotLight {
    position: absolute;
    bottom: 10px;
    width: 100%; }
  .cp-searchField {
    flex-direction: column;
    gap: 8px; }
  #sfSearchVac {
    margin: auto; }
    #sfSearchVac .cp-searchField .comboBoxCont {
      max-width: 300px;
      width: 80vw !important; }
    #sfSearchVac .cp-searchField .buttonEditCont {
      max-width: 300px;
      width: 80vw !important; }
    #sfSearchVac .cp-comboboxCont {
      border-radius: 10px; }
      #sfSearchVac .cp-comboboxCont .boxBorder {
        border-radius: 10px; }
    #sfSearchVac .cp-buttonEditCont .boxBorder {
      border-radius: 10px; }
  .ud-info-container {
    justify-content: flex-start; }
  /*.ud-info-item, .ud-info-question {
        flex: 1 1 45%;
        max-width: 45%;
    }*/
  .loginBoxOuterCont .loginBoxInfo {
    width: 100vw; }
  .loginBoxOuterCont .loginBoxCont {
    width: 85vw; }
  .essContentCont {
    width: 100vw;
    margin-top: 4px; }
  .detHeaderCont.columnVMiddle .expandedCont {
    flex-flow: wrap; }
  .cp-formPopUp .inner-popUp {
    width: 100vw; }
  .cp-formPopUp .contentWrap {
    padding: 15px; }
  .detHeaderCont.blueFullWidth .innerCont {
    padding-top: 0px; }
  .essSummBottomCont {
    padding: 0px !important; }
    .essSummBottomCont .groupContent {
      padding: 8px 8px 8px 8px; }
  .cp-groupBox.style3 {
    padding: 4px; }
    .cp-groupBox.style3 .title {
      font-size: 16px;
      width: 70vw; }
  .cp-miniGrid .contentCol {
    padding: 6px 4px; }
  .cp-miniGrid.btnPosMiddle .buttonCont {
    align-items: flex-start; }
  .cp-miniGrid .buttonCont .buttonItem {
    margin-top: 10px; }
  .attachment-coverView .inner {
    width: 100%; }
  .lbStyle-16 {
    font-size: 14px; }
  .essSummCont .essSummTopCont {
    margin-bottom: 8px; } }

@media (max-width: 768px) and (orientation: landscape) {
  .pid-spotLight {
    max-width: 480px;
    min-height: 80vh; }
  .pid-compGridOuter {
    justify-content: center; } }