.message-mainbox{
margin: auto;
width: 300px;
margin-top: 20px;
margin-bottom: 20px; color: black;
}
.message-r {
max-width: 300px;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
margin-top: 10px;
}
.message-l {
max-width: 300px;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 10px;
}
.messageuhrzeit {
font-size: 10px;
text-transform: uppercase;
margin-bottom: 2px; color: darkgray;
color: var(--accent1);
}
.message-r .messagetext {
padding: 10px;
background-color: var(--accent1);
font-size: 13px;
font-weight: 500;
text-align: justify;
line-height: 22px;
border: 1px solid #718aa3;
 text-shadow: none;
border-radius: 10px 10px 0px 10px;
}
.message-l .messagetext {
padding: 10px;
background-color:  var(--darkcolourfade);
font-size: 13px;
color:  var(--lightcolour);
font-weight: 500;
text-align: justify;
line-height: 22px;
 text-shadow: none;
border: 1px solid #d3d3d3;
border-radius: 10px 10px 10px 0px;
}