/**
 * Messenger-Widget Stylesheet.
 *
 * @version     $Id: jquery.MessengerWidget.css 93 2020-10-15 09:55:57Z wassilios.meletiadis $
 * @package     WebMessenger
 * @subpackage  CSS
 * @author      Wassilios Meletiadis <wassilios.meletiadis@bplan-solutions.de>
 * @copyright   Copyright (C) 2019 - 2020 Wassilios Meletiadis, bplan-solutions GmbH & Co.KG <http://www.bplan-solutions.de/>
 * /Δ\
 */

html,
body {
    box-sizing      : border-box;
    height          : 100%;
    margin          : 0;
    overflow        : hidden;
    padding         : 0;
    width           : 100%;
}

div,
span {
    box-sizing      : border-box;
    /*height          : 100%;*/
    margin          : 0;
    overflow        : hidden;
    padding         : 0;
    width           : 100%;
}

body {
    /*
    **  Aktuelle Balkenfarbe: #9bcfc0
    **
    **  Wenn die Balkenfarbe geändert wird, dann müssen auch die entsprechenden
    **  Werte bei für background-color bei den Klassen "alt-area-header" und
    **  "area-header" angepasst werden. */
    background      : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAWgCAIAAAAQD74yAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAwSURBVFhH7cghEQAgFAWwdxgkiWhKGSL8RhTAYriJmWXVbkn40Ozj+gAAAAAAzyUHUd0NwB8OQ8QAAAAASUVORK5CYII=') repeat-x fixed;                                     /*  9cd1c1 / d9d8d0  */
}

hr {
    width           : 96%;
}

.container {
    max-width       : 1400px;
}

.main {
    box-shadow      : 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
    height          : calc(100% - 38px);
    margin          : auto;
    padding         : 0;
    position        : relative;
    overflow        : hidden;
    top             : 19px;
}

.active-list-item,
.active-list-item .list-item:hover {
    background-color: #e0e0e0;
}

.app {
    background-color: #f7f7f7;
    box-shadow      : 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
    height          : 100%;
    margin          : 0;
    overflow        : hidden;
    padding         : 0;
}

.avatar img {
    border-radius   : 50%;
}

#a-column,
#b-column,
#c-column {
    height          : 100%;
    margin          : 0 !important;
    padding         : 0 !important;
}

.details-body {
    height          : calc(100% - 60px);
    overflow-y      : auto;
}

.details-area {
    border-left     : 1px solid rgba(0, 0, 0, .08);
    display         : none;
    height          : 100%;
    margin          : 0 !important;
    padding         : 0 !important;
}

.list-item-label {
    color           : #333;
    font-size       : 100%;
    font-weight     : 400;
    padding         : 1% !important;
    text-align      : left;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}

.fa-2x {
    font-size       : 1.5em;
}

.sidebar,
.list-item-button {
    background-color: #fff;
    border          : 1px solid #f7f7f7;
    height          : 100%;
    margin          : 0 !important;
    overflow-y      : auto;
    padding         : 0 !important;
}

#a-columns .sidebar {
    height          : calc(100% - 120px);
}

.icon {
    color           : #93918f;
    cursor          : pointer;
}

#conversations-container,
#contacts-container,
#group-builder-container {
    display         : block;
    height          : 100%;
    margin          : 0;
    padding         : 0;
    position        : relative;
    top             : 0;
    width           : 100%;
    z-index         : 1;
}

#contacts-container,
#group-builder-container {
    left            : -100%;
    top             : -100%;
    z-index         : 2;

    -webkit-transition: left 0.3s ease;
    transition        : left 0.3s ease;
}

#group-builder-container {
    left            : 100%;
    top             : -200%;
    z-index         : 3;
}


#group-builder-name-input.form-control:focus {
	border          : 1px solid #cccccc !important;
}

.area-header {
    background-color: #eee;
    height          : 60px;
    margin          : 0;
    padding         : 10px 16px 10px 15px;
    width           : 100%;
    z-index         : 1000;
}

.area-header .avatar {
    cursor          : pointer;
    padding         : 0;

}

.area-header .icon-button {
    padding         : 0;
}

.area-header .icon-button i {
    padding         : 5px;
    /*text-align      : center;*/
}

.area-header .avatar img {
    height          : 40px;
    width           : 40px;
}

.area-header-contents {
    color           : #444;
    cursor          : pointer;
    display         : block;
    font-size       : 100%;
    font-weight     : 700;
    padding         : 5px 5px 0 5px;
    text-align      : left;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}

.alt-area-header {
    background-color: #9bcfc0;
    height          : 100px;
    margin          : 0 !important;
    padding         : 10px 16px 10px 15px !important;
    width           : 100%;
    z-index         : 1001;
}

.alt-area-header .icon {
    color           : #fff;
}

.sidebar .avatar img,
.list-item .avatar img {
    background-color: #eee;
    border          : 1px solid #dfdfdf;
    height          : 49px;
    width           : 49px;
}

.counterpart-details,
.group-members-list {
    margin          : 0;
}

.counterpart-details .avatar {
    margin          : 20px 0;
    text-align      : center;
}

.counterpart-details .avatar img {
    height          : 200px;
    width           : 200px;
}


#a-column .avatar img.online {
    background-color: #72c02c;
    border          : 2px solid #72c02c;

    -moz-transition   : border-color 3.25s ease;
    -ms-transition    : border-color 3.25s ease;
    -o-transition     : border-color 3.25s ease;
    -webkit-transition: border-color 3.25s ease;
    transition        : border-color 3.25s ease;
}

.details-body hr.group {
    margin-top      : 0;
}

.details-body .conversation-displayname {
    display         : block;
    height          : 34px;
    padding         : 7px 0px 0px 13px;
}

.details-body .conversation-displayname-input-toggler {
    height          : 34px;
    margin          : 30% 10px 0 0;
}

.details-body .online-status {
    padding-left    : 13px;
}

.online-status {
    color           : #93918f;
    font-size       : 12px;
    font-weight     : normal;
    /*padding         : 0 5px;*/
}

.hovereffect {
    cursor          : default;
    float           : left;
    height          : 100%;
    overflow        : hidden;
    position        : relative;
    text-align      : center;
    width           : 100%;
}

.hovereffect .overlay {
    height          : 100%;
    left            : 0;
    overflow        : hidden;
    position        : absolute;
    top             : 0;
    width           : 100%;
}

.hovereffect img {
    display         : block;
    position        : relative;

    -webkit-transition: all 0.4s ease-in;

    transition      : all 0.4s ease-in;
}

.hovereffect:hover img {
    -webkit-filter   : grayscale(1) blur(3px);
    -webkit-transform: scale(1.2);
    -ms-transform    : scale(1.2);

    filter          : url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
    filter          : grayscale(1) blur(3px);
    transform       : scale(1.2);
}

.hovereffect h2 {
    background      : rgba(0, 0, 0, 0.6);
    font-size       : 17px;
    padding         : 10px;
    position        : relative;
    text-transform  : uppercase;
    text-align      : center;
}

.hovereffect a.info {
    background-color: transparent;
    /*border          : 1px solid #fff;*/
    border          : 1px solid #000;
    display         : inline-block;
    /*margin          : 50px 0 0 0;*/
    margin          : 25% 0 0 0;
    padding         : 7px 14px;
    text-decoration : none;
}

.hovereffect a.info:hover {
    box-shadow      : 0 0 5px #fff;
}

.hovereffect a.info, .hovereffect h2 {
    /*color           : #fff;*/
    color           : #000;
    opacity         : 0;
    text-transform  : uppercase;

    -webkit-transform : scale(0.7);
    -ms-transform     : scale(0.7);
    -webkit-transition: all 0.4s ease-in;

    filter          : alpha(opacity=0);
    transition      : all 0.4s ease-in;
    transform       : scale(0.7);
}

.hovereffect:hover a.info, .hovereffect:hover h2 {
    opacity         : 1;

    -webkit-transform: scale(1);
    -ms-transform    : scale(1);

    filter          : alpha(opacity=100);
    transform       : scale(1);
}

.input-container {
    height          : 60px;
    margin          : 0 !important;
    padding         : 0 !important;
    width           : 100%;
}

.input-container-inner {
    background-color: #fbfbfb;
    height          : 100%;
    padding         : 10px !important;
    width           : 100%;
}

.input-container-inner input:focus {
    border          : none;
    box-shadow      : none;
    outline         : none;
}

img.profile-image {
    margin          : 0 auto;
}

.profile-image-input {
    display         : none !important;
}

.sideBar {
    background-color: #fff;
    border          : 1px solid #f7f7f7;
    height          : calc(100% - 120px);
    margin          : 0 !important;
    overflow-y      : auto;
    padding         : 0 !important;
}

.list-item {
    cursor          : pointer;
    border-bottom   : 1px solid #f7f7f7;
    margin          : 0 !important;
    height          : 70px;
    padding         : 10px !important;
    position        : relative;
}

.list-item:hover {
    background-color: #f2f2f2;
}

.message-request-link.deactivated {
    color           : #ccc;
    cursor          : default;
    text-decoration : none;
}

.sideBar-avatar {
    font-size       : 0.7em;
    padding         : 0 !important;
    text-align      : center;
}

.sideBar .badge-container {
    display         : inline-block;
    padding-right   : 14px;
    position        : relative;
    text-align      : right;
}

.sideBar .list-item-context-menu {
    bottom          : 0;
    color           : rgba(0, 0, 0, 0.4);
    cursor          : pointer;
    display         : inline;
    font-size       : 1.1em;
    height          : 25px;
    position        : absolute;
    right           : 0;
    text-align      : center;
    width           : 25px;
}

.sideBar .conversation-context-menu:hover,
.sideBar .conversations-list-item-context-menu:hover {
    color           : rgba(0, 0, 0, 0.6);
}


.sideBar .unread-messages-badge {
    background-color: #72c02c;
    border-radius   : 50px;
    color           : #fff;
    display         : none;
    line-height     : 18px;
    min-height      : 18px;
    min-width       : 18px;
    position        : absolute;
    right           : 6px;
    text-align      : center;
    top             : 0;
    width           : auto;
}

.unread-messages-divider {
    border-top      : 1px solid #ccc;
    line-height     : 24px;
    margin          : -1px 0 -35px 7px;
    text-align      : center;
    width           : 98%;
    z-index         : 100;
}

@media all and (-ms-high-contrast:none) {
    .unread-messages-divider {
        margin      : 0 0 -36px 21px;   /* IE10 */
    }

    *::-ms-backdrop, .unread-messages-divider {
        margin      : 0 0 -36px 21px;   /* IE11 */
    }
}

.unread-messages-divider span {
    background-color: #e1f3fb;
    border-left     : 1px solid #ccc;
    border-right    : 1px solid #ccc;
    border-bottom   : 1px solid #ccc;
    border-bottom-left-radius : 17px;
    border-bottom-right-radius: 17px;
    display         : block;
    font-size       : 0.9em;
    font-weight     : normal;
    margin          : 0 auto;
    padding         : 5px 15px 5px 15px;
    position        : relative;
    width           : 200px;
    z-index         : 101;
}

.sideBar-main {
    padding         : 0 !important;
}

.sideBar-main .row {
    margin          : 0 !important;
    padding         : 0 !important;
}

.sideBar-time {
    padding         : 10px !important;
}

/*.time-meta {*/
.list-item-info-text {
    color           : rgba(0, 0, 0, .4);
    font-size       : 12px;
    padding         : 1% !important;
    text-align      : right;
    vertical-align  : baseline;
}

.group-members-list-item-info {
    padding         : 3px !important;
}

.groupadmin-label {
    border          : 1px solid #090;
    color           : #090;
    font-size       : 0.8em;
    padding         : 3px !important;
    text-align      : center;
}


/*New Message*/

.newMessage {
    height          : 100%;
    left            : -100%;
    margin          : 0 !important;
    padding         : 0 !important;
    position        : relative;
}

.newMessage-main {
    color           : #fff;
    height          : 60px;
    margin          : 0 !important;
    margin-top      : 30px !important;
    padding         : 10px 16px 0 15px !important;
    width           : 100%;
    z-index         : 1001;
}

.newMessage-title {
    font-size       : 18px;
    font-weight     : 700;
    padding         : 10px 5px !important;
}

.newMessage-back {
    cursor          : pointer;
    display         : block;
    padding         : 12px 5px !important;
    text-align      : center;
    vertical-align  : baseline;
}

.newMessage-back i {
    margin          : auto !important;
}

#contacts-sidebar,
#group-builder-sidebar {
    background-color: #fff;
    border          : 1px solid #f7f7f7;
    height          : calc(100% - 232px);
    margin          : 0 !important;
    overflow-y      : auto;
    padding         : 0 !important;
}

#group-builder-sidebar {
    height          : calc(100% - 160px);
}


/*Conversation*/

.conversation {
    border-left     : 1px solid rgba(0, 0, 0, .08);
    height          : 100%;
    margin          : 0 !important;
    /*overflow-y      : auto;*/
    padding         : 0 !important;
    /*width           : 100%;*/
}

.message {
    background      : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABZ0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMUzvxf8AAAQ1SURBVHhe7ZpfaJVlHMf3r21BErqGNMt1EejVll4MEWWxha2By64iCELyLqKgUFPEPxeGEFkXQdAUkYJdbEEoxRjpolCioIHMC4MgGIEuaYzKs/Nn6/N9/b3Hs7HTzrabsO8Hvvye932fc/Ph957nPc97qowxxhhjjDHGGGOMMeZ+YG5uro5Ux6FZDrOzs52FQmGA+h4S6+O0qQQJQ94Q8t6inqe2xiWzFJJHGhE3irgvyFHSF5fNv5HL5Z6OzjtDehl/nM/nDyD0gZhiyoGkWoQNZjKZzYh8gfFnSFwTl005EFdNNiKrnUjcOYkjW9x5FYCoDqQNkI8Y6/uul+yNy2YpkPU66SZrkDhC1zXGJVMO3bYI20mtpbYj7iL5hPGpmGKWAlnrWSx2q+MYt5A2CY3LphKQ1kSet7hVkHYitSFOmeXiTlwBsYCsp64lWlTciZWCsBpW3XfJLfKzuk/nqe7EpUCONgo+RFSO3CZ/cvw33det6xy7E8sRnSd5eerEzMzMU/l8fj/HHBb6dStrHsdNSHw2PTaAjHrEnCY5yaNuIy2Mh7kmjpGiMMY1MTQim81uR9gd8htpC3mjMke9xHFzTDWLgadnkKTvvW/Jo2RQ8qgjOo5pphxIWkenfUPVF56kvUa+Ipa3GDRXPbftDgTtIut0jtqKvMtU8SXZkEw280FeDXJOIytDtOJ+n8qiSuJ3VHXiEHO9aVoKQkqf87RgXCFaKFQf0xyqJA7xqOKXRaWo80Je8pxH1RbVw4yTjmP8IyXtxAaO/ZyXggy9FDqJmOJzXlySLO0261FFq+4F5vpF+UIQ04ykm9TfSXucltg6fm28wTm9JNfCoU1Ud95CkKJb9TqCMuRVSZI8xm8SfR/eII/HdLOQELYHiX8gKhtd97bkcW6K2qc5d2cbCdO7jFfI+xJHku81jl9EmHZZ8kSPKrqtvdqWgqx0tdWtqYVB9RDna4k2R5/j+jBVC0e3zsVHDTKKz3nUCW7VdxhPMs4w1v9Ykk6UNOKN0VIQsthznjqui+i2LXZifMSUQoelK+q85zzBcQ+ZJL8i8Ik4bVKQUkfXfY0gCeyN00WiEztJj8Zx2qQyVBF4nKpF4yeyKZlgyoOrGm7bI8jaqmNqAxkIiWMU36rlQE7prspV8qDOU/Xfvc9DojrxyeQD5h64WbjadnBOf4JMJEouY/2nbyqXy3UlHzJ3kZy08ySPW1hb7+rAv8g1kmwUMO8hxvNW4v89SNFK+gFJO+9lMs553a6/EP00+1Tz4iOmFPzon6IzSNJOsjpvnOg37VlygnCpoLdpfme7GNyu+5CkbtPbs+vReZKnlTjdVfF3Xjnw9QiCxojIkn5ymEied1UqYXp6ujk6sRehB0Oe9/OWC8JeCnnuvJWANP135Qd33ipAnv+jZ4wxxhhjjDHGGGPMf4Wqqn8AmPBAxfio9QoAAAAASUVORK5CYII=') repeat;
    border          : 1px solid #f7f7f7;
    height          : calc(100% - 120px);
    margin          : 0 !important;
    overflow-y      : auto;
    padding         : 0 !important;
}

.message-previous {
    height          : auto;
    margin          : 0 !important;
    padding         : 0 !important;
    width           : 100%;
}

.modal-dialog {
    height          : 80%;
}

.modal-content {
    height          : 100%;
    position        : relative;
}

.modal-body {
    max-height      : 84%;
    overflow-y      : auto;
}

.modal-footer {
    bottom          : 0;
    position        : absolute;
}

.previous {
    font-size       : 15px;
    padding         : 10px !important;
    text-align      : center;
}

.previous a {
    cursor          : pointer;
    font-weight     : 700;
    text-decoration : none;
}

.message-body,
.system-message-body {
    height          : auto;
    margin          : 0 !important;
    padding         : 0 !important;
    width           : auto;
    z-index         : 10;
}

.message-body .avatar {
    font-size       : 0.7em;
    padding         : 0 !important;
    text-align      : center;
}

.message-body .avatar img {
    border          : 1px solid #dfdfdf;
    height          : 55px;
    width           : 55px;
}

.message-main-receiver {
    max-width       : 60%;
    padding         : 3px 20px;
}

.message-main-sender {
    margin-left     : 40% !important;
    max-width       : 60%;
    padding         : 3px 20px !important;
}

.message-sender-displayname {
    color           : #9a9a9a;
}

.message-text {
    font-family     : 'Segoe UI Emoji', 'Open Sans', 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size       : 14px;
    font-weight     : 200;
    margin          : 0 !important;
    padding         : 5px !important;
    padding-bottom  : 0 !important;
    word-wrap       : break-word;
}

.message-time {
    color           : #9a9a9a;
    font-size       : 12px;
    margin          : 0 !important;
    margin-left     : 50px !important;
    text-align      : right;

}

.message-readstatus-read {
    color           : #1ab5f2;
}

.message-readstatus-unread {
    color           : #9a9a9a;
}

.receiver {
    background-color: #ffffff;
    display         : inline-block;
    border-radius   : 10px 10px 10px 0;
    font-size       : 12px;
    padding         : 4px 10px 7px !important;
    text-shadow     : 0 1px 1px rgba(0, 0, 0, .2);
    width           : auto !important;
    word-wrap       : break-word;
}

.sender {
    display         : inline-block;
    background-color: #dcf8c6;
    border-radius   : 10px 10px 0 10px;
    float           : right;
    font-size       : 12px;
    padding         : 4px 10px 7px !important;
    text-shadow     : 0 1px 1px rgba(0, 0, 0, .2);
    width           : auto !important;
    word-wrap       : break-word;
}

.system-message-main {
    /*background-color: #e1f3fb;*/
    /*box-shadow      : 0 1px 0.5px rgba(0, 0, 0, 0.13);*/
    box-sizing      : border-box;
    display         : inline-block;
    flex            : none;
    margin          : 10px !important;
    margin-left     : auto;
    margin-right    : auto;
    /*max-width       : 100%;*/
    padding         : 3px 20px;
    position        : relative;
    text-align      : center
}

.system-message-text {
    background-color: #e1f3fb;
    border-radius   : 8px 8px 8px 8px;
    color           : #666;
    font-size       : 0.85em;
    line-height     : 1.6em;
    padding         : 10px 12px;
    text-align      : center;
    text-shadow     : 0 1px 0 rgba(255, 255, 255, 0.4);
}

/*Reply*/

.reply {
    background-color: #f5f1ee;
    height          : 60px;
    margin          : 0 !important;
    padding         : 10px 5px 10px 5px !important;
    width           : 100%;
    z-index         : 1000;
}

.reply-emojis {
    padding         : 5px !important;
}

.reply-emojis i {
    color           : #93918f;
    cursor          : pointer;
    padding         : 5px 5px 5px 5px !important;
    text-align      : center;
}

.reply-recording {
    padding: 5px !important;
}

.reply-recording i {
    color           : #93918f;
    cursor          : pointer;
    padding         : 5px !important;
    text-align      : center;
}

.reply-send {
    padding         : 5px !important;
}

.reply-send i {
    color           : #93918f;
    cursor          : pointer;
    padding         : 5px !important;
    text-align      : center;
}

.reply-main {
    padding         : 2px 5px !important;
}

.reply-main textarea {
    border          : none;
    box-shadow      : none;
    font-family     : 'Segoe UI Emoji', 'Open Sans', 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size       : 16px;
    height          : 100%;
    outline         : none;
    overflow        : hidden;
    padding         : 5px !important;
    resize          : none;
    /*text-indent     : 5px;*/
    width           : 100%;

    white-space     : pre-line;
}

.reply-main textarea:focus {
    border          : none;
    box-shadow      : none;
    outline         : none;
    text-indent     : 5px;
}


@media screen and (max-width: 700px) {
    .main {
        height          : 100%;
        top             : 0;
    }

    .area-header {
        background-color: #9bcfc0;
        height          : 70px;
    }

    .list-item-label {
        font-size       : 16px;
        padding         : 5% !important;
        white-space     : nowrap;
    }

    .fa-2x {
        font-size       : 2.3em !important;
    }

    .sidebar .avatar {
        padding         : 0 !important;
    }

    .area-header .avatar img {
        height          : 50px;
        width           : 50px;
    }
/*
    .heading-avatar-icon img {
        height          : 50px;
        width           : 50px;
    }
*/
    #contact-list-link {
        padding         : 5px !important;
    }

    #contact-list-link i {
        color           : #fff;
    }

    .sideBar {
        height          : calc(100% - 130px);
    }

    .list-item {
        height          : 80px;
    }


    .sideBar-avatar {
        padding         : 0 8px !important;
        text-align      : left;
    }

    .sideBar-avatar img {
        height          : 55px;
        width           : 55px;
    }

    .sideBar .badge-container {
        padding-right   : 8px;
    }

    .sideBar .unread-messages-badge {
        right           : 0;
        top             : 0;
    }

    .sideBar-main {
        padding         : 0 !important;
    }

    .sideBar-main .row {
        margin          : 0 !important;
        padding         : 0 !important;
    }

    .sideBar-time {
        padding         : 10px !important;
    }

    /*.time-meta {*/
    .list-item-info-text {
        color           : rgba(0, 0, 0, .4);
        font-size       : 14px;
        padding         : 4% !important;
        text-align      : right;
        vertical-align  : baseline;
    }


    /*Conversation*/
    .conversation {
        border-left     : 1px solid rgba(0, 0, 0, .08);
        height          : 100%;
        margin          : 0 !important;
        /*overflow-y      : auto;*/
        padding         : 0 !important;
        /*width           : 100%;*/
    }

    .message {
        height          : calc(100% - 140px);
    }

    .reply {
        height          : 70px;
    }

    .reply-emojis {
        padding         : 5px 0 !important;
    }

    .reply-emojis i {
        padding         : 5px 2px !important;
        font-size       : 1.8em !important;
    }

    .reply-main {
        padding         : 2px 8px !important;
    }

    .reply-main textarea {
        font-size       : 18px;
        padding         : 8px !important;
    }

    .reply-recording {
        padding         : 5px 0 !important;
    }

    .reply-recording i {
        font-size       : 1.8em !important;
        padding         : 5px 0 !important;
    }

    .reply-send {
        padding         : 5px 0 !important;
    }

    .reply-send i {
        font-size       : 1.8em !important;
        padding         : 5px 2px 5px 0 !important;
    }
}


/* *** Vom Standard abweichende Anpassungen *** ********************* */

.sideBar-text {
    color           : rgba(0, 0, 0, 0.6);
    font-family     : 'Segoe UI Emoji', 'Open Sans', 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size       : 0.9em;
    text-overflow   : ellipsis;
}

#contacts-container .list-item-label,
#group-builder-container .list-item-label {
    padding         : 13px 10px 10px 5px !important;
}

#conversations-container .list-item-label {
    padding         : 3px 0 5px 5px !important;
}

#conversations-container .sideBar-text {
    padding         : 0 10px 5px 5px !important;
}

#conversations-container .sideBar-time {
    padding         : 5px 10px 5px 5px !important;
}

#modal-popup {
    width           : 600px;
}

.emoji {
    cursor          : pointer;
    display         : block;
    float           : left;
    font-family     : 'Segoe UI Emoji', 'Open Sans', 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size       : 2.1em;
    margin          : 3px;
    user-select     : none;
    width           : 38px;

    -moz-user-select     : none;
    -ms-user-select      : none;
    -khtml-user-select   : none;
    -webkit-touch-callout: none;
    -webkit-user-select  : none;

}

@media screen and (max-width: 700px) {

    .list-item-label {
        /*white-space     : nowrap;*/
    }
}