.react-trello-board {
  padding: 5px;
}

.height-preserving-container:empty {
  min-height: calc(var(--child-height));
  box-sizing: border-box;
}

.height-preserving-container {
}

.share-to-teams-badge {
  background-color: var(--share-badge-bg);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.react-trello-column-header {
  font-weight: bold;
  cursor: pointer;
  background-color: var(--column-header-bg);
  border-radius: 5px 5px 0 0;
}

.production-alert {
  background: transparent;
  border: none;
}

.react-trello-footer {
  background-color: var(--footer-bg);
  border-radius: 0 0 5px 5px;
}

.grid-item {
  margin: 1px; // TODO: (Note) This is where we set the margin for vertical
}

.lane-title {
  vertical-align: middle;

  .icon {
    margin-right: 8px; /* Adjust the spacing as needed */
  }
}

.header-content-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .body-empty-container {
    position: absolute;
    right: 0;
  }

  .tech-container {
    font-weight: bolder;
    text-align: center;
    flex: 1;

    .branches-outlined {
      color: var(--tech-icon-color);
    }
  }

  .inner-container {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;

    .circle-outline {
      color: var(--tech-icon-color);
      margin-left: 8px;
    }

    .iou-parent {
      margin-left: 8px;
    }
  }
}

.clone.is-dragging .ant-card {
  border: 2px solid var(--clone-border-color) !important;
  border-radius: 12px;
}
