.padding_5rem{
    padding: 5rem;
}
.padding_0_5rem {
    padding: 0.5rem;
}
.padding_1rem {
    padding: 1rem;
}
.gap_0_5rem {
    gap: 0.5rem;
}
.gap_1rem {
    gap: 1rem;
}
.flex {
    display: flex;
}
.justify_content_left {
    justify-content: left;
}
.justify_content_center {
    justify-content: center;
}
.justify_content_space_between {
    justify-content: space-between;
}
.align_items_flex_start {
    align-items: flex-start;
}
.flex_flow_column {
    flex-flow: column;
}
.flex_flow_wrap {
    flex-flow: wrap;
}
.width_height_100_pr {
    width: 100%;
    height: 98%;
}
.overflow_auto {
    overflow: auto;
}
.call_container{
    height: 100vh;
}
.call_user_img_box {
    overflow: hidden;
    width: 3.1rem;
    height: 3.1rem;
    position: relative;
}
.call_user_img_box img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
.call_online_indicator {
    position: absolute;
    width: 0.9rem;
    height: 0.9rem;
    background: green;
    bottom: 1px;
    right: 1px;
    border-radius: 100%;
}
.call_status {
    color: #005700;
}
.call_ctrl_btn {
    width: 50px;
    height: 50px;
    background: gainsboro;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.call_end_btn {
    background: red;
    color: white;
}
.popup_pack {
    width: 100%;
    position: relative;
}
.popup_btn_pad {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.popup_menu_pad {
    position: absolute;
    top: 35px;
    right: 0;
    box-shadow: 0px 0px 5px 0px #9E9E9E;
    width: 100%;
    max-width: 300px;
    min-width: 225px;
    z-index: 46;
    background: #384859;
    display: none;
    border-radius: 10px;
}
.popup_arrow {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ffffff;
    top: 28px;
    right: 36px;
    transform: skew(-65deg, -78deg);
    box-shadow: 0px 0px 5px 0px #9E9E9E;
}
.popup_row {
    height: auto;
    display: flex;
    justify-content: left;
    padding: 0.5rem;
    border-radius: 5px;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.popup_menu_wraffer {
    background: #ffffff;
    display: grid;
    color: #000000;
    position: relative;
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
}
.popup_row:hover {
    background: #cdd1d5;
    color: #000000;
}
.pop_up_menu:hover {
    z-index: 3;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-decoration: none;
    scrollbar-width: thin;
    scrollbar-color: #00000026 transparent;
    word-break: break-word;
}
::selection {
    background: black;
    color: white;
}
.root {
    width: 100vw;
    height: 100vh;
}
.root_head {
    background: #ffffff;
    z-index: 7;
    box-shadow: 0px 0px 2px 0px gainsboro;
    position: relative;
    background: #ffffff;
    color: #000000;
}
.root_body {
    position: relative;
    z-index: 1;
}
.root_body_menu {
    background: white;
    border-right: 0;
    max-width: 90px;
    min-width: 90px;
    overflow: hidden;
    box-shadow: 0px 0px 2px 0px gainsboro;
    position: relative;
    z-index: 2;
    color: #000000;
    transition: 0.5s;
}
a {
    color: inherit;
}
.info {
    position: relative;
    display: flex;
    flex-flow: row-reverse;
    max-width: 311px;
    align-items: center;
}
.high_light {
    font-size: 13px;
    font-weight: 500;
    font-family: system-ui;
    font-weight: bold;
    color: #E91E63;
}
#octDataWrr {
    font-family: system-ui;
}
.min_menu {
    height: 100%;
    overflow: auto;
}
.root_body_content {
    width: 100%;
    height: 100%;
    background: #f5f5f552;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    color: #000000;
}
.filter_row {
    width: 100%;
    justify-content: center;
    gap: 1rem;
}
.filter_input_box_container input {
    border: none;
    background: none;
    outline: none;
    width: 100%;
    color: inherit;
}
.filter_row select {
    padding: 0.7rem;
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 0.3rem;
    word-break: keep-all;
    cursor: pointer;
    box-shadow: 0px 0px 2px 0px gainsboro;
    width: 100%;
    outline: none;
}
.search_row {
    border-radius: 0.3rem;
    width: 100%;
    padding: 0.7rem;
    background: #ffffff;
    box-shadow: 0px 0px 2px 0px gainsboro;
}
.popup_row icon {
    width: 20px;
}
icon.active {
    color: green;
}
.msr_packet .msg_view_boxes_wrr_row {
    height: 200px;
    display: none;
    background: white;
}
.user-row {
    cursor: pointer;
    padding: 0.3rem;
    position: relative;
}
.user-row:hover {
    background: #cdd1d5!important;
}
.user_img_box {
    width: 3.1rem;
    height: 3.1rem;
    position: relative;
}
.user_img_box img {
    width: 100%;
    height: 100%;
    border-radius: 10%;
}
.new_msg_num {
    position: absolute;
    top: -3px;
    left: -3px;
    background: red;
    font-size: 12px;
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 100%;
}
.online_indicator {
    position: absolute;
    width: 0.9rem;
    height: 0.9rem;
    background: green;
    bottom: -1px;
    right: -1px;
    border-radius: 100%;
}
.offline_indicator {
    position: absolute;
    width: 0.9rem;
    height: 0.9rem;
    background: #b2b2b2;
    bottom: -1px;
    right: -1px;
    border-radius: 100%;
}
.msg_sent_time_stamp {
    font-size: 12px;
    color: gray;
}
.search_able_data {
    font-size: 13px;
}
.new_data_num_visulizer {
    display: flex;
    justify-content: center;
    align-items: center;
    background: red;
    width: 21px;
    height: 21px;
    position: absolute;
    right: -6px;
    top: -6px;
    border-radius: 100%;
    font-size: 10px;
    color: white;
    font-weight: bold;
}
/*--single-chat-css--*/
.single_chat {
    width: 100%;
    height: 98%;
    overflow: hidden;
    display: none;
}
.msg_index_box {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    background: white;
}
.msg_index_head {
    border-bottom: 1px solid #00000012;
}
.msg_index_body {
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.msg_view_boxes_wrr_row {
    position: relative;
    display: flex;
    flex-flow: column;
    height: 100%;
}
.msg_input_box {
    width: 100%;
    border-top: 1px solid #00000012;
    justify-content: space-between;
}
.smile_box_grp {
    min-width: 25px;
    cursor: pointer;
}
.msg_input_attach_file_box {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.msg_input_attach_file_box input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
.msg_input_text_box input {
    border: 0;
    background: none;
    outline: none;
    width: 100%;
    color: inherit;
    height: 30px;
}
.append_box_img {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
}
.outgoing_row .msg_data {
    justify-content: right;
    text-align: right;
}
.msg_data {
    gap: 0.3rem;
}
.msg_data_view_box {
    overflow: auto;
}
.outgoing_row {
    flex-flow: row-reverse;
    background: lightcyan;
    padding: 1rem;
    border-radius: 0.5rem;
}
.incoming_row {
    background: whitesmoke;
    padding: 1rem;
    border-radius: 0.5rem;
}
.outgoing_row .msg_sent_time_stamp {
    text-align: right;
}
.msg_data .msg_sent_time_stamp {
    display: flex;
}
.append_box_img .online_indicator {
    width: 0.7rem;
    height: 0.7rem;
    bottom: 0px;
    right: 0px;
}
.min_menu .user_img_box {
    width: 2.7rem;
    height: 2.7rem;
}
#maxMenu {
    display: none;
}
.notification_box .popup_menu_pad {
    min-width: 280px;
    right: -30px;
}
.notification_box .popup_arrow {
    right: 65px;
}
.new_massage_box .popup_menu_pad {
    min-width: 280px;
}
.text_dark {
    font-weight: 500;
    color: inherit;
    font-size: smaller;
}
.text_muted {
    margin: 5px 0;
    font-size: 12px;
}
.view_all_btn {
    color: inherit;
    padding: 0.6rem 2rem;
    border: 1px solid gainsboro;
    border-radius: 6rem;
    margin-top: 10px;
}
.view_all_btn:hover {
    background: whitesmoke;
}
.popup_body {
    max-height: 50vh;
    overflow: auto;
}
.startup_msg img {
    max-width: 300px;
}
.startup_msg .block {
    margin: auto;
    text-align: center;
    padding: 10px;
}
.logo img {
    width: 1.5rem;
    display: none;
}
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}
.root_head #mocBtn {
    font-size: 20px;
    font-weight: bold;
}
.multiple_msg_box {
    height: auto;
    box-shadow: 0px 0px 2px 0px gainsboro;
}
#multipleChatWindow {
    padding: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    grid-row-gap: 10px;
    max-height: 95%;
    align-items: flex-start;
    grid-column-gap: 10px;
    display: none;
}
#multipleChatWindow > div {
    box-sizing: border-box;
    flex: 1 1 32.33%;
}
.height_100_pr{
    height: 100%;
}
.height_50_pr {
    height: 50%;
}
.single_msg_box {
    border-radius: 0;
}
.msg_input_emoji_box .popup_menu_pad {
    bottom: 35px!important;
    top: unset!important;
    right: -20px!important;
}
.msg_input_emoji_box .popup_arrow {
    bottom: 28px!important;
    right: 36px!important;
    transform: skew(65deg, -78deg)!important;
    top: unset!important;
    background: #ffffff !important;
}
.msg_input_emoji_box .popup_menu_wraffer {
    background: #ffffff !important;
}
.emoji_popup_menu_pad {
    bottom: 35px!important;
    top: unset!important;
    right: -20px!important;
}
.emoji_popup_arrow {
    bottom: 28px!important;
    right: 36px!important;
    transform: skew(65deg, -78deg)!important;
    top: unset!important;
    background: #ffffff !important;
}
.emoji_popup_menu_wraffer {
    background: #ffffff !important;
}
.max_menu_tab_buttons_row h3 {
    font-size: 15px;
    padding: 0.6rem 0;
    border-radius: 0.3rem;
    cursor: pointer;
    font-family: system-ui;
    font-weight: bold;
    word-break: keep-all;
}
.max_menu_tab_buttons_row {
    padding: 0 0.8rem;
    justify-content: left;
}
.right_col {
    opacity: 0;
    position: absolute;
    right: 0;
    height: 50px;
    background: white;
    padding: 0 1rem;
    background: inherit;
}
.msg_index_body_row.user-row:hover .right_col {
    opacity: 1;
}
.max_menu_tab_buttons_row .active {
    background: #f4f4ff;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background: #eaeaea !important;
}
.max_menu_tab_buttons_row .flex {
    padding: 0 1.1rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.max_menu {
    scrollbar-width: thin;
    scrollbar-color: #e1e7ef00 transparent;
    padding: 0.5rem;
}
.max_menu:hover {
    scrollbar-width: thin;
    scrollbar-color: #e1e7ef transparent;
}
.tabs_container {
    background: #f4f4ff;
    border-radius: 0.5rem;
    background: whitesmoke;
    position: relative;
}
.min_menu_wrr {
    scrollbar-width: thin;
    scrollbar-color: #e1e7ef00 transparent;
}
.min_menu_wrr:hover {
    scrollbar-width: thin;
    scrollbar-color: #e1e7ef transparent;
}
details {
    padding: 0.7rem;
    border-radius: 0.5rem;
}
summary {
    cursor: pointer;
}
.block_user_row {
    padding: 0.7rem;
    border: 1px solid black;
    border-radius: 0.3rem;
    cursor: pointer;
}
.bur_container {
    margin-top: 10px;
}
.new_contact_btn {
    padding: 1rem 2rem;
    border-radius: 5px;
    cursor: pointer;
    color: black;
    font-size: 15px;
    font-weight: bold;
    background: #2196F3;
    color: white;
    margin-bottom: 10px;
    text-align: center;
    justify-content: center;
}
.popup_window {
    position: fixed;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background: #00000042;
    padding: 1rem;
    display: none;
}
.popup_window_wrr {
    display: flex;
    flex-flow: column;
    margin: auto;
    background: white;
    padding: 2rem;
    width: 100%;
    max-width: 500px;
    border-radius: 1rem;
}
.popup_window_body input[type="tel"] {
    padding: 1.3rem;
    border: 1px solid gainsboro;
    border-radius: 5px;
    width: 100%;
}
.popup_window_body input[type="submit"] {
    padding: 0.9rem 2rem;
    background: #2196F3;
    color: white;
    border: 0;
    margin-top: 22px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
}
.container > div {
    box-sizing: border-box;
    border: 1px solid #000; /* Optional: to visually see the div boundaries */
    flex: 1 1 33.33%;
}
button.btn {
    background: gainsboro;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 0.2rem;
}
button.btn.accept {
    background: #2196F3;
    color: white;
}
button.btn.reject {
    background: gainsboro;
    color: black;
}
.new_request_btn_row {
    margin-top: 0.3rem;
}
/*------------new-----------------*/
#pinpChatWindow {
    width: 100%;
    height: 70px;
    position: relative;
    display: flex;
    justify-content: right;
    display: none;
    background: white;
}
.request_user_row_container {
    padding-left: 0.5rem;
}
.request_user_row_container .msg_index_body_row {
    padding: 0.3rem;
}
.pinp_msg_box {
    max-width: 350px;
    position: absolute;
    bottom: 0;
    min-height: 400px;
    box-shadow: 0px 0px 6px 0px #000000;
    transition: 0.3s;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cdd1d5;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: #ff000014;
}
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    background: #ff0000;
}
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
.bg-cyan {
    background: cyan;
}
.bg-shed {
    background: rgb(205, 209, 213);
}
.archive .user-row {
    background: #f6e2e2;
}
.filter_input_box_container {
    width: 100%;
}
.msg_search_input {
    width: 100%;
    height: 40px;
    padding: 16px;
    border: none;
    background: none;
    border-radius: 0.3rem;
    border: 1px solid #0000001f;
    outline: none;
    color: inherit;
}
.user_name_box {
    min-width: 114px;
}
.user_img_wrapper img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    border-radius: 10%;
}
.outgoing_row .img_text_wrapper {
    text-align: right;
}
.user_img_wrapper {
    position: relative;
}
.user_img_wrapper .online_indicator {
    width: 0.7rem;
    height: 0.7rem;
    bottom: 0px;
    right: 0px;
}
.outgoing_row .user_img_wrapper {
    float: right;
    margin-left: 10px;
}
.incoming_row .img_text_wrapper {
    text-align: left;
}
.incoming_row .msg_sent_time_stamp {
    text-align: left;
}
.incoming_row .user_img_wrapper {
    float: left;
    margin-right: 10px;
}
.msg_sent_time_stamp span.dot {
    width: 5px;
    height: 5px;
    background: gray;
    display: inline-block;
    border-radius: 100%;
    vertical-align: middle;
    margin-right: 2px;
}
.msg_data_view_box .msg_sent_time_stamp {
    display: flex;
    align-items: center;
}
.outgoing_row .msg_sent_time_stamp {
    justify-content: left;
}
.incoming_row .msg_sent_time_stamp {
    justify-content: right;
}
#arc_chat_rows_wrapper {
    display: none;
}
#arc_chat_rows_wrapper .user-row {
    background: #f6e9e9;
}
.archive_chat_row .msg_index_head {
    background: red;
    color: white;
}
.archive_chat_row .msg_index_head .msg_sent_time_stamp {
    color: #ffffff;
}
input.msg_search_input::placeholder {
    color: inherit;
}
.archive_chat_row .outgoing_row {
    background: #ffe2e2;
}
#arc_chat_rows_wrapper .outgoing_row {
    background: #ffe2e2;
}
.filter_catagory_btn_container {
    display: none;
}
#NotfoundUserBox img {
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}