textarea {-webkit-border-radius:0; -webkit-appearance:none; border:0px;}
.chat.main { width:100%; height:100%; position:relative; }

.navbar { width:100%; top: 0; left: 0; padding: 0px; height: 60px; background-color: #FFFFFF; z-index: 100;text-align:center; background-color:#91a1af; height:60px;  }
.navbar .title { top: 24px; padding-top:16px; display:inline-block; font-size:19px; color:#fff; font-family:Verdana, Geneva, sans-serif; letter-spacing:-0.2px; margin-left:-10px;}
.navbar .back-btn { width: 40px; height: 40px; padding: 8px 8px; position: absolute; top: 0; left: 0; cursor: pointer; background-color:#A8B6C2; border-radius:50%; margin: 10px 0 0 10px; box-shadow: 0px 1px 4px #8493a0;}
.navbar .back-btn i { font-size:24px;color:#fff;}
.navbar .back-btn img { width: 13px; }
.navbar .menu-btn { width: 24px; height: 24px; padding: 8px 8px; position: absolute; top: 0; right: 0px; cursor: pointer; background-color:#A8B6C2; border-radius:50%; margin: 10px 10px 0 0; box-shadow: 0px 1px 4px #8493a0;}
.navbar .menu-btn i { color:#fff; }
.navbar .chat-menu { background-color: #FFFFFF; position: absolute; right: 0; width: 80px; }
.navbar .chat-menu ul { border-bottom: solid #CA2327; padding: 3px; cursor: pointer; }


.chat-list { overflow-x: hidden; top: 60px; height: calc(100% - 99px); border-color: black; background-color: #fff; margin: 0; padding: 10px 0; position:fixed; width:100%;}
.chat-list .chat { display: inline-block; width: 100%; height: auto; }
/*추가_0118*/
.chat-list .chat .m_box {overflow: hidden; float: left; width: auto; max-width: 300px;}
.chat-list .chat .what_category{
    width:240px;
    border-bottom: 1px solid #e4e3e3;
    padding: 6.5px 5px;
    font-size: 14px;
    color: #666666;
    float: none;
    text-align: left;
    overflow:hidden;}
/*추가_0118 여기까지*/

.chat-list .chat .time {width:100%;float: left; text-align: left; margin-left: 65px; color: #C0C0C0; font-size:11px;letter-spacing:-0.2px; font-family:Verdana, Geneva, sans-serif; }/*수정_0118*/
.chat-list .chat .time.USER2ADMIN {width:100%; float: right; text-align: right; padding-right: 10px; color:#C0C0C0; font-size:11px; letter-spacing:-0.2px; font-family:Verdana, Geneva, sans-serif; }
.chat-list .chat .concierge-icon { width: 40px; height: 40px; margin: 8px; background: url("/Application/zones/images/chat/chat_02.png") no-repeat; background-size: contain; float: left;}
.chat-list .chat .message { position: relative; width: auto; max-width: 70%; margin: 10px; padding:8px 13px; text-align: start; display: inline-block; word-break: break-all; border-radius: 20px; float: left; background-color: #5EB0FB; color: #FFFFFF; }
.chat-list .chat .message img { background-color: #FFFFFF; }
.chat-list .chat .message a { color: cornflowerblue; text-decoration: none; display: block;}/*수정*/
.chat-list .chat .message.USER2ADMIN { background-color: #EFF0F4; color: #4b555e; float: right; }
.chat-list .chat .message.USER2ADMIN .products { display: none; }
.chat-list .chat .message.PURCHASED { padding: 0; }
.chat-list .chat .message.PURCHASED .products .product .purchased { position: absolute; top: 5%; left: 20%; width: 60%; height: inherit; }
.chat-list .chat .message.RECOMMENDATION { max-width: 100%; margin: 0; padding: 0; background-color: transparent; }
.chat-list .chat .message.ROUTINE { background-color: #FFFFFF; color: #777777; }
.chat-list .chat .message.ROUTINE img { width: 20px;}
.chat-list .chat .message.ROUTINE .what_category > img { margin-right: 11px; width: 20px; vertical-align: top; display:block; float:left;}
.chat-list .chat .message.ROUTINE .what_category p { display: block; float: left; width:180px;}
.chat-list .chat .message.ROUTINE .what_category span { float: right; display: block; }
.chat-list .chat .message.ROUTINE .what_category span img { width: 11px; margin-top:1px;}
.chat-list .chat .message.NO_BG { background-color: transparent; }
.chat-list .chat .message .product-site { padding: 15px; color: #FFFFFF; font-size: large; font-weight: bold; text-align: left; cursor: pointer; }
.chat-list .chat .message .products { padding: 2px; margin: 0; font-size: 12px; display: table; }

.chat-list .chat .message .products a { padding: 0; display: table-cell; float: none; color: #555555; }
.chat-list .chat .message .products .product { padding: 2px; float: left; }
.chat-list .chat .message .products .product.col-xs-12 { margin: 10px; padding: 0; }
.chat-list .chat .message .products .product div { background-color: #FFFFFF; }
.chat-list .chat .message .products .product img { top: 0; }
.chat-list .chat .message .products .product .right { display: none; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide a { padding: 0; display: table-cell; float: none; color: #555555; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product { padding: 2px; display: table; float: left; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product.col-xs-12 { max-width: 180px; margin: 10px; padding: 0; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product div { background-color: #FFFFFF; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product img { top: 0; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product .right { display: none; }


.chat-list .chat .message .products .product.col-xs-4 .left { padding: 10px; }
.chat-list .chat .message .products .product.col-xs-6 .left { padding: 14px; }

.chat-list .chat .message .products .product.col-xs-4 img { width: 100%; height: 71px; }
.chat-list .chat .message .products .product.col-xs-6 img { width: 100%; height: 104px; }

.chat-list .chat .message .products .product.col-xs-12 img { width: 180px; height: 250px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product.col-xs-12 img { width: 180px; height: 250px; border-top-left-radius: 10px; border-top-right-radius: 10px; opacity:0.2; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide-active .product.col-xs-12 img { opacity:1; }

/*.chat-list .chat .message .products .swiper-container { width: 260px; height: 100%; }*/
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide { width:180px; height:100%; }

.chat-list .chat .message .products .product.col-xs-12 .left { padding: 7px; width: 86px; display: block;  }
.chat-list .chat .message .products .product.col-xs-12 .left.NO_PRICE { width: 100%; }
.chat-list .chat .message .products .product.col-xs-12 .right { padding: 7px; width: 66px; display: block; }
.chat-list .chat .message .products .product.col-xs-12 .right.NO_PRICE { width: 0%; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product.col-xs-12 .left { padding: 7px; width: 86px; display: block;  }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product.col-xs-12 .left.NO_PRICE { width: 100%; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product.col-xs-12 .right { padding: 7px; width: 66px; display: block; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product.col-xs-12 .right.NO_PRICE { width: 0%; }

.chat-list .chat .message .products .product div .title { height: 30px; font-weight: normal; overflow: hidden; text-align: left; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
.chat-list .chat .message .products .product div .expl { height: 30px; font-weight: normal; overflow: hidden; text-align: left; font-size: 11px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
.chat-list .chat .message .products .product.col-xs-12 div .title { height: 30px; font-weight: bold; font-size: 13px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
.chat-list .chat .message .products .product.col-xs-12 div .price { height: 30px; font-weight: bold; font-size: 15px;  }
/*.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product div .title { height: 32px; font-weight: normal; overflow: hidden; text-align: left; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }*/
/*.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product div .expl { height: 32px; font-weight: normal; overflow: hidden; text-align: left; font-size: 11px; }*/
/*.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product.col-xs-12 div .title { height: 46px; font-weight: bold; font-size: 13px; text-overflow:ellipsis; overflow: hidden; white-space:nowrap; word-wrap:normal; }*/
/*.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product.col-xs-12 div .price { height: 46px; font-weight: bold; font-size: 15px;  }*/

.chat-list .chat .message .products .product div.button { padding: 5px; background-color: #DE4C4C; }
.chat-list .chat .message .products .swiper-container .swiper-wrapper .swiper-slide .product div.button { padding: 5px; background-color: #DE4C4C; }

.chat-list .chat .message .products .product .button{width:auto;padding:5px 10px;font-size:15px;line-height:15px;background-color:#D81F30;text-align:center;color:#fff;border:0px;}
.chat-input { height: 39px; left: 0; bottom: 0px; color: red; position:fixed; border-bottom:1px solid #ddd; }
.chat-input textarea { float: left; width: calc(100% - 118px); height: 39px; padding: 7px; font-size: large; border: 0 none; overflow-y: hidden; }
.chat-input textarea:disabled { background-color: #777777; }
.chat-input #add-image { width: 40px; height: 34px;/*수정_0118*/float:right; background: url("../images/camera.png") no-repeat; background-size: contain; }
.chat-input #add-image:hover { cursor: pointer; }
.chat-input #send { width: 44px; height: 40px; float:right; /*background: url("../images/send-btn-gray.png") no-repeat; */background-size: contain; background-color:#4B5562; }
.chat-input #send i { color:#fff; margin:5px 0 0 14px; transform:rotate(-35deg)}

.chat-input #send.active { background: url("../images/send-btn.png") no-repeat; background-size: contain; }

.go2bottom { text-align: right; }
.go2bottom img { width: 10%; }


/*반응형 추가*/
@media screen and (max-width: 320px) {
    .chat-list .chat .m_box{margin-left:10px;}
}



.position_rel{ position:relative;}
.price_ab{ position:absolute; top:0px; right:0px; text-align:right;}

.col-xs-4{ width:33%; }
.chat-list .chat .message.PURCHASED { padding: 0; }
.chat-list .chat .message.PURCHASED .purchased { position: absolute; top: 10%; left: 20%; width: 60%;}
.chat-list .chat .message.RECOMMENDATION { max-width:inherit; width: 100%;margin: 0 5px;padding: 0;background-color: transparent;/* display:table; */}
.chat-list .chat .message.ROUTINE img { margin-right: 11px; width: 20px; vertical-align: top; }
.chat-list .chat .message.ROUTINE .what_category > img { margin-right: 11px; width: 20px; vertical-align: top; }
.chat-list .chat .message.ROUTINE .what_category p { display: inline; float: none; }
.chat-list .chat .message.ROUTINE .what_category span { float: right; display: inline; }
.chat-list .chat .message.ROUTINE .what_category span img { width: 11px; vertical-align: middle; }
.chat-list .chat .message.NO_BG { background-color: transparent; }
.chat-list .chat .message .string { text-align: start; }
.chat-list .chat .message .string img { /*background-color: #FFFFFF;*/ }
.chat-list .chat .message .string a { word-break: break-all; }
.chat-list .chat .message .products {padding: 2px;font-size: 12px;/* display: table-row; */ display:inherit; width: 100%;clear: both;}
.chat-list .chat .message .products .product {padding: 2px;/* display: table-cell; */float: left;/* background-color:#fff; */}
.chat-list .chat .message .products .product.col-xs-12 { width: 100%; padding:0px;}
.chat-list .chat .message .products .product div { background-color: #FFFFFF; }
.chat-list .chat .message .products .product .right { display: none; color:#000; }
.chat-list .chat .message .products .product.col-xs-4 img { width: 100%; }
.chat-list .chat .message .products .product.col-xs-6 img { width: 100%;  }
.chat-list .chat .message .products .product.col-xs-12 img { width: 100%; height: auto; border-radius:0px; }
.chat-list .chat .message .products .product.col-xs-12 .left {float:left;width: 100%;display: block;}
.chat-list .chat .message .products .product.col-xs-12 .left.NO_PRICE { width: 100%; }
.chat-list .chat .message .products .product.col-xs-12 .right {  float:right; display: block; color: #FFC107;}
.chat-list .chat .message .products .product.col-xs-12 .right.NO_PRICE { width: 0%; }
.chat-list .chat .message .products .product div .title { height: 32px; font-weight: normal; overflow: hidden; text-align: left; padding-left:5px; color:#000;}
.chat-list .chat .message .products .product div .expl { height:inherit; padding-bottom:5px; font-weight: normal; overflow: hidden; text-align: left; padding-left:5px; color:#000; }
.chat-list .chat .message .products .product.col-xs-12 div .title { height: 46px; font-weight: bold; font-size: large; color:#000; }
.chat-list .chat .message .products .product.col-xs-12 div .price { height: 46px; font-weight: bold; font-size: large; text-align: left; }
.table-container { display: inline-flex; }


.chat-list .chat .message2 { position: relative; width: auto; width:70%; margin:10px 0px; padding:5px; text-align: start; display: inline-block; word-break: break-all; border-radius: 0px; float: left; background-color: #f3f3f3; color:#fff; border:1px solid #efefef;}
.chat-list .chat .message2  > .message.RECOMMENDATION { width:100%; max-width:inherit; margin:0px; }
.chat-list .chat .message2  > .message.RECOMMENDATION > .products > .product > .left{padding:4px 5px 6px 4px; border:1px solid #dfdfdf;}
.chat-list .chat .message2  > .message.RECOMMENDATION > .products > .product > .left > .title{ font-size:13px; height:auto; padding:0px 5px 5px 5px; font-weight:600;}
.chat-list .chat .message2  > .message.RECOMMENDATION > .products > .product > .right{background-color: rgba(0, 0, 0, 0.7);color:#fff; font-size:13px; font-family:Verdana, Geneva, sans-serif; width: 100px; text-align: center; color: #ffe66e;}


.chat-list .chat .message .products .product.col-xs-12 {margin:0px;}