webtexting.css

.container-fluid {
height: calc(100% - 108px);
}

#main_content {
height: calc(100% - 108px);
}

.thread {
max-width: 50em;
height: calc(100% - 120px);
margin: 0 auto;
border: solid #999 2px;
border-radius: 0.5em;
padding-left: 0.5em;
padding-right: 0.5em;

/* stupid hack to get the text entry box to display inside the bounds of the thread */
display: flex; 
flex-direction: column;
}

.message-container {
display: flex;
flex-flow: column;
justify-content: flex-start;
height: 100%;
overflow: scroll;
margin-bottom: 0.5em;
}

.message {
    margin-top: 0.5em;
    border: solid #aaa 1px;
    border-radius: 1em;
    padding-left: 0.75em;
    padding-right: 1em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    width: fit-content
}

.message.incoming {
    float: right;
    border-radius: 25% 10%;
}

.message.outgoing{
    border-radius: 10% 25%;
}

.message-inbound {
    float: right;
}

.sendbox {
display: flex;
}

.textentry {
margin-bottom: 0.5em;
border: 0;
background-color: #eee;
resize: none; /* prevent the user from resizing the text box */
flex-grow: 1;
}

.btn-send {
flex-grow: 1;
max-width: fit-content;
}

.textentry:focus {
outline: none; /* hide the browser's extra focus outline */
}


.message .incoming{
    border-radius: 10% 25%
}
.message .outgoing{
    border-radius: 25% 10%
}