/*Elements used exclusively on the board listing*/
.form-container {
  display: flex;
  align-items: center;
  gap: 1em;
}
.sortWrapper {
  display: flex;
}
.sortWrapper > * {
  margin-left: auto;
  margin-right: auto;
}

#boardsWrapper {
  width: 50%;
  margin: 1em auto;
  text-align: center;
}

#boardsWrapper #divBoards {
  margin: 2em 0em 1em 0em;
}
#labelName {
  text-align: left;
}
#divBoards {
  display: table;
  width: 100%;
  border: 1px solid #1e1e20;
  box-sizing: border-box;
}

.boardsCell span {
  text-overflow: ellipsis;
}

.search {
  margin: 1em 0 1em 0;
}

.search form {
  display: inline-block;
}

#boardsSort, #searchButton {
  margin-top: 1em;
}

#divBoardsLegend {
  background: #171718;
  display: table-row;
}
#divBoards .boardsCell:nth-child(2n) {
  background-color: #1e1e1e;
}


#divBoardsLegend span {
  padding: 3px 0px 3px 5px;
}

.boardsCell {
  display: table-row;
}

.boardsCell hr {
  display: none;
}
#legend {
  display: contents;
}

#legend > *:last-child {
  padding-right: 1em;
}


.boardsCellHeader {
  display: table-cell;
  text-align: left;
  padding: 5px 5px 0px 5px;
}

.boardsCellStats {
  text-align: center;
  display: contents;
}

.boardsCellTags, .divDescription {
  display: block;
}

.cellComponent {
  display: table-cell;
  width: 10%;
  vertical-align: middle;
}
#labelBoardTitle,
.boardsCellHeader{
    width: 80%;
}

@media only screen and (max-width: 812px) {
  .boardsCellHeader {
    width: 100%;
    display: inline-table;
    text-align: center;
  }
  .boardsCellStats, #divBoardsLegend, .labelTags {
    display: none;
  }
  #boardsWrapper {
    width: 100%;
  }
}