.content-modal-container #close-content-modal-btn {
  mask: url(../../img/commonIcon/close-icon.svg);
  -webkit-mask: url(../../img/commonIcon/close-icon.svg);
  mask-origin: content-box !important;
  -webkit-mask-origin: content-box !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-position: center center !important;
  -webkit-mask-position: center center !important;
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  background: #ffffff;
  padding: 15px 30px 15px 30px !important;
  background-origin: content-box !important;
  display: block !important;
}

.modal-button-group-container {
  margin: 0px 20px 0px 0px;
}

.content-modal-header-btn-disabled {
  background: transparent;
  cursor: not-allowed;
  border-radius: 5px;
  border-color: #FFFFFF;
  color: #FFFFFF;
  opacity: 0.5;
  /* width: 70px; */
  padding: 0px 10px;
  height: 30px;
  line-height: 22px;
  margin-left: 10px;
  font: normal normal bold 14px Lato;
}

.content-modal-container .ant-modal-content {
  border-radius: 0;
  position: fixed;
  top: calc(50px - 0px);
  left: calc((100vw - 720px) / 2);
  right: calc((100vw - 720px) / 2);
  bottom: calc(50px - 0px);
  overflow: hidden;
  color: var(--main-text-color);
}

.transport-permission-search {
  width: 100%;
}

.no-padding .ant-modal-body {
  padding: 0;
}
.fullscreen .ant-modal-content {
  bottom: 0px;
  top: 0px;
  right: 15px;
  left: 15px;
}

.small-modal .ant-modal-content {
  bottom: 20vh;
  top: 20vh;
}

.view-plan .ant-modal-content {
  bottom: 20vh;
  top: 20vh;
}


.content-modal-container .ant-modal-close {
  color: #ffffff !important;
  margin: 12.5px 0px !important;
  border-left: 1px solid #ffffff !important;
}

.content-modal-container .ant-modal-header {
  height: 55px;
  background: var(--modal-header-background);
  border-radius: 0;
  width: 100%;
}

[class*=-modal-container] .content-modal-header {
  width: 100%;
  display: flex;
  align-items: center;
}
.content-modal-container [class*=-modal-title].space-between {
  justify-content: space-between;
}
.content-modal-container [class*=-modal-title].space-between .select-content-modal{
  border-left: none; /* hide border of react select */
}
.content-modal-container [class*=-modal-title] {
  color: var(--modal-header-color);
  font-size: 18px;
  flex-grow: 1;
  /* flex-shrink: 0; */
  display: flex;
  flex: 1;
  /* justify-content: space-between; */
  align-items: center;
  width: 100%;
}

.content-label {
  margin-right: 10px;
}

.hide-close-btn .ant-modal-title {
  margin: 0 20px 0 20px;
}

.content-modal-header-btn-white-button-disabled {
  background-color: var(--disabled-button-background);
  color: var(--disabled-button-color);
  opacity: 1;
  cursor: not-allowed;
  border-color: #FFFFFF;
  border-radius: 5px;
  font: normal normal bold 14px Lato;
  height: 30px;
  line-height: 22px;
  margin-left: 10px;
  min-width: 70px;
  padding: 0px 10px;
}

.content-modal-container .content-modal-header-btn,
.content-modal-container .content-modal-header-btn-white-button {
  background: transparent;
  border-color: #FFFFFF;
  border-radius: 5px;
  color: #FFFFFF;
  cursor: pointer;
  font: normal normal bold 14px Lato;
  height: 30px;
  line-height: 22px;
  margin-left: 10px;
  min-width: 70px;
  padding: 0px 10px;
}

.content-modal-container .content-modal-header-btn:hover {
  background-color: rgba(255,255, 255, 0.20);
}
.content-modal-container .content-modal-header-btn-white-button:hover {
  background-color: var(--main-highlight-color);
  color: white;
}

.content-modal-container .content-modal-header-btn-white-button {
  background: #FFFFFF;
  color: var(--active-app-text-color);
  border: none;
}

.content-modal-container .modal-content {
  display: flex;
}

.content-modal-container .item-avatar-container {
  padding-top: 6px;
  margin-right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0;
}

.user-id-tag {
  background-color: var(--secondary-background);
  color: var(--main-placeholder-color);
  font-size: 12px;
  border-radius: 10px;
  padding: 5px 10px;
  margin-top: 10px;
}

.item-avatar {
  background: #AABCD0;
  border-radius: 50%;
}

.item-avatar-upload-btn {
  color: var(--main-highlight-color);
}

.content-modal-body {
  flex-grow: 1;
  max-width: 100%;
}

[class*=-input-placeholder] {
  color: var(--subtitle-text-color);
  font-weight: 500;
  font-size: 11px;
  /* text-transform: uppercase; */
  display: flex;
  align-items: center;
}

[class*=-input-placeholder].with-icon {
  margin-bottom: 5px;
}

[class*=-input-placeholder] img {
  margin-left: 5px;
}

[class*=-input-placeholder] img:first-child {
  margin-left: 10px;
}

[class*=-modal-container] .show-more-collapse>.ant-collapse-item>.ant-collapse-content>.ant-collapse-content-box {
  padding: 0;
}

[class*=-modal-container] .show-more-collapse>.ant-collapse-item {
  border-bottom: none;
}

.select-file-list-container .ant-collapse-item {
  border-bottom: none;
}

[class*=-modal-container] .show-more-collapse .ant-collapse-header i {
  display: none !important;
}

[class*=-modal-container] .show-more-collapse {
  width: 100%;
}

[class*=-modal-container] .show-more-collapse>.ant-collapse-item>.ant-collapse-header {
  text-align: center;
  color: var(--main-key-color) !important;
}

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

[class*=-modal-container] .collapsible-input-item .ant-collapse-header {
  justify-content: flex-start;
  padding-left: 40px;
  color: var(--main-text-color) !important;
  background: #fff;
  display: flex;
  align-items: center;
}

[class*=-modal-container] .collapsible-input-item .ant-collapse-header .ant-collapse-arrow {
  background-image: url(../../img/commonIcon/collapse-toggle-icon.svg);
  width: 20px;
  height: 20px;
  left: 10px;
  justify-self: flex-end !important;
}

[class*=-modal-container] .collapsible-input-item .ant-collapse-item-active .ant-collapse-header .ant-collapse-arrow {
  transform: translateY(-50%) rotate(90deg);
}

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

#create-date-label-container,
#message-label-container {
  display: flex;
}

#create-date-label-container .text-input-placeholder,
#message-label-container .text-input-placeholder {
  flex: 1;
  align-items: baseline;
  padding-top: 3px;
}

#create-date-label-container .input-container,
#message-label-container .input-container {
  flex: 5;
}

#message-label-container ol {
  padding-left: 15px;
}

[class*=-modal-container] .input-item-container.horizontal-placeholder {
  display: flex;
}

[class*=-modal-container] .input-item-container.horizontal-placeholder>div:first-child {
  flex: 1;
  align-items: start;
  margin-top: 10px;
}

[class*=-modal-container] .input-item-container.horizontal-placeholder>div:nth-child(2) {
  flex: 3;
}

[class*=-modal-container] .collapsible-input-item .ant-collapse-header .collapsible-item-collapse-icon-container>img:not(:last-child) {
  margin-right: 5px;
}

[class*=-modal-container] .collapsible-input-item .ant-collapse-header .collapsible-item-collapse-title {
  flex: 1;
}

.remove-from-list-btn:hover {
  background: url(/app/common/img/commonIcon/remove-icon_hover.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.remove-from-list-btn[disabled] {
  background: url(/app/common/img/commonIcon/remove-icon_disabled.svg);
  cursor: not-allowed;
  background-repeat: no-repeat;
  background-position: center;
}

.remove-from-list-btn {
  background: url(/app/common/img/commonIcon/remove-icon.svg);
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  background-size: 20px 20px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
}

[class*=-modal-container] .list-input-container {
  padding: 7px 10px;
  display: flex;
}

[class*=-modal-container] .list-input-container.hoverable:hover {
  background-color: var(--main-hover-cell);
  cursor: pointer;
}

[class*=-modal-container] .list-input-val {
  flex: 1 0;
  overflow-x: auto;
  word-break: break-word;
}

[class*=-modal-container] .add-to-list-btn {
  background: var(--main-key-color);
  width: 40px;
  height: 32px;
  border-radius: 5px;
  margin-left: 10px;
  color: #FFFFFF;
  border: none;
}

[class*=-modal-container] .phone-input-placeholder {
  display: flex;
  align-items: center;
  flex: 1;
}

[class*=-modal-container] .phone-placeholder {
  flex: 1;
}

[class*=-modal-container] .extension-placeholder {
  flex: 1;
  margin-left: 40px;
  border-left: 0;
}

[class*=-modal-container] .input-container {
  /* display: flex;
  align-items: center;
  flex: 1; */
}

[class*=-modal-container] .section-label {
  color: var(--main-text-color);
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

[class*=-modal-container] .checkbox-element {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

[class*=-modal-container] .checkbox-container {
  display: flex;
  align-items: flex-start;
}

[class*=modal-container] .input-checkbox-label {
  margin-left: 10px;
}

[class*=-modal-container] .input-container .react-select[class*=-input] {
  width: 100%;
  height: 32px;
  padding: 2px;
}

[class*=-modal-container] .label-element {
  margin-left: 10px;
  color: var(--main-text-color);
  line-height: 12px;
  font-size: 14px;
}

.ant-modal .ant-modal-close-x {
  width: 100%;
  height: 100%;
  display: flex;
}

[class*=-modal-container] .x-icon {
  padding: 0 6px;
}

[class*=-modal-container] #extension-input {
  flex-basis: 110px;
  flex-shrink: 0;
  z-index: 0 !important;
}

[class*=-modal-container] .other-info {
  color: var(--subtitle-text-color);
  letter-spacing: 0px;
  color: #9696A0;
  font: italic normal normal 12px Lato;
  margin: 4px 0px 0px 0px;
}

[class*=-modal-container] [class$='-input-item'],
[class*=-modal-container] [class*=-'input-item '],
[class*=-modal-container] .show-more-collapse [class$='-input'] {
  width: 100% !important;
}

[class*=-modal-container] .show-more-collapse>.ant-collapse-item>.ant-collapse-header {
  color: var(--main-highlight-color);
  justify-content: center;
  display: flex;
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid var(--main-border-color);
  margin-top: 20px;
}

.content-modal-container .ant-modal-body {
  height: calc(100% - 55px);
  overflow: auto;
  position: relative;
}

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

[class*=-modal-container] .set-color {
  cursor: pointer;
  border-radius: 4px;
  width: 120px;
  height: 34px;
}

[class*=-modal-container] .select-file {
  flex: 1;
}


[class*=-modal-container] .icon-item {
  width: 20px;
  height: 20px;
}

[class*=-modal-container] .template-container {
  /* border: 1px solid var(--disabled-textfield-background); */
  width: 50%;
  /* padding: 10px; */
  display: flex;
  flex-direction: column;
  height: max-content;
}

[class*=-modal-container] .template-avatar {
  width: 100%;
  height: auto;
}

[class*=-modal-container] .select-container {
  display: flex;
}

[class*=-modal-container] .add-file-btn {
  margin-left: 10px;
}

.select-file-container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.select-file-container .file-selection-container {
  /* padding-left: 10px; */
  width: 100%;
}

.select-file-container .select-file-list-container {
  padding-left: 10px;
  width: 50%;
}

.select-file-input .list-item {
  height: 50px;
  padding: 0;
}

.select-file-input .list-item:not(:last-child) {
  margin-bottom: 10px;
}

.select-file-input .icon-item {
  width: 60px;
  height: 50px;
}

.room-select-container,
.display-select-container {
  width: 300px;
}

.room-dropdown-icon,
.display-dropdown-icon {
  font-size: 14px;
  color: #9696A0;
  font-weight: bold;
}

#room-input-container .css-1okebmr-indicatorSeparator {
  display: block;
  margin-top: 0px;
  margin-bottom: 2px;
  color: #BEBEC8;
}

.room-option-container,
.display-option-container {
  padding-bottom: 7px;
}

.room-name-container,
.display-name-container {
  display: flex;
  justify-content: space-between;
}

.room-name-label,
.display-name-label,
.assigned-label {
  margin-top: 7px;
  font: 14px/18px Lato;
  letter-spacing: 0px;
  color: #50505A;
  opacity: 1;
}

.name-bold {
  font-weight: bold;
}

.room-detail,
.display-detail {
  color: #9696A0;
  font: 14px/18px Lato;
  letter-spacing: 0px;
  text-align: left;
  opacity: 1;
}

.assigned-label {
  color: #9696A0;
  font: 12px/14px Lato;
}

.assigned-text {
  color: #BEBEC8;
}

.current-room-container .room-detail,
.current-display-container .display-detail {
  display: none;
}

.current-room-container .room-option-container,
.current-display-container .display-option-container {
  height: 30px;
}

.room-content-topic,
.display-content-topic {
  text-align: left;
  font: Bold 12px Lato;
  letter-spacing: 0px;
  color: #919196;
  text-transform: uppercase;
  opacity: 1;
}

.room-content-value,
.display-content-value {
  text-align: left;
  font: Bold 14px Lato;
  margin-top: 8px;
  margin-bottom: 10px;
  letter-spacing: 0px;
  color: #50505A;
  opacity: 1;
  margin-left: 8px;
}

.input-number-container {
  width: 300px;
  height: 30px;
}

#seats-value,
#permission-value {
  margin-left: 0px;
}

.user-search-input-container {
  width: 300px;
  height: 30px;
}

.permission-search-input-container.form-search-input-container {
  width: 70%;
}

.no-room-text,
.no-display-text {
  margin-top: 16px;
  margin-bottom: 20px;
  margin-left: 18px;
  margin-right: 18px;
  text-align: center;
  font: 14px/28px Lato;
  letter-spacing: 0px;
  color: #BEBEC8;
  opacity: 1;
}

.open-bms-button:disabled {
  cursor: not-allowed;
  color: var(--disabled-button-color);
}

.open-bms-button {
  width: 140px;
  height: 36px;
  background: var(--normal-button-background) 0% 0% no-repeat padding-box;
  border: var(--normal-button-border);
  border-radius: 5px;
  opacity: 1;
  margin-left: 80px;
  margin-right: 80px;
  margin-bottom: 30px;
  text-align: center;
  font: Bold 14px/18px Lato;
  letter-spacing: 0px;
  color: var(--normal-button-color);
  opacity: 1;
}

.build-floor-lot-select-container {
  display: flex;
}

.build-floor-lot-select-container.header {
  margin-top: 5px;
}

.sub-select {
  width: 100px;
  margin: 0px 10px 0px 10px;
}

.sub-select:last-child {
  margin: 0;
}

.scope-select-container {
  width: 100%;
}

.longBtn {
  width: auto !important;
}

.ant-modal .return-card .ant-modal-close-x,
.ant-modal .return-card .ant-modal-footer {
  display: none;
}

.return-card .ant-modal-header {
  text-align: center;
  background-color: #F5F5F7;
}

#meeting-panel-select-value {
  margin-left: 0px;
  width: 300px;
}

.caret-margin{
  margin-left: 8px;
}
.creator-title-container {
  padding-left: 10px;
  border-left: 1px solid white;
  color: rgba(255, 255, 255, 0.5);
  height: 30px;
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}
.select-content-modal.hide-title {
  padding-left: 0;
  border-left: none;
}
.select-content-modal {
  max-width: 210px;
  background-color: transparent;
  color: black;
  font-size: 14px;
  flex-basis: 210px;
  padding-left: 10px;
  border-left: 1px solid white;
}
#content-modal-switch > .ant-switch{
  height: 30px;
  border-radius: 5px !important;
}

#content-modal-switch > .ant-switch:not(.ant-switch-checked){
  background-color: transparent;
  border: 1px solid white;
}

#content-modal-switch.hide-title {
  border-left: none;
  padding-left: 0;
}
#content-modal-switch {
  padding-left: 10px;
  border-left: 1px solid white;
}

#content-modal-switch > .ant-switch::after {
  height: 25px;
  width: 15px;
  margin-top: 0.5px;
  border-radius: 5px;
}

.ant-switch-inner {
  font-size: 14px;
}

#content-modal-switch > .ant-switch-checked{
  background: #83B597;
}

#modal-index-container {
  width: 120px;
  left: calc(((100vw - 720px) / 2) - 120px);
  top: calc(50px + 55px);
  position: fixed;
}

.menu-index-item {
  border: solid #BEBEC8 1.5px;
  color: #9696A0;
  background-color: white;
  height: 35px;
  width: 120px;
  border-radius: 5px 0px 0px 5px;
  text-align: right;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 5px;
  padding-left: 5px;
  cursor: pointer;
  border-right: none;
  -webkit-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.43);
  box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.43);
}
.menu-index-item:hover{
  color: var(--main-key-color);
}
.menu-index-item:hover > .dot-index{
  background-color: var(--main-key-color);
}

.dot-index {
  width: 15px;
  height: 15px;
  background-color: #DCDCE6;
  border-radius: 100%;
}

#subtask-section .ant-collapse,
#dependencies-section .ant-collapse,
#comment-section .ant-collapse {
  border: none !important;
  background-color: white !important;
}


#subtask-section .ant-collapse-item,
#dependencies-section .ant-collapse-item,
#comment-section .ant-collapse-item {
  border: none !important;
}

#update-project-member-search-member-input-placeholder {
  text-transform: uppercase;
}

.add-members.container {
  margin: 1px;
}

.sync-status-container {
  color: #f57823;
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.sync-status-container .sync-status-fail-icon {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  background-size: 20px 20px;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../../img/storageIcon/some-sync-failed-icon.svg);
  margin-right: 2px;
}
#active-label-text {
  color: var(--main-text-color);
  font: normal normal bold 14px Lato;
  letter-spacing: 0px;
  opacity: 1;
  margin: 0px 0px 20px 0px;
}

div#update-group-chat-detail-section,
div#create-group-chat-detail-section {
  display: flex;
}

div#group-name-input-container {
  flex: 1;
}
#flow-initialize-btn.content-modal-header-btn-disabled {
  background-color: var(--disabled-button-background);
  color: var(--disabled-button-color);
  opacity: 1;
}

#flow-initialize-btn.content-modal-header-btn {
  background-color: #FFFFFF;
  color: var(--main-key-color);
  opacity: 1;
}

#flow-initialize-btn.content-modal-header-btn:hover {
  background-color: var(--main-highlight-color);
  color: white;
}

div[data-module="form-content-modal"] #form-editor-panel-container {
  height: 100%;
}

div[data-module="form-content-modal"] .form-left-panel,
div[data-module="form-content-modal"] .form-middle-panel,
div[data-module="form-content-modal"] .form-right-panel {
  overflow: auto;
}

div[data-module="form-content-modal"] .form-left-panel {
  width: 20% !important;
}

div[data-module="form-content-modal"] .form-middle-panel {
  width: 40% !important;
}

div[data-module="form-content-modal"] .form-right-panel {
  width: 40% !important;
}

div.ant-modal-body div#document-creator-app-container {
  height: 100%;
}