[class*="-input-placeholder"] {
  color: var(--subtitle-text-color);
  font-weight: 500;
  font-size: 12px;
}

[class*="-modal-container"] .input-item-container {
  padding: 5px 0;
}

[class*="-modal-container"] .input-item-container .info {
  margin-top: 5px;
}

[class*="-modal-container"] .input-item-container .checkbox-element {
  margin-top: 10px;
}

.default-label {
  color: var(--main-placeholder-color);
  margin: 0px 20px 0px 8px;
}

.remove-from-list-btn:after {
  content: "";
  width: 10px;
  height: 2px;
  background: #aaaaaf;
}

.list-input-container {
  display: flex;
  width: 100%;
}

.list-input-val {
  flex: 1 0;
}

.add-to-list-btn {
  background: var(--main-key-color);
  width: 40px;
  height: 32px;
  border-radius: 5px;
  margin-left: 10px;
  color: #ffffff;
  border: none;
}

.phone-input-placeholder {
  display: flex;
  align-items: center;
  flex: 1;
}

.phone-placeholder {
  flex: 1;
}

.extension-placeholder {
  flex-basis: 160px;
  flex-shrink: 0;
}

.section-label {
  display: flex;
  justify-content: space-between;
  color: var(--main-text-color);
  font-size: 16px;
  font-weight: bold;
}

.checkbox-element {
  display: flex;
  align-items: center;
}
#open-form-editor-pdf-desc {
  font-style: italic;
  color: var(--subtitle-text-color);
  font-weight: normal !important;
  padding:0;
}

.test-query-description{
  font-style: normal !important;
  margin-left: 10px;
}

.test-query-description,
.check-box-description {
  font-style: italic;
  color: var(--subtitle-text-color);
}

.checkbox-disable-text {
  font-style: italic;
  font-size: 13px;
  color: #9696a0;
  margin-left: 15px;
}

.input-checkbox-label {
  margin-left: 5px;
}

.input-container .react-select[class*="-input"] {
  width: 100%;
}

.label-element {
  margin-left: 10px;
  color: var(--main-text-color);
  line-height: 12px;
  font-size: 14px;
}

#extension-input {
  flex-basis: 110px;
  flex-shrink: 0;
}

.other-info {
  color: var(--subtitle-text-color);
  font-style: italic;
}

.required-mark {
  color: #c81928;
  display: inline-block;
  margin: 0 2px;
}

.input-button {
  border: 1px solid var(--disabled-textfield-background);
  background: var(--base-background);
  border-radius: 5px;
  font-weight: bold;
  color: var(--main-text-color);
  /* line-height: 36px; */
  padding: 6px 10px;
}

.set-color {
  cursor: pointer;
  border-radius: 4px;
  width: 120px;
  height: 34px;
}

.icon-item {
  width: 20px;
  height: 20px;
}

.template-input .icon-item {
  margin-right: 12px;
}

.icon-item-big {
  width: 30px;
  height: 30px;
  margin-right: 12px;
}

.select-container {
  display: flex;
}

.info {
  font-style: Italic;
  font-size: 12px;
  color: var(--subtitle-text-color);
}

.input-label {
  padding-left: 10px;
}
.input-label.bold {
  font-weight: bold;
}

.check-label {
  padding-left: 203px;
}

.checkin-label {
  color: #419b4b;
}

.check-container {
  display: flex;
}

.checkin-log-container {
  padding-bottom: 30px;
  padding-top: 10px;
}

.password-label {
  margin-right: 2px;
  height: 7px;
  width: 7px;
  background-color: #50505a;
  border-radius: 50%;
  display: inline-block;
}

.password-label-container {
  padding-left: 10px;
}

.placeholder-flex {
  flex: 0.5 0;
}

.value-flex {
  flex: 1 0;
}

.richtext-label-form p {
  margin: auto;
  line-height: 1.6;
}

/* USER PROFILE CSS */
#user-profile-detail-container {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

#user-profile-detail-container .user-profile-avatar-section {
  width: 230px;
}

#user-profile-detail-container #user-profile-avatar-container {
  margin: 6px 0px 0px 31px;
  font-size: 30px;
}

.user-profile-placeholder-list,
.user-profile-value-list {
  margin: 20px 0px 0px 0px;
}

.user-profile-text-input-placeholder {
  text-align: left;
  font: normal normal bold 12px/40px Lato;
  color: var(--subtitle-text-color);
  letter-spacing: 0px;
  opacity: 1;
}

.user-profile-text-input-value {
  text-align: left;
  font: normal normal bold 14px/40px Lato;
  letter-spacing: 0px;
  color: var(--main-text-color);
  opacity: 1;
}

#user-profile-divider {
  margin: 16px 0px 16px 0px;
}

.section-line {
  align-items: flex-end;
  border-bottom: 1px solid var(--disabled-textfield-background);
  padding-bottom: 2px !important;
  margin-bottom: 5px;
}

.item-section {
  margin-bottom: 10px;
}

.apply-date-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.end-of-quarter-container {
  margin-left: 10px;
}

.enable-user-input-checkbox input[type="checkbox"]:checked {
  position: absolute;
}

.radio-enable-user-container {
  margin-left: 23px;
}

.radio-without-title .radio-enable-user-container {
  margin-left: 0;
  margin-bottom: 15px;
}

.enable-date-input {
  width: 300px;
  margin-left: 20px;
  height: 30px;
  margin-top: 5px;
}

.radio-select-date-input,
.select-date-input {
  width: 300px;
  margin-left: 25px;
  height: 30px;
  margin-top: 5px;
}

.mail-list-create-label {
  color: var(--main-text-color);
  font: normal normal normal 14px/17px Lato;
  letter-spacing: 0;
  opacity: 1;
  padding-left: 20px;
}

.action-text-element-container {
  display: flex;
  align-items: center;
}

.text-action-btn {
  border: 1px solid var(--main-border-color);
  border-radius: 5px;
  width: 70px;
  height: 32px;
  background: var(--base-background) 0% 0% no-repeat padding-box;
  text-align: center;
  font: normal normal bold 14px/32px Lato;
  letter-spacing: 0px;
  color: var(--main-text-color);
  margin-left: 10px;
  cursor: pointer;
}

.text-action-btn:hover {
  background-color: var(--hover-normal-button-backgorund);
  border-color: var(--hover-normal-button-border);
}

#code-detail {
  white-space: pre;
}

#mail-detail-input-container .mail-detail-input.rich-text-editor {
  min-height: 300px !important;
}

.no-item-section-label {
  font-style: italic;
  color: gray;
  padding-left: 10px;
}

.subtitle-text {
  color: var(--subtitle-text-color);
}

.margin-input {
  margin-right: 10px;
}

.margin-tab {
  margin-left: 27px;
}

.sub-section,
.icon-list-margin,
.indent-section {
  margin-left: 10px;
}

.sub-section-indent {
  margin-left: 20px;
}

.sub-section-title {
  margin-left: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.rfid-appointment {
  width: 300px;
}

.disabled-label {
  color: rgb(161, 161, 161);
}

.info-absolute {
  margin-bottom: 10px;
}

.disabled-label {
  color: rgb(168, 168, 168);
}

.empty-value {
  color: #bebec8;
  font-weight: normal !important;
}
.empty-value.empty-tag {
  font-style: italic;
}

.warning-section-desc {
  color: #f57823;
  font-weight: normal;
  font-size: 14px;
  margin-left: 10px;
}

.section-name-container {
  display: flex;
  align-items: center;
}

.danger-label {
  color: var(--main-red-color);
}

.ant-btn.section-btn {
  background-color: #f5f5f7;
  font-weight: bold;
}

.section-popover-container {
  width: 200px;
  padding: 10px;
}

.section-popover-container button:hover,
.section-popover-container button {
  background-color: #f5f5f7;
}

.section-popover-container-input {
  display: flex;
  align-items: center;
}

.default-plan {
  color: var(--main-active-color);
}
.input-label.bold .default-plan {
  font-weight: normal;
}

.default-plan > .input-container {
  margin-top: 2px;
}

.item-input-value-container {
  display: flex;
}

.add-to-list-button {
  border-radius: 20%;
  font-size: 12px;
  margin-left: 5px;
}

.link-label {
  color: var(--main-highlight-color);
  cursor: pointer;
}

.rich-text-editor {
  resize: vertical;
}

.form-collapse {
  border: none !important;
  background-color: transparent !important;
}

.form-collapse .ant-collapse-content-box {
  padding: 0px !important;
}

.form-collapse .ant-collapse-item,
.form-collapse .ant-collapse-content {
  border: none !important;
}

.dependencies-section-header::before,
.subtask-section-header::before,
.comments-history-section-header::before,
.subflow-section-header::before,
.task-attachments-section-header::before {
  content: "-";
  height: 12px;
  width: 12px;
  background-color: #bebec8;
  border-radius: 100%;
  color: transparent;
  margin-right: 5px;
  display: inline-block;
}
.subtask-section-header,
.dependencies-section-header,
.comments-history-section-header,
.subflow-section-header,
.task-attachments-section-header {
  padding-left: 0px !important;
  text-align: left;
  font: normal normal bold 12px Lato;
  color: var(--main-placeholder-color) !important;
  opacity: 1;
  display: flex;
  align-items: center;
}

.member-list-container {
  display: flex;
  flex-wrap: wrap;
}

.member-list-container > .member-item-container {
  flex: 50%;
  margin-bottom: 10px;
}
.member-item-container .member-count {
  color: var(--main-placeholder-color);
}
.tag-list {
  flex-wrap: wrap;
  font-weight: bold;
  display: flex;
}

.member-item-container {
  margin: 10px 0px 10px 0px;
  padding-left: 0;
}

.list-input-container:hover .change-default-mail-btn {
  display: flex;
}

.change-default-mail-btn {
  display: none;
  align-items: center;
  color: var(--main-key-color);
  font: normal normal normal 14px Lato;
  cursor: pointer;
  margin: 0px 20px 0px 8px;
}

.subject-scope-container {
  margin-left: 20px;
}

.empty-state-of-apply-policy {
  padding-top: 30px;
  text-align: center;
  color: var(--disabled-textfield-background);
  opacity: 1;
  font: 14px/17px Lato;
  letter-spacing: 0;
}

.ant-btn:disabled:hover {
  color: rgba(0, 0, 0, 0.25) !important;
  border-color: #d9d9d9 !important;
}

#task-info-section-label-text {
  display: none;
}
.department-color-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.department-color {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  margin-bottom: 10px;
}
.rich-text-editor-wrapper .description-input.rich-text-editor {
  max-height: calc(100vh - (50px * 2) - 55px - (24px * 2) - 45px) !important;
  /* decrip of calc heigh 100 view height 50px*2 is top and bottom of modal 50px, 55px is height of modal header, 
  24px*2 is padding top/bottom of modal body, and 45px is space for richtext tool and section text  */
}

.ant-timeline-item:not(#current-task-label) {
  padding-bottom: 8px !important;
}

.ant-timeline-item#current-task-label {
  padding-bottom: 10px;
}

.collapse-arrow {
  background-image: url(/app/common/img/commonIcon/drillright_cursor.svg);
  width: 20px;
  height: 20px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
}
.collapse-arrow.active {
  background-image: url(/app/common/img/commonIcon/drilldown_cursor.svg);
}

#subtask-section
  .ant-collapse-icon-position-right
  > .ant-collapse-item
  > .ant-collapse-header
  .ant-collapse-arrow,
#dependencies-section
  .ant-collapse-icon-position-right
  > .ant-collapse-item
  > .ant-collapse-header
  .ant-collapse-arrow,
#comment-section
  .ant-collapse-icon-position-right
  > .ant-collapse-item
  > .ant-collapse-header
  .ant-collapse-arrow,
#attachment-section
  .ant-collapse-icon-position-right
  > .ant-collapse-item
  > .ant-collapse-header
  .ant-collapse-arrow {
  right: 0px;
}

.add-item-subtask {
  color: var(--main-key-color);
  cursor: pointer;
}

.date-time-picker-input-container .ant-input-suffix {
  pointer-events: none;
}

.content-modal-tagger .ant-input-affix-wrapper {
  width: 50%;
  padding-right: 5px;
}

#searchComment {
  padding-right: 50px;
}

.bottom-space {
  margin-bottom: 30px;
}

#default-display-section {
  display: flex;
  align-items: center;
}
.section-btn-list-separator-container {
  display: flex;
  justify-content: end;
  width: 10px;
  height: 100%;
}

.section-btn-list-separator {
  height: 100%;
  border-left: 1px solid var(--main-border-color);
}

.section-btn-container {
  display: flex;
}

.input-label-container {
  display: flex;
}

#requester-detail-container {
  margin-left: 10px;
}

#requester-detail-container > * {
  margin: 0px 4px;
}

#requester-detail-container > *:first-child {
  margin-left: 0px;
}

#requester-detail-container > *:last-child {
  margin-right: 0px;
}

.requester-title {
  color: var(--main-text-color);
}

.requester-subtitle {
  color: var(--subtitle-text-color);
}

.chain-checkbox-item {
  display: flex;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 4px;
}

.chain-checkbox-item input[type="checkbox"]:checked {
  position: absolute;
}

.chain-checkbox-label {
  margin-left: 8px;
}
#chain-react-select-container > * {
  padding: 5px 0px 5px 0px;
}

.select-file-list-container .ant-collapse-content-box {
  padding: 4px 10px 10px 10px;
}

.select-file-list-container .item-list-wrapper {
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdce6;
}

.file-option-container {
  display: flex;
  align-items: center;
}

.file-option-container > * {
  margin: 0px 4px;
}

.file-option-container > *:first-child {
  margin-left: 0px;
}

.file-option-container > *:last-child {
  margin-right: 0px;
}

.file-option-container .icon-item {
  width: 60px;
  height: 50px;
}

.preview-img-on-modal {
  max-width: 300px;
}
hr.three-quarter {
  width: 100%;
}

.workflow-position-avatar-container {
  width: 30px;
  height: 30px;
  min-width: 30px;
  max-width: 30px;
  min-height: 30px;
  max-height: 30px;
  background-color: gray;
  border-radius: 30px;
  margin: 0px 10px;
}
.position-list-wrapper {
  padding: 10px 0;
}
.workflow-position-parent-info-container {
  align-items: center;
}
.workflow-parent-position-container {
  width: 13px;
  height: 13px;
  min-width: 13px;
  max-width: 13px;
  min-height: 13px;
  max-height: 13px;
  background-color: pink;
  border-radius: 13px;
}

#update-subflow-subflow-due-date-input-container {
  width: 300px;
}

.react-select-with-add-item-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#react-select-list-wrapper {
  margin-top: 10px;
  margin-left: 10px;
  font-weight: bold;
}

#react-select-list-wrapper > * {
  padding: 10px 0px;
}

.react-select-label > * {
  padding: 5px 0px;
}

.view-mode-checkbox input[type="checkbox"] {
  cursor: default !important;
}

.view-mode-checkbox .ant-checkbox-wrapper {
  cursor: default !important;
}

.view-mode-checkbox .ant-checkbox {
  cursor: default !important;
}

.execute-next-subflow-button-disabled-button {
  cursor: not-allowed;
  color: var(--disabled-button-color);
  background-color: var(--disabled-button-background);
  border: var(--disabled-button-border);
  padding: 5px 10px 6px 10px;
  border-radius: 5px;
}

.execute-next-subflow-button {
  color: var(--primary-button-color);
  background-color: var(--primary-button-background);
  border: var(--primary-button-border);
  cursor: pointer;
  padding: 5px 10px 6px 10px;
  border-radius: 5px;
}

.execute-next-subflow-button:hover {
  color: var(--hover-primary-button-color);
  background-color: var(--hover-primary-button-background);
  border: var(--hover-primary-button-border);
}

.execute-next-subflow-button:active {
  color: var(--active-primary-button-color);
  background-color: var(--active-primary-button-background);
  border: var(--active-primary-button-border);
}

.execute-next-subflow-button-section-container {
  margin-left: auto;
}
.select-file-list-container .ant-collapse-content {
  overflow: unset;
}

.form-value-input-container {
  display: flex;
  flex-direction: column;
  align-items: end;
}
.form-value-input-container > button {
  width: 150px;
  margin-top: 10px;
}
#reason-log-section .ant-collapse-header {
  padding-left: 20px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.input-checkbox-description-label {
  text-align: left;
  font: italic normal normal 12px Lato;
  letter-spacing: 0px;
  color: var(--main-placeholder-color);
  opacity: 1;
  margin-left: 10px;
}

#view-form-section #form-editor-layout {
   min-height: unset;
   max-height: unset;
   height: auto;
 }
.end-time-picker {
  margin-left: 10px;
  flex-direction: row;
  vertical-align: bottom;
}

.event-display-timepicker .inline-error {
  position: absolute;
}

.end-time-picker::before {
  content: '-';
  margin-right: 10px;
}
.wifi-time-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.wifi-time-element-container {
  display: flex;
  align-items: center;
  flex: 1;
}

.wifi-time-container > .wifi-time-element-container:first-child {
  margin-right: 10px;
}

.wifi-time-element-container > .wifi-element-label {
  margin-left: 5px;
}

.wifi-time-element-container > .ant-input-number {
  width: 120px !important;
}

.more-policy-description {
  right: -30px;
  background-image: url(../img/commonIcon/more-info-icon.svg);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}
.visitor-policy-desc-title {
  color: #9696A0;
  margin-bottom: 5px;
}

.visitor-policy-desc-container {
  padding: 10px;
  min-width: 200px;
}

div.richtext-display-form {
  list-style-position: inside;
}

.form-primary-button {
  background-color: var(--primary-button-background) !important;
  color: var(--primary-button-color) !important;
  border: var(--primary-button-border) !important;
  cursor: pointer;
  border-radius: 5px;
}

.form-primary-button:hover {
  background-color: var(--hover-primary-button-background) !important;
  color: var(--hover-primary-button-color) !important;
  border: var(--hover-primary-button-border) !important;
}

.form-primary-button:active {
  background-color: var(--active-primary-button-background) !important;
  color: var(--active-primary-button-color) !important;
  border: var(--active-primary-button-border) !important;
}