.drag-wrapper-draggable {
  transform: translate(0px, 0px);
  position: fixed;
  right: 0px;
  top: var(--layoutTopHeight, 64px);
  width: 100%;
  z-index: 99;

  &.draggleClose {
    display: none;
    opacity: 0;
  }
}

.guideSection {
  position: absolute;
  user-select: auto;
  touch-action: none;
  // width: 400Px;
  // height: 621Px;
  display: inline-block;
  top: 0px;
  left: 0px;
  cursor: auto;
  pointer-events: all;
  z-index: 101;
  // transform: translate(354Px, 132Px);
  // max-width: 1024Px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: -2px 5px 12px 0px rgba(0, 0, 0, 0.12);
  border: 1px solid #e8e8e8;
  // border-radius: 16Px;
  overflow: hidden;
}

.guideCenter {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.guideTitle {
  // border-radius: 16Px 16Px 0 0;
  cursor: move;
  background: #f7f8fa;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
  .name {
    font-weight: 600;
    font-size: 16px;
    color: #131415;
    line-height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;

    .back {
      display: inline-block;
      width: 14px;
      height: 14px;
      background: url('./images/arrow-line-left.png') no-repeat center;
      background-size: contain;
      margin-right: 8px;
    }
  }

  .operation {
    display: flex;
    align-items: center;

    i {
      width: 22px;
      height: 22px;
      margin-left: 12px;
      cursor: pointer;
      transition: .2s ease;

      &:hover {
        background-color: rgba(34, 71, 133, 0.08);
        border-radius: 4px;
        transition: .2s ease;
      }
    }
    .screen {
      background: url('./images/screen.png') no-repeat center;
      background-size: contain;
    }
    .screenSmall {
      background: url('./images/screen-small.png') no-repeat center;
      background-size: contain;
    }
    .resize {
      background: url('./images/resize.png') no-repeat center;
      background-size: contain;
    }
    .resizeLarge {
      background: url('./images/resize-large.png') no-repeat center;
      background-size: contain;
    }
    .close {
      background: url('./images/close.png') no-repeat center;
      background-size: contain;
    }
  }
}

.container {
  display: flex;
  box-sizing: border-box;
  height: calc(100% - 54px);

  &.windowContainer {
    .leftGuide {
      width: 300px;
      padding-right: 16px;
      position: sticky !important;
      top: 0;
      position: relative;
      > div {
        overflow-y: auto;
        &::-webkit-scrollbar {
          display: none;
        }
        height: 100%;
        &::before {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          content: ' ';
          display: inline-block;
          border-left: 1px solid #e8e8e8;
        }
      }
    }
    .rightGuide {
      width: auto;
      flex: 1;
      padding-left: 16px;
    }
  }

  .leftGuide,
  .rightGuide {
    padding-left: 24px;
    padding-right: 24px;
    height: 100%;
    overflow-y: auto;
  }
}
.searchContainer {
  background-color: #fff;
  position: sticky;
  top: 0;
  left: 0;
  padding: 16px 0;
  z-index: 1;
  // :global {
  //   .TheSearch {
  //     border-radius: 6Px !important;
  //   }
  // }
}

.leftGuide {
  width: 100%;
  :global {
    .n-collapse {
      --n-title-font-weight: 600 !important;
      --n-title-font-size: 16px !important;
      --n-title-text-color: #131415 !important;
    }
    .n-collapse-item {
      border-top: none !important;
      margin-top: 0;
      .n-collapse-item__header {
        padding: 12px 0;
        &:hover .n-collapse-item__header-main {
          color: #097bec !important;
        }
      }
    }
    // .n-collapse .n-collapse-item:not(:first-child)
    .n-collapse-item__header-main {
      line-height: 22px;

    }
    .n-collapse-item__content-inner {
      padding-top: 0 !important;
    }
  }
  .arrow {
    width: 16px;
    height: 16px;
  }

  .childItem {
    padding: 10px 20px 10px 40px;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    // margin-top: 8Px;
    margin-bottom: 6px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:hover,
    &.active {
      color: #097bec;
      background: #e8f4ff;
      border-radius: 6px;
    }
  }

  .emptyDiv {
    height: 80%;
  }
}

.rightGuide {
  word-break: break-all;
  width: 100%;
  padding: 12px 0;
  :global {
    .n-spin-container {
      height: 100%;
    }

    .n-space {
      font-size: 0;
    }

    video,
    img {
      max-width: 100%;
      cursor: pointer;
    }

    .videoSection {
      position: relative;
      display: inline-block;

      &::before {
        content: '';
        display: inline-block;
        width: 50px;
        height: 50px;
        background: url('./images/video-center.png') no-repeat center;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        // transform: translate(-50%);
        margin-left: -25px;
        margin-top: -25px;
        pointer-events: none;
      }
    }
  }
}

.videoModal {
  position: absolute;
  user-select: auto;
  touch-action: none;
  // width: 400Px;
  // height: 621Px;
  // display: flex;
  top: 0px;
  left: 0px;
  cursor: auto;
  pointer-events: all;
  z-index: 101;
  // transform: translate(354Px, 132Px);
  // max-width: 1024Px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: -2px 5px 12px 0px rgba(0, 0, 0, 0.12);
  // border: 1px solid #e8e8e8;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  :global {
    .videoWrapModal {
      height: 100% !important;
    }
  }
}