main {
    min-height: 10vh;
}

.section-member {
    /* min-height: 100vh; */
    margin-top: 81px;
    padding-top: 60px;
    padding-bottom: 60px;
}


.section-member .item {
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgb(61 65 96 / 20%), 0 0 1px 0 rgb(61 6 96 / 5%);
}
    .section-member .item.message-item {
    }

        .section-member .item.message-item ul {
        overflow-y: auto;
        max-height: 400px;
            padding-left: 0;
        }

            .section-member .item.message-item ul li + li {
                border-top: 1px solid #ccc;
            }

            .section-member .item.message-item ul li {
                padding: 10px;
                list-style: none;
                font-family: 'Noto Sans TC';
                font-size: 15px;
            }
            .section-member .item.message-item ul li.user {
                background: #eee;

            }

                .section-member .item.message-item ul li .date-time {
                    font-size: 14px;
                    color: #444;
                }
        .section-member .item.message-item .pic-item {
            position: relative;
            width: 50px;
            padding-bottom: 50px;
            overflow: hidden;
            border: 1px solid #ccc;
            border-radius: 100%;
        }

            .section-member .item.message-item .pic-item img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        .section-member .item.message-item .title-item{
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .section-member .item.message-item .title-item span{
            display: inline-block;
            color: #666;
            font-weight: bolder;
            font-size: 18px;
            margin-left: 10px;
        }

@media (min-width: 1200px) {
    .section-member {
        margin-top: 121px;
    }

    .section-member .item {
        padding: 60px 30px;
    }
        .section-member .item.message-item{
        padding: 30px;

        }
}

.section-member .item .item-title {
    font-size: 20px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    margin-top: 30px;
    border-bottom: 1px solid #eee;
    text-align: left;
    color: #666;
}


.section-member .list-group {
    box-shadow: 0 2px 5px 0 rgb(61 65 96 / 20%), 0 0 1px 0 rgb(61 6 96 / 5%);
}
    .section-member .list-group .list-group-item {
        border: none;
    }
        .section-member .list-group .list-group-item + .list-group-item {
            border-top: 1px solid #eee;
        }
        .section-member .list-group .list-group-item + .list-group-item.active {
            background: #909986;
        }
.section-member .previous-form a {
    color: #909986;
}

.section-member .previous-form .btn-form, .section-member .item .btn-form {
    padding: 10px 60px;
    background-color: #3a4b2a;
    color: #fff;
    border-radius: 25px;
    letter-spacing: 1.5px;
    border: none;
    transition: all 0.2s ease-in-out;
}

    .section-member .previous-form .btn-form:hover, .section-member .item .btn-form:hover {
        background-color: #909986;
    }

    .section-member .previous-form .btn-form:disabled, .section-member .item .btn-form:disabled {
        background-color: #aaa;
    }
.num {
    font-family: 'Noto Sans TC';
}

.message-num {
    animation: messageNum 2s infinite ease-in-out;
    border: 1px solid rgba(220, 53, 69, 0.6);
    color: #fff;
}

@keyframes messageNum {
    0% {
        background: rgba(220, 53, 69);
    }

    50% {
        background: rgba(220, 53, 69, 0.6);
    }

    100% {
        background: rgba(220, 53, 69);
    }
}