/* CHATBOT */


    .chatBox {
        position: fixed;
        bottom: 0px;
        right: 20px;
        margin-bottom: 10px;
        margin-left: 10px;
        width: 400px;
        max-width: 95%;
        height: 500px;
        max-height: 95%;
        box-sizing: border-box;
        border-radius: 0.4em;
        background-color: white;
        box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px 0px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .chatBox header {
        box-shadow: rgba(155, 155, 155, 0.54) 0px 10px 10px -10px;
        height: 65px;
        min-height: 65px;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;justify-content: center;align-items: center;
        background-color: #0d6efd;
    }
    .chatBoxProfile {
        width: 35px;
        min-width: 35px;
        height: 35px;
        border-radius: 10em;
        overflow: hidden;
        background:none;
        border:1px solid #fff;
        background-size:80%;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    .chatBoxTitle {
        box-sizing: border-box;
        margin-left: 15px;
        margin-right: 15px;
        width: 100%;
        color: white;
    }
    .chatBoxCross {
        display: flex;justify-content: center;align-items: center;
        border-radius: 4em;
        width: 32px;
        min-width: 32px;
        height: 32px;
        cursor: pointer;
    }
    .chatBoxCross img {
        width: 18px;
    }
    .chatBoxCross:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
    /*-------- chat messages -----------------------------*/
    .chatBoxMessages {
        height:min-content;
        padding: 15px;
        overflow: auto;
        margin-bottom: 60px;
    }
    .chatBoxMessage {
        width: 100%;
        font-size: 14px;
        margin-bottom: 10px;
        padding: 10px;
        display: flex;
        color: white;
    }
    .chatBoxMessage > div {
        width:fit-content;
        background-color: #0d6efd;;
        position: relative;
        min-width: 30px;
        padding: 10px;
        border-radius: 0.4em;
        white-space: pre-wrap;
    }
    .chatBoxMessage > div > span {
        position:absolute;
        bottom: 0px;
        right: 0px; 
        margin-right: 5px;
        font-size: 11px;
        display: flex;justify-content: flex-end;align-items: center;
    }
    .chatBoxMessage > div > span > img {
        width: 11px;
        margin-left: 5px;
    }

    .chatBoxMessageR {
        justify-content: flex-end;
        color:#212121;
    }
    .chatBoxMessageR > div {
        background-color: #F4F7F9;
    }
    .chatBoxMessageR > div > span > img {
        display: none;
    }
    .chatBoxMessageR .chatBoxMImg img {
        display: none;
    }

    /*----- footer -------------------------*/
    .chatBox footer {
        position: absolute;
        box-sizing: border-box;
        bottom: 0px;
        width: 100%;
        height: 48px;
        background-color: #F4F7F9;
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;justify-content: center;align-items: center;
    }
    .chatBox footer textarea {
        width: 100%;
        height: 100%;
        font-size: 14px;
        border:none;
        background-color: #F4F7F9;
    }
    .chatBox footer img {
        height: 16px;
        margin-left: 10px;
        cursor: pointer;
    }

    /*------- chat box discussion list ------------------------*/
    .chatBoxDisc {
        height:min-content;
        padding: 20px;
        padding-top: 5px;
        overflow: auto;
        font-size: 13px;
    }
    .chatBoxDiscElt {
        position: relative;
        display: flex;justify-content: flex-start;align-items: center;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: solid 1px rgb(240, 240, 240);
        cursor: pointer;
    }
    .chatBoxDiscImg {
        width: 47px;
        height: 47px;
        min-width: 47px;
        min-height: 47px;
        border-radius: 10em;
        border: solid 2px silver;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        margin-right: 20px;
    }
    .chatBoxDiscImg + div {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .chatBoxDiscImg + div > div {
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 3px;
    }
    .chatBoxDCount {
        min-width: 21px;
        min-height: 21px;
        font-size: 10px;
        color: white;
        border-radius:5em;
        background-color: rgb(230, 30, 57);
        display: flex;justify-content: center;align-items: center;
    }

    /*----------------- bot button  ----------------------------------------*/
    .chatBoxPlus {
        position: fixed;
        bottom: 30px;
        right: 15px;
        margin-bottom: 20px;
        margin-left: 20px;
        width: 50px;
        height: 50px;
        padding : 8px;
        text-align: center;
        justify-content: center;align-items: center;
        background-color: #0d6efd;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
        border-radius: 4em;
        cursor: pointer;
      }
      .chatBoxPlus:hover {
        box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 20px 10px;
      }
      .chatBoxPlus > img {
        width: 25px;
      }