@charset "utf-8";

html {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 62.5%;
    line-height: 1.5;
    font-weight: 400;
    height :100%;
}

body {
    font-size: 1.6rem;
    position: relative;
    background:#fff;
    height :100%;
}


.chat_area {
    width: 360px;
    margin : 5vh auto;
    height : 90vh;overflow-y:auto;
    padding : 0.8rem;
    border:1px solid #999;
}

.chat_block {
    display: flex;
    padding: 0.8rem;
    margin-bottom : 0.8rem;
    border-radius : 0.8rem;
    background: #fff;
	transition: background-color 1s;  /* 1秒かけて背景色を元に戻す */
}

.author2 .icon_block{
    order :2;
}

.unread {
    background : #ffe7d0;
	transition: background-color 1s;  /* 1秒かけて背景色を元に戻す */
}
.highlight {
	background-color: #f5ce42;  /* ピカッてした時の背景色 */
	transition-duration: 0s; /* 即座に背景色を変える */
}
.message_hide {
    display: none;
}

.chat_org {
    display: none;
}

.chat_detail_block {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding : 0.8rem;
    border-radius: 0.8rem;;
}


.author1 .chat_detail_block {
    background: #f5ffd0;
}
.author2 .chat_detail_block {
    background: #d0f4ff;
}




.icon_block {
    padding : 0.8rem;
}

.el_icon {
    border-radius: 50%;
    width:  4.6rem;
    height: 4.6rem;
    background : #ccc;
    border : 1px solid #666;
}

.chat_elm {
    color : #999;
    font-size : 1.2rem;
    text-align: right;
    width: 100%;
}

.el_name {
    display: inline-block;
    padding-right : 0.5em;
}

.add_btn {
    cursor: pointer;
}