isometrik-chat 2.9.9 → 3.0.0

package/build/index.css

@@ -0,0 +1,1926 @@
+.isoChat {
+  margin: 0;
+  font-family: Segoe UI, Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu,
+    Cantarell, Fira Sans, sans-serif;
+  font-feature-settings: "kern";
+}
+
+.light-theme {
+  --shadow-rgb: 11, 20, 26;
+  --chat-msg-text: #667781;
+  --profile-header: #F53872;
+  --black: #111b21;
+  --iso_loader: #111b21;
+  --bg-white: #f5f6f6;
+  --primary-white: #fff;
+  --gray_color: #ededed;
+  --icon_color: #54656f;
+  --iso_white: #f5f6f6;
+  --border_color: #e9edef;
+  --chat_hover: #ebebeb;
+  --sender_chatbg: #d9fdd3;
+  --chat_timing: #667781;
+  --input_bg: #fff;
+  --profile_bg: #ededed;
+  --contact-profile-bg: #ededed;
+  --profile-name: #F53872;
+  --profile-color: #F53872;
+  --danger: red;
+  --contact-media-text: #fff;
+  --button-primary-background: #00a884;
+  --modal_color: #fff;
+  --encrypted_color: rgb(0, 0, 0);
+  --photopicker_overlay_background: rgba(84, 101, 111, 0.8);
+  --modal-backdrop: hsla(0, 0%, 100%, 0.85);
+  --toast-background: #0b141a;
+  --modal-backDrop: hsla(0, 0%, 100%, 0.85);
+  --chat-info-drawer-media-background: #f0f2f5;
+  --chat-info-background: linear-gradient(15deg, rgba(var(--overlay-rgb), 0), rgba(var(--overlay-rgb), 0) 45%, rgba(var(--overlay-rgb), .12) 70%, rgba(var(--overlay-rgb), .33));
+  --intro-background: #f0f2f5;
+  --reply-background-color: #d1f4cc;
+  --reply-pannel-background: rgba(11, 20, 26, 0.05);
+  --audio-control-outgoing: #6f8171;
+  --toaster-success-bgcolor: #2E7D32;
+  --toaster-error-bgcolor: #D32F2F;
+  background-color: var(--primary-white);
+}
+
+.dark-theme {
+  --shadow-rgb: 11, 20, 26;
+  --chat-msg-text: #667781;
+  --profile-header: #202c33;
+  --black: #fff;
+  --iso_loader: #fff;
+  --bg-white: #111b21;
+  --primary-white: #111b21;
+  --gray_color: #202c33;
+  --icon_color: #aebac1;
+  --iso_white: #111b21;
+  --border_color: #2a3942;
+  --chat_hover: #202c33;
+  --sender_chatbg: #005c4b;
+  --chat_timing: hsla(0, 0%, 100%, 0.6);
+  --input_bg: #2a3942;
+  --profile_bg: #111b21;
+  --contact-profile-bg: black;
+  --profile-name: #008069;
+  --profile-color: #F53872;
+  --danger: #f15c6d;
+  --contact-media-text: #fff;
+  --button-primary-background: #00a884;
+  --modal_color: #202c33;
+  --encrypted_color: rgb(250, 217, 100);
+  --photopicker_overlay_background: rgba(84, 101, 111, 0.8);
+  --modal-backdrop: rgba(11, 20, 26, 0.85);
+  --intro-background: #222e35;
+  --toast-background: #0b141a;
+  --modal-backDrop: rgba(11, 20, 26, 0.85);
+  --chat-info-drawer-media-background: rgb(42, 57, 66);
+  --chat-info-background: linear-gradient(15deg, rgba(var(--overlay-rgb), 0), rgba(var(--overlay-rgb), 0) 45%, rgba(var(--overlay-rgb), .12) 70%, rgba(var(--overlay-rgb), .33));
+  --reply-background-color: #025144;
+  --reply-pannel-background: rgba(11, 20, 26, 0.05);
+  --audio-control-outgoing: #d1d7db;
+  --toaster-success-bgcolor: #2E7D32;
+  --toaster-error-bgcolor: #D32F2F;
+  background-color: var(--primary-white);
+}
+
+.isoChat .icons {
+  height: 24px;
+  width: 24px;
+  color: var(--icon_color);
+  cursor: pointer;
+}
+
+.isoChat .darkicons {
+  height: 20px;
+  width: 20px;
+  color: var(--icon_color);
+  filter: invert(1);
+  cursor: pointer;
+}
+
+.isoChat .lighticons {
+  height: 20px;
+  width: 20px;
+  color: var(--icon_color);
+  filter: opacity(0.5);
+  cursor: pointer;
+}
+
+.isoChat .light_footer_icons {
+  margin-left: 10px;
+  height: 22px;
+  color: var(--icon_color);
+  cursor: pointer;
+
+}
+
+.isoChat .MuiDrawer-paper {
+  background-color: var(--primary-white) !important;
+}
+
+.isoChat .MuiPaper-root {
+  background-color: var(--primary-white) !important;
+}
+
+.isoChat .dark_footer_icons {
+  margin-left: 10px;
+  height: 22px;
+  width: auto;
+  color: var(--icon_color);
+  filter: invert(1);
+  cursor: pointer;
+
+}
+
+.isoChat .grpicons {
+  height: 28px;
+  width: 28px;
+  color: var(--icon_color);
+  cursor: pointer;
+}
+
+.isoChat .user_image {
+  height: 41px;
+  width: 41px;
+  border-radius: 25px;
+}
+
+.isoChat .userContact_image {
+  height: 49px;
+  width: 49px;
+  flex: 0 0 auto;
+  border-radius: 25px;
+  font-size: xx-large;
+  color: var(--black);
+  background-color: var(--icon_color);
+  margin: 10px;
+}
+
+.isoChat .text_Color {
+  color: var(--chat-msg-text);
+}
+
+.isoChat .icons {
+  color: var(--icon_color);
+}
+
+.isoChat .pointer {
+  cursor: pointer;
+}
+
+.isoChat .margin {
+  margin-left: 7px;
+}
+
+.isoChat .header {
+  /* position: fixed; */
+  z-index: 2;
+  top: 0px;
+}
+
+.isoChat .msgFont {
+  font-size: 14px;
+}
+
+.isoChat .sidebar_search-container {
+  padding: 5px 5px 5px 10px;
+}
+
+.isoChat .sidebar_search-container span img {
+  padding: 2px;
+}
+
+/* .isoChat .truncate { */
+/* width: 25vw !important; */
+/* white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; */
+/* } */
+
+.isoChat .sliderContainer {
+  background-color: var(--iso_white);
+}
+
+.isoChat .textColor {
+  color: var(--black)
+}
+
+.isoChat .border_color {
+  border-color: var(--border_color);
+}
+
+.isoChat .border_bottom {
+  border-bottom: 1px solid var(--border_color);
+}
+
+.isoChat .searchContainer {
+  background-color: var(--primary-white);
+}
+
+.isoChat .disable_UI {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+.isoChat .absolute {
+  position: absolute;
+}
+
+.isoChat .objCover {
+  object-fit: cover;
+}
+
+.isoChat .objContain {
+  object-fit: contain;
+}
+
+.isoChat .userProfileContainer {
+  margin: 0px 10px 0px 10px;
+  width: 49px;
+}
+
+.isoChat .user-image {
+  height: 49px;
+  width: 49px;
+  border-radius: 50%;
+}
+
+.isoChat .sideBarFix {
+  position: fixed;
+  right: 0;
+  top: 0
+}
+
+.isoChat .activeMsg {
+  position: relative;
+  background-color: var(--button-primary-background) !important;
+}
+.isoChat .user_Info {
+    display: flex;
+    align-items: center;
+    /* padding: 10px 15px; */
+    position: relative;
+}
+
+.isoChat .user_Info:hover .arrow {
+    display: block !important;
+    padding-left:.7vw;
+    margin-top: -10px;
+    
+}
+/* .arrow{
+    display: none;
+} */
+/* .arrow .text_Color{
+    margin-bottom: 30px;
+} */
+
+.isoChat .user_Info:hover {
+    cursor: pointer;
+    background-color:var(--chat_hover)
+}
+.isoChat .user_Info .user_Item {
+    margin-left: 15px;
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 13px;
+    border-bottom: 1px solid var(--border_color);
+    align-items: center
+}
+
+.isoChat .css-1poimk-MuiPaper-root-MuiMenu-paper-MuiPaper-root-MuiPopover-paper{
+    box-shadow: none !important;
+}
+
+.isoChat .user_Item .user_Div {
+    display: block;
+}
+
+.isoChat .user_Div .user_Name {
+    margin-bottom: 0px;
+    color:var(--black);
+}
+
+.isoChat .user_Div .user_Message {
+    margin-bottom: 0px;
+    margin-right: 25px;
+
+}
+
+.isoChat .user_Item .message_Time {
+
+    font-size: 12px;
+    max-height: 18px;
+
+}
+
+.isoChat .modal-backdrop {
+    background-color: transparent !important;
+}
+
+
+.isoChat .modal-content {
+    width: 0% !important;
+    padding-left: 0px !important;
+    padding: 0px !important;
+    top: 100px !important;
+    left: -100px !important;
+}
+
+.isoChat .modal-header {
+    padding: 0px !important;
+    margin: 0px !important;
+    width: 0px !important;
+    height: 0px !important
+}
+
+.isoChat .modal-dialog {
+    width: 32% !important;
+    border: none !important;
+    outline: none !important;
+}
+
+
+.isoChat .css-pwyk3z-MuiBadge-badge{
+    z-index: 0 !important;
+
+}
+
+.isoChat .css-1p3d99h{
+    z-index: 0 !important;
+}
+
+.isoChat .sidebarChat{
+    height: 85vh;
+    overflow: auto;
+    position: relative;
+}
+.menuBox p {
+    margin: 0;
+    line-height: 2.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14.5px;
+    color: var(--primary);
+    padding-right: 58px !important;
+    white-space: nowrap;
+}
+.menuBox {
+  padding: 0 2rem;
+}
+
+.menu p:hover {
+  background-color: var(--iso_white);
+}
+
+.menu{
+  z-index: 999;
+  width:100%;
+  
+
+  box-shadow:none !important
+}
+.sidebar_header {
+  justify-content: space-between;
+  padding: 13px;
+  background-color:var(--gray_color);
+  border-right: 1px solid var(--border_color);
+  align-items: center;
+}
+
+.sidebar {
+  max-width: 30%;
+  flex: 1 1 30%;
+  background-color:var(--iso_white);
+}
+
+.sidebar .bgWhite{
+  background-color: var(--primary-white);
+}
+
+.sidebar .sidebar_header .sliderr {
+  height: 100vh;
+  width: 35vw;
+  position: absolute;
+  z-index: 1;
+  top: 0px;
+  left: 0px;
+  overflow-x: hidden;
+  transition: 0.2s;
+  overflow: auto;
+}
+
+.sidebar .sidebar_header .slider {
+  height: 100vh;
+  width: 0px;
+  position: fixed;
+  z-index: 1;
+  top: 0px;
+  left: 0px;
+  overflow-x: hidden;
+  transition: 0.2s;
+  overflow: auto;
+}
+
+.sidebar-search {
+  position: sticky;
+  top: 0;
+  padding: 10px;
+  text-align: center;
+  align-items: center;
+}
+
+.sidebar-right {
+  width: 40%;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.sidebar-input {
+  position: relative;
+  padding-left: 15px !important;
+  font-size: 15px;
+  border: none;
+  outline: none;
+  background: none;
+  color: var(--black);
+}
+
+.sidebar_search-container svg {
+  color: #54656f;
+  margin-left: 12px;
+}
+
+.chat {
+  flex-direction: column;
+  padding: 0;
+  background-color: var(--primary-white);
+}
+
+.isoChat *::-webkit-scrollbar-thumb {
+  background-color: #e9ecef;
+}
+
+.isoChat *::-webkit-scrollbar-track {
+  background: var(--iso_white) !important;
+}
+
+.isoChat *::-webkit-scrollbar {
+  width: 6px !important;
+  height: 6px !important;
+}
+
+.isoChat .sidebar *::-webkit-scrollbar-thumb {
+  background:var(--gray_color)
+}
+
+.css-1t1j96h-MuiPaper-root-MuiDialog-paper {
+  margin: 0px !important;
+  padding: 0px !important;
+}
+
+.css-hz1bth-MuiDialog-container {
+  height: auto !important;
+}
+
+.css-uhb5lp {
+  margin: 0px !important;
+}
+
+.css-ekeie0 {
+  height: none !important;
+}
+
+.css-ekeie0 {
+  height: auto !important;
+}
+
+.css-1t1j96h-MuiPaper-root-MuiDialog-paper {
+  border-radius: 0px !important;
+}
+
+.sidebar_header .user_image {
+  cursor: pointer;
+}
+
+.filter {
+  height: 20px !important;
+  width: 20px !important;
+}
+
+.sidebar-search .searchBox {
+  display: flex;
+  background-color: var(--gray_color);
+  flex: 1;
+  border-radius: 10px;
+  width: 100%;
+  position: relative;
+}
+
+@media (max-width: 768px) {
+  .sidebar{
+    max-width: 100vw;
+  }
+}
+.profile .profile_image {
+  width: 200px !important;
+  height: 200px !important;
+}
+
+.statuss .status {
+  border-bottom: 2px solid #00a884;
+}
+
+.profile_name .statusField {
+  padding: 10px;
+  border: "3px solid";
+}
+
+.newGroup {
+  background-color: var(--gray_color);
+  height: 100vh;
+  position: absolute;
+  top: -41px !important;
+  left: -170px !important;
+  width: 30.5vw !important;
+  overflow-y: auto;
+}
+
+.mystatus span img {
+  height: 45px;
+  width: 46px;
+  border-radius: 20px;
+}
+
+.mystatus span {
+  /* width: 60px; */
+  padding-left: 16px;
+}
+
+.mystatus {
+  margin-top: 20px;
+  padding-bottom: 30px;
+  border-bottom: 1px solid rgb(175, 174, 174);
+}
+
+.profile_Container {
+  background-color: var(--iso_white);
+  height: 100vh;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 30vw;
+  overflow-y: auto;
+}
+
+.newgroupSlider input,
+.communitySlider input {
+  margin-top: 30px;
+  outline: none;
+  margin-left: 34px;
+  width: 85%;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 1px solid lightgray;
+  padding-top: 2px;
+}
+
+.description {
+  height: 20vh;
+  margin-bottom: 10px;
+}
+.communitySlider input {
+  margin-top: 50px !important;
+}
+
+.profile_Container .messageChat {
+  left: 0px;
+  /* margin-top: 110px; */
+  /* margin-bottom: 10px; */
+  position: relative;
+}
+
+.profile_Container .messageChat .bg-white span {
+  padding: 10px;
+  background: #00a884;
+  border-radius: 50px;
+}
+
+.profile_Container .messageChat .bg-white {
+  padding-left: 15px;
+}
+
+.profile_Container .message span {
+  padding: 10px;
+  background: #00a884;
+  border-radius: 50px;
+  /* background: #00a884/; */
+}
+
+.profile_Container .message {
+  padding-left: 15px;
+}
+
+.profile_Div{
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 999;
+}
+
+.profile_Contaner .profile_Div {
+  width: 100vw;
+}
+
+.profile_Div .profile_header {
+  height: 108px;
+  padding-left: 20px;
+  padding-top: 67px;
+  padding-right: 23px;
+  background-color: var(--profile-header);
+  display: flex;
+  width: 30vw;
+  color: white;
+}
+
+.profile_header .profile_arrowIcon {
+  cursor: pointer;
+  color: white;
+}
+
+.profile_header h {
+  color: white;
+  margin-left: 40px;
+  font-size: 18px;
+}
+
+.profile_Container .profile-avatar {
+  display: flex;
+  justify-content: center;
+  margin-top: 140px;
+  margin-bottom: 28px;
+  /* margin-top: 25px; */
+  position: relative;
+}
+
+.profile_Container .proAvatar {
+  animation: showMe 0.75s;
+  animation-iteration-count: 1;
+}
+
+.profile_Container {
+  animation: showMe 0.75s;
+  animation-iteration-count: 1;
+  position: relative;
+}
+
+.profile_Container .groupChat {
+  left: 0px;
+  margin-top: 110px;
+  margin-bottom: 10px;
+  position: relative;
+  border-bottom: 1px solid var(--border_color);
+}
+
+.profile_Container .groupChat div {
+  padding-left: 15px;
+}
+.profile_header_text{
+  font-size:18px;
+  margin-left:15px;
+
+}
+
+.profile_Container .groupChat div span {
+  padding: 10px;
+  background: #00a884;
+  border-radius: 50px;
+}
+
+.profile-avatar img,
+.newCommunity input {
+  width: 200px;
+  height: 200px;
+  border-radius: 100px;
+}
+
+.newCommunity input {
+  border-radius: 55px !important;
+  background-color: rgba(84, 101, 111, 0.8) !important;
+  border: none !important;
+}
+
+.profile_Container .profile_name {
+  height: 100px;
+  /* background-color: var(--iso_white); */
+  background-color: var(--primary-white);
+  padding: 0px 0px 0px 28px;
+  line-height: 0.1px;
+}
+
+.profile_name p {
+  color: var(--profile-name);
+  font-size: 14px;
+  position: relative;
+  top: 10px;
+  padding-top: 10px;
+}
+
+/* ATBBeHwyQE8vRCGfvgJjj24kqnxP3891D213 */
+
+.profile_name .user_input_text {
+  display: flex;
+  justify-content: space-between;
+}
+
+.profile_name div input {
+  border: none;
+  outline: none;
+  width: 100%;
+  background: none;
+  padding-top: 10px;
+  color: var(--black);
+  padding-right:15px
+}
+
+.profile_name div .emoji_Icon {
+  display: flex;
+  align-items: center;
+  position: relative;
+  top: 8px;
+  /* right: 25px; */
+}
+
+.profile_name div .edit_Icon {
+  position: relative;
+  /* right: 30px; */
+  top: 8px;
+}
+
+.profile_Container .profile_bio {
+  margin-left: 20px;
+  margin-right: 30px;
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 18px;
+  margin-bottom: 28px;
+  color: var(--chat-msg-text);
+}
+
+.profile_name div .userStatus_emoji {
+  display: flex;
+  position: relative;
+  top: 8px;
+  /* right: 50px; */
+}
+
+@keyframes showMe {
+  0% {
+    transform: scale(0, 0);
+  }
+
+  80% {
+    transform: scale(0, 0);
+  }
+
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+.profile_Container .profile_body {
+  position: relative;
+  overflow-y: auto;
+}
+
+.profile_name .inputField {
+  border-bottom: 2px solid lightgray;
+  border-color: var(--profile-color);
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+
+  30% {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+.newCommunity {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+}
+
+.newCommunity img {
+  border-radius: 44px !important;
+}
+
+.chat_container{
+  height: calc(100vh);
+  overflow: scroll;
+}
+.profile__header__text{
+  margin-left: 2rem;
+  color:white
+}
+
+#allMessages{
+    padding: 0 15px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex: 1 1;
+    position: relative;
+}
+
+.no_result_text{
+  text-align: center;
+  padding: 4.5rem 3rem;
+  color: var(--black);
+}
+
+.profile_picture_uploader{
+  display: none
+}
+
+.profile_pic_container:hover .profile_picture_uploader{
+    display: flex;
+}
+
+.custom_padding_left{
+  padding-left: 1rem;
+}
+
+.custom_padding_bottom{
+  padding-bottom: 1rem;
+}
+
+.custom_padding_top{
+  padding-top: 1rem;
+}
+
+
+.input_maxlength_checker {
+  margin-bottom: 0;
+  top: 0 !important;
+  padding-top:  0 !important;
+  margin-right: 10px;
+}
+
+.input_maxlength_status_checker{
+  padding-top:  0 !important;
+  margin-right: 5px;
+}
+
+.danger__text{
+  color: var(--danger) !important;
+}
+
+@media (max-width: 420px) {
+    .chat_container{
+      height: calc(100vh - 60px);
+    }  
+}
+.sidebar-search {
+  position: sticky;
+  top: 0;
+  padding: 8px 10px;
+  max-height: 50px;
+  text-align: center;
+  background-color: var(--primary-white);
+  align-items: center;
+}
+
+.msg-search {
+  /* position: fixed;
+    z-index: 2; */
+}
+
+.sidebar-search .searchBox {
+  display: flex;
+  background-color:var(--gray_color);
+  flex: 1;
+  border-radius: 10px;
+  height: 35px;
+  position: relative;
+}
+.sidebar-search .searchBox .close_icon {
+padding:2px;
+vertical-align:-webkit-baseline-middle;
+
+
+}
+
+
+.sidebar_search-container svg {
+  color: #54656f;
+  margin-left: 12px;
+  margin-top: 6px;
+}
+
+.sidebar-input {
+  position: relative;
+  padding-left: 15px !important;
+  padding-right: 15px !important;
+  font-size: 15px;
+  border: none;
+  outline: none;
+  background: none;
+  width: 23vw;
+}
+
+
+.filterIcon {
+  margin-top: 15px;
+  margin-right:10px;
+}
+
+/*!
+ * Cropper.js v1.6.0
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2023-08-26T08:14:25.104Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+      touch-action: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.cropper-container img {
+    backface-visibility: hidden;
+    display: block;
+    height: 100%;
+    image-orientation: 0deg;
+    max-height: none !important;
+    max-width: none !important;
+    min-height: 0 !important;
+    min-width: 0 !important;
+    width: 100%;
+  }
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 75%);
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+    border-bottom-width: 1px;
+    border-top-width: 1px;
+    height: calc(100% / 3);
+    left: 0;
+    top: calc(100% / 3);
+    width: 100%;
+  }
+
+.cropper-dashed.dashed-v {
+    border-left-width: 1px;
+    border-right-width: 1px;
+    height: 100%;
+    left: calc(100% / 3);
+    top: 0;
+    width: calc(100% / 3);
+  }
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: 0.75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center::before,
+  .cropper-center::after {
+    background-color: #eee;
+    content: " ";
+    display: block;
+    position: absolute;
+  }
+
+.cropper-center::before {
+    height: 1px;
+    left: -3px;
+    top: 0;
+    width: 7px;
+  }
+
+.cropper-center::after {
+    height: 7px;
+    left: 0;
+    top: -3px;
+    width: 1px;
+  }
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: 0.1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+    cursor: ew-resize;
+    right: -3px;
+    top: 0;
+    width: 5px;
+  }
+
+.cropper-line.line-n {
+    cursor: ns-resize;
+    height: 5px;
+    left: 0;
+    top: -3px;
+  }
+
+.cropper-line.line-w {
+    cursor: ew-resize;
+    left: -3px;
+    top: 0;
+    width: 5px;
+  }
+
+.cropper-line.line-s {
+    bottom: -3px;
+    cursor: ns-resize;
+    height: 5px;
+    left: 0;
+  }
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: 0.75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+    cursor: ew-resize;
+    margin-top: -3px;
+    right: -3px;
+    top: 50%;
+  }
+
+.cropper-point.point-n {
+    cursor: ns-resize;
+    left: 50%;
+    margin-left: -3px;
+    top: -3px;
+  }
+
+.cropper-point.point-w {
+    cursor: ew-resize;
+    left: -3px;
+    margin-top: -3px;
+    top: 50%;
+  }
+
+.cropper-point.point-s {
+    bottom: -3px;
+    cursor: s-resize;
+    left: 50%;
+    margin-left: -3px;
+  }
+
+.cropper-point.point-ne {
+    cursor: nesw-resize;
+    right: -3px;
+    top: -3px;
+  }
+
+.cropper-point.point-nw {
+    cursor: nwse-resize;
+    left: -3px;
+    top: -3px;
+  }
+
+.cropper-point.point-sw {
+    bottom: -3px;
+    cursor: nesw-resize;
+    left: -3px;
+  }
+
+.cropper-point.point-se {
+    bottom: -3px;
+    cursor: nwse-resize;
+    height: 20px;
+    opacity: 1;
+    right: -3px;
+    width: 20px;
+  }
+
+@media (min-width: 768px) {
+
+.cropper-point.point-se {
+      height: 15px;
+      width: 15px;
+  }
+    }
+
+@media (min-width: 992px) {
+
+.cropper-point.point-se {
+      height: 10px;
+      width: 10px;
+  }
+    }
+
+@media (min-width: 1200px) {
+
+.cropper-point.point-se {
+      height: 5px;
+      opacity: 0.75;
+      width: 5px;
+  }
+    }
+
+.cropper-point.point-se::before {
+    background-color: #39f;
+    bottom: -50%;
+    content: " ";
+    display: block;
+    height: 200%;
+    opacity: 0;
+    position: absolute;
+    right: -50%;
+    width: 200%;
+  }
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}
+
+.chatbox_body {
+  overflow-y: auto;
+  padding: 30px;
+}
+
+.chatbox_body .chat_message {
+  padding: 6px 7px 8px 9px;
+  background-color: var(--gray_color);
+  font-size: 16px;
+  width: fit-content;
+  border-radius: 5px;
+  margin-bottom: 2px;
+  color:var(--black)
+}
+
+
+.chatbox_body .chat_message_recive {
+  padding: 6px 7px 8px 9px;
+  background-color: var(--gray_color);
+  font-size: 16px;
+  width: fit-content;
+  border-radius: 5px;
+  margin-bottom: 2px;
+  color:var(--black)
+}
+
+.chatbox_body .chat_message:hover{
+  cursor: pointer;
+  background-color:var(--chat_hover)
+
+}
+
+.chatbox_body .chat_message_recive:hover{
+  cursor: pointer;
+  background-color:var(--chat_hover)
+
+}
+
+.chatbox_body .chat_message:hover .arrow{
+  display: block !important;
+}
+
+.chatbox_body .chat_message_recive:hover .arrow{
+  display: block !important;
+}
+
+.css-tlc64q-MuiPaper-root-MuiDialog-paper{
+  max-width: 315px !important;
+}
+
+.chatbox_body .chatText:hover .emoji{
+  display: block !important;
+}
+
+.MuiDialog-container{
+  justify-content: none !important;
+  background-color: none !important;
+}
+
+.chatbox_body .chatText .emoji{
+  color:var(--icon_color);
+  background-color: var(--contact-profile-bg);
+  border-radius: 20px;
+
+}
+
+.emoji_header span{
+  font-size: x-large;
+  padding: 6px 5px 5px 6px;
+  cursor: pointer;
+}
+
+.emoji_header{
+  /* transform: translateY(100px);
+    transition: 0.2s; */
+}
+
+.MuiPaper-root-MuiDialog-paper{
+  background-color: none !important;
+}
+
+.MuiDialog-paper{
+  background-color: none !important;
+}
+
+.chatbox_body .chat_message .arrow{
+  position: absolute;
+    left: 28px;
+    top: -18px;
+    background: var(--chat_hover);
+    display: flex;
+    align-content: end;
+    text-align: end;
+
+}
+
+.chatbox_body .chat_message .emoji_gif{
+  position: absolute;
+  left: 35px;
+  top: 15px;
+  background: var(--chat_hover);
+  display: flex;
+  align-content: end;
+  text-align: end;
+  border-radius: 15px;
+  /* width: 22px;
+  height: 20px; */
+  font-size: large;
+}
+
+.chatbox_body .chat_message .emoji{
+  position: absolute;
+    left: 152px;
+    top: 6px;
+    /* background: var(--chat_hover); */
+    display: flex;
+    align-content: end;
+    text-align: end;
+
+}
+
+.css-tlc64q-MuiPaper-root-MuiDialog-paper{
+  background-color: none !important;
+}
+
+
+
+.chat_name {
+  position: absolute;
+  top: -20px;
+  font-weight: bolder;
+}
+
+form .footerChat {
+  display: flex;
+  padding: 7px 16px;
+  align-items: center;
+  background-color:var(--gray_color);
+  bottom: 0px;
+  width: 100%;
+}
+
+form .footer {
+  width: 52%;
+  position: relative;
+  display: flex;
+  padding-top: 8px 0px;
+  align-items: center;
+  background-color: #ebebeb;
+}
+
+.css-yiavyu-MuiBackdrop-root-MuiDialog-backdrop{
+  background-color: hsla(0,0%,100%,0.85) !important;
+}
+
+.css-1t1j96h-MuiPaper-root-MuiDialog-paper{
+  width:33% !important;
+}
+
+.css-hz1bth-MuiDialog-container{
+padding:10px 0px 0px 0px ;
+}
+
+/* font-size: 0.6875rem;
+    position: relative;
+    top: 13px;
+    padding: 0px 4px;
+    left: 2px;
+    color: var(--chat_timing); */
+.chat_time {
+  font-size: 0.6875rem;
+  position: relative;
+  top: 13px;
+  padding: 0px 4px;
+  left: 2px;
+  color:var(--chat_timing)
+}
+
+.chat_recive {
+  margin-left: auto;
+  background-color: var(--sender_chatbg) !important;
+}
+
+.chat_recive .arrow{
+  position: absolute;
+    left: 28px;
+    top: -18px;
+    background: var(--sender_chatbg) !important;
+    display: flex;
+    align-content: end;
+    text-align: end;
+}
+
+/* .chat_recive :hover{
+  cursor: pointer;
+  background-color:var(--sender_chatbg)
+
+} */
+
+.chat_footer form {
+  flex: 1;
+}
+
+.chat_footer textarea {
+  width: 100%;
+  /* padding: 9px 11px 12px; */
+  margin: 2px 5px;
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  color: var(--black);
+  background-color: var(--input_bg);
+  margin-left: 10px;
+}
+
+
+.EmojiPickerReact {
+  height:320px !important;
+
+}
+
+.EmojiPickerReact .epr-search-container input.epr-search{
+  transition:unset !important;
+}
+
+
+.emoji-picker-react{
+  position: absolute !important;
+}
+
+
+.mainChat {
+    flex: 1;
+    flex-direction: column;
+    height: 100vh;
+
+    /* border-bottom: 1px solid; */
+}
+
+.mainChatt {
+    flex: 1;
+    flex-direction: column;
+    position: absolute;
+    width: 40%;
+    /* border-bottom: 1px solid; */
+}
+
+.mainChat .chat_header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border_color);
+    padding: 10px 10px;
+    flex: 1;
+    background-color: var(--gray_color)
+}
+
+.mainChatt .chat_Header {
+    display: flex;
+    background-color: var(--gray_color);
+    align-items: center;
+    border-bottom: 1px solid var(--border_color);
+    padding: 10px 12px;
+    flex: 1;
+    /* height: 50px; */
+}
+
+.chat_headerInfo {
+    flex: 1;
+    margin-left: 10px;
+    max-width: 50%;
+}
+
+.MuiDialog-container {
+    display: flex !important;
+    /* justify-content: flex-end !important */
+}
+
+.chat_headerInfo p {
+    color: var(--black);
+    margin-bottom: 0px
+}
+
+.chatbox_Bg {
+    height: 100%;
+
+}
+
+.chatbox_Bg img {
+    height: 100%;
+    width: 100%
+}
+
+.bg {
+
+    height: 100vh;
+    text-align: center;
+    display: block;
+    /* border: 2px solid; */
+}
+
+.bg div h1 {
+    font-size: 32px;
+    font-weight: 300px;
+    color: var(--black);
+    margin-top: 20px;
+}
+
+.bg .text {
+    font-size: 14px;
+    font-weight: 400px;
+    line-height: 20px;
+    width: 33rem;
+}
+
+.contactInfo {
+    height: 100vh;
+    width: 30vw;
+    overflow-x: hidden;
+    transition: 0.1s;
+    z-index: 999;
+}
+
+.isoChat .chatBox {
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+
+
+/* @media screen and (min-width: 1024px) and (max-width: 1300px) {
+    .contactInfo {
+        width: 70vw;
+    }
+} */
+
+.contact {
+    height: 100vh;
+    width: 0px;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    overflow-x: hidden;
+    transition: 0.1s;
+}
+
+.mainChat .chatbox_Bg {
+    background-color: #f0f2f5
+}
+
+.chatbox_Bg .footer {
+    font-size: 14px;
+    margin-top: 60px
+}
+
+.chat_header_right {
+    display: flex;
+    align-items: center;
+    flex: 1 1;
+    justify-content: flex-end;
+}
+@media (max-width: 768px) {
+    .isoChat .chat_header {
+        position: fixed;
+        width: 100%;
+        z-index: 9999;
+        top: 0;
+    }
+}
+@media (max-width: 420px) {
+    .search_icon {
+        margin: 0.8rem !important;
+    }
+}
+.contact_profile .profile_image {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    width: 200px !important;
+    height: 200px !important;
+    margin-top: 25px;
+}
+
+.contact_container {
+    max-width: 100%;
+    background-color: var(--primary-white);
+    overflow: auto;
+    height: 100vh;
+    right: 0px;
+    top: 0px
+}
+
+.contact_container .contact_header {
+    position: sticky;
+    top: 0;
+    padding: 6px 12px;
+    display: flex;
+    align-items: center;
+    background-color: var(--gray_color);
+    /* height: 62px; */
+    padding-left: 25px;
+    border-left: 1px solid var(--border_color);
+    width: 100%
+}
+
+.contact_header p {
+    color: var(--black)
+}
+
+
+.text p {
+    display: flex;
+    align-items: center;
+    padding-top: 17px;
+    padding-left: 20px;
+    padding-right: 30px;
+}
+
+.text p span {
+    margin-left: 20px;
+    font-size: 17px;
+    position: relative;
+    width: 100%;
+    color: var(--black);
+
+}
+
+
+p .btnn {
+    color: var(--danger) !important
+}
+
+.contact_container .contactp {
+    position: relative;
+}
+
+text {
+    position: relative;
+}
+
+.text p svg {
+    height: 20px;
+}
+
+.text p .svgg {
+    color: var(--danger);
+    height: 24px;
+    width: 24px;
+    position: relative;
+
+}
+
+.contact-container .text {
+
+    position: relative;
+}
+
+div .contact_status {
+    position: relative;
+}
+
+div .contactsocialInfo {
+    position: relative;
+}
+
+.contact_container .textt {
+    position: relative;
+}
+
+.contact_status .bio {
+    color: var(--black);
+
+}
+
+.contact_container .textt {
+    background-color: var(--primary-white);
+    padding-left: 15px;
+    margin-top: 10px;
+    position: relative;
+}
+
+.contact_container .contactp {
+    position: relative;
+}
+
+.txt {
+    font-size: 14px;
+    padding-left: 42px !important;
+    padding-top: 0px !important
+}
+
+.dlttxt {
+    padding-bottom: 17px;
+}
+
+.showMe {
+    position: relative;
+    animation: contactPro 0.75s;
+    animation-iteration-count: 1;
+}
+
+.svgg .btnn {
+    color: var(--danger) !important
+}
+
+
+@keyframes contactPro {
+    0% {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+
+    30% {
+        opacity: 0;
+        transform: translateY(50%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.contact_container .contact_header p {
+    font-size: 16px;
+    padding-top: 15px;
+    padding-left: 30px;
+}
+
+.contact_profile {
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    background-color: var(--primary-white);
+    z-index: 2;
+}
+
+
+
+.contact_name {
+    display: flex;
+    justify-content: center;
+    background: var(--primary-white);
+    padding-top: 15px;
+    color: var(--black);
+}
+
+.contact_name div {
+    font-size: 24px;
+}
+
+.contact_name div p {
+    font-size: 16px;
+}
+
+.contactsocialInfo {
+    background-color: var(--primary-white);
+    margin-top: 10px;
+    padding: 17px 30px 17px 30px;
+    display: flex;
+    justify-content: space-between
+}
+
+.viewProfile {
+    padding: 5px 30px 5px 30px;
+    color: var(--black);
+    cursor: pointer;
+}
+
+.contact_status {
+    background-color: var(--primary-white);
+    padding: 17px 30px 5px 30px;
+    line-height: 0.8;
+    margin-top: 10px
+}
+
+div .searchmsg {
+    padding: 72px 50px 72px 50px;
+    font-size: 0.875rem;
+    background-color: var(--primary-white);
+
+}
+
+
+.mediaContainer {
+
+    max-width: 30vw;
+    background-color: var(--contact-profile-bg);
+    overflow: auto;
+    height: 100vh;
+    right: 0px;
+    top: 0px
+}
+
+.mediaContainer .media_header {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    background-color: var(--gray_color);
+    height: 62px;
+    padding-left: 25px;
+    border-left: 1px solid var(--border_color);
+    width: 100%
+}
+
+.media_header p {
+
+    color: var(--black)
+}
+
+/* .media_Container{
+    width: 30vw;
+} */
+
+.media_header .keyboard {
+    color: var(--contact-media-text);
+    position: relative;
+    top: 20px;
+    left: 25px;
+}
+
+.css-heg063-MuiTabs-flexContainer {
+    justify-content: space-around !important;
+}
+
+.media_header {
+    background-color: var(--profile-header);
+}
+
+.MuiTabs-flexContainer {
+    background-color: var(--profile-header) !important;
+
+}
+
+.css-1h9z7r5-MuiButtonBase-root-MuiTab-root.Mui-selected {
+    color: var(--contact-media-text) !important;
+}
+
+.css-1160xiw-MuiPaper-root-MuiDrawer-paper {
+    background-color: var(--primary-white) !important;
+}
+
+.MuiTab-textColorPrimary {
+    color: var(--contact-media-text) !important;
+}
+
+.MuiBox-root {
+    background-color: var(--primary-white) !important;
+}
+
+.MuiTabs-indicator {
+    background-color: var(--sender_chatbg) !important;
+}
+
+.MuiPaper-root {
+    box-shadow: none !important;
+}
+
+.profile_image {
+    cursor: pointer;
+}
+
+.user_unblock {
+    filter: invert(1);
+}