header_remove('X-Frame-Options');
header_remove('Content-Security-Policy');

<style>
    .dayinfo-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dayinfo-modal.open {
    display: flex;
    animation: dayinfoFade 0.2s ease-out;
}
@keyframes dayinfoFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.dayinfo-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.dayinfo-window {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 90vh;
    max-height: 860px;
    background: #0a0c10;
    border: 1px solid rgba(255, 165, 0, 0.4);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(255, 165, 0, 0.15),
        0 24px 60px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(255, 165, 0, 0.15);
    overflow: hidden;
    animation: dayinfoZoom 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes dayinfoZoom {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.dayinfo-window iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0a0c10;
}
.dayinfo-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 165, 0, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #FFA500;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.15s, transform 0.15s, color 0.15s;
}
.dayinfo-close:hover {
    background: rgba(255, 165, 0, 0.35);
    color: #FFFFFF;
    transform: scale(1.08);
}
.dayinfo-close:active { transform: scale(0.95); }

@media (max-width: 480px) {
    .dayinfo-modal { padding: 8px; }
    .dayinfo-window { height: 94vh; border-radius: 14px; }
    .dayinfo-close { top: 6px; right: 6px; width: 34px; height: 34px; }
}
</style>    

    


<script type="text/javascript">
    var nods = document.getElementsByClassName('NO-CACHEa'); 
for (var i = 0; i < nods.length; i++) { nods[i].attributes['href'].value += "?a=" + Math.random(); }

       function elog(ev, object) {
        console.log(object.id + " - " + ev + ": " + object.value); 
       if (ev == 'change'  && object.id == 'dt2') {
       window.location.href  = 'moon.php?d='+object.value+"&s=1";
        }
       
       if (ev == 'change'  && object.id == 'dt3') {
       window.location.href  = 'moon.php?t='+object.value;
        }
       
       if (ev == 'change'  && object.id == 'dt22') {
       popupwindow('mooncalc/ru/day'+object.value+'.html', ' '+object.value+' лунный день',400,200)
        }
       }
</script>


<script type='text/javascript'>

function popupwindow(url, title, w, h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 

//~ const googleTranslateConfig = {
    //~ lang: "ru",
//~ };

//~ function TranslateInit() {

    //~ let code = TranslateGetCode();
    //~ // Находим флаг с выбранным языком для перевода и добавляем к нему активный класс
    //~ $('[data-google-lang="' + code + '"]').addClass('language__img_active');

    //~ if (code == googleTranslateConfig.lang) {
        //~ // Если язык по умолчанию, совпадает с языком на который переводим
        //~ // То очищаем куки
        //~ TranslateClearCookie();
    //~ }

    //~ // Инициализируем виджет с языком по умолчанию
    //~ new google.translate.TranslateElement({
        //~ pageLanguage: googleTranslateConfig.lang,
    //~ });

    //~ // Вешаем событие  клик на флаги
    //~ $('[data-google-lang]').click(function () {
        //~ TranslateSetCookie($(this).attr("data-google-lang"))
        //~ // Перезагружаем страницу
        //~ window.location.reload();
    //~ });
//~ }

//~ function TranslateGetCode() {
    //~ // Если куки нет, то передаем дефолтный язык
    //~ let lang = ($.cookie('googtrans') != undefined && $.cookie('googtrans') != "null") ? $.cookie('googtrans') : googleTranslateConfig.lang;
    //~ return lang.substr(-2);
//~ }

//~ function TranslateClearCookie() {
    //~ $.cookie('googtrans', null);
    //~ $.cookie("googtrans", null, {
        //~ domain: "." + document.domain,
    //~ });
//~ }

//~ function TranslateSetCookie(code) {
    //~ // Записываем куки /язык_который_переводим/язык_на_который_переводим
    //~ $.cookie('googtrans', "/auto/" + code);
    //~ $.cookie("googtrans", "/auto/" + code, {
        //~ domain: "." + document.domain,
    //~ });
//~ }
</script>

<!--script type='text/javascript'>

(function()
{
  if( window.localStorage )
  {
    if( !localStorage.getItem('firstLoad') )
    {
      localStorage['firstLoad'] = true;
      window.location.reload();
    }  
    else
      localStorage.removeItem('firstLoad');
  }
})();

</script-->
<!--
<link rel="stylesheet" href="../css/style.css">
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<!--
<script src="js/google-translate.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>
-->
<STYLE type="text/css">
	body {
    margin: 0;
    padding: 0;
}

.page {
    display: flex;
    min-height: 100vh;
}

/* Фиксируем позицию body, которую меняет панель гугла*/

.page_fix {
    top: 0 !important;
    position: static !important;
}

/* Прячем панель гугла */

.skiptranslate {
    display: none !important;
}

/* language */

.language {
position: fixed;
    left: 10px;
    top: 20px;
    /* transform: translateY(-10%); */
    display: flex;
    flex-direction: column;
    float: right;
}

.language__img {
    margin: 2px;
    cursor: pointer;
    opacity: .5;
}

.language__img:hover,
.language__img_active {
    opacity: 1;
    width:25px;
    height:20px;
}

/* content */

.content {
    text-align: center;
    margin: auto;
}
      TABLE  { padding:10px;font-size:1.4em;color: #FFFFFF;background-color: #000000; empty-cells: hide ;width: 100%; border: 0px outset #da7c0c; border-radius: 10px; cellpadding: 1; cellspacing: 10;align: center;}
      TR.top { }
      TD.35c    { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 45%; }
      TD.65c    { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 55%; }
      TD.50     { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: left; valign: middle; width: 50%; }
      TD.50c    { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 50%; }
      TD.30     { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: left; valign: middle; width: 30%; }
      TD.30c    { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 30%; }
      TD.20     { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: left; valign: middle; width: 20%; }
      TD.20c    { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 20%; }
      TD.l12  { font-size:1.3em;padding-left:10px; border: 1px outset #4D4D4D; border-radius: 10px; align: left; valign: middle; width: 70%; }

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height:50px; 
  font-size:15vw;
  color:#FFFF00;
}

.container{
    width: 110px;
    height: 110px;
    margin: 100px auto;
}

.containerb{
    width: 100%;
    float: left;
    border: solid 0px blue;
    text-align: center;
}
.containerc{
	height: 1%;
    width: 100%;
    float: left;
    border: solid 0px blue;
    text-align: center;
    
}
.containerb a{
    display: inline-block;
    width: 30%;
    height: 100%;
    margin:  auto;
    background-color: #000000; border: 1px outset #da7c0c; border-radius: 10px; color:#1E90FF;font-weight: bold;font-size: 1.7em;;
    padding: 0%;
    }
#btn1{
    float:left;
}
#btn3{
    float:right;
}
/* ===== ТЕПЛОВАЯ КАРТА ===== */
.heatmap,
.heatmap div,
.heatmap span,
.heatmap table,
.heatmap td,
.heatmap th {
    /* Сброс глобальных правил div/span из stile.php */
    height: auto !important;
    line-height: 1.2 !important;
    font-size: inherit;
    color: inherit;
    box-sizing: border-box;
}
.heatmap {
    display: block !important;
    background-color: #1a1a1a !important;
    border-radius: 20px !important;
    padding: 20px !important;
    margin: 25px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #333 !important;
    overflow: visible !important;
    height: auto !important;
    line-height: normal !important;
}
.heatmap-title {
    color: #FFA500;
    font-size: 1.4em;
    text-align: center;
    margin: 0 0 15px 0;
    font-weight: bold;
    line-height: 1.4 !important;
}

.heatmap-legend {
    text-align: center;
    margin: 0 0 18px 0;
    color: #FFFFFF !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    height: auto !important;
}

.heatmap-legend .legend-item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 12px;
    color: #FFFFFF !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    height: auto !important;
    white-space: nowrap;
}

.heatmap-legend .legend-dot {
    display: inline-block;
    width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

.heatmap-legend .legend-dot.good   { background-color: #4CAF50; }
.heatmap-legend .legend-dot.medium { background-color: #A5D6A7 !important; }
.heatmap-legend .legend-dot.bad    { background-color: #F48FB1; }

.heatmap-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 1em;
    table-layout: fixed;
}

.heatmap-table th {
    color: #BFBFBF;
    font-size: 0.9em;
    padding: 4px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center;
    font-weight: normal;
    height: auto !important;
}

.heatmap-table td.heat-cell {
    border-radius: 10px;
    padding: 6px 4px !important;
    text-align: center;
    font-weight: bold;
    height: 56px !important;
    min-height: 56px !important;
    vertical-align: middle;
    border: 2px solid transparent;
    transition: transform 0.15s ease;
    width: 14.28%;
    display: table-cell !important;
    line-height: 1.1 !important;
    background-clip: padding-box;
}

.heatmap-table td.heat-cell:hover { transform: scale(1.05); }
.heatmap-table td.heat-cell.good   { background-color: #4CAF50 !important; color: #fff !important; }
.heatmap-table td.heat-cell.medium { background-color: #A5D6A7 !important; color: #000 !important; }
.heatmap-table td.heat-cell.bad    { background-color: #F48FB1 !important; color: #000 !important; }
.heatmap-table td.heat-cell.today  { border-color: #FFA500; box-shadow: 0 0 10px #FFA500; }
.heatmap-table td.heat-cell.empty  { background: transparent !important; border: none; }

.heatmap-table .heat-day {
    font-size: 1.6em !important;
    line-height: 1.1 !important;
    height: auto !important;
    display: block;
    text-align: center;
    font-weight: bold;
}
.heatmap-table .heat-label {
    font-size: 0.85em !important;
    line-height: 1 !important;
    height: auto !important;
    display: block;
    text-align: center;
    margin-top: 4px;
    font-weight: bold;
    opacity: 0.95;
    letter-spacing: -0.2px;
    white-space: nowrap;
}
.heatmap-table .heat-tithi {
    font-size: 0.95em !important;
    opacity: 0.9;
    line-height: 1 !important;
    height: auto !important;
    display: block;
    text-align: center;
    margin-top: 2px;
}

/* ===== Навигация по месяцам в тепловой карте ===== */
.heatmap-nav {
    text-align: center !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.heatmap-nav .heatmap-title {
    display: inline-block !important;
    vertical-align: middle;
    margin: 0 14px !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
    text-align: center;
    white-space: nowrap;
    color: #FFA500 !important;
    font-size: 1.4em !important;
    font-weight: bold !important;
}

.heatmap-nav-btn {
    display: inline-flex !important;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
    text-decoration: none !important;
    color: #FFA500 !important;
    background: rgba(255, 165, 0, 0.15);
    border: 1px solid rgba(255, 165, 0, 0.4);
    border-radius: 10px;
    font-size: 1.3em !important;
    font-weight: bold;
    line-height: 1 !important;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}
.heatmap-nav-btn:hover {
    background: rgba(255, 165, 0, 0.35);
    transform: scale(1.05);
}
.heatmap-nav-btn:active {
    transform: scale(0.97);
}


.rect-auto,.c100.p51 .slice,.c100.p52 .slice,.c100.p53 .slice,.c100.p54 .slice,.c100.p55 .slice,.c100.p56 .slice,.c100.p57 .slice,.c100.p58 .slice,.c100.p59 .slice,.c100.p60 .slice,.c100.p61 .slice,.c100.p62 .slice,.c100.p63 .slice,.c100.p64 .slice,.c100.p65 .slice,.c100.p66 .slice,.c100.p67 .slice,.c100.p68 .slice,.c100.p69 .slice,.c100.p70 .slice,.c100.p71 .slice,.c100.p72 .slice,.c100.p73 .slice,.c100.p74 .slice,.c100.p75 .slice,.c100.p76 .slice,.c100.p77 .slice,.c100.p78 .slice,.c100.p79 .slice,.c100.p80 .slice,.c100.p81 .slice,.c100.p82 .slice,.c100.p83 .slice,.c100.p84 .slice,.c100.p85 .slice,.c100.p86 .slice,.c100.p87 .slice,.c100.p88 .slice,.c100.p89 .slice,.c100.p90 .slice,.c100.p91 .slice,.c100.p92 .slice,.c100.p93 .slice,.c100.p94 .slice,.c100.p95 .slice,.c100.p96 .slice,.c100.p97 .slice,.c100.p98 .slice,.c100.p99 .slice,.c100.p100 .slice{clip:rect(auto, auto, auto, auto)}.pie,.c100 .bar,.c100.p51 .fill,.c100.p52 .fill,.c100.p53 .fill,.c100.p54 .fill,.c100.p55 .fill,.c100.p56 .fill,.c100.p57 .fill,.c100.p58 .fill,.c100.p59 .fill,.c100.p60 .fill,.c100.p61 .fill,.c100.p62 .fill,.c100.p63 .fill,.c100.p64 .fill,.c100.p65 .fill,.c100.p66 .fill,.c100.p67 .fill,.c100.p68 .fill,.c100.p69 .fill,.c100.p70 .fill,.c100.p71 .fill,.c100.p72 .fill,.c100.p73 .fill,.c100.p74 .fill,.c100.p75 .fill,.c100.p76 .fill,.c100.p77 .fill,.c100.p78 .fill,.c100.p79 .fill,.c100.p80 .fill,.c100.p81 .fill,.c100.p82 .fill,.c100.p83 .fill,.c100.p84 .fill,.c100.p85 .fill,.c100.p86 .fill,.c100.p87 .fill,.c100.p88 .fill,.c100.p89 .fill,.c100.p90 .fill,.c100.p91 .fill,.c100.p92 .fill,.c100.p93 .fill,.c100.p94 .fill,.c100.p95 .fill,.c100.p96 .fill,.c100.p97 .fill,.c100.p98 .fill,.c100.p99 .fill,.c100.p100 .fill{position:absolute;border:0.08em solid #FFFF00;width:0.84em;height:0.84em;clip:rect(0em, 0.5em, 1em, 0em);-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}.pie-fill,.c100.p51 .bar:after,.c100.p51 .fill,.c100.p52 .bar:after,.c100.p52 .fill,.c100.p53 .bar:after,.c100.p53 .fill,.c100.p54 .bar:after,.c100.p54 .fill,.c100.p55 .bar:after,.c100.p55 .fill,.c100.p56 .bar:after,.c100.p56 .fill,.c100.p57 .bar:after,.c100.p57 .fill,.c100.p58 .bar:after,.c100.p58 .fill,.c100.p59 .bar:after,.c100.p59 .fill,.c100.p60 .bar:after,.c100.p60 .fill,.c100.p61 .bar:after,.c100.p61 .fill,.c100.p62 .bar:after,.c100.p62 .fill,.c100.p63 .bar:after,.c100.p63 .fill,.c100.p64 .bar:after,.c100.p64 .fill,.c100.p65 .bar:after,.c100.p65 .fill,.c100.p66 .bar:after,.c100.p66 .fill,.c100.p67 .bar:after,.c100.p67 .fill,.c100.p68 .bar:after,.c100.p68 .fill,.c100.p69 .bar:after,.c100.p69 .fill,.c100.p70 .bar:after,.c100.p70 .fill,.c100.p71 .bar:after,.c100.p71 .fill,.c100.p72 .bar:after,.c100.p72 .fill,.c100.p73 .bar:after,.c100.p73 .fill,.c100.p74 .bar:after,.c100.p74 .fill,.c100.p75 .bar:after,.c100.p75 .fill,.c100.p76 .bar:after,.c100.p76 .fill,.c100.p77 .bar:after,.c100.p77 .fill,.c100.p78 .bar:after,.c100.p78 .fill,.c100.p79 .bar:after,.c100.p79 .fill,.c100.p80 .bar:after,.c100.p80 .fill,.c100.p81 .bar:after,.c100.p81 .fill,.c100.p82 .bar:after,.c100.p82 .fill,.c100.p83 .bar:after,.c100.p83 .fill,.c100.p84 .bar:after,.c100.p84 .fill,.c100.p85 .bar:after,.c100.p85 .fill,.c100.p86 .bar:after,.c100.p86 .fill,.c100.p87 .bar:after,.c100.p87 .fill,.c100.p88 .bar:after,.c100.p88 .fill,.c100.p89 .bar:after,.c100.p89 .fill,.c100.p90 .bar:after,.c100.p90 .fill,.c100.p91 .bar:after,.c100.p91 .fill,.c100.p92 .bar:after,.c100.p92 .fill,.c100.p93 .bar:after,.c100.p93 .fill,.c100.p94 .bar:after,.c100.p94 .fill,.c100.p95 .bar:after,.c100.p95 .fill,.c100.p96 .bar:after,.c100.p96 .fill,.c100.p97 .bar:after,.c100.p97 .fill,.c100.p98 .bar:after,.c100.p98 .fill,.c100.p99 .bar:after,.c100.p99 .fill,.c100.p100 .bar:after,.c100.p100 .fill{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.c100{position:relative;font-size:120px;width:1em;height:1em;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;float:left;margin:0 0.1em 0.1em 0;background-color:#000000}.c100 *,.c100 *:before,.c100 *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.c100.center{float:none;margin:0 auto}.c100.big{font-size:240px}.c100.small{font-size:80px}.c100 > span{position:absolute;width:100%;z-index:1;left:0;top:0;width:-1em;line-height:2em;font-size:0.5em;color:#FFFFFF;display:block;text-align:center;white-space:nowrap;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.c100:after{position:absolute;top:0.08em;left:0.08em;display:block;content:" ";-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;background-color:#000000;width:0.84em;height:0.84em;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;transition-timing-function:ease-in}.c100 .slice{position:absolute;width:1em;height:1em;clip:rect(0em, 1em, 1em, 0.5em)}.c100.p1 .bar{-webkit-transform:rotate(3.6deg);-moz-transform:rotate(3.6deg);-ms-transform:rotate(3.6deg);-o-transform:rotate(3.6deg);transform:rotate(3.6deg)}.c100.p2 .bar{-webkit-transform:rotate(7.2deg);-moz-transform:rotate(7.2deg);-ms-transform:rotate(7.2deg);-o-transform:rotate(7.2deg);transform:rotate(7.2deg)}.c100.p3 .bar{-webkit-transform:rotate(10.8deg);-moz-transform:rotate(10.8deg);-ms-transform:rotate(10.8deg);-o-transform:rotate(10.8deg);transform:rotate(10.8deg)}.c100.p4 .bar{-webkit-transform:rotate(14.4deg);-moz-transform:rotate(14.4deg);-ms-transform:rotate(14.4deg);-o-transform:rotate(14.4deg);transform:rotate(14.4deg)}.c100.p5 .bar{-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-ms-transform:rotate(18deg);-o-transform:rotate(18deg);transform:rotate(18deg)}.c100.p6 .bar{-webkit-transform:rotate(21.6deg);-moz-transform:rotate(21.6deg);-ms-transform:rotate(21.6deg);-o-transform:rotate(21.6deg);transform:rotate(21.6deg)}.c100.p7 .bar{-webkit-transform:rotate(25.2deg);-moz-transform:rotate(25.2deg);-ms-transform:rotate(25.2deg);-o-transform:rotate(25.2deg);transform:rotate(25.2deg)}.c100.p8 .bar{-webkit-transform:rotate(28.8deg);-moz-transform:rotate(28.8deg);-ms-transform:rotate(28.8deg);-o-transform:rotate(28.8deg);transform:rotate(28.8deg)}.c100.p9 .bar{-webkit-transform:rotate(32.4deg);-moz-transform:rotate(32.4deg);-ms-transform:rotate(32.4deg);-o-transform:rotate(32.4deg);transform:rotate(32.4deg)}.c100.p10 .bar{-webkit-transform:rotate(36deg);-moz-transform:rotate(36deg);-ms-transform:rotate(36deg);-o-transform:rotate(36deg);transform:rotate(36deg)}.c100.p11 .bar{-webkit-transform:rotate(39.6deg);-moz-transform:rotate(39.6deg);-ms-transform:rotate(39.6deg);-o-transform:rotate(39.6deg);transform:rotate(39.6deg)}.c100.p12 .bar{-webkit-transform:rotate(43.2deg);-moz-transform:rotate(43.2deg);-ms-transform:rotate(43.2deg);-o-transform:rotate(43.2deg);transform:rotate(43.2deg)}.c100.p13 .bar{-webkit-transform:rotate(46.8deg);-moz-transform:rotate(46.8deg);-ms-transform:rotate(46.8deg);-o-transform:rotate(46.8deg);transform:rotate(46.8deg)}.c100.p14 .bar{-webkit-transform:rotate(50.4deg);-moz-transform:rotate(50.4deg);-ms-transform:rotate(50.4deg);-o-transform:rotate(50.4deg);transform:rotate(50.4deg)}.c100.p15 .bar{-webkit-transform:rotate(54deg);-moz-transform:rotate(54deg);-ms-transform:rotate(54deg);-o-transform:rotate(54deg);transform:rotate(54deg)}.c100.p16 .bar{-webkit-transform:rotate(57.6deg);-moz-transform:rotate(57.6deg);-ms-transform:rotate(57.6deg);-o-transform:rotate(57.6deg);transform:rotate(57.6deg)}.c100.p17 .bar{-webkit-transform:rotate(61.2deg);-moz-transform:rotate(61.2deg);-ms-transform:rotate(61.2deg);-o-transform:rotate(61.2deg);transform:rotate(61.2deg)}.c100.p18 .bar{-webkit-transform:rotate(64.8deg);-moz-transform:rotate(64.8deg);-ms-transform:rotate(64.8deg);-o-transform:rotate(64.8deg);transform:rotate(64.8deg)}.c100.p19 .bar{-webkit-transform:rotate(68.4deg);-moz-transform:rotate(68.4deg);-ms-transform:rotate(68.4deg);-o-transform:rotate(68.4deg);transform:rotate(68.4deg)}.c100.p20 .bar{-webkit-transform:rotate(72deg);-moz-transform:rotate(72deg);-ms-transform:rotate(72deg);-o-transform:rotate(72deg);transform:rotate(72deg)}.c100.p21 .bar{-webkit-transform:rotate(75.6deg);-moz-transform:rotate(75.6deg);-ms-transform:rotate(75.6deg);-o-transform:rotate(75.6deg);transform:rotate(75.6deg)}.c100.p22 .bar{-webkit-transform:rotate(79.2deg);-moz-transform:rotate(79.2deg);-ms-transform:rotate(79.2deg);-o-transform:rotate(79.2deg);transform:rotate(79.2deg)}.c100.p23 .bar{-webkit-transform:rotate(82.8deg);-moz-transform:rotate(82.8deg);-ms-transform:rotate(82.8deg);-o-transform:rotate(82.8deg);transform:rotate(82.8deg)}.c100.p24 .bar{-webkit-transform:rotate(86.4deg);-moz-transform:rotate(86.4deg);-ms-transform:rotate(86.4deg);-o-transform:rotate(86.4deg);transform:rotate(86.4deg)}.c100.p25 .bar{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.c100.p26 .bar{-webkit-transform:rotate(93.6deg);-moz-transform:rotate(93.6deg);-ms-transform:rotate(93.6deg);-o-transform:rotate(93.6deg);transform:rotate(93.6deg)}.c100.p27 .bar{-webkit-transform:rotate(97.2deg);-moz-transform:rotate(97.2deg);-ms-transform:rotate(97.2deg);-o-transform:rotate(97.2deg);transform:rotate(97.2deg)}.c100.p28 .bar{-webkit-transform:rotate(100.8deg);-moz-transform:rotate(100.8deg);-ms-transform:rotate(100.8deg);-o-transform:rotate(100.8deg);transform:rotate(100.8deg)}.c100.p29 .bar{-webkit-transform:rotate(104.4deg);-moz-transform:rotate(104.4deg);-ms-transform:rotate(104.4deg);-o-transform:rotate(104.4deg);transform:rotate(104.4deg)}.c100.p30 .bar{-webkit-transform:rotate(108deg);-moz-transform:rotate(108deg);-ms-transform:rotate(108deg);-o-transform:rotate(108deg);transform:rotate(108deg)}.c100.p31 .bar{-webkit-transform:rotate(111.6deg);-moz-transform:rotate(111.6deg);-ms-transform:rotate(111.6deg);-o-transform:rotate(111.6deg);transform:rotate(111.6deg)}.c100.p32 .bar{-webkit-transform:rotate(115.2deg);-moz-transform:rotate(115.2deg);-ms-transform:rotate(115.2deg);-o-transform:rotate(115.2deg);transform:rotate(115.2deg)}.c100.p33 .bar{-webkit-transform:rotate(118.8deg);-moz-transform:rotate(118.8deg);-ms-transform:rotate(118.8deg);-o-transform:rotate(118.8deg);transform:rotate(118.8deg)}.c100.p34 .bar{-webkit-transform:rotate(122.4deg);-moz-transform:rotate(122.4deg);-ms-transform:rotate(122.4deg);-o-transform:rotate(122.4deg);transform:rotate(122.4deg)}.c100.p35 .bar{-webkit-transform:rotate(126deg);-moz-transform:rotate(126deg);-ms-transform:rotate(126deg);-o-transform:rotate(126deg);transform:rotate(126deg)}.c100.p36 .bar{-webkit-transform:rotate(129.6deg);-moz-transform:rotate(129.6deg);-ms-transform:rotate(129.6deg);-o-transform:rotate(129.6deg);transform:rotate(129.6deg)}.c100.p37 .bar{-webkit-transform:rotate(133.2deg);-moz-transform:rotate(133.2deg);-ms-transform:rotate(133.2deg);-o-transform:rotate(133.2deg);transform:rotate(133.2deg)}.c100.p38 .bar{-webkit-transform:rotate(136.8deg);-moz-transform:rotate(136.8deg);-ms-transform:rotate(136.8deg);-o-transform:rotate(136.8deg);transform:rotate(136.8deg)}.c100.p39 .bar{-webkit-transform:rotate(140.4deg);-moz-transform:rotate(140.4deg);-ms-transform:rotate(140.4deg);-o-transform:rotate(140.4deg);transform:rotate(140.4deg)}.c100.p40 .bar{-webkit-transform:rotate(144deg);-moz-transform:rotate(144deg);-ms-transform:rotate(144deg);-o-transform:rotate(144deg);transform:rotate(144deg)}.c100.p41 .bar{-webkit-transform:rotate(147.6deg);-moz-transform:rotate(147.6deg);-ms-transform:rotate(147.6deg);-o-transform:rotate(147.6deg);transform:rotate(147.6deg)}.c100.p42 .bar{-webkit-transform:rotate(151.2deg);-moz-transform:rotate(151.2deg);-ms-transform:rotate(151.2deg);-o-transform:rotate(151.2deg);transform:rotate(151.2deg)}.c100.p43 .bar{-webkit-transform:rotate(154.8deg);-moz-transform:rotate(154.8deg);-ms-transform:rotate(154.8deg);-o-transform:rotate(154.8deg);transform:rotate(154.8deg)}.c100.p44 .bar{-webkit-transform:rotate(158.4deg);-moz-transform:rotate(158.4deg);-ms-transform:rotate(158.4deg);-o-transform:rotate(158.4deg);transform:rotate(158.4deg)}.c100.p45 .bar{-webkit-transform:rotate(162deg);-moz-transform:rotate(162deg);-ms-transform:rotate(162deg);-o-transform:rotate(162deg);transform:rotate(162deg)}.c100.p46 .bar{-webkit-transform:rotate(165.6deg);-moz-transform:rotate(165.6deg);-ms-transform:rotate(165.6deg);-o-transform:rotate(165.6deg);transform:rotate(165.6deg)}.c100.p47 .bar{-webkit-transform:rotate(169.2deg);-moz-transform:rotate(169.2deg);-ms-transform:rotate(169.2deg);-o-transform:rotate(169.2deg);transform:rotate(169.2deg)}.c100.p48 .bar{-webkit-transform:rotate(172.8deg);-moz-transform:rotate(172.8deg);-ms-transform:rotate(172.8deg);-o-transform:rotate(172.8deg);transform:rotate(172.8deg)}.c100.p49 .bar{-webkit-transform:rotate(176.4deg);-moz-transform:rotate(176.4deg);-ms-transform:rotate(176.4deg);-o-transform:rotate(176.4deg);transform:rotate(176.4deg)}.c100.p50 .bar{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.c100.p51 .bar{-webkit-transform:rotate(183.6deg);-moz-transform:rotate(183.6deg);-ms-transform:rotate(183.6deg);-o-transform:rotate(183.6deg);transform:rotate(183.6deg)}.c100.p52 .bar{-webkit-transform:rotate(187.2deg);-moz-transform:rotate(187.2deg);-ms-transform:rotate(187.2deg);-o-transform:rotate(187.2deg);transform:rotate(187.2deg)}.c100.p53 .bar{-webkit-transform:rotate(190.8deg);-moz-transform:rotate(190.8deg);-ms-transform:rotate(190.8deg);-o-transform:rotate(190.8deg);transform:rotate(190.8deg)}.c100.p54 .bar{-webkit-transform:rotate(194.4deg);-moz-transform:rotate(194.4deg);-ms-transform:rotate(194.4deg);-o-transform:rotate(194.4deg);transform:rotate(194.4deg)}.c100.p55 .bar{-webkit-transform:rotate(198deg);-moz-transform:rotate(198deg);-ms-transform:rotate(198deg);-o-transform:rotate(198deg);transform:rotate(198deg)}.c100.p56 .bar{-webkit-transform:rotate(201.6deg);-moz-transform:rotate(201.6deg);-ms-transform:rotate(201.6deg);-o-transform:rotate(201.6deg);transform:rotate(201.6deg)}.c100.p57 .bar{-webkit-transform:rotate(205.2deg);-moz-transform:rotate(205.2deg);-ms-transform:rotate(205.2deg);-o-transform:rotate(205.2deg);transform:rotate(205.2deg)}.c100.p58 .bar{-webkit-transform:rotate(208.8deg);-moz-transform:rotate(208.8deg);-ms-transform:rotate(208.8deg);-o-transform:rotate(208.8deg);transform:rotate(208.8deg)}.c100.p59 .bar{-webkit-transform:rotate(212.4deg);-moz-transform:rotate(212.4deg);-ms-transform:rotate(212.4deg);-o-transform:rotate(212.4deg);transform:rotate(212.4deg)}.c100.p60 .bar{-webkit-transform:rotate(216deg);-moz-transform:rotate(216deg);-ms-transform:rotate(216deg);-o-transform:rotate(216deg);transform:rotate(216deg)}.c100.p61 .bar{-webkit-transform:rotate(219.6deg);-moz-transform:rotate(219.6deg);-ms-transform:rotate(219.6deg);-o-transform:rotate(219.6deg);transform:rotate(219.6deg)}.c100.p62 .bar{-webkit-transform:rotate(223.2deg);-moz-transform:rotate(223.2deg);-ms-transform:rotate(223.2deg);-o-transform:rotate(223.2deg);transform:rotate(223.2deg)}.c100.p63 .bar{-webkit-transform:rotate(226.8deg);-moz-transform:rotate(226.8deg);-ms-transform:rotate(226.8deg);-o-transform:rotate(226.8deg);transform:rotate(226.8deg)}.c100.p64 .bar{-webkit-transform:rotate(230.4deg);-moz-transform:rotate(230.4deg);-ms-transform:rotate(230.4deg);-o-transform:rotate(230.4deg);transform:rotate(230.4deg)}.c100.p65 .bar{-webkit-transform:rotate(234deg);-moz-transform:rotate(234deg);-ms-transform:rotate(234deg);-o-transform:rotate(234deg);transform:rotate(234deg)}.c100.p66 .bar{-webkit-transform:rotate(237.6deg);-moz-transform:rotate(237.6deg);-ms-transform:rotate(237.6deg);-o-transform:rotate(237.6deg);transform:rotate(237.6deg)}.c100.p67 .bar{-webkit-transform:rotate(241.2deg);-moz-transform:rotate(241.2deg);-ms-transform:rotate(241.2deg);-o-transform:rotate(241.2deg);transform:rotate(241.2deg)}.c100.p68 .bar{-webkit-transform:rotate(244.8deg);-moz-transform:rotate(244.8deg);-ms-transform:rotate(244.8deg);-o-transform:rotate(244.8deg);transform:rotate(244.8deg)}.c100.p69 .bar{-webkit-transform:rotate(248.4deg);-moz-transform:rotate(248.4deg);-ms-transform:rotate(248.4deg);-o-transform:rotate(248.4deg);transform:rotate(248.4deg)}.c100.p70 .bar{-webkit-transform:rotate(252deg);-moz-transform:rotate(252deg);-ms-transform:rotate(252deg);-o-transform:rotate(252deg);transform:rotate(252deg)}.c100.p71 .bar{-webkit-transform:rotate(255.6deg);-moz-transform:rotate(255.6deg);-ms-transform:rotate(255.6deg);-o-transform:rotate(255.6deg);transform:rotate(255.6deg)}.c100.p72 .bar{-webkit-transform:rotate(259.2deg);-moz-transform:rotate(259.2deg);-ms-transform:rotate(259.2deg);-o-transform:rotate(259.2deg);transform:rotate(259.2deg)}.c100.p73 .bar{-webkit-transform:rotate(262.8deg);-moz-transform:rotate(262.8deg);-ms-transform:rotate(262.8deg);-o-transform:rotate(262.8deg);transform:rotate(262.8deg)}.c100.p74 .bar{-webkit-transform:rotate(266.4deg);-moz-transform:rotate(266.4deg);-ms-transform:rotate(266.4deg);-o-transform:rotate(266.4deg);transform:rotate(266.4deg)}.c100.p75 .bar{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.c100.p76 .bar{-webkit-transform:rotate(273.6deg);-moz-transform:rotate(273.6deg);-ms-transform:rotate(273.6deg);-o-transform:rotate(273.6deg);transform:rotate(273.6deg)}.c100.p77 .bar{-webkit-transform:rotate(277.2deg);-moz-transform:rotate(277.2deg);-ms-transform:rotate(277.2deg);-o-transform:rotate(277.2deg);transform:rotate(277.2deg)}.c100.p78 .bar{-webkit-transform:rotate(280.8deg);-moz-transform:rotate(280.8deg);-ms-transform:rotate(280.8deg);-o-transform:rotate(280.8deg);transform:rotate(280.8deg)}.c100.p79 .bar{-webkit-transform:rotate(284.4deg);-moz-transform:rotate(284.4deg);-ms-transform:rotate(284.4deg);-o-transform:rotate(284.4deg);transform:rotate(284.4deg)}.c100.p80 .bar{-webkit-transform:rotate(288deg);-moz-transform:rotate(288deg);-ms-transform:rotate(288deg);-o-transform:rotate(288deg);transform:rotate(288deg)}.c100.p81 .bar{-webkit-transform:rotate(291.6deg);-moz-transform:rotate(291.6deg);-ms-transform:rotate(291.6deg);-o-transform:rotate(291.6deg);transform:rotate(291.6deg)}.c100.p82 .bar{-webkit-transform:rotate(295.2deg);-moz-transform:rotate(295.2deg);-ms-transform:rotate(295.2deg);-o-transform:rotate(295.2deg);transform:rotate(295.2deg)}.c100.p83 .bar{-webkit-transform:rotate(298.8deg);-moz-transform:rotate(298.8deg);-ms-transform:rotate(298.8deg);-o-transform:rotate(298.8deg);transform:rotate(298.8deg)}.c100.p84 .bar{-webkit-transform:rotate(302.4deg);-moz-transform:rotate(302.4deg);-ms-transform:rotate(302.4deg);-o-transform:rotate(302.4deg);transform:rotate(302.4deg)}.c100.p85 .bar{-webkit-transform:rotate(306deg);-moz-transform:rotate(306deg);-ms-transform:rotate(306deg);-o-transform:rotate(306deg);transform:rotate(306deg)}.c100.p86 .bar{-webkit-transform:rotate(309.6deg);-moz-transform:rotate(309.6deg);-ms-transform:rotate(309.6deg);-o-transform:rotate(309.6deg);transform:rotate(309.6deg)}.c100.p87 .bar{-webkit-transform:rotate(313.2deg);-moz-transform:rotate(313.2deg);-ms-transform:rotate(313.2deg);-o-transform:rotate(313.2deg);transform:rotate(313.2deg)}.c100.p88 .bar{-webkit-transform:rotate(316.8deg);-moz-transform:rotate(316.8deg);-ms-transform:rotate(316.8deg);-o-transform:rotate(316.8deg);transform:rotate(316.8deg)}.c100.p89 .bar{-webkit-transform:rotate(320.4deg);-moz-transform:rotate(320.4deg);-ms-transform:rotate(320.4deg);-o-transform:rotate(320.4deg);transform:rotate(320.4deg)}.c100.p90 .bar{-webkit-transform:rotate(324deg);-moz-transform:rotate(324deg);-ms-transform:rotate(324deg);-o-transform:rotate(324deg);transform:rotate(324deg)}.c100.p91 .bar{-webkit-transform:rotate(327.6deg);-moz-transform:rotate(327.6deg);-ms-transform:rotate(327.6deg);-o-transform:rotate(327.6deg);transform:rotate(327.6deg)}.c100.p92 .bar{-webkit-transform:rotate(331.2deg);-moz-transform:rotate(331.2deg);-ms-transform:rotate(331.2deg);-o-transform:rotate(331.2deg);transform:rotate(331.2deg)}.c100.p93 .bar{-webkit-transform:rotate(334.8deg);-moz-transform:rotate(334.8deg);-ms-transform:rotate(334.8deg);-o-transform:rotate(334.8deg);transform:rotate(334.8deg)}.c100.p94 .bar{-webkit-transform:rotate(338.4deg);-moz-transform:rotate(338.4deg);-ms-transform:rotate(338.4deg);-o-transform:rotate(338.4deg);transform:rotate(338.4deg)}.c100.p95 .bar{-webkit-transform:rotate(342deg);-moz-transform:rotate(342deg);-ms-transform:rotate(342deg);-o-transform:rotate(342deg);transform:rotate(342deg)}.c100.p96 .bar{-webkit-transform:rotate(345.6deg);-moz-transform:rotate(345.6deg);-ms-transform:rotate(345.6deg);-o-transform:rotate(345.6deg);transform:rotate(345.6deg)}.c100.p97 .bar{-webkit-transform:rotate(349.2deg);-moz-transform:rotate(349.2deg);-ms-transform:rotate(349.2deg);-o-transform:rotate(349.2deg);transform:rotate(349.2deg)}.c100.p98 .bar{-webkit-transform:rotate(352.8deg);-moz-transform:rotate(352.8deg);-ms-transform:rotate(352.8deg);-o-transform:rotate(352.8deg);transform:rotate(352.8deg)}.c100.p99 .bar{-webkit-transform:rotate(356.4deg);-moz-transform:rotate(356.4deg);-ms-transform:rotate(356.4deg);-o-transform:rotate(356.4deg);transform:rotate(356.4deg)}.c100.p100 .bar{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}.c100:hover{cursor:default}.c100:hover > span{width:3.33em;line-height:3.33em;font-size:0.3em;color:#307bbb}.c100:hover:after{top:0.04em;left:0.04em;width:0.92em;height:0.92em}.c100.dark{background-color:#777777}.c100.dark .bar,.c100.dark .fill{border-color:#c6ff00 !important}.c100.dark > span{color:#777777}.c100.dark:after{background-color:#666666}.c100.dark:hover > span{color:#c6ff00}.c100.green .bar,.c100.green .fill{border-color:#4db53c !important}.c100.green:hover > span{color:#4db53c}.c100.green.dark .bar,.c100.green.dark .fill{border-color:#5fd400 !important}.c100.green.dark:hover > span{color:#5fd400}.c100.orange .bar,.c100.orange .fill{border-color:#dd9d22 !important}.c100.orange:hover > span{color:#dd9d22}.c100.orange.dark .bar,.c100.orange.dark .fill{border-color:#e08833 !important}.c100.orange.dark:hover > span{color:#e08833}
</STYLE>




<style>
    .moon-coords {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    text-align: center !important;
    padding: 6px 10px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    margin: 6px auto 0 auto !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    color: #BFBFBF !important;
    font-family: Arial, sans-serif !important;
    box-sizing: border-box !important;
}
.moon-coords-item {
    display: inline-block !important;
    margin: 2px 6px !important;
    padding: 0 !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 13px !important;
}
.moon-coords-item b {
    color: #FFEB3B !important;
    font-weight: bold !important;
    font-size: inherit !important;
}
.moon-coords-city {
    display: inline-block !important;
    padding: 2px 8px !important;
    margin: 2px 6px !important;
    background: rgba(255,165,0,0.18) !important;
    border: 1px solid rgba(255,165,0,0.5) !important;
    border-radius: 6px !important;
    color: #FFA500 !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 13px !important;
}
.moon-coords-city b {
    color: #FFEB3B !important;
    font-size: inherit !important;
}
.moon-coords-edit {
    display: inline-block !important;
    padding: 2px 8px !important;
    margin: 2px 6px !important;
    color: #FFA500 !important;
    text-decoration: none !important;
    background: rgba(255,165,0,0.15) !important;
    border: 1px solid rgba(255,165,0,0.4) !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 13px !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}
.moon-coords-edit:hover {
    background: rgba(255,165,0,0.35) !important;
    transform: scale(1.04) !important;
}

@media (max-width: 640px) {
    .moon-coords,
    .moon-coords-item,
    .moon-coords-city,
    .moon-coords-edit { font-size: 11px !important; }
    .moon-coords { padding: 5px 8px !important; gap: 4px !important; }
    .moon-coords-item { margin: 2px 4px !important; }
}
    </style>
<div align=center style="border-radius:20px;background-color:#332F2F; line-height: 1.0;vertical-align:top;margin: 0 auto;width:100%;text-align:center">
	<table style="width:100%;" align=center>
		<tr>
		<td colspan=2 style="height:60px;border-bottom-width:thick; border-bottom:solid 3px #7F7878;text-align:center; background-color:black;color:#FFFFFF; font-size:1.3em;font-family: "'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;">
        <a style="text-align:left;color:#FFA500;" href="mooncalc/setcoord.php" onclick="popupwindow('mooncalc/setcoord.php', '...',400,400); return false;"><img src="mooncalc/wing.png" align="left" style="    margin-left: 5px;text-align:left;border-radius:5px;background-color:#E6E6FA;" width="45" height="45" border="1"></a>
		Универсальный лунный календарь. На любую дату и время. 
		</td>
        
       <tr>
<td colspan=2 style="padding:0 5px;">
    <div class="moon-coords">
                <span class="moon-coords-item">
            📍 Широта: <b>40.0°</b>
        </span>
        <span class="moon-coords-item">
            🌐 Долгота: <b>-83.0°</b>
        </span>
        <span class="moon-coords-item">
            🕒 Пояс: <b>America/Halifax</b>
            (UTC-3)
        </span>
        <a class="moon-coords-edit"
           href="mooncalc/setcoord.php"
           onclick="popupwindow('mooncalc/setcoord.php', 'Координаты', 420, 480); return false;">
            ✎ изменить
        </a>
    </div>
</td>
</tr>

        	
		</tr>	
		
		<tr>
			<td style="width:65%;" align="center">	
        <br>
        	</td>
		
		</tr>	
		
		<tr>
			<td style="width:65%;" align="center">	
                        <STYLE type="text/css">
      TABLE  { padding:10px;font-size:1.2em;color: #FFFFFF;background-color: #000000; empty-cells: hide ;width: 100%; border: 0px outset #da7c0c; border-radius: 20px; cellpadding: 1; cellspacing: 10;align: center;}
      TD.40c    {font-size:1em; background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 40%; }
      TD.60c     { font-size:1em;background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: left; valign: middle; width: 60%;}
</style>

				<table style="width:100%;margin: 0 auto;" align=center>

				<tr>
					<td class="40c" align="left"><p>Дата и время</p></td>
					<td class="60c" align="center"><p>26-04-2020 18:47  Воскресенье</p></td>
				</tr>

<tr>
    <td class="40c" align="left"><p>Лунный день</p></td>
    <td class="60c" align="center">
        <p style="">
            4        </p>
    </td>
</tr>

<tr>
    <td class="40c" align="left"><p>Окончание</p></td>
    <td class="60c" align="center">
        <p>27.04.2020 10:35</p>
    </td>
</tr>
                <tr>
					<td class="40c" align="left"><p>Фаза луны</p></td>
					<td class="60c" align="center"><p>Растущая + 13.2%</p></td>
				</tr>	
				<tr>
					<td class="40c" align="left"><p>Астро-фаза</p></td>
					<td class="60c" align="center"><p>Молодая луна </p></td>
				</tr>	

				<tr>
					<td class="40c" align="left"><p>Знак Луны</p></td>
					<td class="60c" align="center">
						<p style="color:#FFEB3B;font-weight:bold;font-size:1.1em;">
							♊							Близнецы						</p>
					</td>
				</tr>
				<tr>
					<td class="40c" align="left"><p>Знак Солнца</p></td>
					<td class="60c" align="center">
						<p style="color:#FFA500;font-weight:bold;font-size:1.1em;">
							♉							Телец						</p>
					</td>
				</tr>
				
                				
				<tr>
					<td class="40c" align="left" ><p >Восход луны</p></td>
					<td class="60c" align="center" style="color:#B8B80C"><p>26-04-2020 9:53</p></td>
				</tr>	

				<tr>
					<td class="40c" align="left"><p>Заход луны</p></td>
					<td class="60c" align="center" style="color:#A5BFDA"><p>27-04-2020 0:00</p></td>
				</tr>	
				
                
				<tr>
					<td class="40c" align="left"><p>Ваши координаты</p></td>
					<td class="60c" align="center"><a style="text-align:center;text-decoration: none;color:white;" href="mooncalc/setcoord.php" onclick="popupwindow('mooncalc/setcoord.php', '...',400,400); return false;"><pre>-83.0д &nbsp 40.0ш </pre></a></td>
				</tr>	

				<tr>
					<td class="40c" align="left"><p>Часовой пояс</p></td>
					<td class="60c" align="center"><p>America/Sao_Paulo</p></td>
				</tr>	

				<tr>
					<td class="40c" align="left"><p>Новолуние</p></td>
					<td class="60c" align="center"><p>   22-05-2020 14:39 </p></td>
				</tr>
				<tr>
					<td class="40c" align="left"><p>Полнолуние</p></td>
					<td class="60c" align="center"><p>   7-05-2020 7:45 </p></td>
				</tr>
				<tr>
					<td class="40c" align="left"><p>Следующее полнолуние</p></td>
					<td class="60c" align="center"><p>   5-06-2020 16:12 </p></td>
				</tr>

				</table>	
			</td>
			<td style="width:35%;" align="center">
                        
<STYLE type="text/css">
.container{
    width: 110px;
    height: 110px;
    margin: 100px auto;
}

.containerb{
    width: 100%;
    float: left;
    border: solid 0px blue;
    text-align: center;
}
.containerc{
	height: 1%;
    width: 100%;
    float: left;
    border: solid 0px blue;
    text-align: center;
    
}
.containerb a{
    display: inline-block;
    width: 30%;
    height: 100%;
    margin:  auto;
    background-color: #000000; border: 1px outset #da7c0c; border-radius: 10px; color:#1E90FF;font-weight: bold;font-size: 0.99em;
    padding: 0%;
    }

#btn1{
    float:left;
}
#btn3{
    float:right;
}
</STYLE>

	
<div class="c100 p13 center">
				<span>
				4								</span>
				
					<div class="slice">
						<div class="bar"></div>
						<div class="fill"></div>
					</div>
				</div>
				<br>
				<p align="left" style="text-align:center;font-size:1.0em; color:#FFFFFF;" > до 27.04.2020 10:35</p></div>
<input type="text" id="dt2" placeholder="ГГГГ-ММ-ДД" pattern="\d{4}-\d{2}-\d{2}"
style="border-radius:7px; text-align:center;font-size:1.3em;"
value="2020-04-26"
onchange="elog('change',this);"
onkeypress="if(event.keyCode==13){this.onchange();return false;}" />
                        
                        <input type="time" class="form-control"  style="border-radius: 7px;text-align:center;font-size:1.3em;"
                         value="18:47 " 
                        onchange="elog('change',this);return false;"
                         id="dt3" name="until_t" />
               
               <div class='containerb'>
               <table align="center" style="width:80%;cellspacing:10;cellpadding:1;max-height:30px;">
				   <tr >  
					   <td style="width:50%">  <a class="button" id="btn1" style="text-align:center;text-decoration:none;width:100%;height:100%;" href="moon.php?d=2020-04-25&t=18:47 " class="button" id="btn2" style="text-align:center;text-decoration:none;"><pre>предыдущий <br>день</pre></a></td>
					   <td style="width:50%">  <a class="button" id="btn3" style="text-align:center;text-decoration:none;width:100%;height:100%;" href="moon.php?d=2020-04-27&t=18:47 " class="button" id="btn2" style="text-align:center;text-decoration:none;"><pre>следующий <br>день</pre></a></td>
				   </tr>
				   <tr>
					   <td colspan=2 > <a class="button" id="btn2" style="text-align:center;text-decoration:none;width:100%;height:100%;" href="moon.php?d=2026-10-04&t=07:33 " class="button" id="btn2" style="text-align:center;text-decoration:none;"><pre>сейчас</pre></a></td>
                   </tr>
               </table>
               </div>
               
             
			</td>
		</tr>
	</table>

<br><br>
<iframe src="heatmap_online.php?d=2020-04-26&t=18:47"
        style="width:100%; border:none; border-radius:20px; background:#000; margin:20px 0; height:650px; display:block;"
        scrolling="no"
        id="heatmap_ifrm">
</iframe>
   	 
<style>
/* =================== ОПИСАНИЕ ЛУННОГО ДНЯ =================== */
.moonday-wrap {
    display: block !important;
    background: linear-gradient(160deg, #14161c 0%, #0d0f13 100%) !important;
    border: 1px solid #2a2f3a !important;
    border-radius: 22px !important;
    padding: 24px 20px 20px 20px !important;
    margin: 30px 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
    text-align: left !important;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', Arial, sans-serif !important;
    color: #E6E6FA !important;
}
.moonday-wrap * { box-sizing: border-box !important; }

/* --- Заголовок --- */
.moonday-header {
    display: block !important;
    text-align: center !important;
    margin: 0 0 20px 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
}
.moonday-badge {
    display: inline-block !important;
    padding: 6px 16px !important;
    background: linear-gradient(135deg, rgba(255,165,0,0.25), rgba(255,235,59,0.12)) !important;
    border: 1px solid rgba(255,165,0,0.45) !important;
    border-radius: 24px !important;
    color: #FFA500 !important;
    font-size: 0.85em !important;
    font-weight: bold !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    height: auto !important;
    margin: 0 0 10px 0 !important;
    box-shadow: 0 0 18px rgba(255,165,0,0.25) !important;
}
.moonday-title {
    display: block !important;
    font-size: 1.7em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    height: auto !important;
    text-shadow: 0 0 14px rgba(255,165,0,0.5) !important;
}
.moonday-title .num {
    color: #FFEB3B !important;
    font-size: 1.15em !important;
}
.moonday-subtitle {
    display: block !important;
    margin-top: 8px !important;
    color: #B8B80C !important;
    font-size: 0.95em !important;
    line-height: 1.4 !important;
    height: auto !important;
    font-weight: normal !important;
}

/* --- Контент описания --- */
.moonday-content {
    display: block !important;
    background: linear-gradient(150deg, #1f232c 0%, #16181d 100%) !important;
    border: 1px solid #2c323d !important;
    border-radius: 16px !important;
    padding: 22px 22px !important;
    margin: 0 0 16px 0 !important;
    color: #E6E6FA !important;
    font-size: 1.05em !important;
    line-height: 1.55 !important;
    height: auto !important;
    text-align: left !important;
    position: relative !important;
    overflow: hidden !important;
}
.moonday-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: linear-gradient(180deg, #FFA500, #FFEB3B) !important;
    opacity: 0.8 !important;
}
.moonday-content h2,
.moonday-content h3,
.moonday-content p,
.moonday-content div,
.moonday-content span,
.moonday-content strong,
.moonday-content em {
    display: block !important;
    height: auto !important;
    line-height: 1.55 !important;
    color: #E6E6FA !important;
    font-size: 1em !important;
    text-align: left !important;
    font-family: inherit !important;
    margin: 0 0 12px 0 !important;
}
.moonday-content h2,
.moonday-content h3 {
    font-size: 1.1em !important;
    color: #FFEB3B !important;
    font-weight: bold !important;
    margin: 0 0 10px 0 !important;
}
.moonday-content p:last-child,
.moonday-content div:last-child {
    margin-bottom: 0 !important;
}

/* Ключевые врезки внутри описания */
.moonday-content b,
.moonday-content strong {
    display: inline !important;
    color: #FFEB3B !important;
    font-weight: bold !important;
    margin: 0 !important;
    line-height: inherit !important;
    font-size: inherit !important;
}

/* --- Блок "Рожденные в этот день" (если в HTML есть отдельный блок) --- */
.moonday-content .born {
    display: block !important;
    margin-top: 14px !important;
    padding: 14px 16px !important;
    background: rgba(255,165,0,0.08) !important;
    border-left: 3px solid #FFA500 !important;
    border-radius: 8px !important;
    color: #FFE082 !important;
    font-size: 0.98em !important;
    line-height: 1.5 !important;
    height: auto !important;
}

/* --- Селектор выбора другого дня --- */
.moonday-select-wrap {
    display: block !important;
    margin: 0 0 14px 0 !important;
    text-align: center !important;
    height: auto !important;
    line-height: normal !important;
}
.moonday-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    background: linear-gradient(150deg, #1f232c 0%, #16181d 100%) !important;
    color: #FFA500 !important;
    font-size: 1.05em !important;
    font-weight: bold !important;
    border: 1px solid rgba(255,165,0,0.4) !important;
    border-radius: 12px !important;
    text-align: center !important;
    text-align-last: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: 1.3 !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
}
.moonday-select:hover,
.moonday-select:focus {
    background: linear-gradient(150deg, #262b36 0%, #1a1d24 100%) !important;
    border-color: #FFA500 !important;
    box-shadow: 0 0 18px rgba(255,165,0,0.3) !important;
}

/* --- Подсказка внизу --- */
.moonday-hint {
    display: block !important;
    text-align: center !important;
    color: #8b93a4 !important;
    font-size: 0.7em !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    font-weight: normal !important;
    opacity: 0.85 !important;
}
.moonday-hint .gear {
    color: #FFA500 !important;
    font-weight: bold !important;
    font-size: 0.95em !important;
}
@media (max-width: 640px) {
    .moonday-title { font-size: 1.35em !important; }
    .moonday-content { padding: 16px !important; font-size: 1em !important; }
}
</style>

<div class="moonday-wrap">

    <div class="moonday-header">
        <div class="moonday-badge">Лунный день 4</div>
        <div class="moonday-title">
            Описание <span class="num">4</span>-го лунного дня
        </div>
        <div class="moonday-subtitle">
            26.04.2020 · 4-е титхи
        </div>
    </div>

    <div class="moonday-content">
        
Средний день.
День созерцания, медитации, лени, и творчества.
Не переутомляйтесь.
<br><br>
Рожденные в этот день:  Окутаны атмосферой тайны. Избегайте меланхолии и апатии. Склонны к самоанализу. Имеют знания о тайном и сокровенном. Следует следить за речью, так как слова сбываются.
    </div>

    <div class="moonday-select-wrap">
        <select id="dt22" name="md22" class="moonday-select"
                oninput="elog('input',this);return false;"
                onchange="elog('change',this);return false;"
                onblur="elog('blur',this);return false;"
                onfocus="elog('focus',this);return false;"
                onkeyup="elog('keyup-'+event.keyCode,this);return false;"
                onkeypress="elog('keypress-'+event.keyCode,this);if(event.keyCode==13){this.onchange();return false;}">
            <option selected disabled>🔮 Посмотреть описание любого другого лунного дня</option>
                            <option value="1" >
                    1-й лунный день
                </option>
                            <option value="2" >
                    2-й лунный день
                </option>
                            <option value="3" >
                    3-й лунный день
                </option>
                            <option value="4" selected>
                    4-й лунный день
                </option>
                            <option value="5" >
                    5-й лунный день
                </option>
                            <option value="6" >
                    6-й лунный день
                </option>
                            <option value="7" >
                    7-й лунный день
                </option>
                            <option value="8" >
                    8-й лунный день
                </option>
                            <option value="9" >
                    9-й лунный день
                </option>
                            <option value="10" >
                    10-й лунный день
                </option>
                            <option value="11" >
                    11-й лунный день
                </option>
                            <option value="12" >
                    12-й лунный день
                </option>
                            <option value="13" >
                    13-й лунный день
                </option>
                            <option value="14" >
                    14-й лунный день
                </option>
                            <option value="15" >
                    15-й лунный день
                </option>
                            <option value="16" >
                    16-й лунный день
                </option>
                            <option value="17" >
                    17-й лунный день
                </option>
                            <option value="18" >
                    18-й лунный день
                </option>
                            <option value="19" >
                    19-й лунный день
                </option>
                            <option value="20" >
                    20-й лунный день
                </option>
                            <option value="21" >
                    21-й лунный день
                </option>
                            <option value="22" >
                    22-й лунный день
                </option>
                            <option value="23" >
                    23-й лунный день
                </option>
                            <option value="24" >
                    24-й лунный день
                </option>
                            <option value="25" >
                    25-й лунный день
                </option>
                            <option value="26" >
                    26-й лунный день
                </option>
                            <option value="27" >
                    27-й лунный день
                </option>
                            <option value="28" >
                    28-й лунный день
                </option>
                            <option value="29" >
                    29-й лунный день
                </option>
                            <option value="30" >
                    30-й лунный день
                </option>
                    </select>
    </div>

    <p class="moonday-hint">
        <span class="gear">⚙</span>
        Для более точного расчёта можно установить широту и долготу вручную
        <br>(кнопка с шестернёй вверху слева)
    </p>

</div>

 
<style>
/* =================== СОБЫТИЯ ГОДА =================== */
.events-wrap {
    display: block !important;
    background: linear-gradient(160deg, #14161c 0%, #0d0f13 100%) !important;
    border: 1px solid #2a2f3a !important;
    border-radius: 22px !important;
    padding: 24px 18px !important;
    margin: 30px 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
    text-align: left !important;
    color: #E6E6FA !important;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', Arial, sans-serif !important;
}
.events-wrap * { box-sizing: border-box !important; }

/* Сброс глобальных правил span/div из stile.php */
.events-wrap span,
.events-wrap b,
.events-wrap strong {
    display: inline !important;
    vertical-align: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.events-title {
    display: block !important;
    color: #FFA500 !important;
    font-size: 1.45em !important;
    text-align: center !important;
    margin: 0 0 6px 0 !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    height: auto !important;
    text-shadow: 0 0 12px rgba(255,165,0,0.35);
}
.events-subtitle {
    display: block !important;
    text-align: center !important;
    color: #8b93a4 !important;
    font-size: 0.9em !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.events-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}
.ev-card {
    display: block !important;
    background: linear-gradient(150deg, #1f232c 0%, #16181d 100%) !important;
    border: 1px solid #2c323d !important;
    border-radius: 14px !important;
    padding: 14px 14px 12px 14px !important;
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.ev-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 4px !important; height: 100% !important;
    background: #FFA500 !important;
    opacity: 0.8 !important;
}
.ev-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255,165,0,0.5) !important;
    box-shadow: 0 8px 24px rgba(255,165,0,0.15) !important;
}

.ev-card.ev-solar::before  { background: #FFA500 !important; }
.ev-card.ev-lunar::before  { background: #B39DDB !important; }
.ev-card.ev-spring::before { background: #4CAF50 !important; }
.ev-card.ev-summer::before { background: #F44336 !important; }
.ev-card.ev-autumn::before { background: #FF7043 !important; }
.ev-card.ev-winter::before { background: #29B6F6 !important; }

.ev-card.ev-cross::before  { background: #66BB6A !important; }
.ev-card.ev-peri::before   { background: #FFD54F !important; }
.ev-card.ev-aphe::before   { background: #64B5F6 !important; }

.ev-card.ev-orth::before          { background: #C8A95B !important; }
.ev-card.ev-orth-christmas::before{ background: #E8B84B !important; }
.ev-card.ev-orth-epiphany::before { background: #4FC3F7 !important; }
.ev-card.ev-orth-mary::before     { background: #90CAF9 !important; }
.ev-card.ev-orth-cross::before    { background: #B71C1C !important; }
.ev-card.ev-orth-transfig::before { background: #FFD54F !important; }
.ev-card.ev-orth-easter::before   { background: linear-gradient(180deg, #FFEB3B, #FF9800) !important; }
.ev-card.ev-orth-palm::before     { background: #66BB6A !important; }
.ev-card.ev-orth-trinity::before  { background: #81C784 !important; }
.ev-card.ev-orth-nikolay::before  { background: #6D4C41 !important; }
.ev-card.ev-orth-georgiy::before  { background: #C62828 !important; }
.ev-card.ev-orth-petr-pavel::before { background: #5D4037 !important; }
.ev-card.ev-orth-ioann::before    { background: #66BB6A !important; }
.ev-card.ev-orth-mihail::before   { background: #455A64 !important; }
.ev-card.ev-orth-obrezanie::before{ background: #8D6E63 !important; }

.ev-card.ev-retro-mercury::before { background: #FF9800 !important; }
.ev-card.ev-retro-venus::before   { background: #F06292 !important; }
.ev-card.ev-retro-mars::before    { background: #E53935 !important; }

.ev-card.ev-upcoming {
    border-color: rgba(255,165,0,0.45) !important;
    box-shadow: 0 0 18px rgba(255,165,0,0.12) !important;
}

/* --- Активный ретроградный период --- */
.ev-card.ev-active {
    border-color: rgba(255,82,82,0.7) !important;
    box-shadow:
        0 0 0 2px rgba(255,82,82,0.35),
        0 0 22px rgba(255,82,82,0.35) !important;
    animation: evActivePulse 2s ease-in-out infinite !important;
}
.ev-card.ev-active::before {
    background: #FF5252 !important;
    box-shadow: 0 0 12px #FF5252 !important;
}
@keyframes evActivePulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(255,82,82,0.35),
            0 0 22px rgba(255,82,82,0.35);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(255,82,82,0.55),
            0 0 34px rgba(255,82,82,0.55);
    }
}

.ev-icon {
    display: inline-block !important;
    font-size: 1.6em !important;
    line-height: 1 !important;
    margin: 0 0 6px 0 !important;
    height: auto !important;
    vertical-align: middle !important;
}
.ev-label {
    display: block !important;
    font-size: 0.72em !important;
    color: #8b93a4 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    height: auto !important;
}
.ev-date {
    display: block !important;
    font-size: 1.3em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    height: auto !important;
}
.ev-time {
    display: block !important;
    font-size: 0.9em !important;
    color: #FFEB3B !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
    height: auto !important;
    font-weight: normal !important;
}
.ev-status {
    display: block !important;
    font-size: 0.78em !important;
    color: #8b93a4 !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
    height: auto !important;
}
.ev-card.ev-upcoming .ev-status { color: #FFEB3B !important; }
.ev-card .ev-status.ev-today    { color: #FF5252 !important; font-weight: bold !important; }

/* --- Активный статус --- */
.ev-card .ev-status.ev-now {
    color: #FF5252 !important;
    font-weight: bold !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.78em !important;
    line-height: 1.3 !important;
    height: auto !important;
}
.ev-card .ev-status.ev-now > span:not(.ev-live-dot) {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    vertical-align: middle !important;
}
.ev-live-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    max-width: 8px !important;
    max-height: 8px !important;
    border-radius: 50% !important;
    background: #FF5252 !important;
    box-shadow: 0 0 8px #FF5252, 0 0 14px rgba(255,82,82,0.6) !important;
    animation: evLiveBlink 1.2s ease-in-out infinite !important;
    vertical-align: middle !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
@keyframes evLiveBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@media (max-width: 640px) {
    .events-grid { grid-template-columns: 1fr !important; }
}
</style>

<div class="events-wrap">
    <div class="events-title">🌠 Особые периоды и события</div>
    <div class="events-subtitle">
        Предстоящих событий: 24 · расчёт на 2020 год
    </div>

    <div class="events-grid">
            <div class="ev-card ev-cross ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-cross',
                 'Белтейн',
                 '2020-05-01',
                 '');">
            <div class="ev-icon">🌿</div>
            <div class="ev-label">Белтейн</div>
            <div class="ev-date">1 мая 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 5 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-georgiy ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-georgiy',
                 'Георгий Победоносец',
                 '2020-05-06',
                 '');">
            <div class="ev-icon">🐎</div>
            <div class="ev-label">Георгий Победоносец</div>
            <div class="ev-date">6 мая 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 10 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-nikolay ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-nikolay',
                 'Николай Чудотворец (перенесение мощей)',
                 '2020-05-09',
                 '');">
            <div class="ev-icon">⛪</div>
            <div class="ev-label">Николай Чудотворец (перенесение мощей)</div>
            <div class="ev-date">9 мая 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 13 дн
                            </div>
        </div>
            <div class="ev-card ev-orth ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth',
                 'Вознесение Господне',
                 '2020-05-28',
                 '');">
            <div class="ev-icon">☁️</div>
            <div class="ev-label">Вознесение Господне</div>
            <div class="ev-date">28 мая 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 32 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-trinity ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-trinity',
                 'День Святой Троицы (Пятидесятница)',
                 '2020-06-07',
                 '');">
            <div class="ev-icon">🕊</div>
            <div class="ev-label">День Святой Троицы (Пятидесятница)</div>
            <div class="ev-date">7 июн 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 42 дн
                            </div>
        </div>
            <div class="ev-card ev-summer ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-summer',
                 'Летнее солнцестояние',
                 '2020-06-20',
                 '');">
            <div class="ev-icon">🔥</div>
            <div class="ev-label">Летнее солнцестояние</div>
            <div class="ev-date">20 июн 2020</div>
                            <div class="ev-time">19:01 (местное)</div>
                        <div class="ev-status ">
                                    через 55 дн
                            </div>
        </div>
            <div class="ev-card ev-solar ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-solar',
                 'Солнечное затмение',
                 '2020-06-21',
                 '');">
            <div class="ev-icon">☀️</div>
            <div class="ev-label">Солнечное затмение</div>
            <div class="ev-date">21 июн 2020</div>
                            <div class="ev-time">03:42 (местное)</div>
                        <div class="ev-status ">
                                    через 55 дн
                            </div>
        </div>
            <div class="ev-card ev-aphe ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-aphe',
                 'Афелий (Земля дальше от Солнца)',
                 '2020-07-05',
                 '');">
            <div class="ev-icon">☀️</div>
            <div class="ev-label">Афелий (Земля дальше от Солнца)</div>
            <div class="ev-date">5 июл 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 70 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-ioann ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-ioann',
                 'Рождество Иоанна Предтечи',
                 '2020-07-07',
                 '');">
            <div class="ev-icon">🕊</div>
            <div class="ev-label">Рождество Иоанна Предтечи</div>
            <div class="ev-date">7 июл 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 72 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-petr-pavel ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-petr-pavel',
                 'Апостолы Пётр и Павел',
                 '2020-07-12',
                 '');">
            <div class="ev-icon">⛪</div>
            <div class="ev-label">Апостолы Пётр и Павел</div>
            <div class="ev-date">12 июл 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 77 дн
                            </div>
        </div>
            <div class="ev-card ev-cross ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-cross',
                 'Лугнасад',
                 '2020-08-01',
                 '');">
            <div class="ev-icon">🌿</div>
            <div class="ev-label">Лугнасад</div>
            <div class="ev-date">1 авг 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 97 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-transfig ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-transfig',
                 'Преображение Господне',
                 '2020-08-19',
                 '');">
            <div class="ev-icon">✨</div>
            <div class="ev-label">Преображение Господне</div>
            <div class="ev-date">19 авг 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 115 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mary ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mary',
                 'Успение Пресвятой Богородицы',
                 '2020-08-28',
                 '');">
            <div class="ev-icon">🌾</div>
            <div class="ev-label">Успение Пресвятой Богородицы</div>
            <div class="ev-date">28 авг 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 124 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mary ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mary',
                 'Рождество Пресвятой Богородицы',
                 '2020-09-21',
                 '');">
            <div class="ev-icon">🌸</div>
            <div class="ev-label">Рождество Пресвятой Богородицы</div>
            <div class="ev-date">21 сен 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 148 дн
                            </div>
        </div>
            <div class="ev-card ev-autumn ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-autumn',
                 'Осеннее равноденствие',
                 '2020-09-22',
                 '');">
            <div class="ev-icon">🍂</div>
            <div class="ev-label">Осеннее равноденствие</div>
            <div class="ev-date">22 сен 2020</div>
                            <div class="ev-time">10:25 (местное)</div>
                        <div class="ev-status ">
                                    через 149 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-cross ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-cross',
                 'Воздвижение Креста Господня',
                 '2020-09-27',
                 '');">
            <div class="ev-icon">✝️</div>
            <div class="ev-label">Воздвижение Креста Господня</div>
            <div class="ev-date">27 сен 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 154 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mary ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mary',
                 'Покров Пресвятой Богородицы',
                 '2020-10-14',
                 '');">
            <div class="ev-icon">🛡</div>
            <div class="ev-label">Покров Пресвятой Богородицы</div>
            <div class="ev-date">14 окт 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 171 дн
                            </div>
        </div>
            <div class="ev-card ev-cross ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-cross',
                 'Самайн',
                 '2020-11-01',
                 '');">
            <div class="ev-icon">🌿</div>
            <div class="ev-label">Самайн</div>
            <div class="ev-date">1 ноя 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 189 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mary ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mary',
                 'Казанская икона Божией Матери',
                 '2020-11-04',
                 '');">
            <div class="ev-icon">🕯</div>
            <div class="ev-label">Казанская икона Божией Матери</div>
            <div class="ev-date">4 ноя 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 192 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mihail ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mihail',
                 'Архангел Михаил',
                 '2020-11-21',
                 '');">
            <div class="ev-icon">⚔️</div>
            <div class="ev-label">Архангел Михаил</div>
            <div class="ev-date">21 ноя 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 209 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mary ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mary',
                 'Введение во храм Пресвятой Богородицы',
                 '2020-12-04',
                 '');">
            <div class="ev-icon">🕊</div>
            <div class="ev-label">Введение во храм Пресвятой Богородицы</div>
            <div class="ev-date">4 дек 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 222 дн
                            </div>
        </div>
            <div class="ev-card ev-solar ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-solar',
                 'Солнечное затмение',
                 '2020-12-14',
                 '');">
            <div class="ev-icon">☀️</div>
            <div class="ev-label">Солнечное затмение</div>
            <div class="ev-date">14 дек 2020</div>
                            <div class="ev-time">13:18 (местное)</div>
                        <div class="ev-status ">
                                    через 232 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-nikolay ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-nikolay',
                 'Святитель Николай Мирликийский',
                 '2020-12-19',
                 '');">
            <div class="ev-icon">⛪</div>
            <div class="ev-label">Святитель Николай Мирликийский</div>
            <div class="ev-date">19 дек 2020</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 237 дн
                            </div>
        </div>
            <div class="ev-card ev-winter ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-winter',
                 'Зимнее солнцестояние',
                 '2020-12-21',
                 '');">
            <div class="ev-icon">❄️</div>
            <div class="ev-label">Зимнее солнцестояние</div>
            <div class="ev-date">21 дек 2020</div>
                            <div class="ev-time">06:16 (местное)</div>
                        <div class="ev-status ">
                                    через 238 дн
                            </div>
        </div>
        </div>
</div>

<script>
(function () {
    function sendHeight() {
        var el = document.querySelector('.events-wrap');
        if (el && window.parent && window.parent !== window) {
            window.parent.postMessage({ eventsHeight: el.offsetHeight + 40 }, '*');
        }
    }
    sendHeight();
    window.addEventListener('resize', sendHeight);
    setTimeout(sendHeight, 300);
})();
</script>
 
	 
 <table style=" color:#E6E6FA;line-height: 1.0;vertical-align:top;max-height:600px;border-radius:20px;">      
	<caption style="padding-bottom:40px;font-size:1.4em;color:#000000;" align="center" ><br>Числа дня<br></caption>
        
    
    <tr>
<td class="l12" colspan=2 align="left" style="padding-left:0px;text-align:center;border: solid 0px; " >

		<br>
     </td> 
    </tr>

    
    <tr>
	
	
	
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >лунный день</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 4</p> 
    </td> 
    </tr>
    
    
    
    <tr>
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >день недели</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 7</p>  
    </td> 
    </tr>
    

    <tr>
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >день месяца</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 26</p> 
    </td> 
    </tr>
    
    
    <tr>
    <td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >месяц</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 4</p> 
    </td> 
    </tr>
    
    
    <tr>
    <td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >неделя</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 17</p> 
    </td> 
    </tr>
    
    <tr>
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >день года</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 117</p> 
    </td> 
    </tr>
    
    
    
    
    <tr>
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >сумма чисел даты и месяца</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 3</p> 
    </td> 
    </tr>
    
    <tr>
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >сумма чисел даты, месяца, года</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 7</p> 
    
    </td> 
    </tr>
    
        <tr>
    <td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >День от Рождества Христова (от 1 января 1 г. н.э.)</p>    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 737541</p>    </td>
    </tr>
    
    <td class="l12" colspan=2 align="left" style="padding-left:0px;text-align:center;border: solid 0px; " >
   
		<br>
     </td> 
    </tr>

    </table>    
    
    
    
	 
<style>
/* =================== ЛУННЫЙ ПОРТРЕТ =================== */

/* Сброс глобального правила span из stile.php */
.natal-wrap span {
    display: inline !important;
    vertical-align: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    height: auto !important;
    min-height: 0 !important;
}
.natal-wrap {
    display: block !important;
    background: linear-gradient(160deg, #14161c 0%, #0d0f13 100%) !important;
    border: 1px solid #2a2f3a !important;
    border-radius: 22px !important;
    padding: 24px 18px !important;
    margin: 30px 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
    text-align: left !important;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', Arial, sans-serif !important;
    color: #E6E6FA !important;
}
.natal-wrap * { box-sizing: border-box !important; }

.natal-title {
    display: block !important;
    color: #FFA500 !important;
    font-size: 1.45em !important;
    text-align: center !important;
    margin: 0 0 18px 0 !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(255,165,0,0.35);
}
.natal-title span { display: inline !important; font-size: inherit !important; }

/* --- Панель координат --- */
.natal-coords {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    text-align: center !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    margin: 0 0 12px 0 !important;
    font-size: 0.88em !important;
    line-height: 1.5 !important;
    color: #BFBFBF !important;
    height: auto !important;
}
.natal-coords .coords-item {
    display: inline-block !important;
    margin: 3px 8px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.natal-coords .coords-item b { color: #FFEB3B !important; }
.natal-coords .coords-city {
    display: inline-block !important;
    padding: 3px 10px !important;
    margin: 3px 8px !important;
    background: rgba(255,165,0,0.18) !important;
    border: 1px solid rgba(255,165,0,0.5) !important;
    border-radius: 8px !important;
    color: #FFA500 !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.natal-coords .coords-city b { color: #FFEB3B !important; }
.natal-coords .coords-edit {
    display: inline-block !important;
    padding: 3px 10px !important;
    margin: 3px 8px !important;
    color: #FFA500 !important;
    text-decoration: none !important;
    background: rgba(255,165,0,0.15) !important;
    border: 1px solid rgba(255,165,0,0.4) !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    height: auto !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}
.natal-coords .coords-edit:hover {
    background: rgba(255,165,0,0.35) !important;
    transform: scale(1.05) !important;
}

/* --- Поля ввода даты и времени --- */
.natal-datetime {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    height: auto !important;
}
.natal-datetime input {
    padding: 10px 14px !important;
    background: linear-gradient(150deg, #1f232c 0%, #16181d 100%) !important;
    color: #FFEB3B !important;
    border: 1px solid #2c323d !important;
    border-radius: 10px !important;
    font-size: 1em !important;
    text-align: center !important;
    font-family: inherit !important;
    outline: none !important;
    height: auto !important;
    line-height: 1.3 !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
.natal-datetime input:hover {
    border-color: rgba(255,165,0,0.5) !important;
}
.natal-datetime input:focus {
    border-color: #FFA500 !important;
    box-shadow: 0 0 12px rgba(255,165,0,0.35) !important;
}
.natal-datetime input[type="date"] {
    min-width: 170px !important;
}
.natal-datetime input[type="time"] {
    min-width: 110px !important;
}
/* Иконки календаря/часов в тёмной теме */
.natal-datetime input[type="date"]::-webkit-calendar-picker-indicator,
.natal-datetime input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85) sepia(1) saturate(5) hue-rotate(0deg) !important;
    cursor: pointer !important;
}

/* --- Шапка с датой --- */
.natal-hero {
    display: block !important;
    background: linear-gradient(135deg, rgba(255,165,0,0.18), rgba(255,235,59,0.08)) !important;
    border: 1px solid rgba(255,165,0,0.35) !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
    text-align: center !important;
    margin: 0 0 20px 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
}
.natal-hero-date {
    display: block !important;
    font-size: 1.6em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    text-shadow: 0 0 10px rgba(255,165,0,0.6);
    height: auto !important;
}
.natal-hero-meta {
    display: block !important;
    font-size: 0.95em !important;
    color: #FFEB3B !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.natal-hero-age {
    display: inline-block !important;
    margin-top: 10px !important;
    padding: 6px 14px !important;
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,235,59,0.3) !important;
    border-radius: 20px !important;
    font-size: 0.95em !important;
    color: #FFEB3B !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    height: auto !important;
}

/* --- Сетка карточек --- */
.natal-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: normal !important;
}

.natal-card {
    display: block !important;
    background: linear-gradient(150deg, #1f232c 0%, #16181d 100%) !important;
    border: 1px solid #2c323d !important;
    border-radius: 14px !important;
    padding: 14px 14px 12px 14px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
    height: auto !important;
    line-height: 1.3 !important;
    text-align: left !important;
    min-height: 110px !important;
}
.natal-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: #FFA500 !important;
    opacity: 0.7 !important;
    border-radius: 14px 0 0 14px !important;
}
.natal-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255,165,0,0.5) !important;
    box-shadow: 0 8px 24px rgba(255,165,0,0.15) !important;
}

.natal-card.c-moon::before   { background: #C0C0C0 !important; }
.natal-card.c-sun::before    { background: #FFA500 !important; }
.natal-card.c-phase::before  { background: #B39DDB !important; }
.natal-card.c-elem::before   { background: linear-gradient(180deg, #F44336, #2196F3) !important; }
.natal-card.c-num::before    { background: #FFEB3B !important; }
.natal-card.c-east::before   { background: #4CAF50 !important; }
.natal-card.c-stone::before  { background: #BA68C8 !important; }
.natal-card.c-time::before   { background: #29B6F6 !important; }

.natal-card-icon {
    display: inline-block !important;
    font-size: 1.6em !important;
    line-height: 1 !important;
    margin: 0 0 6px 0 !important;
    height: auto !important;
    vertical-align: middle !important;
}
.natal-card-title {
    display: block !important;
    font-size: 0.72em !important;
    color: #8b93a4 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    height: auto !important;
}
.natal-card-value {
    display: block !important;
    font-size: 1.35em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    height: auto !important;
}
.natal-card-value .em {
    display: inline !important;
    font-size: 1.15em !important;
    color: #FFEB3B !important;
    margin-right: 4px !important;
    line-height: 1 !important;
}
.natal-card-sub {
    display: block !important;
    font-size: 0.85em !important;
    color: #B8B80C !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
    height: auto !important;
    font-weight: normal !important;
}
.natal-card-sub.elem-fire  { color: #FF7043 !important; }
.natal-card-sub.elem-earth { color: #8BC34A !important; }
.natal-card-sub.elem-air   { color: #FFEB3B !important; }
.natal-card-sub.elem-water { color: #29B6F6 !important; }

@media (max-width: 640px) {
    .natal-grid { grid-template-columns: 1fr !important; }
    .natal-hero-date { font-size: 1.3em !important; }
    .natal-card-value { font-size: 1.2em !important; }
    .natal-coords { font-size: 0.8em !important; }
    .natal-datetime input[type="date"] { min-width: 140px !important; }
}
</style>

<div class="natal-wrap">

    <div class="natal-title">✨ <span>—</span> День рождения</div>

    <!-- ============ ПАНЕЛЬ КООРДИНАТ ============ -->
    <div class="natal-coords">
                <span class="coords-item">
            📍 Широта: <b>40.0°</b>
        </span>
        <span class="coords-item">
            🌐 Долгота: <b>-83.0°</b>
        </span>
        <span class="coords-item">
            🕒 Пояс: <b>ADT</b>
            (UTC-3)
        </span>
        <a class="coords-edit"
           href="mooncalc/setcoord.php"
           onclick="popupwindow('mooncalc/setcoord.php', 'Координаты', 420, 480); return false;">
            ✎ изменить
        </a>
    </div>

    <!-- ============ ПОЛЯ ДАТЫ И ВРЕМЕНИ ============ -->
    <div class="natal-datetime">
        <input type="date"
               value="2020-04-26"
               onchange="window.location.href='moon.php?d='+this.value+'&s=1';"
               title="Дата">
        <input type="time"
               value="18:47"
               onchange="window.location.href='moon.php?t='+this.value;"
               title="Время">
    </div>

    <div class="natal-hero">
        <div class="natal-hero-date">26 апреля 2020</div>
        <div class="natal-hero-meta">Воскресенье</div>
                    <div class="natal-hero-age">
                🎂 6 лет · 2 351 дней от рождения
            </div>
            </div>

    <div class="natal-grid">

        <div class="natal-card c-moon">
            <div class="natal-card-icon">🌙</div>
            <div class="natal-card-title">Лунный день</div>
            <div class="natal-card-value">4</div>
            <div class="natal-card-sub">от восхода Луны</div>
        </div>

        <div class="natal-card c-phase">
            <div class="natal-card-icon">📿</div>
            <div class="natal-card-title">Титхи</div>
            <div class="natal-card-value">4 </div>
            <div class="natal-card-sub">
                шукла · Чатуртхи            </div>
        </div>
        <div class="natal-card c-phase">
            <div class="natal-card-icon">🌗</div>
            <div class="natal-card-title">Фаза Луны</div>
            <div class="natal-card-value">Молодая луна</div>
            <div class="natal-card-sub">Освещённость 13.2% · Растущая +</div>
        </div>

        <div class="natal-card c-time">
            <div class="natal-card-icon">⏳</div>
            <div class="natal-card-title">Возраст Луны</div>
            <div class="natal-card-value">3.5 дн</div>
            <div class="natal-card-sub">от последнего новолуния</div>
        </div>

        <div class="natal-card c-sun">
            <div class="natal-card-icon">☀️</div>
            <div class="natal-card-title">Знак Солнца</div>
            <div class="natal-card-value">
                <span class="em">♉</span>Телец            </div>
            <div class="natal-card-sub elem-earth">
                🌍 стихия: земля            </div>
        </div>

        <div class="natal-card c-moon">
            <div class="natal-card-icon">🌕</div>
            <div class="natal-card-title">Знак Луны</div>
            <div class="natal-card-value">
                <span class="em">♊</span>Близнецы            </div>
            <div class="natal-card-sub elem-air">
                💨 стихия: воздух            </div>
        </div>

        <div class="natal-card c-elem">
            <div class="natal-card-icon">⚡</div>
            <div class="natal-card-title">Сочетание стихий</div>
            <div class="natal-card-value">
                💨                🌍            </div>
            <div class="natal-card-sub">Земля и воздух — реализм и идеи</div>
        </div>

        <div class="natal-card c-num">
            <div class="natal-card-icon">🔢</div>
            <div class="natal-card-title">Число судьбы</div>
            <div class="natal-card-value">7</div>
            <div class="natal-card-sub">Мудрец, исследователь</div>
        </div>

        <div class="natal-card c-east">
            <div class="natal-card-icon">🐀</div>
            <div class="natal-card-title">Восточный год</div>
            <div class="natal-card-value">Крыса</div>
            <div class="natal-card-sub">стихия года: вода</div>
        </div>

        <div class="natal-card c-stone">
            <div class="natal-card-icon">💎</div>
            <div class="natal-card-title">Камень-талисман</div>
            <div class="natal-card-value" style="font-size:1.05em;">
                агат · хризопраз            </div>
            <div class="natal-card-sub">по знаку Луны — Близнецы</div>
        </div>

        <div class="natal-card c-phase">
            <div class="natal-card-icon">🌑</div>
            <div class="natal-card-title">Ближайшее новолуние</div>
            <div class="natal-card-value">+25.8 дн</div>
            <div class="natal-card-sub">от даты рождения</div>
        </div>

        <div class="natal-card c-sun">
            <div class="natal-card-icon">🌕</div>
            <div class="natal-card-title">Ближайшее полнолуние</div>
            <div class="natal-card-value">+39.9 дн</div>
            <div class="natal-card-sub">от даты рождения</div>
        </div>

        <div class="natal-card c-time">
            <div class="natal-card-icon">📅</div>
            <div class="natal-card-title">День от РХ</div>
            <div class="natal-card-value">737 541</div>
            <div class="natal-card-sub">2019 г · 3 мес · 25 дн</div>
        </div>

    </div>
</div>


<br><br>
 
    <iframe id="ifrm" src="mainmagic.html" style='width: 100%; min-height: 700px;'  align="top" frameborder="0" scrolling="no"  name="mm"  ></iframe>
					
<br><br>

<table style="width:100%;" align=center>
<tr>
<td  class="l50" style="display: contents;">
<p style="font-size:16pt;color:#BFBFBF;" align="center" > 
<br>
Внимание, информация в данном разделе имеет псевдо-научный развлекательный характер. 
<br>
</p>     
       
</td>                    	
</tr>		
</table>

<div style="width:100%;height:600px;">
		
</div>
<script>
/* --- открытие/закрытие модалки --- */
function openDayInfo(date) {
    var modal  = document.getElementById('dayinfo-modal');
    var iframe = document.getElementById('dayinfo-iframe');
    if (!modal || !iframe) return;
    iframe.src = 'mooncalc/dayinfo.php?d=' + encodeURIComponent(date);
    modal.classList.add('open');
    modal.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
}
function closeDayInfo() {
    var modal  = document.getElementById('dayinfo-modal');
    var iframe = document.getElementById('dayinfo-iframe');
    if (!modal) return;
    modal.classList.remove('open');
    modal.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = '';
    if (iframe) iframe.src = 'about:blank';
}
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeDayInfo();
});



/* --- единый обработчик сообщений от iframe --- */
window.addEventListener('message', function (e) {
    if (!e.data) return;

    // растягивание тепловой карты по высоте
    if (e.data.heatmapHeight) {
        var f = document.getElementById('heatmap_ifrm');
        if (f) f.style.height = e.data.heatmapHeight + 'px';
    }

    // открытие модалки с описанием дня
    if (e.data.type === 'openDayInfo' && e.data.date) {
        openDayInfo(e.data.date);
    }
});
</script>

<script>
function openEventInfo(e, type, label, date, extra) {
    if (e && e.preventDefault) e.preventDefault();
    var url = 'mooncalc/eventinfo.php'
        + '?type='  + encodeURIComponent(type)
        + '&label=' + encodeURIComponent(label)
        + '&date='  + encodeURIComponent(date)
        + '&extra=' + encodeURIComponent(extra || '');

    var w = 640, h = 700;
    var left = (screen.width  - w) / 2;
    var top  = (screen.height - h) / 2;
    var win = window.open(url, 'eventInfo',
        'toolbar=no,location=no,directories=no,status=no,menubar=no,' +
        'scrollbars=yes,resizable=yes,copyhistory=no,' +
        'width=' + w + ',height=' + h + ',top=' + top + ',left=' + left);
    if (win) win.focus();
    return false;
}
</script>

<div id="dayinfo-modal" class="dayinfo-modal" aria-hidden="true">
    <div class="dayinfo-backdrop" onclick="closeDayInfo()"></div>
    <div class="dayinfo-window">
        <button type="button" class="dayinfo-close" onclick="closeDayInfo()" title="Закрыть">✕</button>
        <iframe id="dayinfo-iframe" src="about:blank" scrolling="yes"></iframe>
    </div>
</div>

</div><br>