@charset "utf-8";
/* CSS Document */

:root {
  --primary-color: #9e0b0f;       /* Your primary color */
  --secondary-color: #1a1668;     /* Your secondary color */
  --chat-bg:  #fdedd2;         /* Common chat background */
  --chat-hover-bg: #fff8e7;       /* Hover/active background */
  --chat-border: #9e0b0f;         /* Border color for lists */
  --text-light: #FFFFFF;          /* Light text */
  --text-muted: #f5efe7;          /* Muted / secondary text */
  --text-secondary: #f8e1c3;      /* Optional */
  --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); /* Common shadow */
}
  /* --chat-bg: #2B5E53;             Common chat background */
  /* --chat-hover-bg: #3F9684;       Hover/active background */
  /* --chat-border: #1F3D37;         Border color for lists */

.popup-box {
    background-color: var(--chat-bg);
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    right: 82px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
  z-index:1001;
  box-shadow: var(--card-shadow);
  border-top-right-radius: 33px !important;
    border-top-left-radius: 10px !important;
    transition: all 1s ease 0s;
}

.register-form .form-control
{
  height: 39px;
}
.login-form .form-control:focus
{
  box-shadow: none;
}
.chatsec_name
{
  height:58px;
    background-color: var(--primary-color);
    padding: 4px 0px 7px;
    /* background-color: #29554f; */
}
#message {
    width: 88%;
    border: 1px solid #ccc;
    padding: 10px 10px 0px;
    height: 40px;
}
.btn:active:focus,textarea:focus 
{
  outline:none;
}
.round.hollow {
    margin: 40px 0 0;
}
.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}

.popup-box .popup-head {
    background-color: var(--text-light);
    clear: both;
    color: #7b7b7b;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
    font-family: Oswald;
  border-top-right-radius: 33px !important;
    border-top-left-radius: 10px !important;
}
.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}
.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
    border-radius: 50%;
    width: 35px;
}
.popup-messages-footer > textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 34px !important;
    margin: 7px;
    padding: 5px !important;
     border: medium none;
    width: 95% !important;
}
.popup-messages-footer {
    background: var(--text-light) none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}
.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}
.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}
.popup-box .popup-messages {
    background: var(--chat-hover-bg) none repeat scroll 0 0;
    height: 366px; /*275px;*/
    overflow: auto;
  clear:both;
}
.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);
  margin-bottom: 34px;
    
}
#admin_name div 
{
    display: inline-block;
    text-align: left;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages abbr.timestamp {
    background: var(--chat-hover-bg) none repeat scroll 0 0;
    color: var(--text-light);
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
  margin: 0 8px 0 0;
  vertical-align: top !important;
}
.chat-header-button {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #636364;
    border-radius: 50%;
    font-size: 14px;
    height: 30px;
    width: 30px;
    color:white;
}
.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
  padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
  color: #303030;
}

.popup-messages abbr.timestamp {
    background: var(--chat-hover-bg)  none repeat scroll 0 0;
    color: var(--text-light);
    padding: 0 11px;
}
.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}
.popup-messages .direct-chat-messages {
    height: auto;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.popup-messages .direct-chat-timestamp {
    color: var(--text-light);
    opacity: 0.6;
}
.popup-messages .direct-chat-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 0 49px !important;
  color: var(--text-light);
  opacity: 0.9;
}
.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}
.popup-messages  .big-round {
    margin: -9px 0 0 !important;
}
.popup-messages  .direct-chat-img {
    border: 1px solid var(--text-light);
  background: var(--chat-hover-bg)  none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}
.direct-chat-reply-name {
    color: var(--text-light);
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small
{
    border: 1px solid var(--text-light);
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
  background:var(--chat-hover-bg);
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
  background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted var(--text-light) !important;
  bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
   display: inline;
    z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    background: var(--text-light) none repeat scroll 0 0;
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
   display: inline;
    z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {
   
    border-color: transparent #dfece7 transparent transparent;
    
}
.direct-chat-text::after, .direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}
.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}
.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}
.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}


/* Chat Message */



/* .container{max-width:1170px; margin:auto;} */
img{ max-width:100%;}
.inbox_people {
  background: #f8f8f8 none repeat scroll 0 0;
  float: left;
  overflow: hidden;
  width: 40%; border-right:1px solid #c4c4c4;
}
.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: right;
  width: 60%; padding:
}
.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}

.recent_heading h4 {
  color: #05728f;
  font-size: 21px;
  margin: auto;
}
.srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}
.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 h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}
.chat_ib h5 span{ font-size:13px; float:right;}
.chat_ib p{ font-size:14px; color:#989898; margin:auto}
.chat_img {
  float: left;
  width: 11%;
}
.chat_ib {
  float: left;
  padding: 0 0 0 15px;
  width: 88%;
}

.chat_people{ overflow:hidden; clear:both;}
.chat_list {
  border-bottom: 1px solid #c4c4c4;
  margin: 0;
  padding: 18px 16px 10px;
}
.inbox_chat { height: 550px; overflow-y: scroll;}

.active_chat{ background:#ebebeb;}

.incoming_msg_img {
  display: inline-block;
  width: 6%;
}
.received_msg {
  display: inline-block;
  padding: 0 0 0 10px;
  vertical-align: top;
  width: 100%;
 }
 .received_withd_msg p {
  background-color: var(--text-light);
  border-radius: 12px;
  color: var(--primary-color);
  font-size: 15px !important;
  margin: 0;
  padding: 5px 12px 6px;
  width: auto;
  display: inline-block;
  text-align:left;
  border: 1 solid var(--primary-color);
}
.time_date {
  color: #747474;
  display: block;
  font-size: 12px;
  margin: 8px 0 0;
  color:#999
}
.received_withd_msg { text-align: left;}
/*.mesgs {
  float: left;
  padding: 30px 15px 0 25px;
  width: 90%;
}*/
.sent_msg p {
  background: var(--primary-color) none repeat scroll 0 0;
  border-radius: 12px;
  font-size: 15px !important;
  margin: 0; 
  color:var(--text-light);
  padding: 5px 12px 6px;
  width: auto;
  display: inline-block;
  text-align:left;
}
.outgoing_msg,.incoming_msg{ overflow:hidden; margin:26px 0 26px;}
.sent_msg {
  float: right;
  text-align:right;
}
.
.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: 100%;
}

.type_msg {border-top: 1px solid #c4c4c4;position: relative;}
.msg_send_btn {
  background: #05728f none repeat scroll 0 0;
  border: medium none;
  border-radius: 50%;
  color: var(--text-light);
  cursor: pointer;
  font-size: 17px;
  height: 33px;
  position: absolute;
  right: 0;
  top: 11px;
  width: 33px;
}
.messaging { padding: 0 0 50px 0;}
/*.msg_history {
  min-height: 516px;
  overflow-y: auto;
}*/
.input-groupchat{
    width:200px;
    margin:10px;
}
.btn.btn-default {
    background-color: #fafafa;
    color: #666;
    border-color: #ddd;
    border-bottom-color: #ddd;
}
.chaticon{
        padding: 2px 11px;
    height: 35px;
    border-radius: 0px;
}
.bottomhead{
    clear:both; 
    text-align:right;
    margin:10px; 
    margin-top:5px; 
    color:var(--primary-color); 
    white-space:nowrap;
}

.headtext{
    font-size: 20px;
    color: var(--primary);
}
.chat-persons {
    width: 35%;
    background: var(--chat-bg);
    border-right: 1px solid var(--chat-border);
    overflow-y: auto;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px 0;
    box-sizing: border-box;
}
/* Search box */
.search-box {
    padding: 8px 12px;
}
.search-box input {
   /* width: 100%;*/
    padding: 8px 12px;
    border-radius: 20px;
    border: none;
    outline: none;
    /*font-size: 14px;*/
    background: var(--text-secondary); 
    color: var(--primary-color);
}
/* User list */
#chatUserList {
    list-style: none;
    margin: 0;
    padding: 0;
}
#chatUserList li {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 12px;
    margin: 6px 8px;
    transition: background 0.2s;
}
#chatUserList li:hover {
    background: var(--chat-hover-bg); /* hover color */
}
#chatUserList li.active {
    background: var(--chat-hover-bg); /* same as hover, or pick another color */
}
/* Default (desktop/tablet) works as is */

/* Mobile view adjustments */
@media (max-width: 400px) {
.popup-box.chat-popup {
        width: 76% !important;   /* fit screen */
        right: 0;
        left: 0;
        border-radius: 0;
    }
}
@media (max-width: 768px) {
    .chat-persons {
        width: 100%;              /* full width list */
        height: auto;             /* shrink height */
        border-right: none;
    }

    .direct-chat-messages {
        width: 100% !important;   /* override fixed width */
    }

    .popup-box.chat-popup {
          /* fit screen */

        right: 0;
        left: 0;
        border-radius: 0;
    }

    .popup-head-left img {
        width: 32px;
        height: 32px;
    }

    .user-dp {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    /* Stack chat list above messages */
    .popup-messages.chatsec {
        display: block;
    }
}

/* DP circle */

#message {
  width: 58%;
  border: 1px solid #ccc;
  padding: 10px 10px 0px;
  height: 40px;
}
/* Remove previous user-phone styles */
.user-phone { display: none; }

/* User DP circle */
.user-dp {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: var(--text-light);
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 12px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    position: relative; /* MUST for unread-count */
}

.unread-count {
    position: absolute;   /* absolute positioning inside user-dp */
    top: -5px;            /* top corner */
    right: -5px;          /* adjust left/right as needed */
    background: red;
    color: white;
    font-size: 10px;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    border-radius: 50%;
    font-weight: bold;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* User info */
.user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    overflow: hidden;
}

/* Username */
.user-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 4px;
}

/* Last message line */
.last-msg-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--secondary-color);
    overflow: hidden;
}

/* Last message text truncated with ellipsis */
.last-msg {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

/* Date on the right */
.last-msg-date {
    color: var(--text-muted); /* lighter teal */
    font-size: 12px;
    margin-top: 3px;

}

/* User info */
.user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}
/* Username */
.user-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--secondary-color);
}

.user-phone {
    font-size: 13px;
    color: var(--text-muted); /* lighter teal-gray */
}
.msg_footer {
    display: flex;
    justify-content: space-between;  /* pushes date left, icon right */
    align-items: center;
    margin-top: 4px;
}

.time_date {
    color:var(--secondary-color);
    font-size: 12px;
    margin-right: 10px;  /* 👈 adds gap before the icon */
}

.msg_icon {
    cursor: pointer;
    color: var(--secondary-color);   /* default grey */
    font-size: 14px;
    margin-left: 10px;  /* 👈 extra gap from the date */
}

.msg_icon.active {
    color: blue; /* green when active */
}

.chatsec_name {
  height: 46px;
}
.formgroup {
    display: flex;
    align-items: center;
}

#user_otpchat {
    max-width: 150px; /* 👈 keep OTP box smaller */
    margin-right: 10px;
}

#timershowchatreg {
    font-size: 14px;
}
@media (max-width: 576px) {
    #lbl_resendotpin,
    #timerchatreg,
    #lbl_seconds {
        font-size: 10px;
    }
}
#lbl_resendotpin,
#timerchatreg,
#lbl_seconds {
    font-size: 10px;
    display: inline-block;
    margin: 0 2px;   /* small gap between spans */
}

/* Hide by default (desktop/tablet) */
.mobile-only {
  display: none;
}

/* Show only on mobile (≤768px, adjust as needed) */
@media (max-width: 768px) {
  .mobile-only {
    display: inline-block !important;
  }
}


/* Hide chat persons on mobile */
@media (max-width: 768px) {
    .chat-persons {
        display: none;
        position: absolute;
        top: 45px;           /* below header */
        left: 0;
        width: 100%;
        height: calc(100% - 45px);
        z-index: 9999;
    }

    .chat-persons.show {
        display: block;  /* when button clicked */
    }

    /* Chat window always full width */
    .direct-chat-messages {
        width: 100% !important;
    }

    .popup-messages-footer {
        width: 100% !important;
    }
}
#chatUserList { list-style: none; margin: 0; padding: 0; }
#chatUserList li {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 12px;
    margin: 6px 8px;
    transition: background 0.2s;
}
#chatUserList li:hover,
#chatUserList li.active {
    background: var(--chat-hover-bg);
}

/* Mobile view */
@media (max-width: 768px) {
    .chat-persons {
        display: none;
        position: absolute;
        top: 45px;
        left: 0;
        width: 100%;
        height: calc(100% - 45px);
        z-index: 9999;
    }
    .chat-persons.show { display: block; }
    .chat-window { width: 100%; }
    .direct-chat-messages { width: 100% !important; }
    .popup-messages-footer { width: 100% !important; }
}
/* Hide by default */
#toggleUsersBtn {
    display: none;
}

/* Show only on mobile (max width 768px, adjust if needed) */
@media (max-width: 768px) {
    #toggleUsersBtn {
        display: inline-block;
    }
}
.response-rating {
    margin-top: 10px;
    font-size: 0.9em;
}

.response-rating span {
    margin-right: 10px;
    cursor: pointer;
}
/* Chat bubbles */
.chat-message {
    max-width: 75%;
    padding: 12px 18px;
    margin: 8px 0;
    border-radius: 20px;
    position: relative;
    word-wrap: break-word;
    transition: transform 0.2s ease;
}

.chat-message:hover {
    transform: scale(1.02);
}

/* Chat sides */
.chat-left {
    background-color: #e1f5fe;
    align-self: flex-start;
    border-top-left-radius: 0;
}

.chat-right {
    background-color: #c8e6c9;
    align-self: flex-end;
    border-top-right-radius: 0;
}

/* Footer with time and icons */
.msg-footer {
    font-size: 12px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.msg-footer .time {
    color: #888;
    font-size: 10px;
}

.msg-footer .helpful-caption {
    color: #555;
}

.msg-icon i {
    color: #555;
    margin-left: 5px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.msg-icon i:hover {
    transform: scale(1.2);
}

.msg-icon i.liked {
    color: #4caf50;
}

.msg-icon i.disliked {
    color: #f44336;
}
.msg-icon .highlight {
    color: #007bff; /* Bootstrap primary blue */
}

.formgroup {
    margin-bottom: 1rem;
    margin: 14px;
    width: 236px;
    height: 33px;
    background-color: white;
}
@media (max-width: 400px) {
    .formgroup {
      margin-bottom: 0rem;
    margin: 13px;
    width: 90%;
    height: 0px;
        background-color: white;
    }
}
@media (max-width: 768px) {
    .formgroup {
      margin-bottom: 0rem;
    margin: 13px;
   
    height: 0px;
        background-color: white;
    }
}
/* Desktop layout */


/* Stack layout for mobile */
@media (max-width: 768px) {
  .captchachatlogin {
    flex-direction: column;
    align-items: stretch;
  }

  /* Captcha + reload stay in same line */
  .captcha-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
  }

  /* Button full width on next line */
  .captchachatlogin button {
    width: 100%;
  }
}

@media (max-width: 768px) {
    .bottomhead {
        flex-direction: column;
        align-items: flex-start; /* or center if you want centered text */
    }
    .bottomhead span {
        margin-left: 0 !important;
        margin-top: 5px;
    }
}
.popup-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-head-left .popup-logo {
  width: 50px;
  height: 50px;
}

.popup-head-left .popup-title {
  font-size: 17px;
  color: var(--primary);
  font-weight: 700;
}

/* 🔽 Mobile view adjustments */
@media (max-width: 768px) {
  .popup-head-left .popup-logo {
    width: 35px;
    height: 35px;
  }

  .popup-head-left .popup-title {
    font-size: 14px;
  }
}
/* Common icon style (desktop default) */
.popup-icon {
  font-size: 18px;
  position: absolute;
  font-weight: lighter;
  border: 1px solid #aeaeae;
  padding: 5px 7px;
  border-radius: 100%;
  background-color: #fff;
  top: 5px;
  cursor: pointer;
}

/* Specific positions */
.close-icon {
  right: -2px;
}
.minimize-icon {
  right: 32px;
}

/* 🔽 Mobile view — reduce size */
@media (max-width: 768px) {
  .popup-icon {
    font-size: 14px;
    padding: 3px 5px;
  }

  .close-icon {
    right: 0;
  }

  .minimize-icon {
    right: 25px;
  }
}
.chat-header {
  /*  width: 100%;*/
    position: relative;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .chat-header .chat-header-button i,
    .chat-header .toggle-users {
        font-size: 16px;
        padding: 4px 6px;
    }
}