*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  outline: none;
}

p{
  font-family: 'DM Sans', sans-serif;
  font-weight:400;
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Clash Display', sans-serif;
  font-weight:500;
}

::-webkit-scrollbar {
width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
background: #f1f1f100;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #141414;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

textarea{
  resize: none;
}

:root {
  --heading-font: 'Clash Display', sans-serif;
  --font: 'DM Sans', sans-serif;
  --color-main: rgb(33, 43, 54);
  --background-body: rgb(255, 255, 255);
  --background-containers: rgb(255, 255, 255);
  --box-shadow-containers: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
  --background-options: rgba(255, 255, 255, 1);
  --background-blur: rgba(255, 255, 255, 0.8);
  --color-message-user: rgb(33, 43, 54);
  --background-message-user: rgb(244, 246, 248);
  --color-message-bot: rgb(33, 43, 54);
  --background-message-bot: rgb(200, 250, 214);
  --input-message-color: rgb(33, 43, 54);
  --main-color: #f3f4f9;
  --border-divider: rgba(145, 158, 171, 0.5);
}

.dark:root {
  --heading-font: 'Clash Display', sans-serif;
  --font: 'DM Sans', sans-serif;
  --color-main: rgb(255, 255, 255);
  --background-body: rgb(22, 28, 36);
  --background-containers: rgb(33, 43, 54);
  --box-shadow-containers: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px, rgba(0, 0, 0, 0.12) 0px 12px 24px -4px;
  --background-options: rgba(22, 28, 36, 1);
  --background-blur: rgba(22, 28, 36, 0.6);
  --color-message-user: rgb(255, 255, 255);
  --background-message-user: rgba(145, 158, 171, 0.12);
  --color-message-bot: rgb(33, 43, 54);
  --background-message-bot: rgb(200, 250, 214);
  --input-message-color: rgb(255, 255, 255);
  --main-color: #171c24;
  --border-divider: rgba(145, 158, 171, 0.5);
}

#popup-login{
  position:fixed;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  top:0px;
  left:0px;
  background:#fe0000 url('https://companieslogo.com/img/orig/SAN-8a4d0f73.png?t=1647958776') no-repeat;
  background-size:cover;
  background-position:200px 100px;
  z-index:9999;
}

.container-login{
  width:100%;
  max-width:500px;
  background:white;
  border-radius:8px;
  padding:25px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.container-login > h3{
  font-size:30px;
  font-family: 'DM Sans', sans-serif;
  font-weight:700;
  margin-bottom:10px;
}

.container-login > input{
  width:100%;
  height:50px;
  border-radius:8px;
  border:none;
  background:#eee;
  padding:0px 20px;
}

.container-login > div.button-login{
  width:100%;
  height:50px;
  border-radius:8px;
  border:none;
  background:#eee;
  padding:0px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:20px;
  font-family: 'DM Sans', sans-serif;
  background:#fe0000;
  color:#fff;
}

.container-login > div.button-login[empty=true]{
  background:#eee;
  color:#161616;
}

#app{
  display:flex;
}

body {
  background-color: var(--background-body);
  background-size: 10px 10px;
}

.container-root{
  transition: all 0.3s ease 0s;
  width: calc(100%);
  padding: 10px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.box-root{
  max-width:1200px;
  margin:auto;
}

/*Content Chat*/
#content-chat{
  padding:0px 24px;
  margin: 0px auto;
  max-width: 1536px;
}

#content-chat h4{
  margin-bottom:40px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-main);
}

#content-chat .container-list-chats{
  background-color: var(--background-containers);
  color: var(--color-main);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-image: none;
  overflow: hidden;
  position: relative;
  box-shadow: var(--box-shadow-containers);
  border-radius: 16px;
  z-index: 0;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 20px);
}

#content-chat .container-list-chats .list-chats-sidebar{
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  width: 320px;
  border-right: 1px solid rgba(145, 158, 171, 0.2);
  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  position:relative;
}

#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0px 20px;
  height:86px;
}

#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-header .header-logo{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 50%;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  width: 48px;
  height: 48px;
}

#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-header .header-logo img{
  width: 100%;
  height: 100%;
  text-align: center;
  object-fit: cover;
  color: transparent;
}

.header-user-blocked {
  position: absolute;
  width: 100%;
  height: 100%;
  color: red;
}

.header-user-tester {
  position: absolute;
  width: 100%;
  height: 100%;
  color: red;
}

#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-search{
  height:54px;
  padding:0px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}

#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-search .filter-content-search {
  position: absolute;
  width:36px;
  height:calc(100% - 2px);
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:18px;
  border-radius:0px 8px 8px 0px;
  right:20px;
  top: 1px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-search .filter-content-search:hover {
  background-color: rgba(145, 158, 171, 0.08);
}


#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-search .input-content-search{
  border:1px solid rgba(145, 158, 171, 0.2);
  border-radius: 8px;
  height:100%;
  display:flex;
  align-items:center;
  height:54px;
}

#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-search .input-content-search ion-icon{
  width:40px;
}

#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-search .input-content-search input{
  height:100%;
  border:none;
  width:calc(100% - 40px);
  background:none;
  padding:0px 40px 0px 0px;
  color: var(--color-main);
  height:54px;
}

#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-search .filter-search{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-family: 'DM Sans', sans-serif;
}

#content-chat .container-list-chats .list-chats-sidebar .list-chats-sidebar-search .filter-search div{
  display:flex;
  align-items:center;
  gap:5px;
}

.list-chats-sidebar-content-filters{
  position:absolute;
  top:0px;
  left:320px;
  min-width:320px;
  height:100%;
  backdrop-filter: blur(6px);
  background-color: var(--background-blur);
  z-index:9999;
}

.list-chats-sidebar-chats{
  height: calc(100% - 160px);
  margin-top:20px;
  padding-bottom:10px;
  overflow: auto;
}

.list-chats-sidebar-chats .item-chat-user{
  padding: 12px 20px;
  height:72px;
  display:flex;
  align-items:center;
  cursor:pointer;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.list-chats-sidebar-chats .item-chat-user:hover {
  text-decoration: none;
  background-color: rgba(145, 158, 171, 0.08);
}

.list-chats-sidebar-chats .item-chat-user[selected=selected] {
  text-decoration: none;
  background-color: rgba(145, 158, 171, 0.16);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.list-chats-sidebar-chats .item-chat-user .item-chat-user-image{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  margin-right:15px;
}

.list-chats-sidebar-chats .item-chat-user .item-chat-user-image .image-user{
  width: 100%;
  height: 100%;
  text-align: center;
  object-fit: cover;
  color: transparent;
  border-radius: 50%;
}

.list-chats-sidebar-chats .item-chat-user .item-chat-user-image .image-channel{
  position:absolute;
  width: 40%;
  height: 40%;
  text-align: center;
  object-fit: cover;
  color: transparent;
  border-radius:50%;
  bottom:0px;
  right:0px;
}

.list-chats-sidebar-chats .item-chat-user .item-chat-user-info{
  min-width:0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:100%;
}

.list-chats-sidebar-chats .item-chat-user .item-chat-user-info h6{
  font-size:15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.list-chats-sidebar-chats .item-chat-user .item-chat-user-info span{
  font-size:14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(145, 158, 171);
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight:400;
  height: 20px;
  line-height: 1.6;
}

.list-chats-sidebar-chats .item-chat-user[read=false] .item-chat-user-info span {
  color: rgb(255, 255, 255);
}

.list-chats-sidebar-chats .item-chat-user .item-chat-user-time{
  min-width:36px;
  height:100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 10px;
}

.list-chats-sidebar-chats .item-chat-user .item-chat-user-time .message-read{
  min-width: 8px;
  min-height: 8px;
  max-width: 8px;
  max-height: 8px;
  background-color: rgb(0, 184, 217);
  border-radius: 50%;
}

/*Content Chat*/
.content-chat-selected{
  width:calc(100% - 320px);
}

/*Content Chat - Not Empty*/
.chat-selected-notempty{
  height:100%;
}

.chat-selected-notempty-header{
  display: flex;
  padding: 0px 20px;
  min-height: 72px;
  max-height: 72px;
  height: 72px;
  width:100%;
  border-bottom: 1px solid rgba(145, 158, 171, 0.2);
  align-items: center;
  gap:16px;
}

.chat-selected-notempty-header .header-logo{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.chat-selected-notempty-header .header-logo img{
  width: 100%;
  height: 100%;
  text-align: center;
  object-fit: cover;
  border-radius: 50%;
  color: transparent;
}

.chat-selected-notempty-header .header-logo .image-channel{
  position:absolute;
  width: 40%;
  height: 40%;
  text-align: center;
  object-fit: cover;
  color: transparent;
  border-radius:50%;
  bottom:0px;
  right:0px;
}

.chat-selected-notempty-header .chat-info{
  
}

.chat-selected-notempty-header .chat-info h6{
  font-size:15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.chat-selected-notempty-header .chat-info span{
  font-size:14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(145, 158, 171);
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight:400;
}

/**/
.chat-selected-notempty-header .actions-chat{
  position:absolute;
  right:20px;
}

.chat-selected-notempty-header .actions-chat .actions-chat-button{
  min-width: 36px;
  min-height:36px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:20px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius:50%;
}

.chat-selected-notempty-header .actions-chat .actions-chat-button:hover{
  background-color: rgba(145, 158, 171, 0.08);
}

.chat-selected-notempty-header .actions-chat .actions-chat-options{
  position:absolute;
  color: color: var(--color-main);
  min-width:160px;
  right:0px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border-radius: 10px;
  padding: 4px;
  backdrop-filter: blur(20px);
  background-color: var(--background-options);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 2px 0px, rgba(0, 0, 0, 0.24) -20px 20px 40px -4px;
  outline: 0px;
  margin-top: 10px;
}

.chat-selected-notempty-header .actions-chat .actions-chat-options span.item-option{
  height:34px;
  display:flex;
  gap:15px;
  align-items:center;
  padding: 6px 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight:400;
  border-radius: 6px;
  cursor:pointer;
}

.chat-selected-notempty-header .actions-chat .actions-chat-options span.item-option:hover{
  background-color: rgba(145, 158, 171, 0.08);
}

.chat-selected-notempty-header .actions-chat .actions-chat-options span.arrow-top{
  width: 14px;
  height: 14px;
  position: absolute;
  border-bottom-left-radius: 3.5px;
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
  border: 1px solid rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  background-color: var(--background-options);
  right: 11.4px;
  transform: rotate(135deg);
  top: -5px;
}

.chat-selected-notempty-messages{
  max-height: calc(100% - 72px);
  height: calc(100% - 72px);
  overflow-y: auto;
  width: 100%;
  overflow-x: hidden;
  padding:40px 24px;
}

.chat-selected-notempty-messages .item-message{
  display:flex;
  margin-bottom:20px;
}

.chat-selected-notempty-messages .item-message[type=bot]{
  justify-content:flex-end;
}

.chat-selected-notempty-messages .item-message[status=pending]{
  opacity:0.5;
}

.chat-selected-notempty-messages .item-message .message-info-user{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  width: 32px;
  height: 32px;
  margin-right: 16px;
}

.chat-selected-notempty-messages .item-message .message-info-user img{
  width: 100%;
  height: 100%;
  text-align: center;
  object-fit: cover;
  color: transparent;
  text-indent: 10000px;
}

.chat-selected-notempty-messages .item-message .message-content {
  max-width:320px;
  width:100%;
  display:flex;
  flex-direction: column;
  gap:5px;
}

.chat-selected-notempty-messages .item-message[type=bot] .message-content {
  align-items:flex-end;
}

.chat-selected-notempty-messages .item-message .message-content .message-time{
  font-size:12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(145, 158, 171);
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight:400;
}

.chat-selected-notempty-messages .item-message .message {
  background:var(--background-message-user);
  color: var(--color-message-user);
  width:100%;
  padding:12px;
  font-size:14px;
  font-family: 'DM Sans', sans-serif;
  border-radius:8px;
  display: flex;
  flex-direction: column;
}

.chat-selected-notempty-messages .item-message[type=bot] .message{
  background:var(--background-message-bot);
  color: var(--color-message-bot);
}

/*Type Message - Text*/
.chat-selected-notempty-messages .item-message .message .message-text{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.chat-selected-notempty-messages .item-message .message .message-text .message-text-button{
  background:#fff;
  padding:6px 12px;
  color:#161616;
  border-radius:4px;
}

/*Type Message - Image*/
.chat-selected-notempty-messages .item-message .message .message-image{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.chat-selected-notempty-messages .item-message .message .message-image img{
  width:100%;
  border-radius:8px;
}

/*Type Message - Video*/
.chat-selected-notempty-messages .item-message .message .message-video{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.chat-selected-notempty-messages .item-message .message .message-video video{
  width:100%;
  border-radius:8px;
}

.listempty{
  padding:0px 25px;
  font-family: 'DM Sans', sans-serif;
  font-size:12px;
  opacity:0.5;
}