:root{
color-scheme:light dark;

--light-bg-color:#f8f5f5;
--dark-bg-color:#252525;

--light-mo-bg-color:#c6c4c4;
--dark-mo-bg-color:#515151;

--light-text-color:#3c3c46;
--dark-text-color:#e8e8e8;

--light-menu_act-text-color:#2d78b4;
--dark-menu_act-text-color:#2d78b4;

--light-link-color:#3c3c46;
--dark-link-color:#e8e8e8;

--light-text-color-help:#9c9c9c;
--dark-text-color-help:#c0c0c0;

--light-border-color:#dadada;
--dark-border-color:#3f3f3f;

--light-bg-current-hour:#95b7bf;
--dark-bg-current-hour:#1a373e;

--button-color:#2d78b4;
--button-border-color:#2869a5;
}

*{
box-sizing:border-box;
font-family:'Open Sans',Arial,Helvetica,Sans-serif;
}

html,body{
margin:0;
padding:0;
}

body{
margin:1em;
padding:55px 0 0 0;
background:light-dark(var(--light-bg-color),var(--dark-bg-color));
}

body{
color:light-dark(var(--light-text-color),var(--dark-text-color));
}

h1{
margin:0 0 .5em 0;
}

h2{
margin:0;
}

h3{
margin:0;
}

a,a:visited{
color:light-dark(var(--light-link-color),var(--dark-link-color));
}

#longtext h1{
margin:0 0 1em 0;
}

#longtext h2,#longtext h3{
margin:2em 0 1em 0;
}

.day_forecast h3{
text-align:center;
margin:0 -.5em;
padding:.5em 0;
}

.block h3{
margin: 2em 0 .75em 0;
padding:.25em 0;
border-bottom:1px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
background:light-dark(var(--light-bg-color),var(--dark-bg-color));
position:sticky;
top:88px;
z-index:100;
}

.sticky{
position:sticky;
top:49px;
z-index:101;
background:light-dark(var(--light-bg-color),var(--dark-bg-color));
border-bottom:1px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
border-radius:5px 5px 0 0;
padding:0 0 .25em 0;
}

.change_settings{
font-size:.8rem;
text-align:right;
margin:.5em 0 1em 0;
}

#message_cont{
position:fixed;
z-index:4500;
top:4em;
left:4em;
right:4em;
}

.msg_title{
font-weight:700;
}

.msg_message{
}

.msg_close{
position:absolute;
right:15px;
top:15px;
cursor:pointer;
background-image:url(../img/menu_close_l.svg);
background-repeat:no-repeat;
background-size:contain;
width:10px;
height:10px;
}

.ok,.error,.warning,.info{
position:relative;
border-radius:5px;
display:none;
border:1px solid transparent;
border-left-width:8px;
clear:both;
padding:1em;
margin:1em 0 0 0;
color:var(--light-text-color);
box-shadow:5px 5px 25px rgba(0,0,0,.5);
}

.ok a,.error a,.warning a,.info{
color:var(--light-text-color);
}

.ok,.inputok{
border-color:rgba(70,165,75,1);
background-color:rgba(220,240,215,1);
}

.error,.inputerror{
border-color:rgba(210,45,40,1);
background-color:rgba(250,210,210,1);
}

.warning,.info{
border-color:rgba(100,160,200,1);
background-color:rgba(215,230,240,1);
}

.info{
display:block;
margin:2em 0;
box-shadow:none;
}

.clear{
clear:both;
}

.table_desktop{
display:table;
}

.table_mobile{
display:none;
}

#loginwindow{
border:1px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
padding:2em;
border-radius:15px;
display:inline-block;
width:500px;
max-width:100%;
margin:0 0 2em 0;
}

#username,#password,#reg_email,#reg_username,#reg_password1,#reg_password2,#reg_firstname,#reg_lastname{
width:100%;
max-width:100%;
}

#forgot_pw{
margin:2em 0 0 0;
}


#menubg{
display:none;
background-color:rgba(35,35,35,.6);
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
backdrop-filter:blur(3px);
z-index:5000;
}

#menuopener_cont{
display:block;
width:100%;
height:50px;
position:fixed;
top:0;
left:0;
background:light-dark(var(--light-mo-bg-color),var(--dark-mo-bg-color));
background:#1C263A;
box-shadow:0 0 15px rgba(0,0,0,.5);
z-index:5002;
}

#menuopener_cont a,#header a,#header{
text-decoration:none;
color:#fff;
}

#menuopener_cont a{
color:light-dark(var(--light-text-color),var(--dark-text-color));
}

#menuopener_cont a:hover,#header a:hover{
color:light-dark(var(--light-menu_act-text-color),var(--dark-menu_act-text-color));
}

#menuopener{
width:50px;
height:50px;
display:inline-block;
background-image:url(../img/menu_d.svg);
background-repeat:no-repeat;
background-position:1em 10px;
background-size:30px;
cursor:pointer;
}

#header{
position:fixed;
top:50px;
left:-100%;
width:300px;
bottom:0;
max-width:100%;
z-index:5001;
padding:1em 1em 0 1em;
background:#000;
background:#121A2B;
box-shadow:0 0 25px rgba(0,0,0,.5);
}

#header h3{
margin:0 0 1em 0;
padding:0 0 1em 0;
border-bottom:1px solid #fff;
}

#header span{
display:block;
margin:0 0 1em 0;
padding:.2em 0;
text-align:left;
}

#header .submenu{
margin-left:1.5em
}

#header .menu_active a{
font-weight:700;
color:light-dark(var(--light-menu_act-text-color),var(--dark-menu_act-text-color));
}

#homebutton{
height:50px;
position:absolute;
top:0;
right:.75em;
font-style:italic;
font-size:25px;
}

#homebutton a{
display:block;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}

#homebutton a,#homebutton a:hover{
color:rgba(255,255,255,.8);
}

#userinfo_language{
position:absolute;
bottom:1em;
left:1em;
right:1em;
}


#lang_select{
border-top:1px solid #fff;
border-bottom:1px solid #fff;
text-align:center;
margin:1em 0;
padding:.5em 0;
}

#lang_select select,#lang_select option{
font-size:100%;
border:none;
background:#121A2B;
color:#fff;
}

#userinfo{
float:none;
display:block;
margin:0;
padding:0;
}

#userinfo1{
display:inline;
float:right;
height:100%;
display:flex;
align-items:center;
margin-right:1em;
}

#logout{
text-align:center;
margin:2em 0 0 0;
}


#message_cont{
top:4em;
bottom:auto;
left:2em;
right:2em;
}




#home_cont{
margin:0 0 0 .25em;
}

#home{
}

#sethomelocation{
filter:grayscale(1);
cursor:pointer;
}

#loading{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
max-width:100%;
max-height:100%;
display:flex;
align-items:center;
justify-content:center;
background-color:light-dark(rgba(255,255,255,.95),rgba(0,0,0,.95));
z-index:5000;
animation:pulse 3.5s infinite;
font-size:1.5rem;
color:var(--dark-text-color);
text-shadow:5px 5px 25px rgba(0,0,0,.5);
padding:0;
text-align:center;
}

#loading div{
display:block;
text-align:center;
width:100%;
}

#loading img{
filter:drop-shadow(0 0 0 rgba(0,0,0,.8));
animation:pulseshadow 3.5s infinite;
width:200px;
margin:25px 0;
}

@keyframes pulse {
 50% {
  background-size:175px;
 }
}

@keyframes pulseshadow{
 50% {
  filter:drop-shadow(0 0 50px rgba(255,255,255,.3));
 }
}

#form_container{
padding:0 0 2em 0;
margin:0 0 2em 0;
border-bottom:1px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
}

#search_my_locations,#search_location{
margin:0 0 .5em 0;
}

#location_result{
margin:2em 0 0 0;
border:1px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
padding:2em;
}

#get_location{
width:43px;
height:43px;
display:inline-block;
cursor:pointer;
background-image:url(../img/loc.svg);
background-repeat:no-repeat;
background-position:center center;
background-size:18px;
top:15.5px;
margin:-16.5px 0 0 10px;
position:relative;
}

#fetch_location,#fetch_weather,#fetch_moon{
display:inline-block;
margin:0 1em 1em 0;
}

#location,.input,.select,.submit,.button{
font-size:1rem;
border-radius:5px;
height:45px;
padding:0 10px;
max-width:100%;
}

.chkbox{
display:block;
margin:.25em 0;
}

[type="checkbox"] {
position:relative;
left:20px;
top:0;
z-index:0;
-webkit-appearance:none;
}

[type="checkbox"] + label {
position:relative;
display:inline-block;
cursor:pointer;
padding-left:50px;
position:relative;
margin-top:-10px;
}

[type="checkbox"] + label:before {
width:35px;
height:20px;
border-radius:20px;
border:2px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
background-color:light-dark(var(--light-bg-color),var(--dark-bg-color));
content:"";
margin-right:15px;
transition:background-color .5s linear;
z-index:5;
position:absolute;
left:0;
top:-2px;
}

[type="checkbox"] + label:after {
width:20px;
height:20px;
border-radius:20px;
background-color:light-dark(var(--light-bg-color),var(--dark-bg-color));
background-color:#fff;
outline:1px solid transparent;
outline-color:light-dark(var(--light-border-color),var(--dark-border-color));
content:"";
transition:margin .1s linear;
box-shadow:0 0 5 #aaa;
position:absolute;
left:2px;
top:0;
z-index:10;
}
[type="checkbox"]:checked + label:before {
background-color:var(--button-color);
}
[type="checkbox"]:checked + label:after {
margin:0 0 0 15px;
}


#openweather_api,#maps_api{
font-family:'Source Code Pro',monospace;
}

.w100{
width:100%;
}

#location{
width:calc(100% - 55px);
}

#get_location,.submit,.button{
cursor:pointer;
background-color:var(--button-color);
border:1px solid var(--button-border-color);
border-radius:5px;
color:#e8e8e8 !important;
}

#get_location:hover,.submit:hover,.button:hover{
background-color:#2869a5;
}

#get_location:disabled,.submit:disabled,.button:disabled{
background-color:#c0c0c0;
}

.submit,.button{
padding:10px 25px;
}

.button{
height:auto;
display:inline-block;
text-decoration:none;
padding:12px 25px;
}

.helptext{
color:light-dark(var(--light-text-color-help),var(--dark-text-color-help));
clear:both;
margin:0 0 .5em 0;
}

.map{
width:600px;
height:300px;
max-width:100%;
}

#location,.input,.select,.submit,.map,.day_forecast,.table_forecast td,.visibility_container{
border:1px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
}

#locationinfo{
clear:both;
margin:0 0 1em 0;
}

#addlocation,.addlocation{
background-repeat:no-repeat;
background-size:25px;
width:25px;
height:25px;
display:inline-block;
margin:-2px 5px 0 0;
position:relative;
top:2px;
}

#location_result .addlocation{
width:auto;
padding:2px 0 0 30px;
font-weight:700;
}

.resultinfo{
color:light-dark(var(--light-text-color-help),var(--dark-text-color-help));
font-size:.8rem;
margin:2em 0 0 0;
}

#addlocation.inactive,.addlocation.inactive{
cursor:pointer;
background-image:url(../img/fav_off.svg);
}

#addlocation.active,.addlocation.active{
background-image:url(../img/fav_on.svg);
}

#current_time,#location_position{
clear:both;
margin:0 0 1em 0;
}

#map_container{
margin:1em 0 2em 0;
}

#cacheinfo,#footer{
clear:both;
margin:0;
color:light-dark(var(--light-text-color-help),var(--dark-text-color-help));
font-size:.8rem;
}

#footer{
clear:both;
margin:3em 0 0 0;
padding:1em 0 0 0;
border-top:1px solid transparent;
border-color:light-dark(var(--light-text-color-help),var(--dark-text-color-help));
text-align:center;
}

#footer span {
margin:0 1em 0 0;
}

#support{
margin:.5em 0 1em 0;
text-align:center
}

.nv{
display:none;
}

.day_infos{
margin:0 0 1.5em .5em;
}

.day_infos h4{
margin:0 0 .25em -.5em;
padding:.5em 0 .25em 0;
border-bottom:1px dotted transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
background:light-dark(var(--light-bg-color),var(--dark-bg-color));
position:sticky;
top:88px;
z-index:100;
}

.day_infos h5{
background:light-dark(var(--light-bg-color),var(--dark-bg-color));
border-bottom:1px dotted transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
margin:.5em 0 .25em -.5em;
font-weight:700;
padding:0;
font-size:100%;
position:sticky;
top:118px;
z-index:100;
}

.moon_phen{
font-weight:700;
margin:0 .25em 0 0;
}

#foreacast{
clear:both;
margin:0;
}

.day_forecast{
width:calc(50% - 1em);
float:left;
padding:0 1em 1em 1em;
border-radius:15px;
margin:0 2em 2em 0;
box-shadow:0 0 25px rgba(0,0,0,.15);
}

.day_forecast:nth-child(2n){
margin:0;
}


.forecast_fetch{
text-align:center;
padding:4em 0;
}

.visibility_container{
position:relative;
width:200px;
max-width:100%;
display:inline-block
}

.visibility{
position:relative;
max-width:100%;
min-width:0;
}

.visibility_words{
position:absolute;
left:0;
right:0;
top:0;
text-align:center;
}

.table_forecast{
width:100%;
border-collapse:collapse;
table-layout:fixed;
margin:0 0 1em 0;
}

.table_forecast td{
padding:.5em 0;
margin:0;
}

.time,.cloud,.weather,.temperature,.humidity,.dew,.visibility,.day_phase{
text-align:center;
}

.currentHour{
background:light-dark(var(--light-bg-current-hour),var(--dark-bg-current-hour));
}

.weather{
height:50px;
background-repeat:no-repeat;
background-position:center center;
background-size:40px auto;
}

.phase_day{
background:#87CEFA;
}

.phase_sunset{
background:#6A0572;
}

.phase_twilight_begin{
background:#374B87;
}

.phase_night_begin{
background:#72458F;
}

.phase_night{
background:#1A224A;
background:#121B3A;
}

.phase_twilight_end{
background:#253566;
}

.phase_night_end{
background:#7C95D2;
}

.phase_sunrise{
background:#F7A8C8;
}

.weather img{
width:50px;
max-width:100%;
}

.weather_01{
background-image:url(../img/weather/01d.svg);
}

.weather_02{
background-image:url(../img/weather/02d.svg);
}

.weather_03{
background-image:url(../img/weather/03d.svg);
}

.weather_04{
background-image:url(../img/weather/04d.svg);
}

.weather_09{
background-image:url(../img/weather/09d.svg);
}

.weather_10{
background-image:url(../img/weather/10d.svg);
}

.weather_11{
background-image:url(../img/weather/11d.svg);
}

.weather_13{
background-image:url(../img/weather/13d.svg);
}

.weather_50{
background-image:url(../img/weather/50d.svg);
}

@media (prefers-color-scheme:dark) {
 .weather_01{
 background-image:url(../img/weather/01n.svg);
 }

 .weather_02{
 background-image:url(../img/weather/02n.svg);
 }

 .weather_03{
 background-image:url(../img/weather/03n.svg);
 }

 .weather_04{
 background-image:url(../img/weather/04n.svg);
 }

 .weather_09{
 background-image:url(../img/weather/09n.svg);
 }

 .weather_10{
 background-image:url(../img/weather/10n.svg);
 }

 .weather_11{
 background-image:url(../img/weather/11n.svg);
 }

 .weather_13{
 background-image:url(../img/weather/13n.svg);
 }

 .weather_50{
 background-image:url(../img/weather/50n.svg);
 }
}

.colorbox{
background:rgba(255,255,255,.8);
color:var(--light-text-color);
margin:1.5em 0;
display:inline-block;
padding:.15em .5em;
border-radius:5px;
}

.cache_sep{
position:relative;
top:-2px;
border-radius:50%;
margin:-2px .75em 0 .75em;
background-color:light-dark(var(--light-text-color-help),var(--dark-text-color-help));
width:5px;
height:5px;
display:inline-block;
}

.time,.cloud,.temperature,.humidity,.dew,.visibility,.td_legend{
font-size:8pt;
}

.td_legend{
font-weight:700;
background-color:light-dark(var(--light-border-color),var(--dark-border-color));
opacity:.5;
padding-left:.5em !important;
min-width:110px;
max-width:110px;
overflow:hidden;
}

.table_mobile .td_legend{
text-align:center;
}

.cache_sep{
display:block;
border:0;
background:none;
height:0;
}

.block,.location_entry{
border:1px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
border-radius:15px;
padding:1em;
margin:0 0 2em 0;
}

.block{
width:100%;
max-width:900px;
}

.singleblock{
margin:0 0 1em 0;
}

.cancel_entry,.del_entry{
float:left;
width:50%;
}

.del_entry{
text-align:right;
}

.delete{
border-radius:50%;
color:#fff;
width:20px;
height:20px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
position:relative;
top:-5px;
margin:-5px .5em -5px 0;
background-color:rgba(210,45,40,.5);
background-image:url(../img/delete.svg);
background-repeat:no-repeat;
background-position:center center;
background-size:10px;
cursor:pointer;
}

.del_entry .delete{
width:16px;
height:16px;
background-size:8px;
top:2px;
margin:-2px .5em 0 0;
}

.del_entry .delete,.delete:hover{
background-color:rgba(210,45,40,1);
}

.delete a{
text-decoration:none;
width:100%;
font-size:2pt;
width:20px;
height:20px;
}

.location_entry{
margin:0 2em 2em 0;
width:calc(25% - 1.7em);
float:left;
}

.location_entry:nth-child(4n+1){
margin:0 0 2em 0;
}

.location_add{
border-bottom:1px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
padding:0 0 1em 0;
margin:0 0 1em 0;
}

.location_info,.location_map{
margin:0 0 .5em 0;
}

.location_info_name{
font-weight:700;
}

.location_info_desc{
font-size:.8rem;
margin:0 0 1em 0;
}

.formblock{
clear:both;
margin:2em 0 0 0;
}

.block .sp1,.block .sp2,.block .sp3{
}

.block .sp1{
}

.sp1 {
margin:0 1em 0 0;
max-width:100%;
}

.sp2 .input{
width:100%;
}

.table{
width:100%;
}

.tr,.tr_edit{
display:table-row;
}

.trhead{
font-weight:700;
background-color:light-dark(var(--light-border-color),var(--dark-border-color));
}

.td,.td_edit{
display:table-cell;
border-bottom:1px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
padding:.5em .25em;
}

.tr_edit,.td_edit{
display:block;
}

.td_edit{
border:none;
padding:.5em 25px;
}

.tr_edit{
border-bottom:1px solid transparent;
border-color:light-dark(var(--light-border-color),var(--dark-border-color));
}

.tr .td:nth-child(1){
width:20%;
}

.tr .td:nth-child(2),.tr .td:nth-child(3){
min-width:140px;
width:5%;
}

.tr .td:nth-child(4){
width:70%;
}

.block .sp3{
text-align:center;
}

.block .sp3 div{
text-align:center;
}

.formatpreview{
margin:1em 0 0 0;
}

.setdefault{
margin:.5em 0 0 0;
cursor:pointer;
}

.help_icu_title{
cursor:pointer;
font-weight:700;
margin:2em 0 1em 0;
}

.help_icu{
display:none;
font-size:.8rem;
}

.help_icu h2{
margin:0 0 .5em 0;
}

.help_icu table{
border-collapse:collapse;
margin:0 0 2em 0;
}

.help_icu td{
border-bottom:1px solid grey;
}

.help_icu tr td:nth-child(1){
width:45px;
}

.help_icu tr td:nth-child(2){
width:220px;
}

.help_icu tr td:nth-child(3){
width:120px;
}

.help_icu tr td:nth-child(4){
width:400px;
}



/* ko-fi */

img.kofiimg{
display: initial!important;
vertical-align:middle;
height:13px!important;
width:20px!important;
padding-top:0!important;
padding-bottom:0!important;
border:none;
margin-top:0;
margin-right:5px!important;
margin-left:0!important;
margin-bottom:3px!important;
content:url('../img/ko-fi/cup-border.png')
}

.kofiimg:after{
vertical-align:middle;
height:25px;
padding-top:0;
padding-bottom:0;
border:none;
margin-top:0;
margin-right:6px;
margin-left:0;
margin-bottom:4px!important;
content:url('../img/ko-fi/whitelogo.svg')
}

.btn-container{
display:inline-block!important;
white-space:nowrap;
min-width:160px
}

span.kofitext{
color:#fff !important;
letter-spacing: -0.15px!important;
text-wrap:none;
vertical-align:middle;
line-height:33px !important;
padding:0;
text-align:center;
text-decoration:none!important;
text-shadow: 0 1px 1px rgba(34,34,34,.05);
}

.kofitext a{
color:#fff !important;
text-decoration:none:important;
}

.kofitext a:hover{
color:#fff !important;
text-decoration:none
}

a.kofi-button{
box-shadow: 1px 1px 0 rgba(0,0,0,.2);
line-height:36px!important;
min-width:150px;
display:inline-block!important;
background-color:#72a4f2;
padding:2px 12px !important;
text-align:center !important;
border-radius:7px;
color:#fff;
cursor:pointer;
overflow-wrap:break-word;
vertical-align:middle;
border:0 none #fff !important;
font-family:'Quicksand',Helvetica,Century Gothic,sans-serif !important;
text-decoration:none;
text-shadow:none;
font-weight:700!important;
font-size:14px !important
}

a.kofi-button:visited{
color:#fff !important;
text-decoration:none !important
}

a.kofi-button:hover{
opacity:.85;
color:#f5f5f5 !important;
text-decoration:none !important
}

a.kofi-button:active{
color:#f5f5f5 !important;
text-decoration:none !important
}

.kofitext img.kofiimg {
height:15px!important;
width:22px!important;
display: initial;
animation: kofi-wiggle 3s infinite;
}

@keyframes kofi-wiggle{
 0%{
 transform:rotate(0) scale(1)
 }

 60%{
 transform:rotate(0) scale(1)
 }

 75%{
 transform:rotate(0) scale(1.12)
 }

 80%{
 transform:rotate(0) scale(1.1)
 }

 84%{
 transform:rotate(-10deg) scale(1.1)
 }

 88%{
 transform:rotate(10deg) scale(1.1)
 }

 92%{
 transform:rotate(-10deg) scale(1.1)
 }

 96%{
 transform:rotate(10deg) scale(1.1)
 }

 100%{
 transform:rotate(0) scale(1)
 }
}

.anchor_text_60{
position:relative;
top:-60px;
}

.fetching {
width:50px;
margin:3em auto 0 auto;
position:relative;
padding: 8px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--light-menu_act-text-color);
--_mask: conic-gradient(#0000 10%,var(--light-bg-color)),
      linear-gradient(var(--light-bg-color) 0 0) content-box;
mask: var(--_mask);
mask-composite: subtract;
animation: l3 1s infinite linear;
}

@keyframes l3 {
 to{
  transform: rotate(1turn)
 }
}

#day_graph{
width:100%;
height:30px;
overflow:hidden;
position:relative;
}

.day_phases{
margin:0 0 3em 0;
}

.day_phase{
position:absolute;
height:100%;
}

.day_time{
width:4.166%;
float:left;
font-size:10px;
position:relative;
padding:3px 0 0 1px;
border-left:1px solid black;
text-wrap:balance;
}