#disponible,
#besoin,
#df,
#nego,
#ao,
#fcomp,
#formation,
#annu {
    text-align: center;
    border-collapse:separate; 
    border-spacing: 0 10px;
}

#cessions th,
#profils th,
#ao th,
#fcomp th,
#formation th {
    font-size: calc(var(--basePX) + 4px);
    border-bottom: 0;
    border-top: 0;
    font-weight: 100!important;
    font-family: "Poppins", sans-serif;
    cursor: pointer;
}
#fcomp th {
    cursor: initial;
}
.st-sort-ascent:before {
    content: '\25B2';
}
.st-sort-descent:before {
    content: '\25BC';
}
#cessions td,
#profils td,
#ao td,
#fcomp td,
#formation td {
    font-size: calc(var(--basePX) + 4px);
    font-family: "Poppins", sans-serif;
}

#cessions tr,
#profils tr,
#ao tr,
#fcomp tr,
#formation tr {
    font-weight: 100!important;
    font-family: "Poppins", sans-serif;
}

#cessions thead th,
#cessions tbody td,
#profils thead th,
#profils tbody td,
#formation tbody td,
#ao tbody td,
#fcomp tbody td {
    border: 0;
    padding: 8;
    vertical-align: middle;
}

/* force la colonne avec le titre de la cession a avoir une largeur fixe */
#cessions thead th.w450,
#fcomp thead th.w450,
#MsgList thead th.w450 {
    width: 450px;
    max-width: 450px;
    min-width: 450px;
}
#cessions thead th.w100,
#fcomp thead th.w100 {
    width: 100px;
    max-width: 100px;
}

#MsgList thead th.w100 {
    width: 100px;
    max-width: 100px;
}
#MsgList thead th.w200 {
    width: 200px;
    max-width: 200px;
}
#MsgList thead th.w250 {
    width: 250px;
    max-width: 250px;
}
#MsgList table {
    border-collapse:separate; 
    border-spacing: 0 .5em;
}
#MsgList table tbody tr,
#MsgListDF table tbody tr {
    box-shadow: 0px 3px 6px #00000029;
}

/* pour l'effet de biais dans la dernière colonne du tableau (pas responsive btw) */
#cessions thead .cut,
#MsgList thead .cut,
#MessagerieApp thead .cut,
#fcomp thead .cut {
    overflow: hidden;
    width: 100px;
    max-width: 100px;
}
#cessions thead .cut:after,
#MsgList thead .cut:after,
#MessagerieApp thead .cut:after,
#fcomp thead .cut:after {
    position:absolute;
    content: "";
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent;
}
#MsgList thead .cut:after {
    border-color: transparent transparent transparent;
}
#cessions thead .cut:after,
#fcomp thead .cut:after {
    border-width: 0 30px 45px 0;
}
#profils thead .cut:after {
    border-width: 0 30px 45px 0;
}
#MsgList thead .cut:after {
    border-width: 0 30px 45px 0;
}

#MessagerieApp thead .cut:after {
    border-width: 0 30px 45px 0;
}
@media (max-width: 809.98px) {
    #MessagerieApp thead .cut:after,
    #cessions thead .cut:after,
    #MsgList thead .cut:after,
    #MessagerieApp thead .cut:after,
    #fcomp thead .cut:after {
        border-color: currentColor;
        border-width: initial;
        border-style: initial;
    }
}

#cessions tbody,
#fcomp tbody {
    background: var(--white);
}

#cession tbody tr,
#df tbody tr,
#fcomp tbody tr {
    background-color: var(--row-bg-color);
}

#cession tbody tr td,
#df tbody tr td {
    border-top: none;
}

#cessions .infos_cession,
#fcomp .infos_cession {
    text-align: left;
    min-width: 400px;
    hyphens: auto;
    word-break: break-word;
}
#cessions tbody td.w100,
#fcomp tbody td.w100 {
    width: 100px!important;
    max-width: 100px!important;
}
#cessions .infos_cession .color--cession highlight {
    font-size: calc(var(--basePX) + 4px);
}

/* style pagination general */
/* .table__pagination--on + #pagerId article div a {
    color: var(--white);
    padding: 5px 10px;
    margin: 0 2px;
    text-decoration: none;
    background-color: transparent;
} */

.table__nego table,
.table__annu table,
.table__disponible table,
.table__besoin table,
.table__df table {
    font-size: 12px;
}

.table__nego thead th {
    background-color: var(--main-color_negociee);
    border-top: 0;
}

.table__annu thead th {
    background-color: var( --main-color_annuaire);
    border-top: 0;
}

.table__df thead th {
    background-color: var(--main-color_demande);
    border-top: 0;
}
.table__disponible thead th {
    background-color: var(--main-color_disponible);
    border-top: 0;
}

.table__besoin thead th {
    background-color: var(--main-color_besoin);
    border-top: 0;
}

.table__disponible tr a /* ,
.table__disponible tr a highlight  */ {
    color: var(--main-color_disponible);
    font-family: ClanOT;
    font-size: 13px;
}

.table__nego tr a /* ,
.table__nego tr a highlight  */ {
    color: var(--main-color_negociee);
    font-family: ClanOT;
    font-size: 13px;
}

.table__annu tr a /* ,
.table__annu tr a highlight  */ {
    color: var( --main-color_annuaire);
    font-family: ClanOT;
    font-size: 13px;
}

.table__df tr a /* ,
.table__df tr a highlight  */ {
    color: var(--main-color_demande);
    font-family: ClanOT;
    font-size: 13px;
}

.table__besoin tr a /* ,
.table__besoin tr a highlight  */ {
    color: var(--main-color_besoin);
    font-family: ClanOT;
    font-size: 13px;
}


/* style pagination variant cession */
.table__cession.table__pagination--on + #pagerId article div.active a,
.table__cession.table__pagination--on + #pagerId article div.active a:hover {
    background-color: var(--main-color_demande);
    border: var(--main-color_demande) 1px solid;
}

.table__cession.table-responsive + #pagerId article div:not(.active) a,
.table__cession.table-responsive + #pagerId article div:not(.active) a:hover {
    color: var(--main-color_demande);
    border: var(--main-color_demande) 1px solid;
}

#cessions thead svg,
#cessions tbody svg {
    width: 20px!important;
    max-width: 20px!important;
}

.table-ventilation th[scope=col],
.table-ventilation td[scope=row] {
    color: var(--medium_gray);
}

/* style pagination general */
/* .table__pagination--on + #pagerId article div a {
    color: var(--white);
    padding: 5px 10px;
    margin: 0 2px;
    text-decoration: none;
    background-color: transparent;
  } */
  
/* style pagination variant df */
/* .table__df.table__pagination--on + #pagerId article div.active a,
.table__df.table__pagination--on + #pagerId article div.active a:hover {
background-color: var(--main-color_demande);
border: var(--main-color_demande) 1px solid;
} */

.table__df.table-responsive + #pagerId article div:not(.active) a,
.table__df.table-responsive + #pagerId article div:not(.active) a:hover {
    color: var(--main-color_demande);
    background-color: transparent;
    border: var(--main-color_demande) 1px solid;
}

/* style pagination variant df */
/* .table__nego.table__pagination--on + #pagerId article div.active a,
.table__nego.table__pagination--on + #pagerId article div.active a:hover {
background-color: var(--main-color_demande);
border: var(--main-color_demande) 1px solid;
} */

.table__nego.table-responsive + #pagerId article div:not(.active) a,
.table__nego.table-responsive + #pagerId article div:not(.active) a:hover {
    color: var(--main-color_negociee);
    background-color: transparent;
    border: var(--main-color_negociee) 1px solid;
}

/* Annuaire de formation */
.table__annu.table__pagination--on + #pagerId article div.active a,
.table__annu.table__pagination--on + #pagerId article div.active a:hover {
background-color: var( --main-color_annuaire);
border: var( --main-color_annuaire) 1px solid;
}

.table__annu.table-responsive + #pagerId article div:not(.active) a,
.table__annu.table-responsive + #pagerId article div:not(.active) a:hover {
    color: var( --main-color_annuaire);
    background-color: transparent;
    border: var( --main-color_annuaire) 1px solid;
}

/* Formateurs disponibles */
.table__disponible.table__pagination--on + #pagerId article div.active a,
.table__disponible.table__pagination--on + #pagerId article div.active a:hover {
background-color: var(--main-color_disponible);
border: var(--main-color_disponible) 1px solid;
}

.table__disponible.table-responsive + #pagerId article div:not(.active) a,
.table__disponible.table-responsive + #pagerId article div:not(.active) a:hover {
    color: var(--main-color_disponible);
    background-color: transparent;
    border: var(--main-color_disponible) 1px solid;
}

/* besoins Formateurs  */
.table__besoin.table__pagination--on + #pagerId article div.active a,
.table__besoin.table__pagination--on + #pagerId article div.active a:hover {
background-color: var(--main-color_besoin);
border: var(--main-color_besoin) 1px solid;
}

.table__besoin.table-responsive + #pagerId article div:not(.active) a,
.table__besoin.table-responsive + #pagerId article div:not(.active) a:hover {
    color: var(--main-color_besoin);
    background-color: transparent;
    border: var(--main-color_besoin) 1px solid;
}

td.title__annonce {
    display: block;
    text-transform: lowercase;
}

td.title__annonce:first-letter {
    text-transform: uppercase;
}