* { margin: 0; padding: 0; font-size: 16px; box-sizing: border-box; } body { display: flex; justify-content: flex-start; align-items: flex-start; --height: 100vh; background-color: #f0f0f0; } .inventoryRow span { vertical-align: top; } .inventoryRow img { float: left; display: inline-block; } #chatsWrapper { display: flex; flex-direction: column; --height: 85vh; --height: calc(100vh - 200px); background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: hidden; padding: 10px; margin: auto; } #messagesEl { flex: 1; padding: 10px; background-color: #f9f9f9; border-radius: 5px; display: flex; flex-direction: column-reverse; --justify-content: flex-end; overflow-y: auto; } .message { border-radius: 20px; font-family: sans-serif; padding: 10px; margin-bottom: 10px; max-width: 80%; word-wrap: break-word; flex-flow: column; } .user { background-color: dodgerblue; color: white; display: inline-flex; align-self: flex-end; justify-content: right; text-align: right; border-bottom-right-radius: 3px; } .assistant { background-color: lightgray; color: black; display: flex; justify-content: left; align-self: flex-start; text-align: left; border-bottom-left-radius: 3px; } .assistant appt-time, .assistant name, .assistant phone { opacity: 0.5; display: block; font-size: 8px; } .system { background-color: tan; color: black; display: flex; justify-content: left; align-self: flex-start; text-align: left; border-bottom-left-radius: 3px; } form { display: flex; margin-top: 10px; padding-left: 10px; padding-right: 10px; } img { max-width: 200px; } #messageInputEl { display: block; width: 100%; max-width: 400px; flex: 1; padding: 10px; border: 1px solid #bbb; border-radius: 5px; margin-right: 5px; outline: none; } #submitEl { padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } #submitEl:hover { background-color: #0056b3; } .stockElWrapper { display: inline-flex; overflow-x: auto; --height: 140px; flex-shrink: 0; } .vehicleCard { width: 160px; height: 160px; flex-shrink: 0; position: relative; margin: 6px; } .vehicleCard img{ max-width: 160px; max-height: 160px; flex-shrink: 0; border-radius: 10px; } .vehicleCard span { font-family: Arial; font-weight: bold; color: white; --text-stroke: 1px black; /* standard property for text stroke */ background-color: rgba(0, 0, 0, 0.4); }