﻿.sticky-button {
	position: fixed;
	background-color: #25D366;
	bottom: 15px;
	left: 15px;
	border-radius: 50px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
	z-index: 999;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.sticky-button svg {
	margin: auto;
	fill: #fff;
    width: 35px;
	height: 35px;
}

.sticky-button a,.sticky-button label {
	display: flex;
	align-items: center;
	width: 55px;
	height: 55px;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.sticky-button label:hover{
    cursor:pointer;
}

.sticky-button label svg.close-icon {
	display: none;
}

.sticky-chat {
	position: fixed;
	bottom: 70px;
	left: 20px;
	width: 320px;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
}

.sticky-chat a {
  text-decoration: none;
  font-family: 'Roboto',sans-serif;
  color: #505050;
  
}

.sticky-chat svg {
	width: 35px;
	height: 35px;
}

.sticky-chat .chat-content {
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
	overflow: hidden;
	font-family: 'Roboto',sans-serif;
	font-weight: 400;
}

.sticky-chat .chat-header {
	position: relative;
	display: flex;
	align-items: center;
	padding: 15px 20px;
	background-color: #25D366;
	overflow: hidden;
}

.sticky-chat .chat-header:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 80px;
	height: 75px;
	background: rgba(0,0,0,.040);
	border-radius: 70px 0 5px 0;
}

.sticky-chat .chat-header svg {
	width: 35px;
	height: 35px;
	flex: 0 0 auto;
	fill: #fff;
}

.sticky-chat .chat-header .title {
	padding-left: 15px;
	font-size: 14px;
	font-weight: 600;
	font-family: 'Roboto',sans-serif;
    color: #fff;
}

.sticky-chat .chat-header .title span {
	font-size: 11px;
	font-weight: 400;
	display: block;
	line-height: 1.58em;
	margin: 0;
	color: #f4f4f4;
}

.sticky-chat .chat-text {
	display: flex;
	flex-wrap: wrap;
	margin: 30px 20px;
	font-size: 12px;
}

.sticky-chat .chat-text span {
	display: inline-block;
	margin-right: auto;
	padding: 10px;
	background-color: #f0f5fb;
	border-radius: 0px 15px 15px;
}

.sticky-chat .chat-text span:after {
	display: inline-block;
	margin-left: 10px;
	font-size: 9px;
	color: #989b9f;
}

.sticky-chat .chat-text span.typing {
	margin: 15px 0 0 auto;
	padding: 10px;
	border-radius: 15px 0px 15px 15px;
}

.sticky-chat .chat-text span.typing:after {
	display: none;
}

.sticky-chat .chat-text span.typing svg {
	height: 13px;
	fill: #505050;
}

.sticky-chat .chat-button {
	display: flex;
	align-items: center;
	margin-top: 15px;
	padding: 12px 20px;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
	overflow: hidden;
	font-size: 12px;
	font-family: 'Roboto',sans-serif;
	font-weight: 400;
}

.sticky-chat .chat-button svg {
	width: 20px;
	height: 20px;
	fill: #505050;
	margin-left: auto;
	transform: rotate(40deg);
	-webkit-transform: rotate(40deg);
}

.chat-menu:checked+.sticky-button label {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}

.chat-menu:checked+.sticky-button label svg.chat-icon {
	display: none;
}

.chat-menu:checked+.sticky-button label svg.close-icon {
	display: table-cell;
}

.chat-menu:checked+.sticky-button+.sticky-chat {
	bottom: 90px;
	opacity: 1;
	visibility: visible;
}
.hidden {
	display: none;
}

.pulse i {
    color: #fff
}

.pulse {
    left:15px;
    bottom:80px;
    height: 55px;
    width: 55px;
    background-color: green;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index:999;
}

.pulse::before {
    content: "";
    position: absolute;
    border: 1px solid lightgreen;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 50%;
    animation: pulse 1s linear infinite
}

.pulse::after {
    content: "";
    position: absolute;
    border: 1px solid darkgreen;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 50%;
    animation: pulse 1s linear infinite;
    animation-delay: 0.3s;
}

@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 0
    }

    50% {
        transform: scale(1);
        opacity: 1
    }

    100% {
        transform: scale(1.3);
        opacity: 0
    }
}
