@import "../../../styles/var";

.offlineMain {
  display: flex;
  height: 100%;
  min-height: 0;

  .right {
    display: flex;
    flex: 0 0 300px;
    width: 300px;
    padding-top: 50px;
    overflow-y: auto;
    font-size: 14px;
    border-right: 1px solid @border-color;

    .workflowMain {
      display: flex;
      flex: 1;
      flex-direction: column;
      width: 299px;
      min-height: 0;
      .navTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 34px;
        // margin: -10px -2px 3px;
        padding: 0 8px;
        color: #5c5c5c;
        font-weight: 700;
        font-size: 14px;
      }
      .header {
        display: flex;
        flex: 0 0 28;
        padding: 2px 8px 2px 0px;
        font-weight: bold;
        line-height: 24px;
        background: @primary-color-1;
        cursor: default;
        user-select: none;
        .title {
          flex: 1;
          cursor: pointer;
          .icon {
            margin: 4px;
            font-size: 10px;
            transition: transform 0.5s;
          }
          .iconExpand {
            transform: rotate(90deg);
          }
        }
      }
      .workflowList {
        flex: 1;
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
  }

  .content {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;

    .fileNameList {
      width: 100%;
    }

    .contentMain {
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(100vh - 152px);
      overflow-y: scroll;
    }

    .luckysheet {
      position: relative;
      top: calc(-70vh + 202px);
      left: 32px;
      z-index: 10;
      width: calc(100% - 64px);
      height: calc(70vh - 202px);
    }

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

    :global .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
      padding: 4px 8px;
    }
    :global .ant-tabs-top > .ant-tabs-nav {
      margin: 0;
    }

    :global .ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab {
      border-radius: 0;
    }
  }
}
