#resizer0
{
  box-shadow:1px 1px 8px grey;
  background: #2A72D1;
}

#resizer1
{
  box-shadow:1px 1px 4px grey;
  background: #2A72D1;
}

.chat_content > div > div > iframe
{
  width: 100%;
  height: 100%;
}

#ChatElement
{
  width            : 100%                   ;
  height           : 100%                   ;
  overflow-y       : auto                   ;
  opacity          : 1                  ;
  background-color : rgb( 255 , 255 , 255 ) ;
}

#ChatBoxEasySender
{
  background-color : rgb( 255 , 255 , 255 ) ;
}

#ChatBoxTools
{
  white-space   : nowrap                          ;
  background-color : #3a84e5 ;
  padding: 10px ;
}

#ChatBoxTools > a
{
  margin: 6px;
}

#ChatBoxTools > a:hover
{
  opacity          : 0.5 ;
}

#ChatArea
{
  width : 100% ;
}

#ChatBoxEasySender
{
  width  : 100% ;
  height : 100% ;
}

#ChatBoxMessageWrapper
{
  overflow-y    : auto                            ;
  padding       : 2px                             ;
  border-bottom: 1px solid #3a84e5 ;
}

#ChatBoxMessageListings
{
  width      : 100% ;
  height     : 100% ;
  overflow-y : auto ;
}

#chat
{
  width           : 100%                   ;
  height          : 100%                   ;
  min-width       : 360px                  ;
  min-height      : 300px                  ;
  background      : rgb( 255 , 255 , 255 ) ;
  display         : flex                   ;
  justify-content : space-between          ;
}

@media screen and (max-width: 360px) {
  #chat {
    width  : 100%  ;
    height : 100vh ;
  }
}

#chat #sidepanel
{
  width      : 40%      ;
  height     : 100%     ;
  background : #3a8fff  ;
  color      : #ffffff  ;
  overflow   : hidden   ;
  position   : relative ;
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel
  {
    width     : 58px ;
    min-width : 58px ;
  }
}

#chat #sidepanel #search
{
  font-weight : 300               ;
  width       : calc(100% - 45px) ;
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #search
  {
    display : none ;
  }
}

#chat #sidepanel #search label
{
  position : absolute      ;
  margin   : 10px 0 0 20px ;
}

#chat #sidepanel #search input
{
  padding    : 10px 0 10px 46px ;
  width      : 100%             ;
  border     : none             ;
  background : #2A72D1          ;
  color      : #ffffff          ;
}

#chat #sidepanel #search input:focus
{
  outline    : none    ;
  background : #435f7a ;
}

#chat #sidepanel #search input::-webkit-input-placeholder
{
  color : #f5f5f5 ;
}

#chat #sidepanel #search input::-moz-placeholder
{
  color : #f5f5f5 ;
}

#chat #sidepanel #search input:-ms-input-placeholder
{
  color : #f5f5f5 ;
}

#chat #sidepanel #search input:-moz-placeholder
{
  color : #f5f5f5 ;
}

#chat #sidepanel #contacts
{
  height     : calc(100% - 43px) ;
  overflow-y : auto              ;
  overflow-x : hidden            ;
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #contacts
  {
    height     : calc(100% - 43px) ;
    overflow-y : scroll            ;
    overflow-x : hidden            ;
  }
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #contacts::-webkit-scrollbar
  {
    display : none ;
  }
}

#chat #sidepanel #contacts.expanded
{
  height : calc(100% - 334px) ;
}

#chat #sidepanel #contacts::-webkit-scrollbar
{
  width      : 2px     ;
  background : #f5f5f5 ;
}

#chat #sidepanel #contacts::-webkit-scrollbar-thumb
{
  background-color : #435f7a ;
}

#chat #sidepanel #contacts ul li.contact
{
  position   : relative ;
  padding    : 10px     ;
  font-size  : 0.9em    ;
  cursor     : pointer  ;
  list-style : none     ;
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #contacts ul li.contact
  {
    padding : 8px ;
  }
}

#chat #sidepanel #contacts ul li.contact:hover
{
  background : #2A72D1 ;
}

#chat #sidepanel #contacts ul li.contact.active
{
  background   : #ffffff           ;
}

#chat #sidepanel #contacts ul li.contact .wrap
{
  width       : 100%     ;
  margin      : 0 auto   ;
  position    : relative ;
  display     : flex     ;
  align-items : center   ;
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #contacts ul li.contact .wrap
  {
    width : 100% ;
  }
}

#chat #sidepanel #contacts ul li.contact .wrap .online
{
  position : absolute ;
  right    : 0        ;
  top      : 10px     ;
}

#chat #sidepanel #contacts ul li.contact .wrap .unread
{
  position : absolute ;
  right    : 40px     ;
  top      : 10px     ;
}

#chat #sidepanel #contacts ul li.contact .wrap img
{
  width         : 40px ;
  border-radius : 50%  ;
  float         : left ;
  margin-right  : 10px ;
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #contacts ul li.contact .wrap img
  {
    margin-right : 0px ;
  }
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #contacts ul li.contact .wrap .meta
  {
    display : none ;
  }
}

#chat #sidepanel #contacts ul li.contact .wrap .meta .name
{
  font-weight : 100 ;
}

#chat #sidepanel #contacts ul li.contact .wrap .meta .preview
{
  margin             : 5px 0 0 0   ;
  padding            : 0 0 1px     ;
  font-weight        : 400         ;
  white-space        : nowrap      ;
  overflow           : hidden      ;
  text-overflow      : ellipsis    ;
  -moz-transition    : 1s all ease ;
  -o-transition      : 1s all ease ;
  -webkit-transition : 1s all ease ;
  transition         : 1s all ease ;
}

#chat #sidepanel #contacts ul li.contact .wrap .meta .preview span
{
  position      : initial   ;
  border-radius : initial   ;
  background    : none      ;
  border        : none      ;
  padding       : 0 2px 0 0 ;
  margin        : 0 0 0 1px ;
  opacity       : 0.5       ;
}

#chat #sidepanel #bottom-bar
{
  display         : flex          ;
  justify-content : space-between ;
  position        : absolute      ;
  width           : 100%          ;
  bottom          : 0             ;
}

@media (max-width: 735px)
{
  #chat #sidepanel #bottom-bar
  {
    display : inherit ;
  }
}

#chat #sidepanel #bottom-bar #addcontact button
{
  border     : none    ;
  width      : 43px    ;
  padding    : 11px 0  ;
  background : #2A72D1 ;
  color      : #f5f5f5 ;
  cursor     : pointer ;
  font-size  : 0.85em  ;
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #bottom-bar #addcontact button
  {
    float   : none   ;
    width   : 100%   ;
    padding : 15px 0 ;
  }
}

#chat #sidepanel #bottom-bar button:focus
{
  outline : none ;
}

#chat #sidepanel #bottom-bar button:nth-child(1)
{
  border-right : 1px solid #2A72D1 ;
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #bottom-bar button:nth-child(1)
  {
    border-right  : none              ;
    border-bottom : 1px solid #2A72D1 ;
  }
}

#chat #sidepanel #bottom-bar button:hover
{
  background : #2A72D1 ;
}

#chat #sidepanel #bottom-bar button i
{
  margin-right : 3px ;
  font-size    : 1em ;
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #bottom-bar button i
  {
    font-size : 1.3em ;
  }
}

@media screen and (max-width: 735px)
{
  #chat #sidepanel #bottom-bar button span
  {
    display : none ;
  }
}

#chat .content
{
  height   : 100%     ;
  overflow : hidden   ;
  position : relative ;
}

@media screen and (max-width: 735px)
{
  #chat .content {
    width     : calc(100% - 58px) ;
    min-width : 300px !important  ;
  }
}

@media screen and (min-width: 900px)
{
  #chat .content
  {
    width : calc(100% - 240px) ;
  }
}

#chat .content .contact-profile
{
  width       : 100%    ;
  height      : 60px    ;
  line-height : 60px    ;
  background  : #f5f5f5 ;
}

#chat .content .contact-profile img
{
  width         : 40px           ;
  border-radius : 50%            ;
  float         : left           ;
  margin        : 9px 12px 0 9px ;
}

#chat .content .contact-profile p
{
  float : left ;
}

#chat .content .messages
{
  height           : auto                   ;
  overflow-y       : auto                   ;
  background-color : rgb( 255 , 255 , 255 ) ;
}

@media screen and (max-width: 735px)
{
  #chat .content .messages
  {
  }
}

#chat .content .messages::-webkit-scrollbar
{
  width      : 8px         ;
  background : transparent ;
}

#chat .content .messages::-webkit-scrollbar-thumb
{
  background-color : rgba( 0 , 0 , 0 , 0.3 ) ;
}

#chat .content .messages ul li
{
  display   : inline-block       ;
  clear     : both               ;
  float     : left               ;
  margin    : 15px 15px 5px 15px ;
  width     : calc(100% - 25px)  ;
  font-size : 0.9em              ;
}

#chat .content .messages ul li:nth-last-child(1)
{
  margin-bottom : 20px ;
}

#chat .content .messages ul li.sent img
{
  margin : 6px 8px 0 0 ;
}

#chat .content .messages ul li.sent .chat_content
{
  background : #f5f5f5 ;
}

#chat .content .messages ul li.replies img
{
  float  : right       ;
  margin : 6px 0 0 8px ;
}

#chat .content .messages ul li img
{
  width         : 22px ;
  border-radius : 50%  ;
  float         : left ;
}

#chat .content .messages .chat_content
{
  display       : inline-block ;
  padding       : 15px         ;
  border-radius : 20px         ;
  max-width     : 205px        ;
  line-height   : 130%         ;
}

@media screen and (min-width: 735px)
{
  #chat .content .messages .chat_content
  {
    max-width : 300px ;
  }
}

#chat .content .message-input
{
  position : absolute ;
  bottom   : 0        ;
  width    : 100%     ;
  z-index  : 99       ;
}

#chat .content .message-input .wrap
{
  position        : relative      ;
  display         : flex          ;
  justify-content : space-between ;
}

#chat .content .message-input .wrap input
{
  float            : left               ;
  border           : none               ;
  width            : calc(100% - 45px)  ;
  padding          : 11px 32px 10px 8px ;
  font-size        : 0.8em              ;
  color            : #32465a            ;
  background-color : #f5f5f5            ;
}

@media screen and (max-width: 735px)
{
  #chat .content .message-input .wrap input
  {
    padding : 15px ;
  }
}

#chat .content .message-input .wrap input:focus
{
  outline : none ;
}

#chat .content .message-input .wrap button
{
  float      : right   ;
  border     : none    ;
  width      : 43px    ;
  padding    : 10px 0  ;
  cursor     : pointer ;
  background : #2A72D1 ;
  color      : #fff    ;
}

@media screen and (max-width: 735px)
{
  #chat .content .message-input .wrap button
  {
    padding : 13px 0 12px 0 ;
  }
}

#chat .content .message-input .wrap button:hover
{
  background : #2A72D1 ;
}

#chat .content .message-input .wrap button:focus
{
  outline : none ;
}

#chat #sidepanel #contacts ul
{
  padding-left : 0px ;
}

#chat #sidepanel #contacts ul li
{
  list-style : none ;
}

#chat #sidepanel #contacts ul li.contact.active .wrap .meta
{
  color : #212529 ;
}

ul {
  padding-inline-start : 0px ;
}

#chat .content .messages ul li.sent .time
{
  width      : 100%     ;
  padding    : 8px 45px ;
  float      : left     ;
  text-align : left     ;
  color      : #909294  ;
}

#chat .content .messages ul li.replies .time
{
  width      : 100%     ;
  padding    : 8px 45px ;
  float      : right    ;
  text-align : right    ;
  color      : #909294  ;
}

@media (max-width: 735px)
{
  #chat #sidepanel #contacts ul li.contact .wrap span
  {
    top   : 25px ;
    right :  5px ;
  }
}

#chat .content .messages .sent .chat_content
{
  float : left ;
}

#chat .content .messages .replies .chat_content
{
  float      : right   ;
  background : #2A72D1 ;
  color      : #fff    ;
}

#chat .content .message-input .wrap .attachment button
{
  background : #212529 ;
}