.form-wrapper .label {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 5px;
  color: #848da2;
}
.form-wrapper .label .unit {
  display: block;
  float: right;
  font-size: 11px;
  font-weight: 500;
}
.form-wrapper .data {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  color: #2e58c4;
}
.form-wrapper .field {
  padding-bottom: 15px;
}
.form-wrapper .field .inline-control {
  display: flex;
}
.form-wrapper .field .inline-control .code {
  padding-right: 10px;
}
.form-wrapper.form-detail {
  display: flex;
  flex-wrap: nowrap;
}
.form-wrapper.form-detail .col {
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 7.5px;
}
.form-wrapper.form-detail .col.merge-col {
  flex: 0 0 100%;
  max-width: 100%;
}
.form-wrapper.form-detail h4 {
  text-transform: uppercase;
}
.form-wrapper.form-detail h4 .unit {
  display: block;
  float: right;
  font-size: 11px;
  font-weight: 500;
}
.form-wrapper.form-detail .field.switch {
  position: relative;
  top: 15px;
}
.form-wrapper.form-detail .field.switch .label {
  display: inline-block;
  position: relative;
  top: -7px;
  width: 45px;
}
.form-wrapper.form-detail .field.switch .percentage {
  position: absolute;
  margin-left: 15px;
  height: 24px;
  top: -5px;
}
.form-wrapper.form-detail .field.switch .percentage::after {
  content: "%";
  position: absolute;
  top: 5px;
  right: -17px;
  color: #848da2;
}
.form-wrapper.form-detail .field.switch .percentage.po-auto {
  top: 44px;
}
.form-wrapper.form-detail .field-group {
  padding-bottom: 15px;
}
.form-wrapper.info {
  padding-top: 15px;
}

.text-overflow-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.user-profile-popover {
  text-align: center;
}
.user-profile-popover .inner-wrapper {
  padding: 30px;
}
.user-profile-popover .photo {
  display: block;
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 50%;
}
.user-profile-popover .photo img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  -o-object-fit: contain;
     object-fit: contain;
}
.user-profile-popover .user-fullname {
  font-size: 20px;
  font-weight: 500;
  line-height: 4;
  color: #848da2;
}
.user-profile-popover .user-fullname span {
  display: block;
  line-height: 20px;
  font-size: 10px;
  position: relative;
  top: -15px;
}

#iconNoti {
  position: relative;
}
#iconNoti .count-noti {
  position: absolute;
  top: -2px;
  right: -2px;
  display: block;
  width: 17px;
  height: 17px;
  font-size: 10px;
  background-color: #ec9397;
  color: #fff;
  border-radius: 30px;
  line-height: 16px;
}

.notification {
  position: relative;
}
.notification .count-new-item {
  position: relative;
  top: -2px;
  display: inline-block;
  margin-left: 25px;
  padding: 1px 15px 2px;
  border-radius: 25px;
  font-size: 11px;
  font-weight: 600;
  background-color: #fbdee2;
  color: #ec9397;
}
.notification .mark-all-as-read {
  position: absolute;
  right: 10px;
  top: 19px;
  font-size: 13px;
  text-decoration: underline;
}
.notification .action-item-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50px;
}
.notification .action-item-wrapper .mark-as-read,
.notification .action-item-wrapper .delete {
  display: none;
  height: 50%;
  text-align: center;
}
.notification .action-item-wrapper .mark-as-read i,
.notification .action-item-wrapper .delete i {
  cursor: pointer;
  color: #848da2;
}
.notification .action-item-wrapper .mark-as-read i:hover,
.notification .action-item-wrapper .delete i:hover {
  color: #567ee3;
}
.notification .action-item-wrapper .mark-as-read {
  line-height: 48px;
}
.notification .action-item-wrapper .mark-as-read .fas {
  display: none;
}
.notification .action-item-wrapper .mark-as-read:hover .far {
  display: none;
}
.notification .action-item-wrapper .mark-as-read:hover .fas {
  display: inline-block;
}
.notification .action-item-wrapper .delete {
  line-height: 36px;
}
.notification .inner-wrapper {
  width: 100%;
  height: "auto";
}
.notification .inner-wrapper .menu-item {
  position: relative;
  height: 75px;
  border-bottom: 1px solid #ececec;
  overflow: hidden;
  cursor: pointer;
}
.notification .inner-wrapper .menu-item > a {
  display: block;
  padding: 15px 25px;
}
.notification .inner-wrapper .menu-item * {
  cursor: pointer;
}
.notification .inner-wrapper .menu-item .noti-date {
  position: absolute;
  bottom: 5px;
  left: 25px;
  font-size: 11px;
  font-style: italic;
  color: rgba(132, 141, 162, 0.5);
}
.notification .inner-wrapper .menu-item.new {
  background-color: #e2e9fb;
}
.notification .inner-wrapper .menu-item:hover .mark-as-read,
.notification .inner-wrapper .menu-item:hover .delete {
  display: block;
}
.notification .confirm-delete-wrapper {
  display: block;
  width: 150px;
  position: absolute;
  right: 12px;
  bottom: -30px;
  transition: 0.2s;
}
.notification .confirm-delete-wrapper.show {
  bottom: 0px;
}
.notification .confirm-delete-wrapper .confirm-text {
  font-style: italic;
  width: 100px;
}
.notification .confirm-delete-wrapper .confirm-yes {
  display: inline-block;
  padding: 0 7px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center;
  line-height: 2;
  transition: 0.3s;
  color: #40b365;
}
.notification .confirm-delete-wrapper .confirm-yes:hover {
  background: rgba(132, 141, 162, 0.3);
}
.notification .confirm-delete-wrapper .confirm-no {
  display: inline-block;
  padding: 0 7px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center;
  line-height: 2;
  transition: 0.3s;
  color: #ec9397;
}
.notification .confirm-delete-wrapper .confirm-no:hover {
  background: rgba(132, 141, 162, 0.3);
}
.notification .buttom {
  width: 100%;
  height: 50px;
  line-height: 40px;
  text-align: center;
}
.notification .load-more {
  display: inline-block;
}

.login .login-form {
  display: block;
  width: 420px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  padding: 50px 50px 100px 50px;
  border-radius: 20px;
}
.login .login-form .logo,
.login .login-form .user-name,
.login .login-form .password {
  padding-bottom: 15px;
  text-align: center;
}
.login .login-form .logo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 390px;
}
.login .login-form .logo img {
  width: 100%;
}
.login .login-form .form-wrapper {
  text-align: center;
  padding: 260px 20px 0 20px;
}
.login .login-form .form-wrapper .spliter {
  position: relative;
  padding: 10px 0;
  font-size: 10px;
  color: #848da2;
}
.login .login-form .form-wrapper .spliter::before, .login .login-form .form-wrapper .spliter::after {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  width: calc(50% - 40px);
  background-color: #848da2;
}
.login .login-form .form-wrapper .spliter::before {
  left: 0;
  top: 50%;
}
.login .login-form .form-wrapper .spliter::after {
  right: 0;
  top: 50%;
}
.login .login-form .form-wrapper .dx-texteditor-input {
  padding: 6px 2px 6px;
}
.login .login-form .button-login .dx-button-text {
  font-size: 13px;
}
.login .login-form .logon-azure .dx-button-content {
  font-size: 13px;
  line-height: 1.2;
}
.login .login-form .dx-placeholder {
  width: 100%;
  text-align: center;
  font-weight: 300;
  color: #848da2;
}
.login .login-form input {
  text-align: center;
}

.qty-unit-wrapper {
  position: relative;
  width: 100%;
  white-space: nowrap;
}
.qty-unit-wrapper > * {
  display: inline-block;
}
.qty-unit-wrapper .qty {
  width: calc(100% - 35px);
  padding-right: 5px;
}
.qty-unit-wrapper .unit {
  text-align: left;
  width: 35px;
}

.dashboard .filter,
.project-summary .filter,
.my-task .filter,
.project-list .filter,
.select-project .filter,
.pr .filter,
.po .filter {
  display: inline-flex;
  margin-left: auto;
  height: 27px;
}
.dashboard .filter > span,
.project-summary .filter > span,
.my-task .filter > span,
.project-list .filter > span,
.select-project .filter > span,
.pr .filter > span,
.po .filter > span {
  position: relative;
  top: 0;
  font-weight: 500;
  line-height: 2;
  padding-right: 5px;
}
.dashboard .filter .project-segment,
.dashboard .filter .project-type,
.project-summary .filter .project-segment,
.project-summary .filter .project-type,
.my-task .filter .project-segment,
.my-task .filter .project-type,
.project-list .filter .project-segment,
.project-list .filter .project-type,
.select-project .filter .project-segment,
.select-project .filter .project-type,
.pr .filter .project-segment,
.pr .filter .project-type,
.po .filter .project-segment,
.po .filter .project-type {
  position: relative;
}
.dashboard .filter .project-segment,
.project-summary .filter .project-segment,
.my-task .filter .project-segment,
.project-list .filter .project-segment,
.select-project .filter .project-segment,
.pr .filter .project-segment,
.po .filter .project-segment {
  padding: 0 15px;
}
.dashboard .filter .project-type,
.project-summary .filter .project-type,
.my-task .filter .project-type,
.project-list .filter .project-type,
.select-project .filter .project-type,
.pr .filter .project-type,
.po .filter .project-type {
  padding-right: 15px;
}
.dashboard .filter .filter-item,
.project-summary .filter .filter-item,
.my-task .filter .filter-item,
.project-list .filter .filter-item,
.select-project .filter .filter-item,
.pr .filter .filter-item,
.po .filter .filter-item {
  cursor: pointer;
  padding-left: 2px;
  padding-right: 2px;
  transition: 0.3s;
}
.dashboard .filter .filter-item .inner-wrapper,
.project-summary .filter .filter-item .inner-wrapper,
.my-task .filter .filter-item .inner-wrapper,
.project-list .filter .filter-item .inner-wrapper,
.select-project .filter .filter-item .inner-wrapper,
.pr .filter .filter-item .inner-wrapper,
.po .filter .filter-item .inner-wrapper {
  white-space: nowrap;
}
.dashboard .filter .filter-item:hover .inner-wrapper,
.project-summary .filter .filter-item:hover .inner-wrapper,
.my-task .filter .filter-item:hover .inner-wrapper,
.project-list .filter .filter-item:hover .inner-wrapper,
.select-project .filter .filter-item:hover .inner-wrapper,
.pr .filter .filter-item:hover .inner-wrapper,
.po .filter .filter-item:hover .inner-wrapper {
  border-color: #567ee3;
  color: #567ee3;
}
.dashboard .filter .filter-item.has-filter .inner-wrapper,
.project-summary .filter .filter-item.has-filter .inner-wrapper,
.my-task .filter .filter-item.has-filter .inner-wrapper,
.project-list .filter .filter-item.has-filter .inner-wrapper,
.select-project .filter .filter-item.has-filter .inner-wrapper,
.pr .filter .filter-item.has-filter .inner-wrapper,
.po .filter .filter-item.has-filter .inner-wrapper {
  background-color: #fff;
  border-color: #2e58c4;
  color: #2e58c4;
}
.dashboard .filter .spliter,
.project-summary .filter .spliter,
.my-task .filter .spliter,
.project-list .filter .spliter,
.select-project .filter .spliter,
.pr .filter .spliter,
.po .filter .spliter {
  padding-left: 5px;
}

.dashboard .chart-outer-wrapper,
.project-summary .chart-outer-wrapper {
  display: block;
  width: 100%;
}
.dashboard .chart-outer-wrapper .chart-wrapper,
.project-summary .chart-outer-wrapper .chart-wrapper {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 415px;
  margin-bottom: 15px;
  padding-left: 15px;
}
.dashboard .chart-outer-wrapper .chart-wrapper .toolbar,
.project-summary .chart-outer-wrapper .chart-wrapper .toolbar {
  position: absolute;
  width: 100%;
  padding: 15px 20px;
}
.dashboard .chart-outer-wrapper .chart-wrapper .toolbar .row-1,
.dashboard .chart-outer-wrapper .chart-wrapper .toolbar .row-2,
.project-summary .chart-outer-wrapper .chart-wrapper .toolbar .row-1,
.project-summary .chart-outer-wrapper .chart-wrapper .toolbar .row-2 {
  position: relative;
}
.dashboard .chart-outer-wrapper .chart-wrapper .toolbar .row-1,
.project-summary .chart-outer-wrapper .chart-wrapper .toolbar .row-1 {
  text-align: right;
  padding-right: 10px;
}
.dashboard .chart-outer-wrapper .chart-wrapper .toolbar .row-2,
.project-summary .chart-outer-wrapper .chart-wrapper .toolbar .row-2 {
  margin-top: 10px;
}
.dashboard .chart-outer-wrapper .chart-wrapper .toolbar .view-mode,
.project-summary .chart-outer-wrapper .chart-wrapper .toolbar .view-mode {
  position: absolute;
  right: 0;
  top: 0;
  text-align: right;
  padding-right: 10px;
  padding-left: 15px;
}
.dashboard .chart-outer-wrapper .chart-wrapper .toolbar .view-mode > div,
.project-summary .chart-outer-wrapper .chart-wrapper .toolbar .view-mode > div {
  display: inline-block;
  width: 150px;
}
.dashboard .display-mode,
.project-summary .display-mode {
  position: relative;
  display: flex;
  float: right;
  text-align: right;
  height: 25px;
}
.dashboard .display-mode .item,
.project-summary .display-mode .item {
  display: inline-flex;
}
.dashboard .display-mode .item > span,
.project-summary .display-mode .item > span {
  position: relative;
  top: 1px;
  margin-right: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.dashboard .display-mode .spliter,
.dashboard .display-mode .view-mode,
.project-summary .display-mode .spliter,
.project-summary .display-mode .view-mode {
  display: inline-block;
  position: relative;
}
.dashboard .display-mode .export,
.project-summary .display-mode .export {
  position: relative;
  top: -2px;
}
.dashboard .plan-material-treeList-print,
.project-summary .plan-material-treeList-print {
  height: auto;
  display: none;
}

.dashboard .close-filter-mobile {
  display: none;
}
.dashboard .split-container {
  display: flex;
}
.dashboard .split-container .left-content {
  flex: 0 0 75%;
  max-width: 75%;
}
.dashboard .split-container .right-content {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 15px 15px;
}
.dashboard .split-container .right-content .sub-header {
  display: block;
  margin-bottom: 15px;
  text-align: center;
  font-size: 15px;
}
.dashboard .mat-group-catg-wrapper {
  max-height: calc(100vh - 200px);
}
.dashboard .mat-group-catg-wrapper .outer-wrapper {
  padding: 5px;
}
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 15px;
  border: 1px solid #ececec;
  border-radius: 5px;
  background-color: rgba(236, 236, 236, 0.2);
  color: #848da2;
  transition: 0.3s;
  cursor: pointer;
}
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper * {
  cursor: pointer;
}
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper:hover {
  border: 1px solid #567ee3;
}
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper:active,
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper :focus {
  background-color: rgba(86, 126, 227, 0.1);
}
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper h2 {
  position: absolute;
  top: 5px;
  right: 15px;
  line-height: 1.5;
  color: #252525;
}
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper h4 {
  color: #252525;
}
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper h4 span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  /* color: $base-color-gray-default; */
  padding-top: 5px;
}
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper .plan-actual {
  padding-top: 20px;
}
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper .plan-actual > div {
  display: block;
  width: 100%;
  line-height: 2;
  text-transform: uppercase;
  font-size: 11px;
}
.dashboard .mat-group-catg-wrapper .outer-wrapper .inner-wrapper .plan-actual > div span {
  font-weight: 700;
  float: right;
}
.dashboard .top-5-wrapper {
  display: flex;
  margin-top: 30px;
  padding-left: 10px;
  padding-right: 10px;
}
.dashboard .top-5-wrapper .outer-wrapper {
  flex: 1;
  padding-left: 5px;
  padding-right: 5px;
}
.dashboard .top-5-wrapper .outer-wrapper .inner-wrapper {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
  border: 1px solid #ececec;
  border-radius: 5px;
  background-color: rgba(236, 236, 236, 0.2);
  color: #848da2;
  transition: 0.3s;
}
.dashboard .top-5-wrapper .outer-wrapper .inner-wrapper h4 {
  text-transform: uppercase;
  display: block;
  width: 100%;
  text-align: center;
  line-height: 2;
  padding: 15px;
}
.dashboard .top-5-wrapper .outer-wrapper .inner-wrapper .item {
  display: block;
  width: 100%;
  line-height: 2;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 13px;
}
.dashboard .top-5-wrapper .outer-wrapper .inner-wrapper .item .title {
  display: inline-block;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard .top-5-wrapper .outer-wrapper .inner-wrapper .item .amount {
  font-weight: 700;
  float: right;
}
.dashboard .top-5-wrapper .outer-wrapper .inner-wrapper .more-item {
  position: absolute;
  bottom: 15px;
  right: 0;
  padding-left: 15px;
  padding-right: 15px;
  text-align: right;
}
.dashboard .table-wrapper {
  width: 100%;
  padding: 30px 15px 15px 15px;
}
.dashboard .table-wrapper h4 {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
}
.dashboard #dataGrid1 {
  max-height: calc(100vh - 180px);
}
.dashboard #dataGrid1 .dx-datagrid-rowsview .dx-row {
  cursor: pointer;
}
.dashboard.mat-group-popup .filter-mat-group {
  padding: 0 5px 8px 5px;
  padding-right: 5px;
  padding-bottom: 10px;
}
.dashboard.mat-group-popup .mat-group-catg-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.dashboard.mat-group-popup .mat-group-catg-wrapper .inner-wrapper {
  cursor: default;
}
.dashboard.mat-group-popup .mat-group-catg-wrapper .inner-wrapper * {
  cursor: default;
}
.dashboard.mat-group-popup .mat-group-catg-wrapper .inner-wrapper:hover {
  border: 1px solid #ececec;
}
.dashboard.mat-group-popup .mat-group-catg-wrapper .inner-wrapper:active,
.dashboard.mat-group-popup .mat-group-catg-wrapper .inner-wrapper :focus {
  background-color: rgba(236, 236, 236, 0.2);
}
.dashboard.total-price-popup .total-price-datagrid {
  height: calc(100vh - 300px);
}
.dashboard.total-price-popup .export {
  width: 100%;
  text-align: center;
  padding: 15px 0;
}
.dashboard .dashboard-dropdown-menu {
  position: relative;
  top: -3px;
  margin-left: 10px;
}
.dashboard .dashboard-dropdown-menu .dx-icon {
  font-size: 18px;
  color: #848da2;
}
.dashboard .dashboard-dropdown-menu:hover, .dashboard .dashboard-dropdown-menu:active, .dashboard .dashboard-dropdown-menu:focus {
  color: #567ee3;
}

.dashboard-filter-popover .button-wrapper {
  margin-top: 15px;
  padding-top: 10px;
  text-align: right;
  border-top: 1px solid #ececec;
}
.dashboard-filter-popover .button-wrapper .button-clear {
  float: left;
}
.dashboard-filter-popover .view-mode-wrapper {
  display: flex;
  flex-wrap: nowrap;
}
.dashboard-filter-popover .view-mode-wrapper .view-mode {
  flex: 0 0 40%;
  max-width: 40%;
  margin-right: 5px;
}
.dashboard-filter-popover .view-mode-wrapper .period {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 60%;
  max-width: calc(60% - 10px);
}
.dashboard-filter-popover .view-mode-wrapper .from,
.dashboard-filter-popover .view-mode-wrapper .to {
  flex: 1;
}
.dashboard-filter-popover .view-mode-wrapper .from {
  margin-right: 5px;
}

.create-snapshot-popup .inner-wrapper .snapshot-name {
  margin-bottom: 20px;
  padding: 0 30px;
}
.create-snapshot-popup .inner-wrapper .snapshot-name .label {
  padding-bottom: 10px;
  text-transform: uppercase;
  font-weight: 600;
  color: #848da2;
}
.create-snapshot-popup .inner-wrapper p {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  line-height: 40px;
  margin: 0 0 20px 0;
}
.create-snapshot-popup .inner-wrapper p span {
  display: block;
  width: 100%;
}
.create-snapshot-popup .button-wrapper {
  text-align: center;
}
.create-snapshot-popup .button-wrapper > div:not(:last-child) {
  margin-right: 15px;
}

.export-chart {
  position: absolute;
  right: 10px;
  top: 10px;
}

.my-task .top .filter {
  display: flex;
  flex: 0 0 70%;
  max-width: 70%;
  align-items: center;
  justify-content: flex-end;
}
.my-task .top .button-create {
  flex: 0 0 15%;
  max-width: 15%;
  text-align: right;
}
.my-task .top .button-create .inner-wrapper {
  display: block;
  float: right;
  width: 150px;
  background-color: #40b365;
  padding: 5px;
  border-radius: 25px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.material .content-wrapper.material-detail > .inner-wrapper {
  background: transparent;
  padding: 0;
  height: calc(100vh - 145px);
  overflow: hidden;
}
.material .top .filter {
  flex: 0 0 85%;
  text-align: right;
}
.material .button-right {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  text-align: right;
}
.material .filter {
  display: flex;
  position: absolute;
  top: 15px;
  right: 15px;
  padding-bottom: 15px;
  text-align: right;
}
.material .filter > div {
  display: inline-block;
  width: auto;
  margin-left: 5px;
}
.material .material-list-wrapper {
  width: 100%;
  margin-top: 15px;
}
.material .material-list .button-wrapper {
  position: absolute;
  right: 0px;
  top: 0;
}
.material .material-list .button-wrapper .button-edit.dx-button-has-icon .dx-icon {
  font-size: 13px;
}
.material.request-mat-info-popup .drop-file {
  flex-wrap: wrap;
}
.material.request-mat-info-popup .drop-file .drop-area {
  flex: 100%;
  height: 150px;
}
.material.request-mat-info-popup .drop-file .drop-area .remark {
  bottom: 0;
}
.material.request-mat-info-popup .drop-file .drop-area .inner-wrapper {
  top: 0;
  transform: translate(-50%, 0);
}
.material.request-mat-info-popup .drop-file .drop-area .inner-wrapper h3 {
  margin-bottom: 0;
}
.material.request-mat-info-popup .drop-file .drop-area .inner-wrapper .spliter {
  padding: 0 0 10px 0;
}
.material.request-mat-info-popup .drop-file .uploaded-file-list {
  flex: 0 0 100%;
  max-width: 100%;
}

.syn-mat-group-popup .sync-now,
.syn-material-popup .sync-now {
  position: absolute;
  top: 15px;
  right: 15px;
  text-align: right;
}
.syn-mat-group-popup .sync-now a,
.syn-material-popup .sync-now a {
  text-decoration: underline;
  display: block;
}
.syn-mat-group-popup .sync-now > span,
.syn-material-popup .sync-now > span {
  display: block;
}
.syn-mat-group-popup #matGroupFilterSyncMaterialSelectBox,
.syn-material-popup #matGroupFilterSyncMaterialSelectBox {
  position: relative;
  top: 3px;
  margin-right: 5px;
}
.syn-mat-group-popup .last-update,
.syn-material-popup .last-update {
  position: absolute;
  top: -10px;
  right: 0px;
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  color: rgba(132, 141, 162, 0.5);
}

.price-projection-popup .chart-wrapper {
  height: 300px;
}
.price-projection-popup .view-mode {
  padding-right: 17px;
  position: relative;
}
.price-projection-popup .view-mode > div {
  display: inline-block;
}
.price-projection-popup .view-mode .print-all {
  position: absolute;
  right: 0;
}
.price-projection-popup #priceProjectionDataGrid {
  max-height: calc(100vh - 500px);
}

.sap-material-list-wrapper,
.sap-mat-group-list-wrapper {
  position: relative;
  min-height: 400px;
  height: "auto";
  padding-top: 15px;
}

#requestingMaterialDataGrid {
  height: calc(100vh - 200px);
}

.material-detail .top {
  position: relative;
}
.material-detail .top .page-title {
  flex: 0 0 40%;
  max-width: 40%;
}
.material-detail .button-right {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  text-align: right;
}
.material-detail .sub-menu-tab {
  background-color: #fff;
  margin-left: 0;
  margin-right: 0;
}
.material-detail .mat-info {
  display: flex;
  position: relative;
  padding: 15px;
  background-color: #fff;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}
.material-detail .mat-info .photo {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  margin-right: 15px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.material-detail .mat-info .photo img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  -o-object-fit: contain;
     object-fit: contain;
}
.material-detail .mat-info .photo .browse-image {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 25px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  opacity: 0.5;
}
.material-detail .mat-info .photo:hover .browse-image {
  opacity: 1;
}
.material-detail .mat-info .is-active {
  position: absolute;
  right: 15px;
  top: 15px;
  text-align: right;
}
.material-detail .mat-info .is-active label {
  display: inline-block;
  position: relative;
  top: -7px;
  width: 60px;
  text-align: left;
  text-transform: uppercase;
  font-weight: 600;
  color: #848da2;
}
.material-detail .mat-info .last-uptdate {
  position: absolute;
  bottom: 0;
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  color: rgba(132, 141, 162, 0.5);
}
.material-detail .mat-info .qs-category {
  display: flex;
  position: absolute;
  right: 15px;
}
.material-detail .mat-info .qs-category > span {
  position: relative;
  top: 3px;
  font-weight: 600;
  text-transform: uppercase;
  color: #848da2;
  margin-right: 10px;
}
.material-detail .tab-content {
  position: relative;
}
.material-detail .tab-content.tab-detail {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-left: 7.5px;
  padding-right: 7.5px;
}
.material-detail .tab-content.tab-unit .col.col-unit {
  padding-left: 0px;
}
.material-detail .form-wrapper > div {
  margin-bottom: 15px;
}
.material-detail .form-wrapper .label {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  color: #848da2;
}
.material-detail .form-wrapper .label .unit {
  display: block;
  float: right;
  font-size: 11px;
  font-weight: 500;
}
.material-detail .form-wrapper .data {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  color: #2e58c4;
}
.material-detail .form-wrapper .field {
  padding-bottom: 15px;
}
.material-detail .form-wrapper .field.calculate-field {
  color: #848da2;
  font-weight: 500;
}
.material-detail .form-wrapper .field.calculate-field .label {
  display: inline-block;
  margin-right: 10px;
}
.material-detail .form-wrapper .field .horizental-field {
  display: flex;
  padding-top: 5px;
}
.material-detail .form-wrapper .field .horizental-field .inner-wrapper {
  flex: 1;
  display: flex;
}
.material-detail .form-wrapper .field .horizental-field .label {
  padding-right: 10px;
  font-size: 11px;
}
.material-detail .form-wrapper .field .horizental-field .label.to {
  padding-left: 10px;
}
.material-detail .form-wrapper .fieldinselect {
  padding-bottom: 0px;
}
.material-detail .form-wrapper .fieldinselect.calculate-field {
  color: #848da2;
  font-weight: 500;
}
.material-detail .form-wrapper .fieldinselect.calculate-field .label {
  display: inline-block;
  margin-right: 10px;
}
.material-detail .form-wrapper .fieldinselect .horizental-field {
  display: flex;
  padding-top: 0px;
}
.material-detail .form-wrapper .fieldinselect .horizental-field .inner-wrapper {
  flex: 1;
  display: flex;
}
.material-detail .form-wrapper .fieldinselect .horizental-field .label {
  padding-right: 10px;
  font-size: 11px;
}
.material-detail .form-wrapper .fieldinselect .horizental-field .label.to {
  padding-left: 10px;
}
.material-detail .form-wrapper .mat-name .data {
  font-size: 20px;
  font-weight: 700;
  color: #252525;
}
.material-detail .form-wrapper.form-detail {
  display: flex;
  flex-wrap: nowrap;
}
.material-detail .form-wrapper.form-detail .col {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  padding-left: 7.5px;
  padding-right: 50px;
}
.material-detail .form-wrapper.form-detail .col.merge-col {
  flex: 0 0 100%;
  max-width: 100%;
}
.material-detail .form-wrapper.form-detail h4 {
  text-transform: uppercase;
}
.material-detail .form-wrapper.form-detail h4 .unit {
  display: block;
  float: right;
  font-size: 11px;
  font-weight: 500;
}
.material-detail .form-wrapper.form-detail .field.switch {
  position: relative;
}
.material-detail .form-wrapper.form-detail .field.switch .label {
  display: inline-block;
  position: relative;
  top: -7px;
  width: 125px;
}
.material-detail .form-wrapper.form-detail .field.switch .percentage {
  position: absolute;
  margin-left: 15px;
  height: 24px;
  top: -5px;
}
.material-detail .form-wrapper.form-detail .field.switch .percentage::after {
  content: "%";
  position: absolute;
  top: 5px;
  right: -17px;
  color: #848da2;
}
.material-detail .form-wrapper.form-detail .field.switch .percentage.po-auto {
  top: 44px;
}
.material-detail .form-wrapper.form-detail .buy-unit h4 {
  padding-bottom: 3px;
}
.material-detail .form-wrapper.form-detail .buy-unit .select-box {
  width: 100%;
}
.material-detail .form-wrapper.form-detail .field-group {
  padding-bottom: 15px;
}
.material-detail .form-wrapper.form-basic-info {
  display: block;
  width: 300px;
  margin-left: auto;
}
.material-detail .form-wrapper.form-basic-info .field:last-child {
  padding-bottom: 0;
}
.material-detail .form-wrapper.switch-control-wrapper {
  padding-left: 30px;
  display: block;
  padding-top: 5px;
}
.material-detail .form-wrapper.switch-control-wrapper > div {
  margin-right: 15px;
}
.material-detail .form-wrapper .badge {
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-right: 5px;
  margin-top: 3px;
  background-color: #ececec;
  font-size: 13px;
  font-weight: 600;
  color: #848da2;
  transition: 0.3s;
  height: 26px;
  cursor: pointer;
}
.material-detail .form-wrapper .badge:hover {
  background-color: #567ee3;
  color: #fff;
}
.material-detail .form-wrapper .badge:active,
.material-detail .form-wrapper .badge :focus {
  background-color: #2e58c4;
  color: #fff;
}
.material-detail .form-wrapper .badge.is-selected {
  background-color: #2e58c4;
  color: #fff;
}
.material-detail .form-wrapper .badge.is-disabled {
  opacity: 0.7;
}
.material-detail .info-wrapper {
  position: relative;
  width: 500px;
}
.material-detail .info-wrapper .label {
  color: #848da2;
}
.material-detail .info-wrapper .data {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  color: #2e58c4;
}
.material-detail .info-wrapper .mat-name .data {
  font-size: 20px;
  font-weight: 700;
  color: #252525;
}
.material-detail .info-wrapper .mat-group .data {
  font-size: 15px;
  font-weight: 500;
  color: #848da2;
}
.material-detail.upload-image-popup .upload-wrapper {
  display: flex;
  flex-wrap: nowrap;
}
.material-detail.upload-image-popup .upload-wrapper .upload-new,
.material-detail.upload-image-popup .upload-wrapper .use-defualt {
  flex: 1;
  height: auto;
}
.material-detail.upload-image-popup .upload-wrapper .upload-new img,
.material-detail.upload-image-popup .upload-wrapper .use-defualt img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  -o-object-fit: contain;
     object-fit: contain;
}
.material-detail.upload-image-popup .upload-wrapper .change-image {
  position: absolute;
  bottom: 23px;
  left: 24px;
  right: 24px;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  line-height: 25px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  opacity: 0.5;
}
.material-detail.upload-image-popup .upload-wrapper .change-image:hover {
  opacity: 1;
}
.material-detail.upload-image-popup .upload-wrapper .upload-new {
  position: relative;
}
.material-detail.upload-image-popup .upload-wrapper .upload-new h4 {
  display: block;
  width: 238px;
  margin: 0 auto;
  padding-bottom: 5px;
}
.material-detail.upload-image-popup .upload-wrapper .upload-new .photo {
  position: relative;
  display: block;
  width: 238px;
  height: 238px;
  margin: 0 auto;
  padding: 15px;
  border: 1px solid #ccc;
  overflow: hidden;
  cursor: pointer;
}
.material-detail.upload-image-popup .upload-wrapper .upload-new .photo.not-allowed-select {
  cursor: not-allowed;
}
.material-detail.upload-image-popup .upload-wrapper .upload-new .photo.not-allowed-select:hover, .material-detail.upload-image-popup .upload-wrapper .upload-new .photo.not-allowed-select:active {
  box-shadow: none;
}
.material-detail.upload-image-popup .upload-wrapper .use-defualt .photo {
  position: relative;
  display: block;
  padding: 15px;
  width: 238px;
  height: 238px;
  margin: 0 auto;
  border: 1px solid #ccc;
  overflow: hidden;
  cursor: pointer;
}
.material-detail.upload-image-popup .upload-wrapper .use-defualt .photo a {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-25%);
  width: 100%;
  text-decoration: underline;
}
.material-detail.upload-image-popup .upload-wrapper .photo:hover, .material-detail.upload-image-popup .upload-wrapper .photo:active {
  box-shadow: 0px 0px 5px 0px #cfcfcf;
}
.material-detail.upload-image-popup .upload-wrapper .photo.is-active {
  border-color: #40b365;
}
.material-detail.upload-image-popup .upload-wrapper .check-icon {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  padding-left: 20px;
}
.material-detail.upload-image-popup .upload-wrapper .check-icon i {
  position: absolute;
  left: 0;
  top: 2px;
  color: #40b365;
}

.material-group-detail .basic-field .check-box-item {
  padding-bottom: 5px;
}
.material-group-detail .basic-field .inner-wrapper {
  display: block;
}
.material-group-detail .additional-field .title {
  position: relative;
}
.material-group-detail .additional-field .title h4 {
  position: relative;
}
.material-group-detail .additional-field .title .button-add {
  position: absolute;
  /* right: 0; */
  top: -4px;
  left: 145px;
}
.material-group-detail .additional-field .title .icon-disallowed-name {
  position: relative;
  font-size: 14px;
  color: #2e58c4;
}
.material-group-detail .additional-field .title .icon-disallowed-name:hover {
  color: #567ee3;
}
.material-group-detail .additional-field .text-box-item {
  display: flex;
  padding-top: 4px;
  padding-bottom: 5px;
}
.material-group-detail .additional-field .text-box-item .button-delete {
  margin-left: 15px;
  font-weight: 600;
  text-decoration: underline;
}
.material-group-detail .additional-field .text-box-item.last {
  padding-bottom: 5px;
}
.material-group-detail .additional-field .text-box-item .field-name {
  width: calc(100% - 210px);
  margin-right: 3px;
}
.material-group-detail .additional-field .text-box-item .field-seq {
  width: auto;
  margin-right: 3px;
}
.material-group-detail .additional-field .lookup-item-wrapper {
  position: relative;
  padding: 5px 0 10px 5px;
  margin-top: 5px;
  margin-left: 20px;
  margin-bottom: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  background: rgba(246, 246, 246, 0.5411764706);
  border-radius: 5px;
}
.material-group-detail .additional-field .lookup-item-wrapper .inner-wrapper .lookup-item {
  display: flex;
  padding-left: 15px;
  padding-bottom: 7px;
}
.material-group-detail .additional-field .lookup-item-wrapper .inner-wrapper .lookup-item .lookup-name {
  width: calc(100% - 77px);
}
.material-group-detail .additional-field .lookup-item-wrapper::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -13px;
  left: 15px;
  width: 1px;
  height: 13px;
  background-color: rgba(0, 0, 0, 0.16);
}
.material-group-detail .additional-field .button-new {
  position: absolute;
  right: 75px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-transform: none;
  color: #40b365;
}

.disallowed-additional-name ul {
  padding-left: 25px;
}

.no-data {
  height: 400px;
  width: 100%;
  position: relative;
  border: 1px solid #ececec;
  border-radius: 5px;
  background-color: #fff;
  padding-bottom: 15px;
  line-height: normal;
  color: #848da2;
}
.no-data span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.project-list .content-wrapper > .inner-wrapper {
  min-height: calc(100vh - 140px) !important;
  background-color: transparent;
  padding: 0;
}
.project-list .grid-wrapper {
  position: relative;
  padding: 0;
  margin-left: -8px;
  margin-right: 0;
}
.project-list .grid-wrapper .project-item-outer {
  position: relative;
  overflow: visible;
  height: auto;
  padding: 0 0 10px 10px;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner {
  position: relative;
  width: 100%;
  height: auto;
  border: 1px solid #ececec;
  border-radius: 5px;
  background-color: #fff;
  padding-bottom: 15px;
  line-height: normal;
  color: #848da2;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding-left: 17px;
  padding-right: 15px;
  cursor: pointer;
  transition: 0.3s;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .header * {
  cursor: pointer;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner:hover {
  border: 1px solid #567ee3;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner:active,
.project-list .grid-wrapper .project-item-outer .project-item-inner :focus {
  background-color: rgba(86, 126, 227, 0.1);
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .project-code {
  display: block;
  width: 100%;
  text-align: left;
  padding-top: 15px;
  font-size: 13px;
  font-weight: 500;
  color: #252525;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .project-code .project-type {
  margin-left: 15px;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .project-name {
  display: block;
  height: 50px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-orient: vertical;
  color: #252525;
  cursor: pointer;
  width: 90%;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .mat-budget {
  display: block;
  position: relative;
  top: -12px;
  width: 100%;
  padding: 0 0 15px 0;
  text-align: left;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .status {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 40px;
  color: #f4be39;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .status.overplan {
  color: #ec9397;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .status.completed {
  color: #40b365;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .header-desc {
  display: inline-flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 0 0 10px 0;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .header-desc .item {
  flex: 1;
  max-width: 33.333333%;
  padding: 2.5px 5px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .header-desc .item > label {
  display: block;
  width: 100%;
  font-size: 11px;
  font-weight: 500;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .header-desc .item > span {
  display: block;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .header-desc .item:not(:last-child) {
  border-right: 1px solid #ececec;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .button {
  margin: 0 auto;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .description {
  display: flex;
  flex-wrap: nowrap;
  padding: 15px 15px 0 15px;
  font-weight: 600;
  font-size: 12px;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .description .col-one {
  flex: 0 0 45%;
  max-width: 45%;
  white-space: nowrap;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .description .col-two {
  flex: 0 0 40%;
  max-width: 40%;
  white-space: nowrap;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .description .col-three {
  flex: 0 0 15%;
  max-width: 15%;
  white-space: nowrap;
  text-align: right;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .description .col-three a {
  text-decoration: underline;
  display: inline-block;
  padding-left: 5px;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .description .item {
  display: block;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .description .item i {
  display: inline-block;
  width: 15px;
  text-align: center;
}
.project-list .grid-wrapper .project-item-outer .project-item-inner .description .item.completed {
  color: #40b365;
}
.project-list .filter .keyword {
  width: 320px;
}

.project-detail .top,
.boq-master-detail .top,
.popup-select-boq-master-items .top {
  gap: 15px;
}
.project-detail .top .model-image,
.boq-master-detail .top .model-image,
.popup-select-boq-master-items .top .model-image {
  position: relative;
  flex: none;
  top: 5px;
  width: 42px;
  height: 42px;
  cursor: zoom-in;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0.5px solid #cdcdcd;
}
.project-detail .top .page-title,
.boq-master-detail .top .page-title,
.popup-select-boq-master-items .top .page-title {
  flex: 0 0 40%;
  max-width: 40%;
}
.project-detail .top .project-code,
.boq-master-detail .top .project-code,
.popup-select-boq-master-items .top .project-code {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #252525 !important;
}
.project-detail .top .project-code .project-type,
.boq-master-detail .top .project-code .project-type,
.popup-select-boq-master-items .top .project-code .project-type {
  margin-left: 15px;
}
.project-detail .top .progress-boxes-wrapper,
.boq-master-detail .top .progress-boxes-wrapper,
.popup-select-boq-master-items .top .progress-boxes-wrapper {
  flex: 0 0 60%;
  max-width: 60%;
}
.project-detail .top .progress-boxes-wrapper .progress-boxes,
.boq-master-detail .top .progress-boxes-wrapper .progress-boxes,
.popup-select-boq-master-items .top .progress-boxes-wrapper .progress-boxes {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  width: 600px;
  margin-left: auto;
}
.project-detail .top .progress-boxes-wrapper .progress-boxes .box,
.boq-master-detail .top .progress-boxes-wrapper .progress-boxes .box,
.popup-select-boq-master-items .top .progress-boxes-wrapper .progress-boxes .box {
  flex: 1;
  height: 50px;
  font-size: 19px;
  font-weight: 600;
  color: #2e58c4;
  text-align: center;
}
.project-detail .top .progress-boxes-wrapper .progress-boxes .box span,
.boq-master-detail .top .progress-boxes-wrapper .progress-boxes .box span,
.popup-select-boq-master-items .top .progress-boxes-wrapper .progress-boxes .box span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: #a7a7a7;
}
.project-detail .top .progress-boxes-wrapper .progress-boxes .box:not(:first-child),
.boq-master-detail .top .progress-boxes-wrapper .progress-boxes .box:not(:first-child),
.popup-select-boq-master-items .top .progress-boxes-wrapper .progress-boxes .box:not(:first-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.24);
}
.project-detail .top .progress-boxes-wrapper .progress-boxes .box.overdue, .project-detail .top .progress-boxes-wrapper .progress-boxes .box.overplan,
.boq-master-detail .top .progress-boxes-wrapper .progress-boxes .box.overdue,
.boq-master-detail .top .progress-boxes-wrapper .progress-boxes .box.overplan,
.popup-select-boq-master-items .top .progress-boxes-wrapper .progress-boxes .box.overdue,
.popup-select-boq-master-items .top .progress-boxes-wrapper .progress-boxes .box.overplan {
  color: #ec9397;
  cursor: pointer;
}

.popup-select-boq-master-items .top {
  display: flex;
  padding-bottom: 15px;
}

.project-detail .top .page-title {
  flex: 0 0 40%;
  max-width: 40%;
}
.project-detail .top .project-code {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #252525 !important;
}
.project-detail .top .project-code .project-type {
  margin-left: 15px;
}
.project-detail .top .progress-boxes-wrapper {
  flex: 0 0 60%;
  max-width: 60%;
}
.project-detail .top .progress-boxes-wrapper .progress-boxes {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  width: 600px;
  margin-left: auto;
}
.project-detail .top .progress-boxes-wrapper .progress-boxes .box {
  flex: 1;
  height: 50px;
  font-size: 19px;
  font-weight: 600;
  color: #2e58c4;
  text-align: center;
}
.project-detail .top .progress-boxes-wrapper .progress-boxes .box span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: #a7a7a7;
}
.project-detail .top .progress-boxes-wrapper .progress-boxes .box:not(:first-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.24);
}
.project-detail .top .progress-boxes-wrapper .progress-boxes .box.overdue, .project-detail .top .progress-boxes-wrapper .progress-boxes .box.overplan {
  color: #ec9397;
  cursor: pointer;
}
.project-detail .tab-content {
  padding: 15px 0 0 0;
}
.project-detail .project-setting-button {
  display: inline-flex;
  position: absolute;
  gap: 7px;
  width: auto;
  right: 15px;
  text-transform: uppercase;
}
.project-detail .project-setting-button .inner-wrapper {
  display: block;
  width: 100%;
  padding: 2px 16px;
  border: 2px solid #a7a7a7;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.project-detail .project-setting-button #buttonManageDatasource .dx-button-content {
  font-size: 11px;
  line-height: 1.5;
}
.project-detail .project-setting-button #buttonManageDatasource .icon-db {
  margin-right: 8px;
}
.project-detail .project-setting-button #buttonManageDatasource .icon-warning {
  margin-left: 8px;
  color: #f4be39;
}
.project-detail .project-setting-button #buttonManageDatasource .icon-warning.overplan {
  color: #ec9397;
}
.project-detail.manage-datasource .top .page-title {
  flex: 0 0 50%;
  max-width: 50%;
}
.project-detail.manage-datasource .project-setting-button {
  top: 15px;
}
.project-detail.manage-datasource .tab-content {
  padding: 0;
}
.project-detail.po-alert-popover .view-detail {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -5px;
}
.project-detail.boq-price-detail .content-wrapper {
  padding: 0;
}
.project-detail.boq-price-detail .content-wrapper > .inner-wrapper {
  background-color: transparent;
}
.project-detail.boq-price-detail .content-wrapper > .inner-wrapper > .tab-content {
  padding-top: 0;
}

.project-summary .project-name {
  display: block;
  height: 50px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #252525;
  cursor: pointer;
}
.project-summary .content .filter {
  width: 100%;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  padding-right: 10px;
}
.project-summary .content .filter .mat-group,
.project-summary .content .filter .project-segment {
  position: relative;
  padding-right: 15px;
  padding-left: 15px;
}
.project-summary .content .filter .mat-group::after,
.project-summary .content .filter .project-segment::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  display: block;
  width: 1px;
  height: 15px;
  background-color: #848da2;
}
.project-summary .content .filter .mat-group > span {
  position: relative;
  top: -3px;
  font-weight: 500;
}
.project-summary .content .filter .mat-group .inner-wrapper {
  display: inline-block;
  width: calc(100% - 120px);
}
.project-summary .content .filter .view-mode {
  display: flex;
  flex-wrap: nowrap;
  padding-left: 15px;
}
.project-summary .content .filter .view-mode > div:first-child {
  margin-right: 5px;
}
.project-summary .content .progress-wrapper {
  display: flex;
  margin-top: 30px;
  padding-left: 10px;
  padding-right: 10px;
}
.project-summary .content .progress-wrapper .progress-box-outer {
  flex: 1;
  padding-left: 5px;
  padding-right: 5px;
}
.project-summary .content .progress-wrapper .progress-box-outer .inner-wrapper {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 15px;
  border: 1px solid #ececec;
  border-radius: 5px;
  background-color: rgba(236, 236, 236, 0.2);
  color: #848da2;
  transition: 0.3s;
}
.project-summary .content .progress-wrapper .progress-box-outer .inner-wrapper h4 {
  text-transform: uppercase;
  display: block;
  width: 100%;
  text-align: center;
  line-height: 2;
  padding: 15px;
}
.project-summary .content .progress-wrapper .progress-box-outer .inner-wrapper .c100 {
  font-size: 135px;
}
.project-summary .content .progress-wrapper .progress-box-outer .inner-wrapper .c100 .bar {
  border-color: #2e58c4;
}
.project-summary .content .progress-wrapper .progress-box-outer .inner-wrapper .c100 .inner-text {
  position: absolute;
  top: calc(50% + 25px);
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  font-size: 15px;
  font-weight: 600;
  color: #567ee3;
}
.project-summary .content .progress-wrapper .progress-box-outer .inner-wrapper .c100 .inner-text::before {
  content: "of";
  display: block;
  padding: 5px 0 3px;
  font-size: 13px;
  color: #848da2;
}
.project-summary .content .progress-wrapper .progress-box-outer .inner-wrapper .amount {
  display: block;
  width: 100%;
  padding: 15px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #2e58c4;
}
.project-summary .content .progress-wrapper .progress-box-outer .inner-wrapper .amount span {
  padding-right: 5px;
  color: #252525;
}
.project-summary .content .progress-wrapper .progress-box-outer .inner-wrapper .amout-per-month {
  display: block;
  width: 100%;
  line-height: 2;
  padding-left: 15px;
  padding-right: 15px;
  text-transform: uppercase;
  font-size: 13px;
}
.project-summary .content .progress-wrapper .progress-box-outer .inner-wrapper .amout-per-month span {
  font-weight: 700;
  float: right;
}
.project-summary .content .table-wrapper {
  width: 100%;
  padding-top: 30px;
  padding-left: 15px;
  padding-right: 15px;
  max-height: calc(100vh - 100px);
}
.project-summary .content .table-wrapper h4 {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
}
.project-summary .content .table-wrapper .display-mode {
  display: block;
  float: right;
  text-align: right;
}
.project-summary .content .table-wrapper .display-mode > span {
  position: relative;
  top: -8px;
  margin-right: 10px;
  font-weight: 500;
}
.project-summary .content .table-wrapper .display-mode > div {
  display: inline-block;
}
.project-summary .content .table-wrapper #dataGrid1 {
  max-height: calc(100vh - 165px);
}
.project-summary .content .table-wrapper #dataGrid1 .dx-datagrid-rowsview .dx-row {
  cursor: pointer;
}
.project-summary .no-data {
  padding: 15px;
}
.project-summary .no-data .inner-wrapper {
  height: 400px;
  width: 100%;
  position: relative;
  border: 1px solid #ececec;
  border-radius: 5px;
  background-color: #fff;
  padding-bottom: 15px;
  line-height: normal;
  color: #848da2;
}
.project-summary .no-data .inner-wrapper span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.project-activity .filter-wrapper {
  position: relative;
  width: 100%;
  padding: 5px 0 15px 0;
}
.project-activity .filter-wrapper .view-mode {
  display: inline-block;
  margin-right: 15px;
}
.project-activity .filter-wrapper .view-mode > span {
  font-weight: 500;
}
.project-activity .filter-wrapper .view-mode .inner-wrapper {
  display: inline-block;
}
.project-activity .filter-wrapper .period {
  display: inline-block;
  white-space: nowrap;
  width: auto;
  text-align: right;
}
.project-activity .filter-wrapper .period .inner-wrapper {
  display: inline-block;
}
.project-activity .filter-wrapper .period .inner-wrapper > div {
  display: inline-block;
}
.project-activity .filter-wrapper .period > span {
  font-weight: 500;
}
.project-activity .tree-list {
  height: calc(100vh - 290px);
  overflow: hidden;
}
.project-activity .tree-list > .dx-treelist {
  height: calc(100vh - 290px);
}
.project-activity .deman-gantt {
  height: calc(100vh - 290px);
}

.project-unit .icon-circle {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 25px;
  border-radius: 20px;
  background-color: #fff;
  font-size: 9px;
  text-align: center;
  line-height: 2.6;
  overflow: hidden;
  color: #fff;
  cursor: pointer;
}
.project-unit .icon-circle.percent {
  border: 1.5px solid #40b365;
  color: #40b365;
}
.project-unit .icon-circle.not-started {
  background-color: #848da2;
  border: 1.5px solid #848da2;
  color: #fff;
}
.project-unit .icon-circle.deplayed {
  background-color: #ec9397;
  border: 1.5px solid #ec9397;
  color: #fff;
}
.project-unit .icon-circle.completed {
  background-color: #40b365;
  border: 1.5px solid #40b365;
  color: #fff;
}
.project-unit .icon-circle .progress-bar {
  position: absolute;
  display: inline-block;
  left: 0;
  height: 25px;
  background-color: rgba(64, 179, 101, 0.3);
}
.project-unit .icon-has-unplanned {
  position: absolute;
  display: inline-block;
  top: -6px;
  right: 0px;
  width: 15px;
  height: 15px;
  background-color: #f4be39;
  border-radius: 20px;
  font-size: 9px;
  line-height: 1.5;
  color: #fff;
}
.project-unit .filter {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  padding: 5px 0;
}
.project-unit .filter .display-mode,
.project-unit .filter .gantt {
  flex: 0 0 100%;
  max-width: 100%;
}
.project-unit .filter .gantt {
  text-align: right;
}
.project-unit .filter .display-mode {
  display: inline-flex;
  float: right;
}
.project-unit .filter .view-mode {
  display: inline-block;
}
.project-unit .filter .group-by,
.project-unit .filter .display-by {
  display: inline-flex;
}
.project-unit .filter .group-by > span,
.project-unit .filter .display-by > span {
  display: inline-block;
  padding-right: 10px;
  line-height: 2;
}
.project-unit .filter .time-feq .inner-wrapper {
  margin-left: 10px;
}
.project-unit .filter .filter-caption {
  line-height: 24px;
}
.project-unit .filter .export {
  margin-left: auto;
}
.project-unit .filter .filter-item {
  cursor: pointer;
  padding-left: 2px;
  padding-right: 2px;
  transition: 0.3s;
}
.project-unit .filter .filter-item:hover .inner-wrapper {
  border-color: #567ee3;
  color: #567ee3;
}
.project-unit .filter .filter-item.has-filter .inner-wrapper {
  background-color: #fff;
  border-color: #2e58c4;
  color: #2e58c4;
}
.project-unit .filter .spliter {
  line-height: 22px;
}
.project-unit .view-mode > div {
  display: inline-block;
  margin-right: 5px;
}
.project-unit .qty-unit-wrapper .unit {
  margin-right: 15px;
}
.project-unit .qty-unit-wrapper .button-calculate {
  position: absolute;
  right: -10px;
  top: -5px;
}
.project-unit .qty-unit-wrapper .dx-icon {
  color: #848da2;
  font-size: 13px;
}
.project-unit #gantt1,
.project-unit #treeList {
  height: calc(100vh - 323px);
}
.project-unit #gantt1 .warning-badge,
.project-unit #treeList .warning-badge {
  display: inline-block;
  position: absolute;
  right: 5px;
  top: 6px;
  font-size: 9px;
  color: #ec9397;
  border-color: #ec9397;
}
.project-unit #gantt1 .unit-prop-info,
.project-unit #treeList .unit-prop-info {
  color: #2e58c4;
  margin-left: 10px;
  cursor: pointer;
}

.project-detail-model #modelTreeList {
  height: calc(100vh - 300px);
}

.project-detail-quotation .qoutation-wrapper .treelist-toolbar {
  display: flex;
}
.project-detail-quotation .qoutation-wrapper .treelist-toolbar .col-left {
  flex: 0 0 20%;
  max-width: 20%;
}
.project-detail-quotation .qoutation-wrapper .treelist-toolbar .col-right {
  flex: 0 0 80%;
  max-width: 80%;
  text-align: right;
}
.project-detail-quotation .qoutation-wrapper .treelist-toolbar .col-right .request-quo-button {
  display: inline-block;
  height: 30px;
}
.project-detail-quotation .qoutation-wrapper .treelist-toolbar .toggle-button {
  padding-top: 4px;
}
.project-detail-quotation #quotationList .icon-info {
  color: #2e58c4;
  margin-left: 10px;
  font-size: 14px;
  cursor: pointer;
}
.project-detail-quotation.popup-mapping-template .info-wrapper {
  padding-bottom: 15px;
}
.project-detail-quotation.popup-mapping-template .info-wrapper .info {
  line-height: 24px;
  font-weight: normal;
  color: #848da2;
}
.project-detail-quotation.request-quotation-popup .custom-popup-title-wrapper {
  margin-bottom: 0;
}
.project-detail-quotation.request-quotation-popup .popup-content-wrapper {
  height: calc(100% - 85px);
}
.project-detail-quotation.request-quotation-popup .popup-content-wrapper > .row {
  border-bottom: 1px solid #ececec;
}
.project-detail-quotation.request-quotation-popup .popup-content-wrapper > .row .col {
  padding-top: 15px;
}
.project-detail-quotation.request-quotation-popup .popup-content-wrapper > .row .right {
  border-left: 1px solid #ececec;
}
.project-detail-quotation.request-quotation-popup .popup-content-wrapper .tab-content {
  height: calc(100% - 50px);
  margin-top: 15px;
}
.project-detail-quotation.request-quotation-popup .form-wrapper.info {
  padding-left: 15px;
  padding-right: 15px;
}
.project-detail-quotation.request-quotation-popup .drop-file {
  display: block;
}
.project-detail-quotation.request-quotation-popup .drop-file .drop-area {
  max-width: 100%;
  height: 190px;
}
.project-detail-quotation.request-quotation-popup .drop-file .drop-area .inner-wrapper {
  top: 0;
  transform: translate(-50%, 0);
}
.project-detail-quotation.request-quotation-popup .drop-file .uploaded-file-list {
  max-width: 100%;
}
.project-detail-quotation.cancel-request-quotation-popup .popup-content-wrapper {
  padding-bottom: 40px;
}
.project-detail-quotation.cancel-request-quotation-popup .form-wrapper.info {
  padding-top: 0;
}

.project-detail-boq .boq-wrapper .treelist-toolbar {
  display: flex;
  justify-content: flex-end;
}
.project-detail-boq.popup-match-price .step-text {
  display: inline-block;
  position: absolute;
  right: 7px;
  top: 0;
  bottom: 0;
  line-height: 58px;
  /* font-style: italic; */
  color: #848da2;
}
.project-detail-boq.popup-match-price .panel-info-wrapper {
  margin-left: -15px;
  margin-right: -15px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 15px;
  padding: 0 15px;
  text-align: center;
}
.project-detail-boq.popup-match-price .panel-info {
  width: 100%;
  padding-bottom: 10px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}
.project-detail-boq.popup-match-price .panel-info .inner-wrapper {
  display: flex;
  align-items: flex-start;
  height: 80px;
}
.project-detail-boq.popup-match-price .panel-info .inner-wrapper .boq-header {
  display: flex;
  gap: 50px;
  flex: none;
  padding-top: 15px;
  text-align: left;
}
.project-detail-boq.popup-match-price .panel-info .inner-wrapper .boq-header .boq {
  display: flex;
  align-items: center;
  gap: 10px;
}
.project-detail-boq.popup-match-price .panel-info .inner-wrapper .boq-header #changeBoqButton {
  font-size: 12px;
  color: #252525;
}
.project-detail-boq.popup-match-price .panel-info .inner-wrapper .workflow-step {
  flex: none;
  margin-left: auto;
}
.project-detail-boq.popup-match-price .panel-info .label {
  display: block;
}
.project-detail-boq.popup-match-price .panel-info .data {
  color: #2e58c4;
  font-size: 16px;
}
.project-detail-boq.popup-match-price .panel-info .data.green {
  color: #40b365;
}
.project-detail-boq.popup-match-price .panel-info .data.red {
  color: #ec9397;
}
.project-detail-boq #boqDataGrid .remark-text {
  display: block;
  font-size: 10px;
  color: #ec9397;
}
.project-detail-boq #boqDataGrid .assign-multible-wrapper {
  width: 110px;
  flex: none;
  padding-right: 10px;
  padding-left: 10px;
}
.project-detail-boq.popup-mapping-template .panel-info .info .data {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-boq-history .custom-popup-title-wrapper .inner-wrapper-flex {
  height: 60px;
}
.popup-boq-history .custom-popup-title-wrapper .inner-wrapper-flex .popup-title {
  height: 60px;
}
.popup-boq-history .project-model {
  position: absolute;
  bottom: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  padding-top: 7px;
  font-size: 12px;
  color: #848da2;
}
.popup-boq-history .project-model .label {
  font-weight: normal;
}

#requestQuotationDataGrid .icon-remark,
#requestMatInfoHistoryDataGrid .icon-remark {
  padding-left: 10px;
  color: #2e58c4;
}
#requestQuotationDataGrid .icon-completed,
#requestMatInfoHistoryDataGrid .icon-completed {
  padding-left: 10px;
  color: #40b365;
}
#requestQuotationDataGrid ul,
#requestMatInfoHistoryDataGrid ul {
  margin-left: 5px;
}
#requestQuotationDataGrid .link-button-in-list .dx-button-content .dx-button-text,
#requestMatInfoHistoryDataGrid .link-button-in-list .dx-button-content .dx-button-text {
  text-transform: none;
}

.project-detail-mat-list .top-button-wrapper {
  height: 40px;
}
.project-detail-mat-list .treelist-toolbar {
  height: 22px;
}
.project-detail-mat-list #matLists .warning-icon,
.project-detail-mat-list #matListInfoItemsDataGrid .warning-icon {
  display: inline-block;
  position: absolute;
  right: 5px;
  top: 7px;
  font-size: 14px;
  border-color: #ec9397;
}
.project-detail-mat-list #matListInfoItemsDataGrid .warning-icon {
  top: 6px;
}
.project-detail-mat-list .mat-list-detail {
  height: calc(100vh - 250px);
  border: 1px solid #ececec;
}
.project-detail-mat-list .mat-list-detail > .row {
  height: 100%;
}
.project-detail-mat-list .mat-list-detail .left-content {
  padding-right: 0;
  border-right: 1px solid #ececec;
}
.project-detail-mat-list .mat-list-detail .left-content .tab-version {
  padding: 10px;
  border-bottom: 1px solid #ececec;
  cursor: pointer;
}
.project-detail-mat-list .mat-list-detail .left-content .tab-version:first-child {
  border-top: none;
}
.project-detail-mat-list .mat-list-detail .left-content .tab-version.actived {
  background-color: rgba(236, 236, 236, 0.9);
  color: #2e58c4;
}
.project-detail-mat-list .mat-list-detail .left-content .tab-version .warning-icon {
  float: right;
}
.project-detail-mat-list .mat-list-detail .right-content {
  padding-left: 0;
}
.project-detail-mat-list .mat-list-detail .right-content .inner-wrapper {
  padding: 5px 15px 0;
}
.project-detail-mat-list .info-wrapper {
  position: relative;
  padding-bottom: 20px;
}
.project-detail-mat-list .info-wrapper .info {
  font-weight: normal;
  font-size: 12px;
  color: #848da2;
}
.project-detail-mat-list .info-wrapper .info span {
  display: inline-block;
  width: 150px;
}
.project-detail-mat-list.popup-mat-list-detail .panel-info {
  padding-bottom: 15px;
  padding-right: 30px;
}
.project-detail-mat-list.popup-mat-list-detail .panel-info .label {
  display: block;
}
.project-detail-mat-list.popup-mat-list-detail .panel-info .data {
  color: #2e58c4;
}
.project-detail-mat-list.popup-mat-list-detail .panel-info .total-amount,
.project-detail-mat-list.popup-mat-list-detail .panel-info .version-text {
  text-align: center;
}
.project-detail-mat-list.popup-mat-list-detail .panel-info .version-text {
  line-height: 35px;
}
.project-detail-mat-list.popup-mat-list-detail .panel-info .version-text span {
  font-size: 15px;
  font-weight: 600;
  color: #2e58c4;
}
.project-detail-mat-list.popup-mat-list-detail .panel-info .info-2 {
  font-weight: normal;
  font-size: 12px;
  color: #848da2;
}
.project-detail-mat-list.popup-mat-list-detail .panel-info .info-2 span {
  display: inline-block;
  width: 150px;
}
.project-detail-mat-list.popup-mat-list-detail .panel-info .border-right {
  border-right: 1px solid #ececec;
}
.project-detail-mat-list.popup-send-to-sap .step-text {
  display: inline-block;
  position: absolute;
  right: 7px;
  top: 0;
  bottom: 0;
  line-height: 58px;
  /* font-style: italic; */
  color: #848da2;
}
.project-detail-mat-list.popup-send-to-sap .panel-info-wrapper {
  margin-left: -15px;
  margin-right: -15px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 15px;
  padding: 0 15px;
  text-align: center;
}
.project-detail-mat-list.popup-send-to-sap .panel-info {
  width: 100%;
  padding-bottom: 10px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .row {
  justify-content: center;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .label {
  display: block;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .data {
  color: #2e58c4;
  font-size: 16px;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .data.green {
  color: #40b365;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .data.red {
  color: #ec9397;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .info {
  text-align: left;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .info.status {
  position: relative;
  padding-top: 15px;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .info.status .data {
  position: relative;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .info.status .data i {
  position: absolute;
  top: 6px;
  left: -15px;
  font-size: 10px;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .info-other {
  display: block;
  padding-right: 0;
  padding-bottom: 0;
  font-size: 13px;
  font-weight: 400;
  border-left: 1px solid #ececec;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .info-other > div {
  display: block;
  font-weight: 700;
  color: #2e58c4;
}
.project-detail-mat-list.popup-send-to-sap .panel-info .info-other span {
  width: 140px;
  text-align: right;
  display: inline-block;
  padding-right: 10px;
  font-weight: 400;
  color: #848da2;
}
.project-detail-mat-list.popup-send-to-sap .selected-template {
  padding-bottom: 5px;
  font-style: italic;
  color: #848da2;
}
.project-detail-mat-list.popup-send-to-sap .selected-template .total-amount {
  display: block;
  float: right;
  font-style: normal;
  font-weight: 700;
}
.project-detail-mat-list.popup-send-to-sap .unplanned-item-wrapper .unplanned-item {
  margin-right: 5px;
}
.project-detail-mat-list.popup-send-to-sap .preview-mat-list #previewMatListDataGrid {
  max-height: calc(100vh - 255px);
}
.project-detail-mat-list.popup-send-to-sap .preview-mat-list #previewMatListDataGrid .warning-badge {
  display: inline-block;
  position: absolute;
  left: 50%;
  /* top: 14px; */
  top: 6px;
  transform: translateX(-50%);
  font-size: 9px;
  width: 80px;
  text-align: center;
  padding: 3px;
}
.project-detail-mat-list.popup-send-to-sap .preview-mat-list #previewMatListDataGrid .error-badge {
  display: inline-block;
  position: absolute;
  left: 50%;
  /* top: 14px; */
  top: 6px;
  transform: translateX(-50%);
  font-size: 9px;
  width: 90px;
  text-align: center;
  padding: 3px;
}
.project-detail-mat-list.popup-send-to-sap .request-mat-group-plan-link {
  display: inline-block;
  position: absolute;
  right: 15px;
  top: 20px;
}
.project-detail-mat-list.popup-send-to-sap .request-mat-group-plan-link a {
  text-decoration: underline;
}
.project-detail-mat-list.popup-request-mat-group-plan .panel-info {
  padding-bottom: 42px;
}

.widget-mat-list-template {
  padding-left: 0;
}
.widget-mat-list-template .collapsible-panel .title {
  background-color: #ececec;
  color: #252525;
}
.widget-mat-list-template .collapsible-panel .title h4 {
  display: inline-block;
}
.widget-mat-list-template .collapsible-panel .title .button-manage {
  color: #252525;
  float: right;
}
.widget-mat-list-template .collapsible-panel .content {
  padding: 10px;
}
.widget-mat-list-template .collapsible-panel #matListQuotationTreeList .dx-treelist-headers .dx-treelist-table .dx-row > td {
  background-color: rgba(236, 236, 236, 0.4);
}
.widget-mat-list-template .collapsible-panel #matListQuotationTreeList .link-button-in-list .dx-button-content .dx-button-text {
  text-transform: none;
}
.widget-mat-list-template .collapsible-panel #matListQuotationTreeList .warning-icon {
  margin-left: 5px;
  font-size: 14px;
}
.widget-mat-list-template.popup-manage-template .top-button-wrapper {
  height: 40px;
}
.widget-mat-list-template.popup-manage-template #addNewTemplateButton {
  float: right;
}
.widget-mat-list-template #matListQuotationFullViewTreeList {
  height: calc(100vh - 270px);
}
.widget-mat-list-template #matListQuotationFullViewTreeList .warning-icon,
.widget-mat-list-template #matListQuotationFullViewTreeList .no-items-icon {
  margin-left: 5px;
  font-size: 14px;
}
.widget-mat-list-template #matListQuotationFullViewTreeList .no-items-icon {
  color: #f4be39;
}
.widget-mat-list-template #matListQuotationFullViewTreeList .button-remove-quo {
  margin-left: 10px;
  top: -4px;
  float: right;
}
.widget-mat-list-template .remove-quotation-wrapper {
  display: flex;
  float: right;
  width: 50%;
  align-items: center;
  justify-content: flex-end;
}
.widget-mat-list-template .remove-quotation-wrapper .select-box {
  margin-left: 10px;
  margin-right: 10px;
}

.project-detail-change-log .list-wrapper div[dx-data-grid] {
  max-height: calc(100vh - 265px);
}

.unplanned-model-popover .inner-wrapper {
  text-align: center;
}
.unplanned-model-popover .inner-wrapper > span {
  display: block;
  padding: 15px;
}

.project-setting-popup .content-wrapper {
  height: calc(100% - 30px);
}
.project-setting-popup .content-wrapper > .inner-wrapper {
  height: calc(100% - 35px);
  margin-bottom: 30px;
}
.project-setting-popup .content-wrapper .auto-po-wrapper {
  height: 100%;
}
.project-setting-popup .section-wrapper .section {
  width: 100%;
  max-height: 500px;
  padding: 15px 10px 20px 0;
  border-bottom: 1px solid #ececec;
  color: #848da2;
  position: relative;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.project-setting-popup .section-wrapper .section .toggle {
  position: absolute;
  top: 5px;
  left: 0;
}
.project-setting-popup .section-wrapper .section .toggle .icon {
  display: block;
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
}
.project-setting-popup .section-wrapper .section .toggle .icon i {
  transition: 0.3s;
}
.project-setting-popup .section-wrapper .section .toggle .icon.collapsed i {
  transform: rotate(180deg);
}
.project-setting-popup .section-wrapper .section .inner-wrapper {
  display: flex;
  width: 100%;
  padding-left: 30px;
}
.project-setting-popup .section-wrapper .section .inner-wrapper .left,
.project-setting-popup .section-wrapper .section .inner-wrapper .right {
  flex: 1;
}
.project-setting-popup .section-wrapper .section .inner-wrapper .right > div {
  float: right;
}
.project-setting-popup .section-wrapper .section .inner-wrapper .description {
  font-size: 11px;
  font-style: italic;
}
.project-setting-popup .section-wrapper .section .inner-wrapper .retention {
  position: relative;
  padding-top: 15px;
}
.project-setting-popup .section-wrapper .section .inner-wrapper .retention::after {
  content: "";
  display: inline-block;
  width: 1;
  height: 30px;
}
.project-setting-popup .section-wrapper .section .inner-wrapper .retention .dx-checkbox-text {
  color: #848da2;
}
.project-setting-popup .section-wrapper .section .inner-wrapper .retention .percentage {
  position: relative;
  left: 15px;
  top: 3px;
}
.project-setting-popup .section-wrapper .section .inner-wrapper .retention .percentage::after {
  content: "%";
  position: absolute;
  top: 5px;
  right: -17px;
  color: #848da2;
}
.project-setting-popup .section-wrapper .section.collapsed {
  max-height: 30px;
}
.project-setting-popup .section-wrapper .section.section-workflow .left {
  flex: 0 0 100%;
}

.workflow-list-wrapper {
  margin-top: 15px;
}
.workflow-list-wrapper .workflow {
  padding: 10px 0;
  border-bottom: 1px solid #ececec;
  white-space: nowrap;
}
.workflow-list-wrapper .workflow:first-child {
  border-top: 1px solid #ececec;
}
.workflow-list-wrapper .template {
  display: inline-block;
}
.workflow-list-wrapper .name {
  display: inline-block;
  width: 250px;
}
.workflow-list-wrapper .preview-button {
  position: relative;
  display: block;
  float: right;
}

.preview-workflow-popover {
  width: 600px;
}

.project-manage-datasource {
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid #ececec;
}
.project-manage-datasource .sub-menu {
  flex: 0 0 15%;
  max-width: 15%;
  border-right: 1px solid #ececec;
}
.project-manage-datasource .right {
  flex: 0 0 85%;
  max-width: 85%;
  min-height: 400px;
  padding: 15px;
}
.project-manage-datasource .title {
  position: relative;
  top: -7px;
  font-size: 22px;
  font-weight: 500;
}
.project-manage-datasource .plan .row,
.project-manage-datasource .actual .row {
  margin-left: 0;
  margin-right: 0;
  line-height: 2;
  color: #848da2;
}
.project-manage-datasource .plan .row > label,
.project-manage-datasource .actual .row > label {
  display: inline-block;
  font-weight: 600;
  padding-right: 5px;
}
.project-manage-datasource .plan .row .button-sync,
.project-manage-datasource .actual .row .button-sync {
  padding-top: 10px;
}
.project-manage-datasource .actual .unplanned-item {
  margin-top: 15px;
}
.project-manage-datasource .actual .unplanned-item h4 {
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
}
.project-manage-datasource .est-qty .top-button {
  text-align: right;
}
.project-manage-datasource .est-qty .top-button > div {
  display: inline-block;
  padding: 0 0 15px 5px;
}
.project-manage-datasource .est-qty .treelist-toolbar {
  position: relative;
}
.project-manage-datasource .est-qty .treelist-toolbar .latest-update {
  position: absolute;
  top: 0;
  right: 0;
}
.project-manage-datasource .est-qty .treelist-toolbar .latest-update span,
.project-manage-datasource .est-qty .treelist-toolbar .latest-update label {
  color: #848da2;
  font-weight: 400;
}
.project-manage-datasource .est-qty #estQtyViewTreeList {
  height: calc(100vh - 250px);
}
.project-manage-datasource .est-qty #estQtyViewTreeList .icon-button-in-list {
  margin-left: 5px;
}
.project-manage-datasource .est-qty #estQtyViewTreeList .link-button-model {
  position: relative;
  padding-right: 5px;
}
.project-manage-datasource .est-qty #estQtyViewTreeList .link-button-model > i {
  display: none;
  position: absolute;
  right: -5px;
  transition: 0.3s;
  line-height: 4.3;
  font-size: 8px;
  color: #567ee3;
}
.project-manage-datasource .est-qty #estQtyViewTreeList .link-button-model:hover .dx-button-default {
  color: #567ee3;
}
.project-manage-datasource .est-qty #estQtyViewTreeList .link-button-model:hover > i {
  display: inline-block;
}
.project-manage-datasource .bottom-button {
  text-align: center;
}
.project-manage-datasource .bottom-button > div {
  display: inline-block;
  padding: 15px 0 0 5px;
}
.project-manage-datasource .est-qty .refer-info {
  display: inline-block;
  width: auto;
  text-align: left;
}
.project-manage-datasource .est-qty .refer-info .title i.fas {
  font-size: 18px;
  line-height: 2.5;
  color: #f4be39;
}
.project-manage-datasource .est-qty .refer-info > div {
  display: block;
  color: #848da2;
}
.project-manage-datasource .est-qty .refer-info > div label {
  display: inline-block;
  font-weight: 600;
}
.project-manage-datasource .est-qty .refer-info > div span {
  font-weight: 700;
  display: inline-block;
  padding-left: 5px;
}
.project-manage-datasource .est-qty .top-button {
  display: block;
  float: right;
  text-align: right;
}
.project-manage-datasource .est-qty .top-button > div {
  display: inline-block;
  padding: 0 0 15px 5px;
}
.project-manage-datasource .data-completion {
  padding: 0;
}
.project-manage-datasource .data-completion .item {
  display: block;
  position: relative;
  width: 100%;
  font-weight: 500;
  height: auto;
  min-height: 55px;
  padding: 5px 15px;
  border-bottom: 1px solid #ececec;
  font-size: 16px;
  line-height: 2.5;
  cursor: pointer;
  transition: 0.3s;
}
.project-manage-datasource .data-completion .item span {
  display: block;
}
.project-manage-datasource .data-completion .item * {
  cursor: pointer;
}
.project-manage-datasource .data-completion .item i.fas {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 18px;
  line-height: 2.5;
  color: #f4be39;
}
.project-manage-datasource .data-completion .item i.fas.overplan {
  color: #ec9397;
}
.project-manage-datasource .data-completion .item label {
  line-height: 1.5;
  padding-left: 5px;
}
.project-manage-datasource .data-completion .item .latest-update {
  display: block;
  font-size: 10px;
  color: #848da2;
}
.project-manage-datasource .data-completion .item .percent-circle {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 20px;
  background-color: #848da2;
  font-size: 9px;
  text-align: center;
  line-height: 2.6;
  color: #fff;
  opacity: 0;
}
.project-manage-datasource .data-completion .item.completed {
  color: #40b365;
}
.project-manage-datasource .data-completion .item:hover {
  background-color: rgba(236, 236, 236, 0.6);
}
.project-manage-datasource .data-completion .item:active,
.project-manage-datasource .data-completion .item :focus {
  background-color: rgba(236, 236, 236, 0.8);
}
.project-manage-datasource .data-completion .item.active {
  background-color: rgba(236, 236, 236, 0.9);
}
.project-manage-datasource.popup .tree-list {
  min-height: 400px;
  max-height: 500px;
}
.project-manage-datasource.edit-qty-popup .reference-button {
  display: block;
  float: right;
}
.project-manage-datasource.edit-qty-popup .reference-button .prototype-unit-wrapper {
  display: inline-block;
  position: relative;
}
.project-manage-datasource.edit-qty-popup .reference-button .fa-arrow-up {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 35px;
  animation: blink 1s linear infinite;
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.project-manage-datasource.edit-qty-popup .background-overlay {
  display: none;
}
.project-manage-datasource.edit-qty-popup .choose-prototype-first .background-overlay {
  display: block;
}
.project-manage-datasource.edit-qty-popup .choose-prototype-first .choose-prototype-button {
  z-index: 2;
  background-color: #fff;
}
.project-manage-datasource.edit-qty-popup .choose-prototype-first .reference-button .fa-arrow-up {
  display: block;
  z-index: 2;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 59px;
  background-color: rgba(0, 0, 0, 0.32);
  z-index: 1;
}
.background-overlay .message-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200px, -100px);
  background-color: #fff;
  height: 200px;
  width: 400px;
  font-size: 16px;
  text-align: center;
  line-height: 12;
}

.is-unplanned-item {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  padding: 0 10px;
  top: -2px;
  width: auto;
  height: 15px;
  background-color: #f4be39;
  border-radius: 20px;
  font-size: 9px;
  line-height: 1.7;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.sub-menu-tab {
  display: block;
  margin-left: -15px;
  margin-right: -15px;
  border-bottom: 0.5px solid #cdcdcd;
  height: 40px;
}
.sub-menu-tab .inner-wrapper {
  padding-left: 15px;
  padding-right: 15px;
}
.sub-menu-tab ul {
  list-style-type: none;
  margin-bottom: 0;
}
.sub-menu-tab ul .tab {
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  transition: 0.3s;
}
.sub-menu-tab ul .tab a {
  display: block;
  padding: 10px 15px;
  color: #848da2;
}
.sub-menu-tab ul .tab.active::before {
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-color: #2e58c4;
}
.sub-menu-tab ul .tab.active a {
  color: #2e58c4;
}
.sub-menu-tab ul .tab:not(:first-child) {
  margin-left: -2px;
}
.sub-menu-tab ul .tab:hover {
  background-color: none;
}
.sub-menu-tab ul .tab:hover::before {
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px;
  background-color: #567ee3;
}
.sub-menu-tab ul .tab:hover a {
  color: #567ee3;
  text-decoration: none;
}

.tab-content-wrapper {
  position: relative;
}
.tab-content-wrapper .tab-content {
  width: 100%;
  height: auto;
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #ececec;
  border-radius: 5px;
  background-color: #fff;
}
.tab-content-wrapper .tab-content h4 {
  text-transform: uppercase;
}
.tab-content-wrapper .tab-content:first-child {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.tab-content-wrapper .tab-content .tab-title-container {
  display: flex;
  align-items: center;
  gap: 5px;
}
.tab-content-wrapper .tab-content .tab-title-container .full-screen-button {
  position: relative;
  top: -2px;
}
.tab-content-wrapper .tab-content.full-screen {
  margin-top: 0;
  height: 100vh;
}
.tab-content-wrapper .free-space {
  display: block;
  width: 100%;
  height: 400px;
}

.import-data .top .filter {
  flex: 0 0 85%;
  max-width: 85%;
  overflow: hidden;
  text-align: right;
}
.import-data .top .filter > div {
  display: inline-block;
}
.import-data .top .filter .project {
  width: 300px;
  height: 30px;
}
.import-data .top .filter .cost-center {
  width: 150px;
}
.import-data .top .filter .quick-search {
  width: 250px;
}
.import-data .search-result-wrapper {
  margin-top: 5px;
}
.import-data .search-result-wrapper .toolbar {
  padding: 15px 0 20px 0;
  height: 60px;
}
.import-data .search-result-wrapper .toolbar .count-result {
  display: block;
  float: left;
  position: relative;
  width: 200px;
  font-weight: 600;
  line-height: 2.3;
}
.import-data .search-result-wrapper .toolbar .sort-by {
  display: block;
  float: right;
  position: relative;
  width: 300px;
  font-weight: 500;
  text-align: right;
  text-transform: uppercase;
  color: #a7a7a7;
}
.import-data .search-result-wrapper .toolbar .sort-by i {
  margin-right: 10px;
}
.import-data .search-result-wrapper .toolbar .sort-by > .dx-selectbox {
  display: inline-block;
  margin-left: 20px;
}
.import-data .search-result-wrapper .toolbar .sort-by > .dx-selectbox input {
  font-weight: 700;
  color: #a7a7a7;
}
.import-data .history-datagrid-wrapper > .history-datagrid {
  max-height: 100vh;
}

.workflow-step {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  height: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  transition: 1s;
}
.workflow-step.hide {
  opacity: 0;
}
.workflow-step .inner-wrapper {
  display: inline-flex;
  position: relative;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  height: 130px;
  border-radius: 5px;
  padding-top: 80px;
}
.workflow-step .inner-wrapper h4 {
  position: absolute;
  top: 0;
  left: 0;
}
.workflow-step .step-item {
  flex: 1;
  position: relative;
  height: 30px;
  text-align: left;
  color: #2e58c4;
  text-align: center;
  font-weight: 600;
}
.workflow-step .step-item .icon {
  display: block;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 45px;
  font-size: 24px;
  font-weight: 700;
  border-radius: 50px;
  border: 3px solid #2e58c4;
  text-align: center;
  line-height: 1.7;
  z-index: 2;
  cursor: pointer;
}
.workflow-step .step-item .icon-checked {
  font-size: 24px;
  color: #fff;
}
.workflow-step .step-item .icon-times {
  font-size: 24px;
  color: #fff;
}
.workflow-step .step-item .name {
  width: 180px;
  font-size: 12px;
  text-align: center;
  margin: 0 auto;
}
.workflow-step .step-item::before {
  content: " ";
  display: inline-block;
  position: absolute;
  height: 3px;
  background-color: #2e58c4;
  width: calc(100% - 45px);
  left: calc(-50% + 22.5px);
  top: -28px;
}
.workflow-step .step-item.first::before {
  display: none;
}
.workflow-step .step-item.pass .icon {
  width: 50px;
  height: 50px;
  border: none;
  line-height: 1.7;
  font-size: 26px;
  background: #ec9397;
  background: linear-gradient(0deg, rgb(46, 88, 196) 0%, rgb(84, 115, 193) 100%);
  color: #fff;
}
.workflow-step .step-item.not-started {
  color: rgba(204, 204, 204, 0.8);
}
.workflow-step .step-item.not-started .icon {
  border-color: #ccc;
  background-color: #ccc;
  color: #fff;
  line-height: 1.7;
}
.workflow-step .step-item.not-started::before {
  background-color: #ccc;
}
.workflow-step .step-item.reject .icon {
  width: 45px;
  height: 45px;
  border: none;
  line-height: 1.7;
  font-size: 26px;
  background: #ec9397;
  background: linear-gradient(0deg, #df8e92 0%, #ec9397 100%);
  color: #ec9397;
}
.workflow-step .step-item.reject .name {
  color: #ec9397;
}
.workflow-step .step-item.is-background-process .icon {
  cursor: default;
}
.workflow-step .step-item.verify .icon > i {
  margin-left: -5px;
}
.workflow-step .step-item.approval .icon > i {
  margin-right: -5px;
}
.workflow-step.small .inner-wrapper {
  padding-top: 30px;
  height: 60px;
}
.workflow-step.small .step-item {
  height: 15px;
}
.workflow-step.small .step-item::before {
  width: calc(100% - 28px);
  left: calc(-50% + 16.5px);
  top: -23px;
}
.workflow-step.small .step-item .icon {
  top: -40px;
  width: 35px;
  height: 35px;
  font-size: 17px;
}
.workflow-step.small .step-item .icon-checked {
  font-size: 17px;
  color: #fff;
}
.workflow-step.small .step-item.pass .icon, .workflow-step.small .step-item.not-started .icon {
  line-height: 35px;
  border: none;
}

.upload-data .content-wrapper .top > .page-title {
  flex: 0 0 50%;
  max-width: 50%;
}
.upload-data .content-wrapper > .inner-wrapper {
  min-height: calc(100vh - 140px);
}
.upload-data .upload-file-wrapper {
  display: block;
  padding-top: 15px;
  width: 80%;
  margin: 0 auto;
}
.upload-data .upload-file-wrapper .column {
  flex: 1;
  height: 300px;
  padding: 15px;
  border: 1px solid #ececec;
}
.upload-data .upload-file-wrapper .select-type {
  margin-right: -15px;
}
.upload-data .upload-file-wrapper .select-type .model,
.upload-data .upload-file-wrapper .select-type .project {
  width: 200px;
  margin-top: 15px;
}
.upload-data .select-import-wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}
.upload-data .select-import-wrapper .selection-wrapper {
  flex: 0 0 75%;
  max-width: 75%;
}
.upload-data .select-import-wrapper .selected-state-wrapper {
  flex: 0 0 25%;
  max-width: 25%;
  padding-left: 15px;
  text-align: center;
}
.upload-data .select-import-wrapper .selected-state-wrapper .inner-wrapper {
  padding: 5px 15px;
  border: 1px solid #2e58c4;
  border-radius: 5px;
  background-color: #fff;
  color: #2e58c4;
  height: auto;
  min-height: 100px;
}
.upload-data .select-import-wrapper .selected-state-wrapper h4 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
}
.upload-data .select-import-wrapper .selected-state-wrapper .selected-state {
  position: relative;
  padding: 5px 15px;
  margin-bottom: 15px;
  font-weight: 500;
  text-align: left;
  color: #848da2;
}
.upload-data .select-import-wrapper .selected-state-wrapper .selected-state .step-number,
.upload-data .select-import-wrapper .selected-state-wrapper .selected-state .step-checked {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 25px;
  height: 25px;
  border: 1px solid #2e58c4;
  border-radius: 25px;
  background-color: #fff;
  text-align: center;
  line-height: 1.7;
  font-weight: 700;
  color: #2e58c4;
}
.upload-data .select-import-wrapper .selected-state-wrapper .selected-state .not-selected,
.upload-data .select-import-wrapper .selected-state-wrapper .selected-state .selected {
  padding-left: 30px;
  color: #2e58c4;
}
.upload-data .select-import-wrapper .selected-state-wrapper .selected-state .not-selected {
  font-style: italic;
  line-height: 1;
}
.upload-data .select-import-wrapper .selected-state-wrapper .selected-state .selected {
  font-weight: 400;
}
.upload-data .select-import-wrapper .selected-state-wrapper .selected-state .selected > span {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
}
.upload-data .select-import-wrapper .selected-state-wrapper .selected-state .model-list {
  display: none;
}
.upload-data .select-import-wrapper .selected-state-wrapper #downloadTemplateButton {
  margin-top: 15px;
  display: block;
  float: right;
}
.upload-data .button-right {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}
.upload-data .select-type h2,
.upload-data .select-project h2,
.upload-data .select-model h2 {
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: 500;
}
.upload-data .select-type .import-type-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.upload-data .select-type .import-type-outer {
  flex: 0 0 100%;
  margin-bottom: 15px;
  padding-right: 15px;
}
.upload-data .select-type .import-type-outer .import-type-inner {
  display: flex;
  position: relative;
  width: 100%;
  height: 80px;
  border: 1px solid #ececec;
  border-radius: 5px;
  background-color: rgba(236, 236, 236, 0.2);
  color: #848da2;
  cursor: pointer;
  transition: 0.3s;
}
.upload-data .select-type .import-type-outer .import-type-inner * {
  cursor: pointer;
}
.upload-data .select-type .import-type-outer .import-type-inner .icon-checked {
  font-size: 20px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #2e58c4;
  transition: 0.3s;
}
.upload-data .select-type .import-type-outer .import-type-inner .icon-type {
  flex: 0 0 100px;
  height: 55px;
  font-size: 40px;
  text-align: center;
  padding-top: 6px;
}
.upload-data .select-type .import-type-outer .import-type-inner .description {
  padding: 15px 15px 15px 0;
  text-align: left;
}
.upload-data .select-type .import-type-outer .import-type-inner .description .title {
  font-size: 16px;
  font-weight: 500;
}
.upload-data .select-type .import-type-outer .import-type-inner .description .text {
  font-size: 12px;
  font-style: italic;
}
.upload-data .select-type .import-type-outer .import-type-inner:hover {
  border-color: #567ee3;
  background-color: rgba(86, 126, 227, 0.1);
  color: #567ee3;
}
.upload-data .select-type .import-type-outer .import-type-inner.is-checked {
  border-color: #2e58c4;
  background-color: rgba(46, 88, 196, 0.1);
  color: #2e58c4;
}
.upload-data .select-type .import-type-outer.disabled .import-type-inner {
  opacity: 0.4;
  cursor: not-allowed;
}
.upload-data .select-type .import-type-outer.disabled .import-type-inner * {
  cursor: not-allowed;
}
.upload-data .select-type .import-type-outer.disabled .import-type-inner:hover {
  border: 1px solid #ececec;
  background-color: rgba(236, 236, 236, 0.2);
  color: #848da2;
}
.upload-data .select-project .filter {
  margin-bottom: 15px;
  justify-content: flex-end;
  display: flex;
}
.upload-data .select-project .project-tree-list {
  height: calc(100vh - 290px);
}
.upload-data .icon-completed {
  color: #40b365;
  margin-left: 5px;
}
.upload-data .icon-ignored {
  color: #b5b5b5;
  margin-left: 5px;
}
.upload-data.upload-file .content-wrapper > .inner-wrapper {
  background-color: transparent;
  padding: 0;
}
.upload-data.upload-file .sub-menu-tab {
  background-color: #fff;
  height: 40px;
  margin-left: 0;
  margin-right: 0;
}
.upload-data.upload-file .sub-menu-tab .inner-wrapper {
  position: relative;
}
.upload-data.upload-file .sub-menu-tab .inner-wrapper .import-type {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  white-space: nowrap;
  width: auto;
  font-weight: 600;
  padding-right: 15px;
}
.upload-data.upload-file .inner-wrapper .top {
  display: flex;
  background-color: #fff;
  padding: 15px 15px 0 15px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}
.upload-data.upload-file .inner-wrapper .top .left {
  flex: 0 0 45%;
  max-width: 45%;
}
.upload-data.upload-file .inner-wrapper .top .left h2 {
  font-size: 26px;
}
.upload-data.upload-file .inner-wrapper .top .left > * {
  display: block;
  width: 100%;
}
.upload-data.upload-file .inner-wrapper .top .left .count-importing-items {
  font-weight: 500;
  line-height: 2;
  color: #03a9f4;
}
.upload-data.upload-file .inner-wrapper .top .right {
  flex: 0 0 55%;
  max-width: 55%;
  text-align: right;
}
.upload-data.upload-file .split-view {
  display: flex;
  flex-wrap: nowrap;
}
.upload-data.upload-file .split-view .left {
  flex: 0 0 75%;
  max-width: 75%;
}
.upload-data.upload-file .split-view .selected-state-wrapper {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 15px 15px 0 15px;
  text-align: center;
}
.upload-data.upload-file .split-view .selected-state-wrapper .inner-wrapper {
  padding: 5px 10px;
  border: 1px solid #2e58c4;
  border-radius: 5px;
  background-color: #fff;
  color: #2e58c4;
  height: auto;
  min-height: 100px;
}
.upload-data.upload-file .split-view .selected-state-wrapper h4 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
}
.upload-data.upload-file .split-view .selected-state-wrapper .selected-state {
  position: relative;
  padding: 5px 15px;
  margin-bottom: 15px;
  font-weight: 500;
  color: #848da2;
  text-align: left;
}
.upload-data.upload-file .split-view .selected-state-wrapper .selected-state .step-number,
.upload-data.upload-file .split-view .selected-state-wrapper .selected-state .step-checked {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  width: 25px;
  height: 25px;
  border: 1px solid #2e58c4;
  border-radius: 25px;
  background-color: #fff;
  text-align: center;
  line-height: 1.7;
  font-weight: 700;
  color: #2e58c4;
}
.upload-data.upload-file .split-view .selected-state-wrapper .selected-state .not-selected,
.upload-data.upload-file .split-view .selected-state-wrapper .selected-state .selected {
  padding-left: 30px;
  color: #2e58c4;
}
.upload-data.upload-file .split-view .selected-state-wrapper .selected-state .not-selected {
  font-style: italic;
  line-height: 1;
}
.upload-data.upload-file .split-view .selected-state-wrapper .selected-state .selected {
  font-weight: 400;
}
.upload-data.upload-file .split-view .selected-state-wrapper .selected-state .selected > span {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
}
.upload-data.upload-file .split-view .selected-state-wrapper .selected-state .model-list {
  display: none;
}
.upload-data.upload-file .panel-info .row-1,
.upload-data.upload-file .panel-info .row-2 {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}
.upload-data.upload-file .panel-info .info,
.upload-data.upload-file .panel-info .remark {
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 15px;
  color: #848da2;
}
.upload-data.upload-file .panel-info .info .label,
.upload-data.upload-file .panel-info .remark .label {
  font-size: 12px;
  font-weight: 400;
}
.upload-data.upload-file .panel-info .info {
  width: 33.33%;
  padding-right: 15px;
}
.upload-data.upload-file .panel-info .info.vendor {
  width: 50%;
}
.upload-data.upload-file .drop-file {
  margin-top: 10px;
  background-color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transform: all 0.3s;
}
.upload-data.upload-file .drop-file .drop-area.import-excel {
  height: 400px;
}
.upload-data.upload-file .drop-file.hide {
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
  height: 0;
  overflow: hidden;
}
.upload-data.upload-file .button-right {
  left: unset;
  border-bottom: none;
}
.upload-data.upload-file .workflow-step {
  margin-top: 0;
  margin-bottom: 0;
}
.upload-data.upload-file .workflow-step .inner-wrapper {
  border: none;
}
.upload-data.upload-file h4 {
  display: inline-block;
}
.upload-data.upload-file #downloadTemplateButton {
  margin-top: -3px;
  display: block;
  float: right;
}
.upload-data.popup-search-material .filter {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 15px;
}
.upload-data.popup-search-material .filter > div {
  flex: 1;
}
.upload-data.popup-search-material .filter .mat-group,
.upload-data.popup-search-material .filter .vendor {
  padding-right: 10px;
}
.upload-data.popup-search-material #materialDataGrid {
  height: 400px;
}
.upload-data.update-material-info .importing-datagrid-wrapper {
  padding-top: 10px;
}

.importing-datagrid-wrapper {
  position: relative;
  width: 100%;
  background-color: #fff;
  transform: all 0.3s;
}
.importing-datagrid-wrapper.hide {
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
  height: 0;
  overflow: hidden;
}
.importing-datagrid-wrapper .source-file-wrapper {
  display: inline-block;
  padding-bottom: 10px;
}
.importing-datagrid-wrapper .source-file-wrapper span {
  display: inline-block;
  padding-right: 10px;
  font-weight: 500;
}
.importing-datagrid-wrapper .source-file-wrapper .source-file-name {
  padding-right: 10px;
  color: #848da2;
}
.importing-datagrid-wrapper .source-file-wrapper .delete-file {
  text-decoration: underline;
}
.importing-datagrid-wrapper .seperate {
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  color: #848da2;
}

.swal-lg.alert-submit-quotation h2 {
  text-align: left;
  padding-left: 50px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.swal-lg.alert-submit-quotation h2 label {
  display: block;
  font-weight: 600;
  margin-left: -20px;
}
.swal-lg.alert-submit-quotation h2 ul {
  display: inline-block;
}

.validate-import-summary {
  display: inline-block;
}
.validate-import-summary > span {
  display: inline-block;
  padding-right: 10px;
  font-weight: 500;
}
.validate-import-summary .success,
.validate-import-summary .fail,
.validate-import-summary .warning {
  display: inline-block;
  font-weight: 500;
  color: #848da2;
}
.validate-import-summary .success > span {
  padding-right: 15px;
  font-weight: 700;
  color: #40b365;
}
.validate-import-summary .fail > span {
  font-weight: 700;
  padding-right: 15px;
  color: #ec9397;
}
.validate-import-summary .warning > span {
  font-weight: 700;
  padding-right: 15px;
  color: #f4be39;
}

.importing-datagrid .edit-mat-sansiri-wrapper,
.imported-datagrid .edit-mat-sansiri-wrapper,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper {
  position: relative;
}
.importing-datagrid .edit-mat-sansiri-wrapper .icon-search,
.importing-datagrid .edit-mat-sansiri-wrapper .icon-edit,
.importing-datagrid .edit-mat-sansiri-wrapper .icon-delete,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-search,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-edit,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-delete,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-search,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-edit,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-delete {
  position: absolute;
  background-color: transparent;
}
.importing-datagrid .edit-mat-sansiri-wrapper .icon-search .dx-icon,
.importing-datagrid .edit-mat-sansiri-wrapper .icon-edit .dx-icon,
.importing-datagrid .edit-mat-sansiri-wrapper .icon-delete .dx-icon,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-search .dx-icon,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-edit .dx-icon,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-delete .dx-icon,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-search .dx-icon,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-edit .dx-icon,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-delete .dx-icon {
  color: #848da2;
  font-size: 10px;
}
.importing-datagrid .edit-mat-sansiri-wrapper .icon-search,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-search,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-search {
  right: 0;
  top: 0;
}
.importing-datagrid .edit-mat-sansiri-wrapper .icon-edit,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-edit,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-edit {
  right: 8px;
  top: -5px;
}
.importing-datagrid .edit-mat-sansiri-wrapper .icon-edit .dx-icon,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-edit .dx-icon,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-edit .dx-icon {
  color: #2e58c4;
}
.importing-datagrid .edit-mat-sansiri-wrapper .icon-delete,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-delete,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-delete {
  right: -8px;
  top: -5px;
}
.importing-datagrid .edit-mat-sansiri-wrapper .icon-delete .dx-icon,
.imported-datagrid .edit-mat-sansiri-wrapper .icon-delete .dx-icon,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .icon-delete .dx-icon {
  color: #ec9397;
  font-size: 13px;
}
.importing-datagrid .edit-mat-sansiri-wrapper .cancel-edit,
.imported-datagrid .edit-mat-sansiri-wrapper .cancel-edit,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .cancel-edit {
  height: auto;
  float: right;
}
.importing-datagrid .edit-mat-sansiri-wrapper .cancel-edit .dx-button-content,
.imported-datagrid .edit-mat-sansiri-wrapper .cancel-edit .dx-button-content,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .cancel-edit .dx-button-content {
  padding: 5px 0;
  text-align: right;
  color: #2e58c4;
}
.importing-datagrid .edit-mat-sansiri-wrapper .cancel-edit .dx-button-content .dx-button-text,
.imported-datagrid .edit-mat-sansiri-wrapper .cancel-edit .dx-button-content .dx-button-text,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .cancel-edit .dx-button-content .dx-button-text {
  line-height: 1;
}
.importing-datagrid .edit-mat-sansiri-wrapper .cancel-edit:hover .dx-button-text,
.imported-datagrid .edit-mat-sansiri-wrapper .cancel-edit:hover .dx-button-text,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .cancel-edit:hover .dx-button-text {
  text-decoration: underline;
}
.importing-datagrid .edit-mat-sansiri-wrapper .cancel-edit.dx-button.dx-state-hover,
.imported-datagrid .edit-mat-sansiri-wrapper .cancel-edit.dx-button.dx-state-hover,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .cancel-edit.dx-button.dx-state-hover {
  background-color: transparent;
}
.importing-datagrid .edit-mat-sansiri-wrapper .cancel-edit.dx-button.dx-state-hover .dx-button-text,
.imported-datagrid .edit-mat-sansiri-wrapper .cancel-edit.dx-button.dx-state-hover .dx-button-text,
#boqPurchaseTreeList .edit-mat-sansiri-wrapper .cancel-edit.dx-button.dx-state-hover .dx-button-text {
  text-decoration: underline;
}

#boqPurchaseTreeList .replace-item-button .dx-button-content .dx-button-text {
  text-transform: none;
}
#boqPurchaseTreeList .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-command-select {
  vertical-align: top;
  padding-top: 10px;
}

.importing-datagrid,
.imported-datagrid {
  width: 100%;
}
.importing-datagrid .validation-status,
.imported-datagrid .validation-status {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.importing-datagrid .validation-status .is-error,
.imported-datagrid .validation-status .is-error {
  cursor: pointer;
  color: #ec9397;
}
.importing-datagrid .validation-status .is-valid,
.imported-datagrid .validation-status .is-valid {
  color: #40b365;
}
.importing-datagrid .validation-status .is-valid-with-warning,
.imported-datagrid .validation-status .is-valid-with-warning {
  color: #f4be39;
}
.importing-datagrid .validation-status .is-warning-material,
.imported-datagrid .validation-status .is-warning-material {
  cursor: pointer;
  color: #f4be39;
}
.importing-datagrid .suggestion-message,
.imported-datagrid .suggestion-message {
  font-size: 20px;
}
.importing-datagrid .suggestion-message .is-warning-material,
.imported-datagrid .suggestion-message .is-warning-material {
  color: #f4be39;
}
.importing-datagrid .dx-data-row .validation-import-error,
.imported-datagrid .dx-data-row .validation-import-error {
  color: #ec9397;
  padding-left: 15px;
}
.importing-datagrid .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td,
.imported-datagrid .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td {
  vertical-align: top;
}

.imported-datagrid .validation-status {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  text-align: center;
}

.popover-validate-import-error ul {
  padding-left: 15px;
}
.popover-validate-import-error ul li {
  color: #ec9397;
}

.popover-validate-import-warning ul {
  padding-left: 15px;
}

.approval .button-right,
.upload-file .button-right {
  position: absolute;
  top: 0;
  right: 15px;
  z-index: 1;
}

.approval .attachment,
.pr .attachment,
.update-material-info .attachment {
  width: 100%;
}
.approval .attachment .item,
.pr .attachment .item,
.update-material-info .attachment .item {
  display: block;
  margin-bottom: 5px;
}
.approval .attachment .item a,
.pr .attachment .item a,
.update-material-info .attachment .item a {
  display: inline-block;
  width: auto;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #848da2;
  font-size: 600;
  color: #848da2;
}
.approval .attachment .item a i,
.pr .attachment .item a i,
.update-material-info .attachment .item a i {
  margin-right: 5px;
}

.update-material-info .attachment .item {
  display: inline-block;
  margin-right: 5px;
}

.approval .page-title {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}
.approval .content-wrapper > .inner-wrapper {
  background-color: transparent;
  padding: 0;
}
.approval .inner-wrapper .top {
  display: flex;
  background-color: #fff;
  padding: 15px 15px 0 15px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}
.approval .inner-wrapper .top .left {
  flex: 0 0 45%;
  max-width: 45%;
}
.approval .inner-wrapper .top .left h2 {
  font-size: 26px;
}
.approval .inner-wrapper .top .left > * {
  display: inline-block;
}
.approval .inner-wrapper .top .left .count-importing-items {
  font-weight: 500;
  line-height: 2;
  color: #03a9f4;
}
.approval .inner-wrapper .top .right {
  flex: 0 0 55%;
  max-width: 55%;
  text-align: right;
}
.approval .imported-items .title {
  width: 100%;
}
.approval .imported-items .title .label {
  padding-right: 10px;
}
.approval .imported-items .title .source-file {
  float: right;
}
.approval h4 {
  text-transform: uppercase;
  display: inline-block;
  padding-right: 15px;
}
.approval .panel-info .row-1,
.approval .panel-info .row-2 {
  display: flex;
  flex-wrap: nowrap;
  width: 60%;
}
.approval .panel-info .info,
.approval .panel-info .remark {
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 15px;
  color: #848da2;
}
.approval .panel-info .info .label,
.approval .panel-info .remark .label {
  display: block;
  font-size: 12px;
  font-weight: 400;
}
.approval .panel-info .info {
  width: 33.33%;
}
.approval .icon-completed {
  color: #40b365;
  margin-left: 5px;
}
.approval .icon-ignored {
  color: #b5b5b5;
  margin-left: 5px;
}

.approval .sub-menu-tab,
.upload-file .sub-menu-tab {
  background-color: #fff;
  height: 40px;
  margin-left: 0;
  margin-right: 0;
}
.approval .sub-menu-tab .inner-wrapper,
.upload-file .sub-menu-tab .inner-wrapper {
  position: relative;
}
.approval .sub-menu-tab .inner-wrapper .import-type,
.upload-file .sub-menu-tab .inner-wrapper .import-type {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  white-space: nowrap;
  width: auto;
  font-weight: 600;
  padding-right: 15px;
}

.review-and-comment.hide {
  opacity: 0;
}
.review-and-comment .inner-wrapper {
  height: auto;
}
.review-and-comment .review-step {
  display: flex;
  flex-wrap: nowrap;
  padding: 15px;
  white-space: nowrap;
  min-height: 120px;
}
.review-and-comment .review-step:not(:last-child) {
  border-bottom: 1px solid rgba(204, 204, 204, 0.3490196078);
}
.review-and-comment .review-step .profile-photo-wrapper {
  flex: 0 0 100px;
  max-width: 100px;
  overflow: visible;
  text-align: center;
}
.review-and-comment .review-step .profile-photo-wrapper .profile-photo {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.review-and-comment .review-step .profile-photo-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 60px;
}
.review-and-comment .review-step .profile-photo-wrapper .user-role {
  font-weight: 500;
  display: block;
  width: 100%;
  line-height: 2;
  text-align: center;
  color: #252525;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.review-and-comment .review-step .description {
  flex: 0 0 90%;
  max-width: calc(100% - 60px);
  position: relative;
  padding-left: 30px;
  padding-bottom: 30px;
}
.review-and-comment .review-step .description .action-user {
  font-size: 14px;
  font-weight: 700;
  color: #2e58c4;
}
.review-and-comment .review-step .description .action-user .action-status {
  display: inline-block;
}
.review-and-comment .review-step .description .action-date {
  position: absolute;
  bottom: -10px;
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
  color: rgba(132, 141, 162, 0.5);
}
.review-and-comment .review-step .description .comment {
  padding-bottom: 15px;
  white-space: normal;
}

.popup-confirm .drop-file {
  margin-top: 15px;
}
.popup-confirm .label {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  padding-bottom: 15px;
  color: #848da2;
}

.approval-popup .custom-popup-title-wrapper {
  margin-bottom: 0;
}
.approval-popup .require-more-info {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.approval-popup .popup-content-wrapper .inner-wrapper .approval-area {
  padding-right: 15px;
}
.approval-popup .popup-content-wrapper .inner-wrapper .require-more-info-area {
  display: none;
}
.approval-popup .popup-content-wrapper .inner-wrapper.show-require-more-info {
  display: flex;
  flex-wrap: nowrap;
}
.approval-popup .popup-content-wrapper .inner-wrapper.show-require-more-info .approval-area,
.approval-popup .popup-content-wrapper .inner-wrapper.show-require-more-info .require-more-info-area {
  flex: 0 0 50%;
  max-width: 50%;
}
.approval-popup .popup-content-wrapper .inner-wrapper.show-require-more-info .require-more-info-area {
  display: block;
  padding-left: 15px;
}
.approval-popup .popup-content-wrapper .button-wrapper {
  background-color: #fff;
}

.popup-action-user .action-user {
  padding-bottom: 15px;
}
.popup-action-user .inner-wrapper {
  padding: 15px;
  border: 1px solid #ececec;
  border-radius: 5px;
  background-color: rgba(236, 236, 236, 0.2);
  height: 225px;
}
.popup-action-user .inner-wrapper .role-name,
.popup-action-user .inner-wrapper .fullname {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.popup-action-user .inner-wrapper .profile-photo {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
}
.popup-action-user .inner-wrapper .profile-photo img {
  height: 100%;
  border-radius: 80px;
}
.popup-action-user .inner-wrapper .is-completed {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 30px;
  color: #40b365;
}

.no-workflow-text {
  line-height: 4;
  color: #848da2;
}

#estQtyEditTreeList {
  max-height: 800px;
  height: calc(100vh - 200px);
}
#estQtyEditTreeList td#dx-col-32,
#estQtyEditTreeList td#dx-col-34 {
  border-right: 0px;
}
#estQtyEditTreeList td#dx-col-32:hover,
#estQtyEditTreeList td#dx-col-34:hover {
  background-color: #ececec;
}
#estQtyEditTreeList td#dx-col-32 .dx-treelist-text-content,
#estQtyEditTreeList td#dx-col-34 .dx-treelist-text-content {
  margin-left: 35px;
  position: absolute;
}
#estQtyEditTreeList td#dx-col-33:hover,
#estQtyEditTreeList td#dx-col-35:hover {
  background-color: #ececec;
}

#estQtyEditTreeList .reference-info,
#estQtyViewTreeList .reference-info,
#modelTreeList .reference-info {
  position: relative;
  font-size: 10px;
}
#estQtyEditTreeList .reference-info .item,
#estQtyViewTreeList .reference-info .item,
#modelTreeList .reference-info .item {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
  white-space: nowrap;
}
#estQtyEditTreeList .reference-info .item span,
#estQtyViewTreeList .reference-info .item span,
#modelTreeList .reference-info .item span {
  padding-right: 5px;
}
#estQtyEditTreeList .choose-reference,
#estQtyViewTreeList .choose-reference,
#modelTreeList .choose-reference {
  position: relative;
  top: -2px;
  margin-left: 10px;
}

#estQtyViewTreeList .reference-info {
  width: 100%;
  margin-top: 20px;
  padding-left: 5px;
}
#estQtyViewTreeList .assign-prototype-unit {
  position: absolute;
  right: 3px;
  top: 4px;
}

.master-data-accordion .master-data-panel .dx-accordion-item-title {
  height: 60px;
}
.master-data-accordion .master-data-panel .dx-accordion-item-title .top {
  padding-left: 20px;
}
.master-data-accordion .master-data-panel .dx-accordion-item-title .top div.page-title {
  flex: 0%;
  max-width: unset;
}
.master-data-accordion .master-data-panel .dx-accordion-item-title .top span.page-title {
  font-size: 16px;
}
.master-data-accordion .master-data-panel .dx-accordion-item-title:before {
  top: 20px;
  left: 10px;
  right: 0px;
}
.master-data-accordion .master-data-panel .dx-accordion-item-body {
  padding-left: 16px;
  padding-top: 20px;
}
.master-data-accordion .master-data-panel .accordion-sp-item {
  padding-left: 35px;
}
.master-data-accordion .master-data-panel .accordion-sp-item .po-groups {
  padding-right: 15px;
}
.master-data-accordion .master-data-panel .accordion-item .top-info {
  display: inline-block;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  color: #848da2;
}
.master-data-accordion .master-data-panel .accordion-item .top-button {
  display: block;
  margin-top: -20px;
  text-align: right;
}
.master-data-accordion .master-data-panel .accordion-item .top-button > div {
  display: inline-block;
  padding: 0 0 15px 5px;
}
.master-data-accordion .master-data-panel .accordion-item .master-data-grid {
  max-width: unset !important;
}
.master-data-accordion .master-data-panel .accordion-item .master-data-grid td.allowed-editing.dx-datagrid-validator.dx-focused:not(.dx-datagrid-invalid) {
  border-bottom: #35baf6 2px solid;
}
.master-data-accordion .master-data-panel .accordion-item .master-data-grid td.allowed-editing.dx-datagrid-validator.dx-datagrid-invalid {
  border-bottom: red 2px solid;
}

.project-setting-popup .confirm-header {
  position: absolute;
  top: 15px;
  right: 15px;
  text-align: right;
}
.project-setting-popup .confirm-header > span {
  display: block;
}
.project-setting-popup .confirm-header a {
  text-decoration: underline;
  display: block;
}
.project-setting-popup .button-wrapper {
  position: absolute;
  bottom: 15px;
}

.project-setting-workflow-step {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  height: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  transition: 1s;
}
.project-setting-workflow-step.hide {
  opacity: 0;
}
.project-setting-workflow-step .inner-wrapper {
  display: inline-flex;
  position: relative;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  height: 130px;
  border-radius: 5px;
  padding-top: 80px;
}
.project-setting-workflow-step .inner-wrapper h4 {
  position: absolute;
  top: 0;
  left: 0;
}
.project-setting-workflow-step .step-item {
  flex: 0 0 20%;
  max-width: 60%;
  min-width: 200px;
  position: relative;
  height: 30px;
  text-align: left;
  color: #2e58c4;
  text-align: center;
  font-weight: 600;
}
.project-setting-workflow-step .step-item .icon {
  display: block;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 45px;
  height: 45px;
  font-size: 24px;
  font-weight: 700;
  border-radius: 50px;
  border: 3px solid #2e58c4;
  text-align: center;
  line-height: 1.5;
  z-index: 2;
}
.project-setting-workflow-step .step-item .icon-checked {
  font-size: 24px;
  color: #fff;
}
.project-setting-workflow-step .step-item .name {
  width: 100px;
  text-align: center;
  margin: 0 auto;
}
.project-setting-workflow-step .step-item::before {
  content: " ";
  display: inline-block;
  position: absolute;
  height: 3px;
  background-color: #2e58c4;
  width: calc(100% - 42px);
  left: calc(-50% + 22.5px);
  top: -28px;
}
.project-setting-workflow-step .step-item.first::before {
  display: none;
}
.project-setting-workflow-step .step-item.pass .icon {
  width: 45px;
  height: 45px;
  border: none;
  line-height: 1.7;
  font-size: 26px;
  background: #2e58c4;
  background: linear-gradient(0deg, #2e58c4 0%, #5473c1 100%);
}
.project-setting-workflow-step .step-item.not-started {
  color: rgba(204, 204, 204, 0.8);
}
.project-setting-workflow-step .step-item.not-started .icon {
  border: none;
  background-color: #ccc;
  color: #fff;
  line-height: 1.7;
}
.project-setting-workflow-step .step-item.not-started::before {
  background-color: #ccc;
}
.project-setting-workflow-step .step-item.verify .icon > i {
  margin-left: -5px;
}
.project-setting-workflow-step .step-item.approval .icon > i {
  margin-right: -5px;
}

.sub-menu-tab-popup {
  display: block;
  margin-left: -15px;
  margin-right: -15px;
  border-bottom: 0.5px solid #cdcdcd;
  height: 37px;
}
.sub-menu-tab-popup .inner-wrapper {
  padding-left: 15px;
  padding-right: 15px;
}
.sub-menu-tab-popup ul {
  list-style-type: none;
  margin-bottom: 0;
}
.sub-menu-tab-popup ul .tab {
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  background-color: #fff;
  transition: 0.3s;
}
.sub-menu-tab-popup ul .tab a {
  display: block;
  position: relative;
  padding: 10px 15px;
  margin-bottom: -2px;
  color: #848da2;
}
.sub-menu-tab-popup ul .tab.active a {
  color: #2e58c4;
}
.sub-menu-tab-popup ul .tab.active a::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background-color: #2e58c4;
}
.sub-menu-tab-popup ul .tab:not(:first-child) {
  margin-left: -4px;
}
.sub-menu-tab-popup ul .tab:hover {
  background-color: none;
}
.sub-menu-tab-popup ul .tab:hover a {
  color: #567ee3;
  text-decoration: none;
}
.sub-menu-tab-popup ul .tab:hover a::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background-color: #567ee3;
  transition: 0.3s;
}

.assign-multi-value-popup .check-item {
  display: block;
}
.assign-multi-value-popup .checkbox-wrapper,
.assign-multi-value-popup .selectbox-wrapper {
  display: inline-block;
}
.assign-multi-value-popup .checkbox-wrapper {
  width: 150px;
}
.assign-multi-value-popup .io {
  padding: 0 15px 15px 15px;
}
.assign-multi-value-popup .io .inner-wrapper {
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid #ececec;
}
.assign-multi-value-popup .io .inner-wrapper > div {
  padding-top: 15px;
}
.assign-multi-value-popup .io .inner-wrapper .io-list-view {
  border-left: 1px solid #ececec;
}
.assign-multi-value-popup .selectbox-wrapper {
  width: calc(100% - 160px);
}
.assign-multi-value-popup .selectbox-wrapper .dx-switch-wrapper {
  top: -5px;
}

.autopr .icon-completed,
.autopo .icon-completed,
.pr .icon-completed,
.po .icon-completed {
  color: #40b365;
  margin-left: 5px;
}
.autopr .icon-ready,
.autopo .icon-ready,
.pr .icon-ready,
.po .icon-ready {
  color: #2e58c4;
  margin-left: 5px;
}
.autopr .form-wrapper > div,
.autopo .form-wrapper > div,
.pr .form-wrapper > div,
.po .form-wrapper > div {
  margin-bottom: 15px;
}
.autopr .form-wrapper .label,
.autopo .form-wrapper .label,
.pr .form-wrapper .label,
.po .form-wrapper .label {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 5px;
  color: #848da2;
}
.autopr .form-wrapper .label .unit,
.autopo .form-wrapper .label .unit,
.pr .form-wrapper .label .unit,
.po .form-wrapper .label .unit {
  display: block;
  float: right;
  font-size: 11px;
  font-weight: 500;
}
.autopr .form-wrapper .data,
.autopo .form-wrapper .data,
.pr .form-wrapper .data,
.po .form-wrapper .data {
  display: block;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  color: #2e58c4;
}
.autopr .form-wrapper .field,
.autopo .form-wrapper .field,
.pr .form-wrapper .field,
.po .form-wrapper .field {
  padding-bottom: 15px;
}
.autopr .form-wrapper .field .inline-control,
.autopo .form-wrapper .field .inline-control,
.pr .form-wrapper .field .inline-control,
.po .form-wrapper .field .inline-control {
  display: flex;
}
.autopr .form-wrapper .field .inline-control .code,
.autopo .form-wrapper .field .inline-control .code,
.pr .form-wrapper .field .inline-control .code,
.po .form-wrapper .field .inline-control .code {
  padding-right: 10px;
}
.autopr .form-wrapper.form-detail,
.autopo .form-wrapper.form-detail,
.pr .form-wrapper.form-detail,
.po .form-wrapper.form-detail {
  display: flex;
  flex-wrap: nowrap;
}
.autopr .form-wrapper.form-detail .col,
.autopo .form-wrapper.form-detail .col,
.pr .form-wrapper.form-detail .col,
.po .form-wrapper.form-detail .col {
  flex: 0 0 50%;
  max-width: 50%;
  padding-left: 7.5px;
}
.autopr .form-wrapper.form-detail .col.merge-col,
.autopo .form-wrapper.form-detail .col.merge-col,
.pr .form-wrapper.form-detail .col.merge-col,
.po .form-wrapper.form-detail .col.merge-col {
  flex: 0 0 100%;
  max-width: 100%;
}
.autopr .form-wrapper.form-detail h4,
.autopo .form-wrapper.form-detail h4,
.pr .form-wrapper.form-detail h4,
.po .form-wrapper.form-detail h4 {
  text-transform: uppercase;
}
.autopr .form-wrapper.form-detail h4 .unit,
.autopo .form-wrapper.form-detail h4 .unit,
.pr .form-wrapper.form-detail h4 .unit,
.po .form-wrapper.form-detail h4 .unit {
  display: block;
  float: right;
  font-size: 11px;
  font-weight: 500;
}
.autopr .form-wrapper.form-detail .field.switch,
.autopo .form-wrapper.form-detail .field.switch,
.pr .form-wrapper.form-detail .field.switch,
.po .form-wrapper.form-detail .field.switch {
  position: relative;
  top: 15px;
}
.autopr .form-wrapper.form-detail .field.switch .label,
.autopo .form-wrapper.form-detail .field.switch .label,
.pr .form-wrapper.form-detail .field.switch .label,
.po .form-wrapper.form-detail .field.switch .label {
  display: inline-block;
  position: relative;
  top: -7px;
  width: 45px;
}
.autopr .form-wrapper.form-detail .field.switch .percentage,
.autopo .form-wrapper.form-detail .field.switch .percentage,
.pr .form-wrapper.form-detail .field.switch .percentage,
.po .form-wrapper.form-detail .field.switch .percentage {
  position: absolute;
  margin-left: 15px;
  height: 24px;
  top: -5px;
}
.autopr .form-wrapper.form-detail .field.switch .percentage::after,
.autopo .form-wrapper.form-detail .field.switch .percentage::after,
.pr .form-wrapper.form-detail .field.switch .percentage::after,
.po .form-wrapper.form-detail .field.switch .percentage::after {
  content: "%";
  position: absolute;
  top: 5px;
  right: -17px;
  color: #848da2;
}
.autopr .form-wrapper.form-detail .field.switch .percentage.po-auto,
.autopo .form-wrapper.form-detail .field.switch .percentage.po-auto,
.pr .form-wrapper.form-detail .field.switch .percentage.po-auto,
.po .form-wrapper.form-detail .field.switch .percentage.po-auto {
  top: 44px;
}
.autopr .form-wrapper.form-detail .field-group,
.autopo .form-wrapper.form-detail .field-group,
.pr .form-wrapper.form-detail .field-group,
.po .form-wrapper.form-detail .field-group {
  padding-bottom: 15px;
}
.autopr .form-wrapper.info,
.autopo .form-wrapper.info,
.pr .form-wrapper.info,
.po .form-wrapper.info {
  padding-top: 15px;
}

.po .form-wrapper.info {
  margin-bottom: 30px;
}
.po .form-wrapper.form-detail .field.switch {
  top: 0;
}
.po .form-wrapper.form-detail .field.switch .label {
  width: auto;
}

.autopr {
  font-size: 30px;
  max-height: 100%;
  padding-bottom: 30px;
}
.autopr .form-detail .col {
  margin-left: 25%;
}
.autopr .purchase-list-wrapper {
  padding: 15px;
}
.autopr .purchase-list-wrapper .toolbar {
  display: block;
  float: left;
}

.autopo .quotation-list-wrapper {
  padding: 15px;
}

.manage-master-data div.page-title {
  flex: 0% !important;
  max-width: unset !important;
}

.manage-system-parameter div.page-title {
  flex: 0% !important;
  max-width: unset !important;
}
.manage-system-parameter .top-info {
  display: inline-block;
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  color: #848da2;
  margin-bottom: 20px;
  width: 100%;
}
.manage-system-parameter .top-info .dx-button {
  float: right;
}
.manage-system-parameter .top-info .dx-button .dx-button-text {
  line-height: unset;
}
.manage-system-parameter .accordion-sp-item .po-groups .caption {
  background-color: rgba(191, 191, 191, 0.4);
  width: 80%;
  height: 25px;
}
.manage-system-parameter .accordion-sp-item .po-groups .caption label {
  font-size: 16px;
  margin-left: 10px;
  margin-top: 2px;
  color: #848da2;
}
.manage-system-parameter .accordion-sp-item .po-groups .group-field {
  padding-left: 5%;
}
.manage-system-parameter .accordion-sp-item .field .label {
  margin-bottom: 5px;
  font-size: 14px;
  color: rgba(117, 117, 117, 0.87);
}
.manage-system-parameter .accordion-sp-item .field .label .sub-label {
  font-size: 14px;
  color: rgb(191, 191, 191);
}
.manage-system-parameter .accordion-sp-item .field .dx-checkbox {
  line-height: unset;
}
.manage-system-parameter .accordion-sp-item .field .dx-checkbox-icon {
  background-color: #fff;
}
.manage-system-parameter .accordion-sp-item .field .dx-checkbox-icon::before {
  background-color: #2e58c4;
}
.manage-system-parameter .accordion-sp-item .field .wbsDash {
  line-height: 25px;
}

.manage-project-p6 .selected-model {
  padding: 5px;
  margin-bottom: 10px;
  font-size: 11px;
  max-height: 48px;
  overflow-y: auto;
  width: 100%;
}
.manage-project-p6 .selected-model span {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: #848da2;
}
.manage-project-p6 .selected-model .badge {
  margin-right: 5px;
}
.manage-project-p6 #projectP6TreeList {
  max-height: 550px;
}
.manage-project-p6 #projectP6TreeList .syncronized {
  color: #40b365;
}
.manage-project-p6 #projectP6TreeList .not-syncronize {
  color: #ec9397;
}
.manage-project-p6 #formulaDataGrid {
  height: calc(100vh - 250px);
}
.manage-project-p6 .botton-popup-wrapper {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
}
.manage-project-p6 .dx-popup-content {
  padding-top: 0;
}
.manage-project-p6 .customize-title {
  margin-left: -15px;
  margin-right: -15px;
}
.manage-project-p6 .customize-title .is-active {
  float: right;
  display: block;
  width: auto;
  margin-right: 10px;
}
.manage-project-p6 .customize-title .is-active > span {
  position: relative;
  top: -7px;
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding-right: 15px;
  text-transform: uppercase;
  color: #848da2;
}
.manage-project-p6 .customize-title .is-active > div {
  display: inline-block;
}

.report .top .page-title {
  flex: 0 0 30%;
  max-width: 30%;
}
.report .total-item {
  display: block;
  width: 100%;
  padding: 10px 0;
  text-align: right;
  font-weight: 600;
}
.report common-report-filter {
  width: 100%;
  display: block;
  text-align: right;
  padding-top: 5px;
}
.report .report-content-wrapper {
  position: relative;
  background-color: #fff;
  border-radius: 25px;
  min-height: 300px;
  padding: 15px;
  top: 15px;
  height: calc(100vh - 150px);
}
.report .report-content-wrapper #reportDataGrid {
  max-height: calc(100vh - 220px);
}
.report .report-content-wrapper .report-title {
  font-size: 16px;
  text-align: center;
}
.report .include-vat {
  line-height: 25px;
}
.report .spliter {
  padding-left: 10px;
  padding-right: 10px;
}
.report.report-matgoup-plan-date .top {
  justify-content: flex-end;
  align-items: flex-end;
}
.report.report-matgoup-plan-date .top .page-title {
  flex: 1 1 auto;
  max-width: 50%;
  margin-right: auto;
}
.report.report-matgoup-plan-date .top .select-project {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.report.report-matgoup-plan-date .top common-report-filter {
  width: auto;
  flex: none;
}

manage-snapshot .title {
  font-size: 22px;
  font-weight: 500;
}
manage-snapshot .top-button {
  display: block;
  float: right;
  position: relative;
  top: -5px;
}
manage-snapshot .bottom-button {
  text-align: center;
}
manage-snapshot .bottom-button > div {
  display: inline-block;
  padding: 15px 0 0 5px;
}

manage-snapshot.dashboard .top-button {
  top: 0;
}
manage-snapshot.dashboard #snapshotDataGrid {
  margin-top: 15px;
  min-height: 300px;
}

.manage-workflow .content-wrapper > .inner-wrapper {
  min-height: calc(100vh - 150px);
  overflow-x: hidden;
}
.manage-workflow .split-container {
  display: flex;
  flex-wrap: nowrap;
}
.manage-workflow .split-container .left-content {
  display: inline-block;
  flex: 0 0 100%;
  max-width: 100%;
  overflow-x: hidden;
  transition: 0.3s;
  z-index: 1;
  background-color: #fff;
}
.manage-workflow .split-container .right-content {
  flex: 0 0 55%;
  max-width: 55%;
  overflow-x: hidden;
  z-index: 3;
  background-color: #fff;
}
.manage-workflow .split-container.split-mode .left-content {
  flex: 0 0 45%;
  max-width: 45%;
}
.manage-workflow .tab-content {
  width: 100%;
  padding: 15px;
}
.manage-workflow .tab-content .button-right {
  text-align: right;
  padding-bottom: 15px;
}
.manage-workflow .tab-content .workflow-list-wrapper {
  margin-top: 0;
}
.manage-workflow #workflowTemplateDataGrid {
  width: 100%;
}
.manage-workflow .form-wrapper {
  padding-bottom: 15px;
}
.manage-workflow .form-wrapper .section {
  display: flex;
  margin-bottom: 15px;
}
.manage-workflow .form-wrapper .label {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  color: #848da2;
}
.manage-workflow .form-wrapper .label .unit {
  display: block;
  float: right;
  font-size: 11px;
  font-weight: 500;
}
.manage-workflow .form-wrapper .field {
  flex: 1;
  padding: 5px 15px;
}
.manage-workflow .form-wrapper .add-step {
  padding: 0 15px 5px 15px;
  text-align: right;
}
.manage-workflow .form-wrapper .button-wrapper {
  padding-top: 15px;
  text-align: center;
}
.manage-workflow .step-list-wrap {
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 15px;
}
.manage-workflow .step-list-wrap .step-item {
  display: flex;
  border: 1px solid #d3d3d3;
  margin-bottom: 7px;
  box-shadow: 0 4px 8px #d4d4d4;
  position: relative;
}
.manage-workflow .step-list-wrap .step-item .step-no {
  flex: 0 0 10%;
  max-width: 10%;
  background-color: #f6f6f6;
  text-align: center;
  line-height: 3;
}
.manage-workflow .step-list-wrap .step-item .step-no span {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: #848da2;
  border-color: transparent;
  border-radius: 50%;
  font-weight: 600;
  color: #fff;
  line-height: 23px;
}
.manage-workflow .step-list-wrap .step-item .step-item-inner {
  flex: 0 0 90%;
  max-width: 90%;
  padding: 7px;
  line-height: 2;
}
.manage-workflow .step-list-wrap .step-item .step-item-inner a {
  font-weight: 600;
  color: #848da2;
}
.manage-workflow .step-list-wrap .step-item .step-item-inner .step-type {
  font-style: italic;
  color: #2e58c4;
}
.manage-workflow .step-list-wrap .step-item .step-item-inner .edit-form-wrap {
  margin-top: 10px;
}
.manage-workflow .step-list-wrap .step-item .step-item-inner .edit-form-wrap .button-inner-wrap {
  width: 100%;
  text-align: right;
  padding: 5px 15px;
}
.manage-workflow .step-list-wrap .step-item .edit-step a,
.manage-workflow .step-list-wrap .step-item .delete-step a {
  color: #848da2;
}
.manage-workflow .step-list-wrap .step-item .edit-step {
  position: absolute;
  top: 0;
  right: 32px;
  width: 25px;
  text-align: center;
  line-height: 3;
}
.manage-workflow .step-list-wrap .step-item .delete-step {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  text-align: center;
  line-height: 3;
}
.manage-workflow .step-list-wrap .field.switch .label {
  display: inline-block;
}
.manage-workflow .step-list-wrap .field.switch .detail {
  display: inline-block;
  position: relative;
  top: 7px;
  margin-left: 42px;
}
.manage-workflow .step-list-wrap .field.due {
  width: 150px;
}
.manage-workflow .step-list-wrap .field.add-role {
  text-align: right;
}
.manage-workflow .step-list-wrap .field.add-role a {
  font-size: 13px;
  text-decoration: underline;
}
.manage-workflow .step-list-wrap .custom-table {
  width: 100%;
}
.manage-workflow .step-list-wrap .custom-table .remove {
  text-align: center;
}
.manage-workflow.popup-select-role #roleDataGrid {
  max-height: 400px;
}
.manage-workflow.popup-edit-workflow .button-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 15px;
}
.manage-workflow.popup-defualt-workflow .section-wrapper {
  min-height: 300px;
}

.pr .filter-project,
.po .filter-project,
.boq-master .filter-project {
  display: flex;
  width: 655px;
  margin-left: auto;
  justify-content: flex-end;
}
.pr .filter-project > span,
.po .filter-project > span,
.boq-master .filter-project > span {
  margin-right: 10px;
  line-height: 30px;
  font-size: 15px;
  font-weight: 500;
}
.pr .filter-project .po-setting-button,
.po .filter-project .po-setting-button,
.boq-master .filter-project .po-setting-button {
  margin-left: 10px;
  display: flex;
  gap: 7px;
}
.pr .filter-project .po-setting-button .export,
.pr .filter-project .po-setting-button .refresh-button,
.po .filter-project .po-setting-button .export,
.po .filter-project .po-setting-button .refresh-button,
.boq-master .filter-project .po-setting-button .export,
.boq-master .filter-project .po-setting-button .refresh-button {
  display: inline-block;
}

.boq-master .filter-project {
  flex: none;
  width: 700px;
}
.boq-master .filter-text {
  min-width: 300px;
  flex: 1 1 auto;
}
.boq-master .filter-text .dx-texteditor-input-container {
  padding: 2px 8px;
  min-height: 20px;
}
.boq-master #boqMasterDataGrid .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td {
  vertical-align: middle;
}
.boq-master #boqMasterDataGrid .model-image {
  flex: none;
  width: 30px;
  height: 30px;
  cursor: zoom-in;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0.5px solid #cdcdcd;
}
.boq-master #boqMasterDataGrid .panel-info {
  padding-left: 40px;
}
.boq-master #boqMasterDataGrid .panel-info .row-container {
  gap: 40px;
}
.boq-master #boqMasterDataGrid .new-model-button {
  margin-left: auto;
}
.boq-master #boqMasterDataGrid .upload-new-rev-button {
  display: none;
}
.boq-master #boqMasterDataGrid .dx-data-row.dx-state-hover .upload-new-rev-button {
  display: block;
}

.manage-boq-project-popup .popup-content-wrapper {
  min-height: 500px;
  padding-bottom: 45px;
}
.manage-boq-project-popup #projectAllList {
  max-height: calc(100vh - 100px);
}

.create-model-popup .popup-content-wrapper {
  height: 465px;
}
.create-model-popup .model-image-wrapper {
  position: relative;
  padding-top: 15px;
}
.create-model-popup .upload-model-image-button {
  position: absolute;
  top: 30px;
  right: 15px;
  z-index: 2;
}
.create-model-popup #coverImageFile {
  position: absolute;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
}

.pr .tab-content > div {
  padding: 15px 0;
}
.pr .tab-content.pr-item {
  position: relative;
}
.pr .tab-content.pr-item .toolbar {
  position: absolute;
  top: -5px;
  left: 90px;
}
.pr .filter {
  position: absolute;
  top: 21px;
  right: 15px;
  text-align: right;
  height: 28px;
}
.pr .filter .spliter {
  line-height: 22px;
}
.pr .filter .filter-item {
  height: 28px;
}
.pr .filter .keyword {
  position: relative;
  margin-right: 5px;
}
.pr .filter .only-overdue-wrapper {
  display: flex;
  line-height: 24px;
}
.pr .filter .only-overdue-wrapper > span {
  margin-right: 5px;
}
.pr .filter .only-overdue-wrapper .switch-control {
  position: relative;
  top: 3px;
}
.pr .filter .refresh-button {
  padding-left: 5px;
}
.pr .treelist-toolbar .export {
  float: right;
}
.pr #prPrepList .warning-icon {
  float: right;
  position: relative;
  right: 15px;
}
.pr #prPrepList .error-icon {
  margin-left: 5px;
  color: #ec9397;
}
.pr #prPrepList .col-pr-status i {
  margin-right: 10px;
}
.pr #prList .icon-po-opened-list {
  color: #2e58c4;
  margin-left: 10px;
  cursor: pointer;
}
.pr .panel-info {
  padding: 15px;
}
.pr .panel-info.pr-info .label {
  display: block;
}
.pr .panel-info.pr-info .data {
  color: #2e58c4;
}
.pr .panel-info.pr-info .data.green {
  color: #40b365;
}
.pr .panel-info.pr-info .data.red {
  color: #ec9397;
}
.pr .panel-info.pr-info .pr-status {
  position: relative;
}
.pr .panel-info.pr-info .pr-status .data {
  position: relative;
}
.pr .panel-info.pr-info .pr-status .data i {
  position: absolute;
  top: 6px;
  left: -15px;
  font-size: 10px;
}
.pr .panel-info.pr-info .pr-no {
  padding-right: 0;
}
.pr .panel-info.pr-info .quotation-no {
  display: block;
  font-style: italic;
  font-size: 10px;
  font-weight: 500;
}
.pr .panel-info.pr-info .schedule-date i,
.pr .panel-info.pr-info .pr-amount i {
  position: relative;
  top: -1px;
  left: 2px;
  font-size: 12px;
}
.pr .panel-info.pr-info .schedule-date #scheduleSettingIcon {
  cursor: pointer;
}
.pr .panel-info .info-other {
  display: block;
  padding-right: 0;
  padding-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  border-left: 1px solid #ececec;
}
.pr .panel-info .info-other > div {
  display: block;
  font-weight: 700;
  color: #2e58c4;
}
.pr .panel-info .info-other span {
  width: 140px;
  text-align: right;
  display: inline-block;
  padding-right: 10px;
  font-weight: 400;
  color: #848da2;
}
.pr .panel-info .sap-error-wrapper {
  display: block;
  font-size: 12px;
}
.pr .panel-info .sap-error-wrapper a {
  text-decoration: underline;
}
.pr .material-io {
  padding: 10px;
}
.pr .material-io .left {
  padding-right: 0;
}
.pr .material-io .left .inner-wrapper {
  border-top: 1px solid #ececec;
}
.pr .material-io .right {
  border: 1px solid #ececec;
  border-left: none;
}
.pr .material-io .pr-item {
  padding: 10px 15px;
  border: 1px solid #ececec;
  border-top: none;
  cursor: pointer;
}
.pr .material-io .pr-item.actived {
  border-right: none;
}
.pr .select-io-wrapper {
  padding-top: 10px;
}
.pr .select-io-wrapper .badge {
  display: inline-block;
  position: relative;
  width: 105px;
  margin-bottom: 5px;
  margin-right: 3px;
  line-height: 16px;
  padding: 1px 10px;
  height: 21px;
  background: #f7f7f7;
  border: 1px solid #e1e1e1;
  color: rgba(0, 0, 0, 0.5411764706);
}
.pr .select-io-wrapper .badge .icon-button-in-list {
  position: absolute;
  right: 0;
  top: 2.5px;
  font-size: 14px;
  padding-left: 5px;
  padding-right: 5px;
  color: #ec9397;
}
.pr .select-io-wrapper .badge .icon-button-in-list .dx-button-content .dx-icon {
  font-size: 14px !important;
  line-height: 9px;
}
.pr .select-io-wrapper .badge .icon-button-in-list.dx-state-hover {
  background-color: transparent;
}
.pr .submitted-io i {
  position: absolute;
  right: 8px;
  top: 5px;
}
.pr #prItemDataGrid {
  padding-left: 0;
  padding-right: 0;
}
.pr #prItemDataGrid .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td {
  vertical-align: top;
}
.pr #prItemDataGrid .dx-header-row .dx-editor-cell .dx-select-checkbox {
  position: relative;
  top: 12px;
}
.pr #prItemDataGrid .dx-command-select .dx-select-checkbox {
  position: relative;
  top: 7px;
}
.pr #prItemDataGrid .dx-datagrid-group-closed,
.pr #prItemDataGrid .dx-datagrid-group-opened {
  top: 6px;
}
.pr #prItemDataGrid .select-io-button {
  text-align: center;
  display: block;
}
.pr #prItemDataGrid .select-io-button .icon-edit {
  position: absolute;
  top: -5px;
  right: 0;
}
.pr #prItemDataGrid .select-io-button .icon-edit .dx-icon {
  color: #2e58c4;
  font-size: 10px;
}
.pr #prItemDataGrid .dx-master-detail-row > td:last-of-type {
  padding-top: 15px;
  padding-bottom: 15px;
}
.pr #prItemDataGrid .dx-master-detail-row .panel-info {
  padding-top: 0;
  padding-bottom: 0;
}
.pr #prItemDataGrid .dx-master-detail-row .panel-info .io span.label {
  display: inline-block;
  position: relative;
  top: -2px;
}
.pr #prItemDataGrid .dx-master-detail-row .panel-info .io .select-io-button {
  position: relative;
  display: inline-block;
  top: -3px;
  text-align: left;
}
.pr #prItemDataGrid .dx-master-detail-row .panel-info .io .select-io-button .dx-icon {
  font-size: 12px;
}
.pr #prItemDataGrid .dx-master-detail-row .select-io-wrapper {
  position: relative;
  top: -7px;
  padding-left: 3px;
  padding-top: 3px;
  height: 26px;
  overflow: visible;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.pr #prItemDataGrid .dx-master-detail-row .select-io-wrapper.disabled {
  background-color: #ececec;
}
.pr #prItemDataGrid .dx-master-detail-row .icon-not-enough-budget {
  margin-left: 5px;
}
.pr #prItemDataGrid .dx-master-detail-row .text-red input {
  color: #ec9397;
  font-weight: 700;
}
.pr #prItemDataGrid.view .panel-info .data {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.87);
  font-weight: 500;
}
.pr .workflow-step .step-item .icon {
  cursor: default;
}
.pr .panel-info.pr-header .column {
  padding-left: 50px;
  padding-right: 50px;
}
.pr .panel-info.pr-header .column-left {
  border-right: 1px solid #ececec;
}
.pr.pr-detail .io-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  padding-top: 15px;
}
.pr.pr-detail .io-checkbox-list .checkbox {
  flex: 0 0 20%;
  max-width: 20%;
}
.pr.pr-detail .input-io-code {
  display: block;
  white-space: nowrap;
}
.pr.pr-detail .input-io-code .textbox {
  display: inline-block;
  width: calc(100% - 70px);
}
.pr.pr-detail .input-io-code .button {
  display: inline-block;
  width: 70px;
}
.pr.pr-detail .dx-tile {
  border: none;
}
.pr.manage-io-popup .dx-popup-content {
  padding-top: 0;
}
.pr.manage-io-popup .inner-wrapper {
  border-bottom: 1px solid #ececec;
  height: calc(100vh - 210px);
}
.pr.manage-io-popup .inner-wrapper > div {
  padding-top: 15px;
}
.pr.manage-io-popup .io-list-view {
  border-left: 1px solid #ececec;
}
.pr.view-sap-error-detail .exec-date {
  display: inline-block;
  position: absolute;
  right: 7px;
  top: 0;
  bottom: 0;
  line-height: 58px;
  font-style: italic;
  color: #848da2;
}
.pr.confirm-save-pr-popup .button-wrapper {
  position: relative;
}
.pr.confirm-save-pr-popup .is-ready-to-submit {
  position: absolute;
  left: 0;
  top: 3px;
  display: inline-block;
  text-align: left;
}
.pr.change-scheduled-date-popup .inner-wrapper {
  margin-bottom: 60px;
}
.pr.change-scheduled-date-popup .inner-wrapper .dx-radiogroup .dx-radiobutton {
  margin-bottom: 10px;
}
.pr.change-scheduled-date-popup .inner-wrapper .schedule-date {
  padding-left: 15px;
  padding-top: 34px;
}

.po-opened-list ul {
  padding-left: 15px;
}
.po-opened-list ul li {
  line-height: 25px;
}

.po .tab-content > div {
  padding: 15px 0;
}
.po .filter {
  position: absolute;
  top: 21px;
  right: 15px;
  text-align: right;
  height: 28px;
}
.po .treelist-toolbar {
  display: inline-block;
  position: relative;
  width: auto;
  top: -7px;
}
.po .treelist-toolbar .export {
  float: right;
}
.po #poScheduleTreeList .warning-icon {
  float: right;
  position: relative;
  right: 17px;
}
.po #poScheduleTreeList .ready-icon {
  /* float: right; */
  color: #2e58c4;
  position: relative;
  left: 7px;
}
.po #poScheduleTreeList .error-orange-icon {
  /* float: right; */
  color: #e8a324;
  position: relative;
  left: 7px;
}
.po #poScheduleTreeList .complete-icon {
  /* float: right; */
  color: #40b365;
  position: relative;
  left: 7px;
}
.po #poScheduleTreeList .error-icon {
  /* float: right; */
  color: #ec9397;
  position: relative;
  left: 7px;
}
.po #poScheduleTreeList .icon-manage-item {
  position: absolute;
  right: -10px;
  top: -3px;
}
.po #poScheduleTreeList .icon-manage-item .dx-button-content .dx-icon {
  font-size: 12px !important;
}
.po #poScheduleTreeList .view-detail {
  height: auto;
  display: block;
}
.po #poScheduleTreeList .view-detail .dx-button-content {
  padding: 5px 0;
  text-align: left;
  color: #2e58c4;
}
.po #poScheduleTreeList .view-detail .dx-button-content .dx-button-text {
  line-height: 1;
  text-decoration: underline;
}
.po #poScheduleTreeList .view-detail:hover .dx-button-text {
  text-decoration: underline;
}
.po #poScheduleTreeList .view-detail.dx-button.dx-state-hover {
  background-color: transparent;
}
.po #poScheduleTreeList .view-detail.dx-button.dx-state-hover .dx-button-text {
  text-decoration: underline;
}
.po #poScheduleTreeList .dx-treelist-content .dx-treelist-table .dx-row > td,
.po #poScheduleTreeList .dx-treelist-content .dx-treelist-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content),
.po #poScheduleTreeList .dx-treelist-content .dx-treelist-table .dx-row > td.dx-treelist-invalid:not(.dx-field-item-content) {
  vertical-align: top;
}
.po #poFilterProjectDataGrid {
  min-height: 400px;
  max-height: calc(100vh - 250px);
}
.po.manage-po-schedule .inner-wrapper {
  display: flex;
  margin-bottom: 60px;
}
.po.manage-po-schedule .dx-radiogroup .dx-radiobutton {
  margin-bottom: 10px;
}
.po.manage-po-schedule .schedule-date {
  padding-left: 15px;
  padding-top: 65px;
}
.po .info-wrapper {
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ececec;
}
.po .info-wrapper .info {
  line-height: 24px;
  font-weight: 700;
  color: #2e58c4;
}
.po .info-wrapper .info span {
  display: inline-block;
  width: 100px;
  font-weight: normal;
  color: #848da2;
}

#assignMultipleValueButton {
  border-radius: 2px;
  border: 1px solid #ddd;
}
#assignMultipleValueButton.dx-button-mode-outlined.dx-state-focused, #assignMultipleValueButton.dx-button-mode-outlined.dx-state-hover {
  background-color: rgba(0, 0, 0, 0.08);
}
#assignMultipleValueButton .dx-button-text {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.87);
}
#assignMultipleValueButton.dx-button-mode-outlined.dx-state-disabled .dx-button-text {
  color: rgba(0, 0, 0, 0.35);
}

.import-data-popup .drop-file {
  margin-top: 10px;
  background-color: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  transform: all 0.3s;
}
.import-data-popup .drop-file .drop-area.import-excel {
  height: 400px;
}
.import-data-popup .drop-file.hide {
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
  height: 0;
  overflow: hidden;
}

.filter-project-datagrid {
  max-height: calc(100vh - 250px);
}

.standard-price .group-full-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
}
.standard-price .treelist-toolbar {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
}
.standard-price .treelist-toolbar .button-right {
  margin-left: auto;
}
.standard-price #standardPriceDataGrid .group-wrapper {
  display: block;
  flex: 1 1 auto;
}
.standard-price #standardPriceDataGrid .group-title {
  display: block;
  font-weight: 700;
}
.standard-price #standardPriceDataGrid .group-description {
  font-weight: normal;
}
.standard-price #standardPriceDataGrid .submitted-by {
  font-weight: normal;
  color: #848da2;
}
.standard-price #standardPriceDataGrid .dx-datagrid .dx-row.dx-data-row > td {
  padding-top: 12px;
  padding-bottom: 12px;
  cursor: pointer;
}
.standard-price #standardPriceDataGrid .period-description {
  padding: 2px 5px;
  border-radius: 5px;
}
.standard-price #standardPriceDataGrid .period-description:hover {
  color: #567ee3;
  background-color: rgba(132, 141, 162, 0.1);
}
.standard-price .standard-price-detail .group-info .group-title {
  font-size: 16px;
  font-weight: 600;
}
.standard-price .standard-price-detail #materialDataGrid .dx-row.dx-header-row .new-data {
  background-color: #dcdcdc;
}
.standard-price .last-updated {
  margin-left: auto;
  display: block;
  position: relative;
  text-align: right;
  font-size: 12px;
  color: #848da2;
}
.standard-price .sub-menu-tab {
  margin-left: 0;
}
.standard-price .sub-menu-tab .inner-wrapper {
  padding-left: 0;
}
.standard-price .sub-menu-tab ul {
  display: flex;
}
.standard-price .sub-menu-tab ul li {
  white-space: nowrap;
}
.standard-price #tabScrollView {
  flex: 1 1 auto;
}
.standard-price #manageGroupButton {
  flex: none;
  white-space: nowrap;
  text-align: center;
}

.boq-master.popup-manage-boq .panel-info-wrapper {
  margin-left: -15px;
  margin-right: -15px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 15px;
  padding: 0 15px;
  text-align: center;
}
.boq-master.popup-manage-boq .panel-info {
  width: 100%;
  padding-bottom: 10px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}
.boq-master.popup-manage-boq .panel-info .row {
  justify-content: center;
  gap: 50px;
}
.boq-master.popup-manage-boq .panel-info .label {
  display: block;
}
.boq-master.popup-manage-boq .panel-info .data {
  color: #2e58c4;
  font-size: 16px;
}
.boq-master.popup-manage-boq .panel-info .data.green {
  color: #40b365;
}
.boq-master.popup-manage-boq .panel-info .data.red {
  color: #ec9397;
}
.boq-master.popup-manage-boq .panel-info .info {
  text-align: left;
  padding-left: 0;
}
.boq-master.popup-manage-boq .panel-info .info.status {
  position: relative;
  padding-top: 15px;
}
.boq-master.popup-manage-boq .panel-info .info.status .data {
  position: relative;
}
.boq-master.popup-manage-boq .panel-info .info.status .data i {
  position: absolute;
  top: 6px;
  left: -15px;
  font-size: 10px;
}
.boq-master.popup-manage-boq .treelist-toolbar .button-right {
  display: flex;
  align-items: center;
  gap: 7px;
}
.boq-master.popup-manage-boq .button-wrapper {
  right: unset;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}
.boq-master.popup-manage-boq .publish-for-pp-checkbox {
  position: absolute;
  right: -100px;
  top: 20px;
}
.boq-master.popup-manage-boq #boqItemsListTreeList .dx-command-drag {
  text-overflow: unset;
}
.boq-master.popup-manage-boq #boqItemsListTreeList .dx-treelist-rowsview .dx-treelist-empty-space {
  width: 0;
}
.boq-master.popup-manage-boq #boqItemsListTreeList .dx-row > td:not(.dx-treelist-select-all) .dx-select-checkbox.dx-treelist-checkbox-size {
  left: 24px;
}

.boq-master-detail .top .page-title,
.popup-select-boq-master-items .top .page-title {
  flex: 1 1 auto;
}
.boq-master-detail .top .model-name,
.popup-select-boq-master-items .top .model-name {
  display: block;
  font-size: 22px;
  font-weight: 500;
}
.boq-master-detail .top .progress-boxes-wrapper,
.popup-select-boq-master-items .top .progress-boxes-wrapper {
  flex: none;
  max-width: unset;
}
.boq-master-detail .top .progress-boxes-wrapper .progress-boxes,
.popup-select-boq-master-items .top .progress-boxes-wrapper .progress-boxes {
  width: 800px;
}
.boq-master-detail .top .progress-boxes-wrapper .progress-boxes .box,
.popup-select-boq-master-items .top .progress-boxes-wrapper .progress-boxes .box {
  height: auto;
  padding-top: 7px;
  padding-bottom: 7px;
}

.boq-master-detail #tab1_container {
  padding-bottom: 2px;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.boq-master-detail #tab2_container {
  border-top: none;
}
.boq-master-detail .sub-menu-tab .inner-wrapper {
  display: flex;
}
.boq-master-detail .boq-master-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 15px;
}
.boq-master-detail .boq-master-header .info .data {
  display: block;
  color: #2e58c4;
}
.boq-master-detail .boq-master-header .model-year {
  width: 200px;
  flex: none;
}
.boq-master-detail .treelist-toolbar {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  padding-top: 10px;
  height: auto;
}
.boq-master-detail .treelist-toolbar .button-right {
  margin-left: auto;
}
.boq-master-detail #normalBoqTreeList .dx-command-drag,
.boq-master-detail #specialBoqTreeList .dx-command-drag {
  text-overflow: unset;
}
.boq-master-detail #normalBoqTreeList .icon-remark,
.boq-master-detail #specialBoqTreeList .icon-remark {
  position: absolute;
  right: 15px;
  opacity: 0.2;
}
.boq-master-detail #normalBoqTreeList .icon-remark.has-remark,
.boq-master-detail #specialBoqTreeList .icon-remark.has-remark {
  opacity: 1;
  color: #2e58c4;
}
.boq-master-detail #normalBoqTreeList .comment-button,
.boq-master-detail #specialBoqTreeList .comment-button {
  margin-left: auto;
  display: none;
}
.boq-master-detail #normalBoqTreeList .comment-button.dx-button-has-icon .dx-icon,
.boq-master-detail #specialBoqTreeList .comment-button.dx-button-has-icon .dx-icon {
  font-size: 14px;
}
.boq-master-detail #normalBoqTreeList .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) .comment-button,
.boq-master-detail #specialBoqTreeList .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) .comment-button {
  display: inline-block;
}
.boq-master-detail.review-submit-popup .dx-popup-content {
  padding-top: 0 !important;
}
.boq-master-detail #reviewSubmitPopupWrapper {
  min-height: calc(100vh - 100px);
}
.boq-master-detail #reviewSubmitPopupWrapper .inner-wrapper .boq-master-all {
  position: relative;
}
.boq-master-detail #reviewSubmitPopupWrapper .inner-wrapper .boq-master-all::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: #ececec;
}
.boq-master-detail #reviewSubmitPopupWrapper .inner-wrapper .title {
  padding-top: 15px;
  text-transform: uppercase;
}
.boq-master-detail #reviewSubmitPopupWrapper .review-submit-treelist {
  max-height: calc(100vh - 180px);
}
.boq-master-detail .more-detail-button {
  height: 27px;
}
.boq-master-detail .treelist-toolbar-flex {
  padding-top: 7px;
}
.boq-master-detail .treelist-toolbar-flex .toggle-button {
  margin-right: 30px;
}
.boq-master-detail .treelist-toolbar-flex .revision {
  display: flex;
  align-items: center;
  gap: 7px;
}
.boq-master-detail .treelist-toolbar-flex .date-as-of {
  margin-left: auto;
}
.boq-master-detail .category-summary {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding-left: 20px;
}
.boq-master-detail .category-summary .item {
  padding: 7px 0 15px 0;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.24);
  cursor: pointer;
}
.boq-master-detail .category-summary .item.active {
  background-color: #567ee3;
}
.boq-master-detail .category-summary .category-name {
  padding: 2px 7px;
  display: block;
  text-align: center;
  font-weight: 700;
}
.boq-master-detail .category-summary .category-detail {
  display: block;
  padding-top: 7px;
}
.boq-master-detail .category-summary .category-detail span {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #2e58c4;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper {
  height: calc(100vh - 183px);
  border: 1px solid #ececec;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper > .row {
  height: 100%;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper .left-content {
  padding-right: 0;
  border-right: 1px solid #ececec;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper .left-content .tab-version {
  padding: 10px;
  border-bottom: 1px solid #ececec;
  cursor: pointer;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper .left-content .tab-version:first-child {
  border-top: none;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper .left-content .tab-version.actived {
  background-color: rgba(236, 236, 236, 0.9);
  color: #2e58c4;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper .left-content .tab-version .warning-icon {
  float: right;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper .right-content {
  padding-left: 0;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper .right-content .inner-wrapper {
  padding: 5px 15px 0;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper .treelist-toolbar-flex {
  height: auto;
  padding-bottom: 0;
  padding-top: 15px;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper .treelist-toolbar-flex .panel-info .row-container .info {
  padding-bottom: 5px;
}
.boq-master-detail.popup-previous-revisions .popup-content-wrapper .treelist-toolbar-flex .view-rev-detail {
  position: absolute;
  top: 7px;
  right: 30px;
}
.boq-master-detail.popup-validate-result .result-type {
  display: flex;
  gap: 15px;
  padding-bottom: 7px;
}
.boq-master-detail.popup-validate-result .result-type > div {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 2px 5px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}
.boq-master-detail.popup-validate-result .result-type > div:hover {
  background-color: rgba(86, 126, 227, 0.1);
}
.boq-master-detail.popup-validate-result .result-type > div.actived {
  background-color: rgba(86, 126, 227, 0.1);
}
.boq-master-detail.popup-validate-result .result-type .success {
  color: #40b365;
}
.boq-master-detail.popup-validate-result .result-type .error {
  color: #ec9397;
}
.boq-master-detail.popup-validate-result .result-type .warning {
  color: #f4be39;
}
.boq-master-detail.popup-validate-result .result-type .change {
  color: #2e58c4;
}
.boq-master-detail.popup-validate-result .show-error-checkbox {
  margin-left: auto;
}
.boq-master-detail.popup-validate-result #dropAreaImportData {
  width: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.boq-master-detail.popup-validate-result .import-boq-main-from .info .label {
  display: inline-block;
  height: 20px;
}
.boq-master-detail.popup-validate-result .button-wrapper .disable-button-reason {
  display: block;
  padding-left: 15px;
  position: absolute;
  transform: translateX(100%);
  right: 0;
  white-space: nowrap;
}
.boq-master-detail.popup-view-boq-main .custom-popup-title-wrapper .inner-wrapper-flex, .boq-master-detail.popup-validate-result .custom-popup-title-wrapper .inner-wrapper-flex, .boq-master-detail.popup-previous-revisions .custom-popup-title-wrapper .inner-wrapper-flex {
  height: 60px;
}
.boq-master-detail.popup-view-boq-main .custom-popup-title-wrapper .inner-wrapper-flex .popup-title, .boq-master-detail.popup-validate-result .custom-popup-title-wrapper .inner-wrapper-flex .popup-title, .boq-master-detail.popup-previous-revisions .custom-popup-title-wrapper .inner-wrapper-flex .popup-title {
  height: 60px;
}
.boq-master-detail.popup-view-boq-main .project-model, .boq-master-detail.popup-validate-result .project-model, .boq-master-detail.popup-previous-revisions .project-model {
  position: absolute;
  bottom: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  padding-top: 7px;
  font-size: 12px;
  color: #848da2;
}
.boq-master-detail.popup-view-boq-main .project-model .label, .boq-master-detail.popup-validate-result .project-model .label, .boq-master-detail.popup-previous-revisions .project-model .label {
  font-weight: normal;
}
.boq-master-detail.popup-view-boq-main .treelist-toolbar-flex {
  height: auto;
  padding-bottom: 0;
}
.boq-master-detail .last-updated {
  margin-left: auto;
  display: block;
  position: relative;
  top: 5px;
  text-align: right;
  font-size: 12px;
  color: #848da2;
}

.import-info {
  display: flex;
  gap: 30px;
  align-items: center;
}
.import-info .info {
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.import-info .data {
  color: #2e58c4;
  font-size: 14px;
}
.import-info .a-link-button {
  font-size: 14px;
  font-weight: 600;
}

.review-changes-result-type {
  display: flex;
  gap: 15px;
  padding-bottom: 7px;
  height: 25px;
}
.review-changes-result-type > div {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 2px 5px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}
.review-changes-result-type > div:hover {
  background-color: rgba(86, 126, 227, 0.1);
}
.review-changes-result-type > div.actived {
  background-color: rgba(86, 126, 227, 0.1);
}
.review-changes-result-type .new {
  color: #40b365;
}
.review-changes-result-type .delete {
  color: #ec9397;
}
.review-changes-result-type .major-change {
  color: #f4be39;
}
.review-changes-result-type .minor-change {
  color: #2e58c4;
}

.boq-main-item-datagrid .is-pp-perchase-text {
  display: block;
  text-align: center;
  color: #2e58c4;
}
.boq-main-item-datagrid .remark-row td {
  color: #2e58c4;
}
.boq-main-item-datagrid .dx-data-row.dx-state-hover.remark-row > td {
  color: #2e58c4 !important;
}

.boq-datagrid-has-total-row .footer-row {
  background-color: rgba(236, 236, 236, 0.8);
}
.boq-datagrid-has-total-row .total-row {
  font-weight: 700;
}
.boq-datagrid-has-total-row .total-row > td {
  border-bottom-width: 2px;
}
.boq-datagrid-has-total-row .blank-row {
  background-color: #ffffff;
}

.boq-master-tree-list .icon-item-type {
  display: inline-block;
}
.boq-master-tree-list .icon-item-type.blank-icon {
  width: 1px;
  height: 10px;
}
.boq-master-tree-list .icon-item-type.level-1 {
  margin-left: 17px;
}
.boq-master-tree-list .icon-item-type.level-2 {
  margin-left: 30px;
}
.boq-master-tree-list .remark-text {
  padding-top: 7px;
  display: block;
  font-size: 10px;
  color: #ec9397;
}
.boq-master-tree-list .remark-text.level-1 {
  margin-left: 17px;
}
.boq-master-tree-list .remark-text.level-2 {
  margin-left: 30px;
}

.boq-table-container {
  transition: 0.3s;
}
.boq-table-container .treelist-toolbar-flex {
  height: auto;
  padding-bottom: 0;
}

#importDataPopupWrapper .file-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#importDataPopupWrapper .file-info .item {
  display: flex;
  align-items: center;
  font-weight: 700;
}
#importDataPopupWrapper .file-info .item > span {
  width: 100px;
  font-weight: 500;
}
#importDataPopupWrapper .file-info .item .success {
  color: #40b365;
}
#importDataPopupWrapper .file-info .item .fail {
  color: #ec9397;
}

.panel-info.boq-header .row-container {
  display: flex;
  gap: 10px;
}
.panel-info.boq-header .row-container .model {
  width: 200px;
}
.panel-info.boq-header .row-container .revision-description {
  width: 400px;
}
.panel-info.boq-header .revision-box {
  position: absolute;
  top: 15px;
  right: 15px;
  border: 1.5px solid #848da2;
  border-radius: 5px;
  color: #848da2;
  text-align: center;
  font-weight: 600;
  padding: 11px 20px;
}
.panel-info.boq-header .revision-box span {
  display: block;
  font-size: 30px;
  font-weight: 700;
}

.boq-header .period-description {
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.project-boq-price .top .page-title {
  flex: 1 1 50%;
  max-width: 50%;
}
.project-boq-price .background-overlay {
  display: block;
  height: calc(100vh - 180px);
  z-index: 3;
}
.project-boq-price .revision-description .fa-arrow-up {
  display: none;
}
.project-boq-price .revision-description.highlight {
  z-index: 4;
  position: relative;
}
.project-boq-price .revision-description.highlight .label {
  color: #252525 !important;
}
.project-boq-price .revision-description.highlight .fa-arrow-up {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -25px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 35px;
  animation: blink 1s linear infinite;
}
.project-boq-price .revision-description .icon-change-boq {
  position: relative;
}
.project-boq-price .revision-description .icon-change-boq.dx-button-has-icon .dx-icon {
  font-size: 12px;
}
.project-boq-price .selected-boq {
  display: flex;
  align-items: center;
  gap: 7px;
}

.popup-import-boq-purchase #importDataResultDataGrid .validate-icon-wrapper i {
  position: relative;
  top: 2px;
  left: -15px;
}

.project-boq-price .boq-alert-text,
.project-detail-boq .boq-alert-text {
  position: relative;
  top: -3px;
  display: block;
  font-size: 10px;
  color: #ec9397;
}

.summary-price .content-wrapper {
  overflow: hidden;
  height: calc(100vh - 60px);
}
.summary-price .warning-icon {
  color: #f4be39;
}
.summary-price.manage-summary-price-popup .tab-content {
  padding-top: 15px;
}
.summary-price.manage-summary-price-popup .sub-menu-tab ul .tab a {
  padding: 8px 15px;
}
.summary-price.manage-summary-price-popup .sub-menu-tab .total-price {
  display: block;
  font-size: 10px;
}
.summary-price.manage-summary-price-popup .summary-price-footer {
  padding-top: 10px;
  display: block;
  text-align: right;
  padding-right: 10px;
}
.summary-price.manage-summary-price-popup .summary-price-footer .inner-wrapper {
  display: inline-block;
}
.summary-price.manage-summary-price-popup .summary-price-footer span {
  display: block;
  font-size: 12px;
  font-weight: 700;
}
.summary-price.manage-summary-price-popup .summary-price-footer .amount {
  display: inline-block;
  width: 80px;
  text-align: right;
  padding-left: 7px;
}
.summary-price #filterKeywordTextBox.dx-texteditor.dx-editor-outlined .dx-texteditor-input {
  padding: 7px 8px 7px;
}
.summary-price #sumUnitPriceDataGrid .dx-datagrid-group-opened,
.summary-price #sumUnitPriceDataGrid .dx-datagrid-group-closed {
  margin-top: -5px;
}
.summary-price #sumUnitPriceDataGrid .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td {
  vertical-align: middle;
}
.summary-price #sumUnitPriceDataGrid .model-image {
  width: 30px;
  height: 30px;
  cursor: zoom-in;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0.5px solid #cdcdcd;
}
.summary-price #exportDataGrid .header-info-wrapper {
  padding-left: 15px;
  padding-right: 15px;
}
.summary-price #exportDataGrid .header-info-wrapper .label {
  display: inline-block;
  width: 100px;
}
.summary-price #exportDataGrid .total-price-wrapper .label,
.summary-price #exportDataGrid .total-price-wrapper .amount {
  display: block;
  text-align: center;
}
.summary-price #exportDataGrid .total-price-wrapper .amount {
  font-size: 16px;
  color: #2e58c4;
}

.manage-sum-unit-price .top .page-title {
  flex: 1 1 auto;
  max-width: 100%;
}
.manage-sum-unit-price.content-wrapper > .inner-wrapper {
  height: calc(100vh - 140px);
}
.manage-sum-unit-price .tab-content {
  display: flex;
  align-items: stretch;
}
.manage-sum-unit-price .tab-content .left-content {
  flex: none;
  width: 250px;
  border-top: 1px solid #ececec;
}
.manage-sum-unit-price .tab-content .left-content .item {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 55px;
  padding: 5px 15px;
  border-bottom: 1px solid #ececec;
  line-height: 2.5;
  cursor: pointer;
  transition: 0.3s;
  border-left: 1px solid #ececec;
}
.manage-sum-unit-price .tab-content .left-content .item * {
  cursor: pointer;
}
.manage-sum-unit-price .tab-content .left-content .item .group-type-code {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
}
.manage-sum-unit-price .tab-content .left-content .item .group-type-code .icon-boq-sap-alert {
  position: relative;
  top: 1px;
  color: #ec9397;
}
.manage-sum-unit-price .tab-content .left-content .item .group-type-code .amount {
  margin-left: auto;
  font-size: 14px;
}
.manage-sum-unit-price .tab-content .left-content .item .group-type-name {
  font-size: 13px;
  color: #848da2;
}
.manage-sum-unit-price .tab-content .left-content .item:hover {
  background-color: rgba(236, 236, 236, 0.6);
}
.manage-sum-unit-price .tab-content .left-content .item:active,
.manage-sum-unit-price .tab-content .left-content .item :focus {
  background-color: rgba(236, 236, 236, 0.8);
}
.manage-sum-unit-price .tab-content .left-content .item.active {
  background-color: rgba(236, 236, 236, 0.9);
}
.manage-sum-unit-price .tab-content .left-content .note {
  display: block;
  padding: 7px 7px 0 0;
  font-size: 12px;
  color: #848da2;
}
.manage-sum-unit-price .tab-content .right-content {
  flex: 1 1 auto;
  border: 1px solid #ececec;
  padding: 15px;
}
.manage-sum-unit-price .sum-unit-price-info {
  display: flex;
  gap: 18px;
  padding-bottom: 7px;
}
.manage-sum-unit-price .sum-unit-price-info .model-wrapper {
  display: flex;
  gap: 15px;
  padding-left: 0;
}
.manage-sum-unit-price .sum-unit-price-info .model-wrapper .model-image {
  width: 50px;
  height: 50px;
  cursor: zoom-in;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 0.5px solid #cdcdcd;
}
.manage-sum-unit-price .sum-unit-price-info .total-price {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  width: 525px;
  margin-left: auto;
}
.manage-sum-unit-price .sum-unit-price-info .total-price .item {
  flex: 1;
  height: auto;
  font-size: 19px;
  font-weight: 600;
  color: #2e58c4;
  text-align: center;
  padding-bottom: 5px;
}
.manage-sum-unit-price .sum-unit-price-info .total-price .item span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: #a7a7a7;
}
.manage-sum-unit-price .sum-unit-price-info .total-price .item span.require-field {
  display: inline-block;
}
.manage-sum-unit-price .sum-unit-price-info .total-price .item span.require-field::after {
  height: 20px;
}
.manage-sum-unit-price .sum-unit-price-info .total-price .item:not(:first-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.24);
}
.manage-sum-unit-price .sum-unit-price-info .total-price #usableAreaNumberBox {
  margin: auto;
}
.manage-sum-unit-price .sum-unit-price-info .total-price #usableAreaNumberBox.dx-texteditor.dx-editor-outlined .dx-texteditor-input {
  font-size: 19px;
  font-weight: 600;
  color: #2e58c4;
  text-align: center;
}
.manage-sum-unit-price .footer-container {
  display: flex;
  align-items: flex-start;
}
.manage-sum-unit-price .note-of-type {
  display: block;
  width: 400px;
  flex: none;
}
.manage-sum-unit-price .summary-price-footer {
  flex: 1 1 auto;
  padding-top: 10px;
  display: block;
  text-align: right;
}
.manage-sum-unit-price .summary-price-footer .inner-wrapper {
  display: inline-block;
}
.manage-sum-unit-price .summary-price-footer .item {
  display: flex;
  align-items: center;
  font-weight: 700;
}
.manage-sum-unit-price .summary-price-footer .item .label {
  flex: 1 1 auto;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
  height: 30px;
  margin-right: 7px;
}
.manage-sum-unit-price .summary-price-footer .amount {
  display: block;
  width: 150px;
  flex: none;
  text-align: right;
  padding-left: 7px;
  background-color: rgba(236, 236, 236, 0.4);
  height: 30px;
  line-height: 30px;
  padding-right: 10px;
  border-bottom: 1px solid #e0e0e0;
}
.manage-sum-unit-price .summary-price-footer .dx-texteditor.dx-editor-outlined .dx-texteditor-input {
  padding: 0 8px 2px;
  text-align: right;
}
.manage-sum-unit-price #allCategoryTreeList .col-item-no .dx-treelist-empty-space:not(.dx-treelist-expanded):not(.dx-treelist-collapsed) {
  display: none;
}
.manage-sum-unit-price .boq-alert-text {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: #ec9397;
  position: relative;
  top: -2px;
  margin-left: auto;
}
.manage-sum-unit-price .matlist-alert-text {
  display: block;
  padding-left: 7px;
  font-weight: 700;
  color: #ec9397;
  margin-left: auto;
}
.manage-sum-unit-price.ref-boq-wrapper .panel-info .row-flex, .manage-sum-unit-price.ref-matlist-wrapper .panel-info .row-flex {
  justify-content: center;
}
.manage-sum-unit-price.ref-boq-wrapper .progress-boxes-wrapper .progress-boxes {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 5px;
  width: 800px;
  margin-left: auto;
}
.manage-sum-unit-price.ref-boq-wrapper .progress-boxes-wrapper .progress-boxes .box {
  flex: 1;
  min-height: 63px;
  font-size: 19px;
  font-weight: 600;
  color: #2e58c4;
  text-align: center;
}
.manage-sum-unit-price.ref-boq-wrapper .progress-boxes-wrapper .progress-boxes .box span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: #a7a7a7;
}
.manage-sum-unit-price.ref-boq-wrapper .progress-boxes-wrapper .progress-boxes .box:not(:first-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.24);
}
.manage-sum-unit-price.ref-boq-wrapper .progress-boxes-wrapper .progress-boxes .box.overdue, .manage-sum-unit-price.ref-boq-wrapper .progress-boxes-wrapper .progress-boxes .box.overplan {
  color: #ec9397;
  cursor: pointer;
}

.sum-unit-price-detail-popup .is-latest-version {
  text-align: right;
}
.sum-unit-price-detail-popup .last-updated {
  display: block;
  position: relative;
  padding-bottom: 10px;
  text-align: right;
  font-size: 12px;
  color: #848da2;
}

#reportSumUnitPriceCompareTreeList .dx-header-row .dx-text-content-alignment-right {
  display: block;
}
#reportSumUnitPriceCompareTreeList .dx-treelist-headers .dx-treelist-table .dx-row > td {
  position: relative;
  vertical-align: top;
}
#reportSumUnitPriceCompareTreeList .dx-treelist-icon-container {
  display: none;
}
#reportSumUnitPriceCompareTreeList .header-cell-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#reportSumUnitPriceCompareTreeList .header-cell-wrapper > span {
  display: block;
  text-align: center;
  white-space: pre-wrap;
}
#reportSumUnitPriceCompareTreeList .group-total-row {
  border-bottom-width: 2px;
}
#reportSumUnitPriceCompareTreeList .grand-total-row {
  background-color: #ececec;
}

.report-sum-unit-price .content-wrapper.first-page > .inner-wrapper,
.report-standard-price .content-wrapper.first-page > .inner-wrapper {
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}
.report-sum-unit-price .model-year,
.report-standard-price .model-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box.collapsed .box-header .icon-toggle-button,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box.collapsed .box-header .icon-toggle-button {
  transform: rotate(90deg);
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box.collapsed .box-body,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box.collapsed .box-body {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box.collapsed .box-body .model-badge-wrapper,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box.collapsed .box-body .model-badge-wrapper {
  opacity: 0;
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box .box-header,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box .box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box .box-header .icon-toggle-button,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box .box-header .icon-toggle-button {
  color: #252525;
  font-size: 18px;
  transition: 0.3s;
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box .box-body,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box .box-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 0.3s;
  padding: 15px;
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box .box-body .model-name,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box .box-body .model-name {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box .box-body .model-name .icon-uncheck,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box .box-body .model-name .icon-uncheck {
  display: block;
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box .box-body .model-name .icon-check,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box .box-body .model-name .icon-check {
  display: none;
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box .box-body .model-name.selected .icon-uncheck,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box .box-body .model-name.selected .icon-uncheck {
  display: none;
}
.report-sum-unit-price.by-category .selection-box-wrapper .boxs-list .box .box-body .model-name.selected .icon-check,
.report-standard-price.by-category .selection-box-wrapper .boxs-list .box .box-body .model-name.selected .icon-check {
  display: block;
}
.report-sum-unit-price.by-category .model-badge-wrapper,
.report-standard-price.by-category .model-badge-wrapper {
  display: flex;
  align-items: center;
  gap: 7px;
}
.report-sum-unit-price .selection-box-wrapper .treelist-toolbar-flex,
.report-standard-price .selection-box-wrapper .treelist-toolbar-flex {
  width: 100%;
  margin: 0 auto;
  padding-right: 8px;
}
.report-sum-unit-price .selection-box-wrapper .filter-project,
.report-standard-price .selection-box-wrapper .filter-project {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}
.report-sum-unit-price .selection-box-wrapper .filter-project #filterProjectTagBox,
.report-standard-price .selection-box-wrapper .filter-project #filterProjectTagBox {
  flex: 1 1 auto;
}
.report-sum-unit-price .selection-box-wrapper .filter-text,
.report-standard-price .selection-box-wrapper .filter-text {
  flex: none;
}
.report-sum-unit-price .selection-box-wrapper .filter-text .dx-texteditor-input-container,
.report-standard-price .selection-box-wrapper .filter-text .dx-texteditor-input-container {
  padding: 2px 8px;
  min-height: 20px;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list,
.report-standard-price .selection-box-wrapper .boxs-list {
  margin-right: 0px;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box-wrapper,
.report-standard-price .selection-box-wrapper .boxs-list .box-wrapper {
  padding: 0 0 15px 15px;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box,
.report-standard-price .selection-box-wrapper .boxs-list .box {
  height: auto;
  border: 1px solid #ececec;
  border-radius: 5px;
  background-color: #ffffff;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box .box-header,
.report-standard-price .selection-box-wrapper .boxs-list .box .box-header {
  background-color: #ececec;
  padding: 13px 15px;
  font-weight: 700;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box .box-header > span,
.report-standard-price .selection-box-wrapper .boxs-list .box .box-header > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box .box-body,
.report-standard-price .selection-box-wrapper .boxs-list .box .box-body {
  padding: 5px 13px 15px;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box .box-body .total-amount-wrapper,
.report-standard-price .selection-box-wrapper .boxs-list .box .box-body .total-amount-wrapper {
  display: flex;
  padding-bottom: 7px;
  gap: 15px;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box .box-body .total-amount-wrapper .item,
.report-standard-price .selection-box-wrapper .boxs-list .box .box-body .total-amount-wrapper .item {
  flex: 1 1 50%;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box .box-body .total-amount-wrapper .item > span,
.report-standard-price .selection-box-wrapper .boxs-list .box .box-body .total-amount-wrapper .item > span {
  display: block;
  text-align: center;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box .box-body .total-amount-wrapper .total-amount,
.report-standard-price .selection-box-wrapper .boxs-list .box .box-body .total-amount-wrapper .total-amount {
  font-size: 1.5em;
  font-weight: 700;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box .box-body .group-price,
.report-standard-price .selection-box-wrapper .boxs-list .box .box-body .group-price {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: space-between;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box .box-body .group-name,
.report-standard-price .selection-box-wrapper .boxs-list .box .box-body .group-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-sum-unit-price .selection-box-wrapper .boxs-list .box .box-footer,
.report-standard-price .selection-box-wrapper .boxs-list .box .box-footer {
  padding: 13px 15px;
  text-align: center;
}
.report-sum-unit-price .selection-box-wrapper .free-space,
.report-standard-price .selection-box-wrapper .free-space {
  display: block;
  width: 100%;
  height: 200px;
}
.report-sum-unit-price .selected-compare-list,
.report-standard-price .selected-compare-list {
  position: fixed;
  bottom: 0;
  left: 80px;
  right: 0;
  display: block;
  height: auto;
  margin-top: 20px;
  background-color: #ffffff;
  padding: 10px 30px 15px;
  box-shadow: 0 -12px 20px 0 rgba(13, 12, 138, 0.07);
}
.report-sum-unit-price .selected-compare-list .title,
.report-standard-price .selected-compare-list .title {
  display: flex;
  gap: 30px;
  align-items: center;
  padding-bottom: 7px;
  font-size: 14px;
  font-weight: 700;
}
.report-sum-unit-price .selected-compare-list .title .remark,
.report-standard-price .selected-compare-list .title .remark {
  float: right;
  font-size: 12px;
  color: #ec9397;
}
.report-sum-unit-price .selected-compare-list .title .button-right,
.report-standard-price .selected-compare-list .title .button-right {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
.report-sum-unit-price .selected-compare-list .select-report-cirteria,
.report-standard-price .selected-compare-list .select-report-cirteria {
  display: flex;
  align-items: center;
  gap: 15px;
}
.report-sum-unit-price .selected-compare-list .select-report-cirteria .period-wrapper,
.report-standard-price .selected-compare-list .select-report-cirteria .period-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}
.report-sum-unit-price .selected-compare-list .inner-wrapper,
.report-standard-price .selected-compare-list .inner-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 15px;
  padding: 15px 0;
}
.report-sum-unit-price .selected-compare-list .selected-compare-box,
.report-standard-price .selected-compare-list .selected-compare-box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 70px;
  width: 200px;
  border: 1px solid #ececec;
  border-radius: 5px;
  padding: 15px 15px 15px 7px;
  background-color: #ececec;
}
.report-sum-unit-price .selected-compare-list .selected-compare-box span,
.report-standard-price .selected-compare-list .selected-compare-box span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.report-sum-unit-price .selected-compare-list .no-compare-list,
.report-standard-price .selected-compare-list .no-compare-list {
  display: block;
  position: relative;
  width: 100%;
  height: 145px;
}
.report-sum-unit-price .selected-compare-list .no-compare-list span,
.report-standard-price .selected-compare-list .no-compare-list span {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.report-standard-price .selected-compare-list .selected-compare-box {
  height: 56px;
  width: 140px;
}
.report-standard-price .period-display-text {
  font-size: 16px;
}

.sum-unit-price-compare-chart-popup .chart-legend {
  padding-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px;
  padding-left: 80px;
}
.sum-unit-price-compare-chart-popup .chart-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
}
.sum-unit-price-compare-chart-popup .chart-legend .legend-item .legend-color {
  display: block;
  width: 15px;
  height: 15px;
}
.sum-unit-price-compare-chart-popup .chart-legend .legend-item .legend-text {
  font-size: 12px;
}
.sum-unit-price-compare-chart-popup .chart-legend .legend-item.is-hide {
  opacity: 0.5;
}
.sum-unit-price-compare-chart-popup .dx-toolbar-item-content div {
  line-height: 40px;
}

.boq-model-image-wrapper {
  position: relative;
  width: 100%;
  height: 365px;
  padding: 1px;
  border: 0.5px solid #848da2;
}
.boq-model-image-wrapper .boq-model-image {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 1;
}

.no-data-change-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.no-data-change-wrapper span {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

.export-chart-wrapper {
  position: absolute;
  top: 15px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.paste-textbox-wrapper {
  position: relative;
  display: block;
  width: 100%;
}
.paste-textbox-wrapper .icon-paste {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  width: 16px;
  height: 16px;
  background-position: 0 0;
  background-size: 16px 16px;
  padding: 0;
  text-align: center;
  font-size: 13px;
  color: rgba(148, 148, 148, 0.87);
  left: 7px;
  z-index: 1;
}
.paste-textbox-wrapper .dx-texteditor.dx-editor-outlined .dx-texteditor-input {
  padding-left: 24px;
}
.paste-textbox-wrapper .dx-placeholder {
  left: 16px;
  padding-left: 0;
}

.spliter-or-wrapper {
  position: relative;
  display: block;
  padding: 3px 0;
  text-align: center;
  height: 10px;
}
.spliter-or-wrapper .text {
  position: relative;
  top: -11px;
  display: inline-block;
  padding: 2px 4px;
  background-color: #fff;
  font-size: 10px;
  color: #848da2;
  z-index: 2;
}
.spliter-or-wrapper .line {
  position: absolute;
  top: 2px;
  left: 0;
  background-color: #d1d3d8;
  height: 0.5px;
  width: 100%;
  z-index: 1;
  left: 0;
}/*# sourceMappingURL=style.css.map */