isometrik-chat 3.8.2-alpha → 3.8.2

package/build/index.css

@@ -1,261 +1,261 @@
-.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 {
+  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;
@@ -358,31 +358,31 @@
     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
+.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;
@@ -526,428 +526,428 @@
     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);
-    }  
+.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;
 }
-.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
@@ -1475,456 +1475,456 @@ padding:10px 0px 0px 0px ;
   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: 100%;
-    /* 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
+  margin-left: 10px;
 }
 
 
-@keyframes contactPro {
-    0% {
-        opacity: 0;
-        transform: translateY(100%);
-    }
-
-    30% {
-        opacity: 0;
-        transform: translateY(50%);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
+.EmojiPickerReact {
+  height:320px !important;
 
-.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;
+.EmojiPickerReact .epr-search-container input.epr-search{
+  transition:unset !important;
 }
 
 
-
-.contact_name {
-    display: flex;
-    justify-content: center;
-    background: var(--primary-white);
-    padding-top: 15px;
-    color: var(--black);
+.emoji-picker-react{
+  position: absolute !important;
 }
 
-.contact_name div {
-    font-size: 24px;
+
+.mainChat {
+    flex: 1;
+    flex-direction: column;
+    height: 100%;
+    /* border-bottom: 1px solid; */
 }
 
-.contact_name div p {
-    font-size: 16px;
+.mainChatt {
+    flex: 1;
+    flex-direction: column;
+    position: absolute;
+    width: 40%;
+    /* border-bottom: 1px solid; */
 }
 
-.contactsocialInfo {
-    background-color: var(--primary-white);
-    margin-top: 10px;
-    padding: 17px 30px 17px 30px;
+.mainChat .chat_header {
     display: flex;
-    justify-content: space-between
+    align-items: center;
+    border-bottom: 1px solid var(--border_color);
+    padding: 10px 10px;
+    flex: 1;
+    background-color: var(--gray_color)
 }
 
-.viewProfile {
-    padding: 5px 30px 5px 30px;
-    color: var(--black);
-    cursor: pointer;
+.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; */
 }
 
-.contact_status {
-    background-color: var(--primary-white);
-    padding: 17px 30px 5px 30px;
-    line-height: 0.8;
-    margin-top: 10px
+.chat_headerInfo {
+    flex: 1;
+    margin-left: 10px;
+    max-width: 50%;
 }
 
-div .searchmsg {
-    padding: 72px 50px 72px 50px;
-    font-size: 0.875rem;
-    background-color: var(--primary-white);
-
+.MuiDialog-container {
+    display: flex !important;
+    /* justify-content: flex-end !important */
 }
 
+.chat_headerInfo p {
+    color: var(--black);
+    margin-bottom: 0px
+}
 
-.mediaContainer {
+.chatbox_Bg {
+    height: 100%;
 
-    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);
+.chatbox_Bg img {
+    height: 100%;
     width: 100%
 }
 
-.media_header p {
+.bg {
 
-    color: var(--black)
+    height: 100vh;
+    text-align: center;
+    display: block;
+    /* border: 2px solid; */
 }
 
-/* .media_Container{
-    width: 30vw;
-} */
-
-.media_header .keyboard {
-    color: var(--contact-media-text);
-    position: relative;
-    top: 20px;
-    left: 25px;
+.bg div h1 {
+    font-size: 32px;
+    font-weight: 300px;
+    color: var(--black);
+    margin-top: 20px;
 }
 
-.css-heg063-MuiTabs-flexContainer {
-    justify-content: space-around !important;
+.bg .text {
+    font-size: 14px;
+    font-weight: 400px;
+    line-height: 20px;
+    width: 33rem;
 }
 
-.media_header {
-    background-color: var(--profile-header);
+.contactInfo {
+    height: 100vh;
+    width: 30vw;
+    overflow-x: hidden;
+    transition: 0.1s;
+    z-index: 999;
 }
 
-.MuiTabs-flexContainer {
-    background-color: var(--profile-header) !important;
-
+.isoChat .chatBox {
+    background-repeat: no-repeat;
+    background-size: cover;
 }
 
-.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;
-}
+/* @media screen and (min-width: 1024px) and (max-width: 1300px) {
+    .contactInfo {
+        width: 70vw;
+    }
+} */
 
-.MuiBox-root {
-    background-color: var(--primary-white) !important;
+.contact {
+    height: 100vh;
+    width: 0px;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    overflow-x: hidden;
+    transition: 0.1s;
 }
 
-.MuiTabs-indicator {
-    background-color: var(--sender_chatbg) !important;
+.mainChat .chatbox_Bg {
+    background-color: #f0f2f5
 }
 
-.MuiPaper-root {
-    box-shadow: none !important;
+.chatbox_Bg .footer {
+    font-size: 14px;
+    margin-top: 60px
 }
 
-.profile_image {
-    cursor: pointer;
+.chat_header_right {
+    display: flex;
+    align-items: center;
+    flex: 1 1;
+    justify-content: flex-end;
 }
-
-.user_unblock {
-    filter: invert(1);
+@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);
 }