#missions,
#profils,
#ao,
#fcomp,
#formation {
    text-align: center;
    border-collapse:separate; 
    border-spacing: 0 10px;
}

#missions 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';
}
#missions td,
#profils td,
#ao td,
#fcomp td,
#formation td {
    font-size: calc(var(--basePX) + 4px);
    font-family: "Poppins", sans-serif;
}
#missions tr,
#profils tr,
#ao tr,
#fcomp tr,
#formation tr {
    font-weight: 100!important;
    font-family: "Poppins", sans-serif;
}

#missions thead th,
#missions 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 mission a avoir une largeur fixe */
#missions thead th.w450,
#profils thead th.w450,
#ao thead th.w450,
#fcomp thead th.w450,
#MsgList thead th.w450 {
    width: 450px;
    max-width: 450px;
    min-width: 450px;
}
#missions 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,
#MsgListFreelance 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) */
#missions thead .cut,
#profils thead .cut,
#formation thead .cut,
#MsgList thead .cut,
#MessagerieApp thead .cut,
#MsgListFreelance thead .cut,
#ao thead .cut,
#fcomp thead .cut {
    overflow: hidden;
    width: 100px;
    max-width: 100px;
}
#missions thead .cut:after,
#profils thead .cut:after,
#formation thead .cut:after,
#MsgList thead .cut:after,
#MessagerieApp thead .cut:after,
#MsgListFreelance thead .cut:after,
#ao 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;
}
#missions thead .cut:after,
#ao thead .cut:after,
#fcomp thead .cut:after {
    border-width: 0 30px 45px 0;
}
#profils thead .cut:after,
#ao thead .cut:after {
    border-width: 0 30px 45px 0;
}
#MsgList thead .cut:after,
#ao thead .cut:after {
    border-width: 0 30px 45px 0;
}
#formation thead .cut:after {
    border-width: 0 30px 45px 0;
}

#MessagerieApp thead .cut:after,
#ao thead .cut:after {
    border-width: 0 30px 45px 0;
}
@media (max-width: 809.98px) {
    #MessagerieApp thead .cut:after,
    #ao thead .cut:after,
    #missions thead .cut:after,
    #formation thead .cut:after,
    #profils thead .cut:after,
    #MsgList thead .cut:after,
    #MessagerieApp thead .cut:after,
    #MsgListFreelance thead .cut:after,
    #ao thead .cut:after,
    #fcomp thead .cut:after {
        border-color: currentColor;
        border-width: initial;
        border-style: initial;
    }
}

#missions tbody,
#profils tbody,
#fcomp tbody {
    background: var(--white);
}

#missions tbody tr,
#profils tbody tr,
#ao tbody tr,
#fcomp tbody tr,
#formation tbody tr {
    background-color: var(--background-hitechpros);
}

#missions .infos_mission,
#profils .infos_profil,
#ao .infos_ao,
#fcomp .infos_mission {
    text-align: left;
    min-width: 400px;
    hyphens: auto;
    word-break: break-word;
}
#missions tbody td.w100,
#fcomp tbody td.w100 {
    width: 100px!important;
    max-width: 100px!important;
}
#missions .infos_mission .color--mission highlight,
#profils .infos_profil .color--profil highlight,
#ao .infos_ao .color--AO highlight {
    font-size: calc(var(--basePX) + 4px);
}


/* style pagination */
.for-mission.table-responsive + .m-auto article div.active a,
.for-mission.table-responsive + .m-auto article div.active a:hover,
.for-formation.table-responsive + .m-auto article div.active a,
.for-formation.table-responsive + .m-auto article div.active a:hover {
  color: #fff;
  padding: 5px 10px;
  background-color: var(--main-color_mission);
  border: var(--main-color_mission) 1px solid;
  margin: 0 2px;
  text-decoration: none;
}

.for-mission.table-responsive + .m-auto article div:not(.active) a,
.for-mission.table-responsive + .m-auto article div:not(.active) a:hover,
.for-formation.table-responsive + .m-auto article div:not(.active) a,
.for-formation.table-responsive + .m-auto article div:not(.active) a:hover {
  color: var(--main-color_mission);
  padding: 5px 10px;
  background-color: transparent;
  border: var(--main-color_mission) 1px solid;
  margin: 0 2px;
  text-decoration: none;
}

.for-formation.table-responsive + .m-auto article div.active a,
.for-formation.table-responsive + .m-auto article div.active a:hover {
    color: #fff;
    padding: 5px 10px;
    background-color: var(--main-color_formation);
    border: var(--main-color_formation) 1px solid;
}

.for-formation.table-responsive + .m-auto article div:not(.active) a,
.for-formation.table-responsive + .m-auto article div:not(.active) a:hover {
    color: var(--main-color_formation);
    border: var(--main-color_formation) 1px solid;
}

.for-profil.table-responsive + .m-auto article div.active a,
.for-profil.table-responsive + .m-auto article div.active a:hover {
  color: #fff;
  padding: 5px 10px;
  background-color: var(--main-color_profil);
  border: var(--main-color_profil) 1px solid;
  margin: 0 2px;
  text-decoration: none;
}
.for-profil.table-responsive + .m-auto article div:not(.active) a,
.for-profil.table-responsive + .m-auto article div:not(.active) a:hover {
  color: var(--main-color_profil);
  padding: 5px 10px;
  background-color: transparent;
  border: var(--main-color_profil) 1px solid;
  margin: 0 2px;
  text-decoration: none;
}

#profils thead svg,
#missions thead svg,
#profils tbody svg,
#missions tbody svg {
    width: 20px!important;
    max-width: 20px!important;
}