.user-group-page__operation {
  display: inline-block;
  width: 102px;
  height: 100px;
  padding: 18px 0;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
  border: 1px solid #F0F2F5;
  position: relative;
  right: 86px;
  top: 21px;
}

.user-group-page__operation::before {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background-color: #FFFFFF;
  transform: rotate(-45deg);
  border-top: 1px solid #F0F2F5;
  border-right: 1px solid #F0F2F5;
  top: -4px;
  right: 14px;
}

.user-group-page__operation-item {
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #3F4755;
  cursor: pointer;
}

.user-group-page__operation-item:hover {
  color: #2879ff;
  background: #F7F8FA;
}

.user-group-page__operation-item > span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.user-group-page .rc-dialog {
  margin-top: 200px !important;
}

.user-group-page__dialog-add-group-title {
  margin-top: 14px;
  font-size: 12px;
  color: #3F4755;
}

.user-group-page__tree .rc-tree {
  height: 100vh;
}

.user-group-page__tree .rc-tree-list {
  height: 82vh;
  overflow-y: auto;
}

.user-group-page__tree-empty {
  margin: 74px 0 0 46px;
}

.user-group-page__tree-empty > img {
  position: relative;
  top: -1px;
}

.user-group-page__tree-header {
  padding: 18px 13px 5px 20px;
  height: 42px;
  background: #FFFFFF;
  margin-bottom: 7px;
  box-sizing: border-box;
}

.user-group-page__tree-header-link-title {
  color: #2879FF;
  cursor: pointer;
}

.user-group-page__tree-header-link-add {
  width: 12px;
  height: 12px;
  margin-left: 4px;
  position: relative;
  top: -1px;
  cursor: pointer;
}

.user-group-page__tree .rc-tree-treenode {
  line-height: 32px;
  color: #3F4755;
}

.user-group-page__tree .rc-tree-treenode:hover {
  background: #F7F8FA;
}

.user-group-page__tree .rc-tree-treenode-selected {
  background-color: #F7F8FA;
  color: #2879FF;
}

.user-group-page__tree-node {
  display: inline-block;
  position: relative;
  height: 32px;
  box-sizing: border-box;
  cursor: pointer;
}

.user-group-page__tree-node-text {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 32px;
  font-size: 12px;
  padding: 0 0 0 40px;
  font-weight: 400;
  line-height: 32px;
}

.user-group-page__tree-node-text > span {
  display: inline-block;
  white-space: nowrap;
  width: 110px;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-group-page__tree-node-text::before {
  display: inline-block;
  position: absolute;
  content: "";
  left: 20px;
  top: 11px;
  width: 12px;
  height: 12px;
  background: url(../images/node-icon.svg) transparent no-repeat 50% 50%;
}

.user-group-page__tree-node-action {
  display: inline-block;
  position: absolute;
  content: "";
  right: 0;
  top: 2px;
}

.user-group-page__tree-node-action > img {
  width: 10px;
  height: 10px;
  position: absolute;
  right: -3px;
  top: 10px;
}

.rc-trigger-mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #373737;
  background-color: rgba(55, 55, 55, 0.6);
  height: 100%;
  filter: alpha(opacity=50);
  z-index: 1050;
}

.rc-trigger-mask-hidden {
  display: none;
}

.rc-trigger-fade-enter, .rc-trigger-fade-appear {
  opacity: 0;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  animation-play-state: paused;
}

.rc-trigger-fade-leave {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  animation-play-state: paused;
}

.rc-trigger-fade-enter {
  animation-name: rcTriggerMaskFadeIn;
  animation-play-state: running;
}

.rc-trigger-fade-enter-active {
  animation-name: rcTriggerMaskFadeIn;
  animation-play-state: running;
}

.rc-trigger-fade-appear {
  animation-name: rcTriggerMaskFadeIn;
  animation-play-state: running;
}

.rc-trigger-fade-appear-active {
  animation-name: rcTriggerMaskFadeIn;
  animation-play-state: running;
}

.rc-trigger-fade-leave {
  animation-name: rcDialogFadeOut;
  animation-play-state: running;
}

.rc-trigger-fade-leave-active {
  animation-name: rcDialogFadeOut;
  animation-play-state: running;
}

@keyframes rcTriggerMaskFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes rcDialogFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
