@import '~react-grid-layout/css/styles.css';
@import "./scss/analysis";
@import "./scss/widget";
@import "./scss/plugin";
@import "./scss/analysis-2.scss";
@import "./scss/table.scss";
@import "./scss/handle.scss";

body {
  -webkit-font-smoothing: antialiased;
  font-family: "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", STHeiti, "WenQuanYi Micro Hei",
    SimSun, sans-serif !important;
}

* {
  -webkit-appearance: none !important;
}

#root * {
  // touch-action: pan-y;
}

.app-root {
  width: 100%;
  height: 100%;

  .report-app {
    display: inline-flex;
    width: 100%;
    height: 100%;

    .layout-menu {
      width: 200px;
      height: 100%;
    }

    .corner {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 98;
      width: 220px;
      opacity: 1;
      transition: width 0.4s ease;
    }

    .corner>.version {
      font-size: 12px;
      margin: 5px 0 5px 30px;
      color: #888;
    }

    .corner>.client-help {
      height: 50px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      padding-left: 30px;
      line-height: 50px;
    }

    .page {
      position: relative;
      width: calc(100% - 200px);
      height: 100%;
      background: #f7f7f7;
      min-width: 900px;
      font-size: 12px;
    }
  }
}

input,
button,
select,
textarea {
  outline: none !important;
}

textarea {
  resize: none !important;
}

ul {
  padding: 0;
  margin: 0;

  li {
    text-decoration: none;
    list-style-type: none;
  }
}

a {
  color: inherit;
  text-decoration: none;

  &:hover,
  &:visited,
  &:active,
  &:link {
    text-decoration: none;
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}


.table-bordered {
  tr {

    td,
    th {
      &.center {
        text-align: center;
      }
    }
  }
}

.spanBtn {
  cursor: pointer;
  color: #19f;
  display: block;
}

.small-text {
  display: inline-block;
  font-size: 12px;
  -webkit-transform: scale(0.83) translate(0, 1%);
  -moz-transform: scale(0.83) translate(0, 1%);
  -ms-transform: scale(0.83) translate(0, 1%);
  -o-transform: scale(0.83) translate(0, 1%);
  transform: scale(0.83) translate(0, 1%);
  margin-left: -5px;
}

.hide-opacity {
  opacity: 0 !important;
}

.hide {
  display: none !important;
}

tr.clickable {
  cursor: pointer;

  &.clicked {
    cursor: inherit;

    td {
      font-weight: 600;
      background-color: #c9e3f5 !important;
    }
  }
}

.chartHover {
  background: rgba(0, 0, 0, 0.3);
  padding: 5px 20px 5px 10px;
  margin: -5px;
  border-radius: 5px;
  font-size: 12px;

  .tip {
    color: #ddd;
    font-style: italic;
  }

  .title {
    font-weight: bold;
  }

  span {
    display: inline-block;
    vertical-align: middle;

    &.num {
      font-size: 15px;
    }
  }

  .highlight {
    color: #75d577;
    font-weight: bold;
  }

  .detail {
    width: 95px;
    text-align: right;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .small-text {
    -webkit-transform: scale(0.83) translate(0, 3%);
    -moz-transform: scale(0.83) translate(0, 3%);
    -ms-transform: scale(0.83) translate(0, 3%);
    -o-transform: scale(0.83) translate(0, 3%);
    transform: scale(0.83) translate(0, 3%);
  }
}

.sort {
  >span {
    cursor: pointer;
    position: relative;
  }

  .sort-icon {
    display: inline-block;
    padding-left: 5px;

    &:before {
      content: "";
      display: block;
      height: 0;
      border: 5px solid #dfdfdf;
      width: 0;
      border-top: 0;
      border-left-color: transparent;
      border-right-color: transparent;
      margin-bottom: 3px;
    }

    &:after {
      content: "";
      display: block;
      height: 0;
      border: 5px solid #dfdfdf;
      width: 0;
      border-bottom: 0;
      border-left-color: transparent;
      border-right-color: transparent;
      margin-bottom: -2px;
    }
  }

  &.asc {
    .sort-icon {
      &:before {
        border-bottom-color: #19f;
      }
    }
  }

  &.desc {
    .sort-icon {
      &:after {
        border-top-color: #19f;
      }
    }
  }
}

.remove-icon {
  color: #999;
  cursor: pointer;

  &:after {
    content: "+";
    transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
    display: block;
    max-width: 10px;
  }
}

.big-num {
  font-size: 22px;
  font-weight: 500;
}

.float-rt {
  float: right;
}

.data-block {
  .headword {
    font-size: 13px;
    color: #555;
  }
}

.minus-num {
  color: #ff0000 !important;
}

.allocated {
  color: #ee482e;
}

.ant-tree-select {
  width: 100%;
}

.ant-select-tree {
  padding: 0;

  li {
    margin: 2px 0;

    .ant-select-tree-node-content-wrapper-open {
      border-radius: none;
    }

    .ant-select-tree-child-tree-open {
      width: 100%;
    }

    .ant-select-tree-child-tree {
      .ant-select-tree-node-content-wrapper-normal {
        padding-left: 20px;
      }
    }
  }

  .receipt-tree-node {
    .ant-select-tree-child-tree-open {
      padding: 0;
    }
  }

  .ant-select-tree-treenode-disabled {
    .ant-select-tree-node-content-wrapper-open {
      cursor: default !important;

      .ant-select-tree-title {
        cursor: default;
      }
    }
  }
}

.auto-scroll-y {
  height: 100%;

  .ant-spin-nested-loading,
  .ant-spin-container,
  .ant-table,
  .ant-table-scroll,
  .ant-table-body-inner,
  .ant-table-fixed-left,
  .ant-table-content {
    height: 100%;
  }

  .ant-table-content {
    position: relative;
  }

  .ant-table-body,
  .ant-table-body-inner {
    overflow-y: auto !important; //如果要同时支持横向滚动，请注释此行(if you enable scroll-x, please disable this)
  }

  .ant-table-header {
    overflow-y: hidden !important; //如果列有轻微错位请注释掉这行(if table a little garbled, try disable this)
  }

  .ant-table-body {
    height: calc(100% - 40px) //表头高度(table head offset height);
  }

  .ant-table-body-outer {
    height: calc(100% - 40px) //表头高度(table head offset height);
  }

  .ant-table-body-inner {
    overflow-x: hidden;
  }
}

.sort-dorpdown {
  ul {
    max-height: 160px;
    overflow-y: scroll;

    .ant-dropdown-menu-item,
    .ant-dropdown-menu-item-disabled {
      width: 112px;
      line-height: 40px;
      padding: 0px;

      .column-name {
        width: 100%;
        padding: 0px 14px;
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .ant-dropdown-menu-item {
      .column-name:hover {
        color: #3296fa;
      }
    }

    .ant-dropdown-menu-item-disabled {
      .column-name:hover {
        color: rgba(0, 0, 0, 0.25);
      }
    }
  }
}

.ant-popover-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
}

.ant-popover-mask-hidden {
  position: static;
}

.helpPopover {
  .ant-popover-inner {
    width: 298px;
    border-radius: 8px;

    .ant-popover-inner-content {
      width: 100%;
      padding: 18px 0px 0px 0px !important;

      .popover-inner {
        width: 100%;

        .popover-inner-body {
          width: 100%;
          padding: 0px 18px;
          border-bottom: 2px solid #F1F4F9;
          font-family: PingFangSC-Medium, PingFang SC, sans-serif;

          .report-help-gif {
            width: 100%;
            height: 174px;
            border-radius: 4px;
            margin-bottom: 14px;
            background-repeat: no-repeat;
            background-size: 100% 100%
          }

          .title {
            font-size: 18px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
          }

          .description {
            margin-top: 10px;
            margin-bottom: 8px;
            font-size: 12px;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);
          }
        }

        .popover-footer {
          padding: 0px 18px;
          height: 51px;
          line-height: 51px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;

          .overStep {
            font-size: 14px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 20px;
            cursor: pointer;
          }

          .nextStep {
            font-size: 16px;
            font-weight: 400;
            color: rgba(50, 150, 250, 1);
            float: right;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.fx-Popover {

  .ant-popover-arrow,
  .ant-popover-arrow-content {
    border-top-color: #3295FA !important;
    border-left-color: #3295FA !important;
  }

  .ant-popover-inner-content {
    background: #3295FA;
    font-size: 13px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
    line-height: 18px;

    .popover-del {
      width: 138px;
      display: flex;
      flex-direction: column;

      .popover-del-x {
        font-size: 18px;
        cursor: pointer;
        text-align: right;
      }
    }
  }
}

.chartLinkDetailPopover {
  .ant-popover-inner {
    width: 600px;
    border-radius: 8px;

    .ant-popover-inner-content {
      width: 100%;
      padding: 10px 12px !important;

      .popover-inner {
        width: 100%;

        .popover-inner-body {
          width: 100%;
          font-family: PingFangSC-Medium, PingFang SC, sans-serif;

          .report-help-gif {
            width: 100%;
            height: 200px;
            border-radius: 4px;
            margin-bottom: 14px;
            background-size: contain;
            background-repeat: no-repeat;
          }

          .img-chartLink {
            background-image: url(../report-view/components/images/chartLink.gif);
          }

          .title {
            margin-top: 8px;
            margin-bottom: 10px;
            font-size: 13px;
            font-family: MicrosoftYaHei, sans-serif;
            text-align: left;
            color: #555555;
          }
        }
      }
    }
  }
}

.ant-select-selection-item {
  .colorOptionItem {
    display: flex;
    height: 8px;
    margin: 11px 0px;

    .colorItem {
      flex-grow: 1;
    }
  }
}

.ant-select-item-option-content {
  .colorOptionItem {
    display: flex;
    height: 8px;
    margin: 7px 0px;

    .colorItem {
      flex-grow: 1;
    }
  }
}

.column-config-popover {
  .ant-popover-inner {
    width: 100%;
    max-width: 250px;

    .ant-popover-inner-content {
      width: 100%;
    }
  }
}

.personnel-field {
  width: 76px;
  height: 34px;
  background: #f7f7f7;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}

.personnel-fields {
  display: flex;
  flex-wrap: wrap;
  background: #f7f7f7;
  border-radius: 3px;
  padding: 4px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #757575;
  line-height: 16px;

  .personnel-fields-tag {
    margin: 2px;
    border-radius: 3px;
    padding: 2px;
    background: #f7f7f7;
    border: 1px solid #e1e1e1;
    cursor: pointer;

    .fm-user-group,
    .fm-employee {
      color: #3296fa;
      margin-right: 4px;
    }
  }

  .empty-personnel-fields-tag {
    margin: 2px;
    border-radius: 3px;
    padding: 2px;
  }

  &:hover {
    background: #f0faff;
  }
}

.chartTypesDropdown {
  .ant-dropdown-menu {
    padding: 0px;
  }

  .ant-dropdown-menu-item {
    width: auto;
    height: 30px;
    padding: 3px 8px 3px 4px;
    min-width: 112px;
  }

  .report-create-parent {
    width: 100%;
    height: 100%;
    display: flex;

    .chartLabel {
      font-size: 10px;
      font-family: PingFangSC, PingFangSC-Regular, sans-serif;
      font-weight: 400;
      color: #333;
      margin-left: 8px;
      line-height: 24px;
    }
  }

  .report-create-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px auto;
    height: 24px;
    width: 24px;
    cursor: pointer;
  }

  .report-create-icon:hover {
    background-color: #f5fbff;
  }
}


.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-content {
  width: 100%;
  height: 100%;
}

.ant-picker {
  width: 100%;
}

.chartConfigPopover {
  // height: 340px;
  width: 280px;

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

  .chart-config-wrapper {
    width: 100%;
    // height: 100%;
    padding: 16px;

    .chart-config-wrapper-title {
      font-size: 12px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 12px;
      display: flex;
      align-items: center;

      .fm-InfoCircleFilled {
        color: #0088FF;
        margin-right: 5px;
      }
    }

    .chart-config-wrapper-contents {
      overflow-y: auto;
      max-height: 300px;

      .chart-config-wrapper-content {
        font-size: 12px;
        font-weight: 400;
        color: #555555;
        margin-bottom: 8px;
        // display: flex;
        word-break: break-all;

        &-radius {
          display: inline-block;
          width: 5px;
          height: 5px;
          border-radius: 100%;
          background-color: #555555;
          margin-right: 4px;
          margin-bottom: 2px
        }
      }
    }

    .chart-config-wrapper-content:last-child {
      margin-bottom: 0px;
    }
  }
}