/* CSSversion: 1.1 */
body {
    font: 16px "Trebuchet MS", Helvetica;
    color:black;
    background: #eee;
}

p, ul, li {
    font-size: 8vw;
    margin: auto;
}
.pcnt {
    font-size:75%;
    margin: 20px 1px 0px 0px;
}
.mph {
    font-size:60%;
}
.mbar {
    font-size:50%;
}


.forecast-topic {
    clear: both;
}

.ForecastUpdated {
    text-align: left;
    margin: 0 0 3px 5px;
    font-size: 3.5vw;
}

.forecastArea {
    display: flex;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    padding: 4px 3px 10px 3px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.period-box {
    flex: 0 0 48%;
    box-sizing: border-box;
    border: 1px solid #000;
    background: #f8f8f8;
    vertical-align: top;
    scroll-snap-align: start;
    white-space: normal;
}

.period-main {
    display: flex;
    align-items: flex-start;
}

.period-box img {
    display: block;
    width: 49%;
    height: auto;
    margin: 0;
    padding: 0;
}

p.ptitle {
    font-size: 5vw;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 2px 0;
}

.data-box {
    display: block;
    width: 51%;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
}

.data-box p {
    margin: 0;
    padding: 2px 1px 0 1px;
}

p.highLow {
    font-size: 4vw;
}

p.precip {
    font-weight: normal;
    white-space: normal;
    font-size: 3vw;
}

p.brief {
    font-weight: normal;
    font-size: 3vw;
    white-space: normal;
}

.summary-box {
    margin: 0;
    padding: 0;
}

.summary-box p {
    white-space: normal;
    text-align: left;
    font-weight: normal;
    font-size: 3.5vw;
    margin: 0;
    padding: 3px;
}

.nws-alert {
    clear: both;
    box-sizing: border-box;
    margin: 5px;
    padding: 8px;
    border: 3px solid #8b0000;
    border-radius: 8px;
    background: #fff0f0;
}

.nws-alert-title {
    font-size: 5vw;
    font-weight: bold;
    text-align: center;
    margin: 0 0 4px 0;
    color: #8b0000;
}

.nws-alert-headline {
    font-size: 3.8vw;
    font-weight: bold;
    margin: 0 0 5px 0;
}

.nws-alert-detail {
    font-size: 3.4vw;
    white-space: normal;
    margin: 5px 0;
}

@media (min-width: 800px) {
    .period-box {
        flex-basis: 31%;
    }

    p.ptitle {
        font-size: 2rem;
    }

    p.highLow {
        font-size: 1.6rem;
    }

    p.precip,
    p.brief {
        font-size: 1.15rem;
    }

    .summary-box p,
    .ForecastUpdated,
    .nws-alert-detail {
        font-size: 1.1rem;
    }

    .nws-alert-title {
        font-size: 1.8rem;
    }

    .nws-alert-headline {
        font-size: 1.25rem;
    }
}

.MainWrapper {
    width:100%;
}
.CLine {
    width:100%;
    float:left;
}
.TitleText {
    text-align:center;
    font-size: 5.5vw;
    font-weight:  bold;
    margin: 5px 0px 5px 0px; /* top, right, bottom, left */
}
.AlmanacText {
    text-align:center;
    margin: 2px 0px 2px 0px;
    font-size: 5vw;
}
.DebugMsg {
    width:100%;
    float:left;
    height: 50vw;  
    overflow-y : scroll;
    overflow-x : scroll;
}
.DebugText {
    text-align:left;
    margin: 5px 0px 5px 0px;
    font-size: 2.5vw;
    color:blue;
}
.CenteredText3 {
    text-align:center;
    margin: 5px 0px 5px 0px;
    font-size: 4.5vw;
}

p.DebugText {
    text-align:left;
    margin: 5px 0px 5px 0px;
    font-size: 2.5vw;
    color:blue;
}

.Topic {
    width:100%;
    float:left;
    margin: 2px 0px 0px 0px; /* top, right, bottom, left */
    border-top: 3px solid gray;
    border-bottom: 2px solid lightgray;
}
.TopicText {
    text-align:left;
    margin: 0px 0px 0px 5px;
    font-size: 5vw;
}
.LeftBin {
    float:left;
    width:50%;
    height:16vw;
}
.LeftValue {
    font-size:12vw;
    margin: 0px 1px 0px 0px;
    text-align: right;
}
.TempValue {
    font-size: 12vw;
    text-align: right;
}
.WCValue {
    font-size: 12vw;
    text-align: right;
    color: blue;
}
.HIValue {
    font-size: 12vw;
    text-align: right;
    color: red;
}
.RightBin {
    float:left;
    width:50%;
    background:#eee;
    height:16vw;
    vertical-align: middle;
}
.RightValue {
    font-size:5vw;
    margin: 6px 15px 5px 2px;
    text-align: right;
}


/* Hyperlink buttons */

#container{
    text-align: center;
}

a {
    display: inline-block;
    margin: 10px;
}

.LinkBtn {  
  min-width: 20%;
  border-radius: 12px;
  color: #ffffff;
  font-size: 8vw;
  background: #a9adb0;
  padding: 5px 5px 5px 5px;
  border: solid #000000 2px;
}

.LinkBtn:hover {
  background: #393f42;
}

.RefreshBtn {  
    min-width: 50%;
    text-align: center;
    display: block;
    
    color: #ffffff;
    background: #a9adb0;
    font-size: 6vw;
    
    margin: 7px auto 7px auto; /* top, right, bottom, left */
    padding: 5px 15px 5px 15px;  /* top, right, bottom, left */
    border: solid #000000 2px;
    border-radius: 12px;
}


/* House Sensors ---------------------------------------------------------- */
.HouseSensors { width:100%; float:left; box-sizing:border-box; }
.HouseSensorsTopic { margin-top:4px; }
.HouseSensorCarouselWrap { position:relative; width:100%; box-sizing:border-box; background:#eee; padding:7px 34px 10px; }
.HouseSensorCarousel { display:flex; gap:8px; width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:thin; }
.HouseSensorCard { flex:0 0 82%; box-sizing:border-box; padding:8px 9px 9px; text-align:center; background:#fff; border:1px solid #bdbdbd; border-radius:9px; scroll-snap-align:start; min-width:0; }
.HouseSensorName { font-size:5.2vw; font-weight:bold; line-height:1.1; margin-bottom:5px; }
.HouseSensorPrimary { display:flex; justify-content:center; align-items:baseline; gap:12px; font-size:8vw; font-weight:bold; line-height:1.05; white-space:nowrap; }
.HouseSensorExtremes { margin-top:7px; font-size:3.4vw; line-height:1.45; font-variant-numeric:tabular-nums; }
.HouseSensorRSSI { margin-top:5px; font-size:3vw; line-height:1.2; }
.HouseSensorScrollBtn { position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:30px; height:54px; border:1px solid #aaa; border-radius:6px; background:rgba(255,255,255,.92); font-size:32px; line-height:44px; cursor:pointer; padding:0; }
.HouseSensorScrollLeft { left:2px; }
.HouseSensorScrollRight { right:2px; }

.FileVersions { width:100%; float:left; box-sizing:border-box; }
.FileVersionTable { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(70px,.45fr) minmax(0,1.7fr); gap:1px; padding:6px; background:#bdbdbd; box-sizing:border-box; font-size:3.2vw; }
.FileVersionTable > div { background:#fff; padding:5px 6px; min-width:0; overflow-wrap:anywhere; }
.FileVersionHeader { font-weight:bold; text-align:center; background:#e8e8e8 !important; }
.LinksTopic { clear:both; margin-top:4px; }

@media (min-width:800px) {
    .HouseSensorCard { flex-basis:31%; }
    .HouseSensorName { font-size:1.55rem; }
    .HouseSensorPrimary { font-size:2.4rem; gap:18px; }
    .HouseSensorExtremes { font-size:1.05rem; }
    .HouseSensorRSSI { font-size:.95rem; }
    .FileVersionTable { font-size:1rem; }
}
@media (max-width:480px) {
    .HouseSensorCarouselWrap { padding-left:31px; padding-right:31px; }
    .HouseSensorCard { flex-basis:94%; }
    .HouseSensorName { font-size:6vw; }
    .HouseSensorPrimary { font-size:9vw; gap:10px; }
    .HouseSensorExtremes { font-size:4vw; }
    .HouseSensorRSSI { font-size:3.6vw; }
    .FileVersionTable { grid-template-columns:1fr .55fr 1.55fr; font-size:3.1vw; padding:4px; }
    .FileVersionTable > div { padding:4px 3px; }
}

/* Rain History mini bar graph ------------------------------------------- */
.RainHistory {
    width: 100%;
    float: left;
    box-sizing: border-box;
}
.RainHistoryTopic { margin-top: 4px; }
.RainBars {
    padding: 8px 10px 4px 10px;
    box-sizing: border-box;
}
.RainBarRow {
    display: grid;
    grid-template-columns: 14% 1fr 18%;
    align-items: center;
    gap: 8px;
    margin: 5px 0;
}
.RainBarLabel,
.RainBarValue {
    font-size: 3.6vw;
    white-space: nowrap;
}
.RainBarLabel {
    text-align: right;
    font-weight: bold;
}
.RainBarValue {
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.RainBarTrack {
    height: 3.6vw;
    min-height: 14px;
    max-height: 28px;
    background: #e3e3e3;
    border: 1px solid #b8b8b8;
    border-radius: 999px;
    overflow: hidden;
}
.RainBarFill {
    width: 0;
    height: 100%;
    background: #5a8fc4;
    border-radius: 999px;
    transition: width 0.25s ease;
}
.RainBarsNote {
    margin: 2px 8px 8px 8px;
    text-align: center;
    font-size: 2.8vw;
    color: #555;
}
@media (min-width: 800px) {
    .RainBarLabel, .RainBarValue { font-size: 1.15rem; }
    .RainBarsNote { font-size: 0.95rem; }
}
@media (max-width: 480px) {
    .RainBarRow {
        grid-template-columns: 18% 1fr 24%;
        gap: 5px;
    }
    .RainBarLabel, .RainBarValue { font-size: 4.2vw; }
    .RainBarsNote { font-size: 3.2vw; }
}


/* Vertical Rain History override ---------------------------------------- */
.RainBarsVertical {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: end;
    gap: 5px;
    height: 210px;
    padding: 8px 8px 4px 8px;
}

.RainBarColumn {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: 30px 1fr 28px;
    align-items: end;
    text-align: center;
}

.RainBarsVertical .RainBarValue {
    align-self: center;
    text-align: center;
    font-size: 2.6vw;
    white-space: nowrap;
}

.RainBarsVertical .RainBarTrack {
    width: 68%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    border-radius: 5px 5px 0 0;
}

.RainBarsVertical .RainBarFill {
    width: 100%;
    height: 0;
    border-radius: 4px 4px 0 0;
    transition: height 0.25s ease;
}

.RainBarsVertical .RainBarLabel {
    align-self: center;
    text-align: center;
    font-size: 2.8vw;
    white-space: nowrap;
}

@media (min-width: 800px) {
    .RainBarsVertical {
        height: 260px;
        gap: 8px;
    }
    .RainBarsVertical .RainBarValue {
        font-size: 0.95rem;
    }
    .RainBarsVertical .RainBarLabel {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .RainBarsVertical {
        height: 180px;
        gap: 2px;
        padding-left: 4px;
        padding-right: 4px;
    }
    .RainBarsVertical .RainBarColumn {
        grid-template-rows: 25px 1fr 24px;
    }
    .RainBarsVertical .RainBarValue {
        font-size: 2.7vw;
    }
    .RainBarsVertical .RainBarLabel {
        font-size: 2.8vw;
    }
    .RainBarsVertical .RainBarTrack {
        width: 72%;
    }
}