static/css/chatbot.css

* { margin: 0; padding: 0; }
body {
	background: #f0f1f2;
	font:12px "Helvetica Neue", Impact, sans-serif;
}
#view-code{
  color:#89a2b5;
  opacity:0.7;
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:660px;
  left:50%;margin-left:-50px;
  z-index:200;
}
#view-code:hover{opacity:1;}
#chatbox{
	width:290px;
	background:#fff;
	border-radius:6px;
	overflow:hidden;
	height:484px;
	position:absolute;
	top:100px;
	left:50%;
	margin-left:-155px;
	box-shadow: 2px 2px 15px rgb(50 50 50 / 10%)
}

#friendslist{
	position:absolute;
	top:0;
	left:0;
	width:290px;
	height:484px;
	display: block;
}
#topmenu{
	height:69px;
	width:290px;
	border-bottom:1px solid #d8dfe3;
}
#topmenu span{
	float:left;
	width: 96px;
    height: 70px;
    background: url("https://static.ai-research.id/images/top-menu.png") -3px -118px no-repeat;
}
#topmenu span.friends{margin-bottom:-1px;}
#topmenu span.chats{background-position:-95px 25px; cursor:pointer;}
#topmenu span.chats:hover{background-position:-95px -46px; cursor:pointer;}
#topmenu span.history{background-position:-190px 24px; cursor:pointer;}
#topmenu span.history:hover{background-position:-190px -47px; cursor:pointer;}
.friend{
	height:70px;
	border-bottom:1px solid #e7ebee;
	position:relative;
}
.friend:hover{
	background:#f1f4f6;
	cursor:pointer;
}
.friend img{
	width:40px;
	border-radius:50%;
	margin:15px;
	float:left;
}
.floatingImg{
	width:40px;
	border-radius:50%;
	position:absolute;
	top:0;
	left:12px;
	border:3px solid #fff;
}
.friend p{
	padding:15px 0 0 0;
	float:left;
	width:220px;
}
.friend p strong{
	display: block;
	font-weight:600;
	font-size:15px;
	color:#597a96;

}
.friend p span{
	display: block;
	font-size:13px;
	font-weight:400;
	color:#aab8c2;
}
.friend .status{
	background:#26c281;
	border-radius:50%;
	width:9px;
	height:9px;
	position:absolute;
	top:31px;
	right:17px;
}
.friend .status.away{background:#ffce54;}
.friend .status.inactive{background:#eaeef0;}
#search{
	background:#e3e9ed url("https://static.ai-research.id/images/search.png") -11px 0 no-repeat;
	height:60px;
	width:290px;
	position:absolute;
	bottom:0;
	left:0;
}
#searchfield{
	background:#e3e9ed;
	margin:21px 0 0 55px;
	border:none;
	padding:0;
	font-size:14px;
	font-family:"Helvetica Neue", Impact, sans-serif;
	font-weight:normal;
	color:#8198ac;
}
#searchfield:focus{
	 outline: 0;
}
#chatview{
	width:290px;
	height:484px;
	position:absolute;
	top:0;
	left:0;
	display:none;
	background:#fff;
}
#profile{
	height:153px;
	overflow:hidden;
	text-align:left;
	color:#fff;
}
.p1 #profile{
	background:#fff url("https://static.ai-research.id/images/flower.jpg") 0 0 no-repeat;
	background-size: 300px 210px;
}
#profile .avatar{
	width:68px;
	border:3px solid #fff;
	margin:23px 0 0;
	border-radius:50%;
}
#profile  p{
	font-weight:600;
	font-size:15px;
	margin:118px 0 -1px 15px;
	opacity:0;
	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#profile  p.animate{
	margin-top:97px;
	opacity:1;
	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#profile  span{
	font-weight:400;
	font-size:11px;
	margin: 0 0 0 15px;
}
#friends .persona_id {
	display: none;
}
#chat-block {
	height: 290px;
	overflow: auto;
	background: rgb(248,251,255);
}
.chat_messages{
	opacity:0;
	margin-top:30px;
	width:290px;
	overflow-y:scroll;
	overflow-x:hidden;
	padding-right: 20px;
	-webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#chat-block .animate{
	opacity:1;
	margin-top:0;
}
#chat-block label{
	color:#aab8c2;
	font-weight:600;
	font-size:12px;
	text-align:center;
	margin:15px 0;
	width:290px;
	display:block;
}
#chat-block div.message{
	padding:10px 0 10px 48px;
	clear:both;
	margin:0 10px 0 0;
}
#chat-block div.message.right{
	  padding: 10px 65px 10px 0;
	  margin-right: -19px;
	  margin-left: 19px;
}
#chat-block .message img{
	  float: left;
	  margin-left: -38px;
	  border-radius: 50%;
	  width: 30px;
	  margin-top: 10px;
}
#chat-block div.message.right img{
	float: right;
    margin-left: 0;
	margin-right: -38px;
}
.message .bubble{
	background:#e0e7f4;
	font-size:13px;
	font-weight:600;
	padding:8px 8px;
	border-radius:5px 5px 5px 0;
	color:#8495a3;
	position:relative;
	float:left;
}
#chat-block div.message.right .bubble{
	float:right;
	border-radius:5px 5px 0 5px ;
	background: #e0f4e7;
}
.bubble .corner{
	background:url("https://static.ai-research.id/images/bubble-corner.png") 0 0 no-repeat;
	position:absolute;
	width:7px;
	height:7px;
	left:-5px;
	bottom:0;
}
div.message.right .corner{
	background:url("https://static.ai-research.id/images/bubble-cornerR.png") 0 0 no-repeat;
	left:auto;
	right:-5px;
}
.bubble span{
	  color: #aab8c2;
	  font-size: 11px;
	  position: absolute;
	  right: 0;
	  bottom: -22px;
}
#sendmessage{
	height:40px;
	border-top:1px solid #e7ebee;
	position:absolute;
	bottom:0;
	right:0;
	width:290px;
	background:#fff;
	padding-bottom:0;
}
#sendmessage input{
	background:#fff;
	margin:8px 0 0 10px;
	border:none;
	padding:0;
	font-size:14px;
	font-family:"Helvetica Neue", Impact, sans-serif;
	font-weight:normal;
	color:#aab8c2;
	width: 250px;
}
#sendmessage input:focus{
	 outline: 0;
}
#sendmessage button{
	background:#fff url("https://static.ai-research.id/images/send.png") 0 -41px no-repeat;
	width:30px;
	height:30px;
	position:absolute;
	right: 0;
	top: 14px;
	border:none;
}
#sendmessage button:hover{
	cursor:pointer;
	background-position: 0 0 ;
}
#sendmessage button:focus{
	 outline: 0;
}

#close{
	position:absolute;
	top: 8px;
	opacity:0.8;
	right: 15px;
	width:20px;
	height:20px;
	cursor:pointer;
	display: block;
}
#close:hover{
	opacity:1;
}
#personalities{
	position:absolute;
	top: 110px;
	opacity:0.8;
	right: 95px;
	width:20px;
	height:20px;
	cursor:pointer;
	display: block;
}
#personalities:hover{
	opacity:1;
}
#parameters{
	position:absolute;
	top: 110px;
	opacity:0.8;
	right: 55px;
	width:20px;
	height:20px;
	cursor:pointer;
	display: block;
}
#parameters:hover{
	opacity:1;
}
#about{
	position:absolute;
	top: 110px;
	opacity:0.8;
	right: 15px;
	width:20px;
	height:20px;
	cursor:pointer;
	display: block;
}
#about:hover{
	opacity:1;
}
.cx, .cy{
	background:#fff;
	position:absolute;
	width:0;
	top:15px;
	right:15px;
	height:3px;
	-webkit-transition: all 250ms ease-in-out;
	   -moz-transition: all 250ms ease-in-out;
		 -o-transition: all 250ms ease-in-out;
			transition: all 250ms ease-in-out;
}
.cx.s1, .cy.s1{
	right:0;
	width:20px;
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cy.s2{
	-ms-transform: rotate(50deg);
	-webkit-transform: rotate(50deg);
	transform: rotate(50deg);
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cy.s3{
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cx.s1{
	right:0;
	width:20px;
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cx.s2{
	-ms-transform: rotate(140deg);
	-webkit-transform: rotate(140deg);
	transform: rotate(140deg);
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
.cx.s3{
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
#chatview, #sendmessage {
overflow:hidden;
border-radius:6px;
}

.col-3 {
	float: left;
	position: relative;
	margin: 10px;
}
input[type="text"] {
	font: 15px/24px "Helvetica Neue", Impact, sans-serif;
	color: #333;
	width: 100%;
	box-sizing: border-box;
	letter-spacing: 1px;
}

#config-block {
	color: rgb(50, 100, 50);
	height: 100%;
	/*background: linear-gradient(0deg, rgba(186,183,226,1) 1%, rgba(255,213,198,1) 100%);*/
	/*
	background: rgb(251,255,248);
	background: linear-gradient(135deg, rgba(251,255,248,1) 1%, rgba(107,235,131,1) 100%);
	*/
	background: rgb(248,251,255);
	background: linear-gradient(135deg, rgba(248,251,255,1) 1%, rgba(107,160,235,1) 100%);
}

#config-block input {
	color: rgb(50, 100, 50);
	font: 14px/24px "Helvetica Neue", Impact, sans-serif;
	padding: 0 5px 0 5px;
}

#config-block button {
	color: rgb(50, 100, 50);
	padding: 4px 8px;
}

#config-block > div {
	display: none;
}

#photo-block {
	display: none;
}

#photo-block img {
	position:absolute;
	top: 80px;
	width: 210px;
	left: 35px;
	z-index: 10;
	border-radius:50%;
	border:5px solid #fff;
}
#personalities_view, #parameters_view, #about_view {
	padding: 10px 10px 0 10px;
}

#server_view {
	position: absolute;
	bottom: 8px;
	padding: 0 10px;
}

#personalities_view div, #personalities_view h3, #parameters_view div, #parameters_view h3 {
	margin-bottom: 5px;
}
#personalities_view .input {
	 -webkit-box-shadow: 2px 2px 10px 2px rgba(100,100,100,0.45);
	 box-shadow: 2px 2px 2px 2px rgba(100,100,100,0.2);
 }

#personalities_button, #parameters_button{
	margin: 10px 0;
}

#parameters_view #doSample {
	display: inline;
	width: 30px;
}

#parameters_view input {
	display: block;
	margin-left: 10px;
	width: 95%;
}

#about_button {
	position:absolute;
	bottom:20px;
	left:42%;
}
#about_view {
	font-family: "Helvetica Neue", Impact, sans-serif;
	font-size: 1.1em;
	text-align: center;
	margin: 0 0 0 0;
	clear: both;
	height: 100%;
}

#about_view h3 {
	text-shadow: 3px 3px 5px rgb(150, 150, 150);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.5em;
	margin: 0 0 20px 0;
}

#about_view div {
	margin: 0 0 5px 0;
}

#about_view div div {
	margin: 0 0 15px 0;
}
#about_view a {
	color: rgb(50, 100, 50);
	font-weight: bold;
}
#about_view span {
	display: block;
}
/** Fontawesome **/

.list-unstyled {
	padding-left: 0;
	list-style: none;
}
.list-inline li {
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
	margin-bottom: 10px;
}
/*---- Genral classes end -------*/

/*Change icons size here*/
.social-icons .fas {
	font-size: 1.5em;
}
/*Change icons circle size and color here*/
.social-icons .fas {
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	color: rgba(100, 255, 100, 0.99);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fas {
	border-radius: 50%;
}
.social-icons.icon-rounded .fas {
	border-radius:5px;
}
.social-icons.icon-flat .fas {
	border-radius: 0;
}

.social-icons .fas:hover, .social-icons .fas:active {
	color: rgba(250, 250, 120, 0.99);
	-webkit-box-shadow: 1px 1px 3px #333;
	-moz-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fas:hover, .social-icons.icon-zoom .fas:active {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}
.social-icons.icon-rotate .fas:hover, .social-icons.icon-rotate .fas:active {
	-webkit-transform: scale(1.1) rotateY(180deg);
	-moz-transform: scale(1.1) rotateY(180deg);
	-ms-transform: scale(1.1) rotateY(180deg);
	-o-transform: scale(1.1) rotateY(180deg);
	transform: scale(1.1) rotateY(180deg);
}

.social-icons .fa-address-card {
	color: rgba(250, 250, 250, 0.99);
	background-color:#aeb5c5;
}
.social-icons .fa-sliders {
	color: rgba(250, 250, 250, 0.99);
	background-color:#aeb5c5;
}
.social-icons .fa-info {
	color: rgba(250, 250, 250, 0.99);
	background-color:#aeb5c5;
}
.social-icons .fa-house-chimney {
	color: rgba(250, 250, 250, 0.99);
	background-color:#aeb5c5;
}