#tlgrm-chat{
	width:370px;
	height:450px;
	background:#fff;
	display:inline-block;
	bottom:10px;
	position:fixed;
	right:10px;
	border:none;
        border-radius:15px;
	box-shadow:1px 10px 8px #bbb;
	z-index: 10000;
	background:#fff;
}
#tlgrm-chat #tlgrm-chat-head{
	height:50px;
	background:#ef645a;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding: 15px 60px 30px 15px;
position:relative;
text-align: center;
}

#tlgrm-chat #tlgrm-chat-head #tlgrm-chat-head-caption{
color: #fff;
font-size: 16px;
font-weight: bold;
margin: 0;
}

#tlgrm-chat #tlgrm-chat-head #tlgrm-close-btn{
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
color: #d6d4d4;
font-size: 15px;
line-height: 5px;
font-family: GothamProBold;
font-weight: 900;

top: 10px;
position: absolute;
right: 10px;
    width:30px;
    height: 30px;
background-image: url("/img/icon/expand_more.png");
background-repeat: no-repeat;
background-position: center center;
cursor:pointer;
border-radius:25px;
opacity: 0.7;
}
#tlgrm-chat #tlgrm-chat-head #tlgrm-close-btn:hover{

opacity: 1;

}

#tlgrm-chat #tlgrm-chat-flow{
	width:100%;
	height:330px;
	overflow:auto;
padding: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
  background: #fff;
  color:#000;

}
.tlgrm-msg{
    word-break: break-word;
}
#tlgrm-chat #tlgrm-chat-flow .tlgrm-msg{
	padding:8px;
	margin: 0 5px 0 5px;
	width:200px;
	border-radius:5px
}
#tlgrm-chat #tlgrm-chat-flow .tlgrm-msg.tlgrm-incoming{
	float:left;
	background:#F0F8FF
}
#tlgrm-chat #tlgrm-chat-flow .tlgrm-msg.tlgrm-outgoing{
	float:right;
	background:#eee;
        padding: 8px 23px 8px 8px;
}
#tlgrm-chat #tlgrm-chat-send-panel{
	width:100%;
	background: #fff;
	position:absolute;
	bottom:0;
	border-top:1px solid #ccc;
}
#tlgrm-chat-msg {
  width: 240px;
  float: left;
  display: inline-block;
  resize: none;
  border: none;
  height: 60px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  scrollbar-width: thin;
  margin-left: 40px;
  line-height: 30px;
}
#tlgrm-send-btn{
border: none;
background: transparent;
    display:inline-block;
    width:30px;
    height: 30px;
background-image: url("/img/icon/send-telegram.png");
background-repeat: no-repeat;
background-position: center center;
position: absolute;
bottom: 15px;
right:15px;
}
#tlgrm-send-btn:hover,#tlgrm-send-btn.active{
background-image: url("/img/icon/send-hover.png");
box-shadow: none;
border:0;
}
#tlgrm-init-btn{
display: inline-block;
bottom: 10px;
position: fixed;
right: 70px;
background-color: #e73635 !important;
width: 50px;
height: 50px;
border: 0;
text-align: center;
padding: 0;
z-index: 999;
border-radius: 3px;
}
#tlgrm-init-btn:hover {
  opacity: .8;
}

#tlgrm-init-btn img{
    width:50px;
    height: 50px;
}
  @media only screen and (max-width: 767px){
#tlgrm-init-btn{
right: 70px;
width: 30px;
height: 30px;
}
#tlgrm-init-btn img{
    width:30px;
    height: 30px;
}
  }
@media (max-width: 400px){
	#tlgrm-init-btn span{
		display:none !important;
	}
}

#upload-file-chat{
    display:inline-block;
    width:30px;
    height: 30px;
background-image: url("/img/icon/attach_file_add.png");
background-repeat: no-repeat;
background-position: center center;
float: left;
position: absolute;
bottom: 15px;
}
#upload-file-chat:hover{
    width:30px;
    height: 30px;
background-image: url("/img/icon/attach_file_add-hover.png");
background-repeat: no-repeat;
background-position: center center;
}

#voice-chat{
    display:inline-block;
    width:30px;
    height: 30px;
background-image: url("/img/icon/mic.png");
background-repeat: no-repeat;
background-position: center center;
float: left;
position: absolute;
bottom: 15px;
left: 10px;
}
#voice-chat:hover{
    width:30px;
    height: 30px;
background-image: url("/img/icon/mic_red.png");
background-repeat: no-repeat;
background-position: center center;
}


#preview-wrap-chat-img{
    border:1px solid #ccc;
    text-align:center;
}
#preview-wrap-chat{
    position:relative;
    padding:15px;
    border-bottom:1px solid #ccc;
}
#remove-img-chat {
  position: absolute;
  right: 20px;
  top: 20px;
}
.chat-file{
    display:block;

    background: inherit;
    border-radius:10px;
    border:1px solid #eee;
    text-align:center;
}
.chat-file img{
    width:auto;
    max-width:100%;
    height: auto;
    margin: 0 auto;
}
.chat-file video{
    width:auto;
    max-width:100%;
    height: auto;
    margin: 0 auto;
}
.chat-file audio{
    width:auto;
    max-width:100%;
    height: auto;
    margin: 0 auto;
}


.hop-icon{
  z-index: 1;
  float: left;
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0 !important;
  border-radius: 20px;
  background: rgba(239,100,90,1.0);
}
.hop-icon img{
    width:100%;
}
.chat-li{
    float:none;
    width:100%;
    clear:both;
    margin: 20px 0;
    min-height: 40px;
    display: table;
    position: relative;
}
.remove-message-chat {
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 9px;
}



#wrapper_audio {
  position: relative;
  bottom: 70px;
  z-index: 999;
  background: #fff;
  display: block;
  border-top: 1px solid #ccc;
}
#wrapper_audio .main-controls {
  padding: 0.5rem 0;
}

#wrapper_audio  canvas {
  display: block;
  margin-bottom: 0.5rem;
}


#wrapper_audio #buttons{
    text-align: center;
}

#wrapper_audio button.stop {
  font-size: 1rem;
  background: #ef645a;
  text-align: center;
  color: white;
  border: none;
  transition: all 0.2s;
  height: 50px;
  padding: 10px;
  border-radius: 0;
}




/* Make the clips use as much space as possible, and
 * also show a scrollbar when there are too many clips to show
 * in the available space */
#wrapper_audio .sound-clips {
  flex: 1;
  overflow: auto;
  padding-left: 15px;
}

#wrapper_audio section, #wrapper_audio article {
  display: block;
}

#wrapper_audio .clip {
  position:relative;
}

#wrapper_audio audio {
  width: 70%;
  display: block;
  margin: 0;
}

#wrapper_audio .clip p {
  display: inline-block;
  font-size: 1rem;
}

#wrapper_audio .clip button {
  font-size: 1rem;
  float: right;
}

#wrapper_audio button.delete {
  font-size: 1rem;
  position: absolute;
  right: 20px;
  top: 5px;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.5;
}

/* Checkbox hack to control information box display */

#wrapper_audio label {
  font-size: 3rem;
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 5;
  cursor: pointer;
  background-color: black;
  border-radius: 10px;
}

#wrapper_audio input[type=checkbox] {
   position: absolute;
   top: -100px;
}

#wrapper_audio aside {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: 0.3s all ease-out;
  background-color: #efefef;
  padding: 1rem;
}

#wrapper_audio aside p {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

#wrapper_audio aside a {
  color: #666;
}

/* Toggled State of information box */
#wrapper_audio input[type=checkbox]:checked ~ aside {
  transform: translateX(0);
}

/* Cursor when clip name is clicked over */

#wrapper_audio .clip p {
  cursor: pointer;
}

/* Adjustments for wider screens */
@media all and (min-width: 800px) {
  /* Don't take all the space as readability is lost when line length
     goes past a certain size */
 #wrapper_audio  .wrapper {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
  }
}


 #tlgrm-init-btn.new_message {
      -webkit-animation: glowing 1300ms infinite;
      -moz-animation: glowing 1300ms infinite;
      -o-animation: glowing 1300ms infinite;
      animation: glowing 1300ms infinite;
      }
      @-webkit-keyframes glowing {
      0% { background-color: #ef645a; -webkit-box-shadow: 0 0 3px #ef645a; }
      50% { background-color: #ef645a; -webkit-box-shadow: 0 0 15px #ef645a; }
      100% { background-color: #bc0000; -webkit-box-shadow: 0 0 3px #ef645a; }
      }
      @keyframes glowing {
      0% { background-color: #ef645a; box-shadow: 0 0 3px #ef645a; }
      50% { background-color: #ef645a; box-shadow: 0 0 15px #ef645a; }
      100% { background-color: #bc0000; box-shadow: 0 0 3px #bc0000; }
      }
      .svg-btn {
      display: block;
      width: 230px;
      height: 230px;
      margin-left: 10px;
      }
      svg {
      fill: blue;
      -webkit-animation: glowing-polygon 1300ms infinite;
      -moz-animation: glowing-polygon 1300ms infinite;
      -o-animation: glowing-polygon 1300ms infinite;
      animation: glowing-polygon 1300ms infinite;
      }
      @-webkit-keyframes glowing-polygon {
      0% { fill: #ef645a; -webkit-filter: drop-shadow( 0 0 3px #ef645a); }
      50% { fill: #ef645a; -webkit-filter: drop-shadow( 0 0 15px #ef645a); }
      100% { fill: #bc0000; -webkit-filter: drop-shadow( 0 0 3px #bc0000); }
      }
      @keyframes glowingPolygon  {
      0% { fill: #ef645a; filter: drop-shadow( 0 0 3px #ef645a); }
      50% { fill: #ef645a; filter: drop-shadow( 0 0 15px #ef645a); }
      100% { fill: #bc0000; filter: drop-shadow( 0 0 3px #bc0000); }
      }