@charset 'utf-8';
:root{
    --bs-white : #fff;
    --bs-border :#ccc;
    --bs-grayf :#f7f7f7;
    --bs-gray5 :#555;
    --bs-sky:#34b5ee;
    --bs-sky-active:#00a2ea;
}



.btn_chat img, .modal_chat img {width:100%}
.btn_chat {width:80px; height:80px; position:fixed; right:50px; bottom:50px; cursor:pointer; border:1px solid var(--bs-border); border-radius:5px}
.btn_chat:hover { background:#eee}

.modal_chat {width:500px; position:fixed; right:300px; bottom:100px; height:80%; box-shadow:1px 1px 10px 3px var(--bs-border); border-radius:5px; background:var(--bs-white); cursor: default !important;}
.modal_chat:not(.show) {display:none}
.modal_chat .top {height:60px; padding:10px; border-bottom:1px solid var(--bs-border)}
.modal_chat .top img {width:40px; height:40px; float:left}
.modal_chat .top img + p {float:left; padding:0 10px; line-height:40px; font-weight:bold; color:var(--bs-gray5) }
.modal_chat .top .btn_area {float:right}
.modal_chat .top .btn_area .btn {margin-left:10px}
.modal_chat .body {height:calc(100% - 60px); overflow:hidden; padding:15px 10px}
.modal_chat .body .area {height:100%; padding-bottom:10px; overflow:hidden auto}
.modal_chat .body .area > div,
.modal_chat .body .sett > div{margin-bottom:15px}
.modal_chat .body .box {background:var(--bs-grayf); border-radius:5px}
.modal_chat .body .message .img {width:40px; height:40px; margin-bottom:15px}
.modal_chat .body .message .txt{ width:100%; padding:10px;  position:relative}
.modal_chat .body .message .txt:before {content:''; position:absolute; border-style:solid; border-width:0 13px 13px; border-color: var(--bs-grayf) transparent; display: block; width: 0; z-index: 1; top:-12px; left:20px}
.modal_chat .body .tag {padding:5px; background:var(--bs-grayf); display:inline-block; width:100%}
.modal_chat .body .tag .btn_label{ height:30px; line-height:26px; font-size:14px; margin:5px; text-align:center; float:left; background-color:var(--bs-sky); color:var(--bs-white); border-radius:5px; border:1px solid var(--bs-sky)}
.modal_chat .body .tag .btn_label:not(.w100) {width:calc(33.33% - 10px)}
.modal_chat .body .tag .btn_label.active {background-color:var(--bs-white); color:var(--bs-sky);}
.modal_chat .body .tag .btn_label:hover {background-color:var(--bs-sky-active); color:var(--bs-white    )}


.modal_chat .body .answer div {text-align:right}
.modal_chat .body .answer .btn {height:30px; line-height:30px; border-radius:5px}
.btn_label.w100 {height: auto !important; padding: 5px !important; line-height:30px}

@media (max-width: 640px) {
    .btn_chat {        
	top: 0px;
        /* bottom: 50px; */
        width: 50px;
        height: 50px;
        border: 0px;}
    .modal_chat {width:100vw; height:100vh; left:0; top:0}
}