/***** GLOBALS *****/
body{margin:0;background:var(--light-300);font-family: 'Noto Sans', sans-serif;font-size:1.1em;color:var(--light-1000)}
body *{box-sizing:border-box}
section{background:var(--light-400);overflow:hidden;margin-bottom:10px;border-radius:10px;padding:10px}
aside{text-align:center}
h1,
h2{text-align:center;font-weight:normal}
h2{margin:.5em 0 1em 0}
h4{margin:1em 0 0 0}
a{text-decoration:none}
a:hover{text-decoration:underline}
a:active,
a:visited{color:var(--light-700)}

/***** COMMON *****/
body>.wrapper{width:100%;padding:10px}
span.small{font-size:12px;font-weight:normal;text-transform:uppercase;display:block;color:var(--light-600)}
span.small label{opacity:.35}
span.big{display:block;font-size:2em;line-height:1em}
.wrapper.flex{display:flex;flex-wrap:wrap}
.wrapper.flex>div:not(.gauge-wrapper){flex:0 0 100%;min-width:0}
div.prl{display:inline-block;font-size:0;height:24px;width:24px;border-radius:50%;border:1px solid var(--dark-700);border-bottom-color:transparent;border-left:none;animation:spinner6 1s linear infinite;transition:opacity .5s ease-in-out;vertical-align:middle}
@keyframes spinner6{to{transform:rotate(360deg)}}
.location .wrapper,
.location.loaded .quickly-current,
.current .wrapper,
.hourly .wrapper,
.daily .wrapper{opacity:0;visibility:hidden;transition:opacity .35s ease-in-out, visibility .35s ease-in-out}
.location.loaded .wrapper,
.location.loaded .quickly-current.loaded,
.current.loaded .wrapper,
.hourly.loaded .wrapper,
.daily.loaded .wrapper{opacity:1;visibility:visible}
.overlay{opacity:0;position:fixed;left:0;right:0;top:0;bottom:0;z-index:2;background:var(--shadow-15);pointer-events:none;transition:opacity .2s ease-in-out;transition-delay:.2s}
.overlay.loading{opacity:1;transition-delay:0s}
.overlay .dialog{min-width:200px;color:var(--light-300);padding:10px;background:var(--shadow-85);border-radius:10px;position:fixed;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
.overlay .dialog .action{text-align:left;font-size:10px;text-transform:uppercase;display:inline-block;vertical-align:middle;margin-left:10px}
.overlay .success{color:var(--success)}
.dragit{display:flex;width:30px;height:24px;flex-wrap:wrap;padding:12px 0 0 0;margin:0 auto}
.dragit span{display:block;width:100%;height:0;border-top:1px solid var(--light-500)}
.dragit:before,
.dragit:after{content:'';display:block;flex:0 0 100%;height:0;border-top:1px solid var(--light-500)}
.dragit:after{top:7px}

/***** NAV *****/
/*
header .wrapper{position:relative}
nav{position:absolute;left:50%;transform:translateX(-50%)}
ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:48px}
ul li{flex:0 0 50%}
ul li a{display:block;width:100%;line-height:24px;padding:0 5px;text-transform:uppercase;font-size:12px;text-align:center}
*/

/***** BRAND SECTION *****/
.about label{float:right}
.about h1{float:left;font-size:1.25em;padding:.4em 0 .4em .6em;position:relative;margin:0}
.about h1>span{font-size:18px}
.about h1 .santa{position:absolute;left:0;top:0;background:url(../img/santa.png) no-repeat left top;width:32px;height:32px}
.logo{display:inline-block;line-height:normal}
.logo span{padding:0 5px}
.logo span:first-child{background:var(--dark--100);color:var(--white);border:2px solid var(--white);border-right:none}
.logo span:nth-child(2){background:var(--white);color:var(--dark--100);border:2px solid var(--dark--100);border-left:none}
.dl-switch{position:relative;display:inline-block;width:60px;height:34px;float:left;margin:.25em .25em .25em 0}
.dl-switch input{opacity:0;width:0;height:0}
.dl-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--light-500);transition:.4s}
.dl-slider:before{position:absolute;content:'';/*content:"\f185";*/height:26px;width:26px;left:4px;bottom:4px;background:var(--light-300);transition:.4s;font-size:.5em;line-height:1.5em;color:var(--light-700);font-family:"Font Awesome 5 Free"}
input:checked + .dl-slider{background-color:var(--dark-700)}
input:focus + .dl-slider{box-shadow:0 0 1px var(--dark-700)}
input:checked + .dl-slider:before{transform:translateX(26px)/*;content:"\f186"*/}
.dl-slider.round{border-radius:34px}
.dl-slider.round:before{border-radius:50%}

/***** LOCATION SECTION *****/
.location h1,
.location .quickly-current{font-size:2.4em;text-align:center;margin:0 0 .25em 0;font-weight:400}
.location .quickly-current{min-height:110px}
.quickly-current span.small{margin-bottom:1em;font-size:.35em}
.quickly-current span.small .unit{text-transform:lowercase;opacity:.5}
.quickly-current span.big span:nth-child(2){opacity:.35}

.location .current-location{text-align:center;padding:.5em 0 1em 0}
.location .alt-location{text-align:center;overflow:hidden;max-height:1999px;transition:max-height .5s ease-in-out, opacity .25s ease-in-out;opacity:1}
.location .alt-location.hidden{max-height:0;opacity:0}
.location .alt-location h2,
.current .providers h2{margin:.5em 0}

.moon-and-sun label,
.current i + label,
.location .current-location .addinfo,
.location .alt-location label{text-transform:uppercase;font-size:12px;font-weight:normal;color:var(--light-700)}
.location .current-location .addinfo label{opacity:.35}
.location:not(.sticky) .big span:first-child{margin:0 10px 0 0}

.fas,
.far{font-size:24px;width:32px;text-align:center;color:var(--light-1100)}
.location .fas:not(:first-child){margin-left:5px}
.gauges .text .fas,
.hourly .fas,
.daily .fas,
h4>.fas,
h4>.far{font-size:22px;height:32px;border-radius:5px;line-height:32px;border:1px solid var(--light-500);background: linear-gradient(0deg,var(--light-300) 0%,var(--light-400) 100%)}
.hourly .fas,
.daily .fas,
h4>.fas,
h4>.far{margin-right:5px}

.fas.fa-cloud,
.gauge .text .fas.fa-cloud{font-size:18px}
.dir .fas{margin:0}
.fas.fa-arrow-down{border:2px dotted var(--light-500);border-radius:50%;width:24px;height:24px;text-align:center;line-height:20px !important;font-size:16px;color:var(--light-700)}
.current-coords{text-align:center;margin-bottom:50px}
.predef{display:inline-block;color:var(--dark-600);border:2px solid var(--dark-600);padding:0 0 0 10px;margin-bottom:5px}
.predef:hover{text-decoration:none;cursor:pointer;background:rgba(255,255,255,.15)}
.favourite-locations a .fas{border:1px solid var(--dark-600);margin:1px 1px 1px 10px;font-size:20px;line-height:20px;display:inline-block;width:20px;color:var(--dark-600)}

.location-select.hidden{display:none}
.search-location{margin-bottom:15px}
.search-location label{display:inline-block;width:60px;color:var(--dark-800);text-align:left}
.search-location input[type="text"],
.search-location input[type="button"],
.search-location select{font-size:.875em;line-height:20px;height:30px;box-sizing:border-box;margin-bottom:5px;border:none;border-top:1px solid var(--light-500);outline:none}
.search-location input[type="text"],
.search-location select{width:210px;padding:5px;background:linear-gradient(0deg,var(--light-300) 0%,var(--light-400) 100%)}
.search-location input[type="text"]{border-bottom-left-radius:5px;border-top-left-radius:5px}
.search-location input[type="text"]::placeholder{color:var(--light-500)}
.search-location input[type="button"]{border-bottom-right-radius:5px;border-top-right-radius:5px;background:var(--dark-700);color:var(--white);width:28px;cursor:pointer}
.search-location select{border-radius:5px;width:238px}

#weathermap{height:280px}
.location .leaflet-pane,
.location .leaflet-control,
.location .leaflet-top,
.location .leaflet-bottom{z-index:unset}
.leaflet-pane .map-layer{filter:grayscale(1)}
.leaflet-container .leaflet-control-attribution{background:rgba(255, 255, 255, .6);color:#555;font-size:10px}

/***** LOCATION STICKY MOBILE *****/
.location.sticky.hidden{visibility:hidden;opacity:0}
.location.sticky{position:fixed;top:10px;z-index:3;box-shadow:0 0 5px 0 rgba(0,0,0,0.75);visibility:visible;opacity:1;transition:.3s opacity ease-in-out;pointer-events:none}
.location.sticky .current-location{padding:0;display:flex;justify-content:center}
.location.sticky .quickly-current,
.location.sticky h1{font-size:1em;line-height:2em;margin:0}
.location.sticky .quickly-current{min-height:0;margin:0 .5em 0 0}
.location.sticky .quickly-current .big span:first-child{margin:0 .125em 0 0}

/***** CURRENT SECTION *****/
.current .wrapper:not(.flex){max-height:3999px;transition:max-height .5s ease-in-out, opacity .25s ease-in-out;}
.current .wrapper:not(.flex).hidden{max-height:0;opacity:0;overflow:hidden}

.current table{width:100%}
.current table *{line-height:1.5em}
.current tbody tr th{min-width:25%;writing-mode:sideways-lr;text-orientation:sideways}
table thead{display:none}
table td{display:flex;padding:0 10px;text-align:left}
table td:nth-child(2){padding-top:10px}
table td:last-child{padding-bottom:10px}
table td::before{content:attr(label);width:120px;min-width:120px;color:var(--light-700)}
table td .val{margin-left:5px}
th{margin:0;color:var(--light-700)}
th.error{color:var(--error)}
th.success,
th.success a{color:var(--success)}
tr:nth-child(odd) th,
tr:nth-child(odd) td{background:var(--light-300)}
tr:nth-child(even) th,
tr:nth-child(even) td{background:rgba(219,222,227,.5)}
.val,
.dir,
.value{font-weight:normal;color:var(--light-900)}
.val .dir{margin-left:5px}

/***** GAUGES *****/
.gauges{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;border-radius:10px}
.gauge-wrapper{width:var(--gauge-width);height:var(--gauge-height);padding:20px;background:var(--light-350);border: 1px solid var(--dark-800);border-radius:10px;text-align:center;box-sizing:content-box}
.gauge{display:inline-block;width:var(--gauge-width);position:relative}
.gauge .mask,
.gauge .semi-circle{position:relative;display:block}
.gauge .semi-circle::before,
.gauge .semi-circle--mask,
.gauge .semi-circle--mask::before{position:absolute}
.gauge .mask{width:var(--gauge-width);height:var(--gauge-height);overflow:hidden}
.gauge .semi-circle{width:var(--gauge-width);height:var(--gauge-height);border-radius:50% 50% 50% 50%/100% 100% 0% 0%}
.gauge .semi-circle::before{content:"";bottom:0;left:50%;z-index:2;display:block;width:calc(var(--gauge-width) - var(--gauge-weight)*2);height:calc(var(--gauge-height) - var(--gauge-weight));margin-left:calc(var(--mask-offset) * -1);background:var(--light-350);border-radius:50% 50% 50% 50%/100% 100% 0% 0%;border:1px solid var(--light-500);border-bottom:none;box-sizing: border-box}
.gauge .semi-circle--mask{width:var(--gauge-width);height:calc(var(--gauge-height)*2);top:0;left:0;background:transparent;transform-origin:center center;backface-visibility:hidden;transition:transform 1s ease-in-out}
.gauge .semi-circle--mask::before{width:calc(var(--gauge-width)*1.01);height:calc(var(--gauge-height)*1.02);content:"";top:0;left:0%;z-index:2;display:block;margin:-1px 0 0 -1px;background:var(--light-400);border-radius:50% 50% 50% 50%/100% 100% 0% 0%}
.gauge label{display:inline-block;position:absolute;bottom:0;z-index:2;transform-origin:right center;width:0;height:0;font:8px sans-serif;color:var(--light-600)}
.gauge label:after{content:attr(data-value);position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0)}
.gauge.kp label:after{line-height:1.1}
.gauge .tick{content:'';position:absolute;width:5px;height:1px;background:var(--light-600);transform-origin:left center;z-index:2}
.gauge .text{width:100%;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;text-align:center;font-size:10px;line-height:14px;color:var(--light-700);padding-top:14px;min-height:70px}
.gauge .text .fas{font-size:22px;color:var(--dark-0);margin-bottom:4px;box-sizing:border-box;width:32px;height:32px;border-radius:5px;line-height:32px}
.gauge .text .val{display:inline-block;font-size:18px;line-height:1;color:var(--light-900);margin-bottom:1px}
.gauge .text .un{font-size:12px}
.gauge .text .lab{text-transform:uppercase}
.gauge .fa-arrow-down{position:absolute;right:-15px;top:-15px}
.gauge .dir{position:absolute;left:-15px;top:-15px;font-size:.75em}

/***** DAILY & FORECAST SECTION *****/
.hourly h4,
.daily h4{display:inline-block;width:auto}
.hourly h4 .small,
.daily h4 .small{text-align:right;cursor:default}

/***** MOON & SUN SECTION *****/
.moon-and-sun canvas#currentphase{background:url(../img/moon.png) no-repeat}
.moon-and-sun div#currentposition{width:160px;height:160px;display:inline-block;background:url(../img/sun.png) no-repeat center/cover}
.moon-and-sun .visual{position:relative;text-align:center;padding:79px 0;height:320px;margin-bottom:1em;border-radius:10px;background:var(--light-350);border:1px solid var(--dark-800)}
.moon-and-sun .events{padding:0 .5em .5em .5em}
.moon-and-sun .events .value{white-space:nowrap}
.moon-and-sun .add-to-cal i{font-size:16px;color:var(--light-600);margin:0 0 0 5px}

.compass,
.altitude{position:absolute;overflow:hidden}
.compass{top:50%;transform:translateY(-50%);width:90%;height:51px;margin:0 5%;padding:17px 0}
.altitude{top:0;left:50%;transform:translateX(-50%);width:56px;height:280px;margin:20px 0;padding:0 17px}
.scala{position:absolute;line-height:0}
.compass span,
.altitude span{position:absolute;font-size:.75em;font-weight:normal;line-height:normal}
.compass .scala{left:50%}
.compass span{left:5%;bottom:0}
.altitude .scala{transform:translateY(-159px)}
.altitude span{width:50px;right:0;top:5%;transform:translate3d(15px, 10px, 0) rotate(270deg)}

.moon-and-sun .visual .info{position:absolute;width:50%;font-size:12px;text-transform:uppercase;text-align:left}
.moon-and-sun .visual .info.top-left{top:0;left:0;padding:.5em 0 0 .75em}
.moon-and-sun .visual .info.top-right{top:0;right:0;padding:.5em .75em 0 0;text-align:right}
.moon-and-sun .visual .info.bottom-left{bottom:0;left:0;padding:0 0 .5em .75em}
.moon-and-sun .visual .info.bottom-right{bottom:0;right:0;padding:0 .75em .5em 0;text-align:right}

.snowcover.hidden{display:none}
.snowcover table{width:100%}
.snowcover table tr td:first-child{width:50%;text-align:left;padding:0 10px}
.snowcover table tr th:nth-child(2),
.snowcover table tr th:nth-child(3),
.snowcover table tr th:nth-child(4){width:16%}

    /***** DEBUG *****/
.debug{background:var(--dark--100);font:400 10px/15px 'Noto Sans', sans-serif;text-transform:uppercase;text-align:left;padding:20px;overflow-x:hidden;max-height:400px;overflow-y:scroll;color:var(--dark-900)}
.debug.hidden{display:none}
.debug .error{color:var(--error)}
.debug .success{color:var(--success)}
.debug .object{color:var(--verbose)}
.debug .alert{color:var(--black);padding:0 5px}

/***** LARGE SCREENS *****/
@media screen and (min-width: 480px) {
    .about h1{font-size:1.45em;padding:.4em 0 .4em .6em}
    .dl-switch{margin:.75em .75em .75em 0}
    .search-location input[type="text"]{width:220px}
    .search-location select{width:248px}
    .moon-and-sun .events{padding:0 1em 1em 1em}
}
@media screen and (min-width: 768px) {
    .current table{width:auto}
    .current tbody tr th{min-width:0;writing-mode:unset;text-orientation:unset}
    table thead{display:table-header-group}
    table{font-size:0.75em;margin:0 auto}
    tr th{padding:0 10px}
    thead tr th{padding:10px}
    tbody tr th{text-align:left}
    table td{display:table-cell;text-align:center;padding:0}
    table td::before{display:none}
    table td:nth-child(2),
    table td:last-child{padding:0}
    /*section.snowcover .wrapper.flex>div{flex-basis:50%}*/
}
@media screen and (min-width: 920px) {
    .wrapper.flex > div:not(.gauge-wrapper){flex-basis:50%}
    section.moon-and-sun .wrapper.flex{gap:10px}
    section.moon-and-sun .wrapper.flex > div{flex-basis:calc(50% - 5px)}
    /*section.snowcover .wrapper.flex>div{flex-basis:33.33%}*/
}
@media screen and (min-width: 1024px) {
    body>.wrapper{display:flex;justify-content:space-between}
    aside,
    main{min-width:0}
    aside{flex:0 0 calc(35% - 5px)}
    main{flex:0 0 calc(65% - 5px)}
    section.location{transition:.5s margin-top cubic-bezier(.23,1,.32,1)}
    .location.sticky{display:none}
    .wrapper.flex > div:not(.gauge-wrapper),
    section.moon-and-sun .wrapper.flex > div{flex-basis:100%}
}
@media screen and (min-width: 1280px) {
    aside{flex:0 0 calc(30% - 5px)}
    main{flex:0 0 calc(70% - 5px)}
    .search-location input[type="text"]{width:240px}
    .search-location select{width:268px}
    .wrapper.flex > div:not(.gauge-wrapper){flex-basis:50%}
    section.moon-and-sun .wrapper.flex > div{flex-basis:calc(50% - 5px)}
}
@media screen and (min-width: 1440px) {
    body>.wrapper{max-width:1600px;margin:0 auto}
    .current .gauges.wrapper{padding:0 5%}
}