.separator { margin-top:1em; margin-bottom:1em; margin-left:auto; margin-right:auto; text-align:center; } .separator img { width:100%; } hr { margin-top:2em; margin-bottom:2em; font-size: 1em; text-align: center; border: none; background: none; } hr:after { content: '*'; font-size: 1em; border: none; background: none; } hr + p { text-indent: 0 !important; } hr.inline-extra-top, hr.inline-extra-bottom { display: none; } hr.inline-extra-top:after, hr.inline-extra-bottom:after { content: ''; }/* Text messages don't use full screen width. Customise sent and received messages with extra classes */ .text-message { width: 65%; } /* Use system font where possible, no indent, top margins */ .text-message > p { font-family: system-ui, Helvetica, sans-serif; font-style: normal; text-indent: 0 !important; margin-top: 0.5em; } /* Left align received messages, round corners, grey background */ .received > p { background-color: #E6E5EA; border: 1px solid #E6E5EA; text-align: left; padding: 10px; border-radius: 0.8em; } /* Right-align sent message parent elements */ .sent { text-align: right; margin-left: 30%; } /* Right align text, round corners, blue background */ .sent > p { background-color: #9ECDFF; border: 1px solid #9ECDFF; text-align: right; padding: 10px; border-radius: 0.8em; } .text-message > p.notification { font-family: system-ui, Helvetica, sans-serif; font-weight:bold; font-style:normal; margin-top:1em; background-color:transparent; }