:root {
    --color-primary: #f0f0f0;
    --shadow-primary: rgba(2, 5, 103, 0.5);
    --color-secondary: var(--default-bg-color);
    --color-light: #f4f4f4;
    --color-dark: #000B1D;
    --color-light-grey: #c4c4c4;
    --color-status-online: #44a675;
    --color-status-offline: #65757d;
    --color-status-busy: #ff337c;
    --border-dark: #343a40;
    --width-avatar: 3rem;
    --width-avatar-lg: 6rem;
    --height-chat-footer: 4.5rem;
    --height-header-and-fil-ariane-and-margin-top: 148px;
    --height-header-chat-list: 74px;
    --height-toggle-networking-inbox: 36px;
    --size-picto-xl: 2rem;
}

#zone-contenu {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--height-header-and-fil-ariane-and-margin-top));
}

.sideBarPanel, #left-panel-float {
    left: 0;
}

#chats-container * {
    box-sizing: border-box;
}

#chats-container {
    position: relative;
    flex: 1;
    height: inherit;
    width: 100%;
    background: var(--color-secondary);
    border-radius: 15px;
}

body.mobileapp-body #chats-container,
#chats-container.is-embed {
    height: 100vh !important;
}

#chats-container.is-embed ~ .modal .modal-dialog {
    max-width: 92vw !important;
}


/****** Chats List ******/
.chats-list-container {
    height: inherit;
    position: relative;
    border-radius : 15px;
    border: 1px solid var(--color-light-grey);
    padding: 0;
    display: flex;
    flex-direction: column;
}

.chats-list-container .chats-list-header {
    padding: .5rem;
    height: var(--height-header-chat-list);
}

.chats-list-header a.js-start-conversation {
    text-decoration: none;
    gap: 10px;
    padding: 2px;
    color: var(--color-primary);
}

.search-user-container .form-group i {
    color: #777;
    font-size: 16px;
}

.search-icon{
    right: 20px;
    top: 50%;
    margin-right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #888;
}

.no-border {
    border: none !important;
}


.modal-bordered{
    border-radius: 15px;
}

.avatar .img, .avatar img {
    width: var(--width-avatar);
    height: var(--width-avatar);
    border-radius: 50%;
}

.chats-list-header a.js-start-conversation i {
    font-size: var(--font-size--mini);
    color: var(--color-dark) !important;
}

.text-primary i{
    color: var(--color-dark) !important;
}

.img-user-initial {
    display: inline-flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    background: #ddd;
    border-radius: 50%;
    font-weight: bold;
}

.chats-list-container .search-user-container {
    border-left: none;
    border-right: none;
}

.chats-list-container ul.chats-list-group {
    flex: 1;
    background: rgba(234,242,247,.3);
    padding: .5rem .5rem 1rem .5rem;
    margin: 0;
    overflow: auto;
    overflow-x: hidden;
}

ul.chats-list-group > li.chats-list-item {
    padding: .375rem .5rem;
    border-bottom: 1px solid var(--color-light-grey);
}

.icon-circle-plus {
    width: 25px;
    height: 25px;
    background: var(--color-button-plus);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


li.chats-list-item.active {
    background: #f0f0f0;
}


li.chats-list-item.active .text-muted {
    color: #6c757d !important;
}

li.chats-list-item.active span.badge {
    display: none;
}

li.chats-list-item .chats-list-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: currentColor;
}

li.chats-list-item .chats-list-link:hover,
li.chats-list-item .chats-list-link:focus {
    text-decoration: none;
    color: currentColor;
}

.chats-list-link .chats-list-content {
    width: calc(100% - var(--width-avatar) - 8px);
}

.chats-list-content .chats-list-texts{
    position: relative;
}

.chats-list-texts p{
    margin-right: 2.6rem;
}

.chats-list-texts div {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    height: 1.2rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chats-list-time .text-unread {
    color: #41d2c0 !important;
    font-weight: bold;
}

.chats-list-texts span.badge,
.chats-list-texts span.is-blocked {
    width: 1.2rem;
    height: 1.2rem;
}

.chats-list-texts span.badge {
    font-size: .6rem;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    background: #00c8af;
}


/****** Chats Content ******/
.chats-content-container {
    height: inherit;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.chats-content-container button.js-start-conversation {
    border-radius: .25rem;
}

.chats-content-header {
    background: var(--color-secondary);
    border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    height: var(--height-header-chat-list);
}

.chats-content-container .js-back-to-chats-list {
    display: none;
}

/*************** Search Message Modal style *******************/
#searchMessageModal .modal-dialog {
    max-width: 700px;
    margin: 1.75rem auto;
}

#searchMessageModal .search-message-container {
    animation-name: fadeInMessenger;
    animation-duration: 1000ms;
    animation-timing-function: ease-in;
    position: relative;
    padding: 0 0.2rem;
    border-bottom: 1px solid rgba(0,0,0,.3);
}

#searchMessageModal button.js-close-search-message-modal {
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    font-weight: 600;
    color: #000;
    opacity: .7;
}

#searchMessageModal .form-group {
    position: relative;
}

#searchMessageModal input {
    font-size: 1.2rem;
    padding: 0 1rem 0 2.5rem;
}

#searchMessageModal .picto-search-message {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 1.2rem;
}

@keyframes fadeInMessenger {
    0% { opacity: .3; }
    100% { opacity: 1; }
}

#searchMessageModal .search-result-list {
    border-radius: .7rem;
    max-height: 320px;
    overflow-y: auto;
    list-style: none;
    padding: 0 0.5rem;
}

#searchMessageModal .search-result-list > li {
    padding: .3rem .5rem;
    border-bottom: 1px solid #c4c4c4;
}

#searchMessageModal .search-result-list > li.search-result-item:last-of-type {
    border: none;
}

#searchMessageModal li.search-result-item .nav-link {
    color: currentColor;
}

#searchMessageModal li.search-result-item .author {
    font-weight: bold;
}


/*************** Block chat opened style *******************/
#blockChatOpened {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-light-grey);
    border-radius: 15px;
    margin-left:1rem !important;
}

.chats-content-body {
    position: sticky;
    background: var(--color-secondary);
    border: none;
    flex: 1;
    border-bottom: none;
    display: flex;
    flex-direction: column-reverse;
    overflow: auto;
    overflow-x: hidden;
    scroll-behavior: auto;
}

.chats-content-body.overflow-hidden {
    overflow: hidden;
}

.chats-content-footer {
    margin-left : 2rem;
    margin-right: 2rem;
    margin-bottom: 1rem;
    position: relative;
    border-radius: 15px;
    height: var(--height-chat-footer);
}

.chats-content-footer .emojionearea {
    border: 0;
    outline: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: calc(var(--height-chat-footer));
    position: relative;

}

.emojionearea .emojionearea-editor {
    min-height: initial;
    max-height: initial;
    position: absolute;
    top: .75rem;
    left: 0;
    right: 5rem;
    bottom: .75rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.emojionearea-editor[contenteditable=false] {
    font-size: .8rem;
    font-style: italic;
    line-height: 1.4;
    top: 50%;
    right: 0;
    height: 2rem;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    color: grey;
    overflow: auto;
    margin: 0;
    padding: 0 .5rem;
    transform: translateY(-50%);
    z-index: 5;
}

.emojionearea-editor[contenteditable=false] + .emojionearea-button{
    display: none;
}

.emojionearea .emojionearea-button {
    position: absolute;
    top: 37%;
    right: 3.75rem;
    transform: translateY(-50%);
    cursor: pointer;
    margin-right: 5px !important;
    width: 1.7rem !important;
    height: 1.7rem !important;
}

#chats-container.is-embed .emojionearea .emojionearea-button {
    right: 3.75rem;
}
.chats-content-header-infos {
    gap: 5px;
}

.chats-content-footer button.js-messenger-send-message {
    position: absolute;
    top: 50%;
    right: .5rem;
    width: 2.325rem;
    height: 2.325rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transform: translateY(-50%);
}

/****** Avatar CSS ******/
.avatar {
    position: relative;
    width: auto;
}

.js-view-profile {
    cursor: pointer;
}

.avatar .avatar-lg-xl img,
.avatar .img{
    width: var(--width-avatar);
    height: var(--width-avatar);
    border-radius: 50%;
}

.avatar .img,
.img-lg {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--width-avatar) - 1.7rem);
    font-weight: 600;
    border: 1px solid var(--color-dark);
    color: var(--color-dark);
}

.avatar-lg img{
    width: var(--width-avatar);
    height: var(--width-avatar);
    border-radius: 50%;
}

.img-lg {
    font-size: calc(var(--width-avatar-lg) - 3rem);
}


/****** Message CSS ******/
.message-container {
    background: transparent;
    border: none;
    margin: 0;
    margin-bottom: 1rem;
    padding: 0 1rem;
    display: flex;
}

.message-sent {
    justify-content: flex-end;
}

.message-received {
    justify-content: flex-start;
}

.message-wrapper {
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    width: auto;
    max-width: 80%;
    position: relative;
}

.custom-textarea-form{
    background: transparent !important;
    border-radius: 15px !important;
    border: 1px solid var(--color-light-grey) !important;
}

.message-sent .message-wrapper {
    background: var(--default-button-bg-color);
    color: var(--default-button-text-color);
}

.message-received .message-wrapper{
    background: #f0f0f0;
    color: var(--color-dark);
}

.message-content {
    line-height: 1.3;
    font-size: .875rem;
}

.date-message {
    color: #adb5bd;
}

.message-received .date-message {
    color: var(--color-dark);
}

.message-from {
    position: absolute;
    top: .8rem;
    height: 0;
    width: 0;
    border: none;
    border-bottom: .8rem solid transparent;
    z-index: 2;
    padding: 0;
    transform: rotateZ(0deg);
}

.message-sent .message-from {
    right: -.65rem;
    border-left: .9rem solid var(--default-button-bg-color);
}

.message-received .message-from{
    left: -0.65rem;
    border-right: .9rem solid var(--color-light-grey);
}

.border-dark {
    border: 1px solid var(--color-dark);
}


/****** Modal Start Conversation CSS ******/
#startConversationModal.modal {
    top: var(--height-header-chat-list);
    height: 528px;
    overflow: hidden;
}

#startConversationModal .modal-dialog {
    height: inherit;
}

#chats-container.is-embed ~ #startConversationModal .modal-dialog {
    max-width: 100vw !important;
    margin: 0;
}

#startConversationModal .modal-content {
    height: 496px;
    overflow: hidden;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 15px;
}


#startConversationModal .avatar .img,
#startConversationModal .img-lg {
    border-color: var(--color-dark);
}

#userListForNewChat {
    max-height: calc(496px - 117px);
    overflow: auto;
    overflow-x: hidden;
}

#startConversationModal .modal-body::-webkit-scrollbar {
    display: none;
}

#userListForNewChat > li {
    margin-bottom: .5rem;
    padding: .375rem .5rem;
}

#userListForNewChat > li:nth-child(1) {
    margin-top: .5rem;
}

#userListForNewChat > li:hover,
#userListForNewChat > li:focus {
    border-color: var(--color-primary);
}

li.user-list-item .user-list-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: currentColor;
}

li.user-list-item .user-list-link:hover,
li.user-list-item .user-list-link:focus {
    text-decoration: none;
    color: currentColor;
}

.user-list-link .user-list-content {
    width: calc(100% - var(--width-avatar) - 8px);
}


/****** Mobile chat container position ******/
#mobile-chat-container {
    display: none !important;
}


/****** General class ******/
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-primary {
    background: var(--color-primary) !important;
}

.btn-primary, .btn-primary:hover, .btn-primary:focus {
    background: var(--default-button-bg-color);
    border-color: var(--default-button-bg-color);
    color: var(--default-button-text-color);
}

.bg-secondary {
    background: var(--color-secondary) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.border-primary {
    border-color: var(--color-primary);
}

.border-secondary {
    border-color: var(--color-secondary);
}


#blockNewChat {
    border: 1px solid var(--color-light-grey);
    border-radius: 15px;
    margin-left: 1rem;
}
/*
.btn-outline-primary {
    color: var(--color-light);
    border-color: var(--color-primary);
    border-radius: 20px !important;
    background: var(--color-primary);
}

.btn-outline-primary {
    border-radius: 20px !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-secondary) !important;
    box-shadow: none !important;
}

.btn-outline-primary:active,
.btn-outline-primary:active:focus,
.btn-primary:active,
.btn-primary:active:focus {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-secondary) !important;
    box-shadow: 0 0 0 0.2rem var(--shadow-primary) !important;
}
*/
.reset-btn-bootstrap-default-behavior {
    outline: none;
}

.reset-btn-bootstrap-default-behavior:hover,
.reset-btn-bootstrap-default-behavior:focus,
.reset-btn-bootstrap-default-behavior:active,
.reset-btn-bootstrap-default-behavior:active:focus {
    outline: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none;
}

.text-align-right {
    text-align: right;
}

.error-highlighted {
    border: 2px solid red !important;
}

.text-highlighted {
    background: #ffc107 !important;
    color: #ffffff;
}

.picto-xl {
    font-size: var(--size-picto-xl);
}

.tx-left-1rem { /* translateX(toLeft) */
    transform: translateX(-1.1rem);
}

.tx-left-2rem { /* translateX(toLeft) */
    transform: translateX(-2.2rem);
}

.tx-left-3rem { /* translateX(toLeft) */
    transform: translateX(-3rem);
}


/****** Mobile app style ******/
body.mobileapp-body #chats-container {
    margin: 0 auto;
    height: calc(100vh - var(--height-toggle-networking-inbox)) !important;
}

body.mobileapp-body .chats-list-container {
    box-shadow: 0 0 0 transparent;
}

body.mobileapp-body .chats-content-container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    visibility: hidden;
}

body.mobileapp-body #startConversationModal.modal {
    top: var(--height-header-chat-list);
    height: 680px;
    overflow: hidden;
}

body.mobileapp-body #startConversationModal .modal-content {
    height: 680px;
}

body.mobileapp-body #userListForNewChat {
    max-height: calc(664px - 117px);
}

body.mobileapp-body #startConversationModal {
    right: 0;
    padding: 0 !important;
}

body.mobileapp-body #startConversationModal .modal-dialog {
    width: 100%;
    margin: 0 auto;
}

body.mobileapp-body .chats-content-container .js-back-to-chats-list {
    display: inline;
}

body.mobileapp-body .emojionearea-picker {
    right: 0 !important;
}

body.mobileapp-body .emojionearea .emojionearea-button {
    right: 3.75rem;
}

.emojionearea .emojionearea-button>div {
    width: 2.5rem;
    height: 2.5rem;
    background-size: cover;
}

.emojionearea .emojionearea-button>div.emojionearea-button-open{
    background-position: 0 -49px;
    background-image:none!important
}

.emojionearea .emojionearea-button>div.emojionearea-button-close{
    background-position: 0 -8px;
    background-image:none!important
}

.emojionearea .emojionearea-button>div.emojionearea-button-open:before{
    font-family: "Font Awesome 6 Pro";
    content: "\f118"!important;
    font-size:32px;
}

.emojionearea .emojionearea-button>div.emojionearea-button-close:before{
    font-family: "Font Awesome 6 Pro";
    content: "\f00d"!important;
    font-size:32px;
}


/****** Media Queries ******/
@media only screen and (max-width: 767px) {
    /* smartphone */
    #zone-contenu {
        margin-left: -18px;
        margin-right: -18px;
    }

    #blockChatOpened {
        margin-left: 0 !important;
    }

    #chats-container {
        margin: 0 auto;
    }

    .chats-list-container {
        box-shadow: 0 0 0 transparent;
    }

    .chats-content-container {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2;
        visibility: hidden;
    }

    #startConversationModal {
        right: 0;
        padding: 0 !important;
    }

    .chats-content-container .js-back-to-chats-list {
        display: inline;
    }

    .modal-dialog {
        max-width: 96vw;
    }
}