.toolbox-bubble { font-family: 'Source Sans Pro', 'tenforce', Arial, sans-serif; font-kerning: normal; font-size: 16px; -webkit-font-variant-ligatures: no-common-ligatures; font-variant-ligatures: no-common-ligatures; -webkit-font-feature-settings: "kern" 1,"liga" 0; font-feature-settings: "kern" 1,"liga" 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-shadow: none; position: relative; display: flex; flex-direction: column; margin: .25rem 0; }

.toolbox-bubble:hover .toolbox-bubble__date span { display: inline-block; }

.toolbox-bubble:hover .toolbox-bubble__body > .toolbox-action { opacity: 1; }

.toolbox-bubble__header { display: flex; align-items: center; justify-content: flex-start; padding: 0 12px; }

.toolbox-bubble__date span { display: none; }

.toolbox-bubble__body { display: flex; align-items: center; box-shadow: none; }

.toolbox-bubble__body > .toolbox-action { opacity: 0; transition: opacity .3s ease-in-out, top .1s ease-in-out; }

.toolbox-bubble__bubble { position: relative; overflow: hidden; word-break: break-word; background-color: #FFF; transition: transform .3s ease-in-out, box-shadow .3s ease-in-out; will-change: transform, box-shadow; }

.toolbox-bubble__bubble figure { position: relative; height: 110px; }

.toolbox-bubble__bubble figure::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: #A87E2E; opacity: 0; transition: opacity .3s ease-in-out; }

.toolbox-bubble__bubble figure:hover { transform: none; }

.toolbox-bubble__bubble figure:hover::after { opacity: 1; }

.toolbox-bubble__bubble figure a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: none; }

.toolbox-bubble__bubble article { padding: 4px 12px; }

.toolbox-bubble__footer { display: flex; align-items: center; padding: 0 12px; transition: opacity .3s ease-in-out .5s; }

.toolbox-bubble--right { align-items: flex-end; }

.toolbox-bubble--attachment .toolbox-bubble__bubble { max-width: 300px; min-width: 170px; }

a.toolbox-bubble { text-decoration: none; color: #000; }

a.toolbox-bubble .toolbox-bubble__bubble { box-shadow: 0 2px 0 #c1c1c1; cursor: pointer; }

a.toolbox-bubble .toolbox-bubble__bubble:hover { transform: translatey(2px); box-shadow: none; }