/* ВИДЖЕТ ОБЩЕНИЯ - начало */
/*подключаем шрифты */
@font-face {
 font-family: 'TT-Livret-Bold'; 

src: url('/fileservice/file/download/h/b0dbe782d2e338ffc6e13a7573881d0d.otf/a/356532/sc/245') format('opentype'),
     url('/fileservice/file/download/h/33e20b5b793d822ec3cf790ddf63ae87.woff/a/356532/sc/249') format('woff');
}

@font-face {
 font-family: 'TT-Livret-Regular'; 

src: url('/fileservice/file/download/h/0dc4464d1ac82465104dadfb2a58bc83.otf/a/356532/sc/225') format('opentype'),
     url('/fileservice/file/download/h/441bc39768d2f64f03d741fec11aaec0.woff/a/356532/sc/232') format('woff');
}

@font-face {
 font-family: 'Tilda-Sans-Regular'; 

src: url('/fileservice/file/download/h/044bfa49287ff92d774897d5716ea167.otf/a/356532/sc/79') format('opentype'),
     url('/fileservice/file/download/h/df6d698091a878cc23367bb7a034c704.woff/a/356532/sc/105') format('woff');
}

@font-face {
 font-family: 'Tilda-Sans_Bold'; 

src: url('/fileservice/file/download/h/4ea9d017021de7dcb38e219751738731.otf/a/356532/sc/49') format('opentype'),
     url('/fileservice/file/download/h/fc4a52547bc419a91910d069e02f96d9.woff/a/356532/sc/105') format('woff');
}

:root {
    --Mcolor1: #7200C4;
    --Mcolor2: #FF8AF8;
    --Mcolor3: #453F3F;
    --Mwhite:  #ffffff;
    --Mblack:  #333333;
    --Mbackground: #F9F9FB;
    --Mbackground-gradient: linear-gradient(266.64deg, #FF8AF8 3.43%, #7200C4 101.16%);
    --Mbackground-form: #F9F9FB;
    --Mbackground-form-gradient: linear-gradient(266.64deg, #FF8AF8 3.43%, #7200C4 101.16%);
    --Mfont: 'Tilda-Sans-Regular', Roboto, sans-serif!important; 
    --M2font: 'TT-Livret-Bold', serif!important;
}

/* Виджет общения - кнопка виджета - оформление */
.talks-widget-button {
    color: var(--Mwhite);
    background: var(--Mcolor1);
    box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
}

/* Виджет общения - кнопка виджета - счетчик */
.talks-widget-button .conversations-counter {
    top: 0;
    left: -3px;
    font-family: var(--Mfont);
    background: var(--Mcolor3);
    color: var(--Mwhite);
    border-radius: 6px;
    width: 25px;
    font-weight: 700;
}

/* Форма виджета общения - Раскрывающееся окно */
.talks-widget-window {
    font-family: var(--Mfont);    
    background: #fffffffa;
    border-left: 1px solid var(--Mcolor5);
    box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
}

/* Форма виджета общения - Заголовок */
.talks-widget-window .talks-widget-header {
    font-family: var(--Mfont);
    color: var(--Mwhite);
    background: var(--Mcolor1);
    /* нижнее подчеркивание под блоком заголовка */
    border-bottom: 1px solid var(--Mcolor1);
}

/* Форма виджета общения - Каждый из блоков обращения */
.talks-widget-window .talks-widget-body .conversations-list-block .conversation-annotate .conversation-data-block {
    /* нижнее подчеркивание под обращением */
    border-bottom: 1px solid var(--Mcolor5);
}

.talks-widget-window .talks-widget-body .conversations-list-block .conversation-annotate .conversation-data-block .conversation-title-block {
    font-size: 14px!important;
}

/* Форма виджета общения - Конкретное обращение */
.talks-widget-window .talks-widget-body .conversations-list-block .conversation-annotate {
    /* задержка для плавности анимации */
    transition: all 0.5s;
}

/* Форма виджета общения - Наведение на конкретное обращение */
.talks-widget-window .talks-widget-body .conversations-list-block .conversation-annotate:hover {
    background: #e171fb50;
}

/* Форма виджета общения - Обводка аватарки в общении */
.talks-widget-window .talks-widget-body .conversations-list-block .conversation-annotate .conversation-img-block img {
    width: 40px;
    border-radius: 50%;
    border: 2px solid var(--Mcolor1);
}

/* Форма виджета общения - Счетчик сообщений в обращении */
.talks-widget-window .talks-widget-body .conversations-list-block .conversation-annotate .conversation-data-block .conversation-fresh-comment-count {
    font-family: var(--Mfont);
    font-weight: 700;
    text-align: center;
    background: var(--Mcolor3);
    color: var(--Mwhite);
    border-radius: 6px;
    width: 25px;
}

/* Форма виджета общения - Футер с кнопкой */
.talks-widget-window .talks-widget-body .conversations-list-block .conversation-list-footer {
    background: var(--Mcolor1); 
    /* верхнее подчеркивание надо футером */
    border-top: 1px solid var(--Mcolor1);
}

/* Форма виджета общения - кнопка в диалоговом окне */
.talks-widget-window .talks-widget-body .conversations-list-block .conversation-list-footer .btn.btn-new.btn-primary {
    font-family: var(--Mfont);
    font-size: 16px;
    color: var(--Mwhite);
    background-color: var(--Mcolor2);   
    border-color: var(--Mcolor2);
    border-radius: 6px;
}

/* Форма переписки - Окно общения */
.conversation-widget .comments-tree-wrapper .comments-tree {
    font-family: var(--Mfont);    
    background: #fffffffa;
    /*border-left: 1px solid var(--Gcolor5);*/
    box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
}

/* Форма переписки - Имя пользователя в шапке */
.talks-widget-header .caption a {
    font-family: var(--Mfont);
    color: var(--Mwhite);
    background: var(--Mcolor5); 
    /* нижнее подчеркивание под блоком заголовка */
    border-bottom: 1px solid var(--Mwhite);
    text-decoration: none;
}

/* Форма переписки - Обводка аватарки в общении */
.conversation-widget .comment-wrapper .comment .user-profile-image {
    width: 40px;
    border-radius: 50%;
    border: 2px solid var(--Mcolor1);
}

/* Форма переписки - Текст отправленных сообщений */
.conversation-widget .comment > .text .text-content {
    font-size: 16px;
    background: transparent;
    /*border: 1px solid var(--Gcolor2);*/
}

/* Форма переписки - Текст моих отправленных сообщений */
.conversation-widget .my-comment .comment > .text .text-content,
/* Форма переписки - Текст отправленных сообщений пользователя-инициатора переписки */
.conversation-widget .own-user-comment .comment > .text .text-content {
    font-size: 16px;
    background: #e171fb50;
    font-family: var(--Mfont);
    /*border: 1px solid var(--Gcolor2);*/
}
/* Форма переписки - ссылки */
.conversation-widget .own-user-comment .comment > .text .text-content a {
    font-size: 16px;
    font-family: var(--Mfont);
}

/* Форма переписки - Имя и фамилия сотрудника */
.comments-tree .worker .text {
    font-family: var(--Mfont);
    color: var(--Mcolor1)!important;
    margin-left: 3px;
}
.comments-tree,
.comments-tree a {
    font-family: var(--Mfont)!important;
}

/* Форма переписки - Дата и время, канал отправки сообщения */
.conversation-widget .comment-wrapper .comment .comment-time {
    font-family: var(--Mfont);
    color: #8c8888;
}

/* Форма переписки - Форма отправки сообщения (подвал) */
.conversation-widget .gc-comment-form {
    background: var(--Mbackground); 
    /* верхнее подчеркивание надо футером */
    border-top: 1px solid var(--Mcolor2);
    font-family: var(--Mfont);
    font-size: 14px;  
}

/* Форма переписки - Поле ввода сообщения */
.comment-form-wrapper .new-comment-textarea {
    border-top: 2px solid var(--Mcolor3);
    border-radius: 5px;
}

/* Форма переписки - Форма отправки сообщения - Кнопка Отправить */
.conversation-widget .gc-comment-form .btn.btn-primary.btn-send {
    font-family: var(--Mfont2);
    font-size: 16px;
    color: var(--Mcolor2);
    background-color: transparent; 
    border: 2px solid var(--Mcolor2);
    border-radius: 5px;
}