.root {
  :global(.ant-drawer-content-wrapper) {
    box-shadow: none;
  }

  :global(.ant-drawer-content) {
    width: 85%;
    display: flex;
    flex-direction: column;
    background: #0b0a0a96;
  }
}

.drawer {
  width: 100%;
  right: 10%;
  --height: 40rem;
  top: calc((100% - var(--height)) / 2);
  height: var(--height) !important;
  position: relative;
  border-radius: 0.375rem;

  :global(.ant-drawer-header) {
    padding: 1rem 0;

    :global(.ant-drawer-header-title) {
      flex-direction: row-reverse;
      padding-left: 1.5rem;
    }
  }
}

.container {
  position: relative;
  height: 100%;

  .timeline {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    gap: 0.5rem;

    .history {
      display: flex;
      font-family: var(--theme-font);
      font-size: 1rem;

      .card-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;

        .card {
          width: 4rem;
          height: auto;
        }

        .location {
          margin-top: 3rem;
          margin-left: 1rem;
          color: #8484ff;
        }
      }

      .op-container {
        display: flex;
        flex-direction: column;
        margin: 0 0.8rem;

        .op-text {
          display: flex;
          flex: 1;
          align-items: flex-end;
          justify-content: center;
          margin-bottom: 0.2rem;
          color: #48faf0;
        }

        .op-icon {
          display: flex;
          flex: 1;
          width: 3rem;
          height: auto;
        }
      }

      .target {
        margin-top: 3rem;
        color: #f16b3f;
      }
    }
  }
}
