/* Copie du CSS du tableau clients depuis le plugin designers-unit-clients-public.css */
:root {
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 23px;
}
.lay-content .clients p {
  display: none;
}
@media screen and (min-width: 601px) {
  ._S_body {
    font-size: 1.2vw;
    margin: 0;
  }
  .px-md {
    padding-left: 3%;
    padding-right: 3%;
  }
  .table {
    padding: 0;
  }
}
.hidden {
  display: none;
}
.table {
  width: 100%;
  table-layout: fixed;
  padding: var(--space-md) 0;
}
.table p {
  display: none;
}
.thead {
  display: none;
  margin: 0;
}
.thead .th {
  cursor: pointer;
  text-align: left;
  font-weight: initial;
  padding-right: 1em;
}
.thead .th:last-child {
  padding-right: 0;
}
.tr.t-project-row {
  height: auto;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.table .tr {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  box-sizing: border-box;
  border-top: 1px solid black;
}
@media screen and (min-width: 601px) {
  .table .tr {
    flex-direction: row;
    border-top: unset;
  }
  .thead {
    display: block;
  }
  .td-year {
    width: 7% !important;
    flex-basis: 7% !important;
  }
  .td-client {
    width: 30% !important;
    flex-basis: 30% !important;
  }
  .td-projet {
    width: 43% !important;
    flex-basis: 43% !important;
  }
  .td-mission {
    width: 20% !important;
    flex-basis: 20% !important;
  }
}
@media screen and (max-width: 601px) {
  #clients-index {
    padding-top: 0;
  }
  .tbody .tr:first-child {
    border: none;
  }
  .tr.t-project-row {
    padding: 1rem 0;
  }
  .td-year,
  .td-client,
  .td-projet,
  .td-mission {
    width: 100% !important;
  }
}
.tr.has-images .td {
  cursor: s-resize;
}
.tr.is-active {
  color: #808080;
}
.tr.is-active:hover {
  background-color: white;
  color: #808080;
}
.tr p {
  display: none;
}
.td-images {
  display: none;
}
.th,
.td {
  vertical-align: top;
  padding-right: var(--space-md);
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
}
.td-mission {
  padding-right: 0;
}
.th:not(.td-images) {
  display: flex;
  justify-content: space-between;
}
.th:hover {
  color: black;
}
.th:hover svg path {
  fill: black;
}
.th svg {
  height: 10px;
  width: 5px;
}
.td-project,
.td-projet,
.td-client {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}
.inner {
  position: relative;
  overflow: hidden;
}
.tr.is-hover .td-client::before,
.tr.is-hover .td-client::after,
.tr.is-hover .td-projet::before,
.tr.is-hover .td-projet::after {
  content: "";
  width: 2em;
  height: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(
    90deg,
    rgba(245, 245, 245, 1),
    rgba(245, 245, 245, 0)
  );
  z-index: 10;
}
.tr.is-hover .td-client::after,
.tr.is-hover .td-projet::after {
  right: var(--space-md);
  transform: rotate(180deg);
}
.marquee {
  animation: marquee 20s linear;
}
.clients .detail {
  position: relative;
  width: 100%;
  padding: 1rem 0;
}
.clients .detail .images {
  display: flex;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.clients .detail .images::-webkit-scrollbar {
  display: none;
}
.clients .detail .close {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}
.clients .detail img {
  margin-right: 1rem;
  max-height: 300px;
}
.clients .detail img:last-child {
  margin-right: 0;
}
.ico-sort {
  display:none;
}
.hide-scroll-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scroll-bar::-webkit-scrollbar {
  display: none;
}
@keyframes marquee {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}