/*
 *  style.css
 *
 *  Created by Yang Liu on 19/01/2025.
 *  Copyright © 2025 the project author.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http: *www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
*/

* {
  box-sizing: border-box;
}

/* Style the header */
.header {
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans TC", ming;
  font-style: normal;
  z-index: 20;
}

.content {
  top: 0;
}

.information-layer {
  display: flex;
  position: absolute;
  flex-direction: column;
  font-family: "Noto Sans TC", m-kai-hk, ming, SimSun;
  top: 18.5rem;
  z-index: 20;
}
/* Container for flexboxes */
.right-align-row {
  display: flex;
  flex-direction: row-reverse;
}

.fixed-legend {
  position: absolute;
  padding: 10px;
  top: 0;
}

/* Create three unequal columns that sits next to each other */
.column {
  padding: 10px;
}

/* Left and right column */
.column.side {
   width: 20%;
   flex: 1;
}

/* Middle column */
.column.middle {
  top: 0;
  width: 80%;
  flex: 2;
}

.label-info {
  color: white;
  padding: 0.5rem;
  height: 3rem;
  background-color: #2196F3;
  font-family: Arial;
}

a:link, a:visited {
  color: white;
  text-align: center;
  display: inline-block;
}

a:hover, a:active {
  background-color: #2196F380
}

canvas { 
    border: 1px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.control-group {
  position: fixed;
  top: 0;
  right: 0;
  width: 23rem;
  opacity: 0.85;
}

.lang-group {
  font-size: 1.8rem;
  display: flex;
}

.date-group {
  display: flex;
  padding-right: 7rem;
}

.date-selector-group {
  background-color: transparent;
  perspective: 1000px;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform 1s;
}

/* Do an horizontal flip when you move the mouse over the flip box container*/
.flip-card.is-flipped {
  transform: rotateY(-180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px #eee;
  min-height: 10.7rem;
  margin: 0.5rem auto;
  border-radius: 0.5rem;
  backface-visibility: hidden;
}
/* Position the front and back side */
.flip-card-front {
  background-color: #eee;
}

.flip-card-back {
  background-color: #eee;
  font-family: "Noto Sans TC";
  transform: rotateY(180deg);
}

.flip-card-btn {
  position: absolute;
  top: 0.7rem;
  left: 0.4rem;
  color: #999;
  font-size: 1rem;
  cursor: pointer;
}

.flip-card-btn:hover {
  color:  #0468aa;
}

.control-btn {
  border-radius: 10%;
  border: 1px;
  border-color: #0468aa;
}
.active {
    color: rgb(3, 107, 252);
}

.legends {
  color: #39c;
  height: 22%;
  width: 22rem;
  margin-left: 10px;
}

fieldset{
  border: 1px solid #39c;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 8px;
  margin-top: 0.5rem;
}

.legends .legend-title {
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 1.5rem;
  font-family: m-kai-hk;
  font-style: normal;
  font-weight: 500;
}

.legend-scale {
  margin-left: 0;
  line-height: 18px;
  margin-bottom: 2px;
}

.legend-labels {
  padding-inline-start: 0;
  display: flex;
  flex-direction: row-reverse;
}

.legend-labels .legend-item {
  list-style: none;
  float: left;
  margin-right: 2px;
  margin-left: 2px;
}

.legend-item .legend-tag {
  display: flex;
  flex-direction: column;
}

.legend-item {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border: solid transparent .5px;
}

.legend-item:hover {
  cursor: pointer;
  border-color: orange;
}

.legend-tag {
  float: left;
  height: 16px;
  width: 16px;
  margin-bottom: 5px;
}

.tootip {
  display: none;
  position: absolute;
  top: 100%;
  left: 0.5rem;
  width: 40rem;
  height: 50rem;
  background: rgba(255, 166, 0, 0.6);
  border-radius: 0.5rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 0.5rem;
  font-size: 1.5rem;
  color: rgba(0, 0, 0, 0.6);
}

.is-visible {
  display: block;
}

button {
  border: none;
  background-color: inherit;
}
/* On mouse-over */
button:hover {background: #eee;}

.lang {
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: "Noto Sans TC", SimSun, Helvetica, sans-serif;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

.date-time {
  padding: 0.3rem;
  text-align: center;
  font-family: "Noto Sans TC";
}
.date-time:hover{
  background: #eee;
  border-radius: 0.5rem;
}
  
.setting-form {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
}

.form-row {
  display: flex;
  flex-direction: row;
  padding-bottom: 0.2rem;
  border-bottom:solid #999 1px;
  width: 100%;
}

.setting-button{
  font-size: 1rem;
  background: #9999;
  border-radius: 0.5rem;
  margin-left: 2rem;
}

.setting-button:hover{
  background: #9999;
  color:rgb(3, 107, 252);
}

svg {
  font-family: ming,"Noto Sans TC",SimSun, Helvetica, sans-serif;
}

svg .ecliptic-digital{
  font-family: Helvetica, sans-serif;
  font-size: 15px;
  text-anchor: start;
  word-spacing: 190px;
  fill:  #FA812F;
}

svg .heavenly-stems {
  font-size: 14px;
  fill:  rgb(0, 145, 255);
}

svg .earthly-branches {
  font-size: 15px;
  fill:  #FFC100;
}

svg .solar-term {
  font-size: 20px;
  text-anchor: start;
  word-spacing: 180px;
  fill: #FA812F;
}

svg .solar-month {
  font-size: 17px;
  text-anchor: middle;
  word-spacing: 0px;
  fill: #93ABD3;
}

svg .gregorian-month {
  font-size: 17px;
  text-anchor: middle;
  word-spacing: 0px;
  fill: #C39BD3;
}

svg .lunar-month {
  font-size: 17px;
  text-anchor: middle;
  word-spacing: 0px;
  fill: #87A2FF;
}

svg .lunar-phase {
  font-size: 17px;
  text-anchor: start;
  word-spacing: 127px;
  fill: #99ccff;
}

svg .lunar-date {
  font-size: 11px;
  text-anchor: start;
  fill: #88AB8E;
}

svg .hexagram-name {
  font-size: 15px;
  text-anchor: start;
  word-spacing: 0px;
  fill: #c82121;
}

svg .hexagram-month {
  font-size: 12px;
  text-anchor: middle;
  word-spacing: 0px;
  fill: #87A2FF;
}

svg .trigrams-name {
  font-size: 15px;
  text-anchor: start;
  fill: #c82121;
}

svg .divisions-name {
  font-size: 20px;
  text-anchor: start;
  fill: #ADD8E6;
  word-spacing: 195px;
}
svg .fields-name {
  font-size: 18px;
  text-anchor: start;
  fill: #A594F9;
  word-spacing: 218px;
}
svg .earthly-branches-name {
  font-family: KaiTi;
  font-size: 13px;
  text-anchor: start;
  fill:rgb(255, 140, 0);
  word-spacing: 224px;
}

svg .zodiac-name {
  font-size: 18px;
  text-anchor: start;
  fill: #4CC9FE;
  word-spacing: 182px;
}

svg .mansions-name {
  font-size: 15px;
  text-anchor: middle;
  fill: #FF7597;
}

svg .mansions27-name {
  font-size: 15px;
  text-anchor: start;
  word-spacing: 62.5px;
  fill: rgb(117, 200, 255);
}

svg .dark-red-center {
    font-size: 12px;
    fill: darkred;
    text-anchor: middle;
    alignment-baseline: central;
}

svg .celestial-body-text {
    font-size: 12px;
    fill: white;
    text-anchor: middle;
    alignment-baseline: central;
}

svg .celestial-body {
    fill: #fa360a80;
    stroke-width: 1;
}

svg .jupiter {
    fill: url('#jupiterGradient');
    stroke-width: 1;
}

svg .moon-mask { 
  fill:#00000080;
  stroke-width: 1;
}

svg .moon-text { 
  font-size: 12px;
  fill: rgb(2, 29, 74);
  text-anchor: middle;
  alignment-baseline: central;
}

tspan {
  font: 15px ming;
  fill: red;
}

.date-selector {
  display:flex;
  font-family: ming,"Noto Sans TC";
  font-size: 1.3rem;
  justify-content: center;
  background-color: #eee8;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  align-items: center;
  transition: opacity 0.15s;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.date-selector-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #eee;
}
.date-selector-inner-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date-selector-column-header {
  color: #999;
  font-family: "Noto Sans TC";
  font-weight: 500;
  line-height: 1.4rem;
  margin: 0;
  overflow: hidden;
  padding: 0.25rem 0.5rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-selector-control {
  cursor: pointer;
  border: solid #999;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  margin: 0.4rem;
}

.date-selector-control:hover {
  border-color: #0074d9;
}

.date-selector-control-up {
  margin-top: 0.5rem;
  transform: rotate(-135deg);
}

.date-selector-control-down {
  transform: rotate(45deg);
}

.date-selector-column-body {
  display: flex;
  border-top: 1px solid #eee;
}

.date-selector-list {
  font-size: 1.3rem;
  background-image: linear-gradient(#eee, #ccc, #eee);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4) inset;
  border-radius: 4px;
  margin: 0;
  padding: 0 0.5rem;
  height: 4.5rem;
  overflow: hidden;
  align-items: center;
}

.date-selector-item {
  white-space: nowrap;
  display: inline-block;
  letter-spacing: 1px;
  color: #ccc;
  height: 1rem;
}

.date-selector-item-selected {
  color: #0074d9;
  font-style: bold;
}

@media (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}