.init {
    position: fixed;
    bottom: 15px;
    right: 70px;
    width: 300px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    padding: 10px;
    background: #ffffff;
    box-shadow: 1px 1px 0px #555555;
    overflow: hidden;
    z-index: 500;
    box-sizing: content-box;
    color: #000;
}
@media (max-width:767px),
@media (max-width: 680px),
@media (min-width: 576px) {
  .init {
    bottom: 70px;
    right: 15px;
  }
}

.init {
    visibility: hidden;
}
#telegram-chat-wrapp > div{
    box-sizing: border-box;
    position: relative;
}
.init .telegram-chat-header {
    margin: 0;
    caret-color: transparent;
    border-bottom: 1px solid #cccccc;
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 8px;
    padding-right: 50px;
    padding-left: 24px;
}
#telegram-chat-app,
#telegram-chat-close,
#telegram-chat-update {
    position: absolute;
    top: 5px;
    right: 6px;
    height: 22px;
    width: 22px;
    cursor: pointer;
    caret-color: transparent;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid #cccccc;
    padding: 2px;
    z-index: 10;
    background-image: url('img/close.svg');
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

#telegram-chat-count {
    font-size: small;
}

#telegram-chat-app {
    right: 32px;
    background-image: url('img/telegram-icon.svg');
    background-size: 76%;
    background-position: 30% 50%;
}
.init.show #telegram-chat-app:hover,
.init.show #telegram-chat-update:hover {
    background-color: lightblue;
}
#telegram-chat-app a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#telegram-chat-update {
    right: auto;
    left: 10px;
    top: 10px;
    transition: all 0.5s ease;
    background-image: url('img/update.svg');
    background-size: 50%;
 
    border-color: #ffffff;
}
#telegram-chat-update.ping {
    background-color: greenyellow;
    transform: rotate(180deg);
}
.init.show #telegram-chat-update.ping:hover {
    background-color: yellow;
}
#telegram-chat-update.error {
    background-color: lightsalmon;
}

#telegram-chat-close img {
    display: none;
}

.init.show #telegram-chat-close:hover {
    background-color: lightsalmon;
}

.init.blurry {
    filter: blur(10px);
}

#telegram-chat.hide {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #30a3e6;
    transition: width, height, padding 0.3s cubic-bezier(0.1, -5, 0.5, 5);
    display: block !important;
}

.init.hide {
    transition: none;
}
.init.hide.hover {
    padding: 14px;
}
.init.hide #telegram-chat-wrapp,
.init.hide #telegram-chat-update,
.init.hide #telegram-chat-app{
    display: none;
}
.init.hide #telegram-chat-close{
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    padding: 10%;
    background-image: url('img/chat_icon.svg');
    background-repeat: no-repeat;
    background-size: 80%;
    border: none;
}
.init.hide #telegram-chat-close{
    filter: invert(1);
    animation: telegram-chat-spin 2s linear infinite alternate-reverse;
}
/*
@keyframes telegram-chat-spin{
    0% { transform: rotate(0deg); }
    2% { transform: rotate(5deg); }
    4% { transform: rotate(0eg); }
    6% { transform: rotate(-5deg); }
    8% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
*/
.init .telegram-chat-welcome {
    margin: 0;
 
    background: #eeeeee;
    padding: 2px;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    border-radius: 0 0 6px 6px;
}

.init .telegram-chat-textarea {
    margin-right: 50px;
}
.init .telegram-chat-textarea textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    min-height: 70px;
    font-size: 16px;
    line-height: 18px;
    padding: 4px;
    margin: 0;
    display: block;
}

#telegram-chat-send {
    position: absolute;
    bottom: 15px;
    right: 0;
    cursor: pointer;
    background: #30a3e6;
    border-radius: 50%;
    padding: 1%;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    line-height: 0;
    border: 1px solid #ffffff;
}
#telegram-chat-send span {
    filter: invert(1);
    background-image: url('img/send.svg');
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: 0% 70%;
    display: block;
    width: 100%;
    height: 100%;
}
#telegram-chat-send:hover{
    background: #2a91cd;
}

#telegram-chat-input.disabled {
    pointer-events: none;
    opacity: 0.5;
}

#telegram-chat-content{
    min-height: 120px;
    max-height: 300px;
    overflow: auto;
    padding: 0 4px;
    margin: 8px 0;
    word-break: break-all;
}
div#telegram-chat-content::-webkit-scrollbar {
    width: 4px;
}
div#telegram-chat-content::-webkit-scrollbar-track {
    background-color: darkgrey;
}
div#telegram-chat-content::-webkit-scrollbar-thumb {
    background-color: #30a3e6;
}
#telegram-chat-content .content {
    background: #eeeeee;
    padding: 5px;
    margin: 8px 0 8px 15px;
    border-radius: 4px;
    border: 1px solid #999999;
}
#telegram-chat-content .content > div {
    position: relative;
}

#telegram-chat-content .content p {
    margin: 0;
    padding: 0 2px 2px 0;     caret-color: transparent;
}

#telegram-chat-content .content strong {
    color: #000;
}

#telegram-chat-content .content .icon {
    position: absolute;
    top: 50%;
    left: -20px;
    border-radius: 50%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center 2px;
    background-size: cover;
    background-image: url('data:image/svg+xml;utf8,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 110.44"><title>user</title><path d="M46.07,68.62a19.25,19.25,0,0,1-1.63-2c-1.2-1.65-2.33-3.37-3.42-5.1L35.6,52.89c-2.06-3-3.14-5.74-3.14-7.91s1.23-5,3.68-5.63a149.33,149.33,0,0,1-.21-15.61,19.7,19.7,0,0,1,.65-3.58,20.63,20.63,0,0,1,9.21-11.7,23.65,23.65,0,0,1,5-2.39c3.15-1.19,1.63-6,5.1-6.07C64-.21,77.33,6.73,82.53,12.36a20.56,20.56,0,0,1,5.31,13.33l-.33,14.2a4,4,0,0,1,2.93,2.92c.43,1.74,0,4.12-1.52,7.48h0c0,.11-.11.11-.11.22L82.63,60.7c-1.4,2.3-2.85,4.65-4.48,6.81-1.93,2.58-3.52,2.12-1.87,4.59,11.83,16.26,46.6,6,46.6,38.34H0C0,78.08,34.78,88.36,46.6,72.1c1.36-2,1-1.85-.53-3.48Z"/></svg>');
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid #999999;
    transform: translate(0, -50%);
    display: block;
}
#telegram-chat-content .content p.date {
    color: #555555;
    font-size: 12px;
    padding-left: 25px;
    font-variant-numeric: lining-nums;

}
#telegram-chat-content .content p.date span {
    font-weight: bold;
}
#telegram-chat-content .content p.message {
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    padding-left: 25px;
    font-variant-numeric: lining-nums;
}

#telegram-chat-content .content.error{
    margin: 8px;
    background-color: lightsalmon;
}
#telegram-chat-content .error > div {
    overflow: hidden;
}
#telegram-chat-content .error .icon{
    display: none;
}
#telegram-chat-content .error .date{
    display: none;
}
#telegram-chat-content .error .message{
    text-align: center;
    padding: 0;
    color: #222;
}
#telegram-chat-content .incomingMessage{
    margin: 8px 15px 8px 0;
}
#telegram-chat-content .incomingMessage .icon{
    left: auto;
    right: -20px;
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.655 477.655" style="enable-background:new 0 0 477.655 477.655;" xml:space="preserve"><g><path d="M440.367,440.415l-10.173-29.91c-19.102-56.262-70.83-94.605-129.763-97.121c-5.187,4.03-10.655,7.493-16.322,10.521 c-8.449,22.185-36.836,28.195-53.468,11.205c-19.676-1.738-37.69-9.511-53.422-21.725c-58.933,2.508-110.647,40.851-129.763,97.121 L37.3,440.415c-2.936,8.603-1.522,18.084,3.774,25.469c5.279,7.391,13.821,11.771,22.906,11.771h349.693 c9.083,0,17.626-4.379,22.906-11.771C441.873,458.499,443.286,449.018,440.367,440.415z"/><path d="M277.758,290.619c34.212-24.047,58.141-77.151,58.141-128.491c0-145.907-194.133-145.752-194.133,0 c0,62.397,35.33,127.303,81.546,139.556c4.456-12.626,16.382-21.757,30.515-21.757C263.331,279.926,271.81,284.095,277.758,290.619 z"/><path d="M99.169,223.042c4.813,18.906,31.044,13.704,31.044-3.805c0-70.178,3.354-76.731-6.041-84.348 C145.679,2.361,330.946,3.355,353.495,134.904c-9.381,7.641-6.025,14.163-6.025,84.333c0,5.489,2.95,10.095,7.189,12.952 c0,54.594-22.145,51.402-88.736,69.052c-10.295-11.174-28.683-3.899-28.683,11.173c0,18.876,27.053,23.293,32.302,4.318 c53.762-14.256,101.018-18.752,101.018-72.484v-11.027c3.991-2.066,6.817-5.729,7.951-10.179c51.822-1.056,51.838-78.719,0-79.775 c-1.072-4.24-3.711-7.703-7.423-9.815c1.336-15.902-1.94-36.805-11.057-56.985C296.626-54.368,109.355-3.176,106.422,123.622 c-0.404,4.294-0.078,7.338,0.17,9.83c-3.712,2.112-6.351,5.575-7.423,9.815c-21.71,0.419-39.212,18.084-39.212,39.888 C59.957,204.958,77.459,222.622,99.169,223.042z"/></g></svg>');
    background-repeat: no-repeat;
}
#telegram-chat-content .incomingMessage .date{
    text-align: left;
}
#telegram-chat-content .incomingMessage .message{
    padding-left: 0;
    padding-right: 25px;
}
#telegram-chat-content .info {
  background: lightyellow;
}