@charset "UTF-8";
.component-font, .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, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

* {
  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, .f3, .fb3, .fb3blue, .fb3gray, .fb3green, .fb3white, .fb3red, .f3blue, .f3gray, .f3green, .f3white, .f3red, .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 {
  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 {
  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; }

.component-font, .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, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine {
  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: 20px !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: #777777 !important; }

/* Deprecated */
.labelLightGreyText {
  fill: #777777 !important; }

/* Deprecated */
.labelWhite {
  color: #FFFFFF; }

/* Deprecated */
.labelLightBlack {
  color: #353535; }

.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, .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, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine {
  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: #353535;
  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: #353535;
  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: #353535; }

.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-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 .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: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, .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, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine {
  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: #353535;
    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: #353535;
    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: #353535;
    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: #353535;
  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: #353535;
    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: #353535;
    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: #353535;
    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: #353535;
    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: #353535;
    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: #353535;
    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: #353535;
  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 .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: #353535;
  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: #353535;
  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: 12px;
  width: 12px;
  cursor: pointer;
  background-image: url("../Images/icons/icons_cross 12 px grey.png");
  background-repeat: no-repeat;
  background-position: center; }

.cp-formPopUp .contentWrap {
  padding: 30px;
  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; }

.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: #353535;
  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: #353535;
  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: #353535; }

.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: #353535; }

.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: 4;
  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: 3px;
  box-sizing: border-box;
  width: 130px;
  height: 130px;
  padding: 5px;
  position: relative; }

.cp-attachItem.cp-image .inner {
  background-color: #FFFFFF;
  border-radius: 3px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; }

.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: #353535;
  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: #353535;
    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: #353535;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 10px; }

.cp-confirmBox .message {
  color: #353535;
  font-size: 13px;
  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: #353535;
  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 .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: #353535;
    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: #353535;
  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: 12px 8px;
  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: #777777; }

.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: #353535; }
  .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: #353535;
    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: #353535;
    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; }

.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: #353535;
    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: #777777; }

.cp-productSelector .prodItemCont .prodCatSep {
  color: #777777; }

.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: #777777; }

.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: #777777; }

.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: #353535;
  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: #353535;
  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: #353535;
  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: #353535; }

.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: #353535;
    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: #353535;
    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: #353535;
    font-weight: bold;
    min-height: 32px; }
  .cp-saveTransaction .transItemInfo {
    display: flex;
    align-items: center; }
  .cp-saveTransaction .msgDescItem {
    color: #777777; }
  .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: #353535;
    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: #353535;
    font-weight: bold;
    min-height: 32px; }
  .cp-saveStepTransaction .transItemInfo {
    display: flex;
    align-items: center;
    justify-content: center; }
  .cp-saveStepTransaction .msgDescItem {
    text-align: center;
    color: #777777; }
  .cp-saveStepTransaction .itemStatus {
    margin-right: 10px;
    width: 28px; }
  .cp-saveStepTransaction .stepCountCont {
    color: #353535;
    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: #353535;
    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: #353535;
    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: #353535; }
  .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: #353535;
  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: #777777;
  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: #353535; }
  .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: #353535;
  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: #353535;
  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: #353535;
    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: #777777; }
  .columnarGrid table .separator {
    color: #777777;
    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: #353535; }
  .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, .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, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine {
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.4; }

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: #353535; }

.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: #777777;
  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: #777777 !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: #353535; }

.detHeaderCont .transHd .dataTransHd {
  font-size: 16px;
  line-height: 1.5;
  font-weight: bold;
  color: #353535;
  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: #353535; }
  .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: #353535;
  font-weight: bold;
  margin-bottom: 5px; }

.detHeaderCont .columnarValue {
  font-size: 13px;
  color: #353535;
  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: #353535;
  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: #777777; }

.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*/
.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: #353535; }

.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: #353535;
  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: #353535;
  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: #353535;
  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: #353535;
  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: #353535;
  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: #353535; }

.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: #353535;
  margin-bottom: 7px; }

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

.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: #777777;
  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: #777777 !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: #353535;
  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: #353535;
  display: inline-block;
  font-weight: bold;
  font-size: 13px; }

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

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

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

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

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

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

.labelGrey {
  color: #777777 !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; }

.dl2-rightContent {
  z-index: 1;
  width: calc(100% - 195px);
  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-title {
  display: none;
  color: #353535;
  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: #353535;
  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: #353535;
  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: #353535; }

/*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: #353535; }
  .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: #353535; }
  .ne-tableCont .tColumn {
    box-sizing: border-box; }

.ne-tableBHeader {
  display: flex;
  font-weight: bold;
  font-size: 14px; }
  .ne-tableBHeader .tColumn {
    border-bottom: 3px solid #353535;
    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: #353535;
  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: #353535;
  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: #353535;
    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: #353535; }
  .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: #353535; }

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

.valueStyle1 {
  font-size: 13px;
  color: #353535;
  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: #353535;
  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: #353535;
  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: #353535; }

.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 #353535;
  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: #353535;
    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: #353535;
    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; }

@media (min-width: 1200px) {
  .displayMaxScreenCard {
    padding-right: calc(100% - 1200px); } }

.pid-outerContainer {
  padding-left: 36px;
  padding-right: 36px;
  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; }
        
@media only screen and (min-width: 200px) and (max-width: 768px) and (orientation: landscape){
  .pid-compGrid .pid-compOuterItem {
    width: 97%; } }

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
  .pid-compGrid .pid-compOuterItem {
    width: 47.5%; } }

@media only screen and  (min-width: 1024px) and (orientation: landscape){
  .pid-compGrid .pid-compOuterItem {
    width: 33.3%; } }

@media (min-width: 1260px) {
  .pid-outerContainer {
    width: 1200px; } }

.pid-vacGrid {
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
  flex-wrap: wrap;
  margin-top: 15px; }
  .pid-vacGrid .pid-vacOuterItem {
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    flex-shrink: 0;
    padding-bottom: 30px;
    width: 100%; }
  .pid-vacGrid .pid-vacItem {
    border-radius: 4px;
    /*box-shadow: rgba(0, 0, 0, 0.21) 0px 0px 10px 0px;*/
    border: 1px solid #c6c6c6;
    min-height: 130px;
    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-color: #777777; }
    .pid-vacGrid .pid-vacItem .VacantName {
      font-size: 17px;
      font-weight: bold;
      margin-bottom: 6px;
      color: #134baa; }
    .pid-vacGrid .pid-vacItem .VacantSpec {
      font-size: 0.8rem;
      color: rgba(0, 0, 0, 0.87);
      max-height: 300px;
      overflow: hidden; }
    .pid-vacGrid .pid-vacItem .CompLogo {
      width: 60px;
      height: 60px;
      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; }
      .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;
      font-size: 1rem }
    .pid-vacGrid .pid-vacItem .ActDateCont {
      margin-top: 12px;
      font-size: 15px;
      color: #134baa;
      display: flex;
      font-weight: bold; }
 
 .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 .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;
      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;
  padding-bottom: 12px; }

.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: #353535;
  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; }

@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; } }

.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; }

@media (min-width: 1024px) {
  .clientProfileOuterCont .ClientName {
    font-size: 30px; } }

.clientProfileOuterCont .hdRight {
  margin-left: 30px; }

.clientProfileOuterCont .compAttrCont {
  display: grid;
  font-size: 20px;
  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-portalLyContainer {
  position: relative; }

.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: 700px; }
  .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: #DEE9FC;
    padding: 5px 15px;
    border-radius: 6px;
    box-sizing: border-box;
    border: 1px solid #DEE9FC;
    max-width: 200px }
  .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;
     padding-top: 5px;
      }
  .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; }
  @media (min-width: 1260px) {
    .contOuterProfileTop .contProfileTop {
      width: 1200px; } }
  .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; }

@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, .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, .buttonGroup.withInfo, .formButtonGroupCont .fbgLabel, .btn-box, .optionLine {
  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: #353535;
  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 !important;
  color: #FFFFFF !important; }

.cp-buttonCont-sy-12:not(.btn-disabled):hover > .innerBtn {
  border: 1px solid #38A5E8 !important;
  z-index: 1; }

.cp-buttonCont-sy-12 > .innerBtn {
  color: #353535;
  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: #353535;
  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: #353535;
  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; }

.scrollerHidden::-webkit-scrollbar
{
    display:none;
}

.scrollerHidden
{
  -ms-overflow-style:none;
}


   
@media only screen and (min-device-width: 130px) and (max-device-width: 500px)
{
    .pid-vacGrid .pid-vacOuterItem
    {
        width: 97%;
    }
    .pid-vacGrid .pid-vacItem .VacantName
    {
        font-size: 1.9rem;
    }
    .pid-vacGrid .pid-vacItem .VacantSpec
    {
        font-size: 1.7rem;
    }
    .pid-vacGrid .pid-vacItem .CompLogo
    {
        width: 5rem;
        height: 5rem;
    }
    .pid-vacGrid .pid-vacItem .CompName
    {
        font-size: 1.7rem;
    }
    .pid-vacGrid .pid-vacItem .ActDateCont
    {
        font-size: 1.7rem;
    }
    .pid-vacGrid .pid-vacItem .ActDateCont .ImgActDateStr
    {
        width: 1.4rem;
    }

    .pid-headerMenu
    {
        font-size: 1.35rem;
        padding: 0.7rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .input
    {
        font-size: 1.4rem !important;
    }
    .pid-searchContainerOuter .pid-searchContainer .input::placeholder
    {
        font-size: 1.4rem !important;
    }
    .cp-buttonCont.cp-height-6 > .innerBtn .labelButton
    {
        font-size: 1.4rem !important;
    }
    .cp-buttonCont > .innerBtn
    {
        font-size: 1.4rem !important;
    }
    .pidCardSubTitle
    {
        font-size: 1.5rem;
    }


    .pid-compItem .CompName
    {
        font-size: 1.5rem;
    }

    .selection-cont .selection-item
    {
        font-size: 1.1rem;
    }
    .pid-outerContainer
    {
        font-size: 1.5rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .cp-searchField .comboBoxCont
    {
        width: 240px !important;
    }

    .cp-comboboxCont .arrow
    {
        background-size: 1.3rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .cp-buttonEditCont .searchButton
    {
        background-size: 1.3rem !important;
    }

    .pid-compItem .NewVacantDate
    {
        font-size: 1.4rem;
    }
    
    .pid-compItem .ImgNewVacantDate
    {
        width: 1.4rem;
    }

    .pid-searchContainerOuter .pid-searchContainer .cp-searchField .buttonEditCont
    {
        width: 360px !important;
    }
    .pid-compItem .CompLogo
    {
        width: 90px;
        height: 90px;
    }
    .pid-compItem .VacantCount,.pid-compItem .CompSector {
        font-size: 1.4rem;
    }
    .clientProfileOuterCont .compAttrCont .icon {
        width: 1.3rem;
    }
    .clientProfileOuterCont .compAttrCont {
       font-size: 1.5rem;
       grid-template-columns: 30px 1fr 30px 1fr;
    }
    .pid-langContainer .pid-langItem {
        font-size: 1.35rem; 
    }
    .dNavLoginAdmin {
        padding: 5px 0;
    }
    .pidContentValue {
        font-size: 1.4rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterTitle, .pid-popUpOuterContainer .pid-popUpContainer .titleCont .title  {
      font-size: 1.4rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterItemListCont {
      font-size: 1.2rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterItemListCont .filterItemListDt {
      font-size: 1.2rem;
    }
}

@media only screen and (min-device-width: 500px) and (max-device-width: 811px)
{
    .pid-vacGrid .pid-vacOuterItem
    {
        width: 97%;
    }
    .pid-vacGrid .pid-vacItem .VacantName
    {
        font-size: 1.8rem;
    }
    .pid-vacGrid .pid-vacItem .VacantSpec
    {
        font-size: 1.5rem;
    }
    .pid-vacGrid .pid-vacItem .CompLogo
    {
        width: 5rem;
        height: 5rem;
    }
    .pid-vacGrid .pid-vacItem .CompName
    {
        font-size: 1.5rem;
    }
    .pid-vacGrid .pid-vacItem .ActDateCont
    {
        font-size: 1.5rem;
    }
    .pid-vacGrid .pid-vacItem .ActDateCont .ImgActDateStr
    {
        width: 1.3rem;
    }
    
    .pid-headerMenu
    {
        font-size: 1.35rem;
        padding: 0.7rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .input
    {
        font-size: 1.3rem !important;
    }
    .pid-searchContainerOuter .pid-searchContainer .input::placeholder
    {
        font-size: 1.3rem !important;
    }
    .cp-buttonCont.cp-height-6 > .innerBtn .labelButton
    {
        font-size: 1.4rem !important;
    }
    .cp-buttonCont > .innerBtn
    {
        font-size: 1.4rem !important;
    }
    .pidCardSubTitle
    {
        font-size: 1.5rem;
    }


    .pid-compItem .CompName
    {
        font-size: 1.5rem;
    }

    .selection-cont .selection-item
    {
        font-size: 1.1rem;
    }
    .pid-outerContainer
    {
        font-size: 1.5rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .cp-searchField .comboBoxCont
    {
        width: 240px !important;
    }
    .cp-comboboxCont .arrow
    {
        background-size: 1.4rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .cp-buttonEditCont .searchButton
    {
        background-size: 1.4rem !important;
    }
    .pid-compItem .NewVacantDate
    {
        font-size: 1.4rem;
    }
    .pid-compItem .ImgNewVacantDate
    {
        width: 1.4rem;
    }
    
    .pid-searchContainerOuter .pid-searchContainer .cp-searchField .buttonEditCont
    {
        width: 360px !important;
    }
    .pid-compItem .CompLogo
    {
        width: 90px;
        height: 90px;
    }
    .pid-compItem .VacantCount,.pid-compItem .CompSector {
        font-size: 1.4rem;
    }
    .clientProfileOuterCont .compAttrCont .icon {
        width: 1.3rem;
    }
    .clientProfileOuterCont .compAttrCont {
       font-size: 1.5rem;
       grid-template-columns: 30px 1fr 30px 1fr;
    }
    .pid-langContainer .pid-langItem {
        font-size: 1.35rem; 
    }
    .dNavLoginAdmin {
        padding: 5px 0;
    }
    .pidContentValue {
        font-size: 1.4rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterTitle, .pid-popUpOuterContainer .pid-popUpContainer .titleCont .title  {
      font-size: 1.4rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterItemListCont {
      font-size: 1.2rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterItemListCont .filterItemListDt {
      font-size: 1.2rem;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
{
    .pid-headerMenu
    {
        font-size: 1.35rem;
        padding: 0.7rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .input
    {
        font-size: 1.3rem !important;
    }
    .pid-searchContainerOuter .pid-searchContainer .input::placeholder
    {
        font-size: 1.3rem !important;
    }
    .cp-buttonCont.cp-height-6 > .innerBtn .labelButton
    {
        font-size: 1.3rem !important;
    }
    .pid-vacGrid .pid-vacOuterItem
    {
        width: 97%;
    }
    .pid-vacGrid .pid-vacItem .VacantName
    {
        font-size: 1.6rem;
    }
    .pid-vacGrid .pid-vacItem .VacantSpec
    {
        font-size: 1.5rem;
    }
    .pid-vacGrid .pid-vacItem .CompLogo
    {
        width: 4rem;
        height: 4rem;
    }
    .pid-vacGrid .pid-vacItem .CompName
    {
        font-size: 1.3rem;
    }
    .pid-vacGrid .pid-vacItem .ActDateCont
    {
        font-size: 1.4rem;
    }
    .pid-vacGrid .pid-vacItem .ActDateCont .ImgActDateStr
    {
        width: 1.3rem;
    }
    .cp-buttonCont > .innerBtn
    {
        font-size: 1rem !important;
    }
    .pidCardSubTitle
    {
        font-size: 1.4rem;
    }

    .pid-compItem .CompName
    {
        font-size: 1.5rem;
    }
    .pid-outerContainer
    {
        font-size: 1.3rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .cp-searchField .comboBoxCont
    {
        width: 240px !important;
    }
    .cp-comboboxCont .arrow
    {
        background-size: 1.4rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .cp-buttonEditCont .searchButton
    {
        background-size: 1.4rem !important;
    }
    .pid-compItem .NewVacantDate
    {
        font-size: 1.4rem;
    }
    .pid-compItem .ImgNewVacantDate
    {
        width: 1.4rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .cp-searchField .buttonEditCont
    {
        width: 360px !important;
    }
    .pid-compItem .CompLogo
    {
        width: 90px;
        height: 90px;
    }
    .pid-compItem .VacantCount,.pid-compItem .CompSector {
        font-size: 1.4rem;
    }
    .clientProfileOuterCont .compAttrCont .icon {
        width: 1.3rem;
    }
    .clientProfileOuterCont .compAttrCont {
       font-size: 1.3rem;
       grid-template-columns: 30px 1fr 30px 1fr;
    }
    .pid-langContainer .pid-langItem {
        font-size: 1.35rem; 
    }
    .dNavLoginAdmin {
        padding: 5px 0;
    } 
    .pidContentValue {
        font-size: 1.4rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterTitle, .pid-popUpOuterContainer .pid-popUpContainer .titleCont .title  {
      font-size: 1.4rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterItemListCont {
      font-size: 1.2rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterItemListCont .filterItemListDt {
      font-size: 1.2rem;
    }
}

@media only screen and (min-width: 720px) and (max-width: 1024px) and (orientation: landscape)
{
    .pid-vacGrid .pid-vacOuterItem
    {
        width: 49.5%;
    }
    .pid-vacGrid .pid-vacItem .VacantSpec
    {
        font-size: 1rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .cp-searchField .comboBoxCont
    {
        width: 240px !important;
    }
    .cp-comboboxCont .arrow
    {
        background-size: 1.4rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .cp-buttonEditCont .searchButton
    {
        background-size: 1.4rem !important;
    }
    .pid-compItem .NewVacantDate
    {
        font-size: 1.4rem;
    }
    .pid-compItem .ImgNewVacantDate
    {
        width: 1.4rem;
    }
    .pid-searchContainerOuter .pid-searchContainer .cp-searchField .buttonEditCont
    {
        width: 360px !important;
    }
    .pid-compItem .CompLogo
    {
        width: 90px;
        height: 90px;
    }
    .pid-compItem .VacantCount,.pid-compItem .CompSector {
        font-size: 1.4rem;
    }
    .clientProfileOuterCont .compAttrCont .icon {
        width: 1.3rem;
    }
    .clientProfileOuterCont .compAttrCont {
       font-size: 1.3rem;
       grid-template-columns: 30px 1fr 30px 1fr;
    }
    .pid-langContainer .pid-langItem {
        font-size: 1.35rem; 
    }
    .dNavLoginAdmin {
        padding: 5px 0;
    }
    .pidContentValue {
        font-size: 1.4rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterTitle, .pid-popUpOuterContainer .pid-popUpContainer .titleCont .title {
      font-size: 1.4rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterItemListCont {
      font-size: 1.2rem;
    }
    .pid-popUpOuterContainer .pid-popUpContainer .filterItemListCont .filterItemListDt {
      font-size: 1.2rem;
    }
}


@media only screen and (min-width: 1024px)
{
    .pid-vacGrid .pid-vacOuterItem
    {
        width: 33.3%;
    }
}