.chatBotChatEntry { padding: 20px; background-color: #fff; border: none; margin-top: 5px; font-family: 'open_sanslight', sans-serif !important; font-size: 17px; font-weight: normal; } .chatBotChatEntry * { font-family: 'open_sanslight', sans-serif !important; font-size: 17px; font-weight: normal; } .chatBotChatEntry .origin { font-weight: bold; margin-right: 10px; } .chatBotChatEntry .imgBox { position: relative; width: 32%; display: inline-block; margin-top: 10px; margin-right: 10px; height: 218px; overflow: hidden; } .chatBotChatEntry .imgBox .actions .button { margin-top: 10px; font-size: 18px; padding: 5px; width: 50%; } .chatBotChatEntry .imgBox .actions { position: absolute; display: none; top: 31px; width: 100%; text-align: center; } .chatBotChatEntry .imgBox:hover .actions { display: block; } .chatBotChatEntry .imgBox .title { position: absolute; bottom: 0; left: 0; width: 100%; padding: 5px; color: #fff; background-color: #333; font-weight: normal; font-size: 16px; } .chatBotChatEntry .imgBox img { width: 100%; } .bot { /*border: 4px solid rgba(0, 132, 60, 0.2);*/ background-color: rgba(0, 132, 60, 0.2); } .human { /*border: 4px solid rgba(38, 159, 202, 0.2);*/ background-color: rgba(38, 159, 202, 0.2); } #chatBotCommandDescription { background-color: #333; color: #fff; padding: 20px; } .commandDescription span.phraseHighlight { color: chartreuse; } .commandDescription span.placeholderHighlight { color: deeppink; } .commandDescription { margin-top: 5px; } #chatBotConversationLoadingBar { background-color: darkcyan; height: 2px; width: 0; } .appear { animation-duration: 0.2s; animation-name: appear; animation-iteration-count: 1; animation-timing-function: ease-out; animation-fill-mode: forwards; } @keyframes appear { from { opacity: 0; } to { opacity: 1; } }