/* hide the original widget - that there were no two labels on the screen*/
#jivo_chat_widget {
	//display: none;
	bottom: -100%;
}

#jivo_custom_widget span {
	-o-transition: color 0.4s linear;
	-moz-transition: color 0.4s linear;
	-webkit-transition: color 0.4s linear;
	transition: color 0.4s linear;
}

#jivo_custom_widget span.chat-online {
	visibility: hidden;
	display: none;
}

#jivo_custom_widget span.chat-offline {
	visibility: visible;
	display: inline-flex;
	color: rgba(var(--main-color-rgb), 0.25);
}

#jivo_custom_widget.jivo_online span.chat-offline {
	visibility: hidden;
	display: none;
}

.chat-closed #jivo_custom_widget span.chat-offline {
	color: rgba(var(--main-color-rgb), 0.25);
}

.chat-closed #jivo_custom_widget span.chat-online {
	color: var(--main-color);
}

.chat-closed #jivo_custom_widget {
	background: var(--background-color);
}
#jivo_custom_widget svg path {
	fill: rgba(var(--active-color-rgb), 0.75);
}
.chat-closed #jivo_custom_widget svg path {
	fill: rgba(var(--active-color-rgb), 0.75);
}

.chat-closed #jivo_custom_widget .online-status {
	color: var(--main-color);
}

#jivo_custom_widget.jivo_online span.chat-online {
	visibility: visible;
	display: inline-flex;
	color: var(--main-color);
}

.chat-icon::before {
	position: absolute;
	right: -12px;
	top: -12px;
	content: "";
	width: 32px;
	height: 32px;
	border-radius: 0 0 0 16px;
	background: #6a7681;
}

#jivo_custom_widget.jivo_online .chat-icon::before {
	background: #18c139;
}

/* the default style - for offline messages if no one is online */
#jivo_custom_widget {
	position: fixed;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	//left: -5px;
	left: calc(50% - 56px);
	bottom: 0;
	//width: fit-content;
	z-index: 1000000;
	cursor: pointer;
	background: var(--background-color);
	border-radius: 15px 15px 0 0;
	//background-image: url(images/jivo_widget_offline.png);
	padding: 8px 17px 4px 8px;
	-o-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-webkit-transition: all 0.4s linear;
	transition: all 0.4s linear;
	box-shadow: var(--slider-navigator-shadow);
}

.chat-icon {
	display: flex;
	justify-content: flex-end;
	color: var(--main-color);
}

/* when you hover the label should be shifted to the right by 3px */
#jivo_custom_widget:hover {
	//left: 0;
	box-shadow: var(--link-text-shadow-active);
	background: rgba(var(--active-color-rgb), 1);
}

#jivo_custom_widget:hover svg path {
	fill: var(--white-color);
}
.chat-closed #jivo_custom_widget:hover svg path {
	fill: var(--white-color);
}

#jivo_custom_widget:hover span.chat-offline {
	color: rgba(var(--white-color-rgb), 1);
}
#jivo_custom_widget:hover span.chat-online {
	color: rgba(var(--white-color-rgb), 1);
}
/* if there are operators online - show other label*/


svg path {
	-o-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-webkit-transition: all 0.4s linear;
	transition: all 0.4s linear;
}

#jivo_custom_widget .online-status {
	//transform-origin: bottom right;
	//transform: rotate(90deg);
	//transform: rotate(-90deg);
	//writing-mode: tb-rl;
	//transform: rotate(-180deg);
	height: fit-content;
	display: flex;
	align-items: center;
	padding-right: 5px;
	font-size: 16px;
	-o-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-webkit-transition: all 0.4s linear;
	transition: all 0.4s linear;
	color: var(--main-color);
	font-family: Comfortaa;
}

#jivo_custom_widget:hover .online-status {
	color: var(--white-color) !important;
}