.chat__sms {

background: ;
box-sizing: border-box;
width: 100%;
height: auto;
padding: 1rem;

}

.chat-avatar {
width: 2rem;
height: 2rem;
border-radius: 50%;
margin: 0;
overflow: hidden;
display: inline-block;
}

.chat-ava {
margin: 0.35rem 3rem 0.70rem 0.5rem;
display: flex;
flex-wrap: wrap;
align-self: flex-start;
align-items: flex-end; 
}

.chat-ava-two {
margin: 0.35rem 3rem 0.70rem 0.5rem;
display: flex;
flex-wrap: wrap;
margin-right: 0.5rem;
margin-left: 3rem;
align-self: flex-end;
align-items: flex-end;
}

.chat-ava-two > section {
flex: 2;
display: flex;
flex-wrap: wrap;

align-items: flex-end;
flex-direction: column; 
}

.chat-ava-two > .chat-avatar {
margin-left: 0.5rem;
bottom: 1rem;
position: sticky;
}
 
  
.chat-ava > .chat-avatar {
margin-right: 0.5rem;
bottom: 1rem;
position: sticky;
}

  
.chat-ava > section {
flex: 2;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: column;
}
 
sms-time {
opacity: 0.5;
margin-bottom: -1.5em;
font-size: 0.6rem;
font-weight: 600;
text-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.2);
}







.chat-message__left {
background-attachment: fixed;
background-image: linear-gradient(45deg, rgba(228, 246, 237, 1) 44% , rgba(239, 210, 219, 1) 55%);
background-size: 100% 100%;
max-width: 70%;
color: rgba(0, 0, 0, 0.97);
text-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.2);
font-size: 1em;
line-height: 1.4;
padding: 0.5rem 0.75rem;
margin: 0;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;  
}
.chat-message__left:first-of-type {border-radius: 1rem 1rem 1rem 0.25rem;} 
.chat-message__left:not(:first-child) {margin-top: 3px;}
.chat-message__left:last-of-type {border-radius: 0.25rem 1rem 1rem 1rem;}


.chat-message__left-red {
background-attachment: fixed;
background-image: linear-gradient(45deg, rgba(179, 132, 132, 0.99) 44% , rgba(217, 216, 165, 0.99) 55%);
background-size: 100% 100%;
max-width: 70%;
color: rgba(0, 0, 0, 0.97);
text-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.2);
font-size: 1em;
line-height: 1.4;
padding: 0.5rem 0.75rem;
margin: 0;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;  
}
.chat-message__left-red:first-of-type {border-radius: 1rem 1rem 1rem 0.25rem;} 
.chat-message__left-red:not(:first-child) {margin-top: 3px;}
.chat-message__left-red:last-of-type {border-radius: 0.25rem 1rem 1rem 1rem;}


.chat-message__left-green {
background-attachment: fixed;
background-image: linear-gradient(45deg, rgba(139, 172, 144, 0.99) 44% , rgba(214, 192, 168, 0.99) 55%);
background-size: 100% 100%;
max-width: 70%;
color: rgba(0, 0, 0, 0.97);
text-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.2);
font-size: 1em;
line-height: 1.4;
padding: 0.5rem 0.75rem;
margin: 0;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;  
}
.chat-message__left-green:first-of-type {border-radius: 1rem 1rem 1rem 0.25rem;} 
.chat-message__left-green:not(:first-child) {margin-top: 3px;}
.chat-message__left-green:last-of-type {border-radius: 0.25rem 1rem 1rem 1rem;}


.chat-message__left-blue {
background-attachment: fixed;
background-image: linear-gradient(45deg, rgba(128, 128, 128, 0.99) 44% , rgba(169, 188, 209, 0.99) 55%);
background-size: 100% 100%;
max-width: 70%;
color: rgba(0, 0, 0, 0.97);
text-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.2);
font-size: 1em;
line-height: 1.4;
padding: 0.5rem 0.75rem;
margin: 0;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;  
}
.chat-message__left-blue:first-of-type {border-radius: 1rem 1rem 1rem 0.25rem;} 
.chat-message__left-blue:not(:first-child) {margin-top: 3px;}
.chat-message__left-blue:last-of-type {border-radius: 0.25rem 1rem 1rem 1rem;}









.chat-message__right {
background-attachment: fixed;
background-image: linear-gradient(45deg, rgba(207, 222, 201, 0.99) 44% , rgba(195, 217, 229, 0.99) 55%);
background-size: 100% 100%;
max-width: 70%;
color: rgba(0, 0, 0, 0.97);
text-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.2);
font-size: 1em;
line-height: 1.4;
padding: 0.5rem 0.75rem;
margin: 0;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.chat-message__right:first-of-type {border-radius: 1rem 1rem 0.25rem 1rem;}
.chat-message__right:not(:first-child) {margin-top: 3px;}
.chat-message__right:last-of-type {border-radius: 1rem 0.25rem 1rem 1rem;}


.chat-message__right-red {
background-attachment: fixed;
background-image: linear-gradient(45deg, rgba(182, 134, 134, 0.99) 44% , rgba(142, 134, 162, 0.99) 55%);
background-size: 100% 100%;
max-width: 70%;
color: rgba(0, 0, 0, 0.97);
text-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.2);
font-size: 1em;
line-height: 1.4;
padding: 0.5rem 0.75rem;
margin: 0;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.chat-message__right-red:first-of-type {border-radius: 1rem 1rem 0.25rem 1rem;}
.chat-message__right-red:not(:first-child) {margin-top: 3px;}
.chat-message__right-red:last-of-type {border-radius: 1rem 0.25rem 1rem 1rem;}


.chat-message__right-yellow {
background-attachment: fixed;
background-image: linear-gradient(45deg, rgba(227, 217, 166, 0.99) 44% , rgba(209, 185, 133, 0.99) 55%);
background-size: 100% 100%;
max-width: 70%;
color: rgba(0, 0, 0, 0.97);
text-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.2);
font-size: 1em;
line-height: 1.4;
padding: 0.5rem 0.75rem;
margin: 0;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.chat-message__right-yellow:first-of-type {border-radius: 1rem 1rem 0.25rem 1rem;}
.chat-message__right-yellow:not(:first-child) {margin-top: 3px;}
.chat-message__right-yellow:last-of-type {border-radius: 1rem 0.25rem 1rem 1rem;}


.chat-message__right-gold {
background-attachment: fixed;
background-image: linear-gradient(45deg, rgba(122, 122, 148, 0.99) 44% , rgba(194, 179, 148, 0.99) 55%);
background-size: 100% 100%;
max-width: 70%;
color: rgba(0, 0, 0, 0.97);
text-shadow: 0 0 0.125rem rgba(255, 255, 255, 0.2);
font-size: 1em;
line-height: 1.4;
padding: 0.5rem 0.75rem;
margin: 0;
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.chat-message__right-gold:first-of-type {border-radius: 1rem 1rem 0.25rem 1rem;}
.chat-message__right-gold:not(:first-child) {margin-top: 3px;}
.chat-message__right-gold:last-of-type {border-radius: 1rem 0.25rem 1rem 1rem;}









/* ~~~ simplistic speech bubbles ~~~
Coded and provided by lunatic lass @ Storming Gate ('http://storming-gates.de/member.php?action=profile&uid=606')
*/llrelativebox{display:block;width:450px;height:150px;position:relative;margin:auto;font-size: small;font-family:tahoma;}/*
*/llflexbox{display:flex;flex-wrap:wrap;max-width:800px;justify-content: space-around;}/*
*/llflexchara{margin-top:10px;text-align:center;}/*
*/llrelativebox img, llflexbox img{width:120px;height:120px;padding:4px;border-radius:100%;}/*
*/llrelativebox img{position:absolute;top:10px;}/*
*/llrelativebox img.left{right:51.5%;background:#d4d4d4;}/*
*/llrelativebox img.right{left:51.5%;background:#426b7f;}/*
*/llCharaname{display:block;border-radius:25px;padding:3px 20px 4px;white-space:nowrap;}/*
*/llrelativebox llCharaname{position:absolute;top:125px;}/*
*/llrelativebox llCharaname.left{right:58%;background:#d4d4d4;color:#2e2e2e;border-top-right-radius:0px;}/*
*/llrelativebox llCharaname.right{left:58%;background:#426b7f;color:#e2e2e2;border-top-left-radius:0px;}/*
*/llflexbox llCharaname{border-radius:25px 5px;margin-top:-14px;position:relative;}/*
*/llbubbleleft{background:#d4d4d4;color:#2e2e2e;border-radius:25px;display:block;min-height:10px;width:360px;margin:10px 10px 0px;padding:20px 20px 40px;position:relative;text-align:justify;font-size: small;font-family:tahoma;}/*
*/llbubbleleft:before{background:rgba(0,0,0,0);border-color:#d4d4d4;border-width:0px 22px 0px 0px;border-radius:0px 0px 100px 0px;border-style: solid;content:"";display:block;width:35px;height:35px;position:absolute;left:-35px;bottom:0px;}/*
*/llbubbleright{background:#426b7f;color:#e2e2e2;border-radius:25px;display:block;min-height:10px;width:360px;margin:10px 10px 0px;padding:20px 20px 40px;position:relative;text-align:justify;font-size: small;font-family:tahoma;float:right;}/*
*/llbubbleright:before{background:rgba(0,0,0,0);border-color:#426b7f;border-width:0px 0px 0px 22px;border-radius:0px 0px 0px 35px;border-style: solid;content:"";display:block;width:35px;height:35px;position:absolute;right:-35px;bottom:0px;}/*
*/llbubbleleft date,llbubbleright date{font-size:x-small;font-style:italic;position:absolute;right:25px;bottom:5px;}/*
*/llclear{clear:both;display:block;width:100%;height:0px;}/*
*/llbubbleleft img,llbubbleright img{max-height:120px !important;max-width:360px !important;}/*
*/.llgrey{background:#d4d4d4 !important;color:#2e2e2e !important;}/*
*/.llgrey:before{border-color:#d4d4d4 !important;}/*
*/.llblue{background:#426b7f !important;color:#e2e2e2 !important;}/*
*/.llblue:before{border-color:#426b7f !important;}/*
*/.llorange{background:#e0a458 !important;color:#2e2e2e !important;}/*
*/.llorange:before{border-color:#e0a458 !important;}/*
*/.lllime{background:#9fad9a !important;color:#2e2e2e !important;}/*
*/.lllime:before{border-color:#9fad9a !important;}/*
*/.llbluelight{background:#99abbb !important;color:#2e2e2e !important;}/*
*/.llbluelight:before{border-color:#99abbb !important;}/*
*/.llgreydark{background:#7f7f7f !important;color:#e2e2e2 !important;}/*
*/.llgreydark:before{border-color:#7f7f7f !important;}
		
		