.programStageEditForm {
  display: flex;
  box-sizing: border-box;

  .left {
    width: auto;
  }

  .right {
    width: 30%;
    min-width: 300px;
  }

  .paletteContainer {
    &:hover {
      .resizeHandle:after {
        border-color: rgba(0, 0, 0, 0.12);
      }
    }

    .resizeHandle {
      position: absolute;
      top: -20px;
      right: 0;
      bottom: -16px;
      left: -8px;
      width: 12px;
      cursor: col-resize;

      &:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        top: 0;
        border: 0 dashed rgba(0, 0, 0, 0);
        border-left-width: 1px;
        margin-left: 5px;
        transition: border 125ms linear;
      }
      &:hover:after {
        border-color: rgba(0, 0, 0, 0.45);
      }
    }

    .palette {
      padding-left: 1rem;

      .elements {
        padding: 0 8px 8px;
        font-size: 13px;
        font-weight: 300;

        display: flex;
        flex-direction: column;

        overflow-x: auto;

        .cell {
          position: relative;
          flex: 1 1;
          transition: all 175ms ease-in-out;

          &.expanded {
            flex: 1;
            .header .arrow {
              transform: rotate(90deg);
            }
            .items {
              height: 100%;
            }
          }

          .header {
            font-weight: 700;
            font-size: 16px;
            padding-top: 8px;
            cursor: pointer;
            .arrow {
              display: inline-block;
              margin: 0 2px;
              transition: transform 175ms ease-out;
            }
            .count {
              display: inline-block;
              font-weight: 400;
              font-size: 14px;
              margin-left: 4px;
            }
          }
          .items {
            transition: height 175ms ease-in-out;
            height: 0;
            max-height: 500px;
            position: relative;
            padding-left: 16px;

            overflow: auto;

            .item {
              padding-bottom: 1px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }

  .item.active,
  .expand {
    a {
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .item.inactive {
    a {
      color: inherit;
      opacity: 0.5;
      cursor: default;
    }
  }
}
