.mbox {
position: relative;
margin-top: 0.4rem;
margin-bottom: 0.8rem;
border-radius: 8px;
font-size: 0.875rem;
display: flex;
flex-direction: column;
}
.mbox-title {
padding: 10px 15px;
display: flex;
align-items: center;
font-weight: bold;
}
.mbox-icon img {
opacity: .5;
margin-right: 10px;
width: 14px;
height: auto;
}
.mbox-text {
position: absolute;
z-index: 10;
padding: 15px 20px;
border-radius: 8px;
background: inherit;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.0625), 0 10px 10px rgba(0, 0, 0, 0.055);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.mbox:hover .mbox-text {
opacity: 1;
visibility: visible;
}
@media only screen and (max-width: 720px) {
.mbox {
margin: 0.4rem -20px 0 -20px;
}
.mbox-title {
padding: 10px 20px;
}
}