/*  チャットウィンドウ起動ボタン
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: 100% 100% !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 {
  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: #B8B8B8 !important;
  border: 1px solid #ad0000 !important;
  z-index: 9999;
}


/* the title bar*/
.title_bar {
  background-color: #808c95 !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: #A2B5CD !important;
  font-size: 18px !important;
  color: #000000 !important;
  border-bottom: solid 1px #ad0000 !important;
}


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



/*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: #3A5FCD !important;
  background-color: #C6E2FF !important;
  border-radius: 10px;
}

/*// the arrow color near by the msg from me to server*/
.wc-message-from-me svg.wc-message-callout path {
  fill: #C6E2FF !important;
}

/* 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: #F0F8FF !important;
  font-size: 14px !important;
  color: #5F9EA0 !important;
  border-radius: 10px;
}

/*// the arrow color near by the msg from server to client*/
.wc-message-from-bot svg.wc-message-callout path {
  fill: #F0F8FF !important;
}


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

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

/*the button inside the card
６、ボタンのフォント/サイズ/色/角丸形/正方形 (button's size, color, and shape)
*/
.wc-card button {
  font-family: inherit !important;
  font-size: 12px !important;
  color: #0000FF !important;
  border-radius: 4px !important;
}

.wc-card button:disabled {
  color: #3f51b5 !important;
  background: #d4cbcb !important;
  border-radius: 4px !important;
}

/*the link */
.squareBtn>div>a {
  background: #AB82FF !important;
  color: #000000 !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: #F0F8FF !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: #454545 !important;
}

/* the input note
１、背景色（background color）
２、入力メッセージの文字サイズ/色/背景色/角丸形/正方形（input form's font size, color, background color and shape）
*/
.inputBar__field {
  font-size: 14px !important;
  color: #000000 !important;
  background-color: #BCD2EE !important;
  border-radius: 3px !important;
}

input[type="text"]:disabled {
  opacity: 1;
  background: #CCCCCC !important;
}

input:-ms-input-placeholder {
  color: #848484 !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 {
  /*background: #00ff2a !important;*/
  background: url(./img/send2.svg) 16px 11px no-repeat #ebebe4 !important;
  font-size: 0px !important;
  color: #000000 !important;
  border-radius: 2px !important;
}

.inputBar__submit:disabled {
  /*background: #CCCCCC !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 #ad0000 !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;
}