/*global*/
html { min-height: 100%; }
.mazomirror-tip { position: relative; cursor: help; user-select: none; }
.mazomirror-tip:hover::after { position: absolute; content: attr(data-title); color: #FFF; background: rgba(0, 0, 0, 0.75); top: 100%; left: 50%; width: 120px; margin-left: -60px; padding: 6px; font-weight: normal; white-space: normal; z-index: 1080; font-size: 13px; text-align: left; line-height: 1.125; }
time[datetime] { position: relative; }
time[datetime]:hover::after { position: absolute; content: attr(datetime); color: #FFF; background: rgba(0, 0, 0, 0.75); top: 100%; left: 50%; width: 108px; margin-left: -54px; padding: 6px 0; font-weight: normal; white-space: normal; z-index: 1080; font-size: 12px; text-align: center; line-height: 1; }
.btn > .material-icons, .list-group-item-action > .material-icons, .std-icon { font-size: 120%; vertical-align: middle; }
.highlight-all * { font-weight: bold; }
/*nav*/
#menu, #search, #login, .nfc-menu-host { position: absolute; top: 100%; right: 0; opacity: 0; pointer-events: none; transform-origin: top center; transform: scaleY(0); transition: 0.5s; max-width: 480px; }
#menu:target, #search:target, #login:target, .nfc-menu-host:target { opacity: 1; transform: scaleY(1); pointer-events: auto; }
.nfc-menu-host { max-height: 480px; }
.nfc-menu-host .card-body { overflow: auto; }
.nfc-menu-host .list-group-item.dismissed { opacity: 0.5; }
.noti-icon-base span:last-child:not(.d-none) { animation: 2s noti-icon-zm; }
@keyframes noti-icon-zm { from { transform: scale(1) } 25% { transform: scale(1.75) } 50% { transform: scale(1.25) } 75% { transform: scale(1.5) } to { transform: scale(1) } }
/*thread_table*/
.read-mark { position: relative; display: inline-block; height: 24px; vertical-align: middle; user-select: none; }
.read-mark .material-icons { font-size: 24px; cursor: pointer; opacity: 0.5; }
.read-mark .v-low { opacity: 0.25; }
.read-mark .fav-icon { position: absolute; pointer-events: none; top: 13.75%; left: 0; width: 95%; text-align: center; font-size: 14px; opacity: 1; }
.read-mark .v-low.fav-icon { opacity: 0.5; }
.read-mark small .material-icons { font-size: 15px; vertical-align: middle; margin-right: 2px; }
/*avatar*/
.mm-36-ava { width: 36px; height: 36px; }
.mm-36-ava > .mm-dual-ava { transform: scale(0.3, 0.3); }
.mm-87-ava { width: 87px; height: 87px; }
.mm-87-ava > .mm-dual-ava { transform: scale(0.725, 0.725); }
.mm-dual-ava { border-radius: 50% 50% 0 50%; overflow: hidden; width: 120px; height: 120px; position: relative; transform-origin: top left;  }
.mm-post-ava { width: 48px; height: 48px; }
.mm-post-ava > .mm-dual-ava { transform: scale(0.4, 0.4); }
.mm-def-ava, .mm-img-ava { width: 120px; height: 120px; user-select: none; }
.mm-img-ava { position: absolute; inset: 0; }
.mm-def-ava img { width: 100%; height: 100%; opacity: 0.2; display: block; }
.mm-def-ava div { position: absolute; line-height: 120px; inset: 6px 0 0 6px; text-align: center; font-size: 60px; }
/*bootstrap 4->5 compat*/
.form-group { margin-bottom: 1rem; }
a.badge { text-decoration: none; }
.ui-link, .breadcrumb-item a, .btn-link { text-decoration: none; }
.ui-link:hover, .breadcrumb-item a:hover, .btn-link:hover { text-decoration: underline; }
/*root containers*/
body > .container:first-child { margin-top: 2.25rem; }
body > .container:last-of-type { margin-bottom: 2.25rem; }
body > nav + .container { margin-top: 1.5rem; }
/*https://stackoverflow.com/a/22655654*/
.mm-post *:target::before { content: ''; display: block; height: 88px; margin-top: -88px; }
.mm-post *:target .mm-flare:first-child { opacity: 100 !important; }
/*campaignBanner*/
a.ccb-fs { border: 1px solid #666; border-radius: 2px; background: rgba(51, 51, 51, 0.6); color: #FFF; text-decoration: none; }
a.ccb-fs:hover { background: rgba(51, 51, 51, 0.8); }
a.ccb-fs:active { border: 1px solid #333; }
.ccb-fs { font-size: 12px; }
@media (min-width: 768px) { .ccb-fs { font-size: 14px; } }
@media (min-width: 992px) { .ccb-fs { font-size: 15px; } }
.ccb-hinter { position: absolute; left: 100%; margin-left: 8px; background: rgba(0, 0, 0, 0.8); color: #FFF; font-size: 80%; transition: opacity 2s linear 3s; opacity: 1; }
.ccb-hinter::before { position: absolute; content: '';  width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid rgba(0, 0, 0, 0.8); right: 100%; bottom: 4px; }
#cmpgn-banner-h.loaded .ccb-hinter { opacity: 0; }
.ccb-bar { box-shadow: inset 0 0 2px #333; width: 0; transition: width 2s linear; top: 0; position: absolute; color: #000; overflow: hidden; }
#ccb-sszw { left: 100%; transition: left 10s linear 10s; color: #FFF; text-shadow: 0 0 2px #000; top: 5%; }
.ccb-bar:hover { box-shadow: inset 0 0 3px #333; text-shadow: 0 0 1px #FFF; }
.ccb-bar.start-0 { background: linear-gradient(to left, #bf8760, #ffc399); }
.ccb-bar.start-0:hover { background: linear-gradient(to left, #bf6b30, #bf8760); }
.ccb-bar.end-0 { background: linear-gradient(to right, #6960bf, #a299ff); }
.ccb-bar.end-0:hover { background: linear-gradient(to right, #3d30bf, #6960bf); }
.ccb-bar + div { bottom: 100%; pointer-events: none; transition: opacity 0.5s; opacity: 0; color: #FFF; background: rgba(0, 0, 0, 0.8); }
.ccb-bar:hover + div { opacity: 1; }