.flex-moon-chart{
    --moon-bg-color:#ce0d1c;
    --border-radius:8px;
}

.flex-moon-chart .table-content{ 
    margin-bottom:1.5rem;
    flex:1; 
    border:1px solid #e6e6e6;
    border-radius:var(--border-radius);
}

.flex-moon-chart table{
    border-spacing:0;
    border-collapse:separate;
    font-size:0.875rem;
    margin-bottom:0;
}

@media screen and (max-width:768px){
    .flex-moon-chart .table-content{ overflow-x:auto; }
    .flex-moon-chart .table-content tr td:first-child{
        position:sticky;
        left:0;
        z-index:10;
    }
}

.flex-moon-chart .caption, .flex-moon-chart .legend{
    font-size:0.875rem;
}

.flex-moon-chart .caption{ text-align:center; color:#666; margin:0 0 0.75rem; }
.flex-moon-chart .legend{
    display:flex;
    justify-content:center;
    gap:0.5rem;
    color:#666;
    flex-direction:column;
    align-items:center;
}

@media screen and (min-width:768px){
    .flex-moon-chart .legend{ flex-direction:row; }
}

.flex-moon-chart .legend > span{ display:inline-flex; align-items:center; gap:.25rem; }

.flex-moon-chart table thead td{ padding:0.75rem 1rem; font-weight:600; color:#333; }
.flex-moon-chart table thead td:first-of-type{ border-radius:var(--border-radius) 0 0 0; }
.flex-moon-chart table thead td:last-of-type{ border-radius:0 var(--border-radius) 0 0; }

.flex-moon-chart table tbody tr:last-of-type td:first-of-type{ border-radius:0 0 0 var(--border-radius); }
.flex-moon-chart table tbody tr:last-of-type td:last-of-type{ border-radius:0 0 var(--border-radius) 0; }

.flex-moon-chart table thead td{ background-color:#f7f7f7; }

.flex-moon-chart table tbody tr td{ 
    border-top:1px solid #eee; 
    padding:0.675rem 0.875rem;
    color:#555;
    background:#fff;
}

.flex-moon-chart table tbody tr td:nth-of-type(2){
    background:#fbfbfb;
}
.flex-moon-chart table tr td:nth-of-type(2){ border-right:1px solid #e6e6e6; }

.flex-moon-chart table tr td:first-of-type{ border-right:1px solid #e6e6e6; }
.flex-moon-chart table tr td:not(:first-of-type){ text-align:center; }

.moon{
    width:14px; height:14px;
    border-radius:50%;
    border:1px solid var(--moon-bg-color);
    display:block;
    margin:0 auto;
    color:var(--moon-bg-color);
}

.moon.moon-half{
    background-image:linear-gradient(-90deg, #ffffff 50%, transparent 50%),
    linear-gradient(90deg, var(--moon-bg-color) 50%, transparent 50%);
}

.moon.moon-full{
    background:var(--moon-bg-color);
}