@charset "UTF-8";
/* CSS Document */


.sparkbot-box {
	text-align: center;
	white-space: initial;
	letter-spacing: initial;
	text-transform: initial;
	font-family: helvetica;
}
.sparkbot-chatbot {
	text-align: left;
	/*background: rgba(0,0,0,0.5);
	margin: 10px 0 10px;
	padding: 20px;
	border-radius: 5px;*/
	display: inline-block;
	max-width: 730px;
	width: calc(100% - 40px);
}
.sparkbot-chatbot .info {
	font-size: 12px;
	line-height: 12px;
	color: #888;
	margin: 10px 0 20px 0;
	text-align: center;
}
.chatbot-chat {
	background: #222;
	padding: 30px 40px 30px;
	/*border: 1px solid #444;*/
	border-radius: 5px 5px 0 0;
	border-radius: 0px;
	margin: 0 0 0px;
	height: 200px;
	overflow: scroll;
}
.chatbot-message {
	margin: 0 0 10px 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 19px;
	white-space: pre-line;
	font-weight: 100;
}
.message-chatbot {
	color: #bbb;
	padding: 0 5% 0 0;
}
.message-user {
	color: #a6d2e0;
	color: #3cf;
	text-align: right;
	padding: 15px 0 0 5%;
}
.message-chatbot i {
	position: relative;
	margin: 0px 0 0 -22px;
	color: #cf0;
	width: 22px;
	text-align: left;
}
.message-user i {
	position: relative;
	margin: 0px -22px 0 0px;
	color: #3cf;
	width: 22px;
	text-align: right;
}
.message-chatbot a {
	color: #fff !important;
	text-decoration: none;
	display: inline-block;
	margin: 0 0 -1px;
	transition: 150ms ease-out;
}
.message-chatbot a:hover {
	color: #cf0 !important;
	/*border-bottom: 1px solid #cf0;*/
	transition: 150ms ease-out;
}
.chatbot-form {
	/*background: #444;*/
	padding: 0 10px;
	border-radius: 0 0 5px 5px;
	position: relative;
	z-index: 1000;
	margin: -10px 0 0 0;
	line-height: 14px;
}
.bot-form {
	margin: 5px 0;
}
.sparkbot-chatbot .chatbot-form input {
	font-size: 18px;
	line-height: 18px;
	padding: 10px 20px;
	border: 0;
	width: calc(100% - 170px);
	margin: 0 10px 0 30px;
	display: inline-block;
	background: #ddd;
	color: #222;
	border-radius: 5px;
	vertical-align: top;
}
.sparkbot-chatbot .bot-form input {
	width: 250px;
	margin: 0 10px 0 0;
	display: inline-block;
	background: #ddd;
	color: #222;
	border-radius: 5px;
	height: 16px;
	font-size: 14px;
	line-height: 14px;
	padding: 8px 10px;
	border: 0;
	vertical-align: top;
}
.sparkbot-chatbot input[type=file] {
	width: 200px;
	min-height: 16px;
	vertical-align: top;
	font-size: 14px;
	line-height: 14px;
	padding: 8px;
}
.sparkbot-chatbot input:focus {
	box-shadow: none;
	outline: none;
	border: 0;
	background: #fff;
}

.chatbot-submit {
	display: inline-block;
	background: #3cf;
	color: #222;
	padding: 8px 0;
	border-radius: 5px;
	text-align: center;
	width: 60px;
	line-height: 26px;
	font-size: 16px;
	height: 25px;
	font-weight: 400;
}
.chatbot-nav {
	display: inline-block;
	background: #3cf;
	color: #222;
	padding: 8px 0;
	border-radius: 5px;
	text-align: center;
	width: 60px;
	line-height: 16px;
	font-size: 14px;
	height: 16px;
	font-weight: 400;
}
.chatbot-submit:hover,
.bot-send:hover,
.chatbot-nav:hover {
	background: #222;
	color: #3cf;
}




.response {
	font-size: 14px;
	line-height: 32px;
	padding: 0px 0;
	min-height: 32px;
}
.response.thankyou {
	color: #cf0;
}
.response.has-error {
	color: red;
}




.waiting {
	display: none;
	position: relative;
	margin: -35px auto 0px;
	text-align: left;
	height: 25px;
	color: #bbb;
	font-weight: 100;
	font-size: 16px;
	line-height: 19px;
	padding: 0 30px;
}
.waiting.visible {
	display: block;
}
.waiting i {
	position: relative;
	margin: 0px 0 0 -22px;
	color: #cf0;
	width: 22px;
	text-align: left;
}
#timer {
	display: inline-block;
	color: #ddd;
}



.chatbot-log {
	text-align: left;
}
.chatbot-log th,
.chatbot-log td {
	vertical-align: top;
	padding: 0 10px 10px 0;
}
.chatbot-log .ip {
	
}
.chatbot-log .location {
	width: 180px;
}
.chatbot-log .user {
	width: 40px;
}
.chatbot-log .question {
	width: 300px;
}
.chatbot-log .answer {
	
}
.chatbot-log .date {
	width: 140px;
}





/* Scrollbar */
:root,
root,
html {
  scrollbar-color: #888 #ddd !important;
  scrollbar-width: thin !important;
}

::-webkit-scrollbar {
	width: 8px;
	height: 5px;
	background-color: transparent;
}
::-webkit-scrollbar-thumb {
	border-radius: 0px;
	-webkit-box-shadow: none;
	background-color: #333;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #cf0;
}
::-webkit-scrollbar-thumb:active {
	background-color: #cf0;
}
::-webkit-scrollbar-track {
	background-color: transparent;
	border-radius: 0px;
}
::-webkit-scrollbar-corner {
	background-color: transparent !important;
}




/* Scrollbar */
::-moz-scrollbar,
::-ms-scrollbar {
	width: 8px;
	height: 5px;
	background-color: transparent;
}
::-moz-scrollbar-thumb:horizontal,
::-ms-scrollbar-thumb:horizontal {
	width: 5px;
	height: 5px;
}
::-moz-scrollbar-thumb,
::-ms-scrollbar-thumb {
	border-radius: 0px;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: #333;
}
::-moz-scrollbar-thumb:hover,
::-ms-scrollbar-thumb:hover {
	background-color: #cf0;
}
::-moz-scrollbar-track,
::-ms-scrollbar-track {
	background-color: transparent;
	border-radius: 0px;
}
::-moz-scrollbar-corner,
::-ms-scrollbar-corner {
	background-color: transparent !important;
}
::-moz-scrollbar-thumb:active,
::-ms-scrollbar-thumb:active {
  background-color: #cf0; 
}