/*  チャットボタン */
#BotChatGoesHere .help {
  position: fixed;
  border: 0;
  right: 32px;
  width: 96px;
  height: 96px;
  background-color: #ffffff;
  background-image: url(./img/button_icon.png);
  background-size: 87px 87px;
  background-position: center center;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#BotChatGoesHere .help_hidden {bottom: -250px;}
#BotChatGoesHere .help_show {bottom: 32px;position: fixed;z-index: 999;}

@media(max-width:767px) {
  #BotChatGoesHere .help {
    right: 10px;
    bottom: 10px;
  }
}
/*  チャットウィンドウ起動ボタン
help icon bottom:
*/
.help_show{
  z-index: 9999 !important;
}

/*  ヘッダーのアイコンのカスタマイズ*/
.operator__icon--bot:before {
  background: url(./img/another_icon.png) 0 0 no-repeat !important;
  background-size: 90% 90%  !important;
}

/* デフォルトの avatorのカスタマイズ*/
.default:before {
  background: url(./img/avator/default_avator1.png) 0 0 no-repeat !important;
  background-size: 100% 100%  !important;
  border-radius: 50%;
}

/*
  emotion使用時
  avatorのカスタマイズ、カスタマイズされなかった場合はデフォルトのICONが表示される
 */
.happy:before {
  background: url(./img/avator/happy_avator.png) 0 0 no-repeat !important;
  background-size: 100% 100%  !important;
  border-radius: 50%;
}

.sad:before {
  background: url(./img/avator/sad_avator.png) 0 0 no-repeat !important;
  background-size: 100% 100%  !important;
  border-radius: 50%;
}

/*　メニュー「・・・」ICONのカスタマイズ　*/
.hamburgerMenu__btn {
  display: none;
  width: 58px;
  height: 48px;
  background: url(./img/hamburgerMenu_icon.svg) 6px 6px no-repeat !important;
  background-size: 80% 80% !important;
}
.hamburgerMenu__btn i {
  display: none;
}

/*the chat body
①
１、背景色（ background color）
２、外枠色（全体）（border color）
*/
.chat_body {
  background: #EDEDED !important;
  border: 1px solid rgba(0,0,0,0.5) !important;
  z-index: 9999;
}


/* the title bar*/
.title_bar {
  background-color: #002896 !important;
  border-radius: 8px 8px 0px 0px !important;
}

/* the chat header css
②
１、背景色（ background color）
２、ヘッダーTitle文の文字サイズと色（Header Title's font size and color）
３、外枠色（border color）
４、メニューの色（menu's color）
*/
.chatHeader__inner {
  background: #002896 !important;
  font-size: 18px !important;
  color:#fff !important;
  border-bottom:solid 1px #002896 !important;
}


/*the msg body
③ １、背景色（ background color
*/
.wc-message-groups {
  background: #EDEDED !important;
}

.wc-message-groups .list {
  background: transparent;
  box-shadow: none;
}


/*the msg from me to server
２、送信メッセージの文字サイズ/色（send msg font size and color）
４、送信メッセージの角丸形/正方形/背景色（message balloon's shape and background color）
*/
.wc-message-from-me .wc-message-content {
  font-size: 14px !important;
  color: #000 !important;
  background-color: #EEF1FF !important;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
/*// the arrow color near by the msg from me to server*/
.wc-message-from-me svg.wc-message-callout path {
  fill: #EEF1FF !important;
  display: block;
}

.wc-message-from-me svg.wc-message-callout {
  right: -6px;
}

/* msg from server to client

３、受信メッセージの文字サイズ/色（receive msg font size and color）
４、受信メッセージの角丸形/正方形/背景色（message balloon's shape and background color）
*/
.wc-message-from-bot .wc-message-content {
  background: #fff !important;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  font-size: 14px !important;
  color: #000 !important;
  border-radius: 2px;
}
/*// the arrow color near by the msg from server to client*/
.wc-message-from-bot svg.wc-message-callout path {
  fill: #fff !important;
}

.wc-message-from-bot-msg {
  margin-top: 3px;
}

.wc-message-from-bot svg.wc-message-callout {
  left: -6px;
}

/*time size and color
５、受信・送信メッセージ下のタイマーサイズ/色（timestamp font size and color ）
*/
.wc-message-from-time{
  font-size:12px !important;
  color:#999 !important;
}

.wc-card{
  background: #F0F8FF !important;
}

/*the button inside the card
６、ボタンのフォント/サイズ/色/角丸形/正方形 (button's size, color, and shape)
*/
.wc-card button {
  background: #eee;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-family: inherit !important;
  font-size:12px !important;
  color: #999 !important;
  border-radius: 4px !important;
}
.wc-card button:hover {
  background: #002896 !important;
  color: #fff !important;
  font-weight: bold;
}

.wc-card button:disabled {
  color: #686868 !important;
  background: #d4cbcb !important;
  border-radius: 4px !important;
  font-weight: normal;
}
/*the link */
.squareBtn > div > a {
  background: #eee !important;
  color: #002896 !important;
  border-color: #002896 !important;
}

/*the card color from server to client
７、hiroCardのTitleのフォント/サイズ/色（herocard title's font size and color）
*/
.ac-title{
  font-size:16px !important;
  color:#7AC5CD !important;
}
/*the card color from server to client
８、heroCardのTextのフォント/サイズ/色（herocard's text font size and color）
*/
.ac-container{
  font-size:14px !important;
  color:#63B8FF !important;
  background:#fff !important
}


/*
the card prev button
*/
.carousel__nav:before {
  background: #ad0000 !important;
  color: #63B8FF !important;

}
/*
the card next button
*/
.carousel__nav:after{
  background: #ad0000 !important;
}

/*
carousel page display 100%
 */
.wc-hscroll > ul > li {
  width:100% !important;
}

/* the inputBar
１、背景色（background color）
*/
.inputBar {
  background: #fff !important;
}
/* the input note
１、背景色（background color）
２、入力メッセージの文字サイズ/色/背景色/角丸形/正方形（input form's font size, color, background color and shape）
*/
.inputBar__field {
  font-size: 16px !important;
  columns: #555 !important;
  background-color:#fff !important;
  border-radius: 0 !important;
}
input[type="text"]:disabled{
  opacity: 1;
  background: #CCCCCC !important;
}

input:-ms-input-placeholder{color:#777 !important}
/* the submit button
１、背景色（background color）
２、「送信」文字のサイズ/色/背景色/角丸形/正方形（button text 's font size, color, background color and shape）
if use the img as the button background, add the below code.
background: url(./img/1.png) no-repeat !important;
background-size: 100% !important ;
*/
.inputBar__submit {
  width: 38px;
  height: 38px;
  margin-top: 6px;
  background: #002896 url(./img/rex/send.svg) no-repeat 3px 5px !important;
  background-size: 80% !important;
  border-radius: 19px !important;
  color: #fff !important;
  /* font-size: 0px !important; */
}
.inputBar__submit:disabled {
  width: 100%;
  background: #ccc !important;
}

/*⑥サッブメニューの色
１、背景色（background color)
２、文字のサイズ/色（font size and color）
*/
.hamburgerMenu__items {
  background: #89b3c5 !important;
  font-size: 16px !important ;
  color: #9AFF9A !important;
}
.hamburgerMenu__items:before{
  background: #9FB6CD !important;
}
/*⑦suggestion style
１、背景色（background color）
２、文字サイズ/色/背景色/角丸形/正方形（font size, color, background color and shape）
*/
.carousel__btn {
  background: #FFFAF0 !important;
  font-size: inherit !important;
  color: #9400D3 !important;
  border-radius: 16px !important;
  border: solid 1px #9400D3 !important;
}

/*⑧Category style
１、背景色（background color）
２、文字のサイズ/色（font size and color）
３、外枠色（全体）（border color）
*/
.topic-class {
  background: #a1b5cd !important;
  font-size: inherit !important;
  color: #000000 !important;
  border-bottom: solid 1px #002896 !important;
}

/*⑨Select Language style
１、背景色（background color）
２、文字のサイズ/色（font size and color）
*/
.selectLanguage__items {
  background: #d8d4d4 !important;
  font-size: 16px !important ;
  color: #9AFF9A !important;
}
.selectLanguage__title{
  background: #babec1 !important;
  font-size: 16px !important ;
  color: #9AFF9A !important;
}

/*⑩Select and Input
１、背景色（background color）
２、文字サイズ/色/背景色/角丸形/正方形（font size, color, background color and shape）
*/
.ac-input{
  font-size: 16px !important;
  border: 1px solid #3371a2 !important;
  color: #009688 !important;
  background: #ccc !important;
  border-radius:4px;
}

.max_dialog {
  background: url(./img/popup_icon.png) no-repeat left top/100% 100% !important;
}