#view-code {
    color: #89a2b5;
    opacity: 0.7;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    position: absolute;
    top: 660px;
    left: 50%;
    margin-left: -50px;
    z-index: 200;
}

#view-code:hover {
    opacity: 1;
}

#chatbox {
    width: 100%;
    border-radius: 0;
    height: calc(100vh - 60px);
    padding-top: 50px;
    position: fixed;
    bottom: 0;
    right: 0;
    min-height: 400px;
    z-index: 600;
    box-shadow: none;
    overflow: hidden;
    background: #f0f1f3;
    transition: transform 0.1s cubic-bezier(0.26, 0.82, 0.3, 0.84);
    transform: translate(0, 20px);
    border-top: 1px solid #e2e2e2;
    visibility: hidden;
    display: flex;
}

#chatbox.loading-chat:before {
    content: "";
    display: block;
    position: absolute;
    top: 51px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(240 241 243 / 0.6);
    z-index: 6;
    background-image: url('https://media.animotech.io/resourses/icons/notifications/chat-preloader.svg');
    background-repeat: no-repeat;
    background-position: 50%;
}

#chatbox.small {
    max-width: 340px;
    height: calc(100vh - 80px);
    bottom: 10px;
    right: 15px;
    border-radius: 15px;
    background: #fafbfc;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    overflow: hidden;
    display: block;
}

#chatbox.small .p1 #profile {
    justify-content: flex-end;
    flex-direction: column-reverse;
    padding: 0;
    height: 100px;
    flex-basis: 100px;
}

#chatbox.small .p1 #profile .controls {
    height: 40px;
    padding: 0;
    width: 100%;
    justify-content: flex-end;
    background: #fafbfc;
    align-items: center;
    box-shadow: inset 0 -1px 0 0 #e8e9eb, -1px -1px 0 0 #e8e9eb, -1px 0 0 0 #e8e9eb, 0 -1px 0 0 #e8e9eb;
}

#chatbox.small .p1 #profile .contents {
    height: 60px;
    padding: 10px;
    display: flex;
    width: 100%;
    background: #fafbfc;
    align-items: center;
    font-size: 18px;
}

#chatbox.small #topmenu {
    background: transparent;
    padding: 0;
    justify-content: flex-end;
}

#chatbox.small #topmenu .info {
    display: none;
    background: transparent;
}

#chatbox.open {
    transform: translate(0, 0);
    visibility: visible;
}

#dialog-info {
    width: 340px;
    flex-basis: 340px;
    background: #f6f7f9;
    min-width: 340px;
    border-top: 1px solid #e8e9eb;
    border-left: 1px solid #e8e9eb;
    position: relative
}

#dialog-info .header {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #e8e9eb;
    padding: 0 15px;
    justify-content: space-between;
}

#dialog-info .dialog-info-content {
    height: calc(100% - 60px)
}

#dialog-info .dialog-info-content .top-info {
    display: flex;
    padding: 15px;
    align-items: center;
}
#dialog-info .dialog-info-content .loading-extra {
    background-color:#f6f7f9;
    height: 200px;
    background-image: url('https://media.animotech.io/resourses/icons/notifications/chat-preloader.svg');
    background-repeat: no-repeat;
    background-position: 50%;
}

#dialog-info .dialog-info-content .attachments-info {

}

#dialog-info .dialog-info-content .attachments-info h4,
#dialog-info .dialog-info-content .user-info h4 {
    padding: 10px;
    margin: 0;
}
#dialog-info .dialog-info-content .user-info h4 .users-count {
    font-size:12px;
    background:#e0e1e3;
    padding:2px 10px;
    color:#717274;
    border-radius:3px;
}
#dialog-info .dialog-info-content .attachments-info .attachments {
    display: flex;
    justify-content: space-between;
    padding: 10px 55px 10px 15px;
    align-items: center;
    cursor: pointer;
}

#dialog-info .dialog-info-content .user-info .user {
    display: flex;
    padding: 5px 15px 5px 15px;
    align-items: center;
}
#dialog-info .dialog-info-content .user-info .user .user-image {
    width: 40px;
    height:40px;
    border-radius:20px;
    background-size:cover;
    background-position:50%;
    margin-right: 10px;
}
#dialog-info .dialog-info-content .user-info .user .user-image.default-user {
    background:#d0d1d5;
    background-image: url(https://media.animotech.io/resourses/icons/user-default.svg) !important;
}
#dialog-info .dialog-info-content .user-info .user .name {
    font-size:13px;
    font-weight:500;
    display: block;
}
#dialog-info .dialog-info-content .user-info .user .online {
    color:#9069ef;
    font-size:12px;
    font-weight:500;
}
#dialog-info .dialog-info-content .user-info .user .offline {
    color:#999;
    font-size:12px;
}
#dialog-info .dialog-info-content .user-info .user .user-info {
    border-bottom:1px solid #e8e9eb;
    padding:10px 55px 10px 0;
    flex: 1;
}
#dialog-info .dialog-info-content .user-info .user .fa-user-edit {
    color:#9069ef;
}
#dialog-info .dialog-info-content .user-info .user .fa-trash-o {
    cursor:pointer;
}
#dialog-info .dialog-info-content .user-info .user .fa-trash-o:hover {
    color:#d95bca
}
#dialog-info .dialog-info-content .attachments-info .attachments .count {
    background: #fff;
    height: 20px;
    min-width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

#dialog-info .dialog-info-content .attachments-info .attachments:hover {
    background: #e8e9eb;
    color: #9069ef
}

#dialog-info .dialog-info-content .attachments-info .attachments div {
    display: flex;
    align-items: center;
}

#dialog-info .dialog-info-content .attachments-info .attachments div span.fa {
    margin-right: 10px;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e8e9eb;
    border-radius: 50%;
}

#dialog-info .dialog-info-content .top-info .image {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    background-image: url(https://media.animotech.io/resourses/icons/dialog-default.svg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    min-width: 60px;
}

#dialog-info .dialog-info-content .top-info .image + div {
    flex: 1
}

#dialog-info .dialog-info-content .top-info span {
    font-size: 13px;
    color: #888;
}
#dialog-info .dialog-info-content .top-info span.info {
    display:block;
}

#dialog-info .dialog-info-content .top-info span.name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}
#dialog-info .dialog-info-content .top-info p.status {
    margin-bottom:3px
}
#dialog-info .dialog-info-content .top-info p.status .online {
    color:#9069ef;
    font-weight:500;
}
#dialog-info .dialog-info-content .top-info p.status .offline {
    color:#959698;
    font-style:italic;
}
#dialog-info .header .fa-times {
    width: 30px;
    height: 30px;
    background: #e5e6e8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#dialog-info .header .fa-times:hover {
    color: #fff;
    background: #d95bca
}

#friendslist {
    width: 400px;
    height: 100%;
    border-right: 1px solid #e8e9eb;
    flex-basis: 400px;
    background: #f6f7f9;
    border-top: 1px solid #e8e9eb;
    min-width: 400px;
}

#chatbox.small #friendslist {
    width: 100%;
    flex-basis: 100%;
}

#chatbox.small #chatview {
    display: none;
}

#chatbox.small #chatview.active {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#friends {
    height: 100%;
    margin-bottom: 0;
    width: 100%;
    transition: opacity 0.3s ease-in-out;
    position: relative;
}

#friends div.dialogs-search {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f6f7f9;
    display: flex;
    padding: 12px 15px;
}

#friends div.dialogs-search input.dialogs-search {
    width: 100%;
    border-radius: 20px;
    border: none;
    padding: 0 30px 0 15px;
    border: 1px solid #dfe2e6;
}

#friends div.dialogs-search .fa-times {
    position: absolute;
    right: 22px;
    top: 22px;
    cursor: pointer;
}

#friends div.dialogs-search .fa-times:hover {
    color: #d95bca
}

#friends #main-controls {
    height: 60px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e8e9eb;
    padding: 5px 15px;
    position: relative;
}

#friends #contacts-list {
    height: calc(100% - 60px);
}

#friends #contacts-list .contacts {
    height: calc(100% - 60px);
}

#friends #contacts-list .contacts .organization {

    border-bottom: 1px solid #e8e9eb;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#friends #contacts-list .contacts .organization .organization-header {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

#friends #contacts-list .contacts .organization .counter, #friends #contacts-list .contacts .organization .favorites {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    background: #ffffff;
    width: 25px;
    justify-content: center;
    align-items: center;
    padding: 4px;
    line-height: 100%;
    border-radius: 3px;
    margin: 0 2px;
    color: #919295;
}

#friends #contacts-list .contacts .organization #contacts-users {
    flex-basis: 100%
}

#friends #contacts-list .contacts .organization .user .image {
    width: 50px;
    height: 50px;
    margin-right: 8px;
    border-radius: 50%;
    background-position: 50%;
    background-size: cover;
}

#friends #contacts-list .contacts .support-contact .image {
    width: 50px;
    height: 50px;
    margin-right: 8px;
    border-radius: 50%;
    background-position: 50%;
    background-size: cover;
    background-color: #fff;
    background-image: url('https://media.animotech.io/resourses/icons/support-photo.jpg?');
}

#friends #contacts-list .contacts .organization .user {
    flex-basis: 100%;
    min-height: 60px;
    display: flex;
    padding-left: 15px;
    align-items: center;
    border-top: 1px solid #e8e9eb;
    cursor: pointer;
}

#friends #contacts-list .contacts .organization .user.selected, #friends #contacts-list .contacts .organization .user.selected:hover {
    opacity: 0.2;
    cursor: unset;
    color: #3e3e3e;
    background: transparent;
}

#friends #contacts-list .contacts .support-contact {
    flex-basis: 100%;
    min-height: 60px;
    display: flex;
    padding-left: 15px;
    align-items: center;
    border-bottom: 1px solid #e8e9eb;
    cursor: pointer;
}

#friends #contacts-list .contacts .organization .user:hover, #friends #contacts-list .contacts .support-contact:hover {

    background: #fff;

    color: #9069ef;
}

#friends #contacts-list .contacts .organization .name {
    flex-basis: calc(100% - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

#friends #contacts-list .contacts .organization-header:hover .name,
#friends #contacts-list .contacts .organization-header:hover .toggle-icon {
    color: #9069ef
}

#friends #contacts-list .contacts .organization .toggle-icon {
    flex-basis: 20px;
    cursor: pointer
}

#friends #contacts-list .contacts.create-new {
    height: calc(100% - 90px);
}

#contacts-list .contacts-search {
    display: flex;
    padding: 0;
    border-bottom: 1px solid #e8e9eb;
    flex-direction: column;
}

#contacts-list .contacts-search input {
    width: calc(100% - 30px);
    border-radius: 20px;
    border: 1px solid #e2e4e6;
    background: #e2e4e6;
    padding: 0 35px 0 15px;
    height: 30px;
    margin: 15px;
}

#contacts-list .contacts-search input:focus {
    border: 1px solid #bea3ff;
    background: #fff;
}

#friends .select-group-dialog {
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 12px;
    background: #f6f7f9;
    justify-content: center;
}

#friends .create-group-dialog {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #e8e9eb;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s ease-in-out;
}

#friends .create-group-dialog:hover {
    background: #eaebec;
}

#friends .create-group-dialog .fa {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    background: #e5e6e8;
    border-radius: 50%;
    transition: background 0.2s ease-in-out;
}

#friends .create-group-dialog:hover .fa {
    background: #9069ef;
    color: #fff;
}

#friends #dialogs {
    height: calc(100% - 60px);
}

#friends #main-controls button,
.user-info button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: none;
    background: transparent;
    cursor: pointer;
}

#friends #main-controls button:hover,
.user-info button:hover {
    color: #bb7fff
}

#friends #main-controls button.active, #friends #main-controls button.active:hover {
    color: #fbfbfb;
}

#friends #main-controls button.active {
    background: #9069ef;
    border-radius: 5px;
}

#friends #main-controls .controls-left, #friends #main-controls .controls-right {
    display: flex;
}

#friends #main-controls .info-left {
    align-items: center;
    display: flex;
    font-weight: 500;
}

#friends #main-controls .controls-left button {
    margin-right: 10px;
    font-size: 10px;
    font-weight: 500;
    line-height: 100%;
}

#friends #main-controls .controls-right button .fa {
    font-size: 20px
}

#friends #main-controls .controls-left button .fa {
    font-size: 20px;
    margin-bottom: 3px;
}

#friendslist .read-all a {
    color: #d94ca3;
    border-bottom: 1px dashed
}

#friendslist .show-unread a {
    color: #5f78fa;
    border-bottom: 1px dashed;
}

#friendslist #dialogloader,
#friendslist #ntfloader,
#chatview #msgloader,
#notifications #ntfloader {
    opacity: 0;
    display: block;
    height: 0;
    width: 220px;
    margin: 0;
    background-image: url('https://media.animotech.io/resourses/icons/notifications/chat-preloader.svg');
    background-repeat: no-repeat;
}
#dialogs .dialogs-loader {
    background-image: url('https://media.animotech.io/resourses/icons/notifications/chat-preloader.svg');
    background-repeat: no-repeat;
    height:70px;
    background-position:50%
}

#orgcontactsloader, #contactsloader {
    flex-basis: 100%;
    height: 30px;
    margin: 15px 0;
    background-image: url('https://media.animotech.io/resourses/icons/notifications/chat-preloader.svg');
    background-repeat: no-repeat;
    background-position: 50%
}

#friendslist #ntfloader.loading,
#friendslist #dialogloader.loading,
#chatview #msgloader.loading,
#notifications #ntfloader.loading {
    opacity: 1;
    height: 20px;
    margin: 10px auto;
}

#friendslist {
}

#friendslist.left {
}

#topmenu {
    height: 50px;
    width: 100%;
    border-radius: 25px 0 0 25px;
    background: #f0f1f3;
    position: absolute;
    top: 0;
    z-index: 5;
    font-size: 15px;
    color: #9c9c9c;
    display: flex;
    justify-content: space-between;
    padding: 0 15px 0 15px;
    align-items: center;
}

#topmenu .controls {
    display: flex;
    height: 100%;
    padding: 10px;
}

#topmenu .controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    margin: 0 5px;
    background: #e0e1e4;
    border-radius: 15px;
    color: #4c4c4c;
}

#topmenu .controls button:hover {
    color: #8847d1
}

#topmenu .controls button.active {
    background: #9069ef;
    color: #fff;
}

#topmenu .controls button:disabled {
    opacity: 1;
    color: #b3b3b3;
}

#topmenu .controls button:hover:last-child {
    background: #d95bca;
    color: #fff
}

#topmenu .controls button .fa {
    display: block;
    font-size: 18px;
}

#topmenu span.fa-times:hover {
    color: #fff
}

#topmenu span.friends {
    margin-bottom: -1px;
}

#topmenu span.chats {
    background-position: -95px 25px;
    cursor: pointer;
}

#topmenu span.chats:hover {
    background-position: -95px -46px;
    cursor: pointer;
}

#topmenu span.history {
    background-position: -190px 24px;
    cursor: pointer;
}

#topmenu span.history:hover {
    background-position: -190px -47px;
    cursor: pointer;
}

.friend {
    min-height: 70px;
    position: relative;
    display: flex;
    width: 100%;
    background: transparent;
    align-items: center;
    border-bottom: 1px solid #e8e9eb;
    padding: 0px 0px 0px 75px;
}

.friend .image {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: 50%;
    border-radius: 50%;
    position: absolute;
    left: 15px;
    top: 10px;
}

.friend .image.default,
#friends #contacts-list .contacts .organization .user .image.default,
#chatview #new-group #dialog-users .selected-contacts .image.default {
    background-image: url(https://media.animotech.io/resourses/icons/user-default.svg) !important;
}

#chat-messages .message .image-container.default-user-image {
    background-image: url(https://media.animotech.io/resourses/icons/user-default.svg) !important;
}

.friend .image.default.chat {
    background-image: url(https://media.animotech.io/resourses/icons/dialog-default.svg) !important;
}

.friend .dialog-container {
    width: 100%;
    line-height: 130%;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px;
}

.friend .dialog-container .dialog-text {
    padding: 5px 0;
}

.friend .dialog-container .dialog-type {
    text-align: right;
    color: #a1a2a4;
    font-weight: 600;
    flex: 1;
}

.friend .dialog-container .dialog-type.support {
    color: #be84f4
}

.friend .dialog-info {
    font-size: 12px;
    line-height: 110%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 3px;
}

.friend .dialog-info .last-message-date {
    font-size: 11px;
    color: #a1a2a4;
    font-weight: bold;
    text-transform: capitalize;
}

.friend .dialog-container a {
    position: absolute;
    margin-top: -23px;
    color: #f4f4f6;
    background: #9069ef;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10px;
    top: 50%;
    right: 10px;
    margin-top: -15px;
}

.friend .dialog-container a.pleft {
    top: unset;
    bottom: 10px;
    margin-top: unset;
}

.friend .dialog-container a i.fa {
    font-size: 14px;
}

.friend .dialog-container a:hover {
    background: #5f7afc;
}

.friend .dialog-container span.last-message {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #797e90;
    font-size: 13px;
    padding: 5px 0 0 0;
}

.friend .dialog-container span.last-message .me {
    font-weight: 600;
    color: #9069ef;
    font-style: normal;
}

.friend .dialog-container span.last-message-user {
    color: #9069ef;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
}

.friend .dialog-container span.last-message.no-messages {
    opacity: 0.5;
    font-style: italic;
}

.friend span.pleft {
    padding-left: 25px;
}

.friend:hover, .friend.active {
    background: #fff;
    cursor: pointer;
}

.friend img {
    width: 40px;
    border-radius: 50%;
    margin: 15px 10px;
    position: absolute;
    left: 0;
    top: 0;
}

.friend img.read-status {
    position: relative;
    left: unset;
    top: unset;
    margin: 0;
    padding: 0;
    width: 17px;
}

.floatingImg {
    width: 40px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 12px;
    border: 3px solid #fff;
}

.friend p {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 2px 0;
    margin: 0;
}

.friend h5 {
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 120%;
}

.friend p span {
    font-size: 13px;
    font-weight: 400;
    color: #aab8c2;
}

.friend .status {
    background: #d95bca;
    border-radius: 35px;
    width: 24px;
    height: 24px;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px;
    white-space: nowrap;
    color: #f6f7f9;
    font-weight: 800;
    font-size: 11px;
    position: absolute;
}

.friend .status.pleft {
    top: 10px;
    margin-top: 0
}

.friend .status.away {
    background: #ffce54;
}

.friend .status.inactive {
    background: #eaeef0;
}

#search {
    background: #e3e9ed url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/search.png') -11px 0 no-repeat;
    height: 60px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

#searchfield {
    background: #e3e9ed;
    margin: 21px 0 0 55px;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    color: #8198ac;
}

#searchfield {
    font-family: 'Open Sans', sans-serif;
}

#searchfield:focus {
    outline: 0;
}

#chatview {
    width: calc(100% - 400px);
    height: 100%;
    bottom: 0;
    z-index: 5;
    background: #f6f7f9;
    flex-basis: 100%;
    border-top: 1px solid #e8e9eb;
    display: flex;
    flex-direction: column;
    position: relative;
}

#profile {
    height: 50px;
    color: #fff;
}

.p1 #profile {
    background: #f6f7f9;
    z-index: 5;
    position: relative;
    padding: 5px 15px;
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #e8e9eb;
    flex: 0 0 60px;
    justify-content: space-between;
}

.p1 #profile .contents {
    padding-left: 50px
}

.p1 #profile .contents .image {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: 5px;
    border-radius: 50%;
    background-size: cover;
    background-position: 50%;
}

.p1 #profile .contents .image.default {
    background-image: url(https://media.animotech.io/resourses/icons/user-default.svg) !important;
}

.p1 #profile .contents .image.chat {
    background-image: url(https://media.animotech.io/resourses/icons/dialog-default.svg) !important;
}

.p1 #profile .controls {
    display: flex;
}

.p1 #profile div.messages-search {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(100% - 100px);
    background: #f6f7f9;
    padding: 12px 15px;
    display: flex;
}

.p1 #profile div.messages-search input.messages-search {
    width: 100%;
    max-width: 450px;
    height: 100%;
    border: none;
    background: #fff;
    padding: 0 18px;
    border-radius: 18px;
    border: 1px solid #d6dae2
}

.p1 #profile div.messages-search span.fa-times {
    color: #555;
    height: 100%;
    width: 35px;
    margin-left: -35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.p1 #profile div.messages-search span.fa-times:hover {
    color: #d95bca
}

.p1 #profile .controls button {
    display: flex;
    border: none;
    background: transparent;
    background: #e5e6e8;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #495057;
}

.p1 #profile .controls button:hover {
    color: #fff;
    background: #9069ef
}

.p1 #profile .controls button:hover:last-child {
    background: #d95bca
}

.p1 #profile .controls button .fa {
    font-size: 18px;

}

#profile .avatar {
    width: 68px;
    border: 3px solid #fff;
    margin: 23px 0 0;
    border-radius: 50%;
}

#profile p.dialog-header {
    font-weight: 600;
    font-size: 15px;
    -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    color: #495057;
    padding: 0;
    margin: 0;
    display: block;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#profile p.dialog-info {
    font-size: 13px;
    color: #999;
    display: block;
    overflow: hidden;
    width: 100%;
    line-height: 120%;
    margin-top: 3px;
}

#profile p.dialog-info a {
    color: #838ae8;
}

#profile p.animate {
    margin-top: 97px;
    opacity: 1;
    -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
    transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}

#chat-messages {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

#chat-messages-container {
    width: 100%;
    position: relative;
}

#chat-messages .typing {
    position: fixed;
    bottom: 105px;
    left: 15px;
    z-index: 55;
    padding: 5px 60px 5px 20px;
    font-size: 11px;
    color: #9898c5;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*background-image: url(/typing-anim.svg);
    background-repeat: no-repeat;
    background-position: bottom 50% right 10px;;
    background-color: rgba(247, 248, 255, 0.72);*/
    border-radius: 15px;
}

#chat-messages.animate {
    opacity: 1;
    margin-top: 0;
}

#chat-messages label {
    color: #aab8c2;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    margin: 15px 0;
    width: 290px;
    display: block;
}

#chat-messages div.message {
    padding: 15px 0 23px 58px;
    clear: both;
    width: 100%;
    position: relative;
    transition: background-color 0.45s cubic-bezier(0.07, 0.7, 0.58, 1);
}

#chat-messages div.message.unread, #chat-messages div.message.reading {
    background-color: #f1edf9;
    box-shadow: inset 0 1px 0 0 #dedce7;
}

#chat-messages .message:after {
    content: "";
    clear: both;
    display: block;
}

#chat-messages div.message .name {
    position: relative;
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    color: #495057;
    font-weight: 500;
    float: left;
    width: 100%;
}

#chat-messages div.message.right {
    padding: 15px 58px 30px 0;
}
#chat-messages div.message.right.info, #chat-messages div.message.info {
    padding:10px;
    display: flex;
}
#chat-messages div.message.right.info .bubble,
#chat-messages div.message.info .bubble {
    float: unset;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 3px 15px;
    background: #d1d2d3;
    border-radius: 25px;
    font-size: 11px;
    color: #000;
    flex-direction: column;
}
#chat-messages div.message.info .bubble > div {
    width: auto !important;
}
#chat-messages .message .image-container {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: 50%;
    background-color: #e4e4e4;
    position: absolute;
    left: 10px;
    bottom: 15px;
    overflow: hidden;
}

#chat-messages div.message.right .image-container {
    left: unset;
    right: 10px;
}
#chat-messages div.message.info .image-container,
#chat-messages .message.info .bubble .attachments-container,
#chat-messages div.message.info .corner,
#chat-messages .message.info .bubble .read-status,
#chat-messages .message.info .bubble .msg-menu,
#chat-messages div.message.info .name {
    display:none
}
#chat-messages .message.info span.time {
    margin:0 0 0 5px;
    color:#999
}
#chat-messages .message .bubble {
    background: #9069ef;
    font-size: 14px;
    font-weight: 400;
    padding: 12px 13px 5px;
    border-radius: 5px 5px 5px 0px;
    color: #fff;
    position: relative;
    float: left;
    max-width: 80%;
    min-width: 180px;
    margin-bottom: 15px;
}

#chat-messages .message .bubble .attachments-container {
    /* float:left; */
    width: 100%;
}

#chat-messages #first-unread {
    text-align: center;
    border-bottom: 1px solid #ecedef;
    font-size: 11px;
    color: #9069ef;
    position: absolute;
    width: 100%;
    margin-top: -20px;
    transition: opacity 0.3s ease-out;
}

#chat-messages #first-unread.invisible {
    opacity: 0
}

.message .bubble:after {
    clear: both;
    content: "";
}

#chat-messages div.message.right .bubble {
    float: right;
    border-radius: 5px 5px 0px 5px;
    background: #e8e9eb;
    color: #000;
}

#chat-messages div.message .bubble .msg-quote {
    line-height: 110%;
    padding: 0 0 0 8px;
    margin-bottom: 5px;
    border-left: 3px solid #fff;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

#chat-messages div.message.right .bubble .msg-quote {
    border-left: 3px solid #9069ef;
    display: flex;
    flex-direction: column;
}

#chat-messages div.message .bubble .msg-quote .name {
    font-size: 12px;
    font-weight: bold;
    color: #2d005f;
    opacity: 0.8;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#chat-messages div.message.right .bubble .msg-quote .name {
    color: #9069ef;
    opacity: 1
}

#chat-messages div.message .bubble .msg-quote .text {
    font-size: 12px;
    font-style: italic;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    opacity: 0.75;
}

.bubble .corner {
    position: absolute;
    width: 7px;
    height: 7px;
    left: 0;
    bottom: -15px;
    border-width: 20px 15px;
    border-style: solid;
    border-color: transparent transparent transparent #9069ef;
}

div.message.right .corner {
    left: auto;
    right: 0;
    border-color: transparent #e6e6e6 transparent transparent;
}

.bubble span.time {
    color: #ffffff;
    text-align: right;
    font-size: 11px;
    margin-top: 5px;
    float: right;
    text-transform: capitalize;
}

.bubble .read-status {
    width: 16px;
    float: right;
    margin-top: 10px;
    margin-left: 5px;
}

.bubble .msg-menu {
    position: absolute;
    color: #919294;
    right: -28px;
    top: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    display: none;
}

.message:hover .msg-menu {
    display: block;
}

.bubble .msg-menu a {
    background: #e5e6e8;
    color: #919294;
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}

.right .bubble .msg-menu {
    right: unset;
    left: -28px;
}

.bubble .attachments {
    display: flex;
    flex-basis: 100%;
    float: left;
    flex-wrap: wrap;
    margin: 10px 0 0;
}

.bubble .attachments .attachment:last-child {
    margin-right: 0;
}

.bubble .attachments .attachment {
    height: 100px;
    max-width: 140px;
    margin: 0 10px 10px 0;
    background: #9f7bf7;
    border-radius: 3px;
    padding: 10px 5px;
    min-width: 100px;
    text-align: center;
}

#chat-messages .bubble .attachments .attachment .name {
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

#chat-messages .right .bubble .attachments .attachment .name {
    color: #414244;
}

#chat-messages .bubble .attachments .attachment .image-preview {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 5px;
}

#chat-messages .bubble .attachments .attachment .doc-preview {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d9caff
}

#chat-messages .right .bubble .attachments .attachment .doc-preview {
    color: #717274
}

#chat-messages .bubble .attachments .attachment .doc-preview:before {
    font-family: 'Font APEX Small' !important;
    content: "\f15b";
    font-size: 36px;
}

.right .bubble .attachments .attachment {
    background: #f0f0f1;
}

.bubble span.fa:hover {
    color: #9069ef
}

.right .bubble span.time {
    text-align: left;
    color: #999
}

#sendmessage {
    min-height: 71px;
    border-top: 1px solid #e7ebee;
    bottom: 0;
    right: 0px;
    width: 100%;
    background: #f2f3f6;
    padding: 15px;
    position: relative;
}

#sendmessage textarea {
    resize: none;
    border-radius: 20px;
    padding: 10px 10px 10px 40px;
    width: calc(100% - 50px);
    background: #ffffff;
    display: block;
    max-height: 100px;
    border: none;
    box-shadow: inset -1px 0 0 0 #e8e9eb, inset 0 -1px 0 0 #e8e9eb, -1px -1px 0 0 #e8e9eb, -1px 0 0 0 #e8e9eb, 0 -1px 0 0 #e8e9eb;
}

#sendmessage textarea:focus, #sendmessage textarea:active {
    border: none;
    box-shadow: inset -1px 0 0 0 #e7d2ff, inset 0 -1px 0 0 #e7d2ff, -1px -1px 0 0 #e7d2ff, -1px 0 0 0 #e7d2ff, 0 -1px 0 0 #e7d2ff !important;
}

#sendmessage input {
    background: #fff;
    margin: 21px 0 0 21px;
    border: none;
    padding: 0;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: #aab8c2;
}

#sendmessage input:focus {
    outline: 0;
}

#sendmessage #send {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 15px;
    top: 14px;
    border: none;
    background: #9069ef;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sendmessage .add-attach {
    display: flex;
    position: absolute;
    background: #e8e9eb;
    top: 20px;
    left: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#sendmessage .add-attach:hover {
    background: #9069ef;
    color: #fff;
}

#sendmessage #send:hover, #sendmessage #send:focus {
    background: #6d32af
}

#sendmessage #send:hover {
    cursor: pointer;
    background-position: 0 0;
}

#sendmessage #send:focus {
    outline: 0;
}

#close {
    position: absolute;
    top: 8px;
    opacity: 0.8;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#close:hover {
    opacity: 1;
}

.cx, .cy {
    background: #fff;
    position: absolute;
    width: 0px;
    top: 15px;
    right: 15px;
    height: 3px;
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.cx.s1, .cy.s1 {
    right: 0;
    width: 20px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.cy.s2 {
    -ms-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.cy.s3 {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.cx.s1 {
    right: 0;
    width: 20px;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.cx.s2 {
    -ms-transform: rotate(140deg);
    -webkit-transform: rotate(140deg);
    transform: rotate(140deg);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -ms-transition: all 100 ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}

.cx.s3 {
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transition: all 100ms ease-out;
}

#chatview {
    overflow: hidden;
}

#sendmessage .loader {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 600;
    position: absolute;
    left: 50%;
    color: #a5a5a5;
    background-image: url('https://media.animotech.io/resourses/icons/notifications/sending-anim.svg');
    background-repeat: no-repeat;
    background-position: 50%;
    top: -35px;
    width: 100px;
    text-align: center;
    background-color: #e8e9eb;
    height: 20px;
    border-radius: 10px;
    margin-left: -50px;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

#chatview.active {
    transform: translate(0, 0);
}

#chatview .files-list {
    height: 90px;
    padding: 10px;
    border-top: 1px solid #e8e9eb;
    background: #f2f3f6;
}

#chatview .quote {
    border-top: 1px solid #e8e9eb;
    position: relative;
    background: #f2f3f6;
    padding: 5px 60px;
}

#chatview .quote .fa-reply {
    position: absolute;
    font-size: 30px;
    color: #9069ef;
    left: 10px;
    top: 50%;
    margin-top: -15px;
}

#chatview .quote .fa-times {
    position: absolute;
    font-size: 24px;
    color: #495057;
    right: 10px;
    top: 50%;
    margin-top: -12px;
    cursor: pointer;
}

#chatview .quote .fa-times:hover {
    color: #d95bca;
}

#chatview .quote span.name {
    font-size: 12px;
    color: #9069ef;
    font-weight: 600;
}

#chatview .quote p {
    font-size: 13px;
    font-style: italic;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chatview .files-list .files-list-container {
    display: flex;
}

#chatview .files-list .file {
    font-size: 10px;
    padding: 0 10px;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-right: 1px solid #e6e7e9f9
}

#chatview .files-list .file .loading {
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -25px;
    bottom: 23px;
    z-index: 0;
    width: 50px;
    background-image: url('https://animotech-media.s3.eu-north-1.amazonaws.com/resourses/icons/rounded-preloader.gif?');
    background-size: 80%;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 50%;
}

#chatview .files-list .file .fa-times-circle {
    position: absolute;
    top: 0;
    right: 15px;
    width: auto;
    cursor: pointer;
    overflow: visible;
    text-overflow: ellipsis;
}

#chatview .files-list .file .fa-times-circle:hover {
    color: #d95bca
}

#chatview .files-list .file .doc-icon.image {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
}

#chatview .files-list .file .doc-icon.image:before {
    display: none;
}

#chatview .files-list .file .doc-icon {
    height: 50px;
    width: 50px;
    margin-bottom: 3px;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

#chatview .files-list .file .doc-icon:before {
    font-family: 'Font APEX Small' !important;
    content: "\f016";
    color: #ffffff;
    background: #848589;
    border-radius: 3px;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#chatview .files-list .file.loading .doc-icon:before {
    content: "" !important;
    background: #848589 !important;
}

#chatview .files-list .file .doc-icon.pdf:before {
    content: "\f1c1";
    background: #e53935;
}

#chatview .files-list .file .doc-icon.ps:before {
    content: "\f1c5";
    background: #f79500
}

#chatview .files-list .file .doc-icon.css:before {
    content: "\e963";
    background: #795548
}

#chatview .files-list .file .doc-icon.js:before {
    content: "\ec47";
    background: #E91E63
}

#chatview .files-list .file .doc-icon.json:before {
    content: "\ec49";
    background: #7e6cd6;
}

#chatview .files-list .file .doc-icon.xls:before,
#chatview .files-list .file .doc-icon.xlsx:before {
    content: "\f1c3";
    background: #1c6c40;
}

#chatview .files-list .file .doc-icon.docx:before,
#chatview .files-list .file .doc-icon.doc:before {
    content: "\f1c2";
    background: #295394;
}

#chatview .files-list .file .doc-icon.ppt:before,
#chatview .files-list .file .doc-icon.pptx:before {
    content: "\f1c4";
    background: #ca4223;
}

#chatview .files-list .file .doc-icon.mp4:before {
    background: #9069ef;
    content: "\f1c8";
}

#chatview .files-list .file .doc-icon.txt:before {
    content: "\f0f6";
    color: #ffffff;
}

#chatview .files-list .file .doc-icon.rar:before,
#chatview .files-list .file .doc-icon.zip:before,
#chatview .files-list .file .doc-icon.jar:before,
#chatview .files-list .file .doc-icon.gz:before {
    content: "\f1c6";
    background: #333;
}

#chatview .files-list .file span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    text-align: center;
}

#chatview #new-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f6f7f9;
    z-index: 10;
    display: flex;
}

#chatview #new-group .selected-users-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
    padding-left: 10px;
}

#chatview #new-group #selected-contacts-container {
    height: calc(100% - 30px);
    padding-left: 10px;
}

#chatview #new-group .selected-users-header > span {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#chatview #new-group .selected-users-header > span:hover {
    color: #d95bca
}

#chatview #new-group .selected-users-header > span .fa {
    margin-right: 3px
}

#chatview #new-group #dialog-users {
    flex-basis: 400px;
}

#chatview #new-group #dialog-params {
    flex-basis: calc(100% - 400px);
    padding: 20px 40px;
    overflow: auto;
}

#chatview #new-group #dialog-params .upload-container {
    width: 150px;
    height: 220px;
}
#chatview #new-group #dialog-params .upload-container a {
    width:150px;
    background:#9269ee;
    margin-top:5px;
    height:35px;
    color: #fff;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    cursor:pointer;
    border-radius:5px
}
#chatview #new-group #dialog-params .upload-container a.add-crop,
#chatview #new-group #dialog-params .upload-container.ready a.save-crop {
    display:flex;
}
#chatview #new-group #dialog-params .upload-container a.save-crop,
#chatview #new-group #dialog-params .upload-container.ready a.add-crop {
    display:none;
}
#chatview #new-group #dialog-params .upload-container a .fa {
    margin-right:5px;
}
#chatview #new-group #dialog-params .upload-container #crop-dialog-image,
#chatview #new-group #dialog-params .upload-container.ready .upload-msg {
    display: none;
}

#chatview #new-group #dialog-params .upload-container.ready #crop-dialog-image {
    width: 160px;
    display: block;
    position: relative;
    height: 150px;
}

#chatview #new-group #dialog-params .upload-container.ready #crop-dialog-image.croppie-container .cr-boundary {
    margin: 0;
    background: #cbcdd2;
}

#chatview #new-group #dialog-params .upload-container.ready #crop-dialog-image.croppie-container .cr-slider-wrap {
    transform: rotate(-90deg);
    margin: 0;
    position: absolute;
    right: 0;
    transform-origin: 100% 0;
    top: 0;
    width: 150px;
}

#chatview #new-group #dialog-params .upload-container .upload-msg {
    height: 150px;
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    box-shadow: inset -1px 0 0 0 #e8e9eb, inset 0 -1px 0 0 #e8e9eb, -1px -1px 0 0 #e8e9eb, -1px 0 0 0 #e8e9eb, 0 -1px 0 0 #e8e9eb;
    background: #f6f7f9;
    cursor: pointer;
}

#chatview #new-group #dialog-params .upload-container .upload-msg .default-dialog-image {
    background: #e8e9eb;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url('https://animotech-media.s3.eu-north-1.amazonaws.com/resourses/icons/noimage.svg');
    background-size: cover;
    background-position: 50%;
}

#chatview .croppie-container .cr-viewport, #chatview .croppie-container .cr-resizer {
    box-shadow: 0 0 2000px 2000px rgba(246, 247, 249, 0.6);
}

#chatview #new-group .dialog-types {
    display: flex;
    flex-direction: column;
}

#chatview #new-group .buttons-container {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e8e9eb;
    text-align: right
}

#chatview #new-group .buttons-container button {
    background: #8847d1;
    height: 40px;
    padding: 0 30px;
    color: #fff;
    border-radius: 3px;
    border: none;
    cursor: pointer;
}

#chatview #new-group .buttons-container button.deny {
    background: #d95bca;
}

#chatview #new-group .buttons-container button:disabled {
    background: #d0d1d5
}

#chatview #new-group .dialog-types .type {
    display: flex;
    flex-direction: row;
}

#chatview #new-group .dialog-types .type .type-content {
    display: flex;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
}

#chatview #new-group .dialog-types .type .type-content:hover .name,
#chatview #new-group .dialog-types .type .type-content:hover .description {
    color: #9069ef
}

#chatview #new-group .dialog-types .type .type-content .name {
    font-size: 15px;
    font-weight: 700
}

#chatview #new-group .dialog-types .type .type-content .description {
    font-size: 13px;
    font-weight: 400
}

#chatview #new-group .dialog-types .type .type-content .fa {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background: #d0d1d5;
    border-radius: 50%
}

#chatview #new-group .dialog-types .type .type-content.active .fa {
    background: #9069ef;
    color: #fff;
}

#chatview #new-group .dialog-types .type .type-content.active {
    background: #ebedef
}

#chatview #new-group #dialog-params label {
    display: block;
    font-size: 13px;
    margin-bottom: 10px;
}

#chatview #new-group #dialog-params input.dialog-image {
    display: none;
}

#chatview #new-group #dialog-params input[type='text'] {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #dee1e6;
    padding: 0 10px;
}

#chatview #new-group #dialog-users {
    border-right: 1px solid #e8e9eb;
    padding: 10px 10px 0 0;
}

#chatview #new-group #dialog-users .selected-contacts .content span {
    display: block
}

#chatview #new-group #dialog-users .selected-contacts .content span.org-name {
    font-size: 11px;
    color: #888;
}

#chatview #new-group #dialog-users .selected-contacts {
    height: 60px;
    background: #ebedef;
    padding: 5px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 5px;
    padding-right: 60px;
    position: relative;
}

#chatview #new-group #dialog-users .selected-contacts .remove-user {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 10px;
    top: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #aaa;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.1s ease-out, transform 0.2s cubic-bezier(0.49, 0.64, 0.62, 1.84);
}

#chatview #new-group #dialog-users .selected-contacts:hover .remove-user {
    opacity: 1;
    transform: translateY(0);
}

#chatview #new-group #dialog-users .selected-contacts .remove-user:hover {
    background: #d95bca
}

#chatview #new-group #dialog-users .selected-contacts .image {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-right: 8px;
    background-position: 50%;
    background-size: cover;
}

.jq-toast-single .image {
    position: absolute;
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 50%;
    background-size: cover;
    background-position: 50%;
}

.jq-toast-single .content {
    padding-left: 50px;
    min-height: 40px;
    font-size: 12px;
}

.jq-toast-single a {
    margin-left: 50px
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 60;
}

.p1 #profile .controls .dropdown-content {
    margin-left: -150px;
    margin-top: 15px;
    background-color: #f6f7f9;
    font-size: 12px
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items:center;
    border-bottom:1px solid #e8e9eb;
    cursor: pointer;
}
.dropdown-content a:last-child {
    border-bottom:none;
}
.dropdown-content a .fa {
    margin-right:5px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #e8e9eb;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}


h5.toast-dialog-name {
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 120%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-message .toast-icon {
    width: 40px;
    height: 40px;
    background-color: #fff;
    position: absolute;
    left: 15px;
    border-radius: 50%;
    background-size: cover;
    background-position: 50%;
    top: 50%;
    margin-top: -20px;
}

.toast-message .msg-toast {
    padding-left: 15px
}

.toast-message .msg-toast .message-text {
    font-size: 12px;
    font-style: italic;
    margin-bottom: 3px;
    line-height: 120%;
    opacity: 0.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.toast-message .msg-toast .name {
    font-style: normal;
    font-weight: 700;
}

.toast-message .msg-toast .dialog-type {
    font-size: 12px;
    text-align: right;
    color: #bb7eff;
    font-weight: bold;
}

.bubble .read-info-container {
    float: left;
    width: 100%;
}

#chatbox #chat-preloading {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(246, 247, 249, 0.6);
}

.last-message .attachments-counter {
    background: #e0e1e3;
    padding: 1px 8px;
    font-size: 11px;
    line-height: 100%;
    border-radius: 8px;
}
.friend .dialog-container .last-message a {
    position: unset;
    margin-top: unset;
    background: transparent;
    border-radius: 0;
    height: unset;
    width: unset;
    color: #9069ef;
    display: unset;
    align-items: unset;
    justify-content: unset;
    bottom: unset;
    top: unset;
    right: unset;
}
.friend .dialog-container .last-message a:hover {
    color:#be84f4;
    background: transparent;
}
.user-info-header {
    display: flex;
    justify-content: space-between;
    padding-right: 15px;
    align-items: center;
}
#list-of-contacts-for-add.contacts .organization-header{
    display: flex;
    flex-basis: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #e8e9eb;
}
#list-of-contacts-for-add.contacts .user {
    padding:5px 15px;
    border-bottom: 1px solid #e8e9eb;
    display:flex;
    gap:10px;
    align-items:center;
}
#list-of-contacts-for-add.contacts .user .image {
    width: 40px;
    height: 40px;
    margin-right: 8px;
    border-radius: 50%;
    background-position: 50%;
    background-size: cover;
}
#list-of-contacts-for-add.contacts .user .image.default{
    background-image: url(https://media.animotech.io/resourses/icons/user-default.svg) !important;
}
#list-of-contacts-for-add.contacts .organization-header .counter{
    display: flex;
    align-items: center;
    gap: 3px;
    background: #e0e1e2;
    padding: 3px 5px;
    font-size: 12px;
    border-radius: 2px;
}
#list-of-contacts-for-add.contacts .user button {
    display:flex;
    font-size:11px;
    min-width:100px;
    align-items:center;
    justify-content:center;
    gap:5px;
    //opacity:0;
    transition:opacity 0.15s ease-in-out;
}
#list-of-contacts-for-add.contacts .user button {
    background:#8847d1;
    border:none;
    color:#fff;
    border-radius:3px;
    opacity: 0;
    cursor:pointer;
}
#list-of-contacts-for-add.contacts .user:hover button {
    opacity:1
}
#list-of-contacts-for-add.contacts .user button:hover {
    opacity:0.85;
}
#list-of-contacts-for-add.contacts .user button.remove {
    background:#d95bca;
}
#list-of-contacts-for-add.contacts .user.current-user {
    background:#e0e1e3
}