@charset "UTF-8";

/* チャットウィンドウ状の4℃ロゴサイズ */
#_ChatContent .MuiAvatar-img {
    width: 80%;
    height: auto;
}

/* 最前面へ */
#_ChatButton {
    z-index: 100!important;
}

/* チャットボットのCSS初期化 */
#_ChatHeader,#_ChatWindowUserInputRoot, #_ChatWindow div {
    min-height: auto;
}

/* チャット表示内容 */
#_ChatButton > button {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 190px;
    height: 60px;
}

/* チャットウィンドウの右側矢印非表示 */
#_ChatButton .MuiFab-label {
	display:none;
}

/* 質問の送信ボタン色変更  */
.MuiIconButton-label {
    color: #00235F!important;
}

/* BOTヘッダ背景・BOT・入力枠 */
#_ChatHeader.cpjss2 {
    background-color: #00235f!important;
    color: #fff!important;
}

/* BOTヘッダ背景・BOT・入力枠 */
#_ChatHeader.cpjss2 .MuiIconButton-label {
    color: #fff!important;
}

._ChatWindowContent_BOT_CONTENT {
    background-color: #F2F2F1!important;
}

._ChatWindowContent_BOT,
._ChatWindowContent_BOT_TEXT {
    background-color: #fff!important;
    color: #000;
}

/* BOTヘッダメニューテキスト・アイコン・閉じるボタン色  */
#_ChatHeader.cpjss2 .MuiTypography-root, 
#_ChatHeader.cpjss2 .MuiIconButton-root {
	color:#fff!important;
}

/* BOTの質問リスト */
/*
._ChatWindowList {
    background-color: #EFF8F9!important;
}
*/


/* オペレータヘッダ背景・BOT・入力枠 */
#_ChatHeader.cpjss3 {
    background-color: #B5B6B6!important;
}

/* オペレータヘッダメニューテキスト・アイコン・閉じるボタン色  */
#_ChatHeader.cpjss3 .MuiTypography-root, 
#_ChatHeader.cpjss3 .MuiIconButton-root {
    color: #00235F!important;
}

/* オペレータ・カスタマー入力表示　背景白＋枠線 */
._ChatWindowContent_CS,
._ChatWindowContent_CS_TEXT,
._ChatWindowContent_OP,
._ChatWindowContent_OP_TEXT {
    background-color: #fff!important;
/*    border: 1px solid #000;  */
}

._ChatWindowContent_OP_TEXT {
    margin-left: 0.5rem!important;
}


/* オペレータ表示　背景グレー */
._ChatWindowContent_OP_CONTENT {
    background-color: #F2F2F1!important;
}



._ChatWindowContent_CS_CONTENT > div:nth-child(2) {
    border-left: 0rem solid #F2F2F1;
}


/* チャット全体の背景 */
#_ChatContent {
	background: #F2F2F1!important;
}

/* 入力欄 背景白 */
#_ChatWindowUserInputRoot {
    background-color: #fff!important;
}


/* オペレータと接続しました */
._WhatYa_Message_PreLatest{
    margin-top: 2rem;
}


#_ChatButton > button {
    background-image: url(https://resource.cdn.fdcp.co.jp/chat/chaticon2.png);
    background-size: contain;
}

@media (max-width: 768px) {
    #_ChatWindow {
        height: 90%!important;
    }

	#_ChatButton > button {
	    width: 190px;
	    height: 60px;
	}
}