/* For smaller overall projects list */
#projectsTable {
  max-width: 1222px;
}

#projectsTable ol, #projectsList>ldp-display {
  display: flex;
  justify-content: space-around;
  border-width: 0px 2px 2px 2px; /* no border-top, except for "ol" */
  border-style: solid;
  border-color: black;
}

#projectsTable ol {
  border-width: 2px;
  background-color: darkgrey;
  margin-bottom: 0 !important;
}

#projectsTable ol li , #projectsList>ldp-display>ldp-display-div {
  display: flex;
  border-right: 2px solid black;
  /* border-left: 1px solid red; */
}

#projectsList .income-div {
    border-right: 2px solid black;
}

#projectsList ldp-display>.income-div>ldp-display-div {
    display: inline-block;
}

/* Acceptable, mais j'aimerais écrire autrement les sélecteurs. écrire en une fois les 2 "projectList..." */
#projectsTable ol li, #projectsList ldp-display>ldp-display-div, #projectsList ldp-display>.income-div {
    padding-left: 0.5vw;
}

#projectsTable #categorieNumber, #projectsTable #categorieNumberAlt, #projectsList .number {
  width: 10%;
}
#projectsTable #categorieTitle, #projectsList .title {
  width: 40%;
}
#projectsTable #categorieAssociate, #projectsList .associate {
  width: 20%;
}
#projectsTable #categorieIncome, #projectsList .income-div {
  width: 15%;
}
#projectsTable #categorieState, #projectsList .state {
  width: 15%;
  border-right: none;
}

/* Interaction et tout */

#projectsList>ldp-display:nth-child(odd) {
  background-color: aliceblue;
}

#projectsList>ldp-display:hover {
  cursor: pointer;
  /* background-color: #0080FF; */
  background-color: #FFF700;
}

#projectsList>ldp-display {
  transition: background-color 0.3s;
}

#projectsTable [id*="Alt"] {
  display: none;
}

@media only screen and (max-width: 767px) {
  #projectsTable #categorieNumber {
    display: none;
  }
  #projectsTable #categorieNumberAlt {
    display: flex;
  }
}