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

#user_input {
	width: 80%;
	border-radius: 25px;
	border: thin solid #000000;
	padding: 7px;	
}
.u_input {
	border-radius: 25px;
	border: thin solid #FFFFFF;
	position: relative;
	padding-top: 10px;
}
.u_input:empty::before {
	content:"Ask Ai";
  	color:gray;
}
.msg {
	height: 300px;
	width: 80%;
	box-shadow: 1px 1px 20px #b2babb;
	overflow: auto;
}
.msg_title {
	width: 90%;
	color: #eaeded;
	text-shadow: 2px 2px 4px #000000;
	text-decoration: underline;
}
.msg_v {
	width: 90%;
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: inset;
	border-left-style: inset;
	border-right-color: #000;
	border-left-color: #000;
}
.txt {
	text-align: right;
	background-color: #ebedef;
	border-bottom-width: thin;
	border-bottom-style: outset;
	border-bottom-color: #bfc9ca;
	font-size: 1.1em;
}
.res {
	text-align: left;
	background-color: #f8f9f9;
	overflow: auto;
}



/* Style the header */


/* Create two columns/boxes that floats next to each other */




.btn {
	position: relative;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  
}
.content {
	width: 100%;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align: center;
	vertical-align: top;
}
.loader {
	border-radius: 50%;
	width: 15px;
	height: 15px;
	animation: spin 1s linear infinite;
	position: relative;
	left: 40%;
	border-top-width: 10px;
	border-right-width: 10px;
	border-bottom-width: 10px;
	border-left-width: 10px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0CF;
	border-right-color: #f3f3f3;
	border-bottom-color: #f3f3f3;
	border-left-color: #f3f3f3;
}
.btnr {
	background-color: #CCC;
	cursor: pointer;
	color: #06F;
	text-decoration: underline;
}
.btnr:hover {
	background-color: #CCC;
	cursor: pointer;
	color: #06F;
	text-decoration: underline;
	box-shadow: 1px 1px 20px #999;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}