/* HTML TAG */
body {
    background-color: #e9f5ed;
}

/* チャットボット利用の注意事項（モーダル-フッタ(閉じるボタン)） */
#modal-usage-notice > .modal-dialog > .modal-content > .modal-footer > button {
    background-color: #00a23f;
    border: 2px #00a23f solid;
}

/* チャットのローディングアニメーション */
#chat-loading {
    color: #00a23f;
}

/* ==================================================
    会話(個々)の表示エリア
================================================== */
/* 会話の吹き出し部分 */
.message-container > .message {
    background-color: #ffffff;
}

/* 会話の吹き出し部分(watson) */
.message-container.from-watson > .message {
    border: 2px solid #00a23f;
}

/* 会話の吹き出し部分(user) */
.message-container.from-user > .message {
    border: 2px solid #ffd800;
}

/* 会話の吹き出しの尖った部分(watson) */
.message-container.from-watson > .message::before {
    border-color: transparent #ffffff transparent transparent;
}

/* 会話の吹き出しの尖った部分(user) */
.message-container.from-user > .message::before {
    border-color: transparent transparent transparent #ffffff;
}

/* 会話の吹き出しの尖った部分の線(watson) */
.message-container.from-watson > .message::after {
    border-color: transparent #00a23f transparent transparent;
}

/* 会話の吹き出しの尖った部分の線(user) */
.message-container.from-user > .message::after {
    border-color: transparent transparent transparent #ffd800;
}

/* ==================================================
    フィードバック(アンケート)表示エリア
================================================== */
/* アンケートの回答ボタン */
.survey-rating-btn.active {
    background-color: #00a23f;
    color:white;
}

/* ======================================
    質問入力エリア
====================================== */
/* 質問入力エリア全体 */
.inputOutline-container {
    background-color: #e9f5ed;
}

/* 質問入力のテキストボックス */
#text-input {
    color: #00a23f;
    border: 2px #00a23f solid;
}

/* 質問するボタン */
.btn.question {
    background-color: #00a23f;          /* 質問するボタンの背景色 */
    color: white;                       /* 質問するボタンの文字色 */
    border: 2px #00a23f solid;          /* 質問するボタンの枠線の色 */
}

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

/* オペレータ呼び出しボタン　※活性表示時 */
#system-btns-bottom > .btn.operator:not(:disabled) {
    background-image: url('/img/mi_operator.svg');
}

/* オペレータ呼び出しボタン　※マウスオーバー時、活性表示時 */
#system-btns-bottom > .btn.operator:hover:not(:disabled) {
    background-image: url('/img/mi_operator_hover.svg');
}

/* オペレータ呼び出しボタン　※非活性表示時 */
#system-btns-bottom > .btn.operator:disabled {
    background-image: url('/img/mi_operator_disabled.svg');
}

/* 質問のやり直しボタン　※活性表示時 */
#system-btns-bottom > .btn.undo:not(:disabled) {
    background-image: url('/img/mi_undo.svg');
}

/* 質問のやり直しボタン　※マウスオーバー時、活性表示時 */
#system-btns-bottom > .btn.undo:hover:not(:disabled) {
    background-image: url('/img/mi_undo_hover.svg');
}

/* 質問のやり直しボタン　※非活性表示時 */
#system-btns-bottom > .btn.undo:disabled {
    background-image: url('/img/mi_undo_disabled.svg');
}

/* フィードバック(アンケート)ボタン　※活性表示時 */
#system-btns-bottom > .btn.survey:not(:disabled) {
    background-image: url('/img/mi_survey.svg');
}

/* フィードバック(アンケート)ボタン　※マウスオーバー時、活性表示時 */
#system-btns-bottom > .btn.survey:hover:not(:disabled) {
    background-image: url('/img/mi_survey_hover.svg');
}

/* フィードバック(アンケート)ボタン　※非活性表示時 */
#system-btns-bottom > .btn.survey:disabled {
    background-image: url('/img/mi_survey_disabled.svg');
}