/* ---------- LIVE-CHAT ---------- */

#live-chat {
	bottom: 0;
	font-size: 12px;
	left: -12px;
	position: fixed;
	width: 50px;
	z-index: 99;
	border-radius: 0px 5px 0 0;
}

#live-chat header {
	background: var(--chat-background);
	backdrop-filter: var(--backdrop-filter);
	border-radius: 5px 5px 0 0;
	color: var(--text-color);
	cursor: pointer;
	padding: 10px 20px;
	height: 22px;
	border-bottom: 1px solid rgb(168, 168, 168);
}
#live-chat i {
	background-image:url("../../assets/images/icons/32px/balloon-chat-red.png");
	background-size: contain, cover;
	height: 32px;
	width: 32px;
	float:left;
	display:inline-block;
	position: relative;
	left: -7px;
	top: -6px;
}

#live-chat h4:before {
	content: "";
	display: inline-block;
	height: 16px;
	margin: 0 8px 0 0;
	width: 16px;
}

#live-chat h4 ul.ctabs{
			margin: 0px;
			padding: 0px;
			list-style: none;
			display: inline;
		}
#live-chat h4 ul.ctabs li{
			background: none;
			color: var(--text-color);
			display: inline-block;
			padding: 12px 15px 13px 15px;
			cursor: pointer;
			border-left: var(--input-border-color) solid 1px;
			border-right: var(--input-border-color) solid 1px;
			border-top: var(--input-border-color) solid 1px;
			border-radius: 3px 3px 0px 0px;
		}

#live-chat h4 ul.ctabs li.current{
			background: var(--chat-current-background);
			border-left: var(--input-border-color) solid 1px;
			border-right: var(--input-border-color) solid 1px;
			border-top: var(--input-border-color) solid 1px;
			border-radius: 3px 3px 0px 0px;
			box-shadow: var(--chat-shadow);
            font-weight: bolder;
			
			color: var(--text-color);
		}

#live-chat .tab-content{
			display: none;
		}

#live-chat .tab-content.current{
			display: inherit;
		}

.chatOption {
	color: black;
	display: none;
	float: right;
}


#live-chat h4 {
	font-size: 12px;
	display: inline-block;
	position: relative;
	top: -7px;
}


#live-chat h5 {
	font-size: 10px;
}

#live-chat form {
	padding: 24px;
}

#live-chat input[type="text"] {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 8px;
	outline: none;
	width: 90%;
}

.chat-message-counter {
	background: #e62727;
	border: 1px solid #fff;
	border-radius: 50%;
	display: none;
	font-size: 12px;
	font-weight: bold;
	height: 28px;
	left: 0;
	line-height: 28px;
	margin: -15px 0 0 -15px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 28px;
}

.chat-close {
	background: #1b2126;
	border-radius: 50%;
	color: #fff;
	display: block;
	float: right;
	font-size: 10px;
	height: 16px;
	line-height: 16px;
	margin: 2px 0 0 0;
	text-align: center;
	width: 16px;
}

.chat {
	background: var(--chat-current-background);
	backdrop-filter: var(--backdrop-filter);
}

.chat-history {
	height: 252px;
	padding: 8px 8px;
	overflow-y: scroll;
	line-height: 20px;
	font-family: Tahoma, Geneva, sans-serif;
}

.chat-history li {
    padding: 0 5px;
}
.chat-history li:nth-child(even) {background: var(--table-even-row-background-color)}
.chat-history li:nth-child(odd) {background: var(--table-odd-row-background-color)}

.chat-message {
	margin: 16px 0;
}

.chat-message img {
	border-radius: 50%;
	float: left;
}

.chat-message-content {
	margin-left: 56px;
}

.chat-time {
	float: right;
	font-size: 10px;
}

.chat-feedback {
	font-style: italic;	
	margin: 0 0 0 80px;
}

  .notify-bubble {
    position: absolute;
    top: -8px;
    right: -7px;
    padding: 2px 5px 2px 6px;
    background-color: green;
    color: white;
    border-radius: 50%;
    box-shadow: 1px 1px 1px gray;
    display: none;
  }