.flow-list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .flow-list {
    display: flex;
    width: 100%;
    overflow: auto;
    flex-direction: row;
    padding: 20px;
    box-sizing: border-box;
    flex: 1;
    position: relative;
    .flow-bg {
      position: absolute;
      pointer-events: none;
      width: 100%;
      left: 0;
      z-index: 0;
      height: 40px;
      background-color: var(--hover-bg-color);
      &:not(.active) {
        display: none;
      }
    }
    .flow-graph {
      z-index: 1;
      flex: none;
      padding-top: 15px;
      padding-left: 25px;
      circle:hover {
        cursor: pointer;
      }
    }
    .flow-entries {
      z-index: 1;
      flex: none;
      display: flex;
      flex-direction: column;
      align-items: start;
    }
  }

  .footer {
    width: 100%;
    flex: none;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: row;
    border-top: 1px solid var(--border-color);
    .open-import {
      margin: 15px;
      display: flex;
      padding: 7px 14px;
      border-radius: 5px;
      color: var(--text-inactive-color);
      background-color: var(--bg-color);
      border: 1px solid var(--border-color);
      cursor: pointer;
    }
    
    .open-import:hover {
      color: var(--highlight-green);
      border-color: var(--highlight-green);
      background-color: var(--light-green);
    }
  }
}

