/* /Pages/TextMessage/CreateSMS.razor.rz.scp.css */
/* The device with borders */
.smartphone[b-prvz65x147] {
    position: relative;
    width: 315px;
    height: 640px;
    margin: auto;
    border: 16px black solid;
    border-radius: 36px;
}

    /* The notch on the top of the device */
    .smartphone[b-prvz65x147]:before {
        content: '';
        display: block;
        width: 170px;
        height: 25px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background: Black;
        border-radius: 20px;
    }

    /* The line on the bottom of the device */
    .smartphone[b-prvz65x147]:after {
        content: '';
        display: block;
        width: 100px;
        height: 4px;
        position: absolute;
        left: 50%;
        bottom: 5px;
        transform: translate(-50%, -50%);
        background: black;
        border-radius: 18px;
    }

    /* The screen (or content) of the device */
    .smartphone .content[b-prvz65x147] {
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 19px 19px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .smartphone .content .header[b-prvz65x147] {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 75px;
            background: #f4f8f9;
            border-bottom: 2px #e5e5ea solid;
            border-radius: 19px 19px 0 0;
            padding-top: 20px;
        }

.message-area[b-prvz65x147] {
    flex-direction: column;
    margin: 0 auto 1rem;
    max-width: 100%;
    min-width: 100%;
    padding: 0.5rem 1.5rem;
}

    .message-area p[b-prvz65x147] {
        border-radius: 1.15rem;
        line-height: 1.25;
        padding: 0.5rem .875rem;
        position: relative;
        word-wrap: break-word;
    }

        .message-area p[b-prvz65x147]::before,
        .message-area p[b-prvz65x147]::after {
            bottom: -0.1rem;
            content: "";
            height: 1rem;
            position: absolute;
        }

p.from-them[b-prvz65x147] {
    align-items: flex-start;
    background-color: #e5e5ea;
    color: #000;
    min-height: 2rem;
    white-space: pre-wrap;
}

    p.from-them[b-prvz65x147]:before {
        border-bottom-right-radius: 0.8rem 0.7rem;
        border-left: 1rem solid #e5e5ea;
        left: -0.35rem;
        transform: translate(0, -0.1rem);
    }

    p.from-them[b-prvz65x147]::after {
        background-color: #fff;
        border-bottom-right-radius: 0.5rem;
        left: 20px;
        transform: translate(-30px, -2px);
        width: 10px;
    }

.message-area .text-area[b-prvz65x147] {
    width: 112%;
    left: -14px;
    position: relative;
}

    .message-area .text-area p[b-prvz65x147] {
        border: 1px solid;
        margin-top: 25px;
    }