/* Deliberately traditional CSS: Safari 9 has no CSS Grid or custom properties. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #111b1f; color: #edf3ed; }
body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: rgba(196, 237, 177, .15); }
button { font-family: inherit; cursor: pointer; color: inherit; }
button:focus, a:focus { outline: 2px solid #c4edb1; outline-offset: 3px; }
button:focus:not(:focus-visible) { outline: none; }
a { color: #c4edb1; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0); white-space: nowrap !important; border: 0 !important; }
h1, h2, h3, p { margin: 0; }
h2, h3 { font-weight: 500; }
.dashboard { padding: 10px 12px 6px; max-width: 1800px; margin: 0 auto; }
.topbar { width: 100%; display: table; table-layout: fixed; margin-bottom: 10px; }
.identity, .home-clock, .world-clocks, .header-actions { display: table-cell; vertical-align: middle; }
.identity { width: 18%; }
.brand { font-size: 10px; letter-spacing: 2px; font-weight: 600; color: #c4edb1; margin-bottom: 4px; }
.brand-mark { display: inline-block; letter-spacing: -2px; font-size: 21px; margin-right: 7px; line-height: 18px; }
h1 { font-size: 11px; font-weight: 400; line-height: 1.4; color: #a6bcbd; }
.subtle { color: #94a8ab; }
.home-clock { width: 26%; padding-left: 8px; }
.clock-face { font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.seconds { font-size: 20px; color: #899ea3; margin-left: 8px; letter-spacing: 0; }
#local-date { font-size: 11px; }
.date-button { display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none; text-align: inherit; -webkit-appearance: none; }
#iso-week { margin-left: 7px; font-size: 9px; color: #b1ceac; white-space: nowrap; }
.world-clocks { width: 48%; }
.world { display: inline-block; width: 24%; vertical-align: top; padding: 0 0 0 8px; border: 0; border-left: 1px solid #304046; background: none; text-align: left; -webkit-appearance: none; }
.world > span { display: block; }
.world.is-night .world-time { color: #a8b9c5; }
.world.is-night .eyebrow { color: #8f9eac; }
.clock-daylight { width: 14px; height: 14px; vertical-align: middle; }
.clock-dst { font-size: 8px; color: #edbc7b; margin-left: 3px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.eyebrow { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: #9dafb2; }
.world .eyebrow { font-size: 9px; letter-spacing: .5px; }
.world-time { font-size: 23px; font-weight: 400; margin: 5px 0 4px; font-variant-numeric: tabular-nums; }
.world-offset { font-size: 10px; color: #b9cdbd; margin-left: 6px; white-space: nowrap; }
.world-zone { color: #81999d; font-size: 10px; }
.header-actions { width: 8%; text-align: right; }
.quiet-button { border: 1px solid #3d5157; border-radius: 16px; background: transparent; color: #b2c4c4; font-size: 11px; min-width: 48px; min-height: 32px; padding: 5px 8px; }
.info-button { display: none; width: 32px; height: 32px; border: 1px solid #3d5157; background: none; border-radius: 50%; margin-left: 5px; font-family: Georgia, serif; font-size: 17px; }
.panel { background: #19272c; border: 1px solid #314248; border-radius: 13px; }
.main-row { position: relative; height: calc(100vh - 238px); min-height: 410px; }
.conditions { position: absolute; left: 0; top: 0; width: 41%; height: 100%; padding: 10px 15px; }
.radar { position: absolute; right: 0; top: 0; width: 58%; height: 100%; overflow: hidden; }
.source-age { font-size: 10px; color: #91a7ab; }
.source-age.stale, .metric-note.stale, .station-label.stale { color: #edbc7b; }
.hero { display: table; width: 100%; height: 88px; }
.temperature { display: table-cell; vertical-align: middle; white-space: nowrap; font-size: 76px; letter-spacing: -4px; font-weight: 300; color: #d9f4c8; line-height: 1; }
.temperature-unit { display: inline-block; font-size: 24px; vertical-align: top; position: relative; top: 11px; margin-left: 5px; letter-spacing: -1px; color: inherit; }
.temperature-band { display: block; font-size: 9px; line-height: 1.2; letter-spacing: 0; margin-top: 8px; }
.hero-context { display: table-cell; vertical-align: middle; padding-left: 12px; }
.weather-description { font-size: 15px; line-height: 1.4; margin-bottom: 5px; color: #dce5df; }
.feels { font-size: 13px; color: #b9cbc9; white-space: nowrap; }
.feels strong { font-weight: 500; }
.estimate-label { font-size: 9px; color: #859da0; }
.station-label { font-size: 9px; color: #8fa4a7; margin-top: 4px; line-height: 1.3; }
.metrics { overflow: hidden; padding: 3px 0 0; }
.metric { float: left; width: 33.333%; height: 70px; padding: 5px 0 4px 13px; border-left: 1px solid #33474c; }
.metric:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.metric:nth-child(n+4) { padding-top: 7px; }
.metric h3, .outlook-detail h3 { font-size: 11px; color: #a9bcbd; }
.metric h3 sub { font-size: 8px; }
.metric-value { font-size: 28px; font-weight: 400; line-height: 1.25; white-space: nowrap; letter-spacing: -.7px; margin-top: 2px; }
.unit { color: #90a7aa; font-size: 11px; margin-left: 4px; letter-spacing: 0; }
.metric-note { font-size: 9px; color: #8da4a8; white-space: nowrap; margin-top: 2px; }
.metric-link { display: block; background: none; border: 0; padding: 0; text-align: left; border-radius: 3px; }
.metric-link:hover { color: #c4edb1; }
.metric-link:focus { outline-offset: 1px; }
#pressure-trend { font-size: 9px; letter-spacing: -.2px; }
.wind-arrow { display: inline-block; margin-left: 3px; font-size: 14px; line-height: 11px; color: #c4edb1; }
.wind-bearing { font-size: 9px; color: #c5d8d5; }
.reading-dot, .live-dot, .connection-dot { display: inline-block; width: 5px; height: 5px; vertical-align: middle; border-radius: 50%; background: #779095; }
.reading-dot { margin-left: 3px; }
.reading-dot.good, .live-dot.fresh, .connection-dot.good { background: #c4edb1; }
.reading-dot.caution, .live-dot.stale, .connection-dot.caution { background: #edbc7b; }
.reading-dot.poor { background: #f19182; }
.history { position: absolute; top: 254px; left: 15px; right: 15px; bottom: 10px; }
.chart-wrap { position: absolute; top: 0; bottom: 0; width: 100%; }
#temperature-chart { display: block; width: 100%; height: 100%; overflow: visible; }
.live-dot { margin-right: 7px; width: 6px; height: 6px; }
.radar-controls { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
.pill-button { margin-left: 5px; border: 1px solid #536a70; color: #dce9e5; background: rgba(17, 27, 31, .9); border-radius: 7px; min-width: 53px; height: 32px; padding: 3px 10px; font-size: 11px; }
.radar-body { position: absolute; left: 0; right: 0; top: 0; bottom: 92px; overflow: hidden; }
.hourly-forecast { position: absolute; bottom: 0; left: 0; right: 0; height: 92px; padding: 6px 7px; border-top: 1px solid #314248; }
.hourly-forecast h3 { font-size: 10px; font-weight: 500; color: #cbdad6; line-height: 13px; }
.hourly-forecast h3 span { float: right; font-size: 9px; color: #91a7aa; }
.hourly-cells { display: table; table-layout: fixed; width: 100%; margin-top: 4px; }
.hourly-cell { display: table-cell; vertical-align: top; text-align: center; border-left: 1px solid #314248; }
.hourly-cell:first-child { border-left: 0; }
.hourly-time { display: block; font-size: 10px; color: #a8bdbb; line-height: 12px; }
.hourly-condition { height: 25px; line-height: 25px; white-space: nowrap; }
.hourly-condition img { width: 22px; height: 22px; vertical-align: middle; margin-right: 2px; }
.hourly-condition strong { font-size: 17px; font-weight: 400; vertical-align: middle; }
.hourly-rain, .hourly-wind { display: block; font-size: 9px; line-height: 12px; color: #acc8d5; }
.hourly-wind { color: #96adaa; }
.hourly-cell.partial .hourly-time { color: #edbc7b; }
.hourly-empty { padding: 15px 0; font-size: 12px; color: #91a7aa; text-align: center; }
.radar-stage { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
#radar-image { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.radar-footer { position: absolute; bottom: 8px; left: 8px; z-index: 2; padding: 5px 8px; border-radius: 6px; background: rgba(17, 27, 31, .9); font-size: 10px; line-height: 1.5; color: #d4e0df; }
.radar-utc { font-size: 9px; color: #a5babc; }
.radar-footer .source-age { color: #d4e0df; }
.radar-footer .source-age.stale { color: #edbc7b; }
.radar-expanded-info { display: none; position: absolute; top: 10%; left: 12px; z-index: 2; padding: 12px 16px; border-radius: 8px; background: rgba(17, 27, 31, .88); }
.radar.expanded { position: fixed; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: #111b1f; }
.radar.expanded .radar-expanded-info { display: block; }
.radar.expanded .radar-body { bottom: 0; }
.radar.expanded .hourly-forecast { display: none; }
#radar-local-time { font-size: 38px; font-weight: 300; line-height: 1.1; }
.radar-clock-label { font-size: 11px; color: #a5babc; margin-left: 8px; }
.radar-utc-clock { font-size: 12px; margin-top: 5px; color: #b9cdca; }
#radar-utc-time { font-size: 18px; font-variant-numeric: tabular-nums; }
#radar-weather { font-size: 19px; color: #d9f4c8; margin-top: 7px; }
#radar-weather-details, #radar-weather-age { font-size: 11px; color: #b7cbcc; margin-top: 4px; }
.radar-placeholder { position: absolute; width: 100%; top: 30%; text-align: center; color: #8ba2a6; font-size: 14px; }
.radar-placeholder span { display: block; margin-top: 8px; font-size: 11px; }
.radar-placeholder-ring { border: 1px solid #466269; width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 22px; position: relative; }
.radar-placeholder-ring:after { content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #466269; left: 14px; top: 14px; }
.outlook { position: relative; display: table; table-layout: fixed; width: 100%; margin-top: 10px; min-height: 100px; padding: 12px 15px; border-color: #445d51; background: #1c2d2c; }
.outlook.caution { border-color: #615742; }
.outlook.poor { border-color: #77534b; }
.outlook-summary { width: 40%; display: table-cell; vertical-align: middle; padding-right: 22px; }
.outlook-summary .eyebrow { font-size: 9px; color: #c4edb1; }
.outlook.caution .outlook-summary .eyebrow { color: #edbc7b; }
.outlook.poor .outlook-summary .eyebrow { color: #f19182; }
.outlook-symbol { margin-right: 4px; font-size: 14px; }
.outlook-horizon { display: inline-block; margin-left: 8px; color: #8fa8a4; font-size: 8px; letter-spacing: 1px; }
.outlook-summary h2 { font-size: 21px; letter-spacing: -.4px; margin: 4px 0; line-height: 1.2; }
.outlook-summary p { color: #a8bdb7; font-size: 11px; line-height: 1.5; height: 33px; overflow: hidden; }
.outlook-detail { display: table-cell; vertical-align: middle; border-left: 1px solid #3b524e; padding-left: 18px; padding-bottom: 14px; }
.rain-outlook { width: 27%; padding-right: 18px; }
.wind-outlook { width: 17%; }
.daylight-outlook { width: 16%; }
.outlook-detail h3 { color: #a9bcb5; font-size: 10px; }
.rain-outlook h3 span { float: right; color: #c4edb1; }
.rain-timeline { height: 31px; position: relative; margin: 6px 0 5px; }
.rain-column { position: absolute; bottom: 0; top: 0; background: #263e3b; border-radius: 2px; }
.rain-column i { position: absolute; bottom: 0; left: 0; right: 0; background: #a3c9bf; border-radius: 2px; min-height: 2px; }
.rain-column.missing { background: #555949; }
.outlook-small { color: #95ada5; font-size: 10px; white-space: nowrap; }
.rain-outlook .outlook-small { position: relative; font-size: 9px; }
.rain-outlook .outlook-small > span:nth-child(2) { position: absolute; width: 100%; text-align: center; left: 0; }
.rain-outlook .outlook-small > span:last-child { float: right; }
.outlook-value { font-size: 29px; font-weight: 400; letter-spacing: -.6px; margin: 8px 0 5px; line-height: 1; }
.outlook-value .unit { font-size: 12px; }
.outlook-summary p.outdoor-advice { position: absolute; left: 42%; right: 15px; bottom: 8px; height: 14px; font-size: 10px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #a8bdb7; }
.outlook.caution .outdoor-advice { color: #edbc7b; }
.outlook.poor .outdoor-advice { color: #f19182; }
.outlook .outlook-summary .day-plan .eyebrow { color: #adc2ba; }
.day-overview { display: table; table-layout: fixed; width: 100%; }
.day-summary { display: table-cell; vertical-align: middle; width: 67%; padding-right: 8px; }
.day-icon { float: left; width: 43px; height: 43px; margin: 7px 8px 0 0; }
.day-copy { overflow: hidden; }
.day-summary .eyebrow { font-size: 9px; color: #adc2ba; white-space: nowrap; letter-spacing: .3px; }
.model-tag { font-size: 7px; color: #819c97; margin-left: 5px; }
.outlook-summary .day-summary h2 { font-size: 17px; line-height: 1.2; margin: 4px 0; letter-spacing: -.3px; }
#day-probability { height: auto; font-size: 9px; line-height: 1.3; color: #a1bcb6; white-space: nowrap; }
.return-forecast { display: table-cell; vertical-align: middle; width: 33%; border-left: 1px solid #3b524e; padding-left: 10px; }
.return-forecast .eyebrow { font-size: 9px; letter-spacing: .2px; color: #b7cbc3; white-space: nowrap; }
.return-condition { white-space: nowrap; margin: 3px 0; }
.return-condition img { width: 29px; height: 29px; vertical-align: middle; margin-right: 3px; }
#return-probability { font-size: 18px; vertical-align: middle; }
#return-text { font-size: 9px; line-height: 1.2; color: #a7c1b9; }
#footwear { height: auto; margin: 7px 0 0; font-size: 11px; line-height: 1.3; color: #c4ddca; }
.day-plan.caution #day-title, .day-plan.caution #footwear { color: #edbc7b; }
.day-plan.poor #day-title, .day-plan.poor #footwear { color: #f19182; }
.day-plan.unknown #day-title, .day-plan.unknown #footwear { color: #a3b8b6; }
.owner-name { color: #b8cecc; margin-right: 12px; }
.key-cold { color: #84c5ff; }
.key-mild { color: #d9eead; }
.key-warm { color: #f2b36a; }
.key-hot { color: #ee786c; }
.page-footer { display: table; width: 100%; padding: 5px 2px 0; font-size: 9px; color: #7e999e; }
.page-footer > div { display: table-cell; vertical-align: middle; }
.page-footer > div:last-child { text-align: right; }
.connection-dot { margin-right: 6px; }
.page-footer button { background: none; border: 0; padding: 5px 0 5px 15px; color: #9ab3b4; font-size: 9px; }
.overlay { position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; left: 0; background: rgba(5, 12, 15, .85); overflow: auto; padding: 30px 20px; -webkit-overflow-scrolling: touch; }
.metric-overlay { z-index: 30; }
.time-overlay { z-index: 30; }
.time-details { max-width: 680px; }
.calendar-navigation { margin-top: 18px; display: table; width: 100%; }
.calendar-navigation strong { display: inline-block; width: 49%; text-align: center; font-size: 17px; vertical-align: middle; }
.calendar-navigation button { min-height: 36px; margin-right: 4px; }
.calendar-navigation button:disabled { opacity: .4; cursor: default; }
.calendar-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; margin-top: 12px; font-size: 13px; text-align: center; }
.calendar-table th { font-weight: 400; color: #9cafb2; font-size: 10px; }
.calendar-table th:first-child { width: 30px; }
.calendar-table td { height: 30px; border-radius: 5px; }
.calendar-table .weekend { background: #233239; }
.calendar-table .outside-month { opacity: .4; }
.calendar-table .today { background: #c4edb1; color: #19272c; font-weight: 600; opacity: 1; }
.holiday { color: #edbc7b; }
.calendar-table .holiday time { border-bottom: 2px solid currentColor; }
.observance time, .calendar-legend .observance { border-bottom: 1px dotted #9cafb2; }
.details .calendar-legend { font-size: 10px; margin-top: 9px; }
.calendar-upcoming { border-top: 1px solid #314248; margin-top: 14px; }
.calendar-upcoming h3 { margin: 12px 0 3px; font-size: 12px; }
.calendar-upcoming p, #month-holidays li { font-size: 12px; }
#month-holidays { padding-left: 19px; margin: 0; }
.time-source { display: inline-block; font-size: 12px; margin-top: 15px; }
.clock-detail-time { font-size: 44px; font-weight: 300; font-variant-numeric: tabular-nums; margin: 16px 0 4px; }
.clock-sun-times { display: table; width: 100%; }
.clock-sun-times span { display: table-cell; width: 50%; font-size: 12px; color: #9cafb2; }
.clock-sun-times strong { font-size: 22px; color: #edf3ed; margin-left: 9px; font-weight: 400; }
.metric-chart { display: block; width: 100%; height: 235px; margin-top: 16px; }
.history-switches { margin-top: 16px; }
.history-switches button { margin: 0 4px 5px 0; min-height: 36px; }
.history-switches button[aria-pressed="true"] { color: #c4edb1; border-color: #8aaf82; }
.warnings-banner { display: block; width: 100%; height: 30px; margin-bottom: 6px; border: 1px solid #a58f51; border-radius: 7px; padding: 3px 10px; background: #3b3524; color: #f1d88d; text-align: left; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warnings-banner.orange { border-color: #c18448; color: #ffce9a; background: #493322; }
.warnings-banner.red { border-color: #b66c63; color: #ffc2b9; background: #482d2a; }
.warnings-banner.stale { border-style: dashed; }
.has-warning .main-row { min-height: 340px; }
.warning-card { border-left: 3px solid #edcf7b; margin-top: 18px; padding: 0 0 0 12px; }
.warning-card.orange { border-color: #eba562; }
.warning-card.red { border-color: #ef9687; }
.warning-card h3 { margin-top: 0; }
.warning-card p { white-space: pre-line; }
.warnings-link { display: inline-block; margin-top: 20px; font-size: 13px; }
.details { position: relative; max-width: 650px; margin: 0 auto; padding: 30px; }
.details h2 { font-size: 27px; margin: 12px 0; font-weight: 400; }
.details h3 { font-size: 14px; margin: 20px 0 8px; color: #d1e3d0; }
.details p, .details li { font-size: 13px; line-height: 1.6; color: #b1c3c5; }
.details .detail-small { font-size: 12px; margin-top: 12px; }
.close-button { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 27px; width: 36px; height: 36px; color: #b6cdcc; }
.source-detail { border-bottom: 1px solid #3a5055; padding: 13px 0; font-size: 12px; line-height: 1.5; }
.source-detail strong { display: block; font-weight: 500; }
.source-detail span { color: #8fa8ac; }
.source-detail.stale span, .source-detail.unavailable span { color: #edbc7b; }
.source-links { margin-top: 24px; }
.source-links a { display: inline-block; margin: 0 14px 10px 0; font-size: 11px; }
.noscript { padding: 15px; border: 1px solid #edbc7b; margin-top: 15px; }
/* Night mode changes page colours, rather than attempting to control iPad brightness. */
body.night, body.night html { background: #0b1114; }
.night .panel { background: #142024; border-color: #2a393f; }
.night .outlook { background: #172321; }
.night #radar-image { opacity: .7; }
.night .clock-face, .night .temperature { color: #c3d8b8; }

@media (min-width: 1300px) {
  .dashboard { padding: 12px 18px 8px; }
  .topbar { margin-bottom: 12px; }
  .main-row { height: calc(100vh - 250px); min-height: 500px; }
  .conditions { padding: 12px 20px; }
  .hero { height: 108px; }
  .temperature { font-size: 86px; }
  .temperature-unit { top: 14px; font-size: 26px; }
  .hero-context { padding-left: 25px; }
  .weather-description { font-size: 20px; }
  .feels { font-size: 16px; }
  .metric { height: 82px; }
  .metric-value { font-size: 34px; }
  .metric h3 { font-size: 13px; }
  .metric-note { font-size: 11px; }
  .history { top: 300px; left: 20px; right: 20px; bottom: 10px; }
  .header-actions .info-button { display: inline-block; }
  .outlook { min-height: 120px; }
  .outlook-summary h2 { font-size: 25px; }
  .outlook-summary p { font-size: 13px; height: 39px; }
}
@media (min-width: 850px) and (max-height: 720px) {
  .dashboard { padding-top: 8px; }
  .topbar { margin-bottom: 8px; }
  .clock-face { font-size: 42px; }
  .main-row { height: calc(100vh - 220px); min-height: 375px; }
  .conditions { padding-top: 8px; }
  .hero { height: 78px; }
  .temperature { font-size: 64px; }
  .temperature-unit { top: 9px; font-size: 21px; }
  .metric { height: 65px; padding-top: 3px; }
  .metric:nth-child(n+4) { padding-top: 5px; }
  .metric-value { font-size: 25px; }
  .history { top: 229px; }
  .outlook { margin-top: 8px; min-height: 90px; padding-top: 8px; padding-bottom: 8px; }
  .outlook-summary h2 { font-size: 19px; }
}
@media (max-width: 1000px) and (min-width: 850px) {
  .dashboard { padding-left: 10px; padding-right: 10px; }
  .conditions { padding-left: 15px; padding-right: 15px; }
  .history { left: 15px; right: 15px; }
  .temperature { font-size: 63px; }
  .hero-context { padding-left: 8px; }
  .station-label { font-size: 8px; }
  .metric { padding-left: 9px; }
  .metric .unit { font-size: 9px; }
}
@media (max-width: 849px) {
  .dashboard { padding: 10px 12px 8px; }
  .identity { width: 47%; }
  .home-clock { width: 43%; text-align: right; padding-right: 15px; }
  .header-actions { width: 10%; }
  .world-clocks { display: none; }
  .topbar { margin-bottom: 10px; }
  .main-row { min-height: 500px; height: calc(100vh - 270px); }
  .conditions { width: 47%; padding: 10px 14px; }
  .radar { width: 51%; }
  .hero { height: 115px; display: block; }
  .temperature { display: block; padding-top: 5px; font-size: 65px; }
  .hero-context { display: block; padding: 3px 0 0; }
  .weather-description { display: none; }
  .estimate-label { display: inline; }
  .station-label { margin-top: 3px; }
  .metrics { margin-top: 5px; }
  .metric { width: 50%; height: 70px; padding-left: 12px; }
  .metric:nth-child(3n+1) { border-left: 1px solid #33474c; padding-left: 12px; }
  .metric:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .metric:nth-child(n+4) { padding-top: 7px; }
  .history { top: 352px; left: 14px; right: 14px; }
  .outlook-summary { width: 42%; }
  .outlook-summary h2 { font-size: 19px; }
  .outlook-horizon { display: block; margin: 4px 0; }
  .rain-outlook { width: 34%; }
  .wind-outlook { display: none; }
  .daylight-outlook { width: 24%; }
  #pressure-rain { display: none; }
  .day-icon { width: 31px; height: 31px; margin-right: 5px; }
  .outlook-summary .day-summary h2 { font-size: 14px; }
  .day-summary .eyebrow { font-size: 8px; }
  .model-tag { display: none; }
  .return-forecast { padding-left: 7px; }
  #return-probability { font-size: 15px; }
  #footwear { font-size: 10px; }
}
@media (max-width: 560px) {
  .calendar-navigation strong { width: 40%; font-size: 14px; }
  .calendar-navigation button { min-width: 35px; padding-left: 7px; padding-right: 7px; }
  .has-warning .main-row { min-height: 0; }
  .dashboard { padding: 10px 10px; }
  .topbar { display: block; position: relative; }
  .identity { display: block; width: 100%; }
  .home-clock { display: block; width: 100%; text-align: left; padding: 12px 0; }
  .clock-face { font-size: 46px; }
  .header-actions { position: absolute; top: 0; right: 0; width: auto; }
  .world-clocks { display: block; width: 100%; padding-bottom: 6px; }
  .world { width: 49%; margin-bottom: 8px; }
  .world-time { font-size: 21px; }
  .world-offset { font-size: 9px; margin-left: 4px; }
  .main-row { height: auto; min-height: 0; }
  .conditions, .radar { position: relative; width: 100%; height: 500px; }
  .conditions { padding: 10px 15px; }
  .hero { height: 88px; display: table; }
  .temperature { display: table-cell; font-size: 72px; padding: 0; }
  .hero-context { display: table-cell; padding: 0 0 0 14px; }
  .weather-description { display: block; }
  .metric { width: 33.333%; height: 70px; padding-left: 11px; }
  .metric:nth-child(2n+1) { border-left: 1px solid #33474c; padding-left: 11px; }
  .metric:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .metric .unit { font-size: 9px; }
  .pressure-value { font-size: 25px; }
  .history { top: 260px; left: 15px; right: 15px; }
  .radar { height: 320px; margin-top: 10px; }
  .radar.expanded { margin-top: 0; }
  .radar-footer { left: 5px; bottom: 5px; padding: 4px 6px; font-size: 9px; }
  .radar-controls { right: 5px; bottom: 5px; }
  .radar-utc { font-size: 8px; }
  .pill-button { min-width: 45px; padding: 3px 7px; font-size: 10px; }
  .outlook { display: block; padding: 18px; }
  .outlook-summary { display: block; width: 100%; padding: 0 0 18px; }
  .outlook-summary p.outdoor-advice { left: 18px; right: 18px; bottom: 8px; }
  .day-icon { width: 40px; height: 40px; margin-right: 8px; }
  .outlook-summary .day-summary h2 { font-size: 17px; }
  #return-probability { font-size: 18px; }
  .model-tag { display: inline; }
  .outlook-horizon { display: inline; margin-left: 10px; }
  .outlook-detail { display: inline-block; vertical-align: top; }
  .rain-outlook { width: 62%; border: 0; padding: 0 18px 0 0; }
  .daylight-outlook { width: 36%; padding-left: 18px; }
  .wind-outlook { display: none; }
  .page-footer { font-size: 8px; }
  .page-footer button { font-size: 8px; }
  .details { padding: 25px 20px; }
}
@media (min-width: 561px) and (max-width: 849px) {
  .topbar { display: block; position: relative; padding-bottom: 68px; }
  .identity, .home-clock { display: inline-block; vertical-align: middle; }
  .home-clock { padding-right: 0; width: 40%; }
  .header-actions { position: absolute; top: 15px; right: 0; }
  .world-clocks { display: block; position: absolute; bottom: 0; left: 0; width: 100%; }
  .world { width: 24%; }
  .main-row { height: calc(100vh - 320px); }
}