{"version":3,"sources":["webpack:///./src/view/apps/chat/ChatApp.vue?0107","webpack:///./src/view/apps/chat/ChatApp.vue","webpack:///./src/view/apps/chat/ChatApp.vue?7df6","webpack:///./src/view/apps/chat/style.js"],"names":["_createElementBlock","_createElementVNode","_createVNode","_component_a_row","_component_a_col","xxl","lg","xs","class","_normalizeClass","_ctx","$route","name","_component_ChatSidebar","_component_sdCards","headless","_component_Content","_component_perfect_scrollbar","options","_component_router_view","ChatApp","components","Main","UL","Content","ChatSidebar","PerfectScrollbar","SearchOutlined","setup","state","useStore","match","computed","useRoute","matched","rtl","themeLayout","rtlData","searchData","headerSearchData","left","value","me","ref","__exports__","render","ChatWrapper","Styled","div","theme","ul","BlockSpan","span","SingleChatWrapper","MessageList","Footer","BackShadowEmoji"],"mappings":"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","file":"js/chat.95e37759.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./ChatApp.vue?vue&type=style&index=0&id=5c0b0532&lang=css\"","<template>\r\n  <div>\r\n    <div>\r\n      <a-row>\r\n        <a-col :xxl=\"7\" :lg=\"10\" :xs=\"24\" class=\"px-0\" :class=\"{ 'd-none d-md-block': $route.name === 'groupSingle' }\">\r\n          <ChatSidebar>\r\n            <sdCards headless>\r\n              <!-- <div class=\"chatbox-search\">\r\n              <sdAutoComplete :dataSource=\"searchData\" width=\"100%\" patterns />\r\n            </div> -->\r\n              <Content>\r\n                <perfect-scrollbar\r\n                  :options=\"{\r\n                    wheelSpeed: 1,\r\n                    swipeEasing: true,\r\n                    suppressScrollX: true,\r\n                  }\"\r\n                >\r\n                  <router-view></router-view>\r\n                </perfect-scrollbar>\r\n              </Content>\r\n            </sdCards>\r\n          </ChatSidebar>\r\n        </a-col>\r\n        <a-col :xxl=\"17\" :lg=\"14\" :xs=\"24\" class=\"px-0\">\r\n          <router-view name=\"child\"></router-view>\r\n        </a-col>\r\n      </a-row>\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\nimport { UL, Content, ChatSidebar } from './style';\r\nimport { Main } from '../../styled';\r\nimport { computed, ref } from 'vue';\r\nimport { useStore } from 'vuex';\r\nimport { useRoute } from 'vue-router';\r\nimport { PerfectScrollbar } from 'vue3-perfect-scrollbar';\r\nimport { SearchOutlined } from '@ant-design/icons-vue';\r\nimport 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';\r\n\r\nconst ChatApp = {\r\n  name: 'ChatApp',\r\n  components: { Main, UL, Content, ChatSidebar, PerfectScrollbar, SearchOutlined },\r\n  setup() {\r\n    const { state } = useStore();\r\n    const match = computed(() => useRoute().matched[1]);\r\n    const rtl = computed(() => state.themeLayout.rtlData);\r\n    const searchData = computed(() => state.headerSearchData);\r\n    const left = computed(() => (!rtl.value ? 'left' : 'right'));\r\n\r\n    const me = ref('woadud@gmail.com');\r\n\r\n    return {\r\n      rtl,\r\n      searchData,\r\n      left,\r\n      me,\r\n      match,\r\n    };\r\n  },\r\n};\r\n\r\nexport default ChatApp;\r\n</script>\r\n<style>\r\n.ps {\r\n  height: 495px;\r\n}\r\n.spinclass {\r\n  margin-top: 300px;\r\n  margin-left: 800px;\r\n}\r\n.ant-spin-dot-item {\r\n  background-color: rgb(13, 179, 181) !important;\r\n}\r\n.d-none {\r\n  display: none;\r\n}\r\n@media screen and (min-width: 991px) {\r\n  .d-md-block {\r\n    display: block;\r\n  }\r\n}\r\n</style>\r\n","import { render } from \"./ChatApp.vue?vue&type=template&id=5c0b0532\"\nimport script from \"./ChatApp.vue?vue&type=script&lang=js\"\nexport * from \"./ChatApp.vue?vue&type=script&lang=js\"\n\nimport \"./ChatApp.vue?vue&type=style&index=0&id=5c0b0532&lang=css\"\n\nimport exportComponent from \"C:\\\\Users\\\\HP\\\\Downloads\\\\better-doctor-customer-portal-main\\\\better-doctor-customer-portal-main\\\\client\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__","import Styled from 'vue3-styled-components';\r\n\r\nconst ChatWrapper = Styled.div`\r\n  .create-action{\r\n    padding: 0 25px;\r\n    margin: 25px 0 18px;\r\n    @media only screen and (max-width: 379px){\r\n      padding: 0 20px;\r\n    }\r\n    .btn-add{\r\n      width: 100%;\r\n      height: 44px;\r\n      text-align: center;\r\n      border: 1px solid ${({ theme }) => theme['border-color-light']};\r\n      background: ${({ theme }) => theme['bg-color-light']};\r\n      color: ${({ theme }) => theme['gray-color']};\r\n      svg,\r\n      img,\r\n      i{\r\n        ${({ theme }) => (theme.rtl ? 'margin-left' : 'margin-right')}: 4px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst UL = Styled.ul`\r\n  list-style-type: none;\r\n  li {\r\n    display: inline-block;\r\n    padding: 5px;\r\n  }\r\n`;\r\n\r\nconst Content = Styled.div`\r\n  height: 495px;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  ul{\r\n    overflow-x: hidden;\r\n  }\r\n  .chat-link-signle{\r\n    position: relative;\r\n    background: #fff;\r\n    border-radius: 4px;\r\n    width: 100%;\r\n    margin: 0;\r\n    &:before{\r\n      content: '';\r\n      position: absolute;\r\n      width: calc(100% + 20px);\r\n      height: 100%;\r\n      background: #fff;\r\n      right: -10px;\r\n      left: -10px;\r\n      box-shadow: 0 15px 50px ${({ theme }) => theme['light-color']}20;\r\n      border-radius: 4px;\r\n      visibility: hidden;\r\n      opacity: 0;\r\n      transition: 0.3s ease;\r\n      z-index: 1;\r\n    }\r\n    &:hover:before{\r\n      visibility: visible;\r\n      opacity: 1;\r\n    }\r\n    a{\r\n      display: flex;\r\n      padding: 20px 24px;\r\n      position: relative;\r\n      z-index: 1;\r\n      border-bottom: 1px solid #E3E6EF;\r\n      background: #F8FAFB;\r\n    }\r\n    .author-figure{\r\n      ${({ theme }) => (theme.rtl ? 'margin-left' : 'margin-right')}: 15px;\r\n      flex: .1;\r\n      img{\r\n        max-width: 46px;\r\n        border-radius: 50%;\r\n      }\r\n    }\r\n    .author-info{\r\n      ${({ theme }) => (theme.rtl ? 'margin-left' : 'margin-right')}: 6px;\r\n      flex: .76;\r\n      .author-name{\r\n        font-weight: 600;\r\n        color: ${({ theme }) => theme['dark-color']};\r\n      }\r\n      .author-chatText{\r\n        color: ${({ theme }) => theme['light-color']};\r\n      }\r\n    }\r\n    .author-chatMeta{\r\n      flex: .18;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: flex-end;\r\n      text-aling: right;\r\n      @media (max-width: 991px){\r\n        align-items: center;\r\n        justify-content: center;\r\n      }\r\n      span{\r\n        float: ${({ theme }) => (theme.rtl ? 'left' : 'right')};\r\n        font-size: 12px;\r\n        color: ${({ theme }) => theme['light-color']};\r\n      }\r\n      .ant-badge{\r\n        margin-top: 8px;\r\n        span{\r\n          color: #fff;\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst BlockSpan = Styled.span`\r\n  display: block;\r\n`;\r\n\r\nconst SingleChatWrapper = Styled.div`\r\n  min-height: calc(100vh - 64px);\r\n  height: calc(100vh - 64px);\r\n\r\n  &.group-chat{\r\n    .chatbox-reply-form{\r\n      input{\r\n        background: #fff !important;\r\n        box-shadow: 0 5px 30px ${({ theme }) => theme['light-color']}15;\r\n      }\r\n    }\r\n  }\r\n  >.ant-card{\r\n    margin-bottom: 0px !important;\r\n    height:100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    border-radius: 0px !important;\r\n    .ant-card-body{\r\n      padding: 25px 0 !important;\r\n      flex: 1;\r\n      position: relative;\r\n    }\r\n  }\r\n  .ant-card-head{\r\n    padding: 17px 30px;\r\n    border-top: 2px solid #F1F2F6;\r\n    border-radius: 0px !important;\r\n    border-bottom: 1px solid #F1F2F6;\r\n    text-align: center;\r\n    .ant-card-extra{\r\n      .ant-dropdown-trigger{\r\n        ${({ theme }) => (!theme.rtl ? 'margin-left' : 'margin-right')}: 0 !important;\r\n      }\r\n    }\r\n    .ant-card-head-title{\r\n      padding: 0px !important;\r\n      h1{\r\n        font-weight: 500;\r\n        margin-bottom: 6px;\r\n      }\r\n      p{\r\n        font-size: 12px;\r\n        font-weight: 400;\r\n        margin-bottom: 0;\r\n        color: ${({ theme }) => theme['light-color']};\r\n      }\r\n    }\r\n  }\r\n\r\n  .group-chat-header{\r\n    padding: 0px;\r\n    align-items: center;\r\n    width: 100%;\r\n    text-align: left;\r\n    @media only screen and (max-width: 479px){\r\n      flex-flow: column;\r\n    }\r\n    h1{\r\n      @media only screen and (max-width: 479px){\r\n        margin-bottom: 15px !important;\r\n      }\r\n    }\r\n    .members{\r\n      width: 100%;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      a{\r\n        :not(:last-child){\r\n          ${({ theme }) => (theme.rtl ? 'margin-left' : 'margin-right')}: 4px;\r\n        }\r\n      }\r\n      img{\r\n        max-width: 30px;\r\n      }\r\n      .show-more,\r\n      .add-more{\r\n        width: 30px;\r\n        height: 30px;\r\n        border-radius: 50%;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        span{\r\n          margin: 0;\r\n        }\r\n      }\r\n      .show-more{\r\n        background-color: ${({ theme }) => theme['primary-color']};\r\n        span{\r\n          font-size: 10px;\r\n          font-weight: 500;\r\n          color: #fff;\r\n        }\r\n      }\r\n      .add-more{\r\n        border: 1px dashed ${({ theme }) => theme['border-color-deep']};\r\n        span{\r\n          line-height: .4;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .atbd-chatbox{\r\n    height: 83%;\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\r\n    position: absolute;\r\n    width: 100%;\r\n    .time-connector{\r\n      position: relative;\r\n      z-index: 10;\r\n      margin: -14px 0 15px;\r\n      &:after{\r\n        position: absolute;\r\n        width: 100%;\r\n        height: 1px;\r\n        ${({ theme }) => (!theme.rtl ? 'left' : 'right')}: 0;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        background-color: ${({ theme }) => theme['border-color-light']};\r\n        content: '';\r\n        z-index: -1;\r\n      }\r\n      span{\r\n        text-transform: capitalize;\r\n        font-size: 13px;\r\n        padding: 0 24px;\r\n        background-color: #fff;\r\n        color: ${({ theme }) => theme['light-color']};\r\n      }\r\n    }\r\n    .atbd-chatbox__single{\r\n      padding: 0 25px;\r\n      &:not(:last-child){\r\n        margin-bottom: 30px;\r\n      }\r\n      &:last-child{\r\n        padding-bottom: 5px;\r\n      }\r\n      .left{\r\n        display: flex;\r\n        align-items: flex-start;\r\n        img{\r\n          max-width: 46px;\r\n          border-radius: 50%;\r\n          ${({ theme }) => (theme.rtl ? 'margin-left' : 'margin-right')}: 15px;\r\n        }\r\n        .atbd-chatbox__content{\r\n          margin-top: -4px;\r\n        }\r\n        .message-box{\r\n\r\n          background: #0DB3B5;\r\n        }\r\n      }\r\n      .right{\r\n        float: ${({ theme }) => (theme.rtl ? 'left' : 'right')};\r\n        .atbd-chatbox__actions{\r\n          margin: ${({ theme }) => (theme.rtl ? '0 0 0 15px' : '0 15px 0 0')};\r\n        }\r\n        .atbd-chatbox__name{\r\n          text-align: ${({ theme }) => (theme.rtl ? 'left' : 'right')};\r\n        }\r\n        .message-box{\r\n\r\n          ${({ theme }) => (!theme.rtl ? 'border-radius: 15px 15px 0 15px;' : 'border-radius: 15px 15px 15px 0')};\r\n          background: ${({ theme }) => theme['bg-color-deep']};\r\n          color: ${({ theme }) => theme['gray-color']};\r\n        }\r\n      }\r\n    }\r\n    .atbd-chatbox__name{\r\n      font-size: 14px;\r\n      font-weight: 600;\r\n      span{\r\n        font-size: 12px;\r\n        font-weight: 400;\r\n        margin-left: 15px;\r\n        color: ${({ theme }) => theme['light-color']};\r\n      }\r\n    }\r\n    .atbd-chatbox__contentInner{\r\n      align-items: center;\r\n      .message-box + .message-box{\r\n        margin-top: 5px;\r\n      }\r\n    }\r\n    .message-seen{\r\n      margin-top: 10px;\r\n      &.text-right{\r\n        text-align: ${({ theme }) => (theme.rtl ? 'left' : 'right')};\r\n      }\r\n      img{\r\n        max-width: 20px;\r\n        border-radius: 50%;\r\n      }\r\n      .message-seen__time{\r\n        font-size: 12px;\r\n        font-weight: 400;\r\n        color: ${({ theme }) => theme['light-color']};\r\n      }\r\n    }\r\n    .group-seen{\r\n      margin-top: 5px;\r\n      text-align: ${({ theme }) => (theme.rtl ? 'left' : 'right')};\r\n      img{\r\n        max-width: 20px;\r\n        &:not(:last-child){\r\n          ${({ theme }) => (theme.rtl ? 'margin-left' : 'margin-right')}: 3px;\r\n        }\r\n      }\r\n    }\r\n    .atbd-chatbox__actions{\r\n      display: flex;\r\n      align-items: center\r\n      ${({ theme }) => (!theme.rtl ? 'margin-left' : 'margin-right')}: 15px;\r\n      @media only screen and (max-width: 767px){\r\n        flex-flow: column;\r\n      }\r\n      .ant-dropdown-trigger{\r\n        line-height: 1;\r\n        color: ${({ theme }) => theme['border-color-deep']};\r\n        .anticon-smile{\r\n          color: ${({ theme }) => theme['extra-light-color']};\r\n        }\r\n        &{\r\n          + .ant-dropdown-trigger{\r\n            ${({ theme }) => (!theme.rtl ? 'margin-left' : 'margin-right')}: 12px;\r\n            @media only screen and (max-width: 767px){\r\n              margin: 10px 0 0;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst MessageList = Styled.div`\r\n  display: block;\r\n  max-width: 670px;\r\n  font-size: 15px;\r\n  ${({ theme }) => (!theme.rtl ? 'border-radius: 0 15px 15px' : 'border-radius: 15px 0 15px 15px')};\r\n  padding: 18px 20px;\r\n  line-height: 1.67;\r\n  color: #fff;\r\n`;\r\n\r\nconst Footer = Styled.div`\r\n  padding: 0 25px;\r\n  position: absolute;\r\n  width: 100%;\r\n  bottom: 10px;\r\n  background: #fff;\r\n  border-top: 1px solid #E3E6EF;\r\n  .chatbox-reply-form{\r\n    position: relative;\r\n    padding:10px 0;\r\n    align-items: center;\r\n    flex-flow: row;\r\n    display: flex;\r\n    .smile-icon{\r\n      position: relative;\r\n      position: absolute;\r\n      ${({ theme }) => (!theme.rtl ? 'left' : 'right')}: 25px;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      display: flex;\r\n      align-items: center;\r\n      z-index: 9999;\r\n      @media only screen and (max-width: 575px){\r\n        top: 26px;\r\n      }\r\n      emoji-picker{\r\n          position: absolute;\r\n          z-index: 999999999;\r\n          bottom: 0;\r\n          @media only screen and (max-width: 991px){\r\n            right: auto;\r\n            left: 100%;\r\n          }\r\n          @media only screen and (max-width: 479px){\r\n            right: auto;\r\n            left: -35px;\r\n          }\r\n          .emoji-search{\r\n            padding: 8px;\r\n            height: auto;\r\n            border-radius: 5px;\r\n          }\r\n      }\r\n      .ant-dropdown-trigger{\r\n        display: flex;\r\n        align-items: center;\r\n      }\r\n      a{\r\n        display: flex;\r\n      }\r\n      svg,\r\n      i{\r\n        color: ${({ theme }) => theme['extra-light-color']};\r\n      }\r\n    }\r\n    &.hasFile{\r\n      .ant-upload-list{\r\n        &.ant-upload-list-text{\r\n          padding: 15px;\r\n        }\r\n      }\r\n\r\n    }\r\n    .ant-upload-list{\r\n      display: flex;\r\n      position: absolute;\r\n      top: -70px;\r\n      ${({ theme }) => (!theme.rtl ? 'left' : 'right')}: 0;\r\n    }\r\n    .chatbox-reply-input{\r\n      width: 80%;\r\n      @media only screen and (max-width: 678px) {\r\n        width: 100%;\r\n      }\r\n      ${({ theme }) => (theme.rtl ? 'margin-left' : 'margin-right')}: 8px;\r\n      input{\r\n        padding: ${({ theme }) => (theme.rtl ? '0 70px 0 25px' : '0 25px 0 70px')};\r\n        height: 70px;\r\n        width: 100%;\r\n        border: 0 none;\r\n        border-radius: 35px;\r\n        @media only screen and (max-width: 678px) {\r\n          padding: 3px 13px !important;\r\n        }\r\n        background: ${({ theme }) => theme['bg-color-normal']};\r\n        &::placeholder{\r\n          font-size: 14px;\r\n          color: ${({ theme }) => theme['light-color']};\r\n        }\r\n        &:focus{\r\n          border: 0 none;\r\n          outline: none;\r\n        }\r\n        @media only screen and (max-width: 575px){\r\n          height: 50px;\r\n        }\r\n      }\r\n    }\r\n    input,\r\n    span{\r\n      ${({ theme }) => (theme.rtl ? 'margin-left' : 'margin-right')}: 8px;\r\n    }\r\n    .chatbox-reply-action{\r\n      align-items: center;\r\n      a{\r\n        span{\r\n          display: block;\r\n        }\r\n      }\r\n      .btn-send{\r\n        box-shadow: 0 8px 13px #5F63F220;\r\n      }\r\n      .ant-upload-select,\r\n      button{\r\n        min-width: 50px;\r\n        height: 50px;\r\n        border-radius: 50%;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        span{\r\n          ${({ theme }) => (theme.rtl ? 'margin-left' : 'margin-right')}: 0;\r\n          color: #fff;\r\n        }\r\n      }\r\n      .ant-upload-select {\r\n        background: ${({ theme }) => theme['bg-color-normal']};\r\n        .ant-upload{\r\n          ${({ theme }) => (theme.rtl ? 'margin-left' : 'margin-right')}: 0;\r\n          svg{\r\n            margin-top: 8px;\r\n            color: ${({ theme }) => theme['light-color']};\r\n          }\r\n        }\r\n      }\r\n      button{\r\n        padding: 0;\r\n        background: ${({ theme }) => theme['primary-color']};\r\n      }\r\n    }\r\n\r\n    .ant-upload-select-picture-card{\r\n      margin: 0;\r\n      width: 50px;\r\n      border-radius: 50% !important;\r\n      border: 0 none;\r\n      background-color: ${({ theme }) => theme['bg-color-normal']} !important;\r\n      svg,\r\n      i{\r\n        margin-top: 7px !important;\r\n      }\r\n    }\r\n    .ant-upload-list{\r\n      &.ant-upload-list-text{\r\n        display: block;\r\n        top: auto;\r\n        bottom: 136px;\r\n        background: #fff;\r\n        padding: 0;\r\n        border-radius: 5px;\r\n        box-shadow: 0 5px 20px #9299B803;\r\n        >div{\r\n          display: block;\r\n        }\r\n        .ant-upload-list-item{\r\n          height: 24px;\r\n          border-radius: 4px;\r\n          background-color: ${({ theme }) => theme['bg-color-normal']};\r\n          button{\r\n            width: auto;\r\n            height: auto;\r\n            min-width: auto;\r\n            background-color: ${({ theme }) => theme['bg-color-normal']};\r\n            svg{\r\n              color: ${({ theme }) => theme['info-color']};\r\n            }\r\n          }\r\n        }\r\n        .ant-upload-list-item-info{\r\n          >span{\r\n            display: flex;\r\n            align-items: center;\r\n          }\r\n          .ant-upload-list-item-name {\r\n            font-size: 13px;\r\n          }\r\n          .anticon,\r\n          .ant-upload-list-item-name {\r\n            color: ${({ theme }) => theme['info-color']};\r\n          }\r\n        }\r\n      }\r\n      &.ant-upload-list-picture-card{\r\n        .ant-upload-list-picture-card-container{\r\n          width: 60px;\r\n          height: 50px;\r\n        }\r\n        .ant-upload-list-item{\r\n          width: 60px;\r\n          height: 50px;\r\n          padding: 3px;\r\n          .ant-upload-list-item-actions{\r\n            .anticon-eye{\r\n              display: none;\r\n            }\r\n            .anticon{\r\n              margin: 0;\r\n            }\r\n          }\r\n          .ant-upload-list-item-card-actions-btn{\r\n            width: 25px;\r\n            height: 25px;\r\n            min-width: 25px;\r\n          }\r\n          .ant-upload-list-item-thumbnail{\r\n            font-size: 11px;\r\n          }\r\n          .ant-upload-list-item-name{\r\n            display: none;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst ChatSidebar = Styled.div`\r\n  min-height: calc(100vh - 64px);\r\n  background: #F8FAFB;\r\n  box-shadow: 0 5px 20px #9299b803;\r\n  border-right: 1px solid #E3E6EF;\r\n  border-left: 1px solid #E3E6EF;\r\n  .custom-scrollbar{\r\n    >div{\r\n      @media only screen and (max-width: 1800px){\r\n        ${({ theme }) => (theme.rtl ? 'margin-left: 0 !important;' : 'margin-left: auto !important;')}:;\r\n      }\r\n    }\r\n  }\r\n  @media only screen and (max-width: 991px){\r\n    margin: 0 auto 40px;\r\n  }\r\n  @media only screen and (max-width: 575px){\r\n    min-height: 580px;\r\n  }\r\n  .ant-card-body{\r\n    background: #F8FAFB;\r\n    padding: 0px 0 !important;\r\n    .ant-input-group {\r\n      background: #F8FAFB;\r\n      .ant-input-affix-wrapper {\r\n        background: #F8FAFB;\r\n        border: 0;\r\n        border-top: 1px solid #E3E6EF;\r\n        border-radius: 0;\r\n        border-bottom: 1px solid #E3E6EF;\r\n        padding: 17px;\r\n        input.ant-input {\r\n          background: #F8FAFB;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  .chatbox-search{\r\n    padding: 0 25px;\r\n    @media only screen and (max-width: 379px){\r\n      padding: 0 20px;\r\n    }\r\n    .ant-select-selection-search{\r\n      width: 100% !important;\r\n    }\r\n  }\r\n  .ant-select-selector{\r\n    height: auto !important;\r\n  }\r\n  .ant-select-single .ant-select-selector .ant-select-selection-search-input{\r\n    border-radius: 23px;\r\n    background: ${({ theme }) => theme['bg-color-normal']};\r\n    border: 0 none;\r\n    input{\r\n      background: ${({ theme }) => theme['bg-color-normal']};\r\n      height: 46px !important;\r\n    }\r\n  }\r\n  nav{\r\n    padding: 0 25px;\r\n    @media only screen and (max-width: 1199px){\r\n      padding: 0 15px;\r\n    }\r\n    ul{\r\n      margin: 0 0 12px 0;\r\n      padding: 30px 0 0 0;\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      border-bottom: 1px solid ${({ theme }) => theme['border-color-light']};\r\n      @media (max-width: 480px){\r\n        flex-direction: column;\r\n      }\r\n      li{\r\n        padding: 0;\r\n        a{\r\n          position: relative;\r\n          display: block;\r\n          padding: 0 0 18px;\r\n          font-weight: 400;\r\n          color: ${({ theme }) => theme['light-color']};\r\n          &:after{\r\n            position: absolute;\r\n            left: 0;\r\n            bottom: 0;\r\n            width: 100%;\r\n            height: 1px;\r\n            content: '';\r\n            opacity: 0;\r\n            visibility: hidden;\r\n            background: ${({ theme }) => theme['primary-color']};\r\n            @media only screen and (max-width: 1199px){\r\n              display: none;\r\n            }\r\n          }\r\n          &.active{\r\n            font-weight: 500;\r\n            color: ${({ theme }) => theme['primary-color']};\r\n            &:after{\r\n              opacity: 1;\r\n              visibility: visible;\r\n            }\r\n          }\r\n          .ant-badge{\r\n            ${({ theme }) => (!theme.rtl ? 'margin-left' : 'margin-right')}: 6px;\r\n          }\r\n          @media (max-width: 480px){\r\n            padding-bottom: 10px;\r\n            margin-bottom: 10px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\nconst BackShadowEmoji = Styled.div`\r\n    width: 100%;\r\n    height: 100%;\r\n    background: #11121760;\r\n    position: fixed;\r\n    top: 0;\r\n    ${({ theme }) => (theme.rtl ? 'right' : 'left')}: 0;\r\n    z-index: 9999;\r\n`;\r\n\r\nexport { ChatWrapper, UL, Content, BlockSpan, MessageList, Footer, ChatSidebar, SingleChatWrapper, BackShadowEmoji };\r\n"],"sourceRoot":""}