body{
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  background: var(--bg-ffffff, white);
}
p{
  line-height: 22px;
}
textarea:focus, input:focus{
    outline: none;
}
.clear{
  clear:both;
}
#content, #header, #footer{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
  overflow: hidden;
}
#header {
  overflow: visible;
}
#headerc, #footerc{
  background-color: var(--bg-043050, #043050);
  color: var(--tx-ffffff, white);
}
#headerc {
  margin-bottom: 24px;
  padding: 8px 0 16px 0;
}
#header a, #footer a{
  color: var(--tx-ffffff, white);
  text-decoration: none;
}
#header a:hover{
  color: var(--tx-f9bf0f, #f9bf0f);
}
#footer a:hover{
  text-decoration: underline;
}
#logo, #logof{
  font-size: 24px;
  font-family: 'Happy Monkey', cursive;
  text-decoration: none;
  display: block;
  background: url('logo-v1_62x47.svg') 0 10px no-repeat;
  background-size: 40px 30px;
  padding-left: 50px;
  padding-top: 12px;
  padding-bottom: 10px;
}
#header a#logo:hover{
  text-decoration: none;
}
#header #ul{
  margin: 0;
  margin-left: -8px;
  padding: 0;
}
#header #ul li{
  display: block;
  list-style: none;
  padding: 8px;
	float: left;
}
#header #ul div {
  float: left;
  margin: 8px 12px 0 0;
}
#headermenu {
  display: inline-block;
  background-color: var(--bg-033051, #033051);
  margin: 0;
  padding: 0;
}
.menu-label, .hidden-checkbox {
  display: none;
}
#menu-toggle:checked #headermenu {
  display: block;
}

p.dh {
  margin: 0 0 25px 0;
  font-size: 250%;
  text-align: left;
  font-weight: 900;
}
#sds .close {
  position: absolute;
  padding: 4px;
  color: var(--tx-666666, #666);
  font-weight: normal;
  font-size: 20px;
  border: 0;
  background: transparent;
  top: 15px;
  right: 20px;
  cursor: pointer;
}
.remember{
  font-size: 13px;
  width: 300px;
  color: var(--tx-7c8796, #7c8796);
  margin: 0;
}
.remember label{
  vertical-align: middle;
}

*:focus {
    outline: none;
}
#content a#reportLink{
  margin: 3px 0;
  text-align: right;
  float: right;
  padding: 4px 0 5px 0;
  color: var(--tx-ef6666, #ef6666);
  background: url(/img/problem.png?v=2) no-repeat 0 0;
  background-size: 26px 26px;
  padding-left: 30px;
  text-decoration: none;
  font-size: 12px;
}
#content a#reportLink:hover{
  text-decoration: underline;
}
#errorReportText{
  width: 310px;
    float: right;
    margin-top: -40px;
    height: 80px;
    padding: 5px;
}
#errorReportText:focus{
  outline: none;
}
#errorReportContainer button{
  padding: 7px 30px;
    margin: 3px 0;
    float: right;
}
#thankYouMessage{
  text-align: center;
  width: 280px;
  float: right;
  padding: 29px 28px;
  background: var(--bg-f9bf0e, #f9bf0e);
  margin: 20px 0;
}
#footer ul{
  margin: 10px 0 0;
  padding: 0;
}
#footer li{
  list-style: none;
  display: inline-block;
  padding: 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tx-6e8fa8, #6e8fa8);
  color: var(--tx-7c99b1, #7C99B1);
  width: 45%;
  margin-right: 4%;
	font-size: 14px;
}
#ei{
  clear: both;
  float: left;
  width: 100%;
}
#footer #ei li{
  display: block;
  width: 69px;
  text-align: center;
  float: left;
}
#footer h3{
  text-align: center;
  margin-top: 70px;
  clear: both;
  float: left;
  width: 100%;
}
#cp{
  clear: both;
  float: left;
  width: 100%;
}
#cp li {
  line-height: 160%;
}
#cp li a{
  color: var(--tx-e8b602, #E8B602);
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 120%;
}
#cp li a.ali{
  color: var(--tx-6e8fa8, #6e8fa8);
  color: var(--tx-7c99b1, #7c99b1);
  font-weight: normal;
  margin: 0;
  font-size: 100%;
  text-decoration: underline;
}
#footer #cp li{
  display: block;
  width: calc(25% - 22px);
  text-align: center;
  margin: 0;
  float: left;
  white-space: unset;
  padding: 0 10px;
}
#footer a{
  color: var(--tx-8db5d2, #8db5d2);
  color: var(--tx-6e8fa8, #6e8fa8);
  color: var(--tx-7c99b1, #7C99B1);
}
#footer h2{
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-size: 13px;
  background: url('bckg-h2footer.gif') repeat-x center;
}
#footer span{
  padding-right: 20px;
  background-color: var(--bg-043050, #043050);
	font-weight: bold;
	font-size: 16px;
}
#footer{
  padding: 24px;
  margin-top: 60px;
}
#this{
  margin-bottom: 24px;
  color: var(--tx-6e8fa8, #6e8fa8);
}
#this p#logop{
  margin: -10px 0 0;
}
#footer a#logof:hover{
  text-decoration: none;
}
#this p#desc{
  color: var(--tx-ffffff, white);
}
#topcities{
  margin-bottom: 24px;
  overflow: hidden;

  float: left;
  max-width: 48%;
}
#footer #topcities li{
  width: 39%;
  margin-right: 0;
}
#footer #topcities .ttc li{
  width: 32.5%;
  margin-right: 0;
}
#footer #topcities li.thco, #footer #topcities li:nth-child(3n){
  width: 18%;
}
#links{
  margin-bottom: 24px;
  overflow: hidden;
}
#credits{
  clear: both;
  color: var(--tx-6e8fa8, #6e8fa8);
	font-size: 14px;
}

#ssg-p { margin: 10px 0 0; }
#ssg-sun, #newc .pill { position: relative; font: inherit; font-size: 13px; color: var(--tx-c9d6e0, #c9d6e0); background: var(--bg-ffffff-a06, rgba(255,255,255,.06)); border: 1px solid var(--ln-ffffff-a22, rgba(255,255,255,.22)); border-radius: 16px; padding: 5px 13px; cursor: pointer; }
#ssg-sun:hover, #ssg-sun:focus-visible, #newc .pill:hover, #newc .pill:focus-visible { color: var(--tx-ffffff, #fff); border-color: var(--ln-ffffff-a50, rgba(255,255,255,.5)); background: var(--bg-ffffff-a10, rgba(255,255,255,.1)); }
#ssg-sun:focus { outline: none; box-shadow: none; -webkit-tap-highlight-color: transparent; }
#ssg-sun:focus-visible, #newc .pill:focus-visible { border-color: var(--ln-ffffff-a75, rgba(255,255,255,.75)); }

#footer #newc { clear: both; margin: 0 30px 24px; font-size: 14px; line-height: 1.9; color: var(--tx-6e8fa8, #6e8fa8); }
#newc .pill { display: inline-block; line-height: 1.45; text-decoration: none; margin-right: 2px; }
#newc .cl { font-style: normal; }
#footer #newc .cl a { font-weight: 400; }
@media only screen and (min-width: 821px) { #footer #newc { margin: 0 49px 24px; } }
@media only screen and (min-width: 1029px) { #footer #newc { float: left; clear: none; width: 681px; margin: 0 0 24px 49px; } }

#newc.pool .pill, #newc.pool .pill:hover { cursor: default; color: var(--tx-c9d6e0, #c9d6e0); border-color: var(--ln-ffffff-a22, rgba(255,255,255,.22)); background: var(--bg-ffffff-a06, rgba(255,255,255,.06)); }

#newc .newpub { margin: 15px 0 0; }
#newc.solo .newpub { margin-top: 0; }
#newc .pill img { display: inline-block; width: 16px; height: 16px; margin: 0 5px 0 0; vertical-align: -3px; }
#newc .newpub a { white-space: nowrap; }
#newc .newpub img { display: inline-block; width: 16px; height: 16px; margin: 0 5px 0 0; vertical-align: -3px; }

@media only screen and (min-width: 1029px) { #footer #newc.solo { clear: both; margin-left: 299px; } }
@media only screen and (min-width: 1029px) { #footer #newc.pool { float: none; clear: both; width: 681px; margin: 0 0 24px 299px; } }

#footer #newc, #footer #newc.pool, #footer #newc.solo { margin-top: 40px; }
#footer .ssg-new { position: absolute; top: -7px; right: 12px; padding: 1px 4px 0; border-radius: 3px; background: var(--bg-e5484d, #e5484d); color: var(--tx-ffffff, #fff); font-size: 8px; font-weight: 700; letter-spacing: .05em; line-height: 1.3; }
#copy{
  color: var(--tx-6e8fa8, #6e8fa8);
  color: var(--tx-7c99b1, #7c99b1);
	font-size: 14px;
}
#credits img{
  vertical-align: middle;
}
#credits p#by{
  text-align: right;
  margin-top: 10px;
}

#content a{
  color: var(--tx-6e8fa8, #6e8fa8);
}

#single{
  max-width: 650px;
}
#single.api {
  max-width: 650px;
  float: left;
  margin-left: 20px;
}
#single p{
  line-height: 150%;
}
#single h2{
  margin-top: 40px;
}
#single.api h2, #single.api h3 {
  margin-top: 0;
  padding-top: 40px;
}

#homesearchc{

  background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
  padding: 55px 0;
  margin-top: -24px;
  color: var(--tx-ffffff, white);
  text-shadow: 0px 1px 2px var(--sh-000000, #000000);
  background: var(--bg-d1647c, #D1647C) url('/img/home5.webp')no-repeat 0 50%; background-size: cover;
}
#homesearch{
  padding: 0 24px;
  margin: 0 auto;
  max-width: 980px;
  height: 190px;
  text-align: center;
}
#homesearch h1{
  font-size: 20px;
  text-transform: uppercase;
}
#homesearch p#caption{
  font-size: 18px;
  margin-bottom: 30px;
}
#homesearch input {
  border: 0;
  border-radius: 5px;
}
#homesearch input[type='text']{
  text-align: center;
  margin-bottom: 8px;
  padding: 15px 10px 15px 20px;
  width: calc(100% - 30px);
  color: var(--tx-a1aab9, #a1aab9);
  color: var(--tx-66778a, #66778A);
  height: 30px;
}
#homesearch input[type='submit']{
  background-color: var(--bg-f9bf0f, #f9bf0f);
  padding: 18px;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--tx-ffffff, #fff);
  width: 100%;
  -webkit-appearance: none;
}
#homesearch ::-webkit-input-placeholder {
    color:    var(--tx-98aab8, #98aab8);
}
#homesearch :-moz-placeholder {
    color:    var(--tx-98aab8, #98aab8);
    opacity:  1;
}
#homesearch ::-moz-placeholder {
    color:    var(--tx-98aab8, #98aab8);
    opacity:  1;
}
#homesearch :-ms-input-placeholder {
    color:    var(--tx-98aab8, #98aab8);
}
#homesearch #photocredits{
  text-shadow: none;
  opacity: 0.8;
  font-size: 85%;
  margin-top: 70px;

}
#homesearch a{
  color: var(--tx-ffffff, white);
  text-decoration: none;
}
#homesearch a:hover{
  text-decoration: underline;
}
#header #search, #header #search2 {
  margin-top: -8px;
}
.subscribe {
  width: 300px;
}
#header #search input[type="text"], #header #search2 input[type="text"] {
  padding: 4px 15px 3px;
  height: 30px;
  border: none;
  border-radius: 3px 0 0 3px;
  margin-right: 8px;
}
#header #search input[type="submit"], #header #search2 input[type="submit"] {
  background: var(--bg-f9bf0f, #f9bf0f) url('search.gif') no-repeat;
  background-position: top 12px left 10px;
  background-size: 12px 12px;
  border-radius: 0 3px 3px 0;
  text-align: center;
  margin-left: -8px;
  width: auto;
  max-width: 102px;
  color: var(--tx-ffffff, #fff);
  padding: 0 12px 0 30px;
  height: 37px;
  border: none;
  -webkit-appearance: none; -moz-appearance: none;
  display: block;
  float: right;
}
.subscribe input[type="text"] {
  padding: 0 15px;
  height: 30px;
  border-radius: 3px 0 0 3px;
  margin-right: 0px;
  width: 172px;
  border: 1px solid var(--ln-dddddd, #ddd);
  border-right: none;
}
.subscribe input[type="submit"] {
  background-color: var(--bg-f9bf0f, #f9bf0f);
  border-radius: 0 3px 3px 0;
  text-align: center;
  margin-left: 0;
  width: 97px;
  color: var(--tx-ffffff, #fff);
  padding: 0 12px;
  height: 32px;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  float: right;
}

#intro{
  color: var(--tx-98aab8, #98aab8);
  color: var(--tx-61798f, #61798F);
  margin: 40px 0;
  line-height: 160%;
}
#sun-graph {
  display: block;
  margin: 30px auto;
  width: 100%;
  max-width: 960px;
}
#intro h2 {
  margin: 40px 0 10px 0;
  text-transform: uppercase;
  color: var(--tx-257fc2, #257fc2);
  color: var(--tx-2378b8, #2378B8);
  font-size: 15px;
}
#intro p{
  line-height: 27px
}
#about p:first-child {
  font-weight: bold;
  font-size: 30px;
  line-height: 160%;
  margin-bottom: 0;
}
#about p:nth-child(2){
  margin-bottom: 30px;
}

#whatfor{
  padding: 20px 0 0 0;
  overflow: hidden;
}
#whatfor h2 {
  color: var(--tx-005fa0, #005fa0);
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  border-top: 1px solid var(--ln-eef2f5, #eef2f5);
  padding: 60px 0 30px 0;
}
.use{
  min-height: 180px;
  padding: 16px;
  text-align: center;
}
.use h3{
  color: var(--tx-257fc2, #257fc2);
  color: var(--tx-2378b8, #2378B8);
  font-size: 13px;
  text-transform: uppercase;
}
.use p{
  color: var(--tx-98aab8, #98aab8);
  color: var(--tx-61798f, #61798f);
}

.offerimg{
  display: block; float: left; margin-bottom: 40px; padding: 20px 30px 0;
  clear: left;
}
.offertxt{
  float: left; width: 540px
}
.offertxt h3{
  margin: 30px 0 15px 0;
}

.moon > span{
    display: block;
    width: 50%;
    text-align: center;
    float: left;
    padding-top: 10px;
}
.moon span.phase{
    width: 100%;
    text-align: center;
    padding-top: 18px;
}
#today img.mriseimg, #tomorrow img.mriseimg, #today img.msetimg, #tomorrow img.msetimg{
  vertical-align: middle;
  margin-bottom: 1px;
  margin-right: 4px;
}

#states, #cities{
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}
#states, #cities{
  columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
}

#states {
  margin-top: 35px;
}

#states li, #cities li{
  margin: 5px 0;
  padding: 0;
}

.lkind {
  font-size: 0.72em;
  font-weight: 400;
  color: var(--tx-6b7a88, #6b7a88);
  white-space: nowrap;
}
#states li{
  padding: 3px 0;
}

.country #admins{
  margin: 0; padding: 0;
}
#admins li{
  list-style: none; display: block; position: relative; break-inside: avoid;
  margin: 0; padding: 0;
    width: 33%;
    float: left;
}
#admins li a{
  padding: 5px 0;
  display: block;
}

#admins li:nth-child(3n+1){
  clear: left;
}
.country #content > h2{
  padding-top: 25px;
}
.country #content > h2.clear {
  padding-top: 45px;
}
ul li a{
  color: var(--tx-98aab8, #98aab8);
  text-decoration: none;
}
#content ul li a:hover{
  color: var(--tx-cf2b23, #cf2b23);
}

#calendartitle span{
  display: block;
  font-size: 80%;
}
#calendarthings{
  max-width: 650px;
}
#calendarthingslarge{
  max-width: 980px;
}

#calendarthingslarge:not(.withsec){
  max-width: 650px;
}

#calendarthingslarge.withsec #calendar .progression.with-daylength{
  display: block;
}

#calendarfilters input[type='text'], #calendarfilters input[type='month']{
  width: 180px;

}
#calendarfilters input[type='submit']{
  width: 90px;
}
#ws{
  margin: 15px 0 10px;
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 4px;
  background: var(--bg-f8f8f1, #F8F8F1);
}
#ws label{
  vertical-align: top;
}

#showlbl{
  display: inline-block;
  vertical-align: top;
  margin: 4px 12px 4px 0;
}
#secbox, #daylengthbox, #daylengthprogressionbox, #moonphasebox, #lightbox, #noonbox{
  display: inline-block;
  vertical-align: top;
  margin: 4px 18px 4px 0;
  white-space: nowrap;
}

#calendarfilters{
  margin-bottom: 8px;
}

#calendarfilters #calplace {
  margin-bottom: 8px;
}

#calendarfilters #month {}

#calendarfilters #year {}

.ss-calc-country{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--ln-e3e8ee, #e3e8ee);
  border-radius: 8px;
  background: var(--bg-f6f8fb, #f6f8fb);
  color: var(--tx-1f2a36, #1f2a36);
  font-size: 15px;
  line-height: 1.5;
}
.ss-calc-country svg{
  flex: 0 0 18px;
  margin-top: 3px;
  color: var(--tx-5a6672, #5a6672);
}
.ss-calc-country p{
  margin: 0;
}

#calendar {
  border-collapse: collapse;
  margin-bottom: 24px;
  width: 100%;
}

#calendar th {
  border-top: 1px solid var(--ln-cccccc, #ccc);
}

#calendar td.day {
  border: 1px solid var(--ln-cccccc, #ccc);
  padding: 0;
}
#calendar td.today {
  background-color: var(--bg-ffffb4, rgb(255, 255, 180));
  border: 1px solid var(--ln-cccccc, #ccc);
  padding: 0;
}

@media only screen and (min-width: 480px) {
  table#calendar { height: 1px; }
  table#calendar tr { height: 100%; }
  table#calendar td.day, table#calendar td.today { vertical-align: top; height: 100%; }
  table#calendar td .dc { display: flex; flex-direction: column; height: 100%; }
  table#calendar td .dc .sunset { margin-top: auto; }
}
#calendar .today .number {
  background-color: var(--bg-dfedf7, #DFEDF7);
}

#calendar .number {
  display: block;
  padding: 6px 0;
  font-weight: bold;
  text-align: center;
  background-color: var(--bg-d8e0e6, #d8e0e6);
  color: var(--tx-4d738f, #4d738f);
}

#calendar .sunrise {
  display: block;
  margin-top: 8px;
  padding-bottom: 40px;
  padding-left: 36px;
  font-size: 12px;
  background: url('sunrise-v1_24x17.svg') no-repeat 6px 0;
  background-size: 24px 17px;
}
#calendarthingslarge #calendar .sunrise {
    margin-top: 13px;
    padding-left: 42px;
    background: url(sunrise-v1_24x17.svg) no-repeat 12px -1px;
    background-size: 24px 17px;
}
#calendarthingslarge.withdaylength #calendar .sunrise {
    font-weight: bold;
}

#calendar .sunset {
  display: block;
  margin-bottom: 6px;
  padding-bottom: 2px;
  padding-left: 36px;
  font-size: 12px;
  background: url('sunset-v1_24x17RED.svg') no-repeat 6px 0;
  background-size: 24px 17px;
}
#calendarthingslarge #calendar .sunset {
  margin-bottom: 13px;
  padding-left: 42px;
  background: url('sunset-v1_24x17RED.svg') no-repeat 12px -1px;
  background-size: 24px 17px;
}
#calendarthingslarge.withdaylength #calendar .sunset {
    font-weight: bold;
}

#calendar .daylength{
  display: block;
    margin-bottom: 20px;
    padding-bottom: 2px;
    padding-left: 36px;
    font-size: 12px;
    background: url(img/stopwatch.svg?v=2) no-repeat 6px 0;
    background-size: 24px 16px;
    margin-top: -20px;
    color: var(--tx-999999, #999);
}
#calendarthingslarge #calendar .daylength{
  display: block;

  padding-left: 40px;
  background: url(img/stopwatch.svg?v=2) no-repeat 12px 0;
  background-size: 24px 16px;
}

#location-box {
  float: left;
  width: 300px;
  position: relative;
}

.pagination {
  margin: 30px 0 40px 0;
  float: left;
  width: 100%;
}
.pagination ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination li{
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
}
.pagination li a{
  padding: 4px 10px;
  background: var(--bg-eeeeee, #eee);
  border-radius: 2px;
  margin: 4px;
}
.pagination li.current{
  padding: 4px 10px;
  background: var(--bg-eeeeee, #eee);
  border-radius: 2px;
  margin: -4px 4px;
  background: var(--bg-f1bf43, #f1bf43);
  color: var(--tx-ffffff, white);
}

@media only screen and (max-width: 479px) {

  #calendar table,
  #calendar thead,
  #calendar tbody,
  #calendar th,
  #calendar td,
  #calendar tr {
    display: block;
  }

  #calendar thead {
    display: none;
  }

  #calendar tr {
    border: 1px solid var(--ln-cccccc, #ccc);
  }

  #calendar td {
    border: none;
    border-bottom: 1px solid var(--ln-eeeeee, #eee);
    position: relative;
  }

  #calendar td:before {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    white-space: nowrap;
    color: var(--tx-4d738f, #4d738f);
  }

  #calendar td[colspan] {
    display: none;
  }

  #calendar .number {
    text-align: left;
    padding-left: 8px;
  }

  #calendar .sunrise {
    padding-bottom: 8px;
    width: 69px;
  }

  #calendar .sunset {
    position: absolute;
    right: 8px;
    top: 37px;
    top: 44px;
  }

  #calendarthingslarge #calendar .daylength{
    margin-top: -47px !important;
    margin-bottom: 0 !important;
  }

  table#calendar .daylength::before {
    content: "Day length: ";
  }

  #calendar td.day:before,
  #calendar td.today:before { content: attr(data-d); }

}

#calendarexplanation{
  margin-bottom: 24px;
}

#sidebar {
  max-width: 300px;
}

#sidebar img {
  height: auto;
  width: 100%;
}

#contactform {
  float: left;
  width: 600px;
}
#contactform textarea {
  width: 508px;
}
#contactform input[type="text"], #contactform input[type="email"] {
  border: 1px solid var(--ln-edeceb, #edeceb);
  margin-bottom: 10px;
  padding: 12px;
  font-size: 13px;
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  margin-right: 15px;
  float: left;
  background: var(--bg-fcfcfc, #fcfcfc);
  outline: none;
  padding: 10px;
  width: 235px;
}
#submissionform input[type="text"], #submissionform input[type="email"]{
  border: 1px solid var(--ln-edeceb, #edeceb);
  margin-bottom: 0;
  padding: 12px;
  font-size: 13px;
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  margin-right: 15px;
  background: var(--bg-fcfcfc, #fcfcfc);
  outline: none;
  padding: 10px;
  width: 265px;
  display: block;
}
#contactform textarea{
  border: 1px solid var(--ln-edeceb, #edeceb);
  margin-bottom: 10px;
  padding: 10px;
  font-size: 13px;
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  background: var(--bg-fcfcfc, #fcfcfc);
  outline: none;
  max-width: 92%;
  min-height: 100px;
  resize: vertical;
}
#contactform .btn{
  background: var(--bg-ffc31a, #ffc31a);
  background: var(--bg-e3ab00, #e3ab00);
  color: var(--tx-ffffff, #fff);
  text-transform: uppercase;
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  font-size: 15px;
  padding: 16px 32px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    box-shadow: 0 0 5px var(--sh-51cbee, rgba(81, 203, 238, 1));
    border: 1px solid var(--ln-51cbee, rgba(81, 203, 238, 1));
}

#twodays {
  float: left;
  width: 100%;
  max-width: 624px;
  margin-bottom: 35px;
}
#locationfacts {
  float: right;
  width: 100%;
  max-width: 336px;
  color: var(--tx-ffffff, #fff);
  margin-bottom: 40px;
  margin-top: 19px;
  border-radius: 3px;
  text-align: center;
}
#locationfacts img {
  width: 100%;
}

#locationfacts .map { position: relative; }
#locationfacts .map-explore { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 3px; background: var(--bg-ffffff, #fff); color: var(--tx-043050, #043050); font: inherit; font-size: 13px; font-weight: bold; cursor: pointer; box-shadow: 0 1px 4px var(--sh-000000-a30, rgba(0,0,0,.3)); white-space: nowrap; }
#locationfacts .map-explore:hover { background: var(--bg-eef3f8, #eef3f8); }
#locationfacts .map-explore:disabled { opacity: .7; cursor: progress; }

@media (hover: hover) and (pointer: fine) {
  #locationfacts .map-explore { opacity: 0; transition: opacity .15s; }
  #locationfacts .map:hover .map-explore, #locationfacts .map-explore:focus-visible { opacity: 1; }
}
#locationfacts .map-live { width: 100%; max-width: 376px; margin: 0 auto; border-radius: 3px; isolation: isolate; }
#locationfacts p#currenttime {
  font-size: 120%;
  margin: 0;
  padding: 10px 0;
  text-align: center;
}
#locationfacts ul {
  list-style: none;
  padding: 20px;
  margin: 0;
  background-color: var(--bg-043050, #043050);
}
#locationfacts li {
  color: var(--tx-6e8fa8, #6e8fa8);
  margin: 5px 0;
  font-size: 90%;
}
#locationfacts strong{
  color: var(--tx-ffffff, white);
}

h2.cont{
  margin-top: 40px;
  padding-bottom: 8px;
  border-bottom: 1px solid;
}
body#countries h1{
  margin-bottom: 0;
}
.countries {
  padding-left: 0;
}
.countries li {
  list-style-type: none;
  margin: 10px 0;
  float: left;
  width: 245px;
  padding: 10px 0;
}
.countries .flag {
  background-position: 0 3px;
}

.countries .ssg-new { display: inline-block; margin-left: 6px; padding: 1px 4px 0; border-radius: 3px; background: var(--bg-e5484d, #e5484d); color: var(--tx-ffffff, #fff); font-size: 9px; font-weight: 700; letter-spacing: .05em; line-height: 1.3; vertical-align: 2px; }

.countries .ssg-until { margin-left: 6px; color: var(--tx-aaaaaa, #aaa); font-size: 11px; white-space: nowrap; }
#requestcountry {
  clear: both;
  margin: 40px 0 20px 0;
  float: left;
}
#today, #tomorrow {
  clear: both;
  width: 100%;
  max-width: 600px;
  float: left;
  padding-top: 20px;
}
#today img, #tomorrow img {
  margin-bottom: 10px;
}
#today .sunrise, #today .sunset, #tomorrow .sunrise, #tomorrow .sunset {
  width: 180px;
  text-align: center;
  margin: 0 auto;
  padding-top: 30px;
}
#today p, #tomorrow p {
  margin: 10px 0 15px 3px;
}
#twodays .time{
  display: block;
  font-size: 140%;
	line-height: 130%;
}
.sunset .time{
  color: var(--tx-ce2c27, #CE2C27);
}
.sunrise .time{
  color: var(--tx-cfa22b, #CFA22B);
}
#twodays .twilight{
  color: var(--tx-98aab8, #98aab8);
}

#twodays .twilight .tooltip { margin-left: .3em; }
#twodays .twilight .info-btn { color: inherit; vertical-align: baseline; }

#twodays .twilight.twl { font-size: 14px; }
#twodays .twl .tooltip { margin-left: 0; cursor: help; }
#twodays .twl .twl-h { white-space: nowrap; }
#twodays .twl .tooltiptext { white-space: normal; width: 240px; margin-left: -120px; font-size: 12.5px; line-height: 1.4; }
#twodays .twl .dot { margin: 0 .3em; }
#twodays .twl .info-btn { margin-left: .3em; }

#twodays .twl-wrap .twl-h { display: table; margin: 0 auto; }
#twodays .twl-wrap .dot { display: none; }

#twodays .twl-fit:not(.twl-wrap) .twl-h:first-child .tooltiptext { left: 0; margin-left: 0; }
#twodays .twl-fit:not(.twl-wrap) .twl-h:last-child .tooltiptext { left: auto; right: 0; margin-left: 0; }
@media (hover: hover) and (pointer: fine) { #twodays .twl .info-btn { display: none; } }

#twodays .gbt { display: flex; justify-content: center; margin: 10px auto 0; color: var(--tx-55636f, #55636f); }
#twodays .gbt .gbt-c { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; position: relative; padding: 14px 3px 0; cursor: help; }
#twodays .gbt .gbt-c::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--bg-dfe5ec, #dfe5ec); }
#twodays .gbt .gbt-c:first-child::before { left: 50%; }
#twodays .gbt .gbt-c:last-child::before { right: 50%; }
#twodays .gbt .gbt-c:only-child::before { display: none; }
#twodays .gbt .gbt-c b { font-weight: 600; font-size: 12.5px; white-space: nowrap; color: var(--tx-4a5763, #4a5763); }
#twodays .gbt .gbt-c b i { position: absolute; top: 1px; left: 50%; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sh-ffffff, #ffffff); }
#twodays .gbt .gbt-c small { font-size: 11px; line-height: 1.2; margin-top: 2px; text-align: center; color: var(--tx-8a96a2, #8a96a2); }

#twodays .sunrise:has(> .gbv), #twodays .sunset:has(> .gbv) { display: grid; column-gap: 10px; align-items: center; }
#twodays .sunrise:has(> .gbv) { grid-template-columns: auto 1fr; }
#twodays .sunset:has(> .gbv) { grid-template-columns: 1fr auto; }
#twodays .sunrise:has(> .gbv) > * { grid-column: 2; }
#twodays .sunset:has(> .gbv) > * { grid-column: 1; }

#twodays .sunrise:has(> .gbv) > img, #twodays .sunset:has(> .gbv) > img { justify-self: center; }
#twodays .sunrise > .gbv { grid-column: 1; grid-row: 1 / span 6; }
#twodays .sunset > .gbv { grid-column: 2; grid-row: 1 / span 6; }
#twodays .gbv { display: flex; flex-direction: column; position: relative; color: var(--tx-55636f, #55636f); }
#twodays .gbv::before { content: ""; position: absolute; top: 18px; bottom: 18px; width: 2px; background: var(--bg-dfe5ec, #dfe5ec); }
#twodays .sunrise .gbv::before { right: 4px; }
#twodays .sunset .gbv::before { left: 4px; }
#twodays .gbv:has(> .gbt-c:only-child)::before { display: none; }
#twodays .gbv .gbt-c { display: flex; flex-direction: column; position: relative; padding: 5px 0; line-height: 1.2; cursor: help; }
#twodays .sunrise .gbv .gbt-c { align-items: flex-end; text-align: right; padding-right: 18px; }
#twodays .sunset .gbv .gbt-c { align-items: flex-start; text-align: left; padding-left: 18px; }
#twodays .gbv .gbt-c b { font-weight: 600; font-size: 13px; white-space: nowrap; color: var(--tx-4a5763, #4a5763); }
#twodays .gbv .gbt-c small { font-size: 11px; color: var(--tx-8a96a2, #8a96a2); }
#twodays .gbv .gbt-c b i { position: absolute; top: 50%; margin-top: -5px; width: 10px; height: 10px; border-radius: 50%; z-index: 1; box-shadow: 0 0 0 2px var(--sh-ffffff, #ffffff); }
#twodays .sunrise .gbv .gbt-c b i { right: 0; }
#twodays .sunset .gbv .gbt-c b i { left: 0; }
#twodays .gbv .gbt-c .tooltiptext { width: 230px; font-size: 12.5px; line-height: 1.4; white-space: normal; text-align: left; margin-left: 0; }
#twodays .sunrise .gbv .gbt-c .tooltiptext { left: 0; }
#twodays .sunset .gbv .gbt-c .tooltiptext { left: auto; right: 0; }
#twodays .gbv .gbt-c:focus { outline: none; }
#twodays .gbv .gbt-c:focus-visible { outline: 2px solid var(--ln-4d738f, #4d738f); outline-offset: 2px; border-radius: 4px; }

#twodays .tans { clear: both; padding: 16px 4px 2px; margin-top: 6px; border-top: 1px solid var(--ln-e3e8ee, #e3e8ee); text-align: left; font-size: 15px; line-height: 1.55; color: var(--tx-3b4855, #3b4855); }
#twodays .tans p { margin: 0 0 10px; }
#twodays .tans b { font-weight: 700; color: var(--tx-1d2b38, #1d2b38); }
#twodays .tans ul { margin: 0 0 10px; padding-left: 20px; }
#twodays .tans h3 { font-size: 16px; font-weight: 700; margin: 14px 0 4px; color: var(--tx-1d2b38, #1d2b38); }
#twodays .tans h3:first-child { margin-top: 0; }

.tans-more summary { cursor: pointer; color: var(--tx-005fa0, #005fa0); font-weight: 600; margin: 2px 0 10px; }
.tans-line .tans-more summary { font-weight: 400; color: var(--tx-3b4855, #3b4855); }
.tans-line .tans-more summary::after { content: " · More"; color: var(--tx-005fa0, #005fa0); font-weight: 600; }
.tans-line .tans-more[open] summary::after { content: ""; }
.tans-intro { margin-top: -15px; font-size: 16px; line-height: 1.55; color: var(--tx-3b4855, #3b4855); }
.tans-intro p { margin: 0 0 8px; }
.tans-intro b { font-weight: 700; color: var(--tx-1d2b38, #1d2b38); }
.tans-intro h3 { font-size: 16px; font-weight: 700; margin: 12px 0 4px; color: var(--tx-1d2b38, #1d2b38); }
.tans-intro ul { margin: 0 0 10px; padding-left: 20px; }
@media only screen and (max-width: 640px) { .tans-intro { margin-top: 4px; } }

.tans-x > summary { list-style: none; cursor: pointer; }
.tans-x > summary::-webkit-details-marker { display: none; }
.tans-x[open] > summary { margin-bottom: 10px; }
.tans-ml { display: inline-flex; align-items: center; gap: 5px; color: var(--tx-005fa0, #005fa0); font-weight: 600; white-space: nowrap; }
.tans-x > summary:hover .tans-ml > span { text-decoration: underline; text-underline-offset: 3px; }
.tans-ml svg { width: 18px; height: 18px; padding: 2px; box-sizing: border-box; border-radius: 50%; background: var(--bg-e6eef7, #e6eef7); transition: transform .2s ease; }
.tans-x[open] > summary .tans-ml svg { transform: rotate(180deg); }
.tans-ml .tans-c { display: none; }
.tans-x[open] > summary .tans-o { display: none; }
.tans-x[open] > summary .tans-c { display: inline; }
.tans-x > summary:focus-visible { outline: 2px solid var(--ln-4d738f, #4d738f); outline-offset: 3px; border-radius: 4px; }

.tans-b1 .tans-ml { color: var(--tx-5a6672, #5a6672); font-weight: 600; }
.tans-b1 .tans-ml svg { background: var(--bg-eef1f4, #eef1f4); }
.tans-b2 .tans-ml { color: var(--tx-31414f, #31414f); font-weight: 600; font-size: 14px; padding: 2px 8px 2px 12px; border: 1px solid var(--ln-c9d2db, #c9d2db); border-radius: 999px; margin-left: 4px; }
.tans-b2 .tans-ml svg { background: none; }
.tans-b2 .tans-x > summary:hover .tans-ml { border-color: var(--ln-8a96a2, #8a96a2); }
.tans-b2 .tans-x > summary:hover .tans-ml > span { text-decoration: none; }
.tans-b3 .tans-ml { color: var(--tx-31414f, #31414f); font-weight: 600; font-size: 14px; padding: 3px 8px 3px 12px; background: var(--bg-eef1f4, #eef1f4); border-radius: 999px; margin-left: 4px; }
.tans-b3 .tans-ml svg { background: none; }
.tans-b3 .tans-x > summary:hover .tans-ml { background: var(--bg-e2e7ec, #e2e7ec); }
.tans-b3 .tans-x > summary:hover .tans-ml > span { text-decoration: none; }
.tans-b4 .tans-ml { color: var(--tx-b07d12, #b07d12); font-weight: 700; }
.tans-b4 .tans-ml svg { background: var(--bg-fbf3df, #fbf3df); }
.tans-b5 .tans-ml > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tans-b5 .tans-ml svg { width: 22px; height: 22px; padding: 3px; color: var(--tx-31414f, #31414f); background: none; border: 1px solid var(--ln-c9d2db, #c9d2db); }
.tans-b6 .tans-ml { color: var(--tx-31414f, #31414f); font-weight: 700; flex-direction: row-reverse; }
.tans-b6 .tans-ml svg { display: none; }
.tans-b6 .tans-ml::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; background: var(--bg-31414f, #31414f); color: var(--tx-ffffff, #fff); font-weight: 700; font-size: 13px; line-height: 1; }
.tans-b6 .tans-x[open] > summary .tans-ml::before { content: "\2212"; }

.tans-panel { max-width: 720px; margin-top: 6px; font-size: 15.5px; line-height: 1.6; }
.tans-panel h2 { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 18px 0 4px; color: var(--tx-005fa0, #005fa0); }
.tans-panel h2:first-child { margin-top: 4px; }
.tans-panel p { margin: 0 0 8px; }
.tans-panel ul { margin: 2px 0 10px; padding-left: 18px; columns: 2; column-gap: 28px; }
.tans-panel li { margin: 0 0 3px; break-inside: avoid; }
.tans-panel b { font-weight: 700; color: var(--tx-1d2b38, #1d2b38); }
@media only screen and (max-width: 640px) { .tans-panel ul { columns: 1; } }

.tans-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 5px; padding: 0; vertical-align: 1px; border: 1px solid var(--ln-9aa7b3, #9aa7b3); border-radius: 50%; background: none; color: var(--tx-5a6672, #5a6672); font: italic 700 11px/1 Georgia, serif; cursor: help; }
.tans-tip::after { content: attr(data-tip); position: absolute; z-index: 5; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 230px; padding: 7px 10px; border-radius: 3px; background: var(--bg-043051, #043051); color: var(--tx-ffffff, #fff); box-shadow: 0 3px 10px var(--sh-000000-a18, rgba(0,0,0,.18)); font: normal 400 13px/1.4 'Lato', 'Lato Fallback', sans-serif; text-align: left; visibility: hidden; opacity: 0; transition: opacity .15s; pointer-events: none; }
.tans-tip:hover::after, .tans-tip:focus::after { visibility: visible; opacity: 1; }
.tans-tip:focus { outline: none; }
.tans-tip:focus-visible { outline: 2px solid var(--ln-4d738f, #4d738f); outline-offset: 2px; }

@supports (interpolate-size: allow-keywords) {
  .tans-x { interpolate-size: allow-keywords; }
  .tans-x::details-content { height: 0; overflow: clip; transition: height .25s ease, content-visibility .25s allow-discrete; }
  .tans-x[open]::details-content { height: auto; }
}
.tans-big { font-size: 20px; line-height: 1.4; margin: 0 0 4px; color: var(--tx-1d2b38, #1d2b38); }
.tans-i2 .tans-x > summary { font-size: 14.5px; color: var(--tx-5a6672, #5a6672); }
.tans-fr { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; vertical-align: middle; }
.tans-f { white-space: nowrap; font-size: 15px; }
.tans-f i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.tans-f .gbt-t { background: var(--bg-3e66a3, #3e66a3); }
.tans-f .gbt-g { background: var(--bg-f6a23c, #f6a23c); }
.tans-f .gbt-n { background: var(--bg-1f3a64, #1f3a64); }
#twodays .tans li { margin: 2px 0; }
#twodays .tans a { color: inherit; text-decoration: underline; text-decoration-color: var(--ln-9aa7b3, #9aa7b3); text-underline-offset: 2px; }
#twodays .gbt-n { background: var(--bg-1f3a64, #1f3a64); }
#twodays .gbt-t { background: var(--bg-3e66a3, #3e66a3); }
#twodays .gbt-b { background: var(--bg-6f8fbf, #6f8fbf); }
#twodays .gbt-g { background: var(--bg-f6a23c, #f6a23c); }
#twodays .gbt .gbt-c .tooltiptext { width: 230px; margin-left: -115px; font-size: 12.5px; line-height: 1.4; white-space: normal; text-align: left; }
#twodays .gbt .gbt-c:first-child .tooltiptext { left: 0; margin-left: 0; }
#twodays .gbt .gbt-c:last-child .tooltiptext { left: auto; right: 0; margin-left: 0; }
#twodays .gbt .gbt-c:focus { outline: none; }
#twodays .gbt .gbt-c:focus-visible { outline: 2px solid var(--ln-4d738f, #4d738f); outline-offset: 2px; border-radius: 4px; }

@media only screen and (min-width: 701px) {
  #content h1:first-child{
    margin-top: 0;
  }
}

@media only screen and (max-width: 700px) {
  #twodays .twl .twl-h { display: table; margin: 0 auto; }
  #twodays .twl .dot { display: none; }
  #twodays .twl .tooltiptext { width: 200px; margin-left: -100px; }

  #twodays .sunrise .twl .tooltiptext { left: 0; margin-left: 0; }
  #twodays .sunset .twl .tooltiptext { left: auto; right: 0; margin-left: 0; }

  #twodays .sunrise:has(> .gbv), #twodays .sunset:has(> .gbv) { display: block; }
  #twodays .gbv { margin-top: 6px; }
  #twodays .sunrise .gbv { align-items: flex-end; margin-right: 12px; }
  #twodays .sunset .gbv { align-items: flex-start; margin-left: 12px; }
  #twodays .gbv .gbt-c b { font-size: 11.5px; }
  #twodays .gbv .gbt-c small { font-size: 10.5px; }
  #twodays .gbv .gbt-c .tooltiptext { width: 190px; }
  #twodays .gbt { flex-wrap: wrap; row-gap: 7px; }
  #twodays .gbt .gbt-c { flex: 0 0 50%; max-width: 50%; padding: 0 1px; box-sizing: border-box; }
  #twodays .gbt .gbt-c::before { display: none; }
  #twodays .gbt .gbt-c b { font-size: 11px; }
  #twodays .gbt .gbt-c b i { position: static; display: inline-block; width: 7px; height: 7px; margin: 0 3px 0 0; box-shadow: none; vertical-align: 0; }
  #twodays .gbt .gbt-c small { font-size: 10.5px; }
  #twodays .gbt .gbt-c .tooltiptext { width: 190px; margin-left: -95px; }
  #twodays .sunrise .gbt .gbt-c:nth-child(odd) .tooltiptext { left: 0; margin-left: 0; }
  #twodays .sunset .gbt .gbt-c:nth-child(even) .tooltiptext { left: auto; right: 0; margin-left: 0; }
}
#twodays .twilight .info-icon { width: .82em; height: .82em; vertical-align: -.08em; }
#today p.daylength, #tomorrow p.daylength {
  clear: both;
  text-align: center;
  padding-top:15px;
  margin: 0 0 5px 0;
}
#today p.sunsetpred, #tomorrow p.sunsetpred {
  color: var(--tx-98aab8, #98aab8);
  margin: 0;
  text-align: center;
}
#twodays .date {
  border-top: 1px solid var(--ln-b6ccdd, #b6ccdd);
  padding-top: 20px;
}
#twodays .data {
  float: left;
  width: 100%;
  max-width:600px;
}
#twodays .extra{
  background: var(--bg-f4f8fb, #f4f8fb);
  border-radius: 3px;
  margin: 20px 0 5px 0;
  padding: 5px 12px 20px 012px;
  clear: both;
  float: left;
  width: calc(100% - 24px);
}
#twodays h2{
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  float: left;
  margin: 8px 10px 0 0;
	color: var(--tx-ffffff, white);
  background: var(--bg-005fa0, #005fa0);
  border-radius: 3px;
  padding: 3px 10px;
}
#twodays .span{
	font-size: 13px;
	color: var(--tx-aaaaaa, #aaa);
}

table#month {
  margin-bottom: 40px;
  margin-top: 24px;
  width: 100%;
  border: 1px solid var(--ln-eeeeee, #eeeeee);
  clear: both;
	font-size: 14px;
  position: relative;
}

table#month .headers th {
  padding: 9px 0;
  font-weight: bold;
  background-color: var(--bg-ffffff, #fff);
  color: var(--tx-005fa0, #005fa0);
  color: var(--tx-ffffff, #fff);
  background-color: var(--bg-005fa0, #005fa0);
}

@media only screen and (min-width: 641px) {
  body.location #content, body.month #content, body.search #content, body.year #content {
    overflow: clip;
    display: flow-root;
  }
  table#month thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

table#month tr.zb {
  background-color: var(--bg-f4f8fb, #f4f8fb);
}

table#month tr td:nth-child(13) > span{
  text-align: left;
  display: block;
  width: 67px;
  margin: 0 auto;
  font-size: 15px;
}
table#month tr td:nth-child(13) span span{
  padding-left: 4px;
  font-size: 13px;
}

table#month td {
  border: none;
  padding: 9px 0;
  text-align: center;
}

table#month .day th {
  color: var(--tx-005fa0, #005fa0);
  text-align: center;
  padding: 9px 0;
}
table#month .day.today, table#month .day.today td:nth-child(8),
table#month .day.today td:nth-child(9), table#month .day.today td:nth-child(10),
table#month .day.today td:nth-child(11) {
  background-color: var(--bg-ffffb4, rgb(255, 255, 180));
}
table#month .day.weekend {
  background-color: var(--bg-f7fbf5, #F7FBF5);
}
table#month td span.sunrise, table#month td span.sunset { font-weight: 700 }

#pagenotfound {
  background: var(--bg-f4f8fb, #f4f8fb) url(img/notfound.svg) no-repeat bottom -150px right -230px;
  background-size: 662px 472px;
  border-radius: 3px;
  padding: 60px;
  text-align: center;
  width: 630px;
  margin: 50px auto;
}
#pagenotfound a {
  background: var(--bg-f9bf0f, #f9bf0f);
  color: var(--tx-ffffff, #fff);
  text-transform: uppercase;
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  font-size: 15px;
  padding: 8px 16px;
  display: inline-block;
  margin: 10px 0;
  text-decoration: none;
  border-radius: 2px;
}

.monthsnav{
  clear: both;
  width: 100%;
  float: left;
}
.prevmonth{
  float: left;
  text-align: left;
  width: 50%;
  margin-top: 8px;
  margin-bottom: 8px;
}
.nextmonth{
  float: right;
  text-align: right;
  width: 50%;
  margin-top: 8px;
  margin-bottom: 8px;
}

#ideabox {
  max-width: 700px;
  margin: 20px auto;
  padding: 20px;
  background-color: var(--bg-f9f9f9, #f9f9f9);
  border-radius: 8px;
  box-shadow: 0 2px 4px var(--sh-000000-a10, rgba(0, 0, 0, 0.1));
  clear:both;
  padding: 15px 34px 30px;
}
body.country #ideabox, body.admin #ideabox{
  margin: 70px auto;
}
#ideabox form {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#ideabox label {
  display: block;
  margin-bottom: 20px;
}
#ideabox label span {
  display: block;
}

#ideabox textarea {
    flex-grow: 1;
    height: 40px;
    padding: 10px;
    margin-bottom: 0;
    border: 1px solid var(--ln-cccccc, #ccc);
    border-radius: 4px;
    font-family: inherit;
}

#ideabox input[type="submit"] {
    height: 60px;
    padding: 10px 20px;
    background-color: var(--bg-e2ad0d, #E2AD0D);
    color: var(--tx-ffffff, white);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#ideabox input[type="submit"]:hover {
    background-color: var(--bg-c4960b, #C4960B);
}
#ideabox p span{
  display: block;
}

#ideabox form {
    display: block;
}

#ideabox textarea {
   width: calc(100% - 20px);
}

#ideabox div {
  width: calc(100% - 105px);
    float: left;
    margin-right: 6px;
}

#ideabox input[type="submit"] {
    width: 90px;
}
#ideabox input[type="email"] {
    padding: 10px;
    margin-bottom: 0;
    border: 1px solid var(--ln-cccccc, #ccc);
    border-radius: 4px;
    font-family: inherit;
    width: 100%;
    width: calc(100% - 20px);
}

#ideabox form { display: flex; flex-wrap: wrap; align-items: stretch; }
#ideabox form label { flex: 0 0 100%; }
#ideabox form > div { float: none; flex: 1 1 0; min-width: 0; }
#ideabox form > div textarea { display: block; }
#ideabox form > div input[type="email"] { display: block; margin-top: 8px; }
#ideabox form input[type="submit"] { height: auto !important; align-self: stretch; }
@media only screen and (max-width: 480px) {
  #ideabox form > div { flex: 0 0 100%; }
  #ideabox form input[type="submit"] { flex: 0 0 100%; height: 55px !important; }
}

#filters label {
  padding-right: 15px;
  line-height: 30px;
}
#filters div.cb {
  padding: 10px 0;
  padding: 30px;
  border-radius: 5px;
  background: var(--bg-f8f8f1, #F8F8F1);
  float: right;
  max-width: 700px;
  margin-bottom: 15px;
  clear: both;
}
#filters h4 {
  margin-top: 0;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 10px;
}
#filters h4:nth-of-type(2) {
  margin-top: 30px;
}
.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  border-bottom: 10px solid var(--ln-f8f8f1, #F8F8F1);
  float: right;
  clear: both;
  margin-right: 115px;
  margin-top: 20px;
}
#filters button#ct {
  padding: 5px 13px 6px;
  background: var(--bg-efefef, #EFEFEF) url('/img/filter.png?v=2') no-repeat 7px 4px;
  background-size: 18px 18px;
  padding-left: 32px;
  border: 1px solid var(--ln-767676, #767676);
  border-radius: 2px;
  float: right;
  margin-bottom: -10px;
  margin-top: 15px;
  cursor: pointer;
  color: var(--tx-000000, black);
}
#filters button#tvc {
  padding: 5px 13px;
  background: var(--bg-efefef, #EFEFEF) url('/img/november.png') no-repeat 7px 3px;
  background-size: 18px 18px;
  padding-left: 32px;
  border: 1px solid var(--ln-767676, #767676);
  border-radius: 2px;
  float: right;
  margin-bottom: -10px;
  margin-top: 15px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
  margin-right: 20px;
  cursor: pointer;
}
#filters button#tvt{
  padding: 5px 13px;
  background: var(--bg-efefef, #EFEFEF) url('/img/table.png') no-repeat 7px 3px;
  background-size: 18px 18px;
  padding-left: 32px;
  border: 1px solid var(--ln-767676, #767676);
  border-radius: 2px;
  float: right;
  margin-bottom: -10px;
  margin-top: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
  cursor: pointer;
}
#filters button#tvt.active, #filters button#tvc.active{
  background-color: var(--bg-015fa0, #015FA0);
  border-color: var(--ln-015fa0, #015FA0);
  color: var(--tx-ffffff, white);
  cursor: initial;
}
#filters button#tvt.active{
  background: var(--bg-015fa0, #015FA0) url('/img/table-active.png') no-repeat 7px 3px;
  background-size: 18px 18px;
}
#filters button#tvc.active{
  background: var(--bg-015fa0, #015FA0) url('/img/november-active.png') no-repeat 7px 3px;
  background-size: 18px 18px;
}

#sschart {
  float: left;
  width: 100% !important;
  max-width: 624px !important;
  height: auto  !important;
}

.also{
  margin-top: 40px;
}
#content #search input, #content #search2 input {
  font-size: 14px;
  font-family: 'Lato', 'Lato Fallback', sans-serif;
  border: 1px solid var(--ln-6e8fa8, #6e8fa8);
  border-radius: 1px;
  vertical-align: middle;
}
#content #search input[type='text'], #content #search2 input[type='text'] {
  padding: 5px 5px 5px 5px;
  width: 97%;
  max-width: 350px;
  border-radius: 3px 0 0 3px;
  margin-bottom: 8px;
  border: 1px solid var(--ln-f9bf0f, #f9bf0f);
  border-right: none;
  margin-right: -2px;
}
#content #search input[type='submit'], #content #search2 input[type='submit'] {
  background: var(--bg-f9bf0f, #f9bf0f) url('search.gif') no-repeat 26px 9px;
  background-size: 12px 12px;
  padding: 7px 28px 6px 50px;
  text-align: left;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--tx-ffffff, white);
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border: 0;
  border-radius: 0 3px 3px 0;
  margin-bottom: 8px;
}

#ads{
  text-align: center;
}

header #search input[type="submit"], header #search2 input[type="submit"] {
  text-transform: uppercase;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin-top: 0px;
  margin-bottom: 0;
}

#gallery {
  position: relative;
  min-height: 264px;
  width: calc(100% - 30px);
  background-color: var(--bg-043050, #043050);
  padding: 15px;
  float: left;
  clear: both;
  margin: 0 0 40px 0;
}
#gallery .loading {
  position: absolute;
  top: 145px;
  left: 42%;
  margin: 0;
  text-align: center;
  color: var(--tx-6e8fa8, #6e8fa8);
  font-size: 16px;
  padding-left: 24px;
  background-image: url(/img/loading.gif);
  background-repeat: no-repeat;
  background-position: 0 5px;
}
#gallery h2 {
  color: var(--tx-ffffff, white);
  margin: 0;
  margin: 10px 0 10px 15px;
  font-weight: normal;
}
#gallery p {
  color: var(--tx-6e8fa8, #6e8fa8);
  margin: 0 0 10px 15px;
}
.sunphoto {
  float: left;
  margin: 16px;
  border: 3px solid var(--ln-ffffff, white);
}

#apidoc h3 {
  margin-top: 40px;
}
#apidoc pre {
  padding: 12px 10px 12px 15px;
  font-size: 12px;
  line-height: 26px;
  background-color: var(--bg-fafafa, #fafafa);
  border: 1px solid var(--ln-dddddd, #ddd);
  overflow: auto;
  color: var(--tx-007000, #007000);
}
#apidoc li {
  margin-bottom: 6px;
}

#single.api ul {
  padding-left: 20px;
}
#single.api li {
  margin-bottom: 16px;
  line-height: 150%;
}

#apidoc .apinote {
  border: 1px solid;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 18px 0;
}
#apidoc .apinote p {
  margin: 0 0 9px;
}
#apidoc .apinote p:last-child {
  margin-bottom: 0;
}
#apidoc .apinote-h {
  font-weight: 700;
}
#apidoc .apinote-sub {
  color: var(--tx-5c6670, #5c6670);
  font-size: 14px;
}
#apidoc .apinote-info {
  background: var(--bg-eaf5ff, #eaf5ff);
  border-color: var(--ln-7cb8e8, #7cb8e8);
}
#apidoc .apinote-warn {
  background: var(--bg-fff8e6, #fff8e6);
  border-color: var(--ln-e3c266, #e3c266);
}

table#month tr:nth-of-type(odd) td.light {

}

table#month th[data-col='len-var'] {
  width: 80px;
}
table#month .day td.light {
  width: 70px;

  color: var(--tx-888888, #888);
}

#footer {
  padding: 64px 24px 125px 24px;
}

#this {
  float: left;
  width: 250px;
}

#topcities {
  float: left;
  width: 375px;
  margin: 0 56px 0 49px;
}

#links {
  float: left;
  width: 250px;
}

#footer #links ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  column-gap: 16px;
}
#footer #links li {
  width: auto;
  margin-right: 0;
}

@media only screen and (min-width: 821px) {
  html[lang="en"] #footer #links ul { grid-template-columns: 1fr 1fr; }
}

@media only screen and (min-width: 1029px) {
  html:not([lang="en"]) #topcities { width: 405px; }
  html:not([lang="en"]) #links { width: 220px; }
}
@media only screen and (min-width: 821px) and (max-width: 1028px) {
  html:not([lang="en"]) #topcities { width: calc(100% - 391px); }
  html:not([lang="en"]) #links { width: 220px; }
}

.use {
  float: left;
  width: calc(20% - 32px);
}
#calendarthings {
  float: left;
}

.hcnotice{
  padding: 8px 12px;
  border: 1px solid var(--ln-e7b602, #E7B602);
  font-size: 13px;
  text-align: center;
  background: var(--bg-fff4d2, #FFF4D2);
}

#sidebar {
  float: right;
}

@media (hover: hover) {
#month tr.highlight td,
#month tr.highlight th,
#month tbody tr:not(.headers):hover td,
#month tbody tr:not(.headers):hover th {
  background-color: var(--bg-cf2c27, #CF2C27) !important;
  color: var(--tx-ffffff, white) !important;
}
}

#homesearch input{
  font-size: 25px;
}

#homesearch input[type='text']{
  padding: 11px 10px 11px 12px;
  text-align: left;
  width: 60%;
  max-width: 400px;
}

#homesearch input[type='submit']{
  background: var(--bg-f9bf0f, #f9bf0f) url('search.gif') no-repeat 26px 20px;
  background-size: 12px 12px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  text-align: left;
  margin-left: -8px;
  width: auto;
  padding: 18px 28px 18px 50px;
  position: relative;
  top: -4px;
}

#headerc {
  padding: 0;
}

#header {
  position: relative;
}

#header #ul {
  position: absolute;
  right: 16px;
  top: 7px;
}

#homesearch h1{
  font-size: 24px;
}

#today .sunrise, #today .sunset, #tomorrow .sunrise, #tomorrow .sunset {
  float: left;
  width: 50%;
}

.articles .article{
  width: 306px;
  float: left;
}
.articles .article img{
  width: 100%;
}
.articles .article:nth-child(2):not(#sidebar .article),
.articles .article:nth-child(5):not(#sidebar .article) { margin: 0 30px; }
.articles{
  width: 100%;
  float: left;
  margin-bottom: 50px;
}
.articles .article h3{
  margin: 0;
}
.articles .article p{
  margin: 0;
  height: 75px
}
.ah {
  position: relative;
  display: inline-block;
  margin-bottom: 25px;
}

.ah img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.ah h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 10px 15px;
  background-image: linear-gradient(to top, var(--bg-000000-a90, rgba(0, 0, 0, 0.9)), var(--bg-000000-a00, rgba(0, 0, 0, 0)));
  box-sizing: border-box;
  border-radius: 6px;
  color: var(--tx-ffffff, white);
}

#content .article a{
  color: var(--tx-000000, black);
  text-decoration: none
}

#dateForm button{
  padding: 6px 20px 5px;
  border: 1px solid var(--ln-767676, #767676);
  border-radius: 2px;
  color: var(--tx-000000, black);
}
#dateForm input[type="month"]{
  background-color: var(--bg-ffffff, white);
  padding: 5px 11px 4px 11px;
  border: 1px solid var(--ln-767676, #767676);
  border-radius: 2px;
  color: var(--tx-000000, black);
  font-family: Arial;
  font-size: 13px;
  box-sizing: border-box;
  line-height: 16px
}
#dateForm input[type="number"]{
  padding: 4px 4px 4px 10px;
}
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .info-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--bg-043051, #043051);
    color: var(--tx-ffffff, #fff);
    text-align: left;
    border-radius: 3px;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: normal;
    box-shadow: 0 3px 10px var(--sh-000000-a18, rgba(0,0,0,.18));

    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:focus-within .tooltiptext,
.tooltip.open .tooltiptext {
    visibility: visible;
}

@media (hover: hover) {
  .tooltip:hover .tooltiptext { visibility: visible; }
}

.ss-htip { cursor: help; }
.ss-htip:focus { outline: none; }
.ss-htip:focus-visible { outline: 2px solid var(--ln-4d738f, #4d738f); outline-offset: 3px; border-radius: 4px; }
.ss-htip .tooltiptext { width: 240px; margin-left: -120px; line-height: 1.45; text-transform: none; letter-spacing: normal; }
@media (max-width: 600px) { .ss-htip .tooltiptext { width: 190px; margin-left: -95px; } }

table#month td .mtipc .tooltiptext { left: auto; right: 0; margin-left: 0; width: 220px; }

.tooltip .info-btn {
    color: var(--tx-005fa0, #005fa0);
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 0;
    vertical-align: middle;
    cursor: pointer;
}

th .tooltip .info-btn { color: inherit; }
.tooltip .info-btn:focus { outline: none; }
.tooltip .info-btn:focus-visible { outline: 2px solid var(--ln-4d738f, #4d738f); outline-offset: 2px; border-radius: 50%; }

table#month thead .tooltip .tooltiptext { left: auto; right: -6px; margin-left: 0; }

table#month .mlabel { display: none; }
@media only screen and (max-width: 640px) {

  table#month tr td.mtip:before { content: none !important; }
  table#month td.mtip .mlabel {
    display: block;
    position: absolute;
    top: 8px;
    left: 8px;
    text-align: left;
    white-space: nowrap;
  }

  table#month td.mtip .tooltiptext { left: 0; margin-left: -8px; width: 200px; white-space: normal; text-align: left; }
}

#sunfacts{
  clear:both;
  margin: 30px 0 0 0;
  float: left;
  width:100%;
}
#minisunfacts{
  margin-bottom: 30px;
}
#sunfacts h2, #minisunfacts h2{
  color: var(--tx-015fa0, #015FA0);
  color: var(--tx-cfa12c, #CFA12C);
  font-size: 19px;
}
.fact{
  width: calc(50% - 77px);
  float:left;
  padding: 10px 30px 25px 30px;
  background: var(--bg-fbfbf4, #FBFBF4);
  margin-bottom: 30px;
  line-height: 150%;
}
#sunfacts > .fact:first-of-type, .fact:nth-of-type(2n+1) {
  margin-right: 30px;
}

#exploreall{
    text-align: center;
    padding: 20px;
    margin: 0px auto 60px auto;
    display: block;
    width: calc(100% - 40px);
    clear: both;
}

.breadcrumbs{
  font-size: 13px;
  line-height: 18px;
  margin: 0 0 6px 0;
}
.breadcrumbs + h1, .breadcrumbs + script + h1{
  margin-top: 0;
}
.breadcrumbs a{
  padding-right: 5px; text-decoration: none;
}
.breadcrumbs a:not(:first-of-type):not(.flag) {
  padding: 0 4px;
}

.breadcrumbs a.flag, .breadcrumbs span.flag{
  background-position: 5px 85%; padding-left: 26px; background-size: 14px 14px;
}
.breadcrumbs span{
  padding-left: 5px;
}

.locintro{
  margin-top: -15px;
}

@media only screen and (max-width: 640px){

  #headerc{
    margin-bottom: 0;
  }
  #homesearchc{
    margin-top: 0;
  }
  .breadcrumbs{
    margin: 7px 0 6px 0;
  }

  .breadcrumbs a{
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .locintro{
    margin-top: 4px;
  }
}

.aintro{
  font-family: helvetica;
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  width: 920px;
  padding: 20px 30px;
  float: left;
  margin: 0 0 40px 0;
}

.dissolved{
  clear: both;
  float: left;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-fdf6e8, #fdf6e8);
  padding: 16px 22px;
  margin: 0 0 26px 0;
}
.dissolved p{
  margin: 0 0 8px 0;
  line-height: 26px;
}
.dissolved p:last-child{
  margin-bottom: 0;
}
@media (max-width: 980px){
  .dissolved{
    padding: 14px 16px;
  }
}
.formerly{
  clear: both;
  font-size: 15px;
  opacity: .8;
  margin: 0 0 18px 0;
}
.acities{
  float: left;
  width: 1020px;
  max-width: 1035px;
  margin-bottom: 35px;
}
.acity{
  float: left;
  width: 470px;
  clear: none;
  margin-right: 30px;
  font-size: 14px;
  background-color: var(--bg-ebf3fb, #EBF3FB);
  background-color: var(--bg-f1f7fd, #F1F7FD);
  background-color: var(--bg-f6f9fd, #F6F9FD);
  border-radius: 4px;
  margin-bottom: 30px;
  padding-top: 0;
  padding-bottom: 10px;
}
.acity .sunrise, .acity .sunset{
  float: left;
  width: 50%;
  text-align: center;
  margin: 0 auto;
  padding-top: 30px;
}

.acities .topl .date {
  border-top:0;
  padding-top: 0;
  margin-bottom: -10px;
}
.acities .twilight {
  color: var(--tx-98aab8, #98aab8);
}
.acities .time {
  display: block;
  font-size: 140%;
  line-height: 130%;
}
.topl img{
  width: 90px;
}
.topl h3{
  text-align: center;
  margin-top: 0;
}
#content .topl h3 a{
  color: var(--tx-ffffff, white);
  text-decoration: none;
  padding: 15px 0;
  width: 100%;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  display: block;
  background-color: var(--bg-033051, #033051);
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.dst {
  font-size: 1em;
  vertical-align: middle;
  cursor: help;
  padding-left: 8px;
  color: var(--tx-888888, #888);
  position: relative;
}

.dst[data-title]::before {
  content: attr(data-title);
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  padding: 5px 9px;
  background: var(--bg-043051, #043051);
  color: var(--tx-ffffff, #fff);
  border-radius: 3px;
  box-shadow: 0 3px 10px var(--sh-000000-a18, rgba(0,0,0,.18));
  font-size: 13px;
  font-weight: normal;
  line-height: 1.35;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  text-align: left;
  visibility: hidden;
  z-index: 100;
  pointer-events: none;
}
.dst[data-title]:hover::before { visibility: visible; }

.dst.ecl { padding-left: 6px; }
.eclico { vertical-align: -2px; overflow: visible; }
.eclico .s { fill: var(--sv-f2a516, #f2a516); }
.eclico .m { fill: var(--sv-33404c, #33404c); }
.eclico .c { fill: none; stroke: var(--sv-f2a516, #f2a516); stroke-width: 1.2; }
.eclico .l { fill: var(--sv-cfd5dc, #cfd5dc); stroke: var(--sv-8c96a1, #8c96a1); stroke-width: .7; }
.eclico .u { fill: var(--sv-b0532c, #b0532c); }
.eclico .p { fill: var(--sv-6d7783, #6d7783); opacity: .45; }
@media (hover: hover) {
  #month tr.highlight .dst,
  #month tbody tr:not(.headers):hover .dst,
  #month tr.highlight .mpht,
  #month tbody tr:not(.headers):hover .mpht { color: var(--tx-ffffff, #fff) !important; }
}

.flag {
  padding-left: 35px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 0 0;
  padding-top: 5px;
}

#dateForm input{
  background: var(--bg-ffffff, white) url(/img/monthly-calendar.png) no-repeat 131px 6px;
  background-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--ln-767676, #767676);
  border-radius: 2px;
  font-family: Arial;
  font-size: 13px;
}
.month-picker table{
  font-size: 13px;
}
.month-picker-month-table .ui-button {
  margin:2px;
}
.month-picker-month-table td {
  height: auto;
}
.month-picker-year-table .ui-button {
  padding: 14px;
}
.month-picker-year-table .month-picker-title .ui-button {
  padding: 6px 0;
}
.month-picker-year-table .ui-button {
  height: auto;
}

#content:has(> #sidemenu) {
  overflow: visible;
  display: flow-root;
}
#sidemenu {
  float: left;
  position: sticky;
  top: 20px;
  width: 200px;
  margin-bottom: 150px;
  background: var(--bg-ffffff, white);
  margin: 0;

  margin-top: 23px;
}
#sidemenu li {
  list-style: none;
  padding: 0;
  margin: 0;
}
#sidemenu a {
  text-decoration: none;
  padding: 8px 0;
  display: block;

}

#sidemenu .sm-x1 {
  border-top: 1px solid var(--ln-dddddd, #ddd);
  margin-top: 14px;
  padding-top: 10px;
}
#sidemenu .sm-x a, #sidemenu .sm-x span {
  font-size: 14px;
  padding: 6px 0;
}
#sidemenu .sm-x span {
  display: block;
  font-weight: 600;
  color: var(--tx-5f6b76, #5f6b76);
}

@media only screen and (max-width: 1028px) {

  #about p:first-child {
    font-size: 28px;
    line-height: 150%;
  }

  .country #admins{
    column-count: unset;
    display: block;
    height: auto !important;
    margin: 0 0 45px;
    padding: 0;
    width: 100%;
    float: left;
  }
  #admins li{
    list-style: none; display: block; height: auto;
    float: left;
    width: calc(33% - 3px);
    padding: 5px 0;
  }

  .acities{
    width: 100%;
  }
  .acity{
    width: calc(50% - 15px);
  }
  .acity:nth-child(2n) {
    margin-right: 0;
  }
  .acities .twilight{
    padding: 0 30px;
  }

  .countries li{
    width: 33%;
  }

  #footer #this{
    text-align: center;
    width: 100%;
  }
  #logof{
    background: url(logo-v1_62x47.svg) top center no-repeat;
    background-size: 40px 30px;
    padding-left: 0;
    padding-top: 37px;
  }

  #topcities{
    clear: left;
    width: calc(100% - 421px);
    max-width: 100%;
  }

  #gallery {
    min-height: 100px
  }
  #gallery .sunphoto {
    width: calc(20% - 26px);
    margin: 10px;
  }
  .sunphoto img {
    width: 100%;
    height: auto;
  }

  .articles .article{
    width: calc(33% - 11px);
    margin-right: 20px;
  }
  .articles .article:nth-child(2), .articles .article:nth-child(5) { margin: 0 20px 0 0; }
  .articles .article:nth-child(3), .articles .article:nth-child(6){
    margin: 0;
  }
  .ah{
    margin-bottom: 5%;
  }

}

@media only screen and (max-width: 1006px) {
  #sidemenu {
    display: none;
  }
  #single.api {
    max-width: 650px;
    float: none;
    margin-left: 0;
  }
  #about p:first-child {
    font-size: 26px;
    line-height: 140%;
  }
  #locationfacts {
    width: calc(100% - 625px);
  }
  #locationfacts li {
    line-height: 26px;
  }
  #locationfacts img {
    height: 100%;
  }
}

@media only screen and (max-width: 900px) {

  #contactform {
    float: left;
    width: calc(100% - 250px);
  }
  #contactform textarea, #contactform input[type="text"], #contactform input[type="email"] {
    width: calc(100% - 60px);
  }
}

@media only screen and (max-width: 820px) {

  #contactform {
    float: left;
    width: calc(100% - 250px);
  }
  #contactform textarea, #contactform input[type="text"], #contactform input[type="email"] {
    width: calc(100% - 60px);
  }

  #about p:first-child {
    font-size: 24px;
    line-height: 130%;
  }

  #twodays, #today, #tomorrow, #twodays .data{
    max-width: 100%;
  }

  #locationfacts {
    width: calc(100% - 20px);
    clear: both;
    max-width: calc(100% - 20px);
  }

  #locationfacts ul {
    padding: 90px 20px 10px;
    margin: 0;
    background-color: var(--bg-043050, #043050);
    min-height: 200px;
  }
  #locationfacts img {
    max-width: 336px;
    float: left;
  }

  #footer h3 {
    margin-top:0;
  }

  #topcities{
    clear: left;
    width: calc(100% - 50px);
    max-width: 100%;
    margin: 0 56px 0 30px
  }
  #footer #topcities li{
    width: 25%;
    margin-right: 0;
  }
  #footer #topcities .ttc li{
    width: 25%;
    margin-right: 0;
  }
  #footer #topcities li.thco, #footer #topcities li:nth-child(3n) {
    width: 25%;
  }
  #footer #topcities li:nth-child(4n){
    width: 23%;
  }
  #links {
    clear: both;
    padding: 50px;
    width: calc(100% - 50px);
    margin-left: -20px;
  }
  #links li{
    width: 20%;
  }

}

@media only screen and (max-width: 640px) {

  #about p:first-child {
    font-size: 22px;
    line-height: 10%;
  }

  #states, #cities{
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }

  #dateForm label{
    display: block;
    padding-bottom: 5px;
  }
  #filters button#ct{
    margin-top: 39px;
  }

  table#month {
    border-collapse: collapse;
  }

  table#month,
  table#month thead,
  table#month tbody,
  table#month th,
  table#month td,
  table#month tr {
    display: block;
  }

  table#month .headers {
    display: none;
  }

  table#month td {
    border: none;
    border-bottom: 1px solid var(--ln-eeeeee, #eee);
    position: relative;
    padding-left: 50%;
    padding-right: 8px;
    text-align: right;
  }

  table#month td:before {

    position: absolute;

    top: 8px;
    left: 8px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
  }

  table#month tr td:nth-child(13) > span{
    text-align: right;
    width: 100%;
  }

  table#month .day td:nth-child(8), table#month .day td:nth-child(9), table#month .day td:nth-child(10), table#month .day td:nth-child(11) {
    width: calc(50% - 8px);
    padding-right: 8px;
  }

  #calendar .sunrise {
    padding: 21px 0 12px 0;
    background-position: top center;
    text-align: center;

  }

  #calendar .sunset {
    padding: 21px 0 0 0;
    background-position: top center;
    text-align: center;
  }

  #calendarthingslarge #calendar .sunrise {
    padding: 21px 0 12px 0;
    background-position: top center;
    text-align: center;
  }
  #calendarthingslarge #calendar .sunset {
    padding: 21px 0 12px 0;
    background-position: top center;
    text-align: center;
  }
  #calendarthingslarge #calendar .daylength{
    padding: 21px 0 12px 0;
    background-position: top center;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  #footer #topcities li{
    width: 33%;
    margin-right: 0;
  }
  #footer #topcities .ttc li{
    width: 33%;
    margin-right: 0;
  }
  #footer #topcities li.thco, #footer #topcities li:nth-child(4n) {
    width: 33%;
  }
  #footer #topcities li:nth-child(3n) {
    width: 32%;
  }
  #links {
    clear: both;
    padding: 50px;
  }
  #links li{
    width: 28%;
  }
  #this{
    padding: 0 20px;
    width: calc(100% - 40px) !important;
  }

  #gallery .sunphoto {
    width: calc(33% - 26px);
    margin: 10px;
  }
  .sunphoto img {
    width: 100%;
    height: auto;
  }
  .fact{
    width: calc(100% - 50px);
    padding: 8px 25px 20px 25px;
    background: var(--bg-fbfbf4, #FBFBF4);
    margin-bottom: 30px;
    line-height: 150%;
  }
  #sunfacts > .fact:first-of-type, .fact:nth-of-type(2n+1) {
    margin-right: 20px;
  }

}

@media only screen and (max-width: 750px) {
  .articles .article{
    width: calc(50% - 11px);
    margin-right: 20px;
    text-align: center;
  }
  .articles .article:nth-child(1), .articles .article:nth-child(3), .articles .article:nth-child(5) { margin: 0 20px 0 0; }
  .articles .article:nth-child(2), .articles .article:nth-child(4), .articles .article:nth-child(6){
    margin: 0;
  }
  .ah{
    margin-bottom: 9%;
  }
  #content .article a{
    text-align: left;
  }
}

@media only screen and (max-width: 700px) {
  #about p:first-child {
    font-size: 24px;
    line-height: 130%;
  }
  .ah{
    margin-bottom: 5%;
  }
  .offertxt {
    width: calc(100% - 110px);
  }
  #logo {
    width: 0px;
    overflow: hidden;
    height: 30px;
  }
  .use {
    float: left;
    width: calc(50% - 32px);
  }
  #footer #cp li {
    width: calc(100% - 22px);
    margin: 15px 0;
  }
  h1{
    margin: 18px 0 0;
  }
  .breadcrumbs + h1, .breadcrumbs + script + h1{
    margin-top: 0;
  }
}

@media only screen and (max-width: 650px) {

  #locationfacts img {
    max-width: 275px;
  }
  #locationfacts ul {
    padding: 60px 0px 10px;
    min-height: 175px;
    font-size: 90%;
  }

  #contactform {
    float: left;
    width: calc(100%);
  }
  #contactform textarea, #contactform input[type="text"], #contactform input[type="email"] {
    width: calc(100% - 30px);
  }
  #contactform textarea {
    max-width: 100%;
  }

  #ec {
    clear: both;
    margin-top: 30px;
    float: left;
  }

}

@media only screen and (max-width: 600px) {

  #header #search input[type="submit"], #header #search2 input[type="submit"] {
    width: 35px;
    padding: 0 12px 0 0;
    font-size: 0;
  }
  #homesearchc{
    padding: 80px 0;
    background-image: url('/img/home5mm.webp');
  }
  #gallery .sunphoto {
    width: calc(33% - 26px);
    margin: 10px;
  }
  .sunphoto img {
    width: 100%;
    height: auto;
  }

  .acity{
    width: calc(100%);
  }
  .acity:nth-child(2n) {
    margin-right: 0;
  }
  .acities .twilight{
    padding: 0 30px;
  }
}

@media only screen and (max-width: 580px) {
  .offerimg {
    padding: 20px 0 0 0;
    clear: left;
    text-align: center;
    display: block;
    margin: 0;
    float: none
  }
  .offertxt {
    clear: both;
    width: 100%;
    margin-bottom: 30px;
  }

  #pagenotfound { width: 90%; margin: 20px auto -30px; padding: 60px 0; }
  #homesearch #photocredits {
    margin-top: 25px;
    margin-bottom: 0;
  }
  #content #search input[type='text'], #content #search2 input[type='text'] {
    width: calc(100% - 150px);
  }
  #gallery .sunphoto {
    width: calc(33% - 26px);
    margin: 10px;
  }
  .sunphoto img {
    width: 100%;
    height: auto;
  }

  #locationfacts{
    text-align: center;
    padding: 10px;
    margin: 0 auto 40px auto;
  }
  #locationfacts .map{
    background-color: var(--bg-043050, #043050);
    padding: 10px;
  }
  #locationfacts img {
    max-width: 376px;
    margin: 0 auto;
    display: block;
    float: none;
  }
  #locationfacts ul {
    padding: 25px 0 35px 0px;
    min-height: 58px;
    clear: both;
  }
  #locationfacts li {
    font-size: 100%;
  }
  .countries li{
    width: 50%;
  }
  #ideabox p span{
    display: inline;
  }

  #admins li{
    width: calc(100% - 15px);
    padding-left: 15px;
  }
  #admins li a{
    padding: 2px 0;
  }
  #today, #tomorrow {
    padding-top: 8px;
  }
  .moon span.phase {
    padding-top: 9px;
    width: calc(100% - 30px);
  }
  .mtime{
    display: block
  }
  #today .sunrise, #today .sunset, #tomorrow .sunrise, #tomorrow .sunset {
    padding-top: 20px;
  }
  .moon > span {
    width: calc(50% - 4px);
    font-size: 14px;
    padding: 12px 2px;
  }
}

@media only screen and (max-width: 480px) {
  #header #ul div {
    display: inline-block;
  }
  #secbox, #daylengthbox, #daylengthprogressionbox, #moonphasebox, #lightbox, #noonbox{
   display: block;
   margin-top: 5px;
  }
  .hin {
    display: none;
  }
  .cap{
    text-transform: capitalize;
  }
  .ctime{
    display: none;
  }
  #filters button#ct span, #dateForm button span{
    display: none;
  }
  #calendarfilters #calplace, #calendarfilters input[type='text'] {
    width: 90%;
    padding: 0 5%;
    height: 40px;
    font-size: 16px;
    max-width: 100%;
    margin-bottom: 10px;
  }
  #calendarfilters #month, #calendarfilters #year {
    width: 90% !important;
    font-size: 16px;
    padding: 0 5%;
    height: 40px;
    margin-bottom: 10px;
  }

  #contactform input[type="text"], #contactform input[type="email"] {
    width: 92%;
  }
  #contactform .btn {
    width: 98%;
  }
  #states, #cities {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }
  #states li a, #cities li a {
    font-size: 16px;
    line-height: 26px;
  }
  #gallery .sunphoto {
    width: calc(50% - 26px);
    margin: 10px;
  }
  .sunphoto img {
    width: 100%;
    height: auto;
  }
  .menu-label {
    display: inline-block;
    font-size: 26px;
    line-height: 0;
    padding: 15px 0 0 5px;
  }
  #menu-toggle + .menu-label + #headermenu {
    display: none;
  }
  #menu-toggle:checked + .menu-label + #headermenu {
    display: inline-block;
    position: absolute;
    top: 45px;
    right: -16px;
    width: 125px;
    box-shadow: var(--sh-444444-a76, #444444c2) 0px 5px 10px;
  }
  #menu-toggle:checked + .menu-label + #headermenu li {
    text-align: center;
    padding: 15px 0;
    width: 100%;
  }

  #content #search input[type=submit], #content #search2 input[type=submit] {
    background: var(--bg-f9bf0f, #f9bf0f) url(search.gif) no-repeat 15px 9px;
    background-size: 12px 12px;
    padding: 7px 18px 6px 38px;
  }
  #content #search input[type=text], #content #search2 input[type=text] {
    width: calc(100% - 154px);
  }

  #homesearch input[type='text']{
    width: calc(100% - 20px);
  }

  #homesearch input[type='submit']{

    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }
  #homesearchc {
    padding: 60px 0 120px;
  }

  #footer #topcities li{
    width: 50%;
    margin-right: 0;
  }
  #footer #topcities .ttc li{
    width: 50%;
    margin-right: 0;
  }
  #footer #topcities li.thco, #footer #topcities li:nth-child(3n) {
    width: 50%;
  }
  #footer #topcities li:nth-child(4n), #footer #topcities li:nth-child(2n) {
    width: 45%;
  }
  #links li{
    width: 45%;
  }

  body.article{
    width: calc(100%);
    margin-right: 0;
    text-align: left;
  }
  #ideabox h2{
    font-size:20px;
  }
  #ideabox h2 span{
    display: block;
  }

  #ideabox div {
    width: calc(100% - 0px);
    margin-right: 0px;
  }

  #ideabox input[type="submit"] {
      width: 100%;
      margin-top: 6px;
      height: 55px;
  }

  .articles .article{
    width: calc(100%);
    margin-right: 0;
    text-align: center;
  }
  .articles .article:nth-child(1), .articles .article:nth-child(3), .articles .article:nth-child(5), .articles .article:nth-child(2), .articles .article:nth-child(4), .articles .article:nth-child(6){
    margin: 0;
  }
  .articles .article:nth-child(2):not(#sidebar .article),
  .articles .article:nth-child(5):not(#sidebar .article) { margin: 0; }

  .ah{
    margin-bottom: 9%;
  }
  .ah h3, #content .article a{
    text-align: left;
  }

}
@media only screen and (max-width: 400px) {

  #states, #cities {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
  }
  #dateForm {
    margin-top: 100px !important;
  }
  #footer #topcities li{
    width: 100%;
    margin-right: 0;
  }
  #footer #topcities .ttc li{
    width: 100%;
    margin-right: 0;
  }
  #footer #topcities li.thco, #footer #topcities li:nth-child(3n) {
    width: 100%;
  }
  #footer #topcities li:nth-child(4n), #footer #topcities li:nth-child(2n) {
    width: 100%;
  }
  #links li{
    width: 100%;
  }
  .countries li{
    width: 100%;
  }
}
@media only screen and (max-width: 300px) {
  table#calendar .daylength::before {
    content: "";
  }
}

html[lang="es"] #logof{
  font-size:23px;
}
html[lang="de"] h1{
  font-size:25px;
}
html[lang="de"] .article h1 {
  font-size: 50px;
}
html[lang="pt"] #logof{
  font-size:20px;
}
html[lang="es"] .subscribe{
  width: 300px;
}
html[lang="es"] .subscribe input[type=submit]{
  width: 97px;
}
html[lang="es"] #filters div.cb, html[lang="fr"] #filters div.cb {
  max-width: 900px;
}
html[lang="fr"] #header #search input[type=submit], html[lang="fr"] #header #search2 input[type=submit] {
  background-position: top 12px left 7px;
  padding: 0 12px 0 24px;
}
.imgcredit{
  display: block;
  margin: 6px 0 26px;
  text-align: center;
  color: var(--tx-8a939c, #8a939c);
  font-size: 13px;
  line-height: 18px;
}

.sunpath {
  clear: both;
  float: left;
  width: 100%;
  margin: 20px 0 0;
}
.sunpath .spread {
  margin: 7px 0 0;
  color: var(--tx-555555, #555);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  min-height: 20px;
}
.sunpath .splgnd {
  margin: 5px 0 0;
  color: var(--tx-777777, #777);
  font-size: 12px;
  line-height: 1.9;
  text-align: center;
}
.sunpath .spsw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: -2px;
}

.sunpath svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  cursor: crosshair;
  touch-action: pan-y;
}

@media only screen and (max-width: 640px) {
  .sunpath svg text { font-size: 15px; }
  .sunpath svg text[font-size="9.5"] { font-size: 13px; }

  .sunpath svg {
    width: calc(100% + 40px);
    margin-left: -24px;
  }
}

.sunpoll-h {
  clear: both;
  float: left;
  width: 100%;
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.3;
  color: var(--tx-1f2d3d, #1f2d3d);
  text-align: center;
}
.sunpoll-h .nb {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-005fa0, #005fa0);
  color: var(--tx-ffffff, #fff);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.sunpoll-h + .sunpath { margin-top: 8px; }

.sunpoll {
  clear: both;
  float: left;
  width: 100%;
  box-sizing: border-box;
  margin: 16px 0 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--ln-dce7f0, #dce7f0);
  border-radius: 6px;
  background: var(--bg-fbfdff, #fbfdff);
  text-align: center;
  font-size: 14px;
}

.sunpoll .sp-mini { display: none; }
.sunpoll.sp-folded { padding: 11px 16px; }
.sunpoll.sp-folded > *:not(.sp-mini) { display: none; }
.sunpoll.sp-folded .sp-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 !important;
  color: var(--tx-5a6672, #5a6672);
  font-size: 13px;
}
.sunpoll .sp-mini svg { flex: none; color: var(--tx-2e9e5b, #2e9e5b); }
.sunpoll .sp-mini-t { color: var(--tx-247845, #247845); font-weight: 700; }
.sunpoll .sp-mini-r b { color: var(--tx-31414f, #31414f); }
.sunpoll .sp-mini-n { margin-left: 7px; color: var(--tx-97a5b0, #97a5b0); }
.sunpoll .sp-more {
  font: inherit;
  font-size: 13px;
  padding: 4px 12px;
  border: 1px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 14px;
  background: var(--bg-ffffff, #fff);
  color: var(--tx-005fa0, #005fa0);
  cursor: pointer;
}
.sunpoll .sp-more:hover { background: var(--bg-eef5fb, #eef5fb); }

.sunpoll p.sp-q {
  margin: 0 !important;
  font-size: 16px;
  font-weight: 700;
  color: var(--tx-1f2d3d, #1f2d3d);
}
.sunpoll p.sp-sub {
  margin: 5px 0 14px !important;
  color: var(--tx-6b7c8a, #6b7c8a);
  font-size: 13px;
  line-height: 1.5;
}
.sunpoll .sp-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sunpoll .sp-b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  padding: 9px 18px;
  border: 1.5px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 22px;
  background: var(--bg-ffffff, #fff);
  color: var(--tx-46586a, #46586a);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.sunpoll .sp-b svg { flex: none; opacity: .75; }
.sunpoll .sp-keep:hover { border-color: var(--ln-2e9e5b, #2e9e5b); color: var(--tx-247845, #247845); }
.sunpoll .sp-drop:hover { border-color: var(--ln-e2574c, #e2574c); color: var(--tx-b8382e, #b8382e); }
.sunpoll .sp-keep.on {
  background: var(--bg-2e9e5b, #2e9e5b);
  border-color: var(--ln-2e9e5b, #2e9e5b);
  color: var(--tx-ffffff, #fff);
  box-shadow: 0 2px 8px var(--sh-2e9e5b-a28, rgba(46,158,91,.28));
}
.sunpoll .sp-drop.on {
  background: var(--bg-e2574c, #e2574c);
  border-color: var(--ln-e2574c, #e2574c);
  color: var(--tx-ffffff, #fff);
  box-shadow: 0 2px 8px var(--sh-e2574c-a28, rgba(226,87,76,.28));
}
.sunpoll .sp-b.on svg { opacity: 1; }

.sunpoll .sp-res {
  max-width: 420px;
  margin: 16px auto 0;
}
.sunpoll .sp-bar {
  height: 9px;
  border-radius: 5px;
  background: var(--bg-f0c3bf, #f0c3bf);
  overflow: hidden;
}
.sunpoll .sp-fill {
  display: block;
  height: 100%;
  background: var(--bg-2e9e5b, #2e9e5b);
  border-radius: 5px 0 0 5px;
  transition: width .45s ease;
}
.sunpoll p.sp-nums {
  margin: 7px 0 0 !important;
  color: var(--tx-5a6672, #5a6672);
  font-size: 13px;
}
.sunpoll p.sp-nums b { color: var(--tx-31414f, #31414f); }
.sunpoll p.sp-nums span { color: var(--tx-b8c4cd, #b8c4cd); }
.sunpoll p.sp-nums .sp-tot {
  display: block;
  margin-top: 2px;
  color: var(--tx-97a5b0, #97a5b0);
  font-size: 12px;
}
.sunpoll p.sp-mine {
  margin: 10px 0 0 !important;
  color: var(--tx-6b7c8a, #6b7c8a);
  font-size: 13px;
}
.sunpoll .sp-undo {
  font: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tx-005fa0, #005fa0);
  text-decoration: underline;
  cursor: pointer;
}

.sunpoll .sp-say {
  max-width: 520px;
  margin: 18px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--ln-e7eef4, #e7eef4);
}
.sunpoll .sp-say label {
  display: block;
  margin-bottom: 8px;
  color: var(--tx-6b7c8a, #6b7c8a);
  font-size: 13px;
  line-height: 1.45;
}
.sunpoll .sp-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.sunpoll textarea {
  flex: 1;
  min-height: 40px;
  box-sizing: border-box;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 5px;
  resize: none;
  overflow: hidden;
  line-height: 1.4;
}
.sunpoll textarea:focus {
  outline: none;
  border-color: var(--ln-7fb4dd, #7fb4dd);
  box-shadow: 0 0 0 3px var(--sh-005fa0-a12, rgba(0,95,160,.12));
}
.sunpoll .sp-send {
  flex: none;
  font: inherit;
  padding: 10px 18px;
  border: 0;
  border-radius: 5px;
  background: var(--bg-005fa0, #005fa0);
  color: var(--tx-ffffff, #fff);
  cursor: pointer;
}
.sunpoll .sp-send:hover { background: var(--bg-00517f, #00517f); }
.sunpoll .sp-send[disabled] { opacity: .6; cursor: default; }
.sunpoll p.sp-thanks {
  margin: 0 !important;
  color: var(--tx-247845, #247845);
  font-weight: 700;
}
.sunpoll p.sp-msg {
  margin: 10px 0 0 !important;
  min-height: 18px;
  font-size: 13px;
  color: var(--tx-6b7c8a, #6b7c8a);
}
.sunpoll p.sp-msg.sp-ok  { color: var(--tx-247845, #247845); }
.sunpoll p.sp-msg.sp-err { color: var(--tx-b8382e, #b8382e); }

.e18poll { padding: 18px 18px 18px; }
.sunpoll.e18poll p.sp-q { margin: 0 0 14px !important; }
.e18poll .sp-say[hidden] { display: none; }
.e18poll p.sp-msg:empty { display: none; }
.e18poll .sp-btns { margin-bottom: 0; }

.e18poll .sp-row { align-items: flex-start; }
.e18poll textarea { height: 44px; min-height: 44px; padding: 11px 12px; line-height: 20px; }
.e18poll .sp-send { box-sizing: border-box; height: 44px; padding: 0 20px; line-height: 44px; }
.e18poll { position: relative; }
.e18poll .e18x { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tx-8a96a2, #8a96a2); cursor: pointer; }
.e18poll .e18x:hover { background: var(--bg-eef1f4, #eef1f4); color: var(--tx-31414f, #31414f); }
.e18poll .e18x:focus-visible { outline: 2px solid var(--ln-4d738f, #4d738f); outline-offset: 1px; }

.sunpoll .sp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media only screen and (max-width: 560px) {
  .sunpoll { padding: 16px 14px 18px; }
  .sunpoll .sp-btns { flex-direction: column; }
  .sunpoll .sp-b { justify-content: center; width: 100%; }
  .sunpoll .sp-row { flex-direction: column; }

  .sunpoll textarea { width: 100%; }
  .sunpoll .sp-send { width: 100%; }
}

.wxproto {
  clear: both;
  float: left;
  width: 100%;
  box-sizing: border-box;
  margin: 16px 0 0;
  padding: 14px 18px 16px;
  border: 1px solid var(--ln-dce7f0, #dce7f0);
  border-radius: 6px;
  background: var(--bg-fbfdff, #fbfdff);
}
.wxproto p.wx-h {
  margin: 0 0 10px !important;
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-1f2d3d, #1f2d3d);
}
.wxproto .wx-ev {
  padding: 10px 0 0;
  border-top: 1px solid var(--ln-eef3f8, #eef3f8);
}
.wxproto .wx-ev:first-of-type { border-top: 0; padding-top: 0; }
.wxproto p.wx-when {
  margin: 0 0 6px !important;
  color: var(--tx-5a6672, #5a6672);
  font-size: 13px;
}
.wxproto p.wx-when strong { color: var(--tx-1f2d3d, #1f2d3d); }
.wxproto .wx-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.wxproto .wx-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wxproto .wx-k {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx-8fa0ad, #8fa0ad);
}
.wxproto .wx-v {
  font-size: 20px;
  line-height: 1.2;
  color: var(--tx-005fa0, #005fa0);
}
.wxproto .wx-ico {
  vertical-align: -8px;
  margin-right: 4px;
}
.wxproto .wx-sub {
  display: block;
  font-size: 12px;
  color: var(--tx-8fa0ad, #8fa0ad);
}
.wxproto p.wx-src {
  margin: 12px 0 0 !important;
  color: var(--tx-8fa0ad, #8fa0ad);
  font-size: 12px;
}
.wxproto p.wx-src a { color: var(--tx-6b7c8a, #6b7c8a); }

.moonpage h1 { margin-bottom: 6px; }
.moonpage .intro { max-width: 660px; color: var(--tx-5a6672, #5a6672); line-height: 1.6; }
.moonpage section { clear: both; scroll-margin-top: 70px; }
.moonpage h2 {
  margin: 38px 0 8px;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--tx-1f2d3d, #1f2d3d);
}
.moonpage h3 { margin: 20px 0 4px; font-size: 15.5px; color: var(--tx-1f2d3d, #1f2d3d); }
.moonpage .note {
  max-width: 660px;
  margin: 0 0 14px;
  color: var(--tx-6b7c8a, #6b7c8a);
  font-size: 13.5px;
  line-height: 1.6;
}

.moonpage .mhero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 26px 28px;
  border-radius: 12px;
  background: radial-gradient(120% 150% at 15% 10%, var(--bg-1d3157, #1d3157) 0%, var(--bg-101d33, #101d33) 45%, var(--bg-0a1120, #0a1120) 100%);
  color: var(--tx-e8edf6, #e8edf6);
}
.moonpage .mstars { position: absolute; inset: 0; pointer-events: none; }
.moonpage .mstars span {
  position: absolute;
  border-radius: 50%;
  background: var(--bg-ffffff, #fff);
  opacity: .55;
}
.moonpage .mhero-face { position: relative; }
.moonpage .mhero-face svg { filter: drop-shadow(0 0 24px var(--sh-fff6e2-a22, rgba(255, 246, 226, .22))); }
.moonpage .mhero-data { position: relative; flex: 1; min-width: 250px; }
.moonpage .mphase-name {
  margin: 0 !important;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--tx-fff6e2, #fff6e2);
}
.moonpage .mstatus { margin: 4px 0 16px !important; color: var(--tx-a8bdd8, #a8bdd8); font-size: 14.5px; }
.moonpage .mstatus strong { color: var(--tx-ffffff, #fff); font-weight: 600; }
.moonpage .mfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px 22px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.moonpage .mfacts .k {
  display: block;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-7f9bbd, #7f9bbd);
}
.moonpage .mfacts .v { font-size: 19px; color: var(--tx-ffffff, #fff); }
.moonpage .mchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
.moonpage .chip {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bg-ffffff-a09, rgba(255,255,255,.09));
  font-size: 13px;
  color: var(--tx-dce7f4, #dce7f4);
}
.moonpage .chip .ar { color: var(--tx-8fd0ae, #8fd0ae); }
.moonpage .chip.alt { background: var(--bg-fff6e2-a14, rgba(255,246,226,.14)); color: var(--tx-ffeccb, #ffeccb); }

.moonpage .mstrip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.moonpage .mstrip li {
  padding: 10px 6px 9px;
  border: 1px solid var(--ln-e7eef4, #e7eef4);
  border-radius: 8px;
  text-align: center;
  background: var(--bg-ffffff, #fff);
}
.moonpage .mstrip li.hoy { border-color: var(--ln-b7d5ee, #b7d5ee); background: var(--bg-f5fbff, #f5fbff); }
.moonpage .mstrip .d { display: block; font-size: 11.5px; color: var(--tx-5a6672, #5a6672); font-weight: 600; }
.moonpage .mstrip svg { display: block; margin: 4px auto 2px; }
.moonpage .mstrip .i { display: block; font-size: 12.5px; color: var(--tx-31414f, #31414f); }
.moonpage .mstrip .rs { display: block; margin-top: 2px; font-size: 10px; color: var(--tx-93a3ae, #93a3ae); }
.moonpage .mprose {
  max-width: 660px;
  margin: 16px 0 0;
  color: var(--tx-3f4d59, #3f4d59);
  font-size: 15.5px;
  line-height: 1.7;
}
.moonpage .mau { margin: 8px 0 12px !important; color: var(--tx-8ea9cc, #8ea9cc); font-size: 12.5px; }

.moonpage .mdetails { max-width: 860px; margin: 16px 0 0; }
.moonpage .mdetails summary {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 6px;
  background: var(--bg-ffffff, #fff);
  color: var(--tx-005fa0, #005fa0);
  font-size: 13.5px;
  cursor: pointer;
  list-style: none;
}
.moonpage .mdetails summary::-webkit-details-marker { display: none; }
.moonpage .mdetails summary:before { content: "\203A  "; }
.moonpage .mdetails[open] summary:before { content: "\2039  "; }
.moonpage .mtablewrap { overflow-x: auto; margin: 12px 0 0; }
.moonpage table.mmonth { width: 100%; min-width: 560px; font-size: 13.5px; }
.moonpage table.mmonth .az { display: block; color: var(--tx-8fa0ad, #8fa0ad); font-size: 11.5px; }
.moonpage table.mmonth tr.today td { background: var(--bg-fffbe9, #fffbe9); }

.moonpage .mnear { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.moonpage .mnear a {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--bg-f1f6fa, #f1f6fa);
  color: var(--tx-005fa0, #005fa0);
  font-size: 13.5px;
  text-decoration: none;
}
.moonpage .mnear a:hover { background: var(--bg-e4eef7, #e4eef7); }

.moonpage .msubnav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 6px;
  margin: 18px 0 0;
  padding: 9px 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg-ffffff-a94, rgba(255,255,255,.94));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ln-e7eef4, #e7eef4);
}
.moonpage .msubnav::-webkit-scrollbar { display: none; }
.moonpage .msubnav a {
  flex: none;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--bg-f1f6fa, #f1f6fa);
  color: var(--tx-5a6672, #5a6672);
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
}
.moonpage .msubnav a:hover { background: var(--bg-e4eef7, #e4eef7); color: var(--tx-005fa0, #005fa0); }
.moonpage .msubnav a.on { background: var(--bg-10203a, #10203a); color: var(--tx-ffffff, #fff); }

.moonpage .mcols { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.moonpage .mcompass { flex: none; width: 208px; }
.moonpage .mcompass svg { width: 208px; height: 208px; display: block; }
.moonpage .mlegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0 0 !important;
  color: var(--tx-6b7c8a, #6b7c8a);
  font-size: 12.5px;
}
.moonpage .mlegend.wide { max-width: 640px; }
.moonpage .mlegend .dot, .moonpage .mlegend .ln, .moonpage .mlegend .sw {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.moonpage .mlegend .dot { width: 9px; height: 9px; border-radius: 50%; }
.moonpage .mlegend .dot.rise { background: var(--bg-7ec8a9, #7ec8a9); }
.moonpage .mlegend .dot.set  { background: var(--bg-e0946a, #e0946a); }
.moonpage .mlegend .dot.now  { background: var(--bg-fff6e2, #fff6e2); border: 1px solid var(--ln-c9b98f, #c9b98f); }
.moonpage .mlegend .ln { width: 18px; height: 0; border-top: 2.5px solid; }
.moonpage .mlegend .ln.moon { border-color: var(--ln-b9ab92, #b9ab92); }
.moonpage .mlegend .ln.sun { border-top-style: dashed; border-color: var(--ln-e9a11a, #e9a11a); }
.moonpage .mlegend .sw { width: 12px; height: 12px; border-radius: 3px; }
.moonpage .mlegend .sw.day { background: var(--bg-6c8cba, #6c8cba); }
.moonpage .mlegend .sw.night { background: var(--bg-101c31, #101c31); }

.moonpage .mmap { position: relative; width: 336px; max-width: 100%; margin: 6px 0 0; border-radius: 8px; overflow: hidden; }
.moonpage .mmap img { display: block; width: 100%; height: auto; }
.moonpage .mmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.moonpage .mfeat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  max-width: 900px;
  margin: 6px 0 12px;
  padding: 0;
  list-style: none;
}
.moonpage .mfeat li {
  padding: 12px 14px;
  border: 1px solid var(--ln-dce7f0, #dce7f0);
  border-left: 3px solid var(--ln-c9b98f, #c9b98f);
  border-radius: 7px;
  background: var(--bg-ffffff, #fff);
}
.moonpage .mfeat .fn { font-weight: 700; color: var(--tx-1f2d3d, #1f2d3d); }
.moonpage .mfeat .ft {
  margin-left: 7px;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-a08b5c, #a08b5c);
}
.moonpage .mfeat .fw { display: block; margin-top: 3px; color: var(--tx-5a6672, #5a6672); font-size: 13.5px; line-height: 1.5; }

.moonpage .mecl {
  max-width: 720px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--ln-dce7f0, #dce7f0);
  border-left: 3px solid var(--ln-b7c2cb, #b7c2cb);
  border-radius: 8px;
  background: var(--bg-ffffff, #fff);
}
.moonpage .mecl--fullyvisible { border-left-color: var(--ln-2e9e5b, #2e9e5b); background: var(--bg-fbfefc, #fbfefc); }
.moonpage .mecl--partlyvisible { border-left-color: var(--ln-e9a11a, #e9a11a); }
.moonpage .mecl--notvisible { opacity: .72; }
.moonpage p.ec-h { margin: 0 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.moonpage p.ec-h strong { color: var(--tx-1f2d3d, #1f2d3d); font-size: 15.5px; }
.moonpage .ec-d { color: var(--tx-5a6672, #5a6672); }
.moonpage .ec-v {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--bg-eef3f8, #eef3f8);
  color: var(--tx-6b7c8a, #6b7c8a);
}
.moonpage .ec-v--yes { background: var(--bg-d7f0e2, #d7f0e2); color: var(--tx-1f7a4d, #1f7a4d); }
.moonpage .ec-v--part { background: var(--bg-fdeccc, #fdeccc); color: var(--tx-8a5a00, #8a5a00); }
.moonpage .ec-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 4px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.moonpage .ec-list li { display: flex; gap: 8px; font-size: 13.5px; align-items: baseline; }
.moonpage .ec-list li.down { opacity: .5; }
.moonpage .ec-k { color: var(--tx-6b7c8a, #6b7c8a); flex: 1; }
.moonpage .ec-t { color: var(--tx-1f2d3d, #1f2d3d); font-weight: 600; }
.moonpage .ec-a { color: var(--tx-8fa0ad, #8fa0ad); font-size: 12px; }
.moonpage p.ec-none { margin: 8px 0 0 !important; color: var(--tx-6b7c8a, #6b7c8a); font-size: 13.5px; }
.moonpage p.ec-warn {
  margin: 9px 0 0 !important;
  padding: 7px 10px;
  border-radius: 5px;
  background: var(--bg-fff8e6, #fff8e6);
  color: var(--tx-8a5a00, #8a5a00);
  font-size: 12.5px;
  line-height: 1.5;
}

.moonpage .mplan {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  max-width: 720px;
  margin: 6px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--ln-dce7f0, #dce7f0);
  border-radius: 9px;
  background: var(--bg-fbfdff, #fbfdff);
}
.moonpage .mplan label { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-8fa0ad, #8fa0ad); }
.moonpage .mplan select, .moonpage .mplan input {
  display: block;
  margin-top: 5px;
  padding: 7px 10px;
  border: 1px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 6px;
  font: inherit;
  font-size: 15px;
  color: var(--tx-1f2d3d, #1f2d3d);
  background: var(--bg-ffffff, #fff);
}
.moonpage .mplan input { width: 92px; display: inline-block; }
.moonpage .mplan-out {
  flex-basis: 100%;
  margin: 0 !important;
  color: var(--tx-10203a, #10203a);
  font-size: 15px;
  line-height: 1.55;
}
.moonpage .mplan-out.none { color: var(--tx-8fa0ad, #8fa0ad); }

.moonpage table { flex: 1; min-width: 290px; border-collapse: collapse; margin: 0; font-size: 14.5px; }
.moonpage table.mfull { width: 100%; max-width: 720px; }
.moonpage th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-f4f8fb, #f4f8fb);
  color: var(--tx-5a6672, #5a6672);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}
.moonpage td { padding: 9px 10px; border-top: 1px solid var(--ln-eef3f8, #eef3f8); vertical-align: top; }
.moonpage td.d { color: var(--tx-5a6672, #5a6672); }
.moonpage .sub { display: block; color: var(--tx-8fa0ad, #8fa0ad); font-size: 12px; }
.moonpage .none { color: var(--tx-b7c2cb, #b7c2cb); }
.moonpage tr.past td { opacity: .42; }
.moonpage tr.next td { background: var(--bg-f2f9f5, #f2f9f5); }
.moonpage .tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 9px;
  background: var(--bg-ffeec9, #ffeec9);
  color: var(--tx-7c5200, #7c5200);
  font-size: 11px;
  white-space: nowrap;
}
.moonpage .tag.next { background: var(--bg-d7f0e2, #d7f0e2); color: var(--tx-1f7a4d, #1f7a4d); }

.moonpage .tag.micro { background: var(--bg-e5e9ef, #e5e9ef); color: var(--tx-5a6672, #5a6672); }

.moonpage table.mlun { width: 100%; max-width: 640px; }
.moonpage table.mlun tr.now { background: var(--bg-fdf6e3, #fdf6e3); }
.moonpage .mscroll { overflow-x: auto; }

.moonpage .mfoot {
  margin: 22px 0 6px;
  color: var(--tx-7a848d, #7a848d);
  font-size: 13px;
  line-height: 1.6;
  border-top: 1px solid var(--ln-eef1f4, #eef1f4);
  padding-top: 12px;
}
.moonpage td.dist { white-space: nowrap; color: var(--tx-5a6672, #5a6672); }
.moonpage td.dist .bar {
  position: relative;
  display: block;
  width: 92px;
  height: 4px;
  margin: 0 0 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bg-ffd9a8, #ffd9a8), var(--bg-cfe0ef, #cfe0ef));
}
.moonpage td.dist .bar i {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--bg-31414f, #31414f);
}

.moonpage .mchart {
  width: 100%;
  max-width: 760px;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 4px 0 0;
}

.moonpage .mphases, .moonpage .mslivers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.moonpage .mphases li, .moonpage .mslivers li {
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 0 10px;
  padding: 13px 15px;
  border: 1px solid var(--ln-dce7f0, #dce7f0);
  border-radius: 9px;
  background: var(--bg-ffffff, #fff);
}
.moonpage .mphases svg, .moonpage .mslivers svg { grid-row: 1 / 4; }
.moonpage .mphases .p, .moonpage .mslivers .p { font-weight: 700; color: var(--tx-1f2d3d, #1f2d3d); }
.moonpage .mphases .t, .moonpage .mslivers .t { color: var(--tx-5a6672, #5a6672); font-size: 13px; }
.moonpage .mphases .in, .moonpage .mslivers .in { color: var(--tx-8fa0ad, #8fa0ad); font-size: 12.5px; }
.moonpage .mslivers .in strong { color: var(--tx-1f7a4d, #1f7a4d); }

.moonpage .mdark { max-width: 720px; margin: 6px 0 0; padding: 0; list-style: none; }
.moonpage .mdark li {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ln-eef3f8, #eef3f8);
}
.moonpage .mdark .n { font-weight: 700; color: var(--tx-1f2d3d, #1f2d3d); font-size: 13.5px; }
.moonpage .mdark .barwrap { height: 8px; border-radius: 4px; background: var(--bg-eef3f8, #eef3f8); overflow: hidden; }
.moonpage .mdark .bar2 { display: block; height: 100%; background: linear-gradient(90deg, var(--bg-2c3e66, #2c3e66), var(--bg-101d33, #101d33)); }
.moonpage .mdark .v { color: var(--tx-31414f, #31414f); font-size: 13.5px; white-space: nowrap; }
.moonpage .mdark .s { grid-column: 2 / 4; color: var(--tx-8fa0ad, #8fa0ad); font-size: 12px; }

.moonpage .mcalhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 860px;
}
.moonpage .mcalhead h2 { margin-bottom: 0; }
.moonpage .mcalnav { display: flex; gap: 6px; }
.moonpage .mcalnav button {
  font: inherit;
  min-width: 38px;
  padding: 6px 12px;
  border: 1px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 6px;
  background: var(--bg-ffffff, #fff);
  color: var(--tx-31414f, #31414f);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.moonpage .mcalnav button:hover { background: var(--bg-eef5fb, #eef5fb); border-color: var(--ln-7fb4dd, #7fb4dd); color: var(--tx-005fa0, #005fa0); }
.moonpage .mcalnav #mcal-today { font-size: 13px; }
.moonpage .mcalgrid.loading { opacity: .45; transition: opacity .15s; }
.moonpage .mcalgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  max-width: 860px;
  margin: 6px 0 0;
}
.moonpage .mcalgrid .wd {
  padding: 4px 0;
  color: var(--tx-8fa0ad, #8fa0ad);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}
.moonpage .mcalgrid .cell {
  position: relative;
  min-height: 92px;
  padding: 7px 6px 6px;
  border: 1px solid var(--ln-e7eef4, #e7eef4);
  border-radius: 8px;
  text-align: center;
  background: var(--bg-ffffff, #fff);
}
.moonpage .mcalgrid .cell.today { border-color: var(--ln-b7d5ee, #b7d5ee); background: var(--bg-f5fbff, #f5fbff); box-shadow: inset 0 0 0 1px var(--sh-dcecf9, #dcecf9); }
.moonpage .mcalgrid .dn { display: block; font-size: 12px; color: var(--tx-8fa0ad, #8fa0ad); }
.moonpage .mcalgrid .cell svg { display: block; margin: 2px auto 1px; }
.moonpage .mcalgrid .pc { display: block; font-size: 11.5px; color: var(--tx-31414f, #31414f); }
.moonpage .mcalgrid .rs { display: block; margin-top: 2px; font-size: 10px; color: var(--tx-93a3ae, #93a3ae); line-height: 1.35; }
.moonpage .mcalgrid .ag { display: block; font-size: 10.5px; color: var(--tx-a5b2bc, #a5b2bc); }
.moonpage .mcalgrid .mi {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  color: var(--tx-7c5200, #7c5200);
  font-weight: 700;
}
.moonpage .mcalgrid .mi b { display: block; font-weight: 400; color: var(--tx-9a7b3a, #9a7b3a); }
.moonpage .mcalgrid .cell.milestone { border-color: var(--ln-f0dcae, #f0dcae); background: var(--bg-fffdf6, #fffdf6); }
.moonpage .mcalgrid .empty { min-height: 10px; }

.moonpage .mfactgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  max-width: 860px;
  margin: 6px 0 0;
}
.moonpage .fcard { padding: 14px 16px; border: 1px solid var(--ln-dce7f0, #dce7f0); border-radius: 9px; background: var(--bg-fbfdff, #fbfdff); }
.moonpage .fcard .fk {
  margin: 0 !important;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-8fa0ad, #8fa0ad);
}
.moonpage .fcard .fv { margin: 4px 0 2px !important; font-size: 21px; color: var(--tx-10203a, #10203a); }
.moonpage .fcard .fs { margin: 0 !important; font-size: 12.5px; color: var(--tx-6b7c8a, #6b7c8a); }
.moonpage .mexplain { max-width: 660px; }
.moonpage .mexplain p { color: var(--tx-4a5763, #4a5763); line-height: 1.65; margin: 4px 0 0; }
.moonpage .mback { margin: 34px 0 10px; color: var(--tx-5a6672, #5a6672); }

@media only screen and (max-width: 640px) {
  .moonpage .mhero { gap: 18px; padding: 18px 16px; }
  .moonpage .mphase-name { font-size: 21px; }
  .moonpage .mcompass, .moonpage .mcompass svg { width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
  .moonpage .mcalgrid { gap: 4px; }
  .moonpage .mcalgrid .cell { min-height: 74px; padding: 5px 2px; }
  .moonpage .mcalgrid .rs { display: none; }
  .moonpage .mstrip { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .moonpage .mstrip .rs { display: none; }
  .moonpage .mstrip li { padding: 8px 2px; }
  .moonpage .mdark li { grid-template-columns: 78px 1fr; }
  .moonpage .mdark .v { grid-column: 2; }
  .moonpage th, .moonpage td { padding: 7px 6px; }
}

#content.moonpage { overflow: clip; }

.moonpage {
  --ink: var(--tx-31414f, #31414f);
  --ink2: var(--tx-5a6672, #5a6672);
  --muted: var(--tx-8fa0ad, #8fa0ad);
  --faint: var(--tx-a5b2bc, #a5b2bc);
  --rule: var(--ln-e7eef4, #e7eef4);
  --rule2: var(--ln-dce7f0, #dce7f0);
  --card: var(--bg-fbfdff, #fbfdff);
  --blue-line: var(--ln-b7d5ee, #b7d5ee);
  --blue-bg: var(--bg-f5fbff, #f5fbff);
  --gold-line: var(--ln-f0dcae, #f0dcae);
  --gold-bg: var(--bg-fffdf6, #fffdf6);
  --gold-ink: var(--tx-7c5200, #7c5200);
  --gold-ink2: var(--tx-9a7b3a, #9a7b3a);
  --link: var(--tx-005fa0, #005fa0);
  --measure: 860px;
}

.moonpage section { clear: both; scroll-margin-top: 74px; margin: 0 0 38px; }
.moonpage h2 { margin: 0 0 7px; color: var(--tx-26374a, #26374a); font-size: 21px; font-weight: 700; line-height: 1.3; }
.moonpage h3 { margin: 22px 0 6px; color: var(--tx-26374a, #26374a); font-size: 15.5px; font-weight: 700; }
.moonpage .note { max-width: 70ch; margin: 0 0 14px; color: var(--ink2); font-size: 14px; line-height: 1.6; }
.moonpage .mscroll { max-width: var(--measure); overflow-x: auto; }
.moonpage table { font-variant-numeric: tabular-nums; }

.moonpage .meyebrow {
  margin: 0 0 3px;
  color: var(--gold-ink2);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.moonpage .msubnav {
  top: 0;
  margin: 18px 0 24px;
  padding: 8px 0;
  gap: 5px;
  background: var(--bg-ffffff-a94, rgba(255,255,255,.94));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .18s, box-shadow .18s;
}
.moonpage .msubnav.stuck { border-bottom-color: var(--rule); box-shadow: 0 8px 14px -12px var(--sh-101d33-a50, rgba(16,29,51,.5)); }
.moonpage .msubnav a {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-f2f7fb, #f2f7fb);
  color: var(--ink2);
  font-size: 13px;
}
.moonpage .msubnav a:hover { background: var(--bg-e8f2fa, #e8f2fa); color: var(--link); }
.moonpage .msubnav a.on { background: var(--bg-26374a, #26374a); color: var(--tx-ffffff, #fff); }
.moonpage .msubnav .mback-top {
  padding: 5px 10px;
  background: var(--bg-ffffff, #fff);
  border: 1px solid var(--rule2);
  color: var(--muted);
  line-height: 1.15;
}
.moonpage .msubnav .mback-top:hover { background: var(--blue-bg); border-color: var(--blue-line); color: var(--link); }

.moonpage .msky { max-width: var(--measure); margin: 0 0 14px; padding: 0; }
.moonpage .msky .mskysvg { display: block; width: 100%; height: auto; border-radius: 9px; background: var(--bg-101d33, #101d33); }
.moonpage .msky figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.moonpage .mskyhow { flex: 1 1 250px; }
.moonpage .mskykeys { display: flex; flex-wrap: wrap; gap: 3px 14px; }
.moonpage .mskykeys .ln {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 3px;
  margin-right: 5px;
  border-radius: 2px;
}
.moonpage .mskykeys .ln.night { background: var(--bg-ffd77a, #ffd77a); }
.moonpage .mskykeys .ln.dusk { background: var(--bg-d99a3c, #d99a3c); }
.moonpage .mskykeys .ln.day { background: var(--bg-64799a, #64799a); }

@media only screen and (max-width: 640px) {
  .moonpage .msky .mskysvg text { font-size: 17px; }
}

.moonpage .mwhere {
  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  max-width: var(--measure);
  margin: 0 0 16px;
}
.moonpage table.mdirs { width: 100%; border-collapse: collapse; }
.moonpage table.mdirs th {
  width: 1%;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.moonpage table.mdirs td { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.moonpage table.mdirs tr:last-child th, .moonpage table.mdirs tr:last-child td { border-bottom: 0; }
.moonpage table.mdirs td.t { width: 34%; color: var(--tx-26374a, #26374a); font-size: 17px; font-weight: 700; }
.moonpage table.mdirs td.t.none { font-size: 14px; font-weight: 400; color: var(--muted); }
.moonpage table.mdirs .dy { margin-left: 5px; color: var(--muted); font-size: 12px; font-weight: 400; }
.moonpage table.mdirs td.w { color: var(--ink2); font-size: 13.5px; text-align: right; }
.moonpage table.mdirs .deg { color: var(--faint); }

.moonpage table.mdirs .pin {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
}
.moonpage table.mdirs .pin.r { background: var(--bg-8fd0ae, #8fd0ae); }
.moonpage table.mdirs .pin.h { background: var(--bg-c2d6ec, #c2d6ec); }
.moonpage table.mdirs .pin.s { background: var(--bg-e0946a, #e0946a); }

.moonpage figure.mmap { margin: 0; }
.moonpage figure.mmap img, .moonpage figure.mmap svg { border-radius: 8px; }
.moonpage figure.mmap figcaption { margin: 7px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.moonpage .mwhere-side { display: flex; flex-direction: column; gap: 13px; }
.moonpage .mskytom {
  margin: 0;
  padding: 9px 13px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink2);
  font-size: 13.3px;
  line-height: 1.5;
}
.moonpage .mskytom strong {
  margin-right: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.moonpage .mskywhy { margin: 0; color: var(--ink2); font-size: 13.4px; line-height: 1.6; }
.moonpage .mskywhy strong { color: var(--ink); font-weight: 600; }

.moonpage .mlunbar { max-width: 560px; margin: 0 0 16px; }
.moonpage .mlunbar-track {
  position: relative;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-101d33, #101d33) 0%, var(--bg-b7c9db, #b7c9db) 48%, var(--bg-f2f7fb, #f2f7fb) 50%, var(--bg-b7c9db, #b7c9db) 52%, var(--bg-101d33, #101d33) 100%);
}
.moonpage .mlunbar-tick {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 15px;
  border-radius: 1px;
  background: var(--bg-ffffff-a80, rgba(255,255,255,.8));
  box-shadow: 0 0 0 1px var(--sh-31414f-a30, rgba(49,65,79,.3));
}
.moonpage .mlunbar-now {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--bg-fff6e2, #fff6e2);
  box-shadow: 0 0 0 2px var(--sh-ffffff, #fff), 0 0 0 3px var(--gold-line);
}
.moonpage .mlunbar-cap { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }

.moonpage ul.mphases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
}
.moonpage ul.mphases li {
  display: block;
  padding: 13px 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-ffffff, #fff);
  text-align: center;
}
.moonpage ul.mphases li.is-full { border-color: var(--gold-line); background: var(--gold-bg); }
.moonpage ul.mphases .mph-face { display: block; line-height: 0; margin: 0 0 7px; }
.moonpage ul.mphases .mph-face svg { display: inline-block; }
.moonpage ul.mphases .p { display: block; color: var(--tx-26374a, #26374a); font-weight: 700; font-size: 14px; }
.moonpage ul.mphases .t { display: block; margin-top: 4px; color: var(--ink2); font-size: 13px; }
.moonpage ul.mphases .h { display: block; color: var(--ink2); font-size: 13px; }
.moonpage ul.mphases .in { display: block; margin-top: 5px; color: var(--faint); font-size: 11.5px; }
.moonpage ul.mphases li.is-full .in { color: var(--gold-ink2); }

.moonpage .mnextfull {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--measure);
  margin: 0 0 14px;
  padding: 14px 18px;
  border: 1px solid var(--gold-line);
  border-radius: 9px;
  background: var(--gold-bg);
}
.moonpage .mnextfull-face { flex: none; line-height: 0; }
.moonpage .mnextfull .k {
  margin: 0;
  color: var(--gold-ink2);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.moonpage .mnextfull .v { margin: 2px 0 2px; color: var(--tx-26374a, #26374a); font-size: 19px; font-weight: 700; line-height: 1.25; }
.moonpage .mnextfull .s { margin: 0; color: var(--ink2); font-size: 13.5px; }

.moonpage table.mfull, .moonpage table.mlun { width: 100%; max-width: var(--measure); border-collapse: collapse; }
.moonpage table.mlun { min-width: 500px; }
.moonpage table.mfull th, .moonpage table.mlun th {
  padding: 0 10px 7px 0;
  border-bottom: 1px solid var(--rule2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
}
.moonpage table.mfull .th-dist span { display: block; letter-spacing: 0; text-transform: none; font-size: 10.5px; color: var(--faint); }
.moonpage table.mfull td, .moonpage table.mlun td {
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 13.8px;
}
.moonpage table.mfull tr.past td { color: var(--muted); }
.moonpage table.mfull tr.next td, .moonpage table.mlun tr.now td { background: var(--gold-bg); }
.moonpage table.mfull .td-date .dd { font-weight: 700; }
.moonpage table.mfull .td-date .mm { color: var(--muted); }
.moonpage table.mfull td.dist { white-space: nowrap; }
.moonpage table.mfull td.dist .bar {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 78px;
  height: 4px;
  margin-right: 9px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bg-dcc06a, #dcc06a), var(--bg-e3eaf1, #e3eaf1));
}
.moonpage table.mfull td.dist .bar i {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--bg-ffffff, #fff);
  box-shadow: 0 0 0 1.5px var(--sh-6b7c8a, #6b7c8a);
}
.moonpage table.mfull td.dist .km { color: var(--ink2); font-size: 13px; }
.moonpage .tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 9px;
  background: var(--bg-eef3f8, #eef3f8);
  color: var(--ink2);
  font-size: 11px;
}
.moonpage .tag.next { background: var(--blue-bg); border: 1px solid var(--blue-line); color: var(--link); }
.moonpage .tag.micro { background: var(--bg-eef3f8, #eef3f8); color: var(--muted); }
.moonpage table.mlun .td-dur { white-space: nowrap; }
.moonpage table.mlun .durbar {
  display: inline-block;
  vertical-align: middle;
  width: 62px;
  height: 4px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--bg-eef3f8, #eef3f8);
  overflow: hidden;
}
.moonpage table.mlun .durbar i { display: block; height: 100%; background: var(--bg-dcc06a, #dcc06a); }
.moonpage table.mlun .durtxt { color: var(--ink2); }

.moonpage .mgrid { display: grid; gap: 8px; max-width: var(--measure); }
.moonpage .mgrid--2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.moonpage .mevcard { padding: 13px 15px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); }

.moonpage .mevcard.k-eclipse, .moonpage .mevcard.k-super { border-color: var(--gold-line); background: var(--gold-bg); }
.moonpage .mevcard.past { background: var(--bg-fcfdfe, #fcfdfe); }
.moonpage .mevcard.past .mev-t, .moonpage .mevcard.past .mev-d { color: var(--muted); }
.moonpage .mev-when { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.moonpage .mev-ago { letter-spacing: 0; text-transform: none; }
.moonpage h3.mev-t { margin: 3px 0 4px; color: var(--tx-26374a, #26374a); font-size: 15px; font-weight: 700; }
.moonpage .mev-d { margin: 0; color: var(--ink2); font-size: 13.5px; line-height: 1.5; }
.moonpage .mnone {
  max-width: 70ch;
  margin: 14px 0 0;
  padding: 11px 15px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink2);
  font-size: 13.5px;
  line-height: 1.55;
}
.moonpage .mnone strong { color: var(--ink); font-weight: 600; }

.moonpage .mecl {
  max-width: var(--measure);
  margin: 0 0 10px;
  padding: 15px 17px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--bg-ffffff, #fff);
}
.moonpage .mecl--fullyvisible { border-color: var(--blue-line); background: var(--blue-bg); }
.moonpage .mecl--notvisible { background: var(--card); }
.moonpage .ec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; margin: 0 0 12px; }
.moonpage .ec-kind { color: var(--tx-26374a, #26374a); font-size: 16px; font-weight: 700; }
.moonpage .ec-d { color: var(--ink2); font-size: 13.5px; }
.moonpage .ec-v {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-eef3f8, #eef3f8);
  color: var(--muted);
  font-size: 11.5px;
}
.moonpage .ec-v--yes { background: var(--bg-ffffff, #fff); border: 1px solid var(--blue-line); color: var(--link); }
.moonpage .ec-v--part { background: var(--gold-bg); border: 1px solid var(--gold-line); color: var(--gold-ink); }
.moonpage ol.ec-rail { position: relative; margin: 0; padding: 0 0 0 19px; list-style: none; }

.moonpage ol.ec-rail:before {
  content: "";
  position: absolute;
  left: 4px; top: 9px; bottom: 9px;
  width: 1px;
  background: var(--rule2);
}
.moonpage ol.ec-rail li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) 80px 1fr;
  gap: 3px 14px;
  align-items: center;
  padding: 6px 0;
  font-size: 13.5px;
}
.moonpage ol.ec-rail .ec-dot {
  position: absolute;
  left: -19px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--bg-ffffff, #fff);
  box-shadow: 0 0 0 1.5px var(--sh-6b7c8a, #6b7c8a);
}
.moonpage ol.ec-rail li.down { color: var(--muted); }
.moonpage ol.ec-rail li.down .ec-dot { box-shadow: 0 0 0 1.5px var(--rule2); }
.moonpage ol.ec-rail .ec-k { color: var(--ink); }
.moonpage ol.ec-rail li.down .ec-k { color: var(--muted); }
.moonpage ol.ec-rail .ec-t { color: var(--ink2); }
.moonpage ol.ec-rail .ec-a { color: var(--ink2); font-size: 12.8px; }
.moonpage .ec-altbar {
  display: inline-block;
  vertical-align: middle;
  width: 42px;
  height: 4px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--bg-eef3f8, #eef3f8);
  overflow: hidden;
}
.moonpage .ec-altbar i { display: block; height: 100%; background: var(--bg-9db6ce, #9db6ce); }
.moonpage p.ec-none { margin: 0; color: var(--ink2); font-size: 13.5px; line-height: 1.55; }
.moonpage p.ec-warn {
  margin: 11px 0 0;
  padding: 8px 12px;
  border-radius: 7px;
  background: var(--gold-bg);
  border: 1px solid var(--gold-line);
  color: var(--gold-ink);
  font-size: 12.5px;
  line-height: 1.5;
}

.moonpage ul.mslivers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 8px;
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
}
.moonpage ul.mslivers li { display: block; padding: 13px 15px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg-ffffff, #fff); }
.moonpage ul.mslivers .sl-face { display: block; line-height: 0; margin: 0 0 7px; }
.moonpage ul.mslivers .p { display: block; color: var(--tx-26374a, #26374a); font-weight: 700; font-size: 14.5px; }
.moonpage ul.mslivers .t { display: block; margin: 2px 0 8px; color: var(--ink2); font-size: 12.8px; }
.moonpage ul.mslivers .win { display: block; color: var(--ink2); font-size: 12.5px; }
.moonpage ul.mslivers .win strong { color: var(--ink); }
.moonpage ul.mslivers .winbar { display: block; height: 4px; margin: 0 0 6px; border-radius: 2px; background: var(--bg-eef3f8, #eef3f8); overflow: hidden; }
.moonpage ul.mslivers .winbar i { display: block; height: 100%; background: var(--bg-dcc06a, #dcc06a); }

.moonpage ul.mdark { max-width: var(--measure); margin: 0; padding: 0; list-style: none; }
.moonpage ul.mdark li {
  display: grid;
  grid-template-columns: 104px 1fr 122px 96px;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
}
.moonpage ul.mdark .n { color: var(--tx-26374a, #26374a); font-weight: 700; }
.moonpage ul.mdark .barwrap { height: 7px; border-radius: 4px; background: var(--bg-eef3f8, #eef3f8); overflow: hidden; }
.moonpage ul.mdark .bar2 { display: block; height: 100%; background: var(--bg-26374a, #26374a); }
.moonpage ul.mdark .v { color: var(--ink2); }
.moonpage ul.mdark .s { color: var(--muted); font-size: 12.5px; text-align: right; }

.moonpage .fcard2 { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); }
.moonpage .fcard2 .fhead { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.moonpage .fcard2 .fn { color: var(--tx-26374a, #26374a); font-weight: 700; font-size: 14.5px; }
.moonpage .fcard2 .ft { color: var(--muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.moonpage .fcard2 .fw { margin: 0; color: var(--ink2); font-size: 13.2px; line-height: 1.5; }
.moonpage .fcard2 .flon { margin: 6px 0 0; color: var(--faint); font-size: 11.5px; }

.moonpage .mplan {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
  max-width: var(--measure);
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--card);
}
.moonpage .mplan label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.moonpage .mplan select, .moonpage .mplan input {
  padding: 7px 10px;
  border: 1px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 6px;
  background: var(--bg-ffffff, #fff);
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
}
.moonpage .mplan-out {
  flex: 1 1 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--blue-line);
  border-radius: 8px;
  background: var(--blue-bg);
  color: var(--ink);
  font-size: 13.8px;
  line-height: 1.55;
}
.moonpage .mplan-out.none { border-color: var(--rule); background: var(--bg-ffffff, #fff); color: var(--muted); }

.moonpage .fcard .fv { margin: 0; color: var(--tx-26374a, #26374a); font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.moonpage .fcard .fu { color: var(--muted); font-size: 13px; font-weight: 400; }
.moonpage .mexplain { max-width: 70ch; margin: 24px 0 0; }
.moonpage .mexplain h3 { margin: 18px 0 4px; }
.moonpage .mexplain h3:first-child { margin-top: 0; }
.moonpage .mexplain p { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.6; }

.moonpage ul.mnear a { background: var(--bg-f2f7fb, #f2f7fb); color: var(--link); font-size: 13px; }
.moonpage ul.mnear a:hover { background: var(--blue-bg); }
.moonpage .mtilt { margin: 2px 0 10px; color: var(--tx-a8bdd8, #a8bdd8); font-size: 14px; }
.moonpage .mtilt strong { color: var(--tx-fff6e2, #fff6e2); font-weight: 600; }
.moonpage .mfoot {
  max-width: 70ch;
  margin: 22px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
}

@media only screen and (max-width: 640px) {
  .moonpage h2 { font-size: 19px; }
  .moonpage .mwhere { grid-template-columns: 1fr; }
  .moonpage figure.mmap img, .moonpage figure.mmap svg { width: 100%; height: auto; }
  .moonpage .mnextfull { gap: 12px; padding: 12px 14px; }
  .moonpage .mnextfull .v { font-size: 17px; }
  .moonpage ol.ec-rail li { grid-template-columns: 1fr auto; }
  .moonpage ol.ec-rail .ec-a { grid-column: 1 / -1; }
  .moonpage ul.mdark li { grid-template-columns: 1fr 1fr; }
  .moonpage ul.mdark .barwrap { grid-column: 1 / -1; order: 3; }
  .moonpage ul.mdark .s { text-align: left; }
}

.moonpage .mfacets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0 22px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--rule);
}
.moonpage .mfacets a, .moonpage .mfacets span {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
}
.moonpage .mfacets a { background: var(--bg-f2f7fb, #f2f7fb); color: var(--link); }
.moonpage .mfacets a:hover { background: var(--blue-bg); }
.moonpage .mfacets .on { background: var(--bg-26374a, #26374a); color: var(--tx-ffffff, #fff); }

.moonpage.moonart h1 { margin-bottom: 4px; }
.moonpage .mart-hero {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  max-width: var(--measure);
  margin: 14px 0 26px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--card);
}
.moonpage .mart-face { flex: none; line-height: 0; }
.moonpage .mart-lead { flex: 1 1 260px; }
.moonpage .mart-lead p { margin: 0 0 10px; color: var(--ink); font-size: 15.5px; line-height: 1.62; }
.moonpage .mart-lead p:last-child { margin-bottom: 0; }
.moonpage .mart-block { margin: 0 0 26px; }
.moonpage .mart-prose { max-width: 70ch; }
.moonpage .mart-prose p { margin: 0 0 11px; color: var(--ink2); font-size: 14.5px; line-height: 1.68; }
.moonpage .mart-prose p:last-child { margin-bottom: 0; }
.moonpage .mart-prose i { color: var(--ink); }
.moonpage .mart-search { display: flex; gap: 7px; max-width: 380px; margin: 12px 0 0; }
.moonpage .mart-search input {
  flex: 1;
  padding: 8px 11px;
  border: 1px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
}
.moonpage .mart-search button {
  padding: 8px 16px;
  border: 1px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 7px;
  background: var(--bg-ffffff, #fff);
  color: var(--link);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.moonpage .mart-search button:hover { background: var(--blue-bg); border-color: var(--blue-line); }
.moonpage .mevcard .mev-t a { text-decoration: none; }
.moonpage table.mfull .mm { color: var(--muted); font-size: 12.5px; }
.moonpage table.mfull .none { color: var(--faint); }
.moonpage #hub h3 { margin: 16px 0 5px; font-size: 14px; color: var(--ink2); }

@media only screen and (max-width: 640px) {
  .moonpage .mart-hero { flex-direction: column; gap: 14px; padding: 14px; }
}

.moonpage ul.mtilts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 8px;
  max-width: var(--measure);
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.moonpage ul.mtilts li {
  padding: 13px 8px 11px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-101d33, #101d33);
  text-align: center;
}

.moonpage ul.mtilts li.below { opacity: .5; }
.moonpage ul.mtilts .tf { display: block; line-height: 0; margin: 0 0 8px; }
.moonpage ul.mtilts .tf svg { display: inline-block; }
.moonpage ul.mtilts .tl { display: block; color: var(--tx-fff6e2, #fff6e2); font-weight: 700; font-size: 14px; }
.moonpage ul.mtilts .tc { display: block; color: var(--tx-a8bdd8, #a8bdd8); font-size: 12.5px; }
.moonpage ul.mtilts .ta { display: block; margin-top: 3px; color: var(--tx-7f9bbd, #7f9bbd); font-size: 11.5px; }

.moonpage ul.msizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 4px;
  max-width: var(--measure);
  margin: 0 0 12px;
  padding: 12px 10px;
  border-radius: 9px;
  background: var(--bg-101d33, #101d33);
  list-style: none;
}
.moonpage ul.msizes li { text-align: center; padding: 4px 0 6px; border-radius: 7px; }
.moonpage ul.msizes li.me { background: var(--bg-fff6e2-a09, rgba(255,246,226,.09)); }
.moonpage ul.msizes .sz { display: block; line-height: 0; }
.moonpage ul.msizes .sm { display: block; margin-top: 3px; color: var(--tx-a8bdd8, #a8bdd8); font-size: 11.5px; }
.moonpage ul.msizes .sd { display: block; color: var(--tx-7f9bbd, #7f9bbd); font-size: 10.5px; }
.moonpage ul.msizes .st { display: block; margin-top: 2px; color: var(--tx-ffd977, #ffd977); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; }
.moonpage ul.msizes .st.mi { color: var(--tx-93a4b4, #93a4b4); }

.moonpage .mcount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  max-width: var(--measure);
  margin: -12px 0 24px;
  padding: 11px 16px;
  border: 1px solid var(--gold-line);
  border-radius: 9px;
  background: var(--gold-bg);
}
.moonpage .mcount .k {
  color: var(--gold-ink2);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.moonpage .mcount .v { color: var(--tx-26374a, #26374a); font-size: 16px; font-weight: 700; }
.moonpage .mcount .c { margin-left: auto; color: var(--gold-ink); font-size: 14px; font-variant-numeric: tabular-nums; }

.moonpage .mics { margin: -6px 0 0; }
.moonpage .mics a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--rule2);
  border-radius: 7px;
  background: var(--bg-ffffff, #fff);
  color: var(--link);
  font-size: 13.5px;
  text-decoration: none;
}
.moonpage .mics a:hover { background: var(--blue-bg); border-color: var(--blue-line); }
.moonpage .mics span { margin-left: 10px; color: var(--muted); font-size: 12.5px; }

.moonpage .mslider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  max-width: var(--measure);
  padding: 20px 22px;
  border-radius: 9px;
  background: radial-gradient(120% 150% at 15% 10%, var(--bg-1d3157, #1d3157) 0%, var(--bg-101d33, #101d33) 45%, var(--bg-0a1120, #0a1120) 100%);
}
.moonpage .msl-face { flex: none; line-height: 0; }
.moonpage .msl-data { flex: 1 1 250px; }
.moonpage .msl-name { margin: 0 0 10px; color: var(--tx-fff6e2, #fff6e2); font-size: 20px; font-weight: 700; }
.moonpage .msl-data .mfacts { margin-bottom: 14px; }
.moonpage .msl-data input[type=range] { width: 100%; accent-color: var(--tx-ffd977, #ffd977); cursor: pointer; }
.moonpage .msl-ends { display: flex; justify-content: space-between; margin: 5px 0 0; color: var(--tx-7f9bbd, #7f9bbd); font-size: 10.5px; }
.moonpage .msl-ends span:nth-child(even) { opacity: .7; }

.moonpage .mdatef {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: var(--measure);
  margin: 14px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--card);
}
.moonpage .mdatef label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.moonpage .mdatef input[type=date] {
  padding: 7px 10px;
  border: 1px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
.moonpage .mdatef button {
  padding: 8px 16px;
  border: 1px solid var(--blue-line);
  border-radius: 7px;
  background: var(--blue-bg);
  color: var(--link);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.moonpage .mdatef-hint { flex: 1 1 100%; color: var(--faint); font-size: 12.5px; }
.moonpage .mdate-name { margin: 0 0 3px !important; color: var(--tx-26374a, #26374a); font-size: 21px; font-weight: 700; }
.moonpage .mdate-sub { margin: 0 0 12px !important; color: var(--ink2); font-size: 14px; }
.moonpage .mdate-nav { display: flex; gap: 8px; max-width: var(--measure); margin: -8px 0 24px; }
.moonpage .mdate-nav a {
  padding: 6px 13px;
  border: 1px solid var(--rule2);
  border-radius: 999px;
  background: var(--bg-ffffff, #fff);
  color: var(--link);
  font-size: 13px;
  text-decoration: none;
}
.moonpage .mdate-nav a:hover { background: var(--blue-bg); border-color: var(--blue-line); }
.moonpage .mdate-nav .md-today { margin-left: auto; color: var(--muted); }

.moonpage .meffect {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  max-width: var(--measure);
  margin: 0 0 12px;
}
.moonpage .mef { margin: 0; }
.moonpage .mef svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.moonpage .mef figcaption { margin: 6px 0 0; text-align: center; }
.moonpage .mef .ef-lat { display: block; color: var(--tx-26374a, #26374a); font-weight: 700; font-size: 14px; }
.moonpage .mef .ef-ej { display: block; color: var(--muted); font-size: 11.5px; }
.moonpage .mef .ef-d { display: block; margin-top: 2px; color: var(--gold-ink2); font-size: 11.5px; }

.moonpage ul.mpgal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  max-width: var(--measure);
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.moonpage ul.mpgal li { margin: 0; }
.moonpage ul.mpgal img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-101d33, #101d33);
}
.moonpage ul.mpgal .mpg-c { display: block; margin-top: 6px; color: var(--tx-26374a, #26374a); font-size: 13px; font-weight: 700; }
.moonpage ul.mpgal .mpg-l { display: block; color: var(--muted); font-size: 12px; }
.moonpage ul.mpgal .mpg-n { display: block; margin-top: 3px; color: var(--ink2); font-size: 12.5px; line-height: 1.45; }
.moonpage .mpg-hint { margin-left: 10px; color: var(--muted); font-size: 12.5px; }

.moonpage .mp-form { max-width: 560px; margin: 18px 0 0; }
.moonpage .mp-l { display: block; margin: 16px 0 5px; color: var(--tx-26374a, #26374a); font-size: 14px; font-weight: 700; }
.moonpage .mp-l span { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.moonpage .mp-form input[type=text], .moonpage .mp-form input[type=email],
.moonpage .mp-form input[type=date], .moonpage .mp-form textarea, .moonpage .mp-form input[type=file] {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--ln-cfdde8, #cfdde8);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  box-sizing: border-box;
}
.moonpage .mp-hint { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.moonpage .mp-terms { margin: 18px 0 0; color: var(--ink2); font-size: 12.8px; line-height: 1.55; }
.moonpage .mp-send {
  margin: 14px 0 0;
  padding: 11px 22px;
  border: 1px solid var(--blue-line);
  border-radius: 8px;
  background: var(--blue-bg);
  color: var(--link);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.moonpage .mp-send:hover { background: var(--bg-e8f2fa, #e8f2fa); }

.moonpage .mp-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.moonpage .mp-err {
  max-width: 560px;
  padding: 11px 15px;
  border: 1px solid var(--ln-e3b9b9, #e3b9b9);
  border-radius: 8px;
  background: var(--bg-fdf5f5, #fdf5f5);
  color: var(--tx-9a3b3b, #9a3b3b);
  font-size: 14px;
}
.moonpage .mp-ok { max-width: 640px; padding: 18px 20px; border: 1px solid var(--gold-line); border-radius: 10px; background: var(--gold-bg); }
.moonpage .mp-ok-t { margin: 0 0 8px; color: var(--tx-26374a, #26374a); font-size: 18px; font-weight: 700; }
.moonpage .mp-ok p { color: var(--ink2); font-size: 14px; line-height: 1.6; }

.sundet {
  clear: both;
  float: left;
  width: 100%;
  box-sizing: border-box;
  margin: 18px 0 0;
  border: 1px solid var(--ln-dce7f0, #dce7f0);
  border-radius: 6px;
  background: var(--bg-fbfdff, #fbfdff);
}
.sundet > summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.sundet > summary::-webkit-details-marker { display: none; }
.sundet > summary:hover { background: var(--bg-f4f9fd, #f4f9fd); }
.sundet .sd-more {
  color: var(--tx-005fa0, #005fa0);
  font-size: 14px;
  font-weight: 700;
}

.sundet > summary { position: relative; padding-right: 44px; }
.sundet .sd-chev {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ln-7fa8c6, #7fa8c6);
  border-bottom: 2px solid var(--ln-7fa8c6, #7fa8c6);
  transform: rotate(45deg);
  transform-origin: 70% 70%;
  transition: transform .15s ease;
}
.sundet[open] > summary .sd-chev { transform: rotate(-135deg); }
.sundet > summary:hover .sd-chev { border-color: var(--ln-005fa0, #005fa0); }

.sundet[open] > summary { border-bottom: 1px solid var(--ln-eef3f8, #eef3f8); }
.sundet .sd-peek {
  color: var(--tx-8fa0ad, #8fa0ad);
  font-size: 13px;
}
.sundet[open] .sd-peek { display: none; }
.sundet .sd-body { padding: 2px 16px 14px; }
.sundet .sd-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.sundet .sd-tbl th, .sundet .sd-tbl td {
  padding: 9px 4px;
  border-top: 1px solid var(--ln-eef3f8, #eef3f8);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
.sundet .sd-tbl thead th {
  border-top: 0;
  padding-top: 0;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx-8fa0ad, #8fa0ad);
  font-weight: 400;
}
.sundet .sd-tbl tbody th {

  text-align: left;
  vertical-align: middle;
  font-weight: 400;
  color: var(--tx-1f2d3d, #1f2d3d);
  white-space: normal;
  padding: 9px 0;
}
.sundet .sd-tbl td { color: var(--tx-005fa0, #005fa0); font-variant-numeric: tabular-nums; }

.sundet .sd-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  border: 1px solid var(--ln-b7cddf, #b7cddf);
  border-radius: 50%;
  color: var(--tx-7fa8c6, #7fa8c6);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: 1px;
}
.sundet .sd-i:hover, .sundet .sd-i:focus {
  background: var(--bg-005fa0, #005fa0);
  border-color: var(--ln-005fa0, #005fa0);
  color: var(--tx-ffffff, #fff);
  outline: none;
}

.sundet .sd-tbl tbody th { position: relative; }
.sundet .sd-i { position: static; }
.sundet .sd-i::after {
  content: attr(data-t);
  position: absolute;
  left: 0;
  top: calc(100% - 3px);
  z-index: 3;
  width: max-content;
  max-width: min(340px, 78vw);
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--bg-26374a, #26374a);
  color: var(--tx-ffffff, #fff);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
.sundet .sd-i:hover::after, .sundet .sd-i:focus::after { opacity: 1; visibility: visible; }

.sundet .sd-sub {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: var(--tx-8fa0ad, #8fa0ad);
  white-space: normal;
}

.sundet .sd-sec th {
  padding: 22px 4px 6px 0;
  text-align: left;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx-8fa0ad, #8fa0ad);
  border-top: 1px solid var(--ln-eef3f8, #eef3f8);
}
.sundet .sd-tbl td[colspan] { white-space: normal; }
.sundet .sd-vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media only screen and (max-width: 600px) {
  .sundet > summary { padding: 10px 40px 10px 13px; }
  .sundet .sd-chev { right: 13px; }
  .sundet .sd-body { padding: 2px 13px 12px; }
  .sundet .sd-tbl { font-size: 13px; }
  .sundet .sd-tbl th, .sundet .sd-tbl td { padding: 8px 2px; }
  .sundet .sd-tbl tbody th { padding: 8px 0; }
  .sundet .sd-sec th { padding-top: 18px; }
}

.sundet .moonface {
  vertical-align: -6px;
  margin-right: 7px;
}

.sundet .sd-off { display: none; }

.sundet .sd-filters {
  clear: both;
  overflow: hidden;
  margin: 0 0 4px;
}
.sundet .sd-ct {
  padding: 5px 13px 6px 32px;
  background: var(--bg-efefef, #EFEFEF) url('/img/filter.png?v=2') no-repeat 7px 4px;
  background-size: 18px 18px;
  border: 1px solid var(--ln-767676, #767676);
  border-radius: 2px;
  float: right;
  margin: 4px 0 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--tx-000000, black);
  cursor: pointer;
}
.sundet .sd-cfg { clear: both; }
.sundet .sd-cfg .cb {
  padding: 24px 26px;
  border-radius: 5px;
  background: var(--bg-f8f8f1, #F8F8F1);
  float: right;
  max-width: 700px;
  margin-bottom: 12px;
  clear: both;
}
.sundet .sd-cfg h4 {
  margin: 0 0 10px;
  text-transform: uppercase;
  font-size: 13px;
}

.sundet .sd-cfg .cbcols {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
}
.sundet .sd-cfg .cbcol h4 { margin-top: 0; }
.sundet .sd-cfg label {
  display: block;
  line-height: 28px;
  font-size: 14px;
  color: var(--tx-31414f, #31414f);
  cursor: pointer;
}
.sundet .sd-cfg .arrow-up { margin-right: 60px; margin-top: 12px; }

@media only screen and (max-width: 600px) {
  .sundet .sd-ct span { display: none; }
  .sundet .sd-cfg .cb { padding: 18px; }
  .sundet .sd-cfg .cbcols { gap: 0 22px; }
}

.monthsnav a.mn-loading{
  opacity: .6;
  pointer-events: none;
}
.monthsnav .nextmonth a.mn-loading::after,
.monthsnav .prevmonth a.mn-loading::before{
  content: '';
  display: inline-block;
  width: .75em;
  height: .75em;
  vertical-align: -.08em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mn-spin .7s linear infinite;
}
.monthsnav .nextmonth a.mn-loading::after{ margin-left: .4em; }
.monthsnav .prevmonth a.mn-loading::before{ margin-right: .4em; }
@keyframes mn-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .monthsnav a.mn-loading::after, .monthsnav a.mn-loading::before{ animation: none; border-right-color: currentColor; opacity: .5; }
}

body.admin .regsearch { margin-bottom: 36px; }

#ideabox p.thanks-place { margin-top: 8px; font-size: 15px; }

.ss-tip { position: absolute; z-index: 1000; max-width: 260px; background: var(--bg-043051, #043051); color: var(--tx-ffffff, #fff); font-size: 13px; line-height: 1.35; padding: 5px 9px; border-radius: 3px; text-wrap: balance; box-shadow: 0 3px 10px var(--sh-000000-a18, rgba(0,0,0,.18)); pointer-events: none; text-align: center; }

.ss-tip.long { max-width: 320px; text-align: left; white-space: pre-line; }
#calendar .cal-ico { vertical-align: -2px; }
#calendar .season, #calendar .moonphase, #calendar .dstchange, #calendar .eclmark { outline: none; }

p.didyoumean { display: inline-block; margin: 2px 0 12px; padding: 7px 13px; background: var(--bg-fff8e1, #fff8e1); border: 1px solid var(--ln-f3d27a, #f3d27a); border-radius: 6px; font-size: 16px; }
p.didyoumean a { font-weight: bold; }

div.dymlist { display: inline-block; box-sizing: border-box; min-width: min(434px, 100%); margin: 2px 0 14px; padding: 19px 21px 16px; background: var(--bg-f6f8fb, #f6f8fb); border: 1px solid var(--ln-e3e8ee, #e3e8ee); border-radius: 3px; color: var(--tx-1f2a36, #1f2a36); font-size: 16px; }
div.dymlist p { margin: 0 0 6px; }
div.dymlist ul { margin: 0; padding: 0 0 0 20px; }
div.dymlist li { margin: 0 0 5px; line-height: 1.4; }
div.dymlist a { font-weight: bold; }

@media only screen and (max-width: 700px) { div.dymlist { margin-top: 16px; } }

p.clockchange { margin: 4px 0 14px; padding: 8px 12px; background: var(--bg-f3f7fb, #f3f7fb); border: 1px solid var(--ln-d5e3ef, #d5e3ef); border-radius: 6px; font-size: 15px; }
p.clockchange .adminonly { font-size: 11px; color: var(--tx-8a5a00, #8a5a00); background: var(--bg-fff3cd, #fff3cd); border: 1px solid var(--ln-e0c76b, #e0c76b); border-radius: 4px; padding: 0 5px; margin-left: 6px; }
#twodays p.clockchange {
  margin: 20px 0 0px;
  font-size: 14px;
  width: calc(100% - 75px);
}

p.clockchange .arr { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
p.clockchange .ico { display: inline-block; width: 1.25em; margin-right: 8px; }

p.clockchange .cc-out { display: block; margin-top: 4px; padding-left: calc(1.25em + 8px); }
@media only screen and (max-width: 480px) { p.clockchange .cc-out { padding-left: 0; } }

p.clockchange .cc-out.cc-join { display: inline; margin: 0; padding: 0; }

@media only screen and (min-width: 481px) {
  p.clockchange { padding-left: calc(12px + 1.25em + 8px); text-indent: calc(-1.25em - 8px); }
  p.clockchange .cc-out { padding-left: 0; text-indent: 0; }
  p.clockchange .cc-out.cc-join { text-indent: 0; }
  p.clockchange .ico, p.clockchange .cc-sun { text-indent: 0; }
}

p.clockchange .cc-sun.cc-a1 { grid-template-columns: max-content 1fr max-content 1fr 1fr 1fr; }
p.clockchange .cc-sun.cc-a3 { grid-template-columns: max-content 1fr 1fr 1fr max-content 1fr; }
p.clockchange .cc-sun { display: grid; grid-template-columns: max-content 1fr 1fr max-content 1fr 1fr; column-gap: 14px;    row-gap: 3px; align-items: center; justify-items: center;
  width: max-content; max-width: 100%; box-sizing: border-box; margin: 10px 0 2px calc(1.25em + 8px);    padding: 6px 14px 7px; border: 1px solid var(--ln-dce7f0, #dce7f0); border-radius: 4px; background: var(--bg-ffffff, #fff); }
p.clockchange .cc-sun .cc-l { justify-self: start; }
p.clockchange .cc-ds { display: none; }
@media only screen and (max-width: 480px) { p.clockchange .cc-dl { display: none; } p.clockchange .cc-ds { display: inline; } }
p.clockchange .cc-d { font-size: 12px; color: var(--tx-5a6672, #5a6672); }
p.clockchange .cc-l { display: inline-flex; align-items: center; gap: 6px; color: var(--tx-3d4a57, #3d4a57); }
p.clockchange .cc-was { color: var(--tx-5a6672, #5a6672); }
p.clockchange .cc-now { font-weight: bold; }
p.clockchange .cc-rise { color: var(--tx-cfa22b, #CFA22B); }
p.clockchange .cc-set { color: var(--tx-ce2c27, #CE2C27); }
p.clockchange .cc-sun .cc-l { white-space: nowrap; }

@media only screen and (max-width: 480px) { p.clockchange .cc-sun { column-gap: 8px; padding: 6px 8px 7px; font-size: 13px; margin-left: 0; }
@media only screen and (max-width: 380px) { p.clockchange .cc-sun { column-gap: 5px; padding: 6px 6px 7px; font-size: 12.5px; } }
  p.clockchange .cc-lt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

#twodays p.solareclipse { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 9px 12px;
  width: calc(100% - 20px); box-sizing: border-box; background: var(--bg-fbf7ef, #fbf7ef); border: 1px solid var(--ln-eadfc6, #eadfc6); border-radius: 6px; font-size: 14px; line-height: 1.5; }
#twodays p.clockchange + p.solareclipse { margin-top: 10px; }
p.solareclipse .ico { flex: none; }
p.solareclipse .safety { display: block; margin-top: 3px; font-size: 13px; color: var(--tx-6b5d45, #6b5d45); }

.tznote { font-size: 13px; line-height: 1.45; color: var(--tx-666666, #666); margin: 6px 0 10px; }

.tznote.zonenote { font-size: inherit; line-height: inherit; color: inherit; }

.monthsnav.calnav { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.monthsnav.calnav .prevmonth, .monthsnav.calnav .nextmonth { float: none; width: auto; flex: 1 1 0; }
.monthsnav.calnav .curmonth { flex: 0 1 auto; text-align: center; margin: 8px 0; }
.monthsnav.calnav .curmonth strong { font-size: 1.15em; display: block; line-height: 1.2; }
.monthsnav.calnav .curmonth small { display: block; font-size: 12px; line-height: 1.2; margin-top: 0; }
@media (max-width: 640px) {

  .monthsnav.calnav .curmonth { order: -1; flex-basis: 100%; margin: 4px 0 0; }
}

.mdl { position: relative; clear: both; margin: 0 0 26px; padding-top: 30px; max-width: 980px; }

.monthsnav.mn-under { margin-top: -30px; }
.mdl-h { font-size: 20px; margin: 0 0 6px; }
.mdl-svg { display: block; width: 100%; height: auto; font-family: Helvetica, Arial, sans-serif; }
.mdl-key, .mdl-key2 { font-size: 13px; color: var(--tx-555555, #555); margin: 0 0 6px; text-align: center; }
.mdl-key2 { margin: 6px 0 0; }
.mdl .k { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin: 0 4px 0 10px; }
.mdl .k-day { background: linear-gradient(var(--bg-ffe9a8, #ffe9a8), var(--bg-ffb45e, #ffb45e)); margin-left: 0; }
.mdl .k-tw { background: var(--bg-ffd59a, #ffd59a); opacity: .6; }
.mdl .k-up { background: var(--bg-f2b34a, #f2b34a); }
.mdl .k-down { background: var(--bg-6fa8e0, #6fa8e0); }
.mdl-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--bg-ffffff, #fff); border: 1px solid var(--ln-d8dee6, #d8dee6); border-radius: 6px;
  box-shadow: 0 4px 14px var(--sh-000000-a15, rgba(0,0,0,.15)); padding: 7px 10px; font-size: 13px; line-height: 1.45; color: var(--tx-222222, #222); white-space: nowrap; }
.mdl-hit { cursor: crosshair; }

.mdl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media only screen and (max-width: 640px) {
  .mdl-svg { min-width: 640px; }
  .mdl-svg text { font-size: 16px; }
}
.mdl-intro, .mdl-story p { margin: 0 0 10px; line-height: 1.55; max-width: 900px; }
.mdl-story { margin-bottom: 18px; }
.mdl-key-under { margin: 8px 0 0; }

.mdx { margin: 6px 0 26px; padding: 14px 16px 6px; background: var(--bg-fbf7ef, #fbf7ef); border: 1px solid var(--ln-eadfc6, #eadfc6); border-radius: 8px; max-width: 980px; }
.mdx-hint { margin: 0 0 10px; font-size: 14px; color: var(--tx-444444, #444); }
.mdx-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; }
.mdx-ctl .mdx-r { flex: 1; min-width: 180px; max-width: 520px; accent-color: var(--tx-d9962a, #d9962a); }
.mdx-ctl .mdx-play { font-size: 13px; padding: 4px 12px; border: 1px solid var(--ln-d8c9a6, #d8c9a6); border-radius: 6px; background: var(--bg-ffffff, #fff); cursor: pointer; }
.mdx-day { font-size: 15px; min-width: 60px; }
.mdx-svg { display: block; width: 100%; height: auto; font-family: Helvetica, Arial, sans-serif; }
@media only screen and (max-width: 640px) { .mdx-svg { min-width: 640px; } .mdx-svg text { font-size: 15px; } }

#twodays p.polarseason { margin: 20px 0 0; padding: 9px 12px; width: calc(100% - 20px); box-sizing: border-box;
  background: var(--bg-f3f7fb, #f3f7fb); border: 1px solid var(--ln-d5e3ef, #d5e3ef); border-radius: 6px; font-size: 14px; line-height: 1.5; }
#twodays p.clockchange + p.polarseason, #twodays p.solareclipse + p.polarseason { margin-top: 10px; }
p.polarseason .line { display: block; }
p.polarseason .line + .line { margin-top: 4px; }
p.polarseason .note { display: block; margin-top: 4px; font-size: 12.5px; color: var(--tx-777777, #777); }

.polarfacts { clear: both; margin: 0 0 4px; padding: 10px 12px; color: var(--tx-333333, #333); text-align: left; background: var(--bg-f3f7fb, #f3f7fb); border: 1px solid var(--ln-d5e3ef, #d5e3ef); border-radius: 6px; font-size: 14px; line-height: 1.45; }
.polarfacts .season + .season { margin-top: 14px; }
.polarfacts .y { color: var(--tx-999999, #999); }
#locationfacts .polarfacts strong { color: var(--tx-333333, #333); }
.polarfacts .intro { margin-bottom: 10px; }
.polarfacts .t { margin-bottom: 5px; text-align: center; }

.eclfacts .t { text-align: left; }

.eclipses li { padding: 7px 0; }
.polarfacts .tiles { display: flex; align-items: center; justify-content: center; gap: 10px; }
.polarfacts .tile { display: block; width: 72px; border-radius: 6px; overflow: hidden; text-align: center; background: var(--bg-ffffff, #fff); border: 1px solid var(--ln-d5e3ef, #d5e3ef); }
.polarfacts .tile span { display: block; }
.polarfacts .tile .m { background: var(--bg-043050, #043050); color: var(--tx-ffffff, #fff); font-size: 11px; text-transform: uppercase; padding: 1px 0; }
.polarfacts .day .tile .m { background: var(--bg-ffb45e, #ffb45e); color: var(--tx-333333, #333); }
.polarfacts .tile .dd { font-size: 20px; font-weight: 700; line-height: 1.2; }
.polarfacts .tile .y { font-size: 10.5px; color: var(--tx-999999, #999); padding-bottom: 2px; }
.polarfacts .mid { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--tx-999999, #999); }
.polarfacts .len { font-size: 13px; line-height: 1.1; text-align: center; }
.polarfacts .len small { display: block; font-size: 11px; }

.polarfacts .arr { position: relative; display: block; width: 40px; height: 1px; background: currentColor; }
.polarfacts .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: center; }
.polarfacts .note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ln-d5e3ef, #d5e3ef); font-size: 12px; color: var(--tx-777777, #777); text-align: center; }

.spv{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:var(--bg-02101e, #02101e);padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.spv[hidden]{display:none}
.spv figure{margin:0;max-width:94vw;text-align:center}
.spv img{display:block;max-width:94vw;max-height:calc(100vh - 120px);width:auto;height:auto;margin:0 auto;border-radius:3px;transition:opacity .15s}
.spv img.ld{opacity:.35}
.spv figcaption{margin-top:12px;color:var(--tx-c9d6e2, #c9d6e2);font-size:14px;line-height:1.5}
.spv figcaption a{color:var(--tx-f9bf0f, #f9bf0f);text-decoration:none}
.spv figcaption a:hover{text-decoration:underline}
.spv .spv-n{margin-left:12px;color:var(--tx-8ea3b6, #8ea3b6)}
.spv button{position:absolute;display:flex;align-items:center;justify-content:center;border:0;border-radius:3px;background:none;color:var(--tx-ffffff, #fff);opacity:.75;cursor:pointer;padding:0;width:56px;height:80px}
.spv button svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spv button:hover{opacity:1;background:var(--bg-ffffff-a08, rgba(255,255,255,.08))}
.spv button:focus{outline:none}
.spv button:focus-visible{opacity:1;outline:2px solid var(--ln-ffffff-a45, rgba(255,255,255,.45));outline-offset:-2px}
.spv .spv-x{top:calc(env(safe-area-inset-top,0px) + 6px);right:8px;width:48px;height:48px}
.spv .spv-p{left:8px;top:calc(50% - 40px)}
.spv .spv-q{right:8px;top:calc(50% - 40px)}
@media (max-width:640px){.spv button.spv-p,.spv button.spv-q{display:none}.spv img{max-height:calc(100vh - 140px)}}
html.spv-on,html.spv-on body{overflow:hidden}

@media print {
  @page cal { size: landscape; margin: 10mm; }
  @page calv { size: portrait; margin: 10mm; }
  html:has(> body.calpage), html:has(> body.month) { color-scheme: light !important; background: Canvas !important; }
  body.calpage, body.month { background: Canvas !important; color: CanvasText; font-size: 9pt; }
  body.calpage { page: cal; }
  body.month { page: calv; }
  body.month:has(table#month thead th:nth-child(9 of :not([style*="none"]))) { page: cal; }
  body.calpage > :not(#content), body.month > :not(#content),
  html:has(> body.calpage) > :not(head, body), html:has(> body.month) > :not(head, body) { display: none !important; }
  body.calpage #content, body.month #content {
    max-width: none; margin: 0; padding: 0; overflow: visible; background: none !important;
  }

  body.calpage #content { overflow: hidden; }
  body.calpage #content *, body.month #content * {
    color: CanvasText !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body.calpage #content a, body.month #content a { text-decoration: none; }

  body.calpage #content .tooltiptext, body.month #content .tooltiptext { display: none !important; }

  body.calpage #content > :not(#calendartitle, .calwhat, #calendarthings, #calendarthingslarge),
  body.calpage #content > [id^="calendarthings"] > :not(.tznote, table#calendar, .hcnotice),
  body.calpage .calmore { display: none !important; }
  body.calpage #calendartitle { font-size: 10pt; font-weight: normal; margin: 0; }

  body.calpage .calwhat {
    font-size: 16pt; line-height: 1.2; margin: 1pt 0 3pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.calpage .tznote, body.calpage .hcnotice {
    font-size: 8pt; line-height: 1.3; margin: 0 0 3pt; padding: 0; border: 0; text-align: left;
  }
  body.calpage #calendarthings, body.calpage #calendarthingslarge { max-width: none; }
  body.calpage #content #calendar { margin: 0 0 4pt; table-layout: fixed; }
  body.calpage #content #calendar th { font-size: 8pt; padding: 2pt 0; border: 0; }
  body.calpage #content #calendar td.day, body.calpage #content #calendar td.today { border: 0.5pt solid GrayText; }
  body.calpage #content #calendar td .number {
    padding: 1.5pt 0; font-size: 9.5pt; line-height: 1.2; border-bottom: 0.5pt solid GrayText;
  }
  body.calpage #content #calendar .sunrise, body.calpage #content #calendar .sunset, body.calpage #content #calendar .daylength {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    font-size: 10pt; line-height: 1.25; padding-left: 36px; padding-bottom: 0; background-position: 6px 0;
  }
  body.calpage #content #calendar .sunrise { margin: 4pt 0 2pt; }
  body.calpage #content #calendar .sunset { margin: 2pt 0 3pt; }
  body.calpage #content #calendar .daylength { margin: 0; }

  body.calpage #content #calendarthings:not(.withx) #calendar td .number { font-size: 10.5pt; padding: 2pt 0; }
  body.calpage #content #calendarthings:not(.withx) #calendar .sunrise,
  body.calpage #content #calendarthings:not(.withx) #calendar .sunset { font-size: 11.5pt; }
  body.calpage #content #calendar .progression { display: inline !important; font-size: 7pt; margin-left: 2pt; white-space: nowrap; }
  body.calpage #content #calendar .xl { font-size: 7.5pt; line-height: 1.15; padding: 0 3px 0 6px; text-align: left; }
  body.calpage #content #calendar .xi { width: 24px; margin-right: 6px; text-align: center; }
  body.calpage #content #calendar .xi svg { width: 16px; height: 11px; }
  body.calpage #content #calendar .xfirst { margin: 2pt 0 0; }
  body.calpage #content #calendar .xfirst + .sunrise { margin-top: 1pt; }
  body.calpage #content #calendar .sunset:has(+ .xlast) { margin-bottom: 0; }
  body.calpage #content #calendar .xlast { margin: 0 0 2pt; }

  body.calpage #content #calendar { height: 1px; }
  body.calpage #content #calendar tr { height: 100%; break-inside: avoid; }
  body.calpage #content #calendar td.day, body.calpage #content #calendar td.today { vertical-align: top; height: 100%; padding: 0; }
  body.calpage #content #calendar td .dc { display: flex; flex-direction: column; height: 100%; }

  body.calpage #content #calendar td .dc { min-height: 86pt; }
  body.calpage #content #calendar:not(:has(tbody > tr:nth-child(5))) td .dc { min-height: 108pt; }
  body.calpage #content #calendar:has(tbody > tr:nth-child(6)) td .dc { min-height: 72pt; }
  body.calpage #content #calendarthingslarge #calendar:has(tbody > tr:nth-child(6)) td .dc { min-height: 60pt; }
  body.calpage #content #calendar td .dc .sunset { margin-top: auto; }
  body.calpage #content #calendar td .dc .daylength, body.calpage #content #calendar td .dc .xnoon { margin: auto 0 0; }

  body.calpage #content .withx #calendar td .number { font-size: 9pt; padding: 1pt 0; }
  body.calpage #content .withx #calendar .sunrise, body.calpage #content .withx #calendar .sunset,
  body.calpage #content .withx #calendar .daylength {
    font-size: 9pt; line-height: 1.2; padding-left: 30px; background-size: 18px 13px; background-position: 9px 1px;
  }
  body.calpage #content .withx #calendar .sunrise { margin: 1pt 0; }
  body.calpage #content .withx #calendar .sunset { margin-bottom: 1pt; }
  body.calpage #content .withx #calendar .xl { font-size: 7pt; }
  body.calpage #content .withx #calendar .xfirst { margin-top: 1pt; }
  body.calpage #content .withx #calendar .xlast { margin-bottom: 1pt; }

  body.calpage #content .withx:has(#calendar > tbody > tr:nth-child(6)) { zoom: .88; }

  body.month #content > :not(h1, .tznote, .table-container) { display: none !important; }
  body.month #content > h1 { font-size: 14pt; line-height: 1.2; margin: 0 0 3pt; }
  body.month #content > .tznote { font-size: 8pt; line-height: 1.3; margin: 0 0 4pt; }
  body.month table#month { margin: 0; font-size: 9.5pt; border: 0.5pt solid GrayText; border-collapse: collapse; }

  body.month table#month tr.day { height: 19pt; }
  body.month table#month th, body.month table#month td { padding: 1.4pt 3pt; line-height: 1.25; }
  body.month table#month th *, body.month table#month td * { font-size: inherit !important; }
  body.month table#month thead th { position: static; border-bottom: 0.5pt solid GrayText; }
  body.month table#month tr.day > * { border-top: 0.25pt solid GrayText; }

  body.month table#month, body.month table#month thead th { border-color: color-mix(in srgb, CanvasText 30%, Canvas); }
  body.month table#month tr.day > * { border-color: color-mix(in srgb, CanvasText 20%, Canvas); }
  body.month table#month tr { break-inside: avoid; }
  body.month table#month td, body.month table#month tbody th { white-space: nowrap; }

  body.month table#month:has(thead th:nth-child(9 of :not([style*="none"]))) { font-size: 8.5pt; }
  body.month table#month:has(thead th:nth-child(9 of :not([style*="none"]))) tr.day { height: auto; }
  body.month table#month:has(thead th:nth-child(9 of :not([style*="none"]))):not(:has(thead th:nth-child(10 of :not([style*="none"])))) .mphev br { display: none; }
  body.month table#month:has(thead th:nth-child(9 of :not([style*="none"]))):not(:has(thead th:nth-child(10 of :not([style*="none"])))) .mpht { margin-left: 4pt; }

  body.month table#month:has(thead th:nth-child(10 of :not([style*="none"]))) { font-size: 7pt; }
  body.month table#month:has(thead th:nth-child(10 of :not([style*="none"]))) :is(th, td) { padding: 1pt 1.5pt; }
}