/* Copyright (C) 2019 Exiis-Lab Co., Ltd. All Rights Reserved. */

html,body { height: 100%; }
body { margin: 0 auto; font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust: 100%; background: #f2f2f2; overflow-x: hidden; overflow-y: hidden;  }
input[type="button"] { -webkit-appearance: none; }
input[type="text"] { -webkit-appearance: none; }
.viii_header_box { background-color: #ffffff; border: 1px solid #99c9e5; color: #333333; margin: 0px auto; text-align: center; width: 100%; height: 38px\9; height: 38px\0/; }
.viii_header_box h1 { font-size: 100%; padding: 3px; margin: 5px auto; }
.close_btn { display: block; float: right; text-decoration: none; color: #fff; font-weight: bold; font-size: 24px; }
.viii_container { height: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.viii_headerArea { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.viii_chatArea { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow-y: scroll; height: 400px\9; height: 400px\0/; }
.viii_chatArea-wrap { padding-bottom: 10px; }
#viii_input { background: #999999; padding: 10px; clear: both; height: 40px\9; height: 40px\0/; }
#viii_input_txt { display: -ms-flexbox; display: -webkit-flex; display: flex; }
#viii_sendMessage {  width: 75%; margin-right: 10px; background-color: #ffffff; color: #333333; font-size: 14px; padding: 7px 7px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.1),0 0 2px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1),0 0 2px rgba(0,0,0,0.2); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1),0 0 2px rgba(0,0,0,0.2); -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; float: left\9; float: left\0/; }
.viii_submit_btn { background: #179be5; color: #ffffff; font-size: 14px; font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; border: 0; text-decoration: none; padding: 7px 20px; text-align: center; vertical-align: middle; display: block; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; background: -moz-linear-gradient(top,#38b2e8 0%,#179be5); background: -webkit-gradient(linear, left top, left bottom, from(#38b2e8), to(#179be5)); background: -ms-linear-gradient(top,#38b2e8 0%,#179be5); width: 18%; float: left\9; float: left\0/; }
.viii_submit_btn:hover { background: #179be5; }
.viii_chat_user_box { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin: 12px 0; text-align: left; overflow: hidden; padding: 5px 17px; z-index: 1; }
.viii_userBaloon { min-width: 30%; max-width: 90%; font-size: 14px; display: inline-block; background: #c8edfc; color: #000; border-radius: 10px; padding: 10px; text-align: left; min-height: 18px; -webkit-box-shadow: 0 8px 5px -5px #999; -moz-box-shadow: 0 8px 5px -5px #999; box-shadow: 0 8px 5px -5px #999; float: right\9; float: right\0/; }
.viii_userBaloon:after { content: ""; display: block; width: 0; height: 0; border: 7px solid transparent; border-left: 15px solid #c8edfc; position: absolute; top: 15px; right: 0px; float: right\9; float: right\0/; }
#viii_imgArea { z-index: 0; position: relative; display: none; }
img { border: 0; margin: 0; padding: 0; }
.viii_chat_bot_Area { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 20px 0 0px; text-align: left; overflow: hidden; padding: 5px 12px; z-index: 1; }
.viii_chat_bot_Area .viii_select_box { background-repeat: no-repeat; width: 100px; height: 86px; padding-top: 10px; background-size: contain; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; float: left\9; float: left\0/; }
.viii_botAnswer_box { margin-left: 10px; min-width: 60%; max-width: 75%; float: left\9; float: left\0/; }
.viii_botBaloon { position: relative; font-size: 14px; display: inline-block; background: #fff; color: #333333; border-radius: 10px; padding: 15px; text-align: left; min-height: 18px; -webkit-box-shadow: 0 8px 5px -5px #999; -moz-box-shadow: 0 8px 5px -5px #999; box-shadow: 0 8px 5px -5px #999; margin: 0px 20px 0px 0px; }
.viii_botBaloon:after { content: ""; display: block; width: 0; height: 0; border: 7px solid transparent; border-right: 15px solid #fff; position: absolute; top: 20px; left: -20px; }
a { color: #0099ff; text-decoration: none; }
.viii_select_Area { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 0 10px; text-align: left; overflow: hidden; padding: 5px 12px; z-index: 1; }
.viii_select_box { background-repeat: no-repeat; width: 100px; height: 86px; padding-top: 10px; background-size: contain; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; float: left\9; float: left\0/; }
.viii_botSelects { margin-left: 20px; float: left\9; float: left\0/; }
.viii_select { color: #fff; background: #3e75c6; font-size: 14px; border-radius: 6px; padding: 5px 15px; margin-bottom: 5px; text-decoration: none; cursor: pointer; }
.viii_select:hover { opacity: 0.8; }
#jumpbtn { display: none; }
.viii_jump_btn a { width: 80%; background: -moz-linear-gradient(top,#f1f1f1 0%,#d5d5d5); background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#d5d5d5)); background: -ms-linear-gradient(top,#f1f1f1 0%,#d5d5d5); border: 1px solid #d1d1d1; color: #555; font-size: 14px; font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 7px; margin: 10px auto; display: block; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-align: center; vertical-align: middle; text-decoration: none; }
.viii_jump_btn a:hover { background: #d5d5d5; }
#viii_eval_box p { text-align: center; font-size: 87.5%; color: #333; margin: 3px; }
#viii_eval_box { display: none; width: 300px; height: 65px; padding: 5px; list-style: none; margin: 10px auto; background: #ffffff; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #d1d1d1; }
#viii_eval_box ul { width: 230px; margin: 0 auto; text-align: center; padding: 0; list-style: none; display: block; clear: both; }
#viii_eval_box li {  display: inline; padding: 0; margin: 5px; float: left; }
#evaluation_positive_btn { display: block; border: 1px solid #ff704e; padding: 3px; text-decoration: none; color: #ffffff; width: 100px; background-color: #ff704e; margin: 1px; text-align: center; font-size: 13px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; cursor: pointer; }
#evaluation_positive_btn:hover { background: #ffb115; }
#evaluation_negative_btn { display: block; border: 1px solid #4e70ff; padding: 3px; text-decoration: none; color: #ffffff; width: 100px; background-color: #4e70ff; margin: 1px; text-align: center; font-size: 13px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; cursor: pointer; }
#evaluation_negative_btn:hover { background: #d5d5d5; }
.viii_footerArea { background-color: #777; border: 1px solid #777; color: #ffffff; margin: 0px auto; text-align: center; width: 100%; height: 28px\9; height: 28px\0/; }
p.viii_footer_box { font-size: 74%; line-height: 35px; margin: 0px auto; }
#viii-autocomp  { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 3px solid #3481C7; background-color: #2495d3; width: 91%; position: absolute; bottom: 100px; left: 25px; padding: 10px 0; font-size: 96%; z-index: 100; -ms-filter: "alpha(opacity=90)"; filter: alpha(opacity=90); opacity: 0.9; display: none; bottom: 90px\9; bottom: 90px\0/; }
#viii-autocomp .ui-autocomplete { position: relative; padding: 0px 10px 0px 30px; }
#viii-autocomp .ui-autocomplete::before, #viii-autocomp .ui-autocomplete::after { position: absolute; left: 92%; top: 100%; border: solid transparent; content: ''; height: 0; width: 0; border-width: 15px; margin: 0 0 0 -15px; top: 9999px\0/; }
#viii-autocomp .ui-autocomplete::before { border-top-color: #3481C7; }
#viii-autocomp .ui-autocomplete::after { border-top-color: #2495d3; }
#viii-autocomp .ui-autocomplete::before { border-top-color: #3481C7; margin-left: -15px; }
#viii-autocomp .ui-autocomplete::after { border-top-color: #2495d3; margin: -3px 0 0 -15px; }
#viii-autocomp p { color: #fff; border-bottom: 1px dotted #ffffff; margin: 5px 10px 5px 10px; position: relative; z-index: 1000; }
#viii-autocomp .ui-autocomplete ul { height: auto !important; }
#viii-autocomp .ui-autocomplete li { list-style: none; line-height: 1.4; width: 100%; position: relative; }
#viii-autocomp .ui-autocomplete li a { color: #fff; display: block; padding: 5px 5px 5px 10px; cursor: pointer; }
#viii-autocomp .ui-autocomplete li a:hover { background-color: #4baae0; }
#viii-autocomp .ui-autocomplete li::after, #viii-autocomp .ui-autocomplete li::before { display: block; content: ''; position: absolute; }
#viii-autocomp .ui-autocomplete li::after { top: 9px; left: -1em; width: 6px; height: 6px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#viii-autocomp .ui-autocomplete li::before { top: 12px; left: -1.025em; width: 8px; height: 1px; background-color: #fff; }
.ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }