/** NOTE: these values must be kept in sync with corresponding variables in KanbanBoard.tsx */
.board-wrapper {
  min-width: 0; }
  .board-wrapper .kanban-board {
    background-color: rgba( 255, 255, 255 ,  1 );
    background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 ); }
    .board-wrapper .kanban-board .main-column-container {
      flex-basis: 354px;
      min-width: 224px; }
      .board-wrapper .kanban-board .main-column-container.collapsed {
        flex-basis: 0;
        min-width: auto; }
    .board-wrapper .kanban-board .kanban-board-column-header,
    .board-wrapper .kanban-board .kanban-board-column {
      max-width: 350px;
      min-width: 220px;
      margin-right: 4px; }
      .board-wrapper .kanban-board .kanban-board-column-header.collapsed,
      .board-wrapper .kanban-board .kanban-board-column.collapsed {
        max-width: 40px;
        min-width: 40px; }
    .board-wrapper .kanban-board .kanban-board-column {
      background-color: rgba( 244, 244, 244 ,  1 );
      background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
      border-top:  2px solid;
      border-top-color: rgba( 218, 218, 218 ,  1 );
      border-top-color: rgba( var(--palette-neutral-10,218, 218, 218) ,  1 );
      flex-basis: 0; }
      .board-wrapper .kanban-board .kanban-board-column.highlighted {
        background-color: rgba( 234, 234, 234 ,  1 );
        background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ); }
      .board-wrapper .kanban-board .kanban-board-column.split-left {
        margin-right: 0;
        padding-right: 2px;
        border-right:  1px dotted;
        border-right-color: rgba( 0, 0, 0 ,  1 );
        border-right-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ); }
      .board-wrapper .kanban-board .kanban-board-column.split-right {
        padding-left: 2px; }
      .board-wrapper .kanban-board .kanban-board-column.split-left, .board-wrapper .kanban-board .kanban-board-column.split-right {
        /** padding is included in width, margin is not. So bump max width by the padding amount to get consistent column widths */
        max-width: 352px; }
      .board-wrapper .kanban-board .kanban-board-column .collapsed-column-header {
        transform: rotate(90deg) translateX(32px);
        white-space: nowrap; }
      .board-wrapper .kanban-board .kanban-board-column .board-column-button {
        padding: 4px; }
      .board-wrapper .kanban-board .kanban-board-column .board-column-button-with-text {
        padding: 2px 4px; }
      .board-wrapper .kanban-board .kanban-board-column .board-column-search-text-field-container {
        min-width: 0; }
        .board-wrapper .kanban-board .kanban-board-column .board-column-search-text-field-container .bolt-textfield .suffix {
          margin-right: 0; }
      .board-wrapper .kanban-board .kanban-board-column .board-column-search-text-field {
        padding: 2px 4px;
        min-width: 0; }
    .board-wrapper .kanban-board .kanban-board-column-header {
      padding: 16px 16px 4px;
      word-wrap: break-word; }
      .board-wrapper .kanban-board .kanban-board-column-header.collapsible {
        cursor: pointer; }
      .board-wrapper .kanban-board .kanban-board-column-header.split-column-header {
        max-width: 704px;
        min-width: 444px; }
      .board-wrapper .kanban-board .kanban-board-column-header .board-column-item-count {
        color: rgba(16, 124, 16, 1);
        color: var(--status-success-foreground,rgba(16, 124, 16, 1)); }
        .board-wrapper .kanban-board .kanban-board-column-header .board-column-item-count.over-limit {
          color: rgba(218, 10, 0, 1);
          color: var(--status-error-text,rgba(218, 10, 0, 1)); }
    .board-wrapper .kanban-board .kanban-board-column-header-container {
      background-color: rgba( 255, 255, 255 ,  1 );
      background-color: rgba( var(--palette-neutral-0,255, 255, 255) ,  1 );
      position: sticky;
      top: 0;
      z-index: 2; }
    .board-wrapper .kanban-board .kanban-board-row-container .kanban-board-row.highlighted .kanban-board-row-header {
      background-color: rgba( 234, 234, 234 ,  1 );
      background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ); }
    .board-wrapper .kanban-board .kanban-board-row-container .kanban-board-row .kanban-board-column-container {
      min-height: 150px; }
      .board-wrapper .kanban-board .kanban-board-row-container .kanban-board-row .kanban-board-column-container.board-row-collapsed {
        min-height: 0;
        height: 0;
        visibility: hidden; }
    .board-wrapper .kanban-board .kanban-board-row-container .kanban-board-row .kanban-board-row-header {
      background-color: rgba( 222, 236, 249 ,  1 );
      background-color: rgba( var(--palette-primary-tint-30,222, 236, 249) ,  1 );
      cursor: pointer; }
      .board-wrapper .kanban-board .kanban-board-row-container .kanban-board-row .kanban-board-row-header.default-row {
        background-color: rgba( 234, 234, 234 ,  1 );
        background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 ); }
      .board-wrapper .kanban-board .kanban-board-row-container .kanban-board-row .kanban-board-row-header.dark {
        color: white; }
      .board-wrapper .kanban-board .kanban-board-row-container .kanban-board-row .kanban-board-row-header.light {
        color: black; }
      .board-wrapper .kanban-board .kanban-board-row-container .kanban-board-row .kanban-board-row-header .board-row-name {
        max-width: 250px; }
    .board-wrapper .kanban-board .focusable-board-item {
      outline: none; }
      .bolt-focus-visible .board-wrapper .kanban-board .focusable-board-item:focus {
        border-color: rgba(0, 120, 212, 1);
        border-color: var(--communication-background,rgba(0, 120, 212, 1));
        animation: ms-focus-shadow-with-border-pulse 4s ease-in-out infinite;
        box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.23), 0 0 0 1px rgba(0, 120, 212, 1);
        box-shadow: 0 0 0 3px var(--focus-pulse-max-color,rgba(0, 120, 212, 0.23)), 0 0 0 1px var(--focus-border-color,rgba(0, 120, 212, 1)); }
        @media (forced-colors: active) {
          .bolt-focus-visible .board-wrapper .kanban-board .focusable-board-item:focus {
            animation: none; } }
        @media screen and (-ms-high-contrast: active) {
          .bolt-focus-visible .board-wrapper .kanban-board .focusable-board-item:focus {
            border-color: highlight;
            box-shadow: none; } }