:root {
    --body-background: black;
    --left-column-width: minmax(0, 4fr);
    --right-column-width: minmax(240px, 1fr);
}

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body { 
    overflow: hidden;
    background-color: var(--body-background);
    font-family: sans-serif;
}

#container {
    height: 100%;
    width: 100%;
    padding: 3px 8px 8px;

    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 8px;

    overflow: hidden;
}

#bottom-left-column, #bottom-right-column {
    min-width: 0;
    height: auto;
}

#settings {
    margin: 0;
    min-height: 30px;
    padding-left: 5px;
}

#toggle-container {
    display: flex;
    align-items: center;
}

#toggle-text {
    color: white;
    padding-left: 10px;
}

/*
    Main upper area:
    map on the left, earthquake lists on the right.
*/

#top-column-container {
    display: grid;
    grid-template-columns: 
        var(--left-column-width)
        var(--right-column-width);
    gap: 7px;
    height: auto;
    min-height: 0;
    width: 100%;
}

#top-left-column {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    position: relative;
    min-height: 0;
    overflow: hidden;
}

#top-right-column {
    display: grid;
    grid-template-rows:auto minmax(0, 1fr) auto auto;
    position: relative;
    min-height: 0;
    overflow: hidden;
    z-index: 45;
}

#container-header {
    color: black;
    /* green: #4e983b or blue: #007dd7 */
    background-color: white;
    border-radius: 5px 5px 0 0;
    text-align: center;
    font-weight: bold;
    font-size: xxx-large;
    font-variant: all-petite-caps;
    font-family: system-ui;
    z-index: 40;
    padding-bottom: 10px;
    margin-top: 3px;
}

#container-header-subheader {
    font-size: x-large;
}

.left-column,
.right-column {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

#map-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 3px solid white;
    border-radius: 0 0 5px 5px;
}

#map-container { 
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}


#target-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 35;
    border: 0;
}

/* 
    Bottom area:
    magnitude scale aligns with map,
    total count aligns with right panel.
*/

#bottom-column-container {
    display: grid;
    grid-template-columns:
        var(--left-column-width)
        var(--right-column-width);
    gap: 7px;
    width: 100%;
    margin: 0;
}

#bottom-right-column {
    padding-top: 0;
    z-index: 50;
}

#legend {
    width: 100%;
    border: 1px solid black;
    box-sizing: border-box;
}

#legend-header {
    text-align: center;
    color: black;
    font-family: sans-serif;
    box-sizing: border-box;
    font-variant: all-petite-caps;
    font-size: x-large;
    background-color: white;
    border-bottom: 1px solid black;
    border-radius: 5px 5px 0 0;
}

#greyed-out-legend-verbiage {
    color: grey;
}

.richter-scale {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: large;
}

.richter-box {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: bold;
    box-sizing: border-box;
    padding-top: 2px;
}

#mag-totals {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.totals-box {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    box-sizing: border-box;
    padding-top: 5px;
    padding-bottom: 5px;
}

#source-data-div {
    color: lightgrey;
    font-family: sans-serif;
    font-variant: all-petite-caps;
    font-size: large;
    font-style: italic;
    display: block;
    padding-left: 5px;
}

.triangle {
    font-size: x-large;
}

.right-column-sub-header{
    text-align: center;
    font-size: x-large;
    font-variant: all-petite-caps;
    font-family: sans-serif;
}

.top-row {
    display: flex;
    flex-direction: row;
}

.div-mag {
    text-align: left;
    font-weight: 600;
    font-family: sans-serif;
    flex: 1;
}

.div-depth {
    text-align: right;
    font-family: sans-serif;
    flex: 1;
}

.div-location {
    text-align: left;
    font-family: sans-serif;
}

.bottom-row {
    display: flex;
    flex-direction: row;
}

.div-time {
    text-align: left;
    font-family: sans-serif;
    flex-shrink: 1;
}

.div-titles {
    display: inline;
}

.div-source {
    font-variant: all-petite-caps;
    flex: 1;
    text-align: right;
}

#recent-list-header, #strongest-header, #quakes-total-header {
    color: black;
    background-color: white;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 5px 5px 0 0;
    font-size: x-large;
    padding-bottom: 5px;
}

#recent-list {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.panel-entry {
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    font-size: medium;
    border: 1px solid black;
}

.eq-list-entry, .strongest-list-entry, .quakes-total-list-entry {
    padding: 5px;
    border: 1px solid black;
}

.time-since-quake {
    
}

.listItemDiv {
    
}

#strongest-container {
    box-sizing: border-box;
    margin-top: 10px;
}

#strongest-header, #strong-list {
    flex-shrink: 0;
}

#strongest-list {
    width: 100%;
    border-bottom: 1px solid black;
    box-sizing: border-box;
    font-size: medium;
}

#quakes-total-header {
    margin-top: 0px;
    padding: 0;
    padding-bottom: 2px;
}

#quakes-total {
    text-align: center;
    background-color: rgb(118, 119, 134);
    padding: 10px;
    padding-top: 9px;
    color: white;
    font-family: sans-serif;
    font-size: x-large;
}


.quakes-total-list-entry {
    
}

#mag-totals-header {
    
}

#mag-totals {
    
}

.marker {
    border-radius: 50%;
    transform: translate(-50%, -50%); /* Center the circle */
    border: 1px solid black;
}

.mag-0-circle-size {
    width: .25vh;
    height: 0;
    padding-bottom: .25vh;
}

.mag-0-color {
    background-color: rgb(157, 87, 248);
}

.mag-1-circle-size {
    width: .5vh;
    height: 0;
    padding-bottom: .5vh;
    
}

.mag-1-color {
    background-color: rgb(2, 125, 215);
}

.mag-2-circle-size {
    width: 1vh;
    height: 0;
    padding-bottom: 1vh;
}

.mag-2-color {
    background-color: rgb(120, 212, 253);
}

.mag-3-circle-size {
    width: 2vh;
    height: 0;
    padding-bottom: 2vh;
}

.mag-3-color {
    background-color: rgb(58, 208, 7);
}

.mag-4-circle-size {
    width: 3vh;
    height: 0;
    padding-bottom: 3vh;
}

.mag-4-color {
    background-color: rgb(113, 249, 3);
}

.mag-5-circle-size {
    width: 4vh;
    height: 0;
    padding-bottom: 4vh;
}

.mag-5-color {
    background-color: rgb(212, 251, 122);
}

.mag-6-circle-size {
    width: 5vh;
    height: 0;
    padding-bottom: 5vh;
}

.mag-6-color {
    background-color: rgb(255, 253, 169);
}

.mag-7-circle-size {
    width: 5.5vh;
    height: 0;
    padding-bottom: 5.5vh;
}

.mag-7-color {
    background-color: rgb(255, 211, 118);
}

.mag-8-circle-size {
    width: 6vh;
    height: 0;
    padding-bottom: 6vh;
}

.mag-8-color {
    background-color: rgb(254, 169, 66);
}

.mag-9-circle-size {
    width: 6.5vh;
    height: 0;
    padding-bottom: 6.5vh;
}

.mag-9-color {
    background-color: rgb(216, 32, 4);
}

.tot-mag-0-color {
    background-color: rgba(157, 87, 248, .5);
}

.tot-mag-1-color {
    background-color: rgba(2, 125, 215, .5);
}

.tot-mag-2-color {
    background-color: rgba(120, 212, 253, .5);
}

.tot-mag-3-color {
    background-color: rgba(58, 208, 7, .5);
}

.tot-mag-4-color {
    background-color: rgba(113, 249, 3, .5);
}

.tot-mag-5-color {
    background-color: rgba(212, 251, 122, .5);
}

.tot-mag-6-color {
    background-color: rgba(255, 253, 169, .5);
}

.tot-mag-7-color {
    background-color: rgba(255, 211, 118, .5);
}

.tot-mag-8-color {
    background-color: rgba(254, 169, 66, .5);
}

.tot-mag-9-color {
    background-color: rgba(216, 32, 4, .5);
}

.tsunami-threat-div {
    background-color: pink;
    padding: 1px;
    text-align: center;
    border: 1px dashed red;
}

.tsunami-marker {
    border-radius: 50%;
    border-style: dashed;
    border-width: 2px;
}

.tsunami-mag-0 {
    width: .5vh;
    height: 0;
    padding-bottom: .5vh;
    background-color: rgb(157, 87, 248);
}

.tsunami-mag-1 {
    width: 1vh;
    height: 0;
    padding-bottom: 1vh;
    border-color: rgb(2, 125, 215);
}

.tsunami-mag-2 {
    width: 2vh;
    height: 0;
    padding-bottom: 2vh;
    border-color: rgb(120, 212, 253);
}

.tsunami-mag-3 {
    width: 3vh;
    height: 0;
    padding-bottom: 3vh;  
    border-color: rgb(58, 208, 7);
}

.tsunami-mag-4 {
    width: 4vh;
    height: 0;
    padding-bottom: 4vh;   
    border-color: rgb(113, 249, 3);
}

.tsunami-mag-5 {
    width: 5vh;
    height: 0;
    padding-bottom: 5vh; 
    border-color: rgb(212, 251, 122);
}

.tsunami-mag-6 {
    width: 6vh;
    height: 0;
    padding-bottom: 6vh; 
    border-color: rgb(255, 253, 169);
}

.tsunami-mag-7 {
    width: 6.5vh;
    height: 0;
    padding-bottom: 6.5vh;
    border-color: rgb(255, 211, 118);
}

.tsunami-mag-8 {
    width: 7vh;
    height: 0;
    padding-bottom: 7vh; 
    border-color: rgb(254, 169, 66);
}

.tsunami-mag-9 {
    width: 7.5vh;
    height: 0;
    padding-bottom: 7.5vh;  
    border-color: rgb(216, 32, 4);
}

.mapboxgl-popup {
    max-width: 200px;
}

.mapboxgl-popup-content {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

.mapboxgl-ctrl-bottom-right {
    visibility: hidden;
}

.mapboxgl-ctrl-bottom-left {
    visibility: hidden;
}

.mapbox-ctrl-logo {
    margin: 0 0 -13px -10px;
}

.mapboxgl-map,
.mapboxgl-canvas-container,
.mapboxgl-canvas {
    width: 100% !important;
    height: 100% !important;
}




@keyframes grow {
    0% {
        width: 2vh;
        height: 2vh;
        /*transform: scale(1);*/
        transform: translate(-50%, -50%);
    }
    100% {
        width: 18vh; 
        height: 18vh;
        /*transform: scale(9);*/
        transform: translate(-50%, -50%);
    }
}

.circle {
    position: absolute;
    border-radius: 50%;
    z-index: 35;
    border: 2px solid white;
    width: 2vh;
    height: 2vh;
    opacity: 0;
}


#target-circle1 {
    
}

#target-circle2 {
    
}

#target-circle3 {
    
}
  
#timeline-div {
    position: relative;
    bottom: auto;
    width: 100%;
    height: auto;
    padding: 5px 7px 7px;
}

#timeline-headers-div {
    color: white;
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5%;
}

#recap-countdown-header {
    flex: 1;
}

#recap-timer {
    
}

.blink {
    animation: blink 2s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 0;
    }
    25%, 75% {
        opacity: 1;
    }
}

#live-header {
    flex: 1;
    text-align: right;
}

.animated {
    transition: width 30s linear;
}

#progress-bar {
    background-color: red;
    width: 100%;
    height: 6px;
    border-radius: 5px;
    /*transition: width 30s linear;*/
}

.toggle-button {
    display: inline-block;
    width: 60px;
    height: 30px;
    background-color: grey;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
}

.toggle-button::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: white;
    border-radius: 50%;
    top: 1px;
    left: 1px;
    transition: transform 0.3s;
}

.toggle-button.active {
    background-color: green;
}

.toggle-button.active::before {
    transform: translateX(30px);
}








/* Nerdsty alternative: responsive dashboard, map first on phones. */
:root{--body-background:#0b0d15;--panel:#121622;--ink:#f3f4fb;--muted:#a1aec7;--blue:#a2c6ff;--purple:#bc95ff;--edge:#ffffff17;--left-column-width:minmax(0,3fr);--right-column-width:minmax(275px,1fr)}
html,body{height:auto;min-height:100%;width:100%}body{overflow:auto;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at top right,#29213d60,transparent 55%),var(--body-background);line-height:1.5}
a{color:var(--blue);text-underline-offset:3px}a:hover{color:var(--purple)}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.nerdsty-header{max-width:1600px;margin:auto;padding:17px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--edge)}.wordmark{font-weight:900;font-size:25px;letter-spacing:2px;color:var(--ink);text-decoration:none}.wordmark span{background:linear-gradient(100deg,#70bfff,#bd83fa);background-clip:text;color:transparent}.nerdsty-header>a:last-child{font-size:11px;color:var(--muted);text-decoration:none}
#container{max-width:1600px;margin:auto;padding:22px 24px 12px;height:auto;display:grid;grid-template-rows:auto auto auto auto;gap:16px;overflow:visible}
#top-column-container{gap:22px;align-items:stretch}
#top-left-column{grid-template-rows:auto auto auto;overflow:visible}
#container-header{background:transparent;color:var(--ink);border-radius:0;text-align:left;font-family:inherit;font-variant:normal;font-size:inherit;padding:0 0 18px;margin:0}
.eyebrow{display:block;font-size:9px;letter-spacing:1.8px;color:var(--blue);font-weight:700;margin-bottom:8px}h1{font-size:clamp(24px,3vw,36px);letter-spacing:-1px;margin:0;line-height:1.2}#container-header-subheader{font-size:12px;color:var(--muted);font-weight:400;margin-top:7px}
#map-shell{height:clamp(380px,60vh,760px);border:1px solid #809fc840;border-radius:12px;background:#151d2c}
#top-right-column{display:flex;flex-direction:column;overflow:visible;z-index:auto;background:var(--panel);border:1px solid var(--edge);border-radius:12px;min-width:0;align-self:stretch}
#recent-list-header,#strongest-header,#quakes-total-header{background:transparent;color:var(--blue);border:0;border-radius:0;font-variant:normal;font-size:11px;font-weight:700;letter-spacing:1px;text-align:left;padding:15px 16px;margin:0}
.triangle{display:none}
#recent-list{overflow:auto;max-height:clamp(310px,50vh,630px);flex:1;min-height:150px}
#strongest-header{border-top:1px solid var(--edge);color:var(--purple)}#strongest-list{border:0;padding-bottom:7px}
.panel-entry{position:relative;border:0;border-left:3px solid var(--mag-color,var(--blue));border-bottom:1px solid var(--edge);background:#121622!important;color:var(--ink);font-size:12px;padding:12px 14px;overflow-wrap:anywhere}
.panel-entry.mag-0-color{--mag-color:rgb(157,87,248)}.panel-entry.mag-1-color{--mag-color:rgb(2,125,215)}.panel-entry.mag-2-color{--mag-color:rgb(120,212,253)}.panel-entry.mag-3-color{--mag-color:rgb(58,208,7)}.panel-entry.mag-4-color{--mag-color:rgb(113,249,3)}.panel-entry.mag-5-color{--mag-color:rgb(212,251,122)}.panel-entry.mag-6-color{--mag-color:rgb(255,253,169)}.panel-entry.mag-7-color{--mag-color:rgb(255,211,118)}.panel-entry.mag-8-color{--mag-color:rgb(254,169,66)}.panel-entry.mag-9-color{--mag-color:rgb(216,32,4)}
.div-mag{color:var(--mag-color);font-size:14px}.div-depth{font-size:10px;color:var(--muted);align-self:center}.div-location{font-size:12px;margin:5px 0}.bottom-row{gap:8px;font-size:9px;color:#8d9bb5}.div-time{overflow-wrap:anywhere}.div-source{font-size:9px;flex-shrink:0}.time-since-quake{color:var(--muted);font-size:10px;margin-top:4px}
#timeline-div{padding:10px 0 0}#timeline-headers-div{font-size:11px;color:var(--muted);margin-bottom:6px}#live-header{color:#91d7c0;font-size:9px;letter-spacing:1.5px}.blink{animation:none}#progress-bar{background:linear-gradient(90deg,#79baff,#bc95ff);height:4px}
#bottom-column-container{gap:22px;align-items:stretch}#legend{border:1px solid var(--edge);border-radius:10px;overflow:hidden;background:var(--panel)}#legend-header{background:transparent;color:var(--muted);font-size:11px;font-variant:normal;text-align:left;padding:11px 13px;border:0;line-height:1.4}#greyed-out-legend-verbiage{font-size:9px;color:#7f8fa9}.richter-box{min-height:27px;font-size:12px}.totals-box{background:transparent!important;min-height:26px;font-size:10px;color:var(--muted)}#bottom-right-column{border:1px solid var(--edge);border-radius:10px;background:var(--panel);z-index:auto}#quakes-total-header{padding:10px 14px;color:var(--muted)}#quakes-total{font-size:29px;font-weight:600;background:transparent;border:0;padding:0 25px 10px;text-align:left;color:var(--blue)}
#source-data-div{font-size:10px;font-style:normal;font-variant:normal;padding:0;color:var(--muted);display:flex;gap:5px;flex-wrap:wrap;align-items:center}#feed-status{margin-left:auto;font-size:10px}#settings{padding:0;min-height:28px}#toggle-text{font-size:11px;color:var(--muted)}.toggle-button{border:1px solid #a2c6ff40;width:44px;height:24px;background:#243047;padding:0}.toggle-button::before{width:18px;height:18px;top:2px;left:2px;background:#b7c9e7}.toggle-button.active{background:#382c4b;border-color:var(--purple)}.toggle-button.active::before{transform:translateX(20px);background:#e3c5ff}
.tsunami-threat-div{margin-top:8px;background:#35242f;border:1px dashed #dc91a8;color:#ffc9d9;border-radius:5px;padding:6px;font-size:10px;text-align:left}.tsunami-threat-div a{color:#ffdce8}.tracker-footer{max-width:1600px;padding:10px 24px 24px;margin:auto;font-size:10px;color:var(--muted)}.loading-note{color:var(--muted);padding:12px 16px;font-size:12px}
.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-bottom-left{visibility:visible}.mapboxgl-popup-content{background:var(--panel);color:var(--ink)}
@media(max-width:760px){.nerdsty-header{padding:14px 16px}.wordmark{font-size:22px}#container{padding:18px 16px 12px;gap:14px}#top-column-container,#bottom-column-container{grid-template-columns:minmax(0,1fr);gap:14px}#container-header{padding-bottom:13px}h1{font-size:26px}#container-header-subheader{font-size:11px}#map-shell{height:clamp(230px,39svh,370px);border-radius:10px}#top-right-column{display:flex}#strongest-header{order:0;border-top:0}#strongest-list{order:1;border-bottom:1px solid var(--edge)}#recent-list-header{order:2}#recent-list{order:3;max-height:none;overflow:visible;min-height:0}#legend-header{font-size:10px}#greyed-out-legend-verbiage{display:block;margin-top:3px}#bottom-right-column{display:flex;align-items:center;justify-content:space-between}#quakes-total-header{padding:13px}#quakes-total{padding:8px 15px;font-size:27px}#feed-status{width:100%;margin:5px 0 0}#source-data-div{font-size:9px}.tracker-footer{padding:8px 16px 24px}#settings{padding-top:2px}.panel-entry{padding:12px 14px}.div-location{font-size:13px}}
@media(prefers-reduced-motion:reduce){.blink{animation:none}.toggle-button::before{transition:none}}

@media(max-width:760px){.panel-entry{font-size:14px}.div-mag{font-size:16px}.div-depth,.time-since-quake{font-size:12px}.bottom-row,.div-source{font-size:11px}#recent-list-header,#strongest-header{font-size:12px}#timeline-headers-div{font-size:12px}.tracker-footer,#source-data-div,#feed-status{font-size:11px}}