isometrik-chat 3.0.2 → 3.0.3-test

package/build/index.css

@@ -1,1926 +0,0 @@
-.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);
-}