.container{max-width:1170px; margin:auto;}
img{ max-width:100%;}
.inbox_people {
    background: #f8f8f8 none repeat scroll 0 0;
    float: left;
    width: 300px;
    border-right:1px solid #c4c4c4;
    z-index:900;
    position:fixed;
    height: 100%;
}
.inbox_msg {
    border: 1px solid #c4c4c4;
    clear: both;
    overflow: hidden;
}
.top_spac{ margin: 20px 0 0;}


.recent_heading {float: left; width:40%;}
.srch_bar {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin-top: 40px;
}

.recent_heading h4 {
    color: #d00000;
    font-size: 21px;
    margin: auto;
}
.srch_bar input {
    border:1px solid #cdcdcd;
    border-width:0 0 1px 0;
    padding:2px 0 4px 6px;
}
.srch_bar .input-group-addon button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    padding: 0;
    color: #707070;
    font-size: 18px;
}
.srch_bar .input-group-addon { margin: 0 0 0 -27px;}

.chat_ib p{ font-size:14px; color:#0f1117; margin:auto}
.chat_ib p span{ font-size:13px; float:right; color:#0f1117;}

.chat_ib {
    float: left;
    width: 100%;
}

.chat_people{
    overflow:hidden;
    clear:both;
}

.chat_list {
    border-bottom: 1px solid #c4c4c4;
    margin: 0;
    padding: 5px 5px 5px 5px;
}

.inbox_chat {
    height: calc(100% - 60px);
    overflow-y: scroll;
}

.inbox_chat_mobile {
    height: calc(100% - 190px);
    overflow-y: scroll;
}

/* Chat sidebar (#sideBarTools): flex column so #chat_groups fills the space
   below the search bar automatically - replaces the old per-page reAdjust() JS.
   height:auto lets the inline top:48/bottom:32 size the sidebar (overrides .inbox_people{height:100%}). */
#sideBarTools {
    display: flex;
    flex-direction: column;
    height: auto;
}
#sideBarTools #chat_groups {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-y: auto;
}

.active_chat{
    background:white;
}

.incoming_msg_img {
    display: inline-block;
    width: 42px;
}
.received_msg {
    display: inline-block;
    padding: 0 0 0 10px;
    vertical-align: top;
    width: calc(100% - 56px);
}
.received_withd_msg p {
    background: #ebebeb none repeat scroll 0 0;
    border-radius: 3px;
    color: #646464;
    font-size: 14px;
    margin: 0;
    padding: 7px 10px 7px 10px;
    width: 100%;
}

.received_withd_msg a {
    color: #d00000;
}

.time_date {
    color: #747474;
    display: block;
    font-size: 11px;
    margin: 0;
    text-align: left;
    margin-left: 7px;
}
.received_withd_msg {
    margin-top: 5px;
    width: 65%;
}

.mesgs {
    left: 300px;
    position: fixed;
    float: left;
    padding: 0px 15px 10px 15px;
    width: 650px;
    background: #f8f8f8;
    top: 30px;
    height: 100%;
    display: none;
    flex-direction: column;   /* when shown (JS sets display:flex): summary + msg_history(flex:1) + input stack vertically */
    border: 1px solid #ccc;
}

.sent_msg p {
    background: #d00000 none repeat scroll 0 0;
    border-radius: 3px;
    font-size: 14px;
    margin: 0;
    color:#fff;
    padding: 7px 10px 7px 10px;
    width:100%;
}

.sent_msg a {
    color:#fff;
}

.outgoing_msg{
    overflow:hidden;
    margin: 5px 20px 0 0;
}
.sent_msg {
    float: right;
    width: 65%;
    margin: 0px 30px 0px 0px;
}
.input_msg_write input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #4c4c4c;
    font-size: 15px;
    min-height: 48px;
    width: 95%;
}

/* Chat message-input area: template dropdown spans the full top row;
   textarea fills the second row with the send button centred beside it.
   Scoped to :has(select) so these ONLY hit the migrated pages' templated
   composer (dropdown + textarea + send). messaging.jsp (unified /m + /pathway) shares
   the .input_msg_write class but has a different composer (attach + textarea +
   record + send, NO <select>), so it keeps its plain block layout. */
.input_msg_write:has(select) {
    display: grid;
    grid-template-columns: 1fr 56px;
    align-items: center;
}
.input_msg_write select {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    margin: 5px 0 0 0;
    padding: 0 20px 0 3px;
    border-bottom-left-radius: 0 !important;
}
.input_msg_write:has(select) textarea {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    height: 68px !important;
    margin: 0;
    resize: none;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.input_msg_write:has(select) img {
    width: 40px;
    justify-self: center;
    background: #fff;
    border-radius: 45px !important;
}

.type_msg {
    border-top: 1px solid #c4c4c4;
    flex: 0 0 auto;   /* in-flow flex item at the bottom of #mesgs (was position:absolute) */
}

.msg_send_btn {
    background: #d00000 none repeat scroll 0 0;
    border: medium none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    height: 33px;
    position: absolute;
    right: 0;
    top: 11px;
    width: 50px;
}
.msg_send_btn:hover {
    background: #a00000 none repeat scroll 0 0;
}
.msg_history {
    flex: 1;          /* fills the space between the summary (if any) and the input - no JS height calc needed */
    min-height: 0;
    overflow-y: auto;
}

/* AI-summary box (videos agent chat only) - keep its natural height as a flex item. */
#fixed-bot-summary {
    flex: 0 0 auto;
}

.msg_image {
    border-radius: 50% !important;
    margin-top: 4px;
}

.msg_box {
    border-radius: 5px !important;
    word-wrap: break-word;
}


.closeChat {
    position: absolute;
    right: 0;
    top: 195px;
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
    padding-bottom: 8px;
    padding-right: -0px;
    width: 25px;
    height: 50px;
    text-align: center;
    text-decoration: none;
    color: white;
    display: inline-block;
    font-size: 25px;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
}

.closeChat:hover {
    background: #a00000 none repeat scroll 0 0;
}

.openChat {
    border-radius: 5px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-left: 80px;
    margin-top: 5px;
    height: 30px;
}

.openChat:hover {
    background: #a00000 none repeat scroll 0 0;
}

.viewStreamLeft {
    border-radius: 5px 0px 0px 5px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    margin-right: 3px;
    width: 70px;
    height: 30px;
}

.viewStreamLeft:hover {
    background: #a00000 none repeat scroll 0 0;
}

.viewStreamLeftDisabled {
    border-radius: 5px 0px 0px 5px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #c4c4c4 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    margin-right: 3px;
    width: 70px;
    height: 30px;
}

.centrisedDiv {
    align-content: center;
    text-align: center;
}

.viewStreamLeftForResponders {
    border-radius: 5px 0px 0px 5px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    width: 70px;
    height: 30px;
}

.viewStreamLeftForResponders:hover {
    background: #a00000 none repeat scroll 0 0;
}

.viewStreamLeftDisabledForResponders {
    border-radius: 5px 0px 0px 5px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #c4c4c4 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    width: 70px;
    height: 30px;
}

.openChatCentre {
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    height: 30px;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    width: 70px;
}

.openChatCentre:hover {
    background: #a00000 none repeat scroll 0 0;
}

.openChatCentreDisabled {
    text-align: center;
    text-decoration: none;
    color: white;
    background: #c4c4c4 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    width: 70px;
    height: 30px;
}

.inviteCentre {
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    margin-left: 3px;
    height: 30px;
}

.inviteCentre:hover {
    background: #a00000 none repeat scroll 0 0;
}

.cancleVideoRight {
    border-radius: 0px 5px 5px 0px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-left: 3px;
    margin-top: 5px;
    width: 70px;
    height: 30px;
}

.cancleVideoRight:hover {
    background: #a00000 none repeat scroll 0 0;
}

.viewStream {
    border-radius: 5px 5px 5px 5px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    margin-right: 3px;
    margin-left: 3px;
    height: 30px;
    width: 70px;
}

.viewStream:hover {
    background: #a00000 none repeat scroll 0 0;
}

.viewStreamDisabled {
    border-radius: 5px 5px 5px 5px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #c4c4c4 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    margin-right: 3px;
    margin-left: 3px;
    height: 30px;
}

.joinRoom {
    border-radius: 5px 0px 0px 0px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    margin-right: 3px;
    width: 60px;
    height: 30px;
}

.joinRoom:hover {
    background: #a00000 none repeat scroll 0 0;
}

.openChatForConsultations {
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    width: 68px;
    height: 30px;
}

.openChatForConsultations:hover {
    background: #a00000 none repeat scroll 0 0;
}

.inviteForConsultation {
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    margin-left: 3px;
    width: 60px;
    height: 30px;
}

.inviteForConsultation:hover {
    background: #a00000 none repeat scroll 0 0;
}

.cancleConsultation {
    border-radius: 0px 5px 0px 0px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-left: 3px;
    margin-top: 5px;
    width: 60px;
    height: 30px;
}

.cancleConsultation:hover {
    background: #a00000 none repeat scroll 0 0;
}

.requestAttachment {
    border-radius: 0px 0px 0px 5px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 3px;
    width: 159px;
    height: 30px;
}

.requestAttachment:hover {
    background: #a00000 none repeat scroll 0 0;
}

.sendAttachment {
    border-radius: 0px 0px 5px 0px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-left: 3px;
    margin-top: 3px;
    width: 95px;
    height: 30px;
}

.sendAttachment:hover {
    background: #a00000 none repeat scroll 0 0;
}

.cancleVideoHalfRight {
    border-radius: 0px 5px 5px 0px !important;
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-left: 3px;
    margin-top: 5px;
    width: 70px;
    height: 30px;
}

.cancleVideoHalfRight:hover {
    background: #a00000 none repeat scroll 0 0;
}

.openChatHalfCentre {
    text-align: center;
    text-decoration: none;
    color: white;
    background: #d00000 none repeat scroll 0 0;
    border-bottom-style: none;
    border: 0;
    margin-top: 5px;
    border-radius: 5px 0px 0px 5px !important;
    width: 70px;
    height: 30px;
}

.openChatHalfCentre:hover {
    background: #a00000 none repeat scroll 0 0;
}

@keyframes textFlash {
    0% { color: #0f1117; }
    30% { color: #d00000; }
    100% { color: #0f1117; }
}

@keyframes textGreenRed {
    0% { color: #d00000; }
    30% { color: rgba(20, 231, 20, 0.91);; }
    100% { color: #d00000; }
}

.new-replies {
    animation: textFlash 3s ease-in-out infinite;
}

@keyframes textFlashGreenBlack {
    0% { color: #0f1117; }
    30% { color: rgba(20, 231, 20, 0.91); }
    100% { color: #0f1117; }
}

@keyframes textFlashAmberBlack {
    0% { color: #0f1117; }
    30% { color: #fa851e }
    100% { color: #0f1117; }
}

.bot-red {
    color: #d00000;
}

.bot-green {
    color: rgba(20, 231, 20, 0.91);;
}

.bot-amber {
    color: #fa851e;
}

.bot-flash-red {
    animation: textFlash 3s ease-in-out infinite;
}

.bot-flash-green-red {
    animation: textGreenRed 3s ease-in-out infinite;
}

.bot-flash-green {
    animation: textFlashGreenBlack 3s ease-in-out infinite;
}

.bot-flash-amber {
    animation: textFlashAmberBlack 3s ease-in-out infinite;
}