#app textarea{ border-radius:10px; } #app .message{ padding:10px 20px; border-radius:10px; margin-bottom:10px; } #app .message .symptom{ background:#9ee1c5; border-radius:20px; padding:0 10px; margin-right:5px; margin-bottom:4px; } #app .symptoms-box{ border-radius:10px; background:#f4f4f4; padding:10px; } #app .symptoms-box #symptomList{ list-style:none; border-radius:10px; padding:0; padding-top:10px; } #app .symptoms-box #symptomList li{ background:#9ee1c5; border-radius:15px; padding:5px 5px; padding-left:10px; margin-right:5px; margin-bottom:5px; display:inline-flex; align-items:flex-start; justify-content:center; line-height:1.1em; } #app .symptoms-box #symptomList li .remove{ background:#fff; display:inline-flex; min-width:20px; height:20px; align-items:center; justify-content:center; border-radius:30px; cursor:pointer; margin-left:8px; } #app .transcript-box{ position:relative; } #app .transcript-box::before{ content:""; position:absolute; top:0; left:0; width:100%; height:60px; background:linear-gradient(0, transparent, #fff); pointer-events:none; } #app .transcript-box .transcript{ max-height:360px; overflow-y:scroll; padding-top:60px; scroll-behavior:smooth; } #app .transcript-box .transcript .doctor-response{ background:#f4f4f4; } #app .transcript-box .transcript .doctor-response ul, #app .transcript-box .transcript .doctor-response ol{ margin-bottom:1em; } #app .transcript-box .transcript .doctor-response .multiple-choice-answer{ background:#a1e9cd; padding:5px 15px; display:inline-block; margin-right:5px; margin-bottom:5px; border-radius:5px; border-bottom:solid 2px #76c9a8; } #app .transcript-box .transcript .doctor-response p{ margin-bottom:0; } #app .transcript-box .transcript .doctor-response p:not(:last-of-type){ margin-bottom:1em; } #app .transcript-box .transcript .user-message{ background:#ddedf2; }