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

/* verify用チャット部分全体 */
.verify-chat {
    background-color: #d4eeef;
}

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

/* チャットのローディングアニメーション */
#chat-loading {
    color: #0dc5c1;
    font-size: 3rem;
    text-indent: -9999em;
    overflow: hidden;
    position: absolute;
    top: calc(50% - (1em / 2));     /* 全体の半分の高さからローディングサークルの高さの半分を引いた位置 */
    left: calc(50% - (1em / 2));    /* 全体の半分の幅からローディングサークルの幅の半分を引いた位置 */
    margin: auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1s infinite ease, round 1s infinite ease;
    animation: load6 1s infinite ease, round 1s infinite ease;
    animation-play-state: paused;
    visibility: hidden;
}

@-webkit-keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* ==================================================
    会話(個々)の表示エリア
================================================== */
/* アバター(user) */
.message-container > .user-avatar {
    display: none;
}

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

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

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

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

/* ==================================================
    FAQ表示エリア
================================================== */

/* ==================================================
    吹き出し内の選択ボタン表示エリア
================================================== */
/* 選択ボタン(縦・横共通) */
.answer-select-btn-1,
.answer-select-btn-m {
    border-color: #ff6600;
    background-color: #ffeee3;
}

/* 選択ボタン(縦・横共通)　※マウスオーバー時 */
.answer-select-btn-1:hover,
.answer-select-btn-m:hover {
    background-color: #ff6600;
}

/* ==================================================
    フィードバック(評価)表示エリア
================================================== */
/* 評価のコメント送信ボタン　※マウスオーバー時 */
.evaluate-operator-btn:hover,
.evaluate-send-btn:hover {
    background-color: #ff6600;
}

/* 評価ボタン(いいえ) */
.evaluate-rating-btn.no {
    background-color: #d4eeef;
    border-color: #0095A1;    
}

/* 評価ボタン(いいえ)　※マウスオーバー時 */
.evaluate-rating-btn.no:hover {
    background-color: #0095A1;
}

/* 評価のコメント送信ボタン */
.evaluate-send-btn {
    background-color: #ffeee3;
    border-color: #ff6600;    
}

/* ==================================================
    フィードバック(アンケート)表示エリア
================================================== */
/* 満足度ボタン　※選択時 */
.survey-rating-btn.active {
    background-color: #0095A1;
}

/* アンケートの閉じるボタン */
#survey-close-btn {
    border-color: #898989;
}

/* アンケートのコメント送信ボタン */
#survey-send-btn {
    background-color: #ffeee3;
    border-color: #ff6600;    
}

/* アンケートのコメント送信ボタン　※マウスオーバー時 */
#survey-send-btn:hover {
    background-color: #ff6600;
}

/* ==================================================
    オペレーター呼び出し(M-Talk)
================================================== */
.callMtalk-RatingBtn.no {
    background-color: #d4eeef;
    border-color: #0095A1;
}

.callMtalk-RatingBtn.no:hover {
    background-color: #0095A1;
}

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

/* 質問入力のテキストボックス */
#text-input {
    border: 2px #0095A1 solid;
    color: #0095A1;
    width: calc(100% - 17.5rem);    
}

/* 質問するボタン */
.btn.question {
    background-color: #0095A1;
    border: 2px #0095A1 solid;
}

/* ==================================================
    静的ボタンエリア（右下）
      フィードバック(アンケート)ボタン
      質問のやり直しボタン
================================================== */
/* フィードバック(アンケート)ボタン、質問のやり直しボタン　※活性表示時 */
#system-btns-right-bottom > .btn.operator:not(:disabled),
#system-btns-right-bottom > .btn.undo:not(:disabled),
#system-btns-right-bottom > .btn.survey:not(:disabled) {
    color: #0095A1;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* 静的ボタン */
#system-btns-header > .btn.survey,
#system-btns-header > .btn.operator,
#system-btns-header > .btn.undo,
#system-btns-header > .btn.help {
    background-color: #0095A1;
}

/* 静的ボタン ※マウスオーバー時*/
#system-btns-header > .btn.survey:hover:not(:disabled),
#system-btns-header > .btn.operator:hover:not(:disabled),
#system-btns-header > .btn.undo:hover:not(:disabled),
#system-btns-header > .btn.help:hover:not(:disabled) {
    border-color: #0095A1;
    color: #0095A1;    
}

/* 静的ボタン ※フォーカスインしている時*/
#system-btns-header > .btn.survey.focus,
#system-btns-header > .btn.operator.focus,
#system-btns-header > .btn.undo.focus,
#system-btns-header > .btn.help.focus {
    border-color: #0095A1;
    color: #0095A1;
}

/* 静的ボタン ※選択時*/
#system-btns-header > .btn.survey:active:not(:disabled),
#system-btns-header > .btn.operator:active:not(:disabled),
#system-btns-header > .btn.undo:active:not(:disabled),
#system-btns-header > .btn.help:active:not(:disabled) {
    border-color: #0095A1;
    color: #0095A1;    
}


/* ==================================================
    モバイル用静的ボタンエリア（ヘッダ部）
     フィードバック(アンケート)ボタン
      質問のやり直しボタン
      オペレータ呼び出しボタン
      ヘルプボタン
================================================== */

/* ==================================================
    静的ボタンToolTip(bootstrap)
================================================== */