body {
	margin:0;
	padding:0;	
}
div.chat-wrapper{
	margin:0;
	padding:0;
	width:100%;
	height:100vh;
}
div#info{
	height:42px;
	padding-top:8px;
	background:#343541;
	box-sizing: border-box;
}

div#info > h1{
	display:block;
	margin:0 auto;
	padding:0;
	font-size:1.0rem;
	line-height:1.5;
	color:#d9d9d9;
	float:left;
	width:calc(100% - 64px);
	text-align:center;
	padding-left:32px;
}

div#info > div{
	width:32px;
	text-align:center;
	float:right;
	color:#d9d9d9;	
}

div#inputWindow{
	position:fixed;
	bottom:0;
	width:100%;
	height:50px;
	border-top:1px solid #d9d9d9;
	z-index:9;
	background:#FFFFFF;
	text-align:center;

}

div#inputWindow > div {
	width:100%;
	height:100%;
}

div#chatWindow{
	width:100%;
	word-break: break-all;
	height:calc(100vh - 93px);
	overflow-y: auto;
}

p.output__user{
	margin:0;
	background:#FFFFFF;
	border-bottom: 1px solid #e5e5e5;
	padding:16px 16px 30px 16px;
	line-height:1.8;
}

p.output__server{
	margin:0;
	background:#f7f7f8;
	border-bottom: 1px solid #e5e5e5;
	padding:16px 16px 30px 16px;
	line-height:1.8;
}

span.output__user__name {
	float:left;
	display:block;
	width:30px;
	margin-right:16px;
}

span.output__user__name > img {
	border-radius:3px;
}

span.output__user__message {
	float:left;
	display:block;
	width:calc(100% - 46px);
}

p.output__user::after, p.output__server::after {
	content: '';
	display:block;
	clear: both;
}

div.foot-left{
	width:30%;float:left;
}

div.foot-mid{
	width:40%;float:left;
}

div.foot-right{
	width:30%;float:left;text-align:right;padding-right:16px;box-sizing: border-box;height:100%;padding-top:7px;
}

div.foot-right > img,
div#text_input_box img {
	width:32px;
	opacity: 0.5;
}

div#text_input_box {
	box-sizing: border-box;
	padding-left:16px;
	padding-right:16px;
	padding-top:7px;
}

div#text_input_box button {
	background:none;
	border:none;
}

div#text_input_box img {
	width:32px;
}

div#text_input_box input {
	height:32px;
	font-size:1.0em;
	width:calc(100% - 100px);
	float:left;
	padding-left:10px;
	border-radius:4px;
	border:1px solid #CCCCCC;
	
}

div#text_input_box input:focus { outline: none; }
div#text_input_box button:focus { outline: none; }

.no_event{
	pointer-events: none;
}

img.dictate{
	margin:0 auto;width:50%;margin-top:-40px; max-width:85px;
}

div.menu-box{
	width:100%;
	box-sizing: border-box;
	padding-left: 46px;
}

div.menu-box::after{
	content:"";
	display:block;
	clear:both;
}

div.card-product{
	width:100%;
	box-sizing: border-box;
	float:left;
	margin-right:10px;
	border-radius:8px;
	border:1px solid #DDDDDD;
	margin-top:10px;
	background:#FFFFFF;
}

div.card-product .image-box{
	height:80px;
	float:left;
}

div.card-product h3{
	width:100%;
	margin:0;
	margin-bottom: 10px;
	font-size:1.0em;
	line-height:1.2;
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;

}

div.card-product h5{
	font-size:1.0em;
	margin:0;
	margin-top: 10px;	
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

div.card-product .content{
	width:calc(100% - 80px);
	box-sizing:border-box;
	float:left;
	padding: 10px 16px 10px 16px;
}

div.card-product img{
	width:72px;
	height:72px;
	margin-top:4px;
	margin-left:4px;
	object-fit:cover;
	border-radius:6px !important;
	
}

@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink-effect 0.5s step-end infinite;
}

a{
	text-underline-position : under;
	color:#4a79b6;
}