.ant-dropdown-menu-item:hover {
    background: #f0f3f3
  }

  .modalAutoFillHeight .ant-modal-content {
    height: 100%
  }

  .me-common-modal-message {
    margin-top: 20px !important
  }

  .me-common-modal-message .ant-message-notice-content {
    border-radius: 20px !important
  }

  .me-common-modal .ant-modal-content {
    border-radius: 6px;
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .2)
  }

  .me-common-modal .ant-modal-header {
    border-radius: 6px 6px 0 0
  }

  .me-common-modal .ant-modal-footer .ant-btn {
    background: #fff;
    border: 1px solid #dee0e3;
    border-radius: 4px
  }

  .me-common-modal .ant-modal-footer .ant-btn.ant-btn-primary {
    background: #1686ff
  }

  .me-common-modal .primary {
    background-color: #1686ff;
    opacity: 1
  }

  .me-image-preview-common-modal {
    top: 0;
    height: 100%;
    padding-bottom: 0
  }

  .me-image-preview-common-modal .ant-modal-close {
    top: 32px;
    right: 32px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer
  }

  .me-image-preview-common-modal .ant-modal-close .ant-modal-close-x {
    width: 40px;
    height: 40px;
    font-size: 18px;
    line-height: 40px
  }

  .me-image-preview-common-modal .ant-modal-close:hover {
    color: #1686ff
  }

  .me-image-preview-common-modal .ant-modal-mask {
    background: rgba(0, 0, 0, .5)
  }

  .me-image-preview-common-modal .ant-modal-content {
    height: 100%;
    box-shadow: none;
    background-color: transparent
  }

  .me-image-preview-common-modal .ant-modal-content .ant-modal-body {
    height: 100%
  }

  .me-image-preview-common-modal .guide:hover {
    color: #1686ff !important
  }

  .modalUserSelection .ant-modal-content {
    border-radius: 8px !important
  }

  .modalUserSelection .ant-modal-content .ant-modal-header {
    border-radius: 8px 8px 0 0
  }

  .modalUserSelection .ant-modal-close-x {
    display: flex;
    align-items: center;
    justify-content: center
  }

  .appLayout {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #1686ff
  }

  .leftSide {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between
  }

  .userCenter {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px
  }

  .userCenter .userAvatar {
    display: flex;
    width: 35px;
    height: 35px;
    background-color: #fff;
    border-radius: 7px;
    padding: 2px;
    position: relative;
    cursor: pointer
  }

  .userCenter .userAvatar img {
    flex: 1 1;
    background-color: grey;
    border-radius: 7px
  }

  .userCenterNotify {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ff6157;
    border: 2px solid #212b37;
    position: absolute;
    top: -3px;
    right: -3px
  }

  .userCenterPopper {
    width: 330px;
    background-color: #fff;
    background: #fff;
    border: 1px solid #dee0e3;
    border-radius: 3px;
    border-top-left-radius: 12px;
    box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .2);
    z-index: 100
  }

  .rightSide {
    flex: 1 1;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column
  }

  .appToolbarWrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    align-items: center;
    justify-content: space-between;
    display: flex
  }

  .appContent {
    flex: 1 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border-top-left-radius: 12px
  }

  .topBar {
    height: 40px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
  }

  .teamListPopover .ant-popover-inner-content {
    padding: 10px 0 !important
  }

  .focus-search-bar {
    -webkit-app-region: drag
  }

  .focus-search-bar .focus-search-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
  }

  .focus-nav .focus-nav-item {
    color: #8f959e
  }

  .focus-nav .focus-nav-item.active {
    color: #1686ff
  }

  .teamListPopover {
    left: 58px !important
  }

  .teamListPopover .ant-popover-content {
    height: 100%
  }

  .teamListPopover .ant-popover-content .ant-popover-arrow {
    bottom: 20px;
    top: unset
  }

  .teamListPopover .ant-popover-content .ant-popover-inner-content {
    padding: 10px 0 !important;
    max-height: 400px !important;
    overflow-y: auto !important
  }

  .teamPopoverItem {
    padding: 10px;
    cursor: pointer
  }

  .teamPopoverItem:hover {
    background-color: #f0f3f3
  }

  .teamListItem {
    cursor: pointer
  }

  .teamListItem:first-child {
    margin-top: 0 !important
  }

  .userSelectionModalLeft {
    max-width: 400px;
    min-width: 300px;
    display: flex;
    flex: 1 1;
    flex-direction: column;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-right: 1px solid #f0f3f3
  }

  .userSelectionModalLeft ::-webkit-scrollbar {
    width: 4px;
    height: 3px;
    background: hsla(0, 0%, 100%, .3)
  }

  .userSelectionModalLeft .ant-tabs-nav {
    margin: 0 !important;
    padding-left: 24px !important
  }

  .userSelectionModalLeft .ant-tabs-nav .ant-tabs-nav-list .tab-name-icon {
    display: flex;
    align-items: center
  }

  .userSelectionModalLeft .ant-tabs-nav .ant-tabs-nav-list .tab-name-icon .name {
    width: auto;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .userSelectionModalLeft .ant-tabs-nav .ant-tabs-nav-list .tab-name-icon span.anticon {
    margin-right: 0;
    margin-left: 10px;
    color: #bfc1c4
  }

  .userSelectionModalLeft .ant-tabs-content {
    height: 100%
  }

  .userSelectionModalLeft .ant-tabs-content-holder {
    flex: 1 1;
    position: relative
  }

  .userSelectionModalLeft .data-list-container {
    height: 100%;
    position: relative;
    z-index: 99
  }

  .userSelectionModalLeft .ant-tabs-top>.ant-tabs-nav .ant-tabs-ink-bar {
    background-color: #1686ff !important
  }

  .userSelectionModalLeft .ant-tabs-tab-active,
  .userSelectionModalLeft .ant-tabs-tab:hover {
    color: #1686ff !important
  }

  .user-selection-tab {
    flex: 1 1;
    margin-top: 8px
  }

  .user-selection-tab-pane {
    position: relative
  }

  .user-selection-tab-popover-content {
    width: 200px;
    margin: -12px 0
  }

  .user-selection-tab-popover-content .content-divider {
    margin: 4px -16px;
    width: auto
  }

  .user-selection-tab-popover-content .org-title {
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    color: #8f959e
  }

  .user-selection-tab-popover-content .org-list-item.active {
    color: #1686ff
  }

  .user-selection-tab-popover-content .org-list-item {
    overflow: hidden;
    margin: 0 -16px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #000;
    padding: 0 16px;
    cursor: pointer
  }

  .user-selection-tab-popover-content .org-list-item:hover {
    background: #f7f7f7
  }

  .user-selection-tab-popover-content .org-list-item span.item-name {
    width: 160px;
    overflow: hidden;
    white-space: nowrap;
    line-height: 36px;
    text-overflow: ellipsis;
    display: inline-block
  }

  .user-selection-tab-popover-content .org-list-item span.item-icon {
    float: right
  }

  .user-selection-tab-popover-content .org-list-item span.item-icon svg {
    color: #1686ff
  }

  .focus-search-global-input-container {
    margin-top: 16px;
    margin-left: 24px
  }

  .focus-search-global-input {
    outline: 0;
    font-size: 14px;
    box-shadow: none;
    border: 0;
    background-color: #f8f9fa
  }

  .focus-search-global-input input {
    background-color: transparent !important;
    color: #232930
  }

  .focus-search-global-input-prefix {
    color: #8f959e;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 12px
  }

  .focus-user-selection-dept {
    position: absolute;
    width: calc(100% - 40px);
    flex: 1 1;
    height: 60px;
    left: 52px;
    top: 0;
    padding-right: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end
  }

  .focus-user-selection-dept .org-dept-arrow {
    width: 14px;
    height: 14px
  }

  .focus-user-selection-dept.selection-dept-disabled:hover {
    cursor: not-allowed
  }

  .focus-user-selection-dept-arrow {
    color: #8f959e;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
  }

  .focus-user-selection-dept-arrow img {
    width: 12px
  }

  .focus-user-selection-color-gray {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    padding: 0 24px;
    line-height: 40px;
    position: relative
  }

  .focus-user-selection-color-gray span {
    position: absolute;
    height: 1px;
    bottom: 0;
    right: 0;
    left: 24px;
    background: #e8ebec
  }

  .focus-user-selection-dept-avatar {
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #1686ff
  }

  .focus-user-selection-dept-avatar img {
    width: 18px
  }

  .focus-user-selection-org-nav-item {
    color: #8f959e;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    white-space: nowrap;
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 8px
  }

  .focus-user-selection-org-nav-item>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start
  }

  .focus-user-selection-org-nav-item>div .user-selection-item-text {
    color: #8f959e;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .focus-user-selection-org-nav-item>div .user-selection-item-text.active {
    color: #1686ff
  }

  .focus-user-selection-right-item:hover {
    background-color: #f8f9fa
  }

  .focus-user-selection-right-close {
    cursor: pointer;
    color: #8f959e;
    height: 14px;
    line-height: 14px
  }

  .focus-user-selection-right-close.left-close {
    margin: 0 10px 0 -10px
  }

  .focus-user-selection-right-close img {
    width: 16px
  }

  .loading-wrapper .ant-spin-spinning {
    min-height: 330px !important
  }

  .userSelectionModalRight {
    max-width: 400px;
    min-width: 300px;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }

  .userSelectionModalRight .selected-count {
    height: 56px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .userSelectionModalRight .selected-count-number {
    color: #999
  }

  .userSelectionModalRight .strange-result {
    display: flex;
    align-items: center;
    padding: 0 24px
  }

  .userSelectionModalRight .strange-result .stranger-result-count {
    text-align: right
  }

  .userSelectionModalRight .strange-result .stranger-result-list {
    display: flex;
    margin: 0 10px;
    flex: 1 1
  }

  .userSelectionModalRight .strange-result .stranger-result-list .ant-list-items {
    display: flex
  }

  .userSelectionModalRight .strange-result .stranger-result-list .ant-list-items .strange-avatar {
    width: 56px;
    height: 56px;
    font-size: 28px;
    text-align: center;
    display: inline-block;
    margin-right: 10px
  }

  .userSelectionModalRight .ant-select {
    color: #232930 !important
  }

  .userSelectionModalRight .ant-select .ant-select-arrow {
    top: 50% !important
  }

  .userSelectionModalRight .custom-area-extra,
  .userSelectionModalRight .input-container {
    padding: 11px 16px 6px 14px;
    border-top: 1px solid #f0f3f3
  }

  .userSelectionModalRight .strange-input-container {
    border-top: none
  }

  .userSelectionModalRight .strange-input-container textarea {
    height: 64px !important
  }

  .userSelectionModalRight .selected-container {
    flex: 1 1
  }

  .userSelectionModalRight .strangerInputArea {
    padding: 14px 0 0;
    border-top: 1px solid #f0f3f3
  }

  .userSelectionModalRight .strangerInputArea p {
    padding: 0 0 0 14px;
    color: #8f959e
  }

  .crumb-dept-user-container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column
  }

  .crumb-dept-user-container .dept-crumb {
    min-height: 40px;
    max-height: 60px;
    background: #f8f8f8;
    padding: 15px 20px 0 24px;
    overflow-y: auto;
    overflow-y: overlay
  }

  .crumb-dept-user-container .dept-user-container {
    flex: 1 1;
    overflow-y: auto;
    overflow-y: overlay;
    padding: 0
  }

  .groups-container {
    height: 100%
  }

  .groups-container .group-user-container {
    height: 100%;
    display: flex;
    flex-direction: column
  }

  .groups-container .group-user-container .group-users-list {
    flex: 1 1;
    overflow-y: overlay;
    position: relative;
    z-index: 99
  }

  .groups-container .group-user-container .group-allSelect {
    color: #8f959e;
    padding: 0 24px;
    height: 36px;
    line-height: 36px;
    background: #f8f8f8
  }

  .groups-container .group-user-container .group-allSelect span {
    cursor: pointer;
    align-items: center;
    display: flex;
    width: 45px
  }

  .groups-container .group-user-container .group-allSelect span img {
    width: 12px
  }

  .contacts-container {
    overflow-y: overlay;
    height: 100%;
    position: relative;
    z-index: 99
  }

  .data-list-container-item-group-header {
    color: #999;
    padding: 0 24px;
    line-height: 28px;
    font-size: 14px;
    height: 28px
  }

  .data-list-container-header-previewer {
    position: absolute;
    right: 6px;
    z-index: 1;
    width: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end
  }

  .data-list-container-header-previewer>div {
    width: 100%;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }

  .data-list-container-header-previewer>div>div {
    color: #666;
    cursor: pointer;
    transform: scale(1);
    margin-bottom: 2px;
    font-size: 12px
  }

  .data-list-container-header-previewer>div>div:hover {
    color: #1686ff
  }

  .data-list-container-header-previewer>div>div.activeLetter {
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    color: #fff;
    background: #1686ff;
    text-align: center;
    margin: 0 auto 5px
  }

  .ant-popover {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }

  .select-all-item {
    padding: 12px 24px;
    cursor: pointer;
    display: flex;
    align-items: center
  }

  .select-all-item .all-word {
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px
  }

  .select-all-item .ant-checkbox-inner {
    border-radius: 3px
  }

  .select-all-item .ant-checkbox-checked:after {
    border: none
  }

  .select-all-item .ant-checkbox+span {
    padding-right: 8px;
    padding-left: 12px
  }

  .focus-user-selection-footer-extra {
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .focus-user-selection-footer-extra .focus-user-selection-footer-btn {
    width: auto
  }

  .focus-user-selection-footer-extra .focus-user-selection-footer-extra {
    flex: 1 1;
    text-align: left
  }

  .focus-search-global-modal .searchModalTabs .ant-tabs-nav {
    margin: 0;
    padding: 0 24px
  }

  .focus-search-global-modal .searchModalTabs .ant-tabs-content-holder {
    overflow-y: auto;
    overflow: overlay
  }

  .focus-search-global-header {
    border-bottom: 1px solid #f0f3f3
  }

  .focus-search-global-header,
  .focus-search-global-header .header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
  }

  .focus-search-global-header .header-content .header-content-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: #8f959e
  }

  .focus-search-global-header .header-content .header-button-clear {
    color: #8f959e
  }

  .focus-search-global-header .header-tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
  }

  .focus-search-global-header .header-tools .header-tools-split-line {
    background-color: #e8ebec
  }

  .focus-search-global-header .header-tools .header-tools-button-close {
    color: #8f959e
  }

  .focus-create-button .ant-popover-inner {
    overflow: hidden
  }

  .focus-create-button .ant-popover-inner-content {
    padding: 0
  }

  .focus-create-button .ant-popover-inner-content .create-buttons .create-btn-item {
    height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e8ebec;
    font-size: 16px;
    padding: 0 24px;
    cursor: default
  }

  .focus-create-button .ant-popover-inner-content .create-buttons .create-btn-item .icon {
    margin-right: 5px
  }

  .focus-create-button .ant-popover-inner-content .create-buttons .create-btn-item:hover {
    background-color: #3b7bea
  }

  .focus-create-button .ant-popover-inner-content .create-buttons .create-btn-item:last-child {
    border-bottom: 0
  }

  .focusListItem {
    flex: 1 1;
    padding: 12px 24px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    outline: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start
  }

  .focusListItem .item-avatar {
    height: 100%;
    display: flex;
    align-items: center
  }

  .focusListItem .item-content {
    flex: 1 1;
    margin-left: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden
  }

  .focusListItem .item-content h4 {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center
  }

  .focusListItem .item-content h4 .special-tag {
    display: flex;
    margin-top: -2px
  }

  .focusListItem .item-content-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #232930;
    height: 22px
  }

  .focusListItem .item-content-desc {
    color: #8f959e;
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
    text-align: left
  }

  .focusListItem:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #1686ff;
    display: none
  }

  .focusListItem.active,
  .focusListItem:hover {
    background-color: #ebf9fa
  }

  .focusListItem.active:before {
    display: block
  }

  .focusListItem.disabled {
    cursor: default !important
  }

  .focusListItem-tag,
  .focusListItem .item-selector,
  .focusListItem .item-selector .ant-select-selector {
    display: flex;
    align-items: center
  }

  .focusListItem .item-extra {
    margin-right: 0
  }

  .focusListItem .item-extra-hidden {
    width: 14px;
    margin-right: 0
  }

  .focusListItem .ant-checkbox-inner {
    border-radius: 3px
  }

  .focusListItem .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner {
    border: none
  }

  .groupCanBeSel-item-list .item-content-desc {
    direction: inherit
  }

  .me-avatar {
    background-color: #1686ff;
    color: #fff;
    border-radius: 6px;
    position: relative
  }

  .me-avatar .tag {
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0 0 6px 6px;
    right: 0;
    background-color: #ed6a0c;
    font-size: 16px;
    text-align: center;
    zoom: .5
  }

  .me-about-modal {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }

  .me-about-modal .me-about-modal-content {
    border-bottom: 1px solid #e8ebec;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
  }

  .me-about-modal .me-about-modal-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
  }

  .me-about-modal .me-about-modal-footer .me-about-modal-footer-btn {
    color: #1686ff
  }

  .me-about-modal .me-about-modal-footer .me-about-modal-footer-splitline {
    background-color: #e8ebec
  }

  .feedbackModal {
    width: 500px;
    background: #fff;
    border-radius: 6px
  }

  .feedbackModal .feedback-con {
    width: 100%;
    height: 471px;
    text-align: center;
    box-sizing: border-box
  }

  .feedbackModal .feedback-con .feedback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px
  }

  .feedbackModal .feedback-con .feedback-header .header-text {
    font-size: 16px;
    font-family: PingFangSC;
    font-weight: 400;
    color: #232930
  }

  .feedbackModal .feedback-con .feedback-header .header-tabs {
    display: flex;
    align-items: center
  }

  .feedbackModal .feedback-con .feedback-header .header-tabs .header-tab {
    color: #8f959e;
    font-size: 16px;
    cursor: pointer
  }

  .feedbackModal .feedback-con .feedback-header .header-tabs .header-tab.selected {
    color: #1686ff
  }

  .feedbackModal .feedback-con .feedback-header .header-tabs .line {
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 16px;
    background-color: #8f959e
  }

  .feedbackModal .feedback-con .reminder-top {
    font-size: 12px;
    color: #232830;
    margin-bottom: 18px
  }

  .feedbackModal .feedback-con .evaluation p {
    font-size: 14px;
    color: #f8840a;
    margin-bottom: 20px;
    font-weight: 700
  }

  .feedbackModal .feedback-con .evaluation .notice-text {
    margin-bottom: 20px;
    color: #232930;
    font-size: 14px;
    font-weight: 400
  }

  .feedbackModal .feedback-con .evaluation .icon {
    width: 80%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto auto 32px
  }

  .feedbackModal .feedback-con .evaluation .icon .default {
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    cursor: pointer;
    color: #dbdbdb;
    font-size: 40px
  }

  .feedbackModal .feedback-con .evaluation .icon .default.selected {
    color: #ffa000;
    font-size: 40px
  }

  .feedbackModal .feedback-con textArea {
    width: 100%;
    height: 168px;
    background: #f8f9fa;
    border-radius: 6px;
    position: relative
  }

  .feedbackModal .feedback-con .text-num {
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-size: 12px;
    color: #8f959e
  }

  .feedbackModal .feedback-con .text-num span {
    color: #232830
  }

  .feedbackModal .ant-tabs-nav-wrap {
    justify-content: center
  }

  .feedbackModal .ant-tabs-nav-wrap .ant-tabs-nav-list {
    color: #bfc1c3;
    font-weight: 700
  }

  .feedbackModal .ant-tabs-nav-wrap .ant-tabs-tab:hover {
    color: #1686ff
  }

  .feedbackModal .ant-tabs-tab.ant-tabs-tab-active {
    color: #1686ff !important
  }

  .feedbackModal .ant-tabs-ink-bar .ant-tabs-ink-bar-animated {
    background: #1686ff
  }

  .feedbackModal .ant-tabs-bottom>.ant-tabs-nav:before,
  .feedbackModal .ant-tabs-bottom>div>.ant-tabs-nav:before,
  .feedbackModal .ant-tabs-top>.ant-tabs-nav:before,
  .feedbackModal .ant-tabs-top>div>.ant-tabs-nav:before {
    border: none
  }

  .feedbackModal .ant-btn-primary[disabled] {
    background: #1686ff !important;
    border-color: #1686ff !important;
    color: #fff
  }

  .feedbackModal .feedback-upload {
    margin-top: 10px;
    text-align: left
  }

  .feedbackModal .feedback-upload .ant-upload {
    width: 80px !important;
    height: 80px !important
  }

  .feedbackModal .feedback-upload .ant-upload-list-picture-card-container {
    width: 80px;
    height: 80px
  }

  .feedbackModal .feedback-upload .ant-upload-list-item {
    width: 80px;
    height: 80px;
    padding: 0;
    border: none
  }

  .feedbackModal .feedback-upload .ant-upload-list-item-info:before {
    left: 0
  }

  .me-join-meeting-modal .ant-modal-close {
    color: hsla(0, 0%, 100%, .6)
  }

  .me-join-meeting-modal .ant-modal-close:hover {
    color: hsla(0, 0%, 100%, .1)
  }

  .me-join-meeting-modal .me-join-meeting-body {
    background-color: #1686ff;
    height: 75vh;
    max-height: 534px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
  }

  .me-join-meeting-modal .me-join-meeting-body .me-join-meeting-form {
    width: 55%;
    margin-bottom: 120px
  }

  .me-join-meeting-modal .me-join-meeting-body .me-join-meeting-form .me-join-meeting-input {
    margin-bottom: 20px
  }

  .me-join-meeting-modal .me-join-meeting-body .me-join-meeting-form .me-join-meeting-input .input-label,
  .me-join-meeting-modal .me-join-meeting-body .me-join-meeting-form .me-join-meeting-input input {
    background-color: hsla(0, 0%, 100%, .1);
    color: hsla(0, 0%, 100%, .6);
    line-height: 38px;
    border: 0;
    width: 100%;
    text-align: center
  }

  .me-join-meeting-modal .me-join-meeting-body .me-join-meeting-form .me-join-meeting-input .input-label {
    cursor: pointer;
    background-color: transparent
  }

  .me-join-meeting-modal .me-join-meeting-body .me-join-meeting-actions button {
    width: 144px;
    height: 46px
  }

  .userSelection-search-container {
    margin: 16px 24px 0
  }

  .userSelection-search-container .userSelection-search-input_container {
    display: flex;
    align-items: center;
    padding: 16px 24px 0
  }

  .userSelection-search-container .userSelection-search-input {
    flex: 1 1;
    height: 32px;
    background: #f6f6f6;
    border: 1px solid transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
  }

  .userSelection-search-container .userSelection-search-input>.input-wrap {
    display: flex;
    align-items: center;
    height: 100%
  }

  .userSelection-search-container .userSelection-search-input>.input-wrap .icon-search {
    margin-right: 9px;
    display: inline-block;
    line-height: 1vh
  }

  .userSelection-search-container .userSelection-search-input>.input-wrap .icon-search img {
    width: 12px
  }

  .userSelection-search-container .userSelection-search-input>div>span,
  .userSelection-search-container .userSelection-search-input span {
    color: #8f959e;
    padding: 0;
    background: #f6f6f6
  }

  .userSelection-search-container .userSelection-search-input>input {
    background: transparent;
    border: none;
    flex: 1 1;
    color: #8f959e;
    margin-right: 6px
  }

  .userSelection-search-container .userSelection-search-input .focus-search-global-input-container {
    margin: 0;
    width: 100%
  }

  .userSelection-search-container .userSelection-search-input .focus-search-global-input-container .ant-input-affix-wrapper {
    width: 100%
  }

  .userSelection-search-container .userSelection-search-input .ant-input-prefix {
    margin-right: 9px
  }

  .userSelection-search-container .cursor-outline {
    background: #f6f6f6;
    border: 1px solid transparent
  }

  .userSelection-search-container .userSelection-search-content .userSelection-search-content>.ant-tabs {
    color: #8f959e
  }

  .userSelection-search-container .ant-tabs-top {
    height: 100%
  }

  .userSelection-search-container .ant-tabs-top>.ant-tabs-nav:before {
    border-bottom: 1px solid #f6f6f6 !important
  }

  .userSelection-search-container .userSelection-search-content>.ant-tabs>.ant-tabs-nav {
    color: #8f959e
  }

  .userSelection-search-container .userSelection-search-content>.ant-tabs>.ant-tabs-nav>.ant-tabs-nav-wrap>.ant-tabs-nav-list>.ant-tabs-tab {
    margin: 0 32px 0 0 !important;
    color: #666
  }

  .userSelection-search-container .userSelection-search-content>.ant-tabs>.ant-tabs-nav>.ant-tabs-nav-wrap>.ant-tabs-nav-list>.ant-tabs-tab.ant-tabs-tab-active,
  .userSelection-search-container .userSelection-search-content>.ant-tabs>.ant-tabs-nav>.ant-tabs-nav-wrap>.ant-tabs-nav-list>.ant-tabs-tab:hover {
    color: #306fdc
  }

  .userSelection-search-container .userSelection-search-content {
    height: calc(100% - 48px)
  }

  .userSelection-search-container .userSelection-search-content .ant-tabs-ink-bar {
    background-color: #306fdc
  }

  .userSelection-search-container .userSelection-search-content>.ant-list>.ant-tabs-tabpane {
    width: 380px !important
  }

  .userSelection-search-container .searchCheckbox .ant-checkbox-inner {
    width: 20px;
    height: 20px;
    text-align: center;
    background: transparent
  }

  .userSelection-search-container .searchCheckbox .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #1890ff
  }

  .userSelection-search-container .userSelection-search-userSelection-modal-mask {
    display: none
  }

  .userSelection-search-container .userSelection-search-userSelection-translateY-mask {
    display: inline;
    display: initial;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 998;
    width: 100%;
    height: 100%;
    transition: width .3s
  }

  .userSelection-search-container .userSelection-search-userSelection-modal {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 50%;
    height: 414px;
    background-color: #fff;
    transition: width .3s;
    opacity: 0;
    pointer-events: none;
    border-radius: 6px;
    box-shadow: 5px 5px 5px 0 rgba(9, 32, 72, .1)
  }

  @media screen and (max-height: 640px) {
    .userSelection-search-container .userSelection-search-userSelection-modal {
      height: 300px
    }
  }

  .userSelection-search-container .userSelection-search-userSelection-translateY {
    width: 400px;
    opacity: 1;
    pointer-events: auto
  }

  .userSelection-search-container .collect-content.search-group {
    left: 480px !important
  }

  .ant-tag {
    border: none !important;
    margin-left: 5px;
    margin-right: 0 !important;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    padding: 0 4px;
    transform: scale(.8)
  }

  .ant-tag-orange {
    color: #f96137;
    background: rgba(249, 97, 55, .1)
  }

  .ant-tag-geekblue {
    color: #31c4cc;
    background: rgba(49, 196, 204, .2)
  }

  .external {
    color: #e86e63;
    background-color: rgba(232, 110, 99, .063)
  }

  .user-tags {
    display: block
  }

  .feedbackModal .title-container {
    display: flex;
    justify-content: space-between
  }

  .feedbackModal .net-check {
    font-size: 14px;
    margin-right: 16px;
    cursor: pointer
  }

  .feedbackModal .net-check .check-icon {
    vertical-align: middle
  }

  .feedbackModal .net-check .check-text {
    margin-left: 5px;
    vertical-align: middle
  }

  .me-user-card-modal .only-scan-add {
    margin: 20px 0 16px;
    text-align: center
  }

  .me-user-card-modal .only-scan-add .iconic_describe1 {
    color: #666;
    margin-right: 5px
  }

  .me-user-card-modal .ant-modal-content {
    border-radius: 6px;
    overflow: hidden
  }

  .me-user-card-modal .ant-modal {
    max-width: 330px
  }

  .me-user-card-modal .ant-popover-inner-content {
    padding: 0
  }

  .me-user-card-modal .ant-popover-inner-content .more-operations-content {
    padding: 8px 16px
  }

  .me-user-card-modal .ant-popover-inner-content .more-operations-content p {
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    font-size: 14px
  }

  .me-user-card-modal .user-item-container {
    max-height: calc(78vh - 220px);
    flex: 1 1;
    overflow-y: auto;
    position: relative
  }

  .me-user-card-modal .user-item-container .usercard-workstatus {
    color: #a0a5aa;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center
  }

  .me-user-card-modal .user-item-container .usercard-workstatus img {
    width: 16px;
    height: 16px;
    margin-right: 4px
  }

  .me-user-card-modal .user-item-container .usercard-workstatus .work-status-title {
    flex: 1 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .me-user-card-modal .me-user-card-item {
    padding: 16px 20px 14px;
    position: relative
  }

  .me-user-card-modal .me-user-card-item .usercard-item-splitline {
    background-color: #e8ebec;
    height: 1px;
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px
  }

  .me-user-card-modal .me-user-card-item .usercard-item-title {
    color: #8f959e;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    margin-top: 7px;
    margin-bottom: 0;
    width: 70px;
    display: flex
  }

  .me-user-card-modal .me-user-card-item .dept-item-j {
    width: 18px;
    height: 18px;
    background: #feefea;
    border-radius: 12px;
    position: absolute;
    top: 26px;
    right: 5px;
    line-height: 18px;
    font-size: 12px;
    color: #f96137;
    text-align: center
  }

  .me-user-card-modal .me-user-card-item .usercard-item-content {
    display: flex
  }

  .me-user-card-modal .me-user-card-item .remark-input-wrap {
    margin-top: -4px;
    display: flex;
    align-items: center
  }

  .me-user-card-modal .me-user-card-item .usercard-item-desc {
    color: #232930;
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    padding: 7px 0;
    flex: 1 1;
    word-break: break-all;
    width: calc(100% - 60px)
  }

  .me-user-card-modal .me-user-card-item .usercard-item-desc .item-label {
    display: inline-block;
    color: #1686ff;
    cursor: pointer
  }

  .me-user-card-modal .me-user-card-item .mobile-desc {
    width: auto;
    flex: inherit;
    display: inline-block;
    line-height: 22px
  }

  .me-user-card-modal .me-user-card-item .label-usercard-item-desc .label-name {
    width: calc(100% - 20px);
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    height: 100%;
    line-height: inherit;
    margin-right: 5px
  }

  .me-user-card-modal .me-user-card-item .label-usercard-item-desc .icon-arrow_right {
    vertical-align: text-top
  }

  .me-user-card-modal .me-user-card-item .user-mobile-copy-button {
    line-height: 22px;
    padding: 7px 15px;
    color: #1686ff;
    cursor: pointer
  }

  .me-user-card-modal .me-user-card-item .user-mobile-copy-button img {
    width: 14px
  }

  .me-user-card-modal .me-user-card-avatar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 156px;
    min-height: 156px;
    background-color: #ddd;
    background-size: cover;
    background-position: 50%;
    position: relative;
    border-radius: 6px 6px 0 0
  }

  .me-user-card-modal .me-user-card-avatar-bg {
    position: absolute;
    background-color: rgba(0, 0, 0, .3);
    width: 100%;
    height: 100%
  }

  .me-user-card-modal .me-user-card-avatar-name {
    width: 300px;
    display: flex;
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 18px;
    color: #fff;
    font-weight: 700
  }

  .me-user-card-modal .me-user-card-avatar-name #user-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block
  }

  .me-user-card-modal .me-user-card-avatar-name #user-sex {
    margin-left: 8px
  }

  .me-user-card-modal .me-user-card-avatar .me-user-card-avatar-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #fff
  }

  .me-user-card-modal .me-user-card-avatar.user-card-avatar-remote {
    height: 156px;
    min-height: 156px
  }

  .me-user-card-modal .me-user-card-actions {
    margin-top: -20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px 18px;
    z-index: 1
  }

  .me-user-card-modal .me-user-card-actions .ant-btn-icon-only.ant-btn-lg {
    width: 36px;
    height: 36px;
    min-width: 36px
  }

  .me-user-card-modal .me-user-card-actions .ant-btn {
    border-radius: 50% !important;
    box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, .12);
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
  }

  .me-user-card-modal .me-user-card-actions .ant-btn:hover {
    box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, .24)
  }

  .me-user-card-modal .me-user-card-namesig {
    padding: 18px 20px
  }

  .me-user-card-modal .me-user-card-namesig .name-sex {
    display: flex
  }

  .me-user-card-modal .me-user-card-namesig .name-sex .usercard-namesig-title {
    color: #232930;
    font-size: 18px;
    line-height: 24px;
    margin: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    font-weight: 600
  }

  .me-user-card-modal .me-user-card-namesig .name-sex [data-sex] {
    margin-left: 5px
  }

  .me-user-card-modal .me-user-card-namesig .usercard-namesig-input {
    border: none;
    resize: none;
    color: #232930;
    max-height: 73px;
    margin-top: 6px
  }

  .me-user-card-modal .me-user-card-namesig .usercard-namesig-desc {
    color: #8f959e;
    margin: 0;
    font-size: 13px;
    line-height: 18px
  }

  .me-user-card-modal .me-user-card-namesig .ant-input-affix-wrapper {
    padding: 0;
    box-shadow: none
  }

  .me-user-card-modal .user-card-avatar {
    background-size: 100px 80px;
    background-repeat: no-repeat
  }

  .me-user-card-modal .user-card-avatar .user-card-avatar-item {
    display: flex;
    flex: 1 1;
    padding: 34px 20px 20px;
    justify-content: flex-start
  }

  .me-user-card-modal .user-card-avatar .user-card-avatar-item .item-avatar {
    height: 100%;
    display: flex;
    align-items: center
  }

  .me-user-card-modal .user-card-avatar .user-card-avatar-item .item-content {
    flex: 1 1;
    margin-left: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    min-height: 56px
  }

  .me-user-card-modal .user-card-avatar .user-card-avatar-item .item-content h4 {
    font-size: 16px;
    line-height: 19px;
    margin: 0 0 10px;
    padding: 0;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    width: 100%;
    display: flex;
    align-items: center
  }

  .me-user-card-modal .user-card-avatar .user-card-avatar-item .item-content .special-tag {
    display: flex;
    margin: 0 0 10px -5px
  }

  .me-user-card-modal .user-card-avatar .user-card-avatar-item .item-content .special-tag .user-tags {
    margin-left: 5px;
    font-size: 10px;
    padding: 0 4px;
    border-radius: 2px;
    border: none;
    white-space: nowrap;
    height: 16px;
    line-height: 16px
  }

  .me-user-card-modal .user-card-avatar .user-card-avatar-item .item-content p {
    line-height: inherit
  }

  .me-user-card-modal .card-group-owner {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 20px;
    margin-top: 20px
  }

  .me-user-card-modal .card-group-owner-name {
    margin-left: 10px;
    font-size: 14px;
    color: #232930;
    line-height: 16px
  }

  .me-user-card-modal .more-operations-node {
    position: absolute;
    right: 20px;
    top: 6px;
    color: #000;
    z-index: 2;
    cursor: pointer;
    text-align: center;
    border-radius: 50%;
    font-size: 20px
  }

  .me-user-card-modal .user-item-container:has(~.action-btn-node) {
    padding-bottom: 80px
  }

  .me-user-card-modal .validation-msg-node:has(~.action-btn-node) {
    padding-bottom: 80px
  }

  .me-user-card-modal .action-btn-node {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 16px 16px;
    position: absolute;
    bottom: 0;
    background: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }

  .me-user-card-modal .action-btn-node button {
    width: 290px;
    height: 44px
  }

  .me-user-card-modal .action-btn-node .more-time-tip {
    position: absolute;
    bottom: 64px;
    font-size: 12px;
    color: #8f959e;
    line-height: 12px
  }

  .me-user-card-modal .action-btn-node.accept,
  .me-user-card-modal .action-btn-node.add,
  .me-user-card-modal .action-btn-node.add-group,
  .me-user-card-modal .action-btn-node.send {
    margin-top: 20px
  }

  .me-user-card-modal .action-btn-node.deleted {
    padding: 0
  }

  .me-user-card-modal .action-btn-node.deleted .ant-btn-primary:focus,
  .me-user-card-modal .action-btn-node.deleted .ant-btn-primary:hover,
  .me-user-card-modal .action-btn-node.deleted button {
    background-color: transparent !important;
    border-color: transparent !important;
    border-top: 1px solid #dee0e3 !important;
    color: #e86f64;
    height: 55px;
    line-height: 55px;
    width: 100% !important;
    padding: 0 !important
  }

  .me-user-card-modal .validation-msg-node {
    box-sizing: content-box;
    flex-direction: column;
    height: auto
  }

  .me-user-card-modal .validation-msg-node .validation-title {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    color: #232930;
    height: 52px;
    line-height: 52px;
    padding: 0 24px;
    border-bottom: 1px solid #dee0e3;
    margin: 0
  }

  .me-user-card-modal .validation-msg-node .validation-title .anticon {
    font-size: 12px;
    cursor: pointer
  }

  .me-user-card-modal .validation-msg-node .validation-title .anticon img {
    width: 14px
  }

  .me-user-card-modal .validation-msg-node .validation-title.delete-setting {
    justify-content: flex-start
  }

  .me-user-card-modal .validation-msg-node .validation-title.delete-setting span {
    margin-right: 5px;
    vertical-align: -9px
  }

  .me-user-card-modal .validation-msg-node .Verification-info {
    padding: 10px 20px 20px
  }

  .me-user-card-modal .validation-msg-node .Verification-info .Verification-info-title {
    color: #999;
    font-size: 14px;
    margin: 10px 0
  }

  .me-user-card-modal .validation-msg-node .Verification-info .validation-info-length {
    background-color: transparent
  }

  .me-user-card-modal .validation-info-node {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
  }

  .me-user-card-modal .validation-info-node .title {
    font-size: 14px;
    color: #a0a5aa;
    line-height: 44px;
    padding-left: 20px
  }

  .me-user-card-modal .validation-info-node .info {
    background-color: #f5f5f5;
    border-radius: 4px;
    margin: 0 20px 20px;
    color: #333;
    word-break: break-all;
    overflow-y: auto;
    padding: 10px
  }

  .me-user-card-modal .validation-info-node .info-item {
    width: 100%
  }

  .me-user-card-modal .Verification-setting {
    display: flex;
    justify-content: space-between;
    color: #333;
    align-items: center;
    font-size: 16px
  }

  .me-user-card-modal .validation-info-message {
    margin: 15px auto;
    position: relative
  }

  .me-user-card-modal .validation-info-message textArea {
    background: #fff;
    border-radius: 6px;
    position: relative;
    padding-bottom: 20px
  }

  .me-user-card-modal .validation-info-message .message {
    width: 100%;
    height: 100%;
    resize: none;
    background: #f5f5f5;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    padding-bottom: 20px;
    padding-top: 10px;
    word-break: break-all
  }

  .me-user-card-modal .validation-info-message .message:focus {
    border-color: #1686ff !important;
    box-shadow: none
  }

  .me-user-card-modal .validation-info-message .validation-info-length {
    position: absolute;
    right: 10px;
    top: 50px;
    font-size: 12px;
    color: #8f959e;
    background-color: #fff
  }

  .me-user-card-modal .validation-info-message .validation-info-length span {
    color: #1686ff
  }

  .me-user-card-modal .validation-info-message .validation-info-confirm {
    text-align: right
  }

  .me-user-card-modal .validation-info-message .validation-info-confirm button {
    margin: 10px 0 0;
    text-align: right
  }

  .wrap {
    display: flex;
    flex-direction: column
  }

  .wrap,
  .wrap .container {
    max-height: 78vh
  }

  .wrap .container .usercard-wrap {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative
  }

  div,
  p {
    margin-top: 0;
    margin-bottom: 0
  }

  .df {
    display: flex
  }

  .absolute {
    position: absolute
  }

  .relative {
    position: relative
  }

  .inline-block {
    display: inline-block
  }

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

  .two-lines {
    display: -webkit-box;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
  }

  .dd-emoji {
    width: 24px;
    margin: 0 2px;
    vertical-align: text-bottom
  }

  .ant-btn-primary {
    background: #1686ff !important;
    border-color: #1686ff !important;
    outline: none !important;
    border-radius: 4px
  }

  .ant-btn-background-ghost.ant-btn-primary {
    background: transparent !important;
    border-color: #1686ff !important
  }

  .ant-btn-background-ghost.ant-btn-primary:focus {
    color: #1686ff !important
  }

  .ant-btn-background-ghost.ant-btn-primary[disabled] {
    border-color: #d9d9d9 !important
  }

  .ant-btn-background-ghost.ant-btn-primary:hover {
    background-color: rgba(22, 134, 255, .1) !important
  }

  .ant-btn-dangerous:hover {
    background: rgba(222, 36, 24, .1);
    color: #de2418
  }

  .ant-btn-dangerous.ant-btn-primary {
    background: #de2418 !important;
    border-color: #de2418 !important
  }

  .ant-btn-primary[disabled],
  .ant-btn-primary[disabled]:active,
  .ant-btn-primary[disabled]:focus,
  .ant-btn-primary[disabled]:hover {
    color: #fff;
    opacity: .5
  }

  .dangerous-inner-html {
    display: flex;
    align-items: center;
    height: 100%
  }

  .e-mention-user {
    color: #1686ff !important
  }

  input,
  option,
  select,
  textarea :hover {
    box-shadow: none;
    outline: none
  }

  .ant-input:focus {
    border-color: none !important;
    box-shadow: none
  }

  .spin-container {
    width: 100%;
    height: 100%;
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .appContent {
    position: relative
  }

  .primary-color {
    color: #1686ff
  }

  .primary-bg {
    background-color: #1686ff
  }

  .global-upload-controller {
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 1002;
    width: 440px;
    max-height: 336px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 11px 0 rgba(0, 0, 0, .08)
  }

  .sidebar-common-styles,
  .sidebar-common-styles .ant-tree {
    background-color: #f5f6f8 !important
  }

  .hide-left-sider .appContent {
    border-radius: 0
  }

  @media screen and (max-height: 520px) {
    html body {
      min-height: 520px
    }

    html body #root .appLayout {
      min-height: 520px;
      min-width: 750px
    }

    html body #root .appLayout .leftSide>div:first-child {
      display: flex;
      flex-direction: column;
      overflow: hidden
    }

    html body #root .appLayout .leftSide>div:first-child .focus-nav {
      overflow-y: auto
    }

    html body #root .appLayout .rightSide .appContent .calendar-page-container {
      min-height: 500px
    }

    html body .ant-modal-wrap.modalUserSelection .ant-modal {
      overflow: hidden
    }

    html body .ant-modal-wrap.modalUserSelection .ant-modal .ant-modal-content {
      height: 100%;
      overflow: hidden
    }

    html body .ant-modal-wrap.base-modal-wrapper.change-calendar-modal .participants-list {
      max-height: 121px !important
    }
  }

  .community-aikf .chat-container .main {
    min-width: inherit
  }

  .community-aikf .input-control-container {
    min-width: 0
  }

  .crumb-dept-user-container .focus-user-selection-org-nav-item,
  .focusListItem .item-content-desc {
    line-height: 14px !important
  }

  .userSelection-search-container .search-content-wrap,
  .userSelection-search-container .userSelection-search-content>.ant-tabs>.ant-tabs-content-holder,
  .userSelectionModalLeft .data-list-container,
  .userSelectionModalRight .selected-container {
    overflow-y: auto;
    overflow-y: overlay
  }

  .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #1686ff;
    border-color: #1686ff
  }

  .ant-checkbox-disabled .ant-checkbox-inner {
    background-color: #f5f5f5;
    border-color: #d9d9d9
  }

  body {
    margin: 0;
    font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
  }

  * {
    outline: 0
  }

  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
  }

  input::-webkit-input-placeholder {
    color: #bfc1c4
  }

  input::-moz-input-placeholder {
    color: #bfc1c4
  }

  input::-ms-input-placeholder {
    color: #bfc1c4
  }

  .scrollbar {
    width: 4px;
    height: .5rem;
    overflow-y: scroll;
    scrollbar-color: transparent transparent;
    scrollbar-track-color: transparent;
    -ms-scrollbar-track-color: transparent;
    -moz-scrollbar-track-color: transparent
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: .5rem;
    background: hsla(0, 0%, 100%, .3);
    background: transparent
  }

  ::-webkit-scrollbar-track {
    border-radius: 0
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: rgba(0, 0, 0, .2);
    -webkit-transition: all .2s;
    transition: all .2s;
    border-radius: 4px
  }

  .draggable {
    -webkit-app-region: drag
  }

  .no-draggable {
    -webkit-app-region: no-drag
  }

  #root,
  .root {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column
  }

  .notify-area {
    background: #e8effa;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC;
    font-weight: 400;
    position: relative;
    transition: height .5s
  }

  .notify-area.hidden-notify {
    height: 0;
    overflow: hidden
  }

  .notify-area .notify-info-logo {
    height: 14px;
    width: 14px;
    vertical-align: middle
  }

  .notify-area .help-info,
  .notify-area .open-notify {
    vertical-align: middle;
    margin-left: 9px
  }

  .notify-area .link-notify {
    color: #1686ff;
    text-decoration: underline
  }

  .notify-area .link-notify:active,
  .notify-area .link-notify:focus,
  .notify-area .link-notify:hover,
  .notify-area .link-notify:visited {
    color: #1686ff !important;
    text-decoration: underline
  }

  .notify-area .close-img {
    position: absolute;
    height: 14px;
    width: 14px;
    cursor: pointer;
    top: 11px;
    right: 16px
  }

  .firefox-notify {
    height: 1px;
    width: 1px;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0
  }

  .main-container {
    display: flex;
    height: 100%;
    width: 100%
  }

  .user-select-text {
    user-select: text;
    -ms-user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center
  }

  .flex1 {
    flex: 1 1
  }

  .ant-message {
    top: 36px
  }

  .notransition {
    transition: none !important
  }

  img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor
  }

  ul li {
    list-style: none;
    padding: 0;
    margin: 0
  }

  .ant-drawer-body {
    height: 100%
  }

  .cursor-pointer {
    cursor: pointer
  }

  .scroll-view-content {
    scrollbar-width: none
  }

  .focusListItem {
    border-radius: 0;
    height: 60px;
    transition: all .3s ease;
    margin: 0 16px;
    padding: 0 16px
  }

  .focusListItem h4 {
    height: 22px
  }

  .focusListItem h4 .item-content-name {
    color: #232930;
    height: 22px
  }

  .focusListItem h4 .item-content-remark {
    display: flex
  }

  .focusListItem:hover {
    background-color: #f5f6f8
  }

  .search-global-modal .focusListItem .item-content-remark {
    min-width: auto;
    display: flex
  }

  .search-global-modal .focusListItem .item-content-remark>div {
    width: auto !important
  }

  .user-tags {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    padding: 0 4px;
    border-radius: 2px;
    border: none;
    white-space: nowrap;
    height: 16px;
    line-height: 16px
  }

  .cursor-outline:focus {
    border: 1px solid #1686ff !important
  }

  .mattch-url a {
    color: #1890ff
  }

  .mattch-url a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #1890ff
  }

  .themeWhite .leftSide {
    background-image: url(/oss/focus-desktop/ksCloud/webapp/client_prod/fd2c24e321/static/media/bgWhite.9d4cfdc5.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%
  }

  .themeWhite .focus-nav .focus-nav-item {
    color: #8f959e
  }

  .themeWhite .focus-nav .focus-nav-item.active {
    color: #1686ff;
    background-color: #fff
  }

  .themeWhite .focus-nav .focus-nav-item:hover {
    background-color: #fff
  }

  .themeWhite .extend-nav-item {
    color: #8f959e
  }

  .themeWhite .extend-nav-item.active,
  .themeWhite .extend-nav-item:hover {
    color: #1686ff
  }

  .lightBlue .leftSide {
    background-image: url(/oss/focus-desktop/ksCloud/webapp/client_prod/fd2c24e321/static/media/bgBlue.aac36f55.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%
  }

  .lightBlue .focus-nav .focus-nav-item.active {
    color: #fff;
    background-color: #0074ef
  }

  .lightBlue .focus-nav .focus-nav-item:hover {
    background-color: #0074ef
  }

  .themeGray .leftSide {
    background-image: url(/oss/focus-desktop/ksCloud/webapp/client_prod/fd2c24e321/static/media/bgGray.ccfa4bbe.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%
  }

  .themeGray .focus-nav .focus-nav-item.active {
    color: #fff;
    background-color: #2a2e3e
  }

  .themeGray .focus-nav .focus-nav-item:hover {
    background-color: #2a2e3e
  }

  .schedule-type-wrapper {
    flex: 1 1;
    display: flex
  }

  .schedule-type-wrapper .schedule-type-item {
    width: 30px;
    height: 30px;
    margin-right: 10px
  }

  .schedule-type-wrapper .schedule-type-item img {
    width: 100%
  }

  .create-schedule-wrapper-modal-wrapper-full {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: 1000
  }

  .create-schedule-wrapper-modal-wrapper-full .ant-modal-content {
    box-shadow: none
  }

  .schedule-label-zhuanban {
    display: none;
    width: 32px;
    height: 16px;
    margin-left: 8px;
    background-color: #dbe5ff;
    color: #1686ff;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 16px;
    min-width: 32px
  }

  .create-schedule-drawer-wrapper {
    z-index: 101
  }

  .create-schedule-drawer-wrapper .ant-drawer-body {
    padding: 0 !important;
    position: relative
  }

  .create-schedule-drawer-wrapper .ant-drawer-title {
    color: #232930;
    padding: 0
  }

  .create-schedule-drawer-wrapper .ant-drawer-title .create-schedule-view-header {
    display: flex
  }

  .create-schedule-drawer-wrapper .ant-drawer-title .create-schedule-view-header .create-view-header {
    width: 450px;
    padding: 16px 24px;
    border-right: 1px solid #e8ebec;
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .create-schedule-drawer-wrapper .ant-drawer-title .create-schedule-view-header .create-view-header .close-drawer {
    font-size: 14px;
    color: #bfc1c4
  }

  .create-schedule-drawer-wrapper .ant-drawer-title .create-schedule-view-header .busyidle-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1;
    padding: 0 24px
  }

  .create-schedule-drawer-wrapper .ant-drawer-content {
    border-radius: 8px 0 0 8px
  }

  .create-schedule-drawer-wrapper .ant-drawer-content .ant-drawer-header {
    padding: 0
  }

  .create-schedule-drawer-wrapper .ant-drawer-content .ant-drawer-body {
    padding: 16px 24px
  }

  .create-schedule-drawer-wrapper .ant-drawer-content .ant-drawer-body .ant-list-items {
    max-height: 200px !important
  }

  .create-schedule-drawer-wrapper .ant-drawer-content .ant-drawer-body .custom-upload-list .file-item {
    margin-right: 0
  }

  .create-schedule-drawer-wrapper .ant-drawer-content .ant-drawer-body .custom-upload-list .file-item .name {
    width: 254px
  }

  .create-schedule-drawer-wrapper .ant-drawer-content .ant-drawer-body .ant-input-affix-wrapper-disabled {
    background-color: #fff
  }

  .create-schedule-drawer-wrapper .ant-drawer-content .ant-drawer-body .ant-select-multiple .ant-select-selection-item {
    border: none;
    background: none
  }

  .create-schedule-drawer-wrapper .ant-input {
    resize: none;
    background: #f8f8f8;
    border: 1px solid transparent
  }

  .create-schedule-drawer-wrapper .ant-input:focus {
    background: #fff
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body {
    display: flex;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .create-schedule-scroll-view {
    width: 450px !important;
    border-right: 1px solid #e8ebec
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .create-schedule-scroll-view .scroll-view-content {
    width: 458px !important;
    overflow-x: hidden !important
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .create-schedule-view {
    padding: 10px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .aic {
    align-items: center
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .meeting-minutes .calendar-attachment {
    padding-top: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .meeting-minutes .calendar-attachment .calendar-attachment-wrapper {
    display: none
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .detail-content-type {
    border-left: 3px solid #1686ff;
    background: rgba(48, 111, 220, .05);
    padding: 2px 0 2px 12px;
    font-weight: 600;
    color: #62656d;
    margin-bottom: 16px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line {
    margin-bottom: 18px;
    margin-right: 10px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line .nowrap {
    white-space: nowrap
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line.description-line,
  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line.remark-line {
    position: relative
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line.description-line .schedule-textarea-wrapper,
  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line.remark-line .schedule-textarea-wrapper {
    position: relative;
    width: 100%;
    flex: 1 1
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line.description-line .schedule-textarea-wrapper .schedule-textarea,
  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line.remark-line .schedule-textarea-wrapper .schedule-textarea {
    padding-bottom: 20px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line.description-line .schedule-textarea-wrapper .limit,
  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line.remark-line .schedule-textarea-wrapper .limit {
    position: absolute;
    pointer-events: none;
    text-align: right;
    width: calc(100% - 16px);
    bottom: 1px;
    left: 5px;
    border-bottom-left-radius: 3px;
    background-color: #fff
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line.calendar-schedule-color-line {
    display: none
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line .basic-content {
    width: 100%
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line .basic-content .content {
    flex: 1 1;
    margin-left: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line .basic-content .content .ant-switch-checked {
    background-color: #1686ff
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line .schedule-title-input {
    font-size: 14px;
    color: #232930
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .basic-line .calendar-custom-select-arrow .ant-select-arrow {
    right: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .module-cross-line {
    flex: 1 1;
    height: 1px;
    background: #e8ebec;
    margin: 0 10px 18px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .mr8 {
    margin-right: 8px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .ml8 {
    margin-left: 8px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .ml16 {
    margin-left: 16px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .ml7 {
    margin-right: 7px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .ml10 {
    margin-right: 10px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .color-picker-inline {
    width: 100px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper {
    width: 72px;
    text-align: left;
    padding-left: 10px;
    position: relative;
    color: #232930;
    font-size: 14px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper .required {
    position: absolute;
    left: 0;
    color: #ea1919;
    line-height: 28px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper .ant-select-arrow {
    right: 6px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper .ant-collapse-borderless {
    background: #fff
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper .ant-collapse-borderless .ant-collapse-item {
    border: none
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper .ant-collapse-borderless .ant-collapse-header {
    padding: 0;
    background: #fff;
    color: #232930
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper .ant-collapse-borderless .ant-collapse-header .sub-title {
    color: #8f959e
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper .ant-collapse-borderless .ant-collapse-content-box {
    padding: 0 !important
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper.left-indicator-toggle {
    align-self: flex-start;
    width: 100%;
    line-height: 15px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper.left-indicator-toggle .toggle-header {
    position: relative;
    cursor: pointer
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper.left-indicator-toggle .center {
    text-align: center
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper.left-indicator-toggle .empty {
    padding: 20px 0 10px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .left-indicator-wrapper .attachement-detail-area {
    padding: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .important-level .tabs li {
    width: auto
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .important-level .tabs li .type {
    width: auto;
    padding: 0 8px;
    height: 24px;
    font-style: inherit
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-meeting-input {
    border: none;
    position: relative;
    display: flex;
    padding: 0 8px 0 11px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-meeting-input .ant-input {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    padding: 0 8px 0 11px;
    top: 0;
    left: 0;
    border: 1px solid transparent
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-meeting-input .ant-input-suffix {
    flex: 1 1;
    justify-content: flex-end
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-meeting-input-interactive .ant-input:hover {
    border: 1px solid #1686ff
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-meeting-input-interactive .ant-input:focus {
    border: 1px solid #d8ebff
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    align-items: start
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .absolute-time,
  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .relative-time {
    display: flex;
    width: 100%;
    flex-direction: row;
    margin-top: 16px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .absolute-time .icon-remind,
  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .relative-time .icon-remind {
    font-size: 20px;
    color: #979797;
    margin-right: 8px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .absolute-time .absolute-time-list,
  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .relative-time .absolute-time-list {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    align-items: start
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .absolute-time .absolute-time-list .absolute-time-item,
  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .relative-time .absolute-time-list .absolute-time-item {
    width: 100%;
    margin-bottom: 8px;
    align-items: center
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .absolute-time .absolute-time-list .absolute-time-item .icon-remindtime-delete,
  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .relative-time .absolute-time-list .absolute-time-item .icon-remindtime-delete {
    display: none;
    font-size: 10px;
    margin-left: 15px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .absolute-time .absolute-time-list .absolute-time-item .icon-remindtime-delete:hover,
  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .relative-time .absolute-time-list .absolute-time-item .icon-remindtime-delete:hover {
    color: #1686ff;
    cursor: pointer
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .absolute-time .absolute-time-list .absolute-time-item:hover .icon-remindtime-delete,
  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .relative-time .absolute-time-list .absolute-time-item:hover .icon-remindtime-delete {
    display: block
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .absolute-time .absolute-time-list .add-remind-btn,
  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .relative-time .absolute-time-list .add-remind-btn {
    color: #306fdc;
    cursor: pointer;
    line-height: 32px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .absolute-time .absolute-time-list .add-remind-limit,
  .create-schedule-drawer-wrapper .create-schedule-view-body .remind-content .relative-time .absolute-time-list .add-remind-limit {
    color: #62656d;
    line-height: 32px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .icon-toggle {
    position: absolute;
    right: 8px !important;
    top: 50%;
    transform: translateY(-50%);
    color: #8f959e !important;
    width: 12px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .icon-toggle svg {
    width: 10px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .icon-toggle-attachment svg,
  .create-schedule-drawer-wrapper .create-schedule-view-body .icon-toggle-remark svg {
    transform: rotate(-180deg)
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .add-remind {
    color: #1686ff;
    cursor: pointer
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .close-icon {
    font-size: 14px;
    color: #8f959e
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .creator {
    flex: 1 1;
    display: flex;
    align-items: center
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .creator .work-userlist {
    width: auto
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .creator .work-userlist .work-userlist-item.only-show-name {
    max-width: 300px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .creator .work-userlist .work-userlist-add {
    visibility: visible;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .creator .update-creator {
    height: 100%;
    color: #1686ff;
    cursor: pointer;
    margin-left: 3px;
    font-size: 14px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content {
    flex: 1 1;
    display: flex;
    align-items: center;
    position: relative;
    background: #fff;
    padding: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content.participant-content-data {
    height: 29px;
    z-index: 9
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content.participant-content-data .work-userlist-add {
    margin-left: 8px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content .work-userlist .work-userlist-item.only-show-name {
    max-width: 4.5em
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content .work-userlist .work-userlist-beyond {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content .work-userlist .work-userlist-add {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
    width: auto;
    height: 20px;
    margin-left: 0;
    line-height: normal;
    font-size: 10px;
    color: #3b7bea;
    background-color: transparent;
    flex-shrink: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content .work-userlist .work-userlist-add span {
    font-size: 14px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content .work-userlist .work-userlist-calendars-add {
    visibility: visible;
    width: 17px;
    height: 17px;
    line-height: 17px;
    font-size: 14px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content .work-userlist .work-userlist-calendars-add span svg {
    width: 17px;
    height: 17px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content .work-userlist div:last-child {
    margin-left: 3px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content .work-userlist div:first-child {
    margin-left: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .participant-content .participant-icon-more svg {
    width: 10px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .add-user {
    display: none
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .add-user .left-indicator-wrapper {
    width: 80px;
    align-self: flex-start;
    margin-top: 6px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .add-user .user-picker-wrapper .search {
    margin: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .add-user .user-picker-wrapper .list-item {
    padding: 12px 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-date .calendar-date-picker {
    width: 118px;
    margin-right: 6px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-date .calendar-date-picker,
  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-date .item {
    background-color: #f8f8f8;
    border: none
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-date .item {
    line-height: 26px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-date .calendar-date-picker-visible .date,
  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-date .item.ant-popover-open span {
    opacity: .4
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .df-content {
    flex: 1 1;
    border: solid
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .repeat-setting-endtime {
    width: 208px;
    height: 29px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .repeat-setting-endtime .schedule-calendar {
    color: #1686ff;
    display: flex;
    align-items: center;
    margin-right: 8px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .metting-type {
    display: flex;
    flex: 1 1
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .footer-btn {
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 12px 0;
    border-top: 1px solid #e8ebec;
    background: #fff;
    z-index: 102;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .footer-btn .calendar-schedule-btn {
    font-size: 13px;
    padding: 0 22px;
    border-radius: 4px;
    margin-right: 10px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .footer-btn .calendar-schedule-btn:last-child {
    margin-right: 7px
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle {
    width: calc(100% - 450px);
    height: 100%;
    overflow: auto;
    overflow: overlay;
    position: relative;
    display: flex;
    flex-direction: column
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle #drag-block-box {
    background-color: rgba(77, 166, 255, .8)
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle .busy-idle-divider {
    width: calc(100% - 65px);
    margin-left: 65px;
    height: 100%;
    position: absolute;
    display: flex;
    top: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle .busy-idle-divider-item {
    height: 100%;
    flex: 1 1
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container {
    overflow: auto;
    overflow: overlay;
    position: relative;
    height: 100%
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container-content {
    position: relative;
    background-color: #f9fbfc
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container-content .time-grid {
    position: relative
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container-content .time-block {
    width: calc(100% - 65px);
    z-index: 999;
    left: 65px;
    position: absolute;
    font-size: 12px;
    color: #fff;
    background: none;
    border: none
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container-content .time-block .calendar-view-timeline-item .item-timeLabel {
    position: -webkit-sticky;
    position: sticky;
    left: 0
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container-content .schedule-view {
    min-width: 100%;
    position: absolute;
    background: #f9fbfc
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container-content .schedule-view-header {
    position: absolute;
    min-width: 100%
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container-content .schedule-view-table {
    min-width: 100%;
    position: relative;
    display: flex
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container-content .schedule-view-item {
    flex: 1 1;
    min-width: 88px;
    position: relative;
    overflow: hidden;
    border-right: .5px solid #e8ebec
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container-content .schedule-view-item:last-child {
    border-right: none
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle-container-content .schedule-view+.time-grid {
    width: 100%
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .calendar-busy-idle ::-webkit-scrollbar-track {
    background-color: #f2f4f5
  }

  .create-schedule-drawer-wrapper .create-schedule-view-body .busy-idle-week-current {
    background-color: rgba(22, 134, 255, .1)
  }

  .busy-idle-modal-wrapper .ant-modal-body {
    padding: 10px 24px
  }

  .busy-idle-modal-wrapper .ant-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .busy-idle-modal-wrapper .ant-modal-footer label em {
    color: #1686ff;
    font-style: normal
  }

  .busy-idle-modal-wrapper .ant-input-affix-wrapper:hover {
    border: none
  }

  .busy-idle-modal-wrapper .ant-input-affix-wrapper-focused,
  .busy-idle-modal-wrapper .ant-input-affix-wrapper:focus {
    border: none;
    box-shadow: none
  }

  .busy-idle-modal-wrapper .search-people {
    border: none;
    background: #f2f4f5
  }

  .busy-idle-modal-wrapper .search-people input {
    background: #f2f4f5
  }

  .busy-idle-modal-wrapper .search-people .ant-input-prefix,
  .busy-idle-modal-wrapper .search-people .ant-input-suffix {
    color: #bfc1c4
  }

  .busy-idle-modal-wrapper .search-people .ant-input-suffix {
    cursor: pointer
  }

  .busy-idle-modal-wrapper .search-people .ant-input-group-addon {
    background: #f2f4f5;
    border: none
  }

  .busy-idle-modal-wrapper .busy-idle-user-content {
    overflow-y: auto;
    max-height: 360px
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list {
    min-height: 330px
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item {
    display: flex;
    align-items: center
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item .user-item {
    display: flex;
    align-items: center;
    height: 60px
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item .user-item .avatar {
    margin-right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background-color: #1686ff;
    text-align: center;
    line-height: 30px;
    color: #fff;
    cursor: pointer
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item .user-item .container {
    height: 100%;
    height: 36px;
    flex: 1 1;
    line-height: 17px;
    overflow: hidden
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item .user-item .container .title-content {
    display: flex;
    align-items: center
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item .user-item .container .title-content .title {
    font-size: 14px;
    color: #232930;
    max-width: 177px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item .user-item .container .title-content .title .name {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 140px;
    margin-right: 5px
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item .user-item .container .title-content .title .external-tag {
    display: inline-block;
    vertical-align: top;
    padding: 0 4px;
    margin-left: 5px;
    margin-top: 4px;
    font-size: 10px;
    text-align: center;
    font-weight: lighter;
    line-height: 15px;
    height: 16px;
    border: 1px solid;
    border-radius: 2px
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item .user-item .container .title-content .label {
    font-size: 12px;
    color: #8f959e;
    margin-left: 7px
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item .user-item .container .desc {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-height: 15px;
    max-width: 324px
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-item .user-item .container .desc .desc-org {
    color: #6e6f71;
    font-size: 12px
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-list-empty .ant-empty .ant-empty-image {
    width: 64;
    height: 64;
    margin: 20px auto 0
  }

  .busy-idle-modal-wrapper .busy-idle-user-content .busy-idle-user-list .busy-idle-user-list-empty .ant-empty .ant-empty-description {
    margin: auto;
    color: #62656d
  }

  .ant-message {
    z-index: 2000
  }

  .ant-drawer-footer {
    text-align: right
  }

  .noap-modal-wrapper .ant-modal-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px
  }

  .noap-modal-wrapper .ant-modal-content {
    border-radius: 6px
  }

  .noap-modal-wrapper .ant-modal-body {
    text-align: center;
    height: 244px;
    padding: 40px 65px
  }

  .noap-modal-wrapper .ant-modal-body .title {
    font-size: 16px;
    line-height: 30px;
    font-weight: 700;
    margin-bottom: 5px
  }

  .noap-modal-wrapper .ant-modal-body .info {
    font-size: 14px;
    line-height: 25px
  }

  .schedule-placeholder::-webkit-input-placeholder {
    color: #bfc1c4
  }

  .schedule-placeholder:-moz-placeholder,
  .schedule-placeholder::-moz-placeholder {
    color: #bfc1c4;
    opacity: 1
  }

  .schedule-placeholder:-ms-input-placeholder {
    color: #bfc1c4
  }

  .calendar-custom-select-option.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background-color: rgba(22, 134, 255, .1)
  }

  .calendar-user-status-popover {
    z-index: 1000;
    cursor: pointer
  }

  .calendar-user-status-popover .ant-tabs-content-holder {
    flex: 1 1
  }

  .calendar-user-status-popover .ant-tabs-nav {
    margin-bottom: 0
  }

  .calendar-user-status-popover .ant-popover-arrow {
    display: none
  }

  .calendar-user-status-popover .ant-popover-inner-content {
    padding: 0;
    width: 400px;
    height: 40vh;
    overflow: auto;
    max-height: 420px
  }

  .calendar-user-status-popover .ant-popover-inner-content .ant-tabs-nav-wrap {
    border-bottom: 1px solid rgba(0, 0, 0, .06)
  }

  .calendar-user-status-popover .ant-popover-inner-content .ant-tabs {
    height: 100%
  }

  .calendar-user-status-popover .ant-popover-inner-content .ant-tabs-content-holder {
    height: calc(100% - 46px);
    overflow-y: auto
  }

  .calendar-user-status-popover .user-status-list {
    overflow-y: auto
  }

  .calendar-user-status-popover .user-status-list-unfinish .user-status-list-item .container .title-content .title {
    max-width: 190px
  }

  .calendar-user-status-popover .user-status-list-empty {
    text-align: center
  }

  .calendar-user-status-popover .user-status-list-empty img {
    width: 70px;
    height: 70px;
    margin-top: 50px
  }

  .calendar-user-status-popover .user-status-list-empty .label {
    margin: auto;
    color: #8f959e
  }

  .calendar-user-status-popover .user-status-list-item {
    padding-left: 16px;
    display: flex;
    align-items: center;
    height: 64px
  }

  .calendar-user-status-popover .user-status-list-item .avatar {
    margin-right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background-color: #1686ff;
    text-align: center;
    line-height: 30px;
    color: #fff;
    cursor: pointer
  }

  .calendar-user-status-popover .user-status-list-item .container {
    height: 100%;
    height: 36px;
    flex: 1 1;
    line-height: 17px;
    overflow: hidden
  }

  .calendar-user-status-popover .user-status-list-item .container .title-content {
    display: flex;
    align-items: center
  }

  .calendar-user-status-popover .user-status-list-item .container .title-content .title {
    font-size: 14px;
    color: #232930;
    max-width: 177px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex
  }

  .calendar-user-status-popover .user-status-list-item .container .title-content .title .name {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 140px;
    margin-right: 5px
  }

  .calendar-user-status-popover .user-status-list-item .container .title-content .title .external-tag {
    display: inline-block;
    vertical-align: top;
    padding: 0 4px;
    margin-left: 5px;
    margin-top: 4px;
    font-size: 10px;
    text-align: center;
    font-weight: lighter;
    line-height: 15px;
    height: 16px;
    border: 1px solid;
    border-radius: 2px
  }

  .calendar-user-status-popover .user-status-list-item .container .title-content .label {
    font-size: 12px;
    color: #8f959e;
    margin-left: 7px
  }

  .calendar-user-status-popover .user-status-list-item .container .title-content .action-remove {
    margin-right: 20px;
    color: #1686ff;
    cursor: pointer
  }

  .calendar-user-status-popover .user-status-list-item .container .desc {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-height: 15px
  }

  .calendar-user-status-popover .user-status-list-item .container .desc .desc-org {
    color: #6e6f71;
    font-size: 12px
  }

  .calendar-user-status-popover .user-status-list-item .task-container {
    display: flex;
    justify-content: space-between;
    flex: 1 1;
    padding-right: 16px;
    align-items: center;
    color: #8f959e
  }

  .calendar-user-status-popover .user-status-list-item .task-container .title-content {
    display: flex;
    flex-direction: column;
    max-width: 160px;
    margin-right: 10px
  }

  .calendar-user-status-popover .user-status-list-item .task-container .title-content .title {
    color: #2d2d2d;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
  }

  .calendar-user-status-popover .user-status-list-item .task-container .title-content .duty {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all
  }

  .calendar-user-status-popover .user-status-list-item .task-container .status-content .action-remove {
    margin-left: 8px;
    color: #1686ff;
    cursor: pointer;
    font-size: 14px
  }

  .calendar-user-status-popover .user-status-list-item .task-container .status-content .process-status {
    display: inline-block;
    padding: 0 5px;
    white-space: nowrap;
    height: 18px;
    line-height: 18px;
    border-radius: 3px;
    color: #000;
    font-size: 12px;
    text-align: center
  }

  .calendar-user-status-popover .user-status-list-item .task-container .status-content .process-status.process-status-1 {
    background: rgba(94, 167, 248, .14)
  }

  .calendar-user-status-popover .user-status-list-item .task-container .status-content .process-status.process-status-2 {
    background: rgba(138, 222, 48, .2)
  }

  .calendar-user-status-popover .user-status-list-item .task-container .status-content .process-status.process-status-3 {
    background: rgba(255, 0, 13, .08)
  }

  .calendar-user-status-popover .user-status-list-item .task-container .status-content .process-status.process-status-4 {
    background: #fdefdd
  }

  .calendar-user-status-popover .user-status-advance-record {
    height: 100%;
    padding: 10px 20px 80px;
    box-sizing: border-box
  }

  .calendar-user-status-popover .user-status-advance-record .user-status-advance-record-title {
    text-align: center;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px
  }

  .calendar-user-status-popover .user-status-advance-record .user-status-advance-record-title span {
    position: absolute;
    left: 0;
    top: 3px
  }

  .calendar-user-status-popover .user-status-advance-record .user-status-advance-record-title p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
  }

  .calendar-user-status-popover .ant-tabs-nav-list {
    width: 100%;
    justify-content: space-between
  }

  .calendar-user-status-popover .ant-tabs-nav-list .ant-tabs-tab {
    margin: 0;
    width: auto
  }

  .calendar-view-timeline {
    height: 100%
  }

  .calendar-view-timeline-bottomItem,
  .calendar-view-timeline-firstItem {
    height: 24px
  }

  .calendar-view-timeline-item {
    display: flex;
    align-items: center;
    height: 48px
  }

  .calendar-view-timeline-item .item-timeLabel {
    color: #a0a5aa;
    font-size: 12px;
    width: 65px;
    text-align: center
  }

  .calendar-view-timeline-item .item-divider {
    flex: 1 1;
    background: #e8ebec;
    height: 1px
  }

  .calendar-view-timeline-currenttime {
    position: absolute;
    color: #f6222d;
    font-size: 12px;
    line-height: 12px;
    width: 65px;
    text-align: center
  }

  .calendar-dayview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
  }

  .calendar-dayview-container {
    flex: 1 1;
    overflow: hidden;
    background-color: #f9fbfc
  }

  .calendar-dayview-container-content {
    position: relative
  }

  .calendar-dayview-container-content-scheduleView {
    width: calc(100% - 65px);
    height: 100%;
    position: absolute;
    top: 0;
    margin-left: 65px
  }

  .calendar-dayview-container-content #drag-box {
    width: calc(100% - 80px);
    right: 12px
  }

  .calendar-dayview-currentline {
    width: 100%;
    height: 1px;
    background-color: #f6222d;
    position: absolute
  }

  .calendar-dayview-currentline-today {
    border-radius: 50%;
    width: 5px;
    height: 5px;
    background-color: red;
    transform: translateY(-40%);
    margin-left: 20%
  }

  .calendar-dayview-container-content-scheduleView .calendar-dayview-currentline:before,
  .calendar-weekview-container-content-scheduleView-item:first-of-type .calendar-dayview-currentline:before {
    content: "";
    width: 0;
    height: 0;
    background: transparent;
    border: 4px solid transparent;
    border-left: 5px solid #f6222d;
    position: absolute;
    top: -4px
  }

  #drag-box {
    position: absolute;
    border: 2px solid #2793ff;
    border-radius: 4px;
    font-size: 12px;
    padding: 0 2px;
    cursor: row-resize
  }

  #drag-block-box,
  #drag-box {
    background: #4da6ff;
    color: #fff;
    z-index: 1000
  }

  #drag-block-box .view-schedule-item-content .time {
    color: #fff
  }

  #drag-mask {
    background-color: #fff;
    opacity: 0
  }

  #drag-mask,
  #drag-silk {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999
  }

  #drag-silk {
    background-color: hsla(0, 0%, 100%, 0);
    cursor: row-resize
  }

  .drag-move-bg {
    background-color: #deedff !important
  }

  .view-schedule-item .pre-circle-task {
    height: 18px;
    display: flex;
    align-items: center;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    display: inline-block
  }

  .view-schedule-item .pre-circle-task-1 {
    border-left: 3px solid #3b7bea
  }

  .view-schedule-item .pre-circle-task-2 {
    border-left: 3px solid #00a645
  }

  .view-schedule-item .pre-circle-task-3 {
    border-left: 3px solid #bfc1c4
  }

  .view-schedule-item .pre-circle-task-4 {
    border-left: 3px solid #ee0a24
  }

  .view-schedule-item .pre-circle-task .pre-circle {
    margin-left: 1px !important
  }

  .view-schedule-item-content .title-decoration {
    text-decoration: line-through
  }

  .calendar-popover .ant-popover-inner {
    width: 364px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2)
  }

  .calendar-popover .ant-popover-arrow {
    display: none
  }

  .calendar-popover .ant-popover-inner-content {
    padding: 0
  }

  .allday-comp {
    max-height: 60px;
    border-top: 1px solid #e8ebec
  }

  .allday-comp-container {
    max-height: 60px;
    display: flex;
    background-color: #fbfbfb;
    position: relative;
    z-index: 20;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .04);
    line-height: 20px
  }

  .allday-comp-header {
    width: 65px;
    text-align: center;
    position: relative;
    font-size: 14px;
    font-family: PingFangSC;
    font-weight: 400;
    color: #232930;
    flex-shrink: 0
  }

  .allday-comp-header .anticon {
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    bottom: 0;
    margin: 0 auto;
    left: 0;
    right: 0
  }

  .allday-comp-content-wrapper {
    width: calc(100% - 65px);
    height: 60px
  }

  .allday-comp-content-wrapper .scroll-view .scroll-view-content {
    scrollbar-width: auto
  }

  .allday-comp-content {
    flex: 1 1;
    padding-bottom: 8px
  }

  .allday-comp-content .allday-col {
    flex: 1 1;
    min-height: 60px;
    border-left: .5px solid #e8ebec
  }

  .allday-comp-content .calendar-restrict-no-wrap {
    display: flex;
    padding: 8px 10px;
    color: #1686ff;
    align-items: center
  }

  .allday-comp-content .calendar-restrict-no-wrap .calendar-restrict-no {
    cursor: default;
    width: 14px;
    height: 14px;
    margin-right: 5px
  }

  .allday-comp-content .weekview-week-current {
    background-color: rgba(22, 134, 255, .1)
  }

  .allday-comp-content .allday-col-item {
    height: 18px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 2px;
    margin-right: 0;
    margin-left: -1px;
    border-radius: 0;
    border-top: 1px solid #f0f3f3;
    border-bottom: 1px solid #f0f3f3
  }

  .allday-comp-content .allday-col-item-init {
    margin-left: 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-left: 1px solid #f0f3f3;
    margin-right: 0
  }

  .allday-comp-content .allday-col-item-endday {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right: 1px solid #f0f3f3
  }

  .allday-comp-content .allday-col-item-dayview {
    border: 1px solid #f0f3f3;
    margin-left: 0
  }

  .allday-comp-content .allday-col-item-more {
    cursor: pointer;
    color: #a0a5aa
  }

  .allday-comp-content .allday-col-item-more:hover {
    color: #1686ff
  }

  .allday-comp-content .allday-col-item .col-item-content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all
  }

  .allday-comp-content .allday-col-item .col-item-content .pre-circle {
    width: 8px;
    height: 8px;
    background-size: 8px;
    background-repeat: no-repeat;
    margin-left: 4px;
    margin-right: 1px;
    display: inline-block
  }

  .allday-comp-content .allday-col-item .col-item-content .pre-circle-task {
    height: 100%;
    display: flex;
    align-items: center;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    display: inline-block
  }

  .allday-comp-content .allday-col-item .col-item-content .pre-circle-task-1 {
    border-left: 3px solid #3b7bea
  }

  .allday-comp-content .allday-col-item .col-item-content .pre-circle-task-2 {
    border-left: 3px solid #00a645
  }

  .allday-comp-content .allday-col-item .col-item-content .pre-circle-task-3 {
    border-left: 3px solid #bfc1c4
  }

  .allday-comp-content .allday-col-item .col-item-content .pre-circle-task-4 {
    border-left: 3px solid #ee0a24
  }

  .allday-comp-content .allday-col-item .col-item-content .pre-circle-task .pre-circle {
    margin-left: 1px !important
  }

  .allday-comp-content .allday-col-item .col-item-content .title-decoration {
    text-decoration: line-through
  }

  .allday-comp-content .allday-col-item-timepast .col-item-content {
    opacity: .5
  }

  .allday-comp-content .allday-col-item-empty {
    border: none
  }

  .allday-comp-lunar {
    width: 65px;
    color: #8f959e
  }

  .allday-comp.weekview-allday .allday-comp-content {
    display: flex
  }

  .dayview-allday {
    border: none
  }

  .dayview-allday .allday-comp-container {
    background-color: #fff
  }

  .quick-create-modal-wrap .quick-create-modal {
    -webkit-animation-duration: 0s !important;
    animation-duration: 0s !important;
    width: 360px !important;
    margin: 0 !important;
    bottom: 0 !important
  }

  .quick-create-modal-wrap .ant-modal-wrap {
    pointer-events: none !important;
    overflow: hidden
  }

  .quick-create-modal-wrap .ant-modal-header {
    line-height: 22px;
    padding: 17px 24px;
    border-bottom: none
  }

  .quick-create-modal-wrap .ant-modal-body {
    padding: 10px 24px
  }

  .quick-create-modal-wrap .ant-modal-footer {
    border-top: 1px solid #dee0e3;
    border-radius: 0 0 8px 8px
  }

  .quick-create-modal-wrap .ant-modal-close-x {
    color: #bfc1c4
  }

  .quick-create-modal-wrap .mb20 {
    margin-bottom: 20px
  }

  .quick-create-modal-wrap .calendar-content {
    justify-content: space-between;
    align-items: center
  }

  .quick-create-modal-wrap .calendar-content .calendar-title-content {
    width: 284px
  }

  .quick-create-modal-wrap .calendar-content .calendar-title-content input {
    flex: 1 1;
    height: 32px
  }

  .quick-create-modal-wrap .calendar-content .calendar-date-content {
    display: flex;
    width: 284px;
    justify-content: space-between;
    align-items: center
  }

  .quick-create-modal-wrap .calendar-content .calendar-date-content .separator {
    width: 8px;
    background: #8f959e;
    height: 1px;
    margin: 0 8px
  }

  .quick-calendar-date-picker,
  .quick-create-modal-wrap .time-icon,
  .quick-create-modal-wrap .title-icon {
    display: flex;
    align-items: center
  }

  .quick-calendar-date-picker {
    width: 75px;
    height: 32px;
    justify-content: center;
    color: #232930;
    font-size: 14px;
    margin-right: 16px;
    transition: background-color .3s ease;
    position: relative;
    cursor: default;
    background-color: #f8f8f8;
    border-radius: 3px
  }

  .quick-calendar-date-picker .action {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: 10px;
    color: #c4c4c4;
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    visibility: hidden
  }

  .quick-calendar-date-picker-visible {
    background-color: #f0f3f3
  }

  .quick-calendar-date-picker-notime {
    color: #8f959e
  }

  .quick-calendar-date-picker-notime:hover {
    background-color: rgba(22, 134, 255, .1)
  }

  .quick-calendar-date-picker-repeat {
    border: none;
    height: 32px;
    float: left;
    margin-right: 0;
    display: flex;
    justify-content: space-between;
    color: #2f3742
  }

  .quick-calendar-date-picker-repeat .repeat-date {
    text-indent: 8px
  }

  .quick-calendar-date-picker:hover {
    background-color: #f0f3f3
  }

  .quick-calendar-date-picker:hover .anticon {
    visibility: visible
  }

  .quick-calendar-date-picker-disable {
    color: #6a6f75
  }

  .quick-calendar-date-picker-disable:hover {
    background-color: #f6f7f8;
    cursor: not-allowed
  }

  .quick-calendar-date-picker span.date {
    width: 100%;
    max-width: 110px;
    word-break: keep-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center
  }

  .quick-calendar-date-picker span.repeat-date {
    width: auto;
    text-align: left
  }

  .calendar-date .quick-time.ant-popover-open span {
    opacity: .4
  }

  .quick-calendar-date-picker-popover .ant-popover-inner-content {
    padding: 0;
    width: 226px
  }

  .quick-calendar-date-picker-popover .ant-popover-inner-content .quick-calendar-date-picker-content .picker-title {
    height: 52px;
    border-bottom: 1px solid #f0f3f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px
  }

  .quick-calendar-date-picker-popover .ant-popover-inner-content .quick-calendar-date-picker-content .picker-title .item {
    width: 124px;
    height: 32px;
    background: #fff;
    border: 1px solid #dee0e3;
    border-radius: 4px;
    padding: 0 10px;
    color: #232930;
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .quick-calendar-date-picker-popover .ant-popover-inner-content .quick-calendar-date-picker-content .picker-title .time .anticon {
    font-size: 12px
  }

  .quick-calendar-date-picker-popover .ant-popover-inner-content .quick-calendar-date-picker-content .base-calendar {
    padding: 0 14px
  }

  .quick-calendar-date-picker-popover .ant-popover-inner-content .quick-calendar-date-picker-content .base-calendar .calendar-body-wrapper {
    font-size: 14px
  }

  .quick-calendar-date-picker-popover .ant-popover-inner-content .quick-calendar-date-picker-content .quick-calendar-date-picker-footer {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 22px;
    justify-content: flex-end;
    border-top: 1px solid #f0f3f3;
    margin-top: 8px
  }

  .quick-calendar-date-picker-popover .ant-popover-inner-content .quick-calendar-date-picker-content .quick-calendar-date-picker-footer button {
    width: 60px;
    height: 28px;
    border-radius: 4px;
    line-height: 28px;
    font-size: 12px;
    outline: none;
    cursor: pointer
  }

  .quick-calendar-date-picker-popover .ant-popover-inner-content .quick-calendar-date-picker-content .quick-calendar-date-picker-footer-cancel {
    background: #fff;
    border: 1px solid #dee0e3;
    color: #232930;
    margin-right: 8px
  }

  .quick-calendar-date-picker-popover .ant-popover-inner-content .quick-calendar-date-picker-content .quick-calendar-date-picker-footer-ok {
    background: #1686ff;
    color: #fff;
    border: none
  }

  .index_flex-layout-center-h__33IY- {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
  }

  .index_flex-layout-center-h__33IY- img {
    width: 8px
  }

  .index_flex-layout-center-left__1p6ju {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start
  }

  .index_split-line-bg__pyVib {
    background-color: #e8ebec
  }

  .index_multiline-overflow-3__3eeTT {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box
  }

  .index_color-gray__1v_eR {
    color: #8f959e
  }

  .index_color-primary__3lWuB {
    color: #1686ff
  }

  div.index_item__keZXe {
    width: 83px;
    height: 32px;
    padding: 0;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    background-color: #f8f8f8
  }

  div.index_item__keZXe:hover {
    cursor: pointer;
    background-color: #f8f8f8
  }

  .view-schedule-item {
    border-radius: 2px;
    border: 1px solid #f0f3f3;
    overflow: hidden;
    font-size: 12px;
    display: flex;
    cursor: pointer
  }

  .view-schedule-item .pre-circle {
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: 50%;
    width: 8px;
    height: 18px;
    margin: 0 1px 0 4px
  }

  .view-schedule-item-content {
    width: 100%;
    max-width: calc(100% - 20px)
  }

  .view-schedule-item-content .title {
    margin-top: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .view-schedule-item-content .time {
    color: #999;
    width: calc(100% + 14px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: -14px
  }

  .busy-idle-header {
    display: flex;
    z-index: 1002;
    border-bottom: .5px solid #efefef
  }

  .busy-idle-header,
  .busy-idle-header-space-cell {
    background: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0
  }

  .busy-idle-header-space-cell {
    width: 65px;
    min-width: 65px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    left: 0;
    border-right: .5px solid #efefef
  }

  .busy-idle-header-item {
    flex: 1 1;
    border-right: 1px solid #e8ebec;
    min-width: 88px
  }

  .busy-idle-header-item .busy-idle-title {
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center
  }

  .busy-idle-header-item .busy-idle-title label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 18px)
  }

  .busy-idle-header-item .busy-idle-title .anticon {
    margin-left: 8px;
    color: #8f959e
  }

  .busy-idle-header-item:last-child {
    border-right: none
  }

  .left-comp {
    display: flex;
    align-items: center
  }

  .left-comp .today {
    width: 55px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #efefef;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    color: #bfc1c4;
    cursor: pointer
  }

  .left-comp .notoday {
    border: 1px solid #1686ff;
    color: #1686ff
  }

  .left-comp .change-date-wrapper {
    margin: 0 12px 0 8px;
    width: 50px;
    height: 30px;
    border-radius: 4px;
    line-height: 30px;
    border: 1px solid #efefef;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-evenly
  }

  .left-comp .change-date-wrapper .anticon {
    font-size: 12px;
    color: #a0a5aa
  }

  .left-comp .time {
    font-size: 16px;
    font-weight: 500;
    color: #232930;
    text-align: center
  }

  .right-comp {
    display: flex;
    align-items: center;
    justify-content: center
  }

  .right-comp .filter {
    color: #232930
  }

  .calendar-busyidle-timelabel {
    width: 65px;
    height: 100%;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    background: #f9fbfc;
    z-index: 1001;
    border-right: .5px solid #efefef
  }

  .calendar-busyidle-timelabel-bottomItem,
  .calendar-busyidle-timelabel-firstItem {
    height: 24px
  }

  .calendar-busyidle-timelabel-item {
    display: flex;
    align-items: center;
    height: 48px
  }

  .calendar-busyidle-timelabel-item .item-timeLabel {
    color: #a0a5aa;
    font-size: 12px;
    width: 65px;
    text-align: center
  }

  .calendar-busyidle-timelabel-currenttime {
    position: absolute;
    color: #f6222d;
    font-size: 12px;
    line-height: 12px;
    width: 65px;
    text-align: center
  }

  .calendar-busyidle-timeline {
    position: absolute;
    width: 100%
  }

  .calendar-busyidle-timeline-bottomItem,
  .calendar-busyidle-timeline-firstItem {
    height: 24px
  }

  .calendar-busyidle-timeline-item {
    display: flex;
    align-items: center;
    height: 48px
  }

  .calendar-busyidle-timeline-item .item-timeLabel {
    color: #a0a5aa;
    font-size: 12px;
    width: 65px;
    text-align: center
  }

  .calendar-busyidle-timeline-item .item-divider {
    flex: 1 1;
    background: #e8ebec;
    height: 1px
  }

  .calendar-busyidle-timeline-currenttime {
    position: absolute;
    color: #f6222d;
    font-size: 12px;
    line-height: 12px;
    width: 65px;
    text-align: center
  }

  .flex-layout-center-h {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
  }

  .flex-layout-center-h img {
    width: 8px
  }

  .flex-layout-center-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start
  }

  .split-line-bg {
    background-color: #e8ebec
  }

  .multiline-overflow-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box
  }

  .color-gray {
    color: #8f959e
  }

  .color-primary {
    color: #1686ff
  }

  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden
  }

  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
  }

  .img_icon {
    width: 100px;
    height: 100px
  }

  .img_icon img {
    width: 100%
  }

  .dot {
    line-height: 1;
    display: flex;
    overflow: hidden
  }

  .dot span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #306fdc;
    display: inline-block;
    -webkit-animation: dot 2s step-start infinite;
    animation: dot 2s step-start infinite;
    margin: 10px 5px
  }

  @-webkit-keyframes dot {
    33% {
      transform: translateX(-32px)
    }

    66% {
      transform: translateX(-16px)
    }
  }

  @keyframes dot {
    33% {
      transform: translateX(-32px)
    }

    66% {
      transform: translateX(-16px)
    }
  }

  @media screen and (max-width: 959px) {
    .img_icon {
      width: 100px;
      height: 100px;
      zoom: 1
    }

    .img_icon img {
      width: 100%
    }
  }

  .userSelectionModalLeft .ant-tabs-nav {
    display: none;
  }

  .userSelectionModalLeft .ant-tabs-content-holder,
  .userSelectionModalLeft .ant-tabs-tabpane {
    height: 100%;
  }

  .userSelectionModalLeft .crumb-dept-user-container {
    margin-top: 10px;
  }