[data-module=um] .main-content.orgchart-main-content {
    display: flex;
    flex-direction: row;
}
[data-module=um] .item-orgchart-content {
    display: flex;
    /* margin: 0px 0px 0px 10px; */
    flex: 1 0 0;
    overflow: hidden;
    flex-direction: column;
}
[data-module=um] #headbar {
    height: 60px;
    border-bottom: 4px solid var(--main-key-border-color);
    background: none;
    padding: 0;
}

[data-module=um] .item-content {
    display: flex;
    margin: 0 10px;
    flex-grow: 1;
    overflow: hidden;
}

[data-module=um] .item-list-container {
    margin-right: 10px;
    flex-basis: 300px;
    flex-shrink: 0;
    max-width: 300px;
}

[data-module=um] .item-detail-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-module=um] .tabs-info {
    overflow: hidden;
    /* flex-grow: 1; */
    height: 100%;
    flex-shrink: 1;
}


.orgchart-menu-content .orgchart-container {
    flex: 1;
    border: none;
}
.content-modal-body .orgchart-container {
    height: calc(100vh - 55px - 20px - 46px);
}

.orgchart-menu-content {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

#orgchart-wrap-container {
    flex: 1;
    overflow: auto;
}

#orgchart-container {
    margin-left: 10px;
}
#orgchart-container,
#orgchart-wrap-container,
.orgchart-menu-content>.orgchart-content {
    display: flex;
}
[data-module=um] .orgchart-menu-content .orgchart-container {
    background-color: #f0eeee !important;
    margin: 0;
    padding: 10px;
    height: 100%;
}

.orgchart-content .orgchart {
    background-image: none;
}
.orgchart-content {
    flex: 1;
    background-color: #f0eeee !important
}

.orgchart-menu-content .orgchart-header {
    padding: 8px;
    border-bottom: solid #d8d8d8 1px;
    display: flex;
    justify-content: space-between;
}

.search-org-container {
    width: 300px;
}

.view-selector {
    display: flex;
    align-items: center;
}

.view-selector .ant-select {
    width: 100%;
    margin-left: 10px;
}

.unspec-header-container {
    display: flex;
    align-items: center;
    border-bottom: var(--normal-button-border);
    padding-bottom: 5px;
}
.unspec-user-sidebar {
    transition: 0.3s;
    overflow-y: hidden;
    height: calc(100vh - 55px);
    max-width: 250px;
    background-color: var(--base-background);
    padding: 10px;
}
.unspec-user-sidebar.sidebar-collapse { 
    background-color: var(--base-background);
    overflow: hidden;
}
.sidebar-expand{
    transition: 0.3s;
    width: 240px;
}
.unspec-user-sidebar .properties-title {
    height: 45px;
    vertical-align: middle;
    display: flex;
    align-items: center;
}

.unspec-user-sidebar .unspec-user-item-container {
    overflow-y: auto;
    overflow-y: auto;
    height: calc(100% - 45px);
    overflow-x: hidden;
}

.unspec-user-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border: solid 1px #DCDCE6;
    border-radius: 5px;
    margin: 5px 0;
    background-color: white;
}

.unspec-user-container .circle-avatar {
    margin: 0;
    margin-right: 10px;
}

.orgchart-button-container,
.orgchart-tool-right-side,
.unspec-user-container .unpsec-user-leading {
    display: flex;
    align-items: center;
}
.unpsec-user-leading .user-avatar-container{
    margin-right: 5px;
}

.orgchart-button-container {
    justify-content: space-between;
    margin-right: 15px;
    margin-left: 10px;
}

.orgchart-button-container>button {
    margin-right: 5px;
    background-color: #F5F5F7;
    font-weight: bold;
}

.orgchart-tool-right-side {
    justify-content: space-between;
}

.unspec-user-container .edit-user-icon {
    background-image: url(/app/common/img/commonIcon/edit-icon-with-border.svg);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}

.drop-user-placeholder {
    background-color: skyblue;
    border: blue dashed 2px;
}

.current-node-container .node-position-container {
    display: none;
}

.current-node-container input,
.current-node-container {
    width: 100% !important;
}

 .search-org-container .react-select [class*=-Input]{
    width: 100%;
 }
 .search-org-container .react-select [class*=-Input] div:first-child{
     display: block !important;
 }

 .zoom-control-container {
     position: absolute;
     z-index: 60;
     margin-left: 20px;
     margin-top: 30px;
 }
 [data-module=um] .zoom-control-container div {
     margin-top: 0;
 }
 [data-module=um] .zoom-control-container .zoom-out-button {
     margin-top: 5px;
 }
 
 .department-option-container {
     display: flex;
     align-items: center;
     margin-left: 10px;
 }
[data-module=um] .no-user {
  color: var(--disabled-textfield-background);
  text-align: center;
  font-style: italic;
  padding-top: 50px;
}

[data-module=um] .group-item-list .list .list-item-detail .list-item-detail-label,
[data-module=um] .group-item-list .list .list-item-detail .list-item-detail-label .list-item-label,
[data-module=um] .user-item-list .list .list-item-detail .list-item-detail-label,
[data-module=um] .collapse-profile .item-profile .ant-collapse-content .profile-data {
  padding-left: 0;
}

[data-module=um] .group-item-list .search-input-container,
[data-module=um] .group-item-list .list,
[data-module=um] .user-item-list .search-input-container,
[data-module=um] .user-item-list .list {
  margin-left: 0;
  margin-right: 0;
}

/* custom style when show both filter and sort */
[data-module=um] [data-module=item-list] .option-list {
  display: block;
}

[data-module=um] .list-option-container:not(:last-child) {
  border-right: 0;
}

[data-module=um] .sort-container {
  font-size: 12px;
}

[data-module=um] .filter-container {
  margin-top: 0;
  margin-left: 0;
  border-bottom: 1px solid var(--main-key-border-color);
}

#phone-input-container .text-list-input-container .input-container {
  border: 1px solid var(--main-key-border-color);
  border-radius: 5px;
}

#phone-input-container #phone-input,
#phone-input-container .text-list-input-separator,
#phone-input-container #extension-input {
  border: 0 !important;
}

/* orgchart */
.orgchart>ul>li>ul li>.oc-node::before,
.orgchart>ul>li>ul li:only-child::before,
.orgchart ul li .oc-node:not(:only-child):not(:last-child)::after {
    width: 1px !important;
    color: var(--main-text-color);
}
.orgchart>ul>li>ul li::before {
    top:-10px !important;
    border-width: 1px !important;
}
.orgchart ul li .oc-node:not(:only-child):not(:last-child)::after {
    bottom: -12px !important;
}
/* style in content modal */
.modal-content .orgchart ul li .oc-node:not(:only-child):not(:last-child)::after { 
    bottom: -42px !important;
    height: 44px !important;
}
.modal-content .orgchart ul li .oc-node {
    margin-bottom:50px
}
.orgchart-container {
    background-color: transparent !important;
}

.oc-hierarchy { 
    border-radius: 5px !important;
}

.properties-sidebar .search-container {
    margin: 5px 10px
}

.empty-avatar .ant-avatar > img { 
    object-fit: scale-down;
}
.orgchart-content [class^=zoom][class$=button] {
    border-radius: 4px;
    box-shadow: 0 3px 6px #00000029;
}

.orgchart .oc-hierarchy .section-container {
    z-index: 50 !important;
}

.orgchart ul li .oc-node.selected {
    background-color: transparent !important;
}

.no-padding .ant-modal-body #orgchart-wrap-container{
    height: calc(100vh - 60px);
    overflow: hidden;
}

.oc-hierarchy .section-container .container-name {
    font-weight: bold;
}
.position-section{
    margin-right: 120px;
}