.quake-icon {
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(4, 55, 78, .48);
}

.quake-minor { background: #28a9c7 !important; color: #063d4b !important; }
.quake-light { background: #e6bf35 !important; color: #4d3900 !important; }
.quake-strong { background: #ed762f !important; color: #fff !important; }
.quake-major { background: #bd315d !important; color: #fff !important; }

.feed-item.quake-feed,
.feed-item.hazard-feed {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #e7eef2;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}

.quake-feed:hover, .hazard-feed:hover { background: #f0f8fa; }
.quake-feed:focus-visible, .hazard-feed:focus-visible { outline: 3px solid rgba(18, 143, 166, .35); outline-offset: -3px; }
.quake-feed:active, .hazard-feed:active { transform: scale(.997); }

.volcano-icon {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #7a8790;
    filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 2px rgba(31, 35, 38, .42));
}

.volcano-icon.volcano-erupting { width: 34px !important; height: 34px !important; }
.volcano-icon.volcano-paused { width: 30px !important; height: 30px !important; }
.volcano-icon.volcano-heightened { width: 27px !important; height: 27px !important; }
.volcano-icon.volcano-unrest,
.volcano-icon.volcano-reported { width: 24px !important; height: 24px !important; }
.volcano-icon.volcano-minor { width: 21px !important; height: 21px !important; }
.volcano-icon.volcano-quiet { width: 18px !important; height: 18px !important; }
.volcano-icon.volcano-unknown { width: 19px !important; height: 19px !important; }

.volcano-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.volcano-cone { fill: currentColor; stroke: #48261d; stroke-width: 1.3; stroke-linejoin: round; }
.volcano-crater { fill: none; stroke: #fff6e7; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.volcano-lava { fill: none; stroke: #fff1a3; stroke-width: 1.8; stroke-linecap: round; }
.volcano-plume { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.volcano-erupting { color: #d9362b !important; }
.volcano-paused { color: #ef7c24 !important; }
.volcano-heightened { color: #e7a31b !important; }
.volcano-unrest { color: #d6bd27 !important; }
.volcano-minor { color: #2b9ab3 !important; }
.volcano-quiet { color: #84939d !important; }
.volcano-reported { color: #8a50aa !important; }
.volcano-unknown { color: #74838e !important; }

.volcano-legend { display: inline-flex; align-items: center; gap: 7px; }
.volcano-legend b {
    display: inline-block;
    width: 14px;
    height: 12px;
    background: currentColor;
    clip-path: polygon(46% 8%, 57% 8%, 63% 31%, 100% 100%, 0 100%, 39% 31%);
    filter: drop-shadow(0 0 1px rgba(22, 42, 52, .55));
}
.volcano-legend b.erupting { color: #d9362b; }
.volcano-legend b.paused { color: #ef7c24; }
.volcano-legend b.unrest { color: #d6bd27; }
.volcano-legend b.minor { color: #2b9ab3; }

.feed-badge.volcano.erupting { background: #d9362b; color: #fff; }
.feed-badge.volcano.paused { background: #ef7c24; color: #fff; }
.feed-badge.volcano.heightened { background: #e7a31b; color: #3f2a00; }
.feed-badge.volcano.unrest { background: #eadb54; color: #493e00; }
.feed-badge.volcano.minor { background: #69bfd0; color: #073f4a; }
.feed-badge.volcano.quiet { background: #dfe6ea; color: #4d606d; }
.feed-badge.volcano.reported { background: #a778c0; color: #fff; }
.feed-badge.volcano.unknown { background: #e4e9ec; color: #536572; }

.volcano-status {
    display: inline-block !important;
    width: max-content;
    margin: 5px 0 2px !important;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e9eef2;
    color: #526778 !important;
    font-size: .61rem !important;
    font-weight: 850;
    letter-spacing: .045em;
}

.volcano-status.erupting { background: #fee2df; color: #b52e24 !important; }
.volcano-status.paused { background: #ffedd0; color: #9b5b08 !important; }
.volcano-status.heightened { background: #fff0d0; color: #9a5a05 !important; }
.volcano-status.unrest { background: #fff7cf; color: #776007 !important; }
.volcano-status.minor { background: #dff1f5; color: #176579 !important; }
.volcano-status.quiet { background: #e8eef1; color: #536776 !important; }
.volcano-status.reported { background: #f0e5fa; color: #6e3b91 !important; }