.board {

  .add-button {
    margin: 3px;
  }

  .column-container {
    display: table;
    table-layout: fixed;

    width: 100%;

    .column-cell {
      display: table-cell;
      height: 100%;
      padding: 0 3px;
    }

    .well.no-columns {
      border-color: @medGrey;
      text-align: justify;

      a:hover {
        text-decoration: none;
      }

      i {
        font-size: 24px;
      }
    }
  }
  .column {

    &.single-column {
      padding: 5px;

      .header {
        font-size: 1.5em;
        height: 2em;
      }
    }

    .header {
      cursor: pointer;
      background-color: @medGrey;
      text-align: center;
      line-height: 1.2em;
      height: 3em;
      font-family: @proxima-nova;
      margin-bottom: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      padding: 3px 0 0 0;

      .go-left, .go-right {
        display: inline-block;
        line-height: 36px;
        font-size: 18px;
      }

      .go-left {
        float: left;
        margin-left: 5px;
      }

      .go-right {
        float: right;
        margin-right: 5px;
      }
    }

    .card {
      cursor: pointer;
      background-color: @white;
      padding: 5px 5px 1px 5px;
      margin: 5px 0;
      border-top: 4px solid @grey5;
      border-radius: @border-radius-small;

      &.blocked {
        border-bottom: 4px solid @brick;
      }

      &.ready {
        border-bottom: 4px solid @lime;
      }

      @media (min-width: @screen-sm) {
        border-top-width: 7px;
        border-radius: @border-radius-base;

        &.blocked, &.ready {
          border-bottom-width: 7px;
        }
      }

      .field {
        line-height: 1.5em;
        font-size: 0.9em;
      }
      .formatted-id {
        float: left;
        overflow: hidden;
        font-size: 1em;

        @media (min-width: @screen-sm) {
          font-family: @noto-sans-bold;
        }
      }
      .name, .defects, .tasks, .plan-estimate {
        display: none; // responsive below
      }

      .owner {
        float: right;

        .owner-name {
          display: none;
          padding-right: 4px;
        }

        .profile-image {
          display: none;
          width: 25px;
          height: 25px;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: contain;
          font-size: 1.3em;
        }
      }

      .plan-estimate {
        float: right;
      }

      .clear {
        clear: both;
      }

      .status-value {
        margin-top: 5px;
        margin-right: 5px;
        float: left;
        background-color: @nearerWhite;
        border-radius: @border-radius-base;
        padding: 4px;

        .percentage {
          margin-right: 5px;
        }

        .to-do, .to-do-value {
          display: inline-block;
        }
      }
    }

    &.multi-column {
      @media (min-width: @screen-xs) {
        .card .owner .profile-image {
          display: inline-block;
        }
      }
      @media (min-width: @screen-sm) {
        .card {
          background-image: url(/img/point-swipe-grey.png);
          background-position: right -2px bottom -2px;
          background-repeat: no-repeat;
          background-size: auto;
          
          .owner .owner-name, .plan-estimate, .defects, .tasks {
            display: inline-block;
          }
        }
      }
      @media (min-width: @screen-md) {
        .card .name {
          display: block;
        }
      }
    }

    &.single-column {
      .card {
        background-image: url(/img/point-swipe-grey.png);
        background-position: right -2px bottom -2px;
        background-repeat: no-repeat;
        background-size: auto;
        .name, .plan-estimate, .defects, .tasks {
          display: block;
        }
        .owner {
          .profile-image, .owner-name {
            display: inline-block;
          }
        }
      }
    }
  }

  .stats-banner {
    margin-bottom: 10px;

    .gauge {
      text-align: center;
      background-color: @grey1;
      border: 1px solid @grey3;
      height: 5.3em;
    }

    h4 {
      font-size: 1em;
      height: 2em;
      margin: 5px 0;
    }

    .stat-metric {
      color: @grey7;
    }

    .stat-secondary {
      font-size: 0.8em;
      line-height: 1em;
    }
  }

}