﻿

.ConversationView .date {
    padding-left: 78px;
    color: gray;
    display: flex;
    gap: 16px;
}

.right {
    width: 100%;
}

    .right .date {
        text-align: right;
        margin-right: 78px;
        justify-content: right;
    }

.ConversationView .right .image {
    padding-right: 0px !important;
}

.ConversationView .left .divHolder {
    margin-left: 8px !important;
}

.ConversationView .box {
    max-width: 80% !important;
}

.ConversationView .right .wrapper {
    float: none !important;
    margin-right: 70px;
}

/* タッチ版からの流用 */
.ConversationView {
    display: flex;
    flex-grow: 1;
}

    .ConversationView .conversationContainer {
        margin-left: 10px;
        margin-right: 10px;
        display: flex;
        flex-grow: 1;
        flex-direction: column-reverse;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: auto;
    }

    .ConversationView .image {
        height: 64px;
        width: 64px;
    }

    .ConversationView .divTalk {
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;
        height: 16px;
        width: 16px;
    }

    .ConversationView .wrapper {
        padding-top: 5px;
        margin-left: 74px;
        padding-bottom: 5px;
        position: relative;
    }

    .ConversationView .divMessage {
        text-align: left;
        background: #ffffff;
        color: black;
        border-radius: 10px;
        display: inline-block;
    }

        .ConversationView .divMessage .icon {
            width: 16px;
            height: 16px;
        }

    .ConversationView .box {
        padding: 8px 12px;
        position: relative;
        max-width: 360px;
        word-wrap: break-word;
        display: table-cell;
    }

    .ConversationView .stamp {
        height: 128px;
        width: 128px;
        vertical-align: middle;
    }

    .ConversationView .divName {
        color: white;
        font-size: small;
    }

    .ConversationView .divNotice {
        color: white;
    }

    .ConversationView .divTime {
        display: table-cell;
        padding-left: 10px;
        padding-right: 10px;
        vertical-align: bottom;
        color: lightgray;
        font-size: small;
        text-shadow: none;
    }

    .ConversationView .divSystem {
        color: lightgray;
    }

        .ConversationView .divSystem .text {
            float: left;
        }

    .ConversationView .left .float {
        float: left;
    }

    .ConversationView .left .divTalk {
        background-image: url(/Image/forums/threads/talk_r.png);
    }

    .ConversationView .left .divName {
        padding-left: 78px;
    }

    .ConversationView .left .divHolder {
        margin-left: 4px;
    }

    .ConversationView .right .divHolder {
        justify-content: flex-end;
        display: flex;
        align-items: flex-end;
    }

    .ConversationView .right .float {
        float: right;
    }

    .ConversationView .right .image {
        padding-right: 10px;
    }

    .ConversationView .right .divTalk {
        background-image: url(/Image/forums/threads/talk.png);
        right: 0;
    }

    .ConversationView .right .divName {
        text-align: right;
        padding-right: 80px;
    }

    .ConversationView .right .wrapper {
        float: right;
        text-align: right;
        padding-left: 0px;
        margin-left: -40px;
        padding-right: 14px;
    }

    .ConversationView .center {
        text-align: center;
        color: lightgray;
        font-size: small;
    }

        .ConversationView .center .divNotice {
            max-width: unset;
        }

    .ConversationView .clear {
        clear: both;
    }

@@media screen and (max-width: 480px) {
    .icon {
        width: 48px;
        height: 48px;
    }

    .ConversationView .image {
        width: 48px;
        height: 48px;
    }

    .ConversationView .left .divName {
        padding-left: 54px;
    }

    .ConversationView .left .wrapper {
        margin-left: 54px;
    }

    .ConversationView .right .divName {
        padding-right: 54px;
    }

    .ConversationView .right .wrapper {
        margin-right: 54px;
    }

    .date {
        padding-left: 54px;
    }

    .right .date {
        padding-right: 54px;
    }

    .admin {
        margin: 2px 0px;
    }
}
