body {
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

code {
  font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}

.modal-emoji {
  /*! autoprefixer: off */
  background-color: #fff;
  position: absolute;
  margin: -32rem 0 0 1rem;
  width: 281px;
  height: 26rem;
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  border-radius: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  bottom: 40px;
  right: 0
}

.modal-emoji .modal-content {
  flex-grow: 1;
  -webkit-box-flex: 1;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.modal-emoji .modal-content::-webkit-scrollbar {
  display: none
}

.modal-emoji .tab {
  overflow: hidden
}

.modal-emoji .tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px 11px;
  width: 50%;
  margin: auto;
  font-weight: 700
}

.modal-emoji .tab button.active {
  color: #0068ff;
  border-bottom: 3px solid
}

.modal-emoji .modal-header {
  padding: 5px 5px 0
}

.modal-emoji .hr-solid {
  display: block;
  border: 1px;
  width: 90%;
  background-color: #e5e5e5;
  height: 1px;
  text-align: center;
  margin: auto
}

.modal-emoji .vl-solid {
  border-left: 1px solid #e5e5e5;
  height: 70%;
  margin: auto 0
}

.modal-emoji .grid-container {
  display: grid;
  grid-template-columns: 70px 70px 70px 70px;
  grid-template-rows: 70px 70px 70px 70px
}

.modal-emoji .grid-container .grid-item {
  padding: 3px;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center
}

.modal-emoji .grid-container .grid-item:hover {
  background: #e9e9ec;
  border-radius: 5px
}

.modal-emoji .grid-container .grid-item>img.sticker {
  width: 64px
}

.modal-emoji .grid-container .grid-item>img.emoji {
  width: 40px
}

.modal-emoji .modal-footer {
  display: flex;
  display: -webkit-flex
}

.modal-emoji .modal-footer .footer-img-container {
  display: flex;
  overflow: scroll;
  width: calc(100% - 50px);
  -ms-overflow-style: none;
  scrollbar-width: none
}

.modal-emoji .modal-footer .footer-img-container::-webkit-scrollbar {
  display: none
}

.modal-emoji .modal-footer .footer-img-container .footer-item {
  margin: 8px 8px 0
}

.modal-emoji .modal-footer .footer-img-container .footer-item:hover {
  color: #e9e9ec;
  border-bottom: 3px solid;
  cursor: pointer
}

.modal-emoji .modal-footer .footer-img-container .footer-item.active {
  color: #0068ff;
  border-bottom: 3px solid
}

.modal-emoji .modal-footer .footer-img-container .footer-item>img {
  width: 32px;
  margin-bottom: 4px
}

.modal-emoji .modal-footer .btn-add {
  position: absolute;
  right: 0;
  height: 50px;
  width: 48px;
  margin: auto 0;
  padding: 16px;
  cursor: pointer
}

.menu-wrapper__left {
  width: 36px;
  text-align: center
}

.menu-wrapper__right {
  flex: 1 1
}

.logo {
  cursor: pointer
}

.welcome-label {
  height: 42px;
  background: #0068ff;
  color: #fff;
  border-radius: 8px;
  padding: 0 12px;
  margin-right: 14.7px;
  display: flex;
  align-items: center;
  position: relative
}

.welcome-label .text {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 300px
}

.triangle {
  width: 0;
  height: 0;
  border: 1px solid transparent;
  border-left-color: #0068ff;
  border-width: 5px 2px 5px 7px;
  position: absolute;
  right: -9px
}

.chat-wrapper {
  color: #383838;
  width: 100%;
  height: 100%;
  font-size: 16px
}

.color-default {
  color: #383838!important
}

.color-blue {
  color: #0068ff!important
}

.color-grey {
  color: #667685!important
}

.za-chat {
  top: 0;
  left: 0
}

.za-chat__wrapper {
  height: calc(100% - 78px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end
}

.za-chat__wrapper__history-box {
  height: 500px;
  width: 400px;
  padding: 0 8px
}

.za-chat__wrapper__chat-box {
  height: 100%;
  padding: 0 8px
}

.za-chat__head-box {
  height: 50px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 5px
}

.left-side .za-chat__head-box {
  left: 0;
  right: unset;
  flex-direction: unset
}

.left-side .za-chat__head-box .welcome-label {
  margin-right: unset;
  margin-left: 14.7px
}

.left-side .za-chat__head-box .welcome-label .triangle {
  right: unset;
  left: -9px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.left-side .za-chat__wrapper {
  flex-direction: row-reverse
}

.left-side .za-chat__wrapper__chat-box {
  height: 100%
}

.left-side .za-chat__wrapper__history-box {
  height: 500px;
  width: 400px;
  margin-right: 0
}

a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  /* font: inherit; */
  vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block
}

body {
  line-height: 1.15
}

* {
  outline: none;
  box-sizing: border-box
}

a {
  text-decoration: none
}

.chat-wrapper .box__footer .collapse,.chat-wrapper .box__footer .menu-item,.items-center {
  align-items: center
}

.justify-around,.za-chat .chat-wrapper .box__header .oa-info {
  justify-content: space-around
}

.justify-between {
  justify-content: space-between
}

.chat-wrapper .box__footer .collapse,.chat-wrapper .box__footer .menu-item,.justify-center {
  justify-content: center
}

.is-flex {
  display: flex
}

.mb-8 {
  margin-bottom: 8px
}

.mb-4 {
  margin-bottom: 4px
}

html {
  height: 100%;
  background: none
}

body {
  min-height: 100%;
  position: relative
}

a {
  color: #000;
  color: initial
}

.media {
  display: flex;
  position: relative
}

.avatar-bottom {
  position: absolute;
  bottom: 0
}

.has-one-line {
  -webkit-line-clamp: 1
}

.has-one-line,.has-two-lines {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical
}

.has-two-lines {
  -webkit-line-clamp: 2
}

.is-hidden {
  display: none!important
}

.wb-break-all {
  word-break: break-all!important
}

.overflow-init {
  overflow: visible!important;
  overflow: initial!important
}

.flex-shrink-0 {
  flex-shrink: 0
}

.button {
  cursor: pointer
}

.same-width {
  flex: 1 1;
  min-width: 0
}

figure.image {
  line-height: 0
}

figure.image.btn-download {
  border-radius: 2px
}

figure.image.btn-download .icon-download-holder {
  width: 100%;
  height: 100%;
  padding: 4px;
  background: #fff
}

figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

figure.image.is-ratio {
  position: relative
}

figure.image.is-ratio img {
  position: absolute;
  top: 0
}

.avatar {
  width: 2rem;
  height: 2rem;
  flex: none!important;
  -webkit-filter: drop-shadow(0 8px 20px rgba(0,0,0,.2));
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.2))
}

.avatar--oa {
  width: 48px;
  height: 48px
}

.avatar--welcome {
  width: 56px;
  height: 56px
}

.avatar img {
  border-radius: 50%
}

.za-chat {
  width: 100%;
  height: 100%;
  font-family: Roboto;
  position: absolute;
  right: 0;
  bottom: 0
}

.za-chat .chat-wrapper {
  color: #383838;
  font-size: 16px;
  width: 100%;
  position: relative
}

.za-chat .chat-wrapper .icon-wrapper {
  border-radius: 50%;
  margin-top: 28px;
  display: inline-block;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  bottom: 0;
  right: 0
}

.za-chat .chat-wrapper .box-wrapper {
  width: 100%;
  height: 100%;
  box-shadow: 0 25px 30px rgba(0,0,0,.03),0 25px 30px rgba(0,0,0,.03);
  border-radius: 24px;
  overflow: hidden;
  flex-direction: column;
  display: flex;
  -webkit-animation: thread_slide_up .2s forwards;
  animation: thread_slide_up .2s forwards;
  background: #fff
}

.za-chat .chat-wrapper .box__top {
  background: linear-gradient(45deg,#3386ff,#0068ff)
}

.za-chat .chat-wrapper .box__header {
  padding: 24px
}

.za-chat .chat-wrapper .box__follow {
  padding: 16px 24px
}

.za-chat .chat-wrapper .box__welcome {
  display: none
}

.za-chat .chat-wrapper .welcome__text {
  margin: 16px 24px;
  text-align: center;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.29;
  color: #99a3ad
}

@media screen and (min-height: 572px) {
  .za-chat .chat-wrapper .box__welcome {
      display:block;
      padding: 0 24px 24px;
      color: #fff;
      position: relative
  }
}

.za-chat .chat-wrapper .box__header .avatar--oa {
  margin-right: 8px
}

.za-chat .chat-wrapper .box__header .oa-info {
  color: hsla(0,0%,100%,.8);
  margin-left: 16px;
  display: flex;
  flex-direction: column
}

.za-chat .chat-wrapper .box__header .oa-info .ic-verify {
  position: relative;
  top: 2px;
  margin-left: 4px
}

.za-chat .chat-wrapper .box__header .media-right {
  line-height: 0;
  flex: none
}

.za-chat .chat-wrapper .box__header .media-right .icon+.icon {
  margin-left: 8px
}

.za-chat .chat-wrapper .box__body {
  background: #fff;
  padding: 16px 18px;
  overflow: hidden auto;
  font-size: 14px;
  flex-grow: 1;
  position: relative
}

.za-chat .chat-wrapper .box__body .noti-remind {
  font-size: 14px;
  line-height: 1.29;
  text-align: center;
  color: #99a3ad;
  padding: 0 6px;
  margin-bottom: 16px
}

.za-chat .chat-wrapper .box__body .time {
  color: #fff;
  background: #bfc6cc;
  display: inline-block;
  border-radius: 8px;
  padding: 10px;
  margin: 10px auto 16px;
  height: 34px
}

.za-chat .chat-wrapper .box__body .media-right {
  flex: 1 1
}

.za-chat .chat-wrapper .box__body .media-right .card {
  width: calc(100% - 56px)
}

.za-chat .chat-wrapper .box__body .media-left {
  margin-right: 14px
}

.za-chat .chat-wrapper .box__body .media-left.avatar {
  margin-right: 16px
}

.za-chat .chat-wrapper .box__body .media-left .card {
  margin-left: 90px
}

.za-chat .chat-wrapper .box__body .media-left .message__content {
  flex-direction: row-reverse
}

.za-chat .chat-wrapper .box__body .card {
  position: relative
}

.za-chat .chat-wrapper .box__body .card .btn-resend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4e49;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: auto 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,.02),0 4px 8px rgba(0,0,0,.02)
}

.za-chat .chat-wrapper .box__body .card--has-reaction {
  margin-bottom: 24px
}

.za-chat .chat-wrapper .box__body .card__image {
  position: relative
}

.za-chat .chat-wrapper .box__body .card__file,.za-chat .chat-wrapper .box__body .card__image {
  border-radius: 10px;
  overflow: hidden;
  max-width: 271px
}

.za-chat .chat-wrapper .box__body .card__image.image.multi-image.double {
  max-height: 134px
}

.za-chat .chat-wrapper .box__body .card__image.image.multi-image.triple {
  max-height: 89px
}

.za-chat .chat-wrapper .drag-drop-zone {
  position: absolute;
  inset: 1% 0 0 0;
  display: grid;
  place-items: center;
  background-color: #cacaca;
  opacity: .7;
  margin-left: 8px;
  width: calc(100% - 16px);
  border-radius: 24px;
  z-index: 1;
  border: 3px solid #787878;
  color: #787878;
  font-size: 1.5rem
}

.card__image.multi-image {
  display: flex
}

.card__image.multi-image.double>div {
  width: 50%!important
}

.card__image.multi-image.triple>div {
  width: 33.33%!important
}

.card__image.multi-image div {
  margin-right: 2px
}

.card__image.multi-image div:last-child {
  margin-right: 0
}

.more-img-container {
  background-size: cover;
  background-position-x: 50%;
  background-position-y: center;
  background-attachment: scroll;
  background-origin: padding-box;
  background-origin: initial;
  background-clip: border-box;
  background-clip: initial;
  background-color: transparent;
  background-color: initial
}

.more-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg,rgba(0,0,0,.75),rgba(0,0,0,.75));
  position: relative
}

.more-img>p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  font-family: Roboto;
  font-size: 27px;
  font-style: normal;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: 0;
  text-align: left
}

.chat-wrapper .box__body .card__wrapper {
  display: inline-block;
  position: relative;
  min-width: 4rem
}

.chat-wrapper .box__body .card__wrapper .message__content {
  display: flex;
  position: relative;
  min-width: 4rem;
  align-items: center
}

.chat-wrapper .box__body .card__reply {
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 8px
}

.box__footer .card__reply {
  background: #f3f4f5;
  padding: 8px;
  border-radius: 8px
}

.card_reply_quote {
  border-left: 2px solid #0068ff;
  padding-left: 8px
}

.media .card__reply {
  background: #e4e8ec
}

.is-user .card__reply {
  color: hsla(0,0%,100%,.75);
  background: #3386ff
}

.is-user .text-bold {
  color: #fff
}

.is-user .card__reply__content {
  color: hsla(0,0%,100%,.75)
}

.is-user .card_reply_quote {
  border-left: 2px solid hsla(0,0%,100%,.5);
  padding-left: 8px
}

.card__reply {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  align-items: center
}

.chat-wrapper .box__body .quote-media,.icon-download-container {
  width: 2.25rem;
  height: 2.25rem;
  flex: none
}

.chat-wrapper .box__body .quote-media {
  margin-right: 8px
}

.chat-wrapper .box__body .quote-media.rounded {
  border-radius: 100px;
  background: hsla(0,0%,100%,.5);
  padding: 9px
}

.chat-wrapper .box__body .card__reply__image {
  width: 2.25rem;
  height: 2.25rem;
  margin-right: 8px;
  flex: none
}

.chat-wrapper .box__body .card__link {
  max-width: 260px
}

.chat-wrapper .box__body .card__link a:hover {
  text-decoration: underline
}

.card__link a {
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  text-align: left
}

.chat-wrapper .box__body .is-user .card__link a {
  color: #fff
}

.chat-wrapper .box__body .card__link {
  word-break: break-all
}

.chat-wrapper .box__body .card__link .content {
  line-height: 1.4
}

.chat-wrapper .box__body .card__link .image {
  padding-top: 56.25%;
  margin-left: -12px;
  margin-right: -12px
}

.chat-wrapper .box__body .card__link .link-desc {
  background: #f3f4f5;
  margin: -12px;
  padding: 12px;
  border-radius: 0 0 5px 5px
}

.chat-wrapper .box__body .card__content {
  background: #f3f4f5;
  padding: 12px;
  line-height: 1.45;
  border-radius: 8px;
  display: inline-block;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0
}

.chat-wrapper .box__body .card__content .zemoji {
  max-height: 1.5rem!important;
  max-width: 1.5rem!important
}

.back-ground-grey {
  background: #f3f4f5!important
}

.card__file .card__reply__name {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  align-items: center
}

.card__file.is-flex {
  align-items: center
}

.card__file .file-info {
  margin-right: 12px;
  max-width: 170px
}

.card__file .file-info .file-name {
  width: 100%;
  white-space: nowrap;
  overflow: hidden
}

.card__file .file-info .file-name .first {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis
}

.card__file .file-info .file-name .last {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: clip
}

.card__file figure {
  padding: 6px
}

.card__history h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 5px
}

.card__history h3,.card__history p {
  font-family: Roboto;
  font-style: normal;
  letter-spacing: 0;
  text-align: left
}

.card__history p {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-bottom: 16px;
  color: #667685
}

.chat-wrapper .box__body .media-right .card__reaction {
  z-index: 10;
  right: -65px;
  box-shadow: 0 8px 20px rgba(0,0,0,.23137254901960785)
}

.chat-wrapper .box__body .is-user .card__reaction,.chat-wrapper .box__body .media-right .card__reaction {
  position: absolute;
  background-color: #fff;
  display: inline-flex;
  bottom: 14px;
  align-items: center;
  border-radius: 100px;
  padding: 8px 16px
}

.chat-wrapper .box__body .is-user .card__reaction {
  z-index: 1;
  left: -125px;
  box-shadow: 0 4px 8px rgba(0,0,0,.02),0 4px 8px rgba(0,0,0,.02)
}

.chat-wrapper .box__body .card__reaction * {
  margin-left: 8px;
  margin-right: 8px
}

.chat-wrapper .box__body .card__reaction .icon {
  width: 24px;
  height: 24px
}

.chat-wrapper .box__body .card__actionholder {
  position: absolute;
  right: 12px;
  bottom: -12px;
  z-index: 5
}

.chat-wrapper .box__body .is-user .card__actionholder {
  position: absolute;
  left: 12px;
  right: inherit;
  bottom: -12px;
  z-index: 5
}

.chat-wrapper .box__body .card__actionholder .btn-wrapper {
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem
}

.chat-wrapper .box__body .card__actionholder .btn-wrapper,.chat-wrapper .box__body .card__actionholder .reaction-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,.02),0 4px 8px rgba(0,0,0,.02)
}

.chat-wrapper .box__body .card__actionholder .reaction-wrapper {
  border-radius: 100px;
  padding: 4px 8px
}

.chat-wrapper .box__body .card__actionholder .reaction-wrapper * {
  margin: 0 2px
}

.chat-wrapper .box__body .card__actionholder .icon {
  width: 1rem;
  height: 1rem
}

.chat-wrapper .box__body .card+.card {
  margin-top: 8px
}

.chat-wrapper .box__body .media+.media {
  margin-top: 28px
}

.chat-wrapper .box__body .media.is-user {
  text-align: right;
  justify-content: flex-end;
  color: #fff
}

.chat-wrapper .box__body .media.is-user .card__content {
  overflow-wrap: anywhere;
  text-align: left;
  background: #0068ff;
  min-width: 6rem
}

.chat-wrapper .box__body .media.is-user .card__content.cant-send {
  background: #99c3ff
}

.chat-wrapper .box__footer .input-wrapper,.chat-wrapper .box__footer .language-change-wrapper {
  justify-content: flex-end;
  background: #fff;
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 22px 8px
}

.chat-wrapper .box__footer .menu-wrapper {
  background: #fff;
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 22px 8px
}

.chat-wrapper .box__footer .menu-item {
  display: flex;
  font-size: 13px
}

.chat-wrapper .box__footer .menu-item .one-line {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.chat-wrapper .box__footer .collapse {
  width: 1rem;
  height: 1rem;
  background-color: #778d9e;
  margin-left: .3rem
}

.chat-wrapper .box__footer .collapse .icon {
  width: 1rem;
  height: 1rem
}

.language-change-wrapper>p {
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  text-align: left;
  color: #667685
}

.chat-wrapper .box__footer .input-wrapper {
  caret-color: #0068ff
}

.chat-wrapper .box__footer .input-wrapper .hint-input {
  position: absolute;
  bottom: 68px;
  left: 21px;
  padding: 16px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.33;
  color: #fff;
  background-color: #0043a6;
  border-radius: 8px;
  z-index: -10;
  opacity: 0
}

.chat-wrapper .box__footer .input-wrapper .hint-input:after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 30px;
  width: 0;
  height: 0;
  border-color: #0043a6 transparent transparent;
  border-style: solid;
  border-width: 10px 9.5px 0
}

.chat-wrapper .box__footer .input-wrapper .hint-input--active {
  -webkit-animation: zl_bounce_down .5s linear;
  animation: zl_bounce_down .5s linear;
  -webkit-animation-iteration-count: 10;
  animation-iteration-count: 10;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards
}

.chat-wrapper .box__footer .input-wrapper input {
  font-family: Roboto;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-align: left
}

.chat-wrapper .box__footer .input-wrapper i {
  margin: 0 10px
}

.chat-wrapper .box__footer .input-wrapper .icon-btn {
  height: 32px;
  width: 32px;
  display: grid;
  justify-content: center;
  align-content: center
}

.chat-wrapper .box__footer .input-wrapper .icon-btn.active {
  background-color: #bfd7ed;
  border-radius: 3px
}

.chat-wrapper .box__footer .reply-wrapper {
  padding: 12px 24px 0
}

.chat-wrapper .box__footer .reply {
  border-left: 2px solid #0068ff;
  padding-left: 8px;
  align-items: center
}

.chat-wrapper .box__footer .reply__info {
  flex-grow: 1
}

.chat-wrapper .box__footer .reply__content {
  color: #667685
}

.chat-wrapper .box__footer .reply__content .zemoji {
  max-height: 1.5rem!important;
  max-width: 1.5rem!important
}

.chat-wrapper .box__footer .reply__image {
  width: 2.25rem;
  height: 2.25rem;
  margin-right: 8px
}

.chat-wrapper .box__footer .ic-close,.chat-wrapper .box__footer .ic-sticker,.chat-wrapper .box__footer .reply__image {
  flex: none
}

.chat-wrapper .box__footer .ic-sticker {
  position: relative
}

.chat-wrapper .box__footer input {
  font-size: 16px;
  color: #383838;
  border: none;
  width: 100%;
  margin-left: 8px
}

.chat-wrapper .box__footer input::-webkit-input-placeholder {
  color: #99a3ad
}

.chat-wrapper .box__footer input:-ms-input-placeholder,.chat-wrapper .box__footer input::-moz-placeholder,.chat-wrapper .box__footer input::-ms-input-placeholder,.chat-wrapper .box__footer input::-webkit-input-placeholder,.chat-wrapper .box__footer input::placeholder {
  color: #99a3ad
}

.text-warning {
  color: #ef4e49!important
}

.fs-14 {
  font-size: 14px!important
}

.fs-13 {
  font-size: 13px!important
}

.fs-12 {
  font-size: 12px!important
}

.text-bold {
  font-weight: 500
}

.text-center {
  text-align: center
}

.color-blue {
  color: #0068ff
}

.color-black {
  color: #001a33!important
}

.color-grey {
  color: #667685
}

.icon {
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block
}

.icon.ic-union {
  background: url(/static/static/media/ic-union.787d1688.svg) 50%/contain no-repeat
}

.icon.ic-heart {
  background: url(/static/static/media/ic-heart.1708ebfe.svg) 50%/contain no-repeat
}

.icon.ic-love {
  background: url(data:image/jpeg;base64,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) 50%/contain no-repeat
}

.icon.ic-laugh {
  background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAbABsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAkACQDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+7r4k/Efw78LfDFx4m8RPcSqJY7HSdI09En1jxBrNyGFjouj2zyRJNe3bKxMk0sNnZW6T3+oXNrYW1xcxfJ8bca8P+H/DuO4n4lxscHluBgtlz18VXnpQwmEpL3q2JrztCnBaLWc3GnGUl7WQZDmPEmZUcsy2mpVal51atRuNDC4eGtXE4iok+SlSjq7KU5ycadOM6k4Qf5O/EL44f8FD/Hnje/vvBHwv8GeHPhFod1EI/DFn8WbDwz8S/G+n7la6fRdZg8PeJdKg1ARsRpz614k8A2lxJH5F/Z6esg1Afxbm30huIONk1kue4vg7C4jn+p4fKsohi8Th6Tv7J5zmeNmq0q81Z1YZPgo06F1GnWxMouU/2jDcI8HZBRjTxMHm+YtWq43HUp1MHCola1DA06lJRo3611jKsl7y5f4a9V+MsX7RXh/wjbz/AAC1Pxd4j+IWo6la2MEnjX4x61pfhHw3ZSRTz3niDxENag8avqNva+UlrBpOheGdUu7y9u7cOLXT47m8g+Myvj7xMwWK+tZj4i8UUMNTg6sl7mbSryTXLRpYXGp4SLne8p1nTjCCdrz5ImOG/wBWsRVdPG5Lk3sEneNHLKNKpN3SUIVMG8LVg3vzOvGyT3lZPrv2dv2oPjxYJF4U/bA8AeGPCepLrEGh6X8T/AviO117wbrAuYkGnX2t25t9L1bRlu7omxvNWvPDnh/S7O+aIS2VvYSf2gP33w7+kzk+ZZ5l3CPF2KpUsdmVqOXZ79SqZXQq4q/JDBZthpVsVhcNi67s6OKweKlg6t7VKWEas/C4h8PcHWwtfNeE6lepGjTlXxOTYh+0rxhG7qTwFaydaFKHvfVasquJcE3TrV5JwX6OAhgGUhlYAgg5BB5BBHBBHII61/WiaautU9U1s0fkG2j3PyO/ab+Mek3P7QV/Y6teyNo3wxtrTwzo1iHUW/8AwkOradZa54l1VEdkjN28N/pOhLNId1ummXkULrHe3Ik/y3+lzxbm3F/ivl/AGBrOOR8HYHCYrG03UkqFbOcypvESq1IRvzzw2G9hSgpJuDVRx5eduX9j+C/AGMrcB184weGU8dnlavUlU5ffWBwc50MPQjLVqM6kK9dpWUvaU3K7hHl+afAnhf8Aa6vPAel/tDWHxd8Ran8T57ux8V3v7MY03wWvwtk8JTaukt98KLG+a2i1SLxXY+FpZLa38fyeIWF74ptEmmsU0y4aGPuyPG8EYbEz4eweV0o4PBqOFhxDOpN4zFYinTipY6dKVPmjQr1k5woKVoU3Fcr6fOZ5GhhqlbKs0yulh7wqU5Y/mxSx+GxLpt08RJKo6M6Kq8vPhfYK1Fu1T2kbv7X/AGj9O+Mvi23+HngT4PeJLj4ead4q8S34+J/xW02x0bVdd8E+CtH0DUNRS08M6drfm2Y8ReLdcXS9BstUm0/UbfRLSXUNRktpLiO0il+lWI4foYbEYnH0YYr2GHvhsE5OEcTiJTjG1ScYy5adOnzzkn8TSSTXMfnGR+yoYqriMZQ+t+yivq+DqTqQpV60pxjetKk1N0qUOapKEZwdRqMFJJtr5FS68cfCLXPG3ww+LHjjVPi98ObzQ9A1PwH488ZQ+H08X/aNVm1rTvFngPxUmkQ2UHiGOwSy0vWNL15tJ0+SSy1ufSrpbyWxW6b8A8SsHlGf5dh824cw1PKc0oYnEUsdl9OrN0ouhGlWwuOwtTkgqbnzTpyjFRtJXS93mn++8GZJjuIKtPGZbl0cFKipvEww3t/qjlDkdKpQ9rKpKjKSlKNSl7WpGLpRqRcVU5F+nf7JvxQXxb8IbK01jUJb7UvBGs6h4Hl1K5mae51Gw0u3sNR8O3d1NKfNmvj4X1fRIdQuJWkkutQhurp3LTED/Rb6OXiFX468J+H8xzerKec5W8Rw9mtWcuapWxeUOFKNao2+Z1KuFnhqlSUm5VJylVk7zsv518VuFJcOcZ4/DUKCo4fHU6OaUqEY8kaLxbqRxFKEVpGnHGUcT7KMUowpuMEvdPzE+Lnw38Na5+3No/gn4p/2z/wgHjD9oUR+IINM8S6/4Tl1e18a/B7xRqHgG1uNe8M6lo2swaRP8Q5PCejLb2eqWovdbbTdMk88sYW/n7Jslyb/AInH8RuH+LMBhsdS4kyDKc+ySGOpqcJxjhYUasMNJ2ek+SMuR705Qb0cT95wPEec4PwBynMuF8bPB43KcLjMLXlRjCbhUw+a4f6xOdKpGpTnUWX/AFyrepTko0eeqktJH2rF+yP8EdJ8J/Ey702x+JVlP4b8T6ppuiGD4/fH5IrGytrbRnggW3/4Wd9nmCNd3B33MU0jeZh3YKgX+vf+IY8AxVWceFcqjNSaUo0pxeija7jUV/V3f3H85VfEXi7EVYzxGY4XETqJOc6+SZDWnJtvVyqZZKX4nf8Aib9kj4KWWu/D6wtrb4oR2mu+J9S07VYv+Gg/2g3+1Wdv4I8W6xDD5knxQeWDZqOmWNx5ts8MzeR5LSNBLNFJrPw14F5qcXw1l7jKTUlL28k0qc5WtKs7apbemzaOePH3E9pP61lqcUmmuHeHI7tLplKvo3vfvukz5I/a6/Ze+BPhD4N/HrXdLtfiPYeONNXwp4U+Eurj43/GvVrzRviB45j0PR/Cl3Haa78QNW07UbWz8TazBquqwavYajaDRrbUBNAbSNkX5PjTg3w04Y4T4kz3GcN5NhcLlWWYrGTryoK1N06LmpP2knGfvWbUlLmWiWyPvfD3jrjrMOKMkyrDZovquKxTnj8JQy7LMLTr4OhGdXFU28Jg6FSEqlGnKnTlTnCftpU+WXMz2n9iLwxeat8OPHOtW0MsWm6t8V9cl0srcz26SWmn+FfBWhymNY5Y1dYtQ0q+ti+3Ie3eMn93gfiP0NctxuO8IcRndShLD0eIeNOJM5wFLmnSUcDW+o4WhyxTiuS+EqKEtbwUdT3PH7MKVDjfCYGdZV8Tl/DeV4XG1HFTbxbrY7E1OZ8r95xxFOUl3k9NTV/bt/ZovfipoQ+IHhKHVn8R6JpVrYa7b+GmWLxU2naLq8XiHwv4w8ISGKZj4z+G3iBG8SaDBHHLPeESLa297qVppljcfW/SN8K+I87xPDXi14bwUvEbw8lOrQwKfJ/rFkcpOpjMobvG9ZKVWph48yc+epCHNV9lF+L4Pce4HI5Y7hLiKVNcPZ9NuNaunLD4PHVKX1ef1hXssHjqPLhsTJ2jBWc5QpSrTj4V8JP209Gsvhn4s8EftFXLeGPiDqd1LdW3xC0/Q9Vn+F/xCnFrpdld6hBqunx6tH8PtcaTTvO1fwr48n0SSDUbqW18PXuvWkH2lfV8MfpLeH3HeAeBzbM6PCPGGGtQzfhriKX9l4zD42CVOtTpfWlTp1488W4ypzad0lreKfGPgxnuXYyeO4XoPPMkqydWhTw1WnUx+Eozlz06cqLdOWOpKMrU8RgoVr04qWIp0JOz+qfiP+2X+y/pOp/DnWE+NHg3xFBpXijVr67sfAt3c/ELXhbyeAfGFhE0PhvwPa+INfuXlvdQsrVI7fTpH866iUhQxI/Xs48ROBMlwyzDNOLuHsHg6PNUqVqua4PlUVSqapRqylJvZKMW29Emz4XAeGvHmYVXh6HC2bwnLljz4vDPAYeL51rPE454fD04qzvKdVI+AfGviH4n/tofGa2tPCvhzWvDHhC21ODVvCPgrXlhNzp122hf8IxcfF74tvo17f2GkQ2mgy39n4M8FNeSalbHVtVN95/iS/tbLwn/AAr4m+IeffSpzyn4Q+D9LF/6ivF0J8ccdToV6GX/AFOhNOrhcPUmoKpCSVoxXM8TJ8kFKEuY/ovhXh/IvBLJsRxRxRi8NjOIqtF08JhcPJSbqKSq08Bl6qxjUqP28YVMXjOSNP8AdUnDloUnPFftB8M/AGj/AAu8B+GPAOgl5NO8NabHZLdTJGlxqF3JJJdalqt2sQEYvNV1K4u9Ru9g2/aLmTbxiv794P4WyrgjhfIuE8lpeyyvIMuw+XYSNkpShQhadapy6OrXquderL7VSpJttu5/KfEOeY3iXO8zz3MJc2MzPFVMVVs24w5nanRg5a+zo0owo009oQijuq+kPGPAPiD+zL8IviNqc+v6noNzoXiS7O6+8Q+D9RuPDWpanKAFSfWUscabrtzEo2RXGt2GoTRR/u0dYwFH454heAXhP4oVXiuLuEcBisys1/a+DTy7NXtrUxuE9nVrtWSTr+10STukkvuuHPEjjDhelHDZZmtSWCj8GBxsY43C011jRhWvLDxb1ccPOkm9Wr6nmtv+w/8AChJQ174l+J2qW+7dJZT+JtM02KY8DMl14d8PaJqmSAFLpqCPgD5u9flGA+hD4BYLFQxNXJM7zSMJKUcJmmfYnEYT3Zcyi6VKnQlKHRwlUcWtGnqfWVvHfjyrTcKc8owsmre2w+XN1VpbT6xiK9JPrf2e59MeCfh/4L+HGjroPgfw3pXhvTN/mzRadbLHNfXOMNe6pevvvdV1CX/ltf6jcXV5MeZJmr+nOHOF+HeEcso5NwxkuW5FllBJU8HlmEo4WjdK3PNUoxdWq/tVarnUlvKTPy3N86zbPsXLHZxmGKzHFS09riq0qjhHpTpRb5KNJfZpUowpx6RR2Ne8eWD/2Q==) 50%/contain no-repeat
}

.icon.ic-like {
  background: url(data:image/jpeg;base64,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) 50%/contain no-repeat
}

.icon.ic-cried {
  background: url(data:image/jpeg;base64,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) 50%/contain no-repeat
}

.icon.ic-haha {
  background: url(data:image/jpeg;base64,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) 50%/contain no-repeat
}

.icon.ic-wow {
  background: url(data:image/jpeg;base64,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) 50%/contain no-repeat
}

.icon.ic-angry {
  background: url(data:image/jpeg;base64,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) 50%/contain no-repeat
}

.icon.ic-close {
  background: url(/static/static/media/ic-close.ffd25f95.svg) 50%/contain no-repeat
}

.icon.ic-sticker {
  background: url(/static/static/media/ic-sticker.7fbdc6a2.svg) 50%/contain no-repeat
}

.icon.ic-send {
  background: url(/static/static/media/ic-send.d2a07139.svg) 50%/contain no-repeat
}

.icon.ic-reply {
  background: url(/static/static/media/ic-reply.e185fd82.svg) 50%/contain no-repeat
}

.icon.ic-resend {
  background: url(/static/static/media/ic-resend.3ce8b22a.svg) 50%/contain no-repeat
}

.icon.ic-verify {
  width: 1rem;
  height: 1rem;
  background: url(/static/static/media/ic-verify.29bf76e2.svg) 50%/contain no-repeat
}

.icon.ic-arrow-up {
  background: url(/static/static/media/ic-arrow-up.18f8de43.svg) 50%/contain no-repeat
}

.icon.ic-arrow-down {
  background: url(/static/static/media/ic-arrow-down.5bafcc7b.svg) 50%/contain no-repeat
}

.icon.ic-keyboard-line {
  background: url(/static/static/media/ic-keyboard-line.b91fc6b8.svg) 50%/contain no-repeat
}

.icon.ic-file {
  background: url(/static/static/media/ic-file.dd2167a9.svg) 50%/contain no-repeat;
  width: 100%;
  height: 100%
}

.icon.ic-micro {
  background: url(/static/static/media/ic-micro.e571d80e.svg) 50%/contain no-repeat;
  width: 100%;
  height: 100%
}

.icon.ic-file-grey {
  background: url(/static/static/media/ic-file-grey.5a6f4c29.svg) 50%/contain no-repeat;
  width: 100%;
  height: 100%
}

.icon.ic-download {
  background: url(/static/static/media/ic-download.bc48b535.svg) 50%/contain no-repeat;
  width: 100%;
  height: 100%
}

.icon-stt {
  display: inline-block
}

.icon-stt.ic-check {
  background: url(/static/static/media/ic-check.1441d4c4.svg) 50%/contain no-repeat;
  width: .7rem;
  height: .7rem
}

.icon-stt.ic-double-check {
  background: url(/static/static/media/ic-double-check.3cb6fbf8.svg) 50%/contain no-repeat;
  width: 1rem;
  height: .6rem
}

.icon-stt.ic-seen {
  background: url(/static/static/media/ic-seen.85c84da8.svg) 50%/contain no-repeat;
  width: 1rem;
  height: 1rem
}

.fa,.fal,.far,.fas {
  color: #667685;
  cursor: pointer
}

.avatar--user {
  position: absolute;
  right: 22px;
  bottom: 22px;
  border-radius: 50%;
  border: 2px solid
}

.username {
  text-align: center;
  font-weight: 600
}

.login-another {
  text-align: center;
  width: 100%;
  font-weight: 400;
  font-size: .8rem;
  color: #0068ff
}

.login-another>a {
  color: #0068ff
}

.login-another-wrapper {
  display: flex;
  align-items: center;
  padding: 22px 8px;
  text-align: center
}

.modal-header {
  padding: 5px 5px 0
}

.modal-footer {
  display: flex
}

.modal-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
  flex-grow: 1;
  overflow: auto
}

.modal-content::-webkit-scrollbar {
  display: none
}

.grid-container {
  display: grid;
  grid-template-columns: 70px 70px 70px 70px
}

.grid-container .grid-item {
  padding: 8px;
  text-align: center;
  cursor: pointer;
  height: 70px
}

.grid-container .grid-item:hover {
  background: #e9e9ec;
  border-radius: 5px
}

.hr-solid {
  display: block;
  border: 1px;
  width: 90%;
  background-color: #e5e5e5;
  height: 1px;
  text-align: center;
  margin: auto
}

.is-margin-topbot {
  margin: 16px 0
}

.vl-solid {
  border-left: 1px solid #e5e5e5;
  height: 70%;
  margin: auto 0
}

.footer-img-container {
  display: flex;
  overflow: scroll;
  width: calc(100% - 50px);
  -ms-overflow-style: none;
  scrollbar-width: none
}

.footer-img-container::-webkit-scrollbar {
  display: none
}

.footer-item {
  margin: 8px 8px 0
}

.footer-item:hover {
  color: #e9e9ec;
  border-bottom: 3px solid;
  cursor: pointer
}

.footer-item.active {
  color: #0068ff;
  border-bottom: 3px solid
}

.footer-item>img {
  width: 32px;
  margin-bottom: 4px
}

.tab {
  overflow: hidden
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px 11px;
  width: 50%;
  margin: auto;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: #667685
}

.box__body .center-items>* {
  margin-bottom: 24px
}

.center-items * {
  margin: auto;
  text-align: center
}

.box__body>.bounding {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center
}

.box__body .center-items {
  width: 100%
}

.box__body .center-items .image.avatar {
  margin-bottom: 8px
}

.box__body .center-items>div>p.text-bold {
  margin-bottom: 16px
}

.tab button.active {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: #0068ff;
  border-bottom: 3px solid
}

.btn-add {
  position: absolute;
  right: 0;
  height: 50px;
  width: 48px;
  margin: auto 0;
  padding: 16px;
  cursor: pointer
}

.video video::-webkit-media-controls-fullscreen-button {
  display: none!important
}

.video .video-btn-play {
  position: absolute;
  width: 48px!important;
  height: 48px!important;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}

.video .video-btn-play:hover {
  cursor: pointer
}

.video .time-video {
  left: 12px;
  bottom: 15px;
  position: absolute;
  background-color: rgba(0,0,0,.5);
  border-radius: 100px;
  padding: 7px 12px;
  width: 54px;
  height: 24px;
  text-align: center;
  line-height: 100%;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #fff
}

.inline {
  display: inline-flex!important;
  align-items: center!important
}

.clickable {
  cursor: pointer
}

.container-btn-show {
  bottom: 0;
  right: 0;
  width: 100%;
  min-width: 420px;
  height: 80px;
  position: absolute;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  padding: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  justify-content: space-between
}

.container-btn-show>figure,.container-btn-show>img,.container-welcome-text {
  margin: 12px 8px
}

.welcome-text {
  background: #0068ff;
  border-radius: 8px;
  padding: 12px;
  color: #fff
}

.oa-name {
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  margin-bottom: 4px
}

.oa-desc,.oa-name {
  font-family: Roboto;
  font-style: normal
}

.oa-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  text-align: left;
  color: #667685
}

.oa-active {
  width: 12px;
  height: 12px;
  background-color: #00c578;
  bottom: 0;
  border-radius: 50%
}

.headchat,.oa-active {
  position: absolute;
  right: 0
}

.text-desc {
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
  text-align: left;
  color: #667685
}

.box__header .oa-active {
  border: 2px solid #fff
}

.box__header .oa-name {
  color: #fff
}

.box__header .media-left {
  max-width: 80%;
  overflow: hidden
}

.circle-icon {
  background: hsla(0,0%,100%,.1);
  display: inline-flex;
  align-items: center;
  border-radius: 50%;
  width: 40px;
  height: 40px
}

.circle-icon i {
  margin: auto
}

.circle-icon+.circle-icon {
  margin: 0 0 0 24px
}

.circle-icon:hover {
  background-color: #89c4f4
}

.btn-slide {
  background: #f5f6f8;
  border-radius: 100px;
  width: 32px;
  height: 32px
}

.btn-slide i {
  color: #778d9e
}

.box__welcome h1 {
  font-size: 27px;
  font-weight: 500;
  line-height: 42px
}

.box__welcome h1,.box__welcome h3 {
  font-family: Roboto;
  font-style: normal;
  letter-spacing: 0;
  text-align: left
}

.box__welcome h3 {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px
}

.box__follow {
  border-bottom: 1px solid #e4e8ec
}

.box__follow p {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: #667685
}

.zbtn {
  align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  min-width: 100px
}

.zbtn-info {
  background: #edf5ff;
  -webkit-box-flex: 0;
  color: #0068ff
}

.zbtn-clear,.zbtn-info,.zbtn-normal {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px
}

.zbtn-clear,.zbtn-normal {
  background: #e4e8ec;
  letter-spacing: 0
}

.zbtn-clear {
  background: #fff
}

.zbtn-primary {
  color: #fff;
  -webkit-box-flex: 0;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  background: #0068ff
}

.welcome.zbtn-clear,.zbtn-normal.welcome,.zbtn-primary.welcome {
  height: 58px;
  padding: 16px
}

.full-width {
  width: 100%
}

.footer-wrapper {
  border-top: 1px solid #e4e8ec
}

.action-container {
  display: inline-flex;
  justify-content: space-between;
  width: 100%
}

.drop-up {
  position: relative;
  cursor: pointer
}

.drop-up-content {
  min-width: 160px;
  background-color: #121415;
  border-radius: .5rem;
  position: absolute;
  bottom: 36px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  z-index: 1
}

.drop-up-content a {
  display: block;
  color: #fff;
  padding: 12px 16px;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #060707
}

.drop-up-content :last-of-type {
  border-bottom: none
}

.drop-up-content a:hover {
  background-color: #383838
}

.drop-up-content :first-child:hover {
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem
}

.drop-up-content :last-of-type:hover {
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem
}

.drop-up-content .arrow-down-triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #121415;
  position: absolute;
  left: 50%;
  bottom: -10px;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  z-index: -1
}

.dropdown {
  position: relative
}

.dropdown-content {
  display: block;
  position: absolute;
  background-color: #fff;
  min-width: 350px;
  z-index: 15;
  border-radius: 8px;
  padding: 2px;
  top: 55px;
  right: -60px;
  box-shadow: 0 8px 16px rgba(1,53,129,.25),0 4px 8px rgba(0,0,0,.02)
}

.dropdown-content a {
  color: #000;
  padding: 12px 16px;
  display: block;
  font-family: Roboto;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
  border-radius: 5px
}

.dropdown-content a:hover {
  background-color: rgba(28,30,33,.1)
}

.dropdown-content>.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 14px solid #fff;
  position: absolute;
  right: 70px;
  top: -13px;
  z-index: -1
}

.btn-show .triangle {
  width: 0;
  height: 0;
  border-color: transparent transparent transparent #0068ff;
  border-style: solid;
  border-width: 5px 2px 5px 7px
}

.btn-show p {
  font-weight: 500
}

.btn-show p,.status-container {
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  line-height: 18px;
  letter-spacing: 0;
  text-align: right
}

.status-container {
  font-weight: 400;
  color: #99a3ad;
  padding: 8px 0
}

.card__content .sound-bar {
  margin: 0 10px
}

.text-welcome {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px
}

.text-hint-welcome {
  font-size: 18px;
  line-height: 24px;
  color: #778d9e
}

.notification-number,.text-hint-welcome {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center
}

.notification-number {
  position: absolute;
  right: -4px;
  top: -4px;
  height: 16px;
  background: #ef4e49;
  border-radius: 100px;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  padding: 0 5.5px
}

.spinning {
  -webkit-animation-name: spin;
  animation-name: spin;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -10px
}

.onlogin-loading {
  margin-top: 150px
}

img.logo-welcome {
  width: 40px;
  height: 40px
}

@-webkit-keyframes spin {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
  }

  to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn)
  }
}

@keyframes spin {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
  }

  to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn)
  }
}

.za-chat .zl_chat_bounce_in {
  -webkit-animation-name: zl_bounce_in_br;
  animation-name: zl_bounce_in_br
}

.za-chat .zl_chat_bounce_in,.za-chat .zl_chat_bounce_out {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  transition-timing-function: ease-in
}

.za-chat .zl_chat_bounce_out {
  -webkit-animation-name: zl_bounce_out_br;
  animation-name: zl_bounce_out_br
}

.za-chat.left-side .zl_chat_bounce_in {
  -webkit-animation-name: zl_bounce_in_bl;
  animation-name: zl_bounce_in_bl
}

.za-chat.left-side .zl_chat_bounce_out {
  -webkit-animation-name: zl_bounce_out_bl;
  animation-name: zl_bounce_out_bl
}

@-webkit-keyframes zl_bounce_in_bl {
  0% {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
  }

  50% {
      -webkit-transform: scale(1.03);
      transform: scale(1.03);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
  }

  to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
  }
}

@keyframes zl_bounce_in_bl {
  0% {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
  }

  50% {
      -webkit-transform: scale(1.03);
      transform: scale(1.03);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
  }

  to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
  }
}

@-webkit-keyframes zl_bounce_out_bl {
  0% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
  }

  to {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
  }
}

@keyframes zl_bounce_out_bl {
  0% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
  }

  to {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: bottom left;
      transform-origin: bottom left
  }
}

@-webkit-keyframes zl_bounce_in_br {
  0% {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
  }

  50% {
      -webkit-transform: scale(1.03);
      transform: scale(1.03);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
  }

  to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
  }
}

@keyframes zl_bounce_in_br {
  0% {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
  }

  50% {
      -webkit-transform: scale(1.03);
      transform: scale(1.03);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
  }

  to {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
  }
}

@-webkit-keyframes zl_bounce_out_br {
  0% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
  }

  to {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
  }
}

@keyframes zl_bounce_out_br {
  0% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
  }

  to {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right
  }
}

.image-container .modal {
  height: 100vh;
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  overflow: auto
}

.image-container .modal.show {
  opacity: 1;
  transition: all .2s ease-out;
  z-index: 20
}

.image-container .modal.hide {
  opacity: 0;
  z-index: -100
}

.image-container .modal .modal-content {
  height: 100%;
  width: 100%;
  background-color: rgba(27,27,39,.95);
  padding: 20px;
  border: 1px solid rgba(27,27,39,.95);
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  align-content: center;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0
}

.image-container .modal .modal-content img {
  max-width: 100%;
  max-height: 100%
}

@-webkit-keyframes zl_bounce_down {
  0% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      z-index: 100;
      opacity: 1
  }

  to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      z-index: 100;
      opacity: 1
  }
}

@keyframes zl_bounce_down {
  0% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
      z-index: 100;
      opacity: 1
  }

  to {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      z-index: 100;
      opacity: 1
  }
}