/*--margins--*/
.m-5px {
     margin: 5px;
}
.m-10px {
     margin: 10px;
}
.m-15px {
     margin: 15px;
}
.m-20px {
     margin: 20px;
}
.m-25px {
     margin: 25px;
}
.m-30px {
     margin: 30px;
}
.mb-0px{
     margin-bottom: 0;
}
.mt-0px{
     margin-top: 0;
}
.m-0_5rem {
     margin: 5rem;
}
.m-1rem {
     margin: 1rem;
}
.m-1_5rem {
     margin: 1.5rem;
}
.m-2rem {
     margin: 2rem;
}
.m-2_5rem {
     margin: 2.5rem;
}
.m-3rem {
     margin: 3rem;
}
/*--margins--*/

/*--paddings--*/
.p-5px {
     padding: 5px;
}
.p-10px {
     padding: 10px;
}
.p-15px {
     padding: 15px;
}
.p-20px {
     padding: 20px;
}
.p-25px {
     padding: 25px;
}
.p-30px {
     padding: 30px;
}
.pb-0px{
     padding-bottom: 0;
}
.pt-0px{
     padding-top: 0;
}
.p-0_5rem {
     padding: 0.5rem;
}
.p-1rem {
     padding: 1rem;
}
.p-1_5rem {
     padding: 1.5rem;
}
.p-2rem {
     padding: 2rem;
}
.p-2_5rem {
     padding: 2.5rem;
}
.p-3rem {
     padding: 3rem;
}
/*--paddings--*/

/*--gaps--*/
.g-5px {
     gap: 5px;
}
.g-10px {
     gap: 10px;
}
.g-15px {
     gap: 10px;
}
.g-20px {
     gap: 20px;
}
.g-25px {
     gap: 10px;
}
.g-30px {
     gap: 30px;
}
.g-0_5rem {
     gap: 0.5rem;
}
.g-1rem {
     gap: 1rem;
}
.g-1_5rem {
     gap: 1.5rem;
}
.g-2rem {
     gap: 2rem;
}
.g-2_5rem {
     gap: 2.5rem;
}
.g-3rem {
     gap: 3rem;
}
/*--gaps--*/

/*--flexs--*/
.flex {
     display: flex;
}
.jcl {
     justify-content: left;
}
.jcc {
     justify-content: center;
}
.jcr {
     justify-content: right;
}
.jcsa {
     justify-content: space-around;
}
.jcsb {
     justify-content: space-between;
}
.aifs {
     align-items: flex-start;
}
.aife {
     align-items: flex-end;
}
.aic {
     align-items: center;
}
.ffc {
     flex-flow: column;
}
.ffr {
     flex-flow: row;
}
.ffw {
     flex-flow: wrap;
}
/*--flexs--*/

/*--colors--*/
.c-white {
     color: white;
}
.c-black {
     color: black;
}
.c-red {
     color: red;
}
.c-green {
     color: green;
}
.c-blue {
     color: blue;
}
.mycolor{
     color: #1652f0;
}
/*--colors--*/

/*--backgrounds--*/
.b-white {
     background: white;
}
.b-black {
     background: black;
}
.b-red {
     background: red;
}
.b-green {
     background: green;
}
.b-blue {
     background: blue;
}
.mybackground {
     background: #1652f0;
}
/*--backgrounds--*/

/*--cursors--*/
.cup {
     cursor: pointer;
}
.cun {
     cursor: no-drop;
}
.cuc {
     cursor: crosshair;
}
/*--cursors--*/

/*--box-shadows--*/
.bs1g {
     box-shadow: 0px 0px 1px 0px gainsboro;
}
.bs2g {
     box-shadow: 0px 0px 2px 0px gainsboro;
}
.bs3g {
     box-shadow: 0px 0px 3px 0px gainsboro;
}
/*--box-shadows--*/

/*--widths--*/
.w-100 {
     width: 100%;
}
.h-100 {
     height: 100%;
}
.wh-100 {
     width: 100%;
     height: 100%;
}
/*--widths--*/

/*--text-aligns--*/
.tac {
     text-align: center;
}
.tal {
     text-align: left;
}
.tar {
     text-align: right;
}
.taj {
     text-align: justify;
}
/*--text-aligns--*/

/*--borders--*/
.b1sg {
     border: 1px solid gainsboro;
}
/*--borders--*/

/*--others--*/
.ofa {
     overflow: auto;
}
.ofh {
     overflow: hidden;
}
/*--others--*/

/*--pop-up--*/
.popupPack {
     width: 100%;
     position: relative;
}

.popupBtnPad {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
}

.popupMenuPad {
     position: absolute;
     top: 35px;
     right: 0;
     box-shadow: 0px 0px 12px 0px gainsboro;
     width: 100%;
     max-width: 300px;
     min-width: 225px;
     z-index: 46;
     background: white;
     display: none;
     border-radius: 10px;
}

.popupArrow {
     position: absolute;
     width: 20px;
     height: 20px;
     background: #ffffff;
     top: 28px;
     right: 36px;
     transform: skew(-65deg, -78deg);
     box-shadow: 0px 0px 5px 0px gainsboro;
}

.pop_up_row {
     height: auto;
     display: flex;
     justify-content: left;
     padding: 0.5rem;
     border-radius: 5px;
     align-items: center;
     gap: 5px;
     cursor: pointer;
}

.pop_up_menu_wraffer {
     background: #ffffff;
     display: grid;
     color: black;
     position: relative;
     width: 100%;
     padding: 1rem;
     border-radius: 10px;
}

.pop_up_row:hover {
     background: whitesmoke;
     color: #000000;
}

.pop_up_menu:hover {
     z-index: 3;
}

.gol-whitesmoke {
     /* width: 2.5rem; */
     /* height: 2.5rem; */
     /* display: flex; */
     /* justify-content: center; */
     /* align-items: center; */
     /* background: whitesmoke; */
     /* border-radius: 100%; */
}
/*--pop-up--*/

/*--raw-css--*/
*{
     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: #e1e7ef transparent;
     transition: 0.5s;
     word-break: break-word;
}

::selection {
     background: black;
     color: white;
}

.root {
     width: 100vw;
     height: 100vh;
}

.root-head {
     background: transparent;
     border-right: 0;
     /* box-shadow: 0 0 2rem 0 rgba(0, 0, 0, .05); */
     transition: margin-left .3s ease-in-out, left .3s ease-in-out, margin-right .3s ease-in-out, right .3s ease-in-out;
     z-index: 2;
     box-shadow: 0px 0px 3px 0px gainsboro;
     position: relative;
     /* border-bottom: 1px solid #00000014; */
}

.root-body {
     position: relative;
     z-index: 1;
     /* background: #f4f7fc; */
}

.root-body-menu-wrr {
     background: white;
     border-right: 0;
     /* box-shadow: 0 0 2rem 0 rgba(0, 0, 0, .05); */
     max-width: 90px;
     min-width: 90px;
     /* transition: margin-left .3s ease-in-out, left .3s ease-in-out, margin-right .3s ease-in-out, right .3s ease-in-out; */
     overflow: hidden;
     /* padding-right: 0.2rem; */
     box-shadow: 0px 0px 3px 0px gainsboro;
     /* border-right: 1px solid #00000014; */
     position: relative;
     z-index: 2;
}

.logo h1 {
     font-size: 20px;
     color: #1e9cef;
     font-weight: bold;
     background: linear-gradient(355deg, #00e2ff, #f500ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
               /* For non-WebKit browsers */
     background-clip: text;
     color: transparent;
}

.info {
     position: relative;
     display: flex;
     flex-flow: row-reverse;
     max-width: 311px;
     align-items: center;
}

span.high-light {
    font-size: 13px;
    font-weight: 500;
    color: #2196F3;
    font-family: system-ui;
    /* font-size: 20px; */
    color: #1e9cef;
    font-weight: bold;
    background: linear-gradient(355deg, #00e2ff, #f500ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

div#octDataWrr {
     font-family: system-ui;
 }

.min-menu {
    height: 100%;
    overflow: auto;
    /* box-shadow: 0px 0px 3px 0px #9E9E9E; */
    /* display: none; */
}

.root-body-content-wrr {
    width: 100%;
    height: 100%;
    background: #f4f7fc;
    /* border-top-left-radius: 1rem; */
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-flow: column;
}

.filter-row-wrr {
     position: sticky;
     top: 0;
     background: white;
     z-index: 10;
 }

 .filter-row {
     background: #b9b9b92e;
     border-radius: 10px;
     width: 100%;
     padding: 0.7rem;
     background: #f4f4ff;
     /* background: whitesmoke; */
 }

 .filter-inp-box-container input {
     border: none;
     background: none;
     outline: none;
     width: 100%;
     /* height: 100%; */
 }

 .max-menu-head-row h2 {
     font-size: 20px;
 }

 .pop_up_row icon {
     width: 20px;
 }

 icon.active {
     color: green;
 }

 .user-row:hover {
     background: whitesmoke;
     /* cursor: pointer; */
 }
 
 .user-row {
     cursor: pointer;
     border-radius: 10px;
     padding: 0.3rem;
     position: relative;
 }

 .user-img-box {
     overflow: hidden;
     width: 3.1rem;
     height: 3.1rem;
     position: relative;
 }

 .user-img-box img {
     width: 100%;
     height: 100%;
     /* border-radius: 100%; */
     border-radius: 10%;
 }

 .online-indicator {
     position: absolute;
     width: 0.9rem;
     height: 0.9rem;
     background: green;
     bottom: 1px;
     right: 1px;
     border-radius: 100%;
  }

  .msg-sent-time-stamp {
     font-size: 12px;
     color: #9E9E9E;
  }

.search-able-data {
    font-size: 13px;
}

.newDataNumVisulizer {
     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;
 }
/*--raw-css--*/

/*--single-chat-css--*/
.single-chat-wrr {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
}

.msg-index-box {
     /* border-radius: 0.5rem 0.5rem 0rem 0rem; */
     /* border-radius: 0.5rem; */
     overflow: hidden;
     width: 100%;
     height: 100%;
     display: flex;
     flex-flow: column;
     background: white;
 }

 .msg-index-head {
     border-bottom: 1px solid #00000014;
     /* background: #002994; */
     /* color: white; */
     /* cursor: move; */
 }

 .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-wrr {
     width: 100%;
     border-top: 1px solid #00000014;
     justify-content: space-between;
 }
 .sml-box-grp {
     min-width: 25px;
     cursor: pointer;
 }

 .msg-input-attace-file-box {
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .msg-input-attace-file-box input[type="file"] {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     cursor: pointer;
 }

 .msg-input-text-box {
     width: 100%;
 }

 .msg-input-text-box input {
     border: 0;
     background: none;
     outline: none;
     width: 100%;
 }

 .append-box-img {
     width: 2rem;
     height: 2rem;
     min-width: 2rem;
     min-height: 2rem;
 }

 .outgoing-row .msg-data-wrr {
     background: #2196f3;
     color: white;
 }
 .msg-data-wrr {
     background: whitesmoke;
     padding: 1rem;
     border-radius: 0.5rem;
     gap: 0.2rem;
     max-width: 700px;
     width: 100%;
 }

 .msg-data-view-box {
     overflow: auto;
 }

 .outgoing-row {
     flex-flow: row-reverse;
     padding-left: 50px;
 }

.incoming-row {
    padding-right: 50px;
}

.msg-data-wrr .msg-sent-time-stamp {
     display: flex;
     justify-content: right;
}

.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;
 }

div#maxMenu {
    display: none;
}

.notification-box .popupMenuPad {
     min-width: 280px;
     right: -30px;
 }
 
 .notification-box .popupArrow {
     right: 65px;
 }

 .new-massage-box .popupMenuPad {
     min-width: 280px;
 }

 .text-dark {
     font-weight: 500;
     color: #000000;
     font-size: smaller;
 }

.text-muted {
    margin: 5px 0;
    font-size: 12px;
}

.view-all-btn {
     color: black;
     padding: 0.6rem 2rem;
     border: 1px solid gainsboro;
     border-radius: 6rem;
     margin-top: 10px;
 }
 
 .view-all-btn:hover {
     background: whitesmoke;
 }

 .pop-up-body {
     max-height: 50vh;
     overflow: auto;
 }

 .start-up-msg-wrr img {
     max-width: 300px;
 }

 .start-up-msg-wrr .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 div#mocBtn {
    font-size: 20px;
    color: #b738ff;
    font-weight: bold;
    background: linear-gradient(355deg, #00e2ff, #f500ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* color: transparent; */
}

.multiple-msg-box {
    /* max-width: 350px; */
    /* max-height: 400px; */
    border: 1px solid #00000014;
    height: auto;
    /* box-shadow: 0px 0px 3px 0px gainsboro; */
}

div#multipleChatWindow {
    padding: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    grid-row-gap: 10px;
    max-height: 100%;
    align-items: flex-start;
    grid-column-gap: 10px;
    display: none;
}

 div#multipleChatWindow > div {
     box-sizing: border-box;
     /* border: 1px solid #000; */ /* Optional: to visually see the div boundaries */
     flex: 1 1 32.33%;
   }

   .full-height {
     height: 100%;
   }

   .half-height {
     height: 50%;
   }

.single-msg-box {
    border-radius: 0;
    /* background: #673ab708; */
}

div#octBtn {
    color: #b738ff;
}

.msg-input-emogi-box .popupMenuPad {
     bottom: 35px!important;
     top: unset!important;
     right: -20px!important;
 }

.msg-input-emogi-box .popupArrow {
    bottom: 28px!important;
    right: 36px!important;
    transform: skew(65deg, -78deg)!important;
    top: unset!important;
    background: #ffffff !important;
}

.msg-input-emogi-box .pop_up_menu_wraffer {
    background: #ffffff !important;
}

.emogi-popupMenuPad {
     bottom: 35px!important;
     top: unset!important;
     right: -20px!important;
 }

.emogi-popupArrow {
    bottom: 28px!important;
    right: 36px!important;
    transform: skew(65deg, -78deg)!important;
    top: unset!important;
    background: #ffffff !important;
}

.emogi-pop_up_menu_wraffer {
    background: #ffffff !important;
}

.max-menu-tab-buttons-row h3 {
    font-size: 15px;
    /* background: linear-gradient(15deg, #00e2ff, #f500ff); */
    padding: 0.7rem 0;
    border-radius: 0.3rem;
    /* color: black; */
    cursor: pointer;
    font-family: system-ui;
    font-weight: bold;
}

.max-menu-tab-buttons-row {
    border-bottom: 1px solid #00000014;
    /* margin-bottom: 1rem; */
    /* margin-top: 1rem; */
    border-top: 1px solid #00000014;
    padding: 0 1.1rem;
}

.right-col {
    opacity: 0;
    position: absolute;
    right: 0;
    height: 50px;
    /* backdrop-filter: blur(5px); */
    background: whitesmoke;
    padding: 0 1rem;
}

.msg-index-body-row.user-row:hover .right-col {
    opacity: 1;
}

.max-menu-tab-buttons-row .active {
    /* color: green; */
    border-bottom: 3px solid #f500ff;
    padding: 0 1rem;
    font-size: 20px;
    color: #1e9cef;
    font-weight: bold;
    background: linear-gradient(54deg, #00e2ff, #f500ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.max-menu-tab-buttons-row .flex {
    padding: 0 1.1rem;
}

.max-menu-wrr {
     scrollbar-width: thin;
     scrollbar-color: #e1e7ef00 transparent;
}

.min-menu-wrr {
     scrollbar-width: thin;
     scrollbar-color: #e1e7ef00 transparent;
}

 .max-menu-wrr:hover {
     scrollbar-width: thin;
     scrollbar-color: #e1e7ef transparent;
 }

.min-menu-wrr:hover {
     scrollbar-width: thin;
     scrollbar-color: #e1e7ef transparent;
 }

 details {
     padding: 0.7rem;
     /* background: #ff572214; */
     border-radius: 0.5rem;
     /* border: 1px solid #00000014; */
     /* background: linear-gradient(189deg, #44a3ff21, #dac3ff21, #c7ffff45); */
 }
 
 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;
     /* background: linear-gradient(54deg, #00e2ff3b, #f500ff42); */
     /* box-shadow: 0px 0px 3px 0px gainsboro; */
     border-radius: 5px;
     cursor: pointer;
     color: black;
     /* width: 200px; */
     font-size: 15px;
     font-weight: bold;
     background: #2196F3;
     color: white;
     margin-bottom: 10px;
     text-align: center;
     justify-content: center;
     /* border: 1px solid; */
 }

 .pop-up-window {
     position: fixed;
     z-index: 100;
     width: 100vw;
     height: 100vh;
     background: #00000042;
     display: flex;
     padding: 1rem;
     display: none;
 }
 
 .ppw-wrr {
     display: flex;
     flex-flow: column;
     margin: auto;
     background: white;
     padding: 2rem;
     width: 100%;
     max-width: 500px;
     border-radius: 1rem;
 }

 .ppw-body input[type="tel"] {
     padding: 1.3rem;
     border: 1px solid gainsboro;
     border-radius: 5px;
     width: 100%;
 }
 
 .ppw-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;
     /* text-transform: uppercase; */
 }

 .container > div {
     box-sizing: border-box;
     border: 1px solid #000; /* Optional: to visually see the div boundaries */
     flex: 1 1 33.33%;
   }

   .full-height {
     height: 100%;
   }

   .half-height {
     height: 50%;
   }

   button.btn {
     background: gainsboro;
     border: none;
     padding: 0.5rem 1rem;
     cursor: pointer;
     border-radius: 0.2rem;
     /* font-size: 15px; */
 }
 
 button.btn.acceft {
     background: #2196F3;
     color: white;
 }
 
 button.btn.reject {
     background: gainsboro;
     color: black;
 }

.new-request-btn-row {
    margin-top: 0.3rem;
}

/*------------new-----------------*/
div#pinpChatWindow {
    width: 100%;
    height: 70px;
    position: relative;
    display: flex;
    justify-content: right;
    /* padding: 1rem; */
    /* gap: 1rem; */
    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 #9E9E9E;
}