/*  チャットウィンドウ起動ボタン
help icon bottom:
*/
.help {
  width: 150px;
  height: 150px;
  background: url(/img/customer_center/avator/aichan_top_orange.png) 0 0 no-repeat !important;
  background-size: 70% 70%!important;
}

.help_hidden {
  bottom: -250px;
}

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

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

@media screen and (max-width : 767px) {
  .help {
    width: 60px;
    height: 300px;
    background: url(/img/customer_center/avator/aichan_top_orange_sp.png) 0 0 no-repeat !important;
    background-size: 50% 50%!important;
  }

  .help_hidden {
    bottom: -350px;
  }

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

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

/*
  emotion使用時
  avatorのカスタマイズ、カスタマイズされなかった場合はデフォルトのICONが表示される
 */
.happy:before {
}

.sad:before {
}

/*　メニュー「・・・」ICONのカスタマイズ　*/
.hamburgerMenu__btn {
    display: none;
}

.hamburgerMenu__btn i {
}

/*the chat body
①
１、背景色（ background color）
２、外枠色（全体）（border color）
*/
.chat_body {
  border: 2px solid #ffa000 !important;
}

/* the title bar*/
.title_bar {
  background-color: #ffa000 !important;
  display: block;
  font-size: 15px;
  height: 40px;
  vertical-align: middle;
  text-align: center;
}

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

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

/*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: 12px !important;
  background-color: #fffacd;
}

/*// the arrow color near by the msg from me to server*/
.wc-message-from-me svg.wc-message-callout path {
}

/* 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 {
  font-size: 12px !important;
  background: #ffffff !important;
}

/*// the arrow color near by the msg from server to client*/
.wc-message-from-bot svg.wc-message-callout path {
}

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

.wc-card{
}

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

.wc-card button:disabled {
}

/*the link */
.squareBtn > div > a {
  font-size:12px !important;
  font-family: inherit !important;
  color: #000000;
  border-color: #ffaf00;
}

/*the card color from server to client
７、hiroCardのTitleのフォント/サイズ/色（herocard title's font size and color）
*/
.ac-title{
  font-size:14px !important;
}

/*the card color from server to client
８、heroCardのTextのフォント/サイズ/色（herocard's text font size and color）
*/
.ac-container{
  font-size:12px !important;
  background: #ffffff !important;
}


/*
the card prev button
*/
.carousel__nav:before {
}

/*
the card next button
*/
.carousel__nav:after{
}

/*
carousel page display 100%
 */
.wc-hscroll > ul > li {
}

/* the inputBar
１、背景色（background color）
*/
.inputBar {
}

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

input[type="text"]:disabled{
}

input:-ms-input-placeholder{
}

/* 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: #ffa000 !important;
}
.inputBar__submit:disabled {
}

/*⑥サッブメニューの色
１、背景色（background color)
２、文字のサイズ/色（font size and color）
*/
.hamburgerMenu__items {
  font-size: 14px !important ;
}
.hamburgerMenu__items:before{
}

/*⑦suggestion style
１、背景色（background color）
２、文字サイズ/色/背景色/角丸形/正方形（font size, color, background color and shape）
*/
.carousel__btn {
}

/*⑧Category style
１、背景色（background color）
２、文字のサイズ/色（font size and color）
３、外枠色（全体）（border color）
*/
.topic-class {
}

/*⑨Select Language style
１、背景色（background color）
２、文字のサイズ/色（font size and color）
*/
.selectLanguage__items {
}
.selectLanguage__title{
}

/*⑩Select and Input
１、背景色（background color）
２、文字サイズ/色/背景色/角丸形/正方形（font size, color, background color and shape）
*/
.ac-input{
  font-size: 14px !important;
}

@media screen and (max-width : 767px) {
  .bd_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 0.8;
    z-index: 100; }

  .help_show {
    bottom: -140px;
    position: fixed;
    z-index: 9999; } }

.dialog_show {
  position: fixed !important;
  z-index: 9999;
}