/*------------------------------*\
    #MESSAGERIE
/*------------------------------*/
/*  zone en-tête  */
.maincontent.maincontent__messagerie .mobile-card-container .profils.selected,
.maincontent.maincontent__messagerie .mobile-card-container .missions.selected {
    margin-bottom: .25rem;
}
@media (max-width: 576px) {*/
    /* fait remonter la selection en haut et au debut */
    .maincontent.maincontent__messagerie .mobile-card-container .profils.selected,
    .maincontent.maincontent__messagerie .mobile-card-container .missions.selected {
        order: 1;
    }
    .maincontent.maincontent__messagerie .mobile-card-container .profils:not(.selected),
    .maincontent.maincontent__messagerie .mobile-card-container .missions:not(.selected) {
        order: 2;
    } 
}

.maincontent__messagerie__header {
    display: flex;
    flex-wrap: wrap;
}

.maincontent__messagerie__header .category {
    flex: 0 0 auto;
    flex-grow: 1;
}

@media (max-width: 991px) {

    .maincontent__messagerie__header .category {
        display: flex;
        width: calc(100% * 1/2);
        flex-grow: initial;
    }
}
@media (max-width: 576px) {

    .maincontent__messagerie__header .category {
        display: flex;
        width: 100%;
        flex-grow: initial;
    }
}


.maincontent__messagerie__header .category .category__link {
    color: var(--main-color_black);
    font-size: calc(var(--basePX) + 5px);
    font-family: 'FF Clan';
    padding: .5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 3px 6px #00000029;
}
.maincontent__messagerie__header .category .category__link:hover {
    text-decoration: none;
}
.maincontent__messagerie__header .category .category__link.border-bottom--profil {
    border-bottom: 3px solid var(--secondary-color_mission);
}
.maincontent__messagerie__header .category .category__link.border-bottom--mission {
    border-bottom: 3px solid var(--main-color_freelance);
}
.maincontent__messagerie__header .category .category__link.border-bottom--freelance {
    border-bottom: 3px solid var(--main-color_freelance);
}
.maincontent__messagerie__header .category .category__link.border-bottom--ao {
    border-bottom: 3px solid var(--main-color_ao);
}
.maincontent__messagerie__header .category .category__link.border-bottom--formation {
    border-bottom: 3px solid var(--main-color_formation);
}
.maincontent__messagerie__header .category .category__link.border-bottom--messagerie-old {
    border-bottom: 3px solid var(--main-color_esn-forfait);
}

.profils,
.missions {
    width: 100%;
}

/* -------
 discussion
 ------- */

.discussion__title,
.discussion__title a {
    padding: .5rem 1rem;
    font-size: calc(var(--basePX) + 6px);
    font-family: Calibri, sans-serif
}

.discussion #discussion {
    scrollbar-color:  #c1c1c1 #f5f5f5;
    scrollbar-width: thin;
    overflow-y: auto;
}

/* reponses aux AO */
.maincontent__card__element.maincontent__card__element--title,
.maincontent__card__element.maincontent__card__element--subtitle {
    font-family: Calibri, sans-serif!important;
    font-weight: bold;
}
.maincontent__card__element.maincontent__card__element--subtitle {
    color: var(--background_menu-gauche)!important;
}

/* pour chrome, safari et edge */
.discussion #discussion::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #c1c1c1;
    height: 8px;

    background-color: #c1c1c1; /* or add it to the track */
}
    
.discussion #discussion::-webkit-scrollbar-thumb {
    background: #aaaaaa;
}

.discussion__interlocuteur {
    display: flex;
    justify-content: flex-end;
    border-top: 2px solid red;
    border-bottom: 2px solid red
}

/**/
.discussion__participant {
    display: flex;
    justify-content: flex-start;
    border-top: 2px solid green;
    border-bottom: 2px solid green
}
/**/
.discussion__informations {
    font-size: var(--basePX);
    color: var(--textarea-color);
    text-align: center;
    padding: .25rem;
}


/*  zone chat  */
#discussion .wrapper {
    width: 75%;
}

.block-textarea textarea {
    padding-right: 10rem;
}

@media (min-width: 1200.01px) {
    #discussion .wrapper {
        /*width: 55%;*/
        min-width: 40%;
        max-width: 55%;
        width: 40%;
    }
}
@media (min-width: 1200.01px) and (max-width:1599.98px) {
    #discussion .wrapper {
        width: 75%!important;
        max-width: 75%!important;
    }

    .maincontent__messagerie__header .category__link {
        padding: .25rem!important
    }
}

#discussion .d-flex.justify-content-end article {
    background: var(--main-color_esn-forfait);
    color: var(--white);
}
#discussion .d-flex.justify-content-end section {
    background: var(--main-color_esn-forfait);
    color: var(--white);
}

#discussion .d-flex.justify-content-start article {
    background: var(--white);
}
#discussion .d-flex.justify-content-start section {
    background: rgba(255,255,255,.7);
}

@media (min-width:992px) {
    .maincontent__messagerie__header .category {
        margin-top: 0;
    }
}

#MessagerieApp .items {
    border: 1px solid var(--main-color_esn-forfait);
    border-radius: 0;
    font-size: calc(var(--basePX) + 3px);
    position: relative;
}

.test-svg svg {
    width: 40px!important;
    height: 44px!important;
}

#MessagerieApp .elem-menu .new-messages {
    position: absolute;
    bottom: -5px;
    right: -5px;
}

.maincontent__messagerie--leftArea .archives .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--main-color_esn-forfait);
    background-color: var(--main-color_esn-forfait);
}

@media (min-width:1200px) and (max-width:1500px) {
    .maincontent__messagerie .maincontent__messagerie--leftArea {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .maincontent__messagerie .maincontent__messagerie--rightArea {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

@media (max-width:576px) {
    .archives {
        display: none!important
    }
}

.messagerie--listing {
    display: grid;
    grid-auto-flow: row;
    gap: 1rem;
    width: calc(100% + 1rem);
    padding: 1rem 1rem 1rem 0;
}

.messagerie--listing {
    max-height: 400px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    align-content: baseline;
}

@media only screen and (min-width:576.01px) and (max-height:850px) {
    .messagerie--listing {
        height: 300px;
    }
}

/* pour firefox */
.messagerie--listing {
    scrollbar-color:  #c1c1c1 #f5f5f5;
    scrollbar-width: thin;
    overflow-y: auto;
}
/* pour chrome, safari et edge */
.messagerie--listing::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #c1c1c1;
    height: 8px;

    background-color: #c1c1c1; /* or add it to the track */
}
    
.messagerie--listing::-webkit-scrollbar-thumb {
    background: #aaaaaa;
}

.maincontent__messagerie .maincontent__messagerie--rightArea .scroll-area,
.maincontent__messagerie .maincontent__messagerie--rightArea--historique .scroll-area {
    height: 500px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    padding-right: 1rem;
}
/* pour firefox */
.maincontent__messagerie .maincontent__messagerie--rightArea .scroll-area,
.maincontent__messagerie .maincontent__messagerie--rightArea--historique .scroll-area {
    scrollbar-color:  #c1c1c1 #f5f5f5;
    scrollbar-width: thin;
    overflow-y: auto;
}
/* pour chrome, safari et edge */
.maincontent__messagerie .maincontent__messagerie--rightArea .scroll-area::-webkit-scrollbar,
.maincontent__messagerie .maincontent__messagerie--rightArea--historique .scroll-area::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #c1c1c1;
    height: 8px;

    background-color: #c1c1c1; /* or add it to the track */
}
    
.maincontent__messagerie .maincontent__messagerie--rightArea .scroll-area::-webkit-scrollbar-thumb,
.maincontent__messagerie .maincontent__messagerie--rightArea--historique .scroll-area::-webkit-scrollbar-thumb {
    background: #aaaaaa;
}

.messagerie--listing .profil,
.messagerie--listing .mission {
    order: 2;
}
.messagerie--listing .profil.selected,
.messagerie--listing .mission.selected {
    order: 1;
}

.messagerie--listing .profil .profil--id {
    color: var(--main-color_paragraphe);
    font-size: calc(var(--basePX) + 2px);
    position: absolute;
    top:.5rem;
    right:.5rem;
}

.messagerie--listing .profil .profil--fullname,
.messagerie--listing .mission .profil--fullname {
    font-family: 'FF Clan', 'Roboto';
    color: var(--main-color_profil);
    font-size: calc(var(--basePX) + 3px);
    text-transform: uppercase;
    text-align: left;
    margin-bottom: .25rem
}
.messagerie--listing .mission .profil--fullname {
    color: var(--main-color_mission);
}

.messagerie--listing .profil .profil--fonction,
.messagerie--listing .mission .profil--fonction {
    color: var(--black);
    font-size: calc(var(--basePX) + 3px);
    margin-bottom: 0;
    text-align: left;
}

.maincontent__messagerie .table-responsive table thead {
    text-transform: uppercase;
    font-family: 'FF Clan', 'Roboto';
    font-size: calc(var(--basePX) + 4px);
}

.maincontent__messagerie .table-responsive table thead {
    position: sticky;
    top:0;
    z-index:1;
}

#MessagerieApp .profil .btn:focus,
#MessagerieApp .mission .btn:focus {
    outline-style: none!important;
    box-shadow: none!important;
    border-color: transparent!important;
    outline: none!important;
}

@media (max-width: 576.01px) {

    .messagerie--listing {
        height: initial;
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
    }

    .messagerie--listing > article {
        display: flex;
        flex: 0 0 83.333333%;
        width: 83.333333%;
        max-width: 83.333333%;
    }
    .messagerie--listing > article > section {
        width: 100%
    }
    #MessagerieApp .items,
    #MessagerieApp .items > * {
        transform: initial;
    }

    .mobile-card-container > .row {
        overflow-x: auto;
    }
}

@media (max-width: 991.98px) {
    .messagerie_breakpoint article .skew-transform--top-to-bottom,
    .messagerie_breakpoint article .skew-transform--top-to-bottom > * {
        transform: initial;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) {
    .messagerie_custom_break {
        flex: 100%;
        max-width: 100%;
        width: 100%;
    }
    /*.messagerie_variant.col-xl-2 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .messagerie_variant.col-xl-7 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .messagerie_variant.col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }*/
}




#MessagerieApp .bg--hitechpro-blue.active.text-white {
     color: var(--white)!important;
}

#MessagerieApp .md-nav-bar {
    margin-bottom: 1rem;
}
#MessagerieApp .maincontent__messagerie--rightArea--historique .md-nav-bar {
    margin-bottom: 0;
    height: auto;
}

#MessagerieApp .profils section a .new-pill {
    bottom: 0;
    right: 0;
    height: 20px;
    width: 20px;
}
#MessagerieApp .profils section:is(.border--hitechpro-blue) a {
    color: var(--main-color_esn-forfait);
}

#MessagerieApp .profils section a:focus,
#MessagerieApp .missions section a:focus {
    outline: 0;
    box-shadow: none;
}

#MsgView .actions .deal,
.actions .deal,
#MsgView .actions .remove {
    background: var(--background_menu-gauche);
    border-radius: 50px;
    padding: 5px 10px;
    color: white;
    font-size: calc(var(--basePX) + 2px);
}

.etats:hover {
    opacity: .5;
    color: var(--white);
} 

@media (max-width: 1199.98px) {
    #MsgView .actions .deal,
    .actions .deal,
    #MsgView .actions .remove
    #MsgView .actions .deal  {
        max-width: 200px;
        margin-bottom: 5px;
        margin: auto;
    }
}

/* **************************** */

#MsgList,
#MsgListFreelance,
#MsgListDF {
    font-size: calc(var(--basePX) + 2px);
}

#MsgList .table thead th,
#MessagerieApp .table thead th,
#MsgListFreelance .table thead th,
#MsgListDF .table thead th {
    border: 0;
    text-align: center;
}
#MsgList .table thead th:not(:first-of-type),
#MessagerieApp .table thead th:not(:first-of-type),
#MsgListFreelance .table thead th:not(:first-of-type),
#MsgListDF .table thead th:not(:first-of-type) {
    border-left: 1px solid var(--white);
}
#MsgList .table thead th:last-of-type,
#MessagerieApp .table thead th:last-of-type,
#MsgListFreelance .table thead th:last-of-type,
#MsgListDF .table thead th:last-of-type {
    border-left: 0;
}
#MsgList .table tbody tr,
#MessagerieApp .table tbody tr,
#MsgListFreelance .table tbody tr,
#MsgListDF .table tbody tr,
#MsgList .table thead {
    /*border: 2px solid var(--white);
    border-left: 4px solid var(--white);
    border-right: 4px solid var(--white);
    background: var(--background-hitechpros);*/
    cursor: pointer;
    border-bottom: 2px solid var(--background-hitechpros);
}
#MsgList .table tbody tr:hover,
#MessagerieApp .table tbody tr:hover,
#MsgListFreelance .table tbody tr:hover,
#MsgListDF .table tbody tr:hover {
    background: var(--background-hitechpros);
}
#MsgList .table tbody tr.new,
#MsgListFreelance .table tbody tr.new,
#MsgListDF .table tbody tr.new {
    background: var(--white);
    font-weight: bold;
}
#MsgList .table tbody td,
#MessagerieApp .table tbody td,
#MsgListFreelance .table tbody td,
#MsgListDF .table tbody td {
    vertical-align: middle;
    border: 0;
}
#MsgList .table tbody td svg,
#MessagerieApp .table tbody td svg,
#MsgListFreelance .table tbody td svg,
#MsgListDF .table tbody td svg {
    width: var(--size, 30px);
    height: var(--size, 30px);
}

#MessagerieApp .table tbody td .unread svg,
#MessagerieApp .table tbody tr td:last-of-type svg,
#MessagerieApp .table tbody tr td:first-of-type svg,
#MessagerieApp .table tbody tr td:nth-of-type(3) svg {
    width: var(--size, 25px);
    height: var(--size, 25px);
}
#MessagerieApp .table tbody td .read svg {
    width: var(--size, 35px);
    height: var(--size, 35px);
}

/* ********** LE CHAT ********** */
 
#MsgView .bulle--infos {
    font-size: var(--basePX);
    color: var(--textarea-color);
}

#MsgView .msg-system {
    font-size: calc(var(--basePX) + 1px);
    border-radius: 20px;
    padding: 5px;
}

#MsgView .actions .remove,
#MsgView .actions .deal {
    font-size: calc(var(--basePX) + 3px);
}

.etats {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: calc(var(--basePX) * 3);
    line-height: 50px;
    text-align: center;
    color: var(--white);
    background: var(--main-color_freelance);
}

#MessagerieApp .md-nav-bar {
    border: none;
}

#MessagerieApp .area--messages {
    overflow-x: hidden;
    min-height: 200px;
}

.area--messages md-nav-bar .md-nav-item > .md-active {
    background-color: var(--main-color_esn-forfait);
    color: white;
    border: 1px solid var(--main-color_esn-forfait);
    padding: .25rem 1rem;
}
.area--messages md-nav-bar .md-nav-item > :not(.md-active) {
    background-color: var(--white);
    color: var(--main-color_esn-forfait);
    border: 1px solid var(--main-color_esn-forfait);
    padding: .25rem 1rem;
}

.area--messages .menu .md-nav-item:first-of-type {
    margin-left: 0;
}

#MessagerieApp .pop-in-contact_tips.fixed-top,
#MessagerieApp .pop-in-contact_tips__AO {
    top: 10%;
}

#MessagerieApp .messagerie_variant .dossier svg {
    width: 30px;
    height: 30px;
}

/*#MessagerieApp .pop-in-contact_tips {
    top: 50%;
    bottom: 25%;
    right: 0;
    position: fixed;
    margin: auto 0;
    min-height: 100px; 
    z-index: 70;
    width: 250px;
    transition: all 300ms;
    margin-right: 1rem;

    display: flex;
    align-items: center;
}*/
/* mediaquerie specifique pour les écrans larges mais pas trop (entre 1200 et 1600px) */
@media (min-width: 1200px) and (max-width: 1500.01px) {

    #MessagerieApp .wrapper_pop-in {
        margin: 30px auto;
    }
    #MessagerieApp .pop-in-contact_tips .text-center.text-xl-left {
        text-align: center!important;
    }
}

.joint svg {
    width: 16px;
    height: 16px;
}

.block-upload {
    border-bottom: 1px solid var(--white);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
    z-index: 1;
    background: var(--white);
    padding: .5rem;
    display: inline-flex;
    align-items: center;

}
.block-upload a {
    color: currentColor
}
.block-upload.upload-profil {
    border-top: 1px solid var(--main-color_profil);
    border-left: 1px solid var(--main-color_profil);
    border-right: 1px solid var(--main-color_profil);
    color: var(--main-color_profil);
}
.block-upload.upload-mission {
    border-top: 1px solid var(--main-color_mission);
    border-left: 1px solid var(--main-color_mission);
    border-right: 1px solid var(--main-color_mission);
    color: var(--main-color_mission);
}

.block-upload + .block-textarea textarea {
    border-top-left-radius: 0!important;
    padding-right:13rem;
}
.block-textarea textarea + .position-absolute {
    bottom: .25rem; 
    right: .5rem;
    background-color: var(--white);
}

@media (max-width:768.01px) {
    .block-textarea textarea {
        padding-right:.75rem;
    }
    .block-textarea textarea + .position-absolute {
        position: initial!important;
        text-align: center;
    }
}
.block-upload + .block-textarea {
    margin-top: -1px;
}

/* scroll pour la liste des profils */
@media (min-width:576px) {

    .archives svg {
        width: var(--size, 40px);
        /*height: var(--size, 25px);*/
    }
}

@media (min-width: 1200px) and (max-width:1600px) {
    .messagerie--listing-contact {
        flex: 0 0 25%;
        max-width: 25%;
    }
}



/* quand il y a aucune donnée dans mission ou profil */

.donnees--vides > div {
    height: 50vh;
    min-height: 50vh;
    border: 1px solid var(--another-gray_2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    color: var(--another-gray)
}


/* test messagerie limitée */
.etat span {
    width: 14px; /* car le span fait 14px de height */
    height: 14px; /* car le span fait 14px de height */
    border-radius: 50%;
    display: flex;
    align-items: center;
}
.etat span.mr-2 {
    margin: initial;
    display: inline-block;
}



/* Nouveau message */
.etat[data-content="nouveau message"] span {
    background: var(--main-color_esn-forfait);
}
/* en attente de réponse ( non lu) */
.etat[data-content="en attente de réponse (non lu)"] span {
    background: var(--another-gray_2);
}
/* en attente de réponse ( lu) */
.etat[data-content="en attente de réponse (lu)"] span {
    background: var(--another-gray_2);
}
/* Réponse à faire */
.etat[data-content="réponse à faire"] span {
    background: var(--color-jaune);
}
/* rejeté */
.etat[data-content="rejeté"] span {
    background: var(--secondary-color_ao);
}
/* Retiré */
.etat[data-content="retiré"] span {
    background: var(--main-color_abonnement);
}
/* AFFAIRE CONCLUE */
.etat[data-content="affaire conclue"] span {
    background: var(--main-color_freelance);
}
/* Clôturé */
.etat[data-content="clôturé"] span {
    background: transparent;
}


/* svg qui bug */
.pk .cls-1 {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
}
.pk .cls-2 {
    fill: currentColor;
}

.pk_partage .cls-1 {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3px;
}

/* switch archive */
.archives_mission .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--main-color_mission);
    background-color: var(--main-color_mission);
}
.archives_exclusive .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--main-color_freelance);
    background-color: var(--main-color_freelance);
}

.nonCommuniquees span + aside {
    display: none;
}
.nonCommuniquees span:hover + aside {
    display: inline-block;
}