/* HTML TAG */
body {
    font-size: 0.9rem;
    min-width: 100%;
}

/* チャットボット利用の注意事項（モーダル-全体） */
#modal-usage-notice > .modal-dialog {
    max-width: 48rem;
    height: calc(1px + 4.25rem + 1px + 11.75rem + 1px + 3.25rem + 1px);
    width: 96%;
}

/* チャットボット利用の注意事項（モーダル-ヘッダ(画像)) */
#usage-notice-image {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;    
}

/* チャットボット利用の注意事項（モーダル-ヘッダ(タイトル)) */
#usage-notice-title {
    width: calc(100% - 4rem);
    height: 3rem;
    line-height: 3rem;
    margin: 0 0 0 0.5rem;
    font-size: 1.125rem;
}

#usage-notice-title > div {
    max-height: 3rem;
    line-height: 1.5rem; 
}

/* チャットボット利用の注意事項（モーダル-ヘッダ(閉じるボタン)) */
#modal-usage-notice > .modal-dialog > .modal-content > .modal-header > button.close {
    display: none;
}

/* チャットボット利用の注意事項（モーダル-本文） */
#modal-usage-notice > .modal-dialog > .modal-content > .modal-body {
    height: 11.75rem;
}

/* チャットボット利用の注意事項（モーダル-本文） */
#usage-notice-body {
    height: 10.5rem;
}

/* チャットボット利用の注意事項（モーダル-フッタ） */
#modal-usage-notice > .modal-dialog > .modal-content > .modal-footer {
    display: block;
}

/* チャットのメインコンテンツ(ローディングアニメーション、会話、フィードバック(アンケート))表示のエリア */
#chat-container {
    margin: 3.5rem 0.5rem 4.75rem 0.5rem;    /* margin-topはヘッダ部の高さ＋0.75rem */
}

/* ==================================================
    会話(個々)の表示エリア
================================================== */
.message-container {
    padding: 0rem 0rem 0.5rem 0rem;
    font-size: 0.9rem;
}

/* アバター(watson) */
.message-container > .watson-avatar {
    width: 3rem;
    height: 3rem;

}

/* アバター(user) */
.message-container > .user-avatar {
	display: none;
}

/* 会話の吹き出し部分 */
.message-container > .message {
    padding: 0.4rem 0.75rem  0.4rem 0.5rem;
    line-height: 1.2rem;
}

/* 会話の吹き出し部分(watson) */
.message-container.from-watson > .message {
    max-width: calc(100% - 3.75rem);
    margin-left: 0.75rem;
}

/* 会話の吹き出し部分(user) */
.message-container.from-user > .message {
    max-width: calc(100% - 7.5rem);
    margin-right: 0.75rem;
}

/* 会話の吹き出しの尖った部分(watson) */
.message-container.from-watson > .message::before {
    top: 7px;
    left: -9px;
    border-width: 10px 10px 10px 0;
}

/* 会話の吹き出しの尖った部分の線(watson) */
.message-container.from-watson > .message::after {
    top: 7px;
    left: -12px;
    border-width: 10px 10px 10px 0;
}

/* 会話の吹き出しの尖った部分(user) */
.message-container.from-user > .message::before {
    top: 7px;
    right: -9px;
    border-width: 10px 0 10px 10px;
}

/* 会話の吹き出しの尖った部分の線(user) */
.message-container.from-user > .message::after {
    top: 7px;
    right: -12px;
    border-width: 10px 0 10px 10px;
}

/* ==================================================
    FAQ表示エリア
================================================== */
/* FAQ表示エリア　※検索結果あり */
.faq-container.disp {
    padding: 0.4rem;
}

/* FAQのタイトル(ラベル) */
.faq-title > label {
    font-size: 0.9rem;
    margin-left: 0.25rem;
}

.faq-message > label {
    font-size: 0.9rem;
    margin-left: 0.25rem;
}

/* FAQの検索結果 */
.faq-list {
    padding-left: 0.25rem;
}

/* FAQの検索結果の1行 */
.faq-list td {
    padding: 0.15rem 0.25rem;
}

/* ==================================================
    吹き出し内の選択ボタン表示エリア
================================================== */
/* 選択ボタン(縦・横共通) */
.answer-select-btn-1,
.answer-select-btn-m {
    font-size: 0.9rem;
}

/* 選択ボタン(横) */
.answer-select-btn-1 {
    min-width: 3.65rem;
}

/* 選択ボタン(横)　※最後のボタンを除く */
.answer-select-btn-1:not(:last-child) {
    margin-right: 0.7rem;
}

/* ==================================================
    フィードバック(評価)表示エリア
================================================== */
/* 評価ボタン表示エリア */
.evaluate_rating {
    width: 100%;
}

/* 評価ボタン表示エリア(ボタン共通) */
.evaluate-rating-btn {
    font-size: 0.9rem;
    width: 4.5rem;
    height: 2rem;
    margin-top: 0.5rem;
    margin-right: 0.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* 評価ボタン押下後のコメント欄 */
.evaluate-comment {
    font-size: 0.9rem;
}

/* 評価のコメント送信ボタン */
/* 評価のオペレーター切替ボタン */
.evaluate-operator-btn,
.evaluate-send-btn {
    font-size: 0.9rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
}

/* 評価のコメント送信ボタン */
.evaluate-send-btn {
    width: 6.5rem;
}

/* 評価のオペレーター切替ボタン */
.evaluate-operator-btn {
    width: auto;
}

/* オペレーター呼び出しボタン(mobilus:Yes) */
.callMtalk-RatingBtn.yes {
    margin: 0rem 1.0rem 0rem 0rem;
}

/* ==================================================
    フィードバック(アンケート)表示エリア
================================================== */
#chat-survey {
    max-width: calc(100% - 4rem);
    margin: 0rem 0rem 0.75rem 4rem;
    padding: 0.5rem 0.75rem 1rem 0.75rem;
}

/* 満足度ボタン押下後のコメント欄 */
#survey-comment {
    font-size: 0.9rem;
    padding: 0.5rem;
    height: 6rem;
}

/* 満足度ボタン表示エリア(ラベル) */
#survey-rating-lbl {
    height: 1.5rem;
    line-height: 1.5rem;
}

/* 満足度ボタン */
.survey-rating-btn {
    width: 5.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    margin: 0.5rem 0.25rem 0rem 0rem;
}

/* アンケートのコメント送信ボタン */
#survey-send-btn {
    width: 6.5rem;
}

/* アンケートの閉じるボタン */
#survey-close-btn {
    width: 4rem;
}

/* アンケートのコメント送信ボタン、閉じるボタン */
#survey-send-btn,
#survey-close-btn {
    padding-left: 0.1rem;
    padding-right: 0.1rem;
}

/* 満足度ボタン、コメント送信ボタン、閉じるボタン */
.survey-rating-btn,
#survey-send-btn,
#survey-close-btn {
    height: 2rem;
    font-size: 0.8rem;
    line-height: 1rem;
}

/* =====================================
 M-Talk関連
======================================= */
.callMtalk-Element {
    width: 16rem;
}

/* ==================================================
    オペレーター呼び出し(mobiAgent)
================================================== */

/* ==================================================
    質問入力エリア
================================================== */
/* 質問入力エリア全体 */
.inputOutline-container {
    height: 4rem; /* この高さは、当paddnig-bottomと#textInputのheightを足した値で一致させておく必要があります。この高さ分だけスクロールできるようにしておかないと、最後の会話内容の上に入力エリアがかぶさってしまうためです。 */
    padding: 0rem 0.5rem 1.25rem 0.5rem;
}

/* 質問入力のテキストボックス */
#text-input {
    font-size: 1rem;
    width: calc(100% - 5.5rem);
    height: 2.75rem;
    padding: 0.5rem;
}

/* 質問するボタン */
.btn.question {
    font-size: 1rem;
    width: 5.5rem;
    height: 2.75rem;
    padding: 0.5rem;
}

/* ==================================================
    静的ボタンエリア（右下）
      フィードバック(アンケート)ボタン
      質問のやり直しボタン
================================================== */
#system-btns-right-bottom {
    display: none;
}

/* ==================================================
    静的ボタンエリア（下）
      フィードバック(アンケート)ボタン
      質問のやり直しボタン
      オペレータ呼び出しボタン
================================================== */
#system-btns-bottom {
    display: none;
}


/* ==================================================
    静的ボタンエリア（上）
      フィードバック(アンケート)ボタン
      質問のやり直しボタン
      オペレータ呼び出しボタン
      ヘルプボタン
================================================== */
@media only screen and (max-width: 360px) {
    #system-btns-header label {
        font-size: 0.8rem;
    }
}

/* ==================================================
    モバイル用静的ボタンエリア（ヘッダ部）
     フィードバック(アンケート)ボタン
      質問のやり直しボタン
      オペレータ呼び出しボタン
      ヘルプボタン
================================================== */
#system-btns-mobile-header {
    z-index: 1;
    display: block;
    background-color: #898989;
    position: fixed;
    color: white;
    top: 0rem;
    width: 100%;
    height: 3rem;
    /* padding: 0.1rem 0.5rem 0 0; */
    padding: 0.75rem;
    line-height: 1rem;
}

/* 戻るボタン*/
#system-btns-mobile-header > .mobile-historyBack-btn {
    display: none;
    font-size: 1rem;
}

#system-btns-mobile-header > .mobile-historyBack-btn > label {
    line-height: 1.5rem;
    margin: 0rem;
    font-size: 1rem;
}

/* 閉じるボタン*/
#system-btns-mobile-header > .mobile-close-btn {
    display: none;
}

#system-btns-mobile-header > .mobile-close-btn,
#system-btns-mobile-header > .mobile-close-btn > label {
  font-size: 1.25rem;
}

.mobile-system-btn {
    z-index: 1;
    position: fixed;
    top: 0.125rem;
    right: 0.5rem;
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタン */
#system-btns-mobile-header > .mobile-system-btn > .btn.operator,
#system-btns-mobile-header > .mobile-system-btn > .btn.undo,
#system-btns-mobile-header > .mobile-system-btn > .btn.survey {
    position: absolute;
    height: 2.75rem;
    width: 2.75rem;
    background-color: transparent;
    border: 0px;
    border-radius: 10%;
    box-shadow: none;
    margin:0;
    padding: 0rem;
}

/* 質問のやり直しボタン */
#system-btns-mobile-header > .mobile-system-btn > .btn.undo {
    right: 6.5rem;
    font-size: 36px;
    padding: 3px 2px 6px 2px;
}

/* フィードバック(アンケート)ボタン */
#system-btns-mobile-header > .mobile-system-btn > .btn.survey {
    right: 0rem;
    font-size: 36px;
    padding: 2px 2px 5px 2px;
}

/* オペレーターボタン */
#system-btns-mobile-header > .mobile-system-btn > .btn.operator {
    right: 3.25rem;
    font-size: 36px;
    padding: 3px 2px 6px 2px;
}

/**************************/
/* 【アイコン表示用定義】 */
/**************************/
/* フィードバック(アンケート)ボタン、質問のやり直しボタン　※活性表示時 */
#system-btns-mobile-header > .btn.operator:not(:disabled),
#system-btns-mobile-header > .btn.undo:not(:disabled),
#system-btns-mobile-header > .btn.survey:not(:disabled) {
    color: #f6f6f6;
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタン　※活性表示時 */
#system-btns-mobile-header > .btn.operator:disabled,
#system-btns-mobile-header > .btn.undo:disabled,
#system-btns-mobile-header > .btn.survey:disabled {
    color: #fff;
}

/* フィードバック(アンケート)ボタン、質問のやり直しボタン　※マウスオーバー時、活性表示時 */
#system-btns-mobile-header > .btn.operator:hover:not(:disabled),
#system-btns-mobile-header > .btn.undo:hover:not(:disabled),
#system-btns-mobile-header > .btn.survey:hover:not(:disabled) {
    background-color: #f6f6f6;
    color: #898989;
}

/**************************/
/* 【画像表示用定義】     */
/**************************/
#system-btns-mobile-header > .mobile-system-btn > .btn.operator > img,
#system-btns-mobile-header > .mobile-system-btn > .btn.undo > img,
#system-btns-mobile-header > .mobile-system-btn > .btn.survey > img {
    vertical-align: top;
    width: 2.75rem;
    height: 2.75rem;
}

#system-btns-mobile-header > .mobile-system-btn > .btn.survey > img.unSelect:hover,
#system-btns-mobile-header > .mobile-system-btn > .btn.survey > img.select,
#system-btns-mobile-header > .mobile-system-btn > .btn.undo > img.unSelect:hover,
#system-btns-mobile-header > .mobile-system-btn > .btn.undo > img.select {
    display: none;
}

#system-btns-mobile-header > .mobile-system-btn > .btn.operator > img.unSelect,
#system-btns-mobile-header > .mobile-system-btn > .btn.operator > img.select:hover,
#system-btns-mobile-header > .mobile-system-btn > .btn.survey > img.unSelect,
#system-btns-mobile-header > .mobile-system-btn > .btn.survey > img.select:hover,
#system-btns-mobile-header > .mobile-system-btn > .btn.undo > img.unSelect,
#system-btns-mobile-header > .mobile-system-btn > .btn.undo > img.select:hover {
    display: inline;
}

/** ヘッダーアイコンの disabled 時の色味を設定 opacity で透過率を調整する*/
#system-btns-mobile-header > .mobile-system-btn > .btn.operator:disabled, 
#system-btns-mobile-header > .mobile-system-btn > .btn.survey:disabled, 
#system-btns-mobile-header > .mobile-system-btn > .btn.undo:disabled {
    opacity : 0.4;
}