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

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

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

/* ==================================================
    会話(個々)の表示エリア
================================================== */
/* 会話の吹き出し部分(watson) */
.message-container.from-watson > .message {
    border: 2px solid #00aff2;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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