* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  color: #03536d;
  font-size: 14px;
}

body {
  font-family:
    "微軟正黑體", "Microsoft JhengHei", Tahoma, Verdana, Arial, sans-serif;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: url(../images/flowers-bg.png), url(../images/tf.jpg);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-color: rgb(255, 255, 255);
  padding: 0px;
}

/************************************************/
html,
body,
iframe,
canvas,
#c2canvasdiv,
#pinwheel {
  touch-action: auto;
  -ms-touch-action: auto;
}
#quote {
  color: white;
}
hr {
  display: block;
  border: 1px rgb(58, 200, 248);
  border-style: dashed;
  margin-top: 28px;
  margin-bottom: 28px;
  margin-left: 68px;
  margin-right: 68px;
}

/********* box *****************/
#header {
  margin-top: 18px;
  max-width: 310px;
  margin-left: auto;
  margin-right: auto;
}

h1,
.section_user_box,
#info_box,
#wrapper {
  max-width: 1392px;
  min-width: 300px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

#info_box,
#wrapper {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#wrapper a:hover,
#footer a:hover {
  color: rgb(2, 180, 224);
}

.header_title {
  clear: both;
  display: block;
  margin-top: 4px;
  background-color: rgb(22, 141, 221) !important;
  font-size: 16px;
  padding: 6px;
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

#命盤 {
  word-break: keep-all;
  border-radius: 8px;
}
#命盤 {
  max-width: 1280px;
  margin: auto;
  background-color: #219b91;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  /*border: 2px solid purple;*/
  padding: 2px;
}
#命盤 > div {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2px;
  margin: 4px;
  min-height: 50px;
  border-radius: 8px;
}

#命盤 img {
  width: auto;
  height: 16px;
  vertical-align: middle;
}

/*************** Top Navigaton ********/

#navigation ul {
  /*width: 560px;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4px;
}

#navigation ul li {
  display: inline-block;
  width: auto;
  height: 28px;
  margin-left: 8px;
  margin-top: 2px;
  margin-bottom: 4px;
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 4px;
  padding-bottom: 4px;

  background-color: rgba(0, 0, 0, 0.48);
  list-style-type: none;
  text-decoration: none;
  border-color: rgb(255, 146, 44);
  border-style: solid;
  border-width: 2px;
  border-radius: 6px;
  text-align: center;
}

#navigation ul li a {
  font-size: 16px;
  font-weight: 600;
  color: rgb(255, 255, 0);
  text-decoration: none;
}

#navigation li:hover {
  background-color: rgba(0, 0, 0, 0.48);
}

#navigation a:hover {
  color: rgb(255, 84, 188);
}

/**********chart******************/
#chart {
  z-index: -1;
}

#chart_table {
  margin-bottom: -18px;
}

#chart_table img {
  z-index: 1;
  width: 320px;
}

#chart_title {
  z-index: 1;
  margin-bottom: -30px;
  padding-bottom: 0px;
}

#chart_title img {
  z-index: 1;
  width: 280px;
}

#chart table {
  table-layout: auto;
  width: 100%;
  border-spacing: 10px;
  border-radius: 8px;
  background-color: transparent;
}

#chart table td {
  border-radius: 8px;
  text-align: center;
}

#palace td {
  width: 25%;
  padding: 6px;
  border: 1px solid #a961e4;
  vertical-align: top;
}

#palace td img,
.user_table img {
  width: 16px;
  height: 16px;
}

#palace td div {
  width: 100%;
  /*float: left;*/
}

#chart span {
  /*float: right;*/
}

#info_box {
  /*home page form and map box*/
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 28px;
  /*border: 4px solid greenyellow;*/
}

#form_box {
  padding: 10px;
  /*border: 4px solid rgb(62, 72, 216);*/
}

/**********************************/

.address {
  /*Select address from search*/
  cursor: pointer;
}

.address:hover {
  text-decoration: underline;
}

.user_info {
  margin-top: 4px;
  margin-bottom: 2px;
  font-weight: 600;
}

.user_info + p {
  margin-top: 4px;
  margin-bottom: 4px;
}

#select_coor {
  color: rgb(188, 28, 148);
  margin-top: 4px;
  margin-bottom: 4px;
  font-weight: 400;
}

/***map_box end***/
.error,
.field {
  border: 2px solid rgb(188, 28, 148);
}
.field {
  color: rgb(188, 28, 148);
  border-radius: 8px;
  margin: 4px;
  padding: 4px;
}

.field p {
  color: rgb(188, 28, 148);
  text-decoration: underline;
  font-weight: bold;
}

input,
select {
  height: 24px;
  border-radius: 4px;
  border-width: 1px;
  padding-left: 4px;
  padding-right: 4px;
}

select input[type="select"] {
  margin-right: 4px;
}

.address {
  margin-top: 4px;
}

#address_list,
#leap_month_box,
#solar_time_box,
#lunar_birthdate_box {
  display: inline-block;
  flex-wrap: wrap;
  padding: 4px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid rgb(150, 83, 204);
  border-radius: 8px;
}

.text-box,
#leap_month_box,
#results,
#solar_time_box,
#lunar_birthdate_box {
  display: none;
}

#legend_box,
.text-box {
  max-width: 600px;
  margin-left: 16px;
  margin-right: 16px;
}

#map,
#form_box {
  margin-left: 22px;
  margin-right: 22px;
  width: 528px;
  /*border: 4px solid orange;*/
}

#map {
  margin-top: 10px;
  height: 528px;
  border: 4px solid rgb(146, 24, 228);
  border-radius: 8px;
}

#search,
#leap_month,
#sundial,
#lunar_birthdate,
#major_but,
#palace_but,
#remember_but,
#strength_but {
  margin-right: auto;
  margin-left: auto;
  border: 2px solid #990099;
  border-radius: 6px;
  padding-top: 0px;
  padding-bottom: 2px;
  padding-left: 6px;
  padding-right: 6px;
  font-weight: 400;
  background-color: rgb(183, 117, 238);
  color: yellow;
}

#clear_form {
  margin-top: 4px;
  border: 2px solid #990099;
  border-radius: 6px;
  padding-top: 4px;
  padding-bottom: 2px;
  padding-left: 6px;
  padding-right: 6px;
  font-weight: 400;
  background-color: rgb(183, 117, 238);
  color: yellow;
}

input#search:hover,
#leap_month:hover,
#sundial:hover,
#lunar_birthdate:hover,
#major_but:hover,
#palace_but:hover,
#strength_but:hover {
  background-color: rgb(207, 53, 245);
  color: rgb(255, 255, 0);
}

input#polaris[type="submit"] {
  border-radius: 10px;
  font-size: 16px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 22px;
  padding-right: 22px;
  height: 30px;
  background-color: rgb(220, 163, 253);
  color: rgb(118, 4, 93);
  border: 2px solid rgb(118, 4, 93);
}

input#polaris:hover {
  background-color: rgb(207, 53, 245);
  color: rgb(255, 255, 0);
}

#footer {
  font-size: 12px;
  max-width: 428px;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 18px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(54, 4, 65, 0.829);
  border-radius: 8px;
  padding-top: 2px;
  padding-bottom: 4px;
}

#footer p {
  line-height: 1.4;
  color: white;
}

#footer a {
  text-decoration: underline;
  color: white;
}

#footer a:hover {
  color: #ffff00;
  background-color: #990099;
}

/********************/
.star img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.legend_p span {
  border: 1px solid rgb(89, 138, 180);
  margin: 2px !important;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 4px;
}

.move,
.love,
.ground {
  padding: 2px;
  border-width: 4px !important;
  border-style: solid;
  border-radius: 8px;
}

.move {
  border-color: #4da3b6 !important;
  background-color: #d7eeff;
}

.love {
  border-color: #9e5d9e !important;
  background-color: #ffcce1;
}

.ground {
  border-color: #b3b358 !important;
  background-color: #faffc7;
}

/*
.move {
  border-color: #4da3b6 !important;
  background-color: #d7eeff;
}


/*
.move {
  border-color: #4da3b6 !important;
  background-color: #c7eff84f;
}

.love {
  border-color: #9e5d9e !important;
  background-color: #f8e0f84f;
}

.ground {
  border-color: #b3b358 !important;
  background-color: #f4f4a84f;
}
*/
#legend_box {
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

#legend_box p {
  margin-top: 4px;
  margin-bottom: 4px;
  margin-left: 2px;
  margin-right: 2px;
}

.star_legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.star_legend p {
  padding-left: 2px;
  padding-right: 2px;
  border-width: 2px !important;
  border-radius: 4px;
  margin-top: 12px;
  margin-bottom: 0px;
  margin-left: 2px;
  margin-right: 2px;
}

.strength {
  display: block;
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 4px;
  border: 2px solid rgb(150, 83, 204);
  border-radius: 8px;
}

.strength table {
  margin: auto;
}

.strength table td {
  padding-right: 4px;
}

.star_legend img {
  width: 16px;
  vertical-align: middle;
}

#remember_text {
  padding: 0px;
}

.caution {
  width: 218px;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
  background-color: #f2ecf8;
  border: 1px solid #bc8dee;
  border-radius: 8px;
  padding: 4px;
}

p.birth_day {
  line-height: normal;
}

@keyframes blinker {
  /*100% {
            opacity: 0;
          }*/
}

.link {
  color: rgb(0, 38, 255) !important;
}

#triangle {
  /*opacity: 0.6;
          filter: alpha(opacity=60);*/
  z-index: -1;
}

.animal_icon {
  font-size: 40px;
}

.cy_stars {
  clear: both;
  background-color: #fffec4;
  text-align: center;
  border: 1px solid rgb(128, 0, 139);
}

.cy_stars p {
  /*cy  =  Annual*/
  margin: 0;
}

/*****four convertion star table*************/

table.user_table {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgb(156, 211, 254);
  border-collapse: separate;
  border-spacing: 2px;
  border-radius: 4px;
}

.user_table td {
  border: 1px solid rgb(156, 211, 254);
  padding: 4px;
  border-radius: 4px;
  border-width: 2px;
}
.insert p {
  margin-bottom: 10px;
}
#palace_icon tr td,
#converted_star_icon tr td {
  text-align: center;
}

.table_box,
#chart {
  overflow-x: auto;
  display: block;
  margin-left: 10px;
  margin-right: 10px;
}

.life-chart,
.th {
  background-color: #def6ff;
}

.th td {
  color: #0a6088;
  font-weight: 598;
  font-size: 14px;
}

.caption {
  margin-top: 18px;
  margin-bottom: 2px;
  text-align: center;
  font-size: 16px;
  color: rgb(8, 158, 218);
}
.caption img {
  margin-left: 4px;
  margin-bottom: -6px;
  width: 51px;
  height: 29px;
}

.chart_title {
  font-weight: 800;
  font-family: Helvetica, cursive, Arial, sans-serif;
  text-align: center;
  letter-spacing: 1px;
  margin-top: 18px;
  font-size: 32px;
  color: rgb(2, 141, 198);
}

/***************************************/
#life-table-c {
  width: 100%;
  overflow-x: auto;
}
#life-table table {
  max-width: 968px;
}

#life-table td:first-child {
  width: 128px;
}

.star_legend .大運,
.star_legend .流年歲,
.star_legend .主星,
.star_legend .輔曜,
.star_legend .佐曜,
.star_legend .煞曜,
.star_legend .雜曜,
.star_legend .流化,
.star_legend .流曜 {
  float: none;
  width: auto;
}

/*.宮垣,*/
.current_year,
.八字大運,
.選流年,
.選大運,
.宮之宮顯,
.宮位,
.大運,
.長生,
.流年歲,
.流年年,
.流年宮,
.主星,
.輔曜,
.佐曜,
.煞曜,
.雜曜,
.流化,
.流曜,
.博士,
.將前,
.歲前,
.流博,
.小限,
.八字大運,
.化入,
.化出,
.自化 {
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  margin-top: 2px;
  margin-bottom: 2px;
  padding: 2px;
  width: 100%;
}

/*.宮垣 a {
    font-size: 16px;
  }
  */
#主星1,
#主星2,
#主星3,
#主星4,
#主星5,
#主星6,
#主星7,
#主星8,
#主星9,
#主星10,
#主星11,
#主星12 {
  width: 100%;
}

.主星 {
  border-color: rgb(176, 150, 253);
  background-color: rgb(244, 242, 255);
  border-width: 4px !important;
}

.長生 {
  border-color: rgb(40, 148, 148);
  background-color: rgb(194, 255, 221);
}

.輔曜 {
  border-color: rgb(140, 221, 134);
  background-color: rgb(219, 253, 216);
}

.佐曜 {
  border-color: rgb(98, 197, 182);
  background-color: rgb(207, 255, 248);
}

.煞曜 {
  border-color: rgb(224, 99, 141);
  background-color: rgb(255, 218, 230);
}

.雜曜 {
  border-width: 0px;
  border-style: none;
}

.流化 {
  border-color: rgb(189, 160, 1);
  background-color: rgb(252, 239, 168);
}

.流曜 {
  border-color: rgb(189, 160, 1);
  background-color: rgb(252, 239, 168);
}

/***************************************************************/

.博士 {
  border-color: rgb(54, 128, 85);
  background-color: rgb(163, 255, 185);
}

.將前 {
  border-color: rgb(112, 74, 156);
  background-color: rgb(237, 223, 255);
}

.歲前 {
  border-color: rgb(146, 41, 129);
  background-color: rgb(255, 213, 246);
}

.流博 {
  border-color: rgb(40, 110, 190);
  background-color: rgb(230, 225, 255);
}

.八字大運 {
  border-color: rgb(2, 147, 184);
  background-color: rgb(243, 255, 248);
}

.大運 {
  border-color: rgb(107, 176, 240);
  background-color: rgb(230, 243, 255);
  padding-left: 0px;
  padding-right: 0px;
}

/*
  .選大運 {
    border-color: rgb(241, 108, 18);
    background-color: rgb(200, 228, 253);
  }*/
.text {
  background-color: #969696;
}
.大運四化 {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
  padding-right: 0px;
}

.宮之宮顯 {
  border-color: rgb(91, 159, 238);
  background-color: rgb(226, 239, 255);
}

.宮位 {
  border-color: rgb(91, 221, 238);
  background-color: rgb(223, 251, 255);
}

.小限 {
  border-color: rgb(148, 148, 148);
  color: rgb(148, 148, 148);
  background-color: transparent;
}

.選大運 > div {
  /*major palace lower background*/
  background-color: rgb(104, 104, 104);
  margin-top: 2px;
  padding: 4px;
}

#流年 {
  display: block;
  /*Middle section information*/
  text-align: left;
}

.選流年 {
  margin-top: 2px;
  background-color: rgb(182, 220, 255);
}

.流年其他格 {
  border: 2px solid rgb(162, 206, 248);
}

.流年年 {
  border-color: #7cb66d;
  background-color: #f3fff0;
}

.流年宮 {
  /*current palace lower background*/
  border-color: #94d685;
  background-color: #e0ffd8;
  /*margin-top: 2px;
    padding: 4px;*/
}

.流年歲 {
  border: 2px solid rgb(84, 204, 188);
  background-color: rgb(200, 255, 243);
}

.大運宮,
.流年宮,
.流年年 {
  display: none;
}

.palace img {
  vertical-align: bottom;
  margin-left: 2px;
  margin-right: 2px;
}

/*
.宮之宮顯,
.宮位,
.長生顯,
.雜曜 {
  display: inline-block;
  width: auto !important;
  margin-right: 2px;
}*/

.雜曜顯 {
  border: 2px solid #4da3b6;
  background-color: #c7f5ff;
  border-radius: 4px;
}

.雜曜顯 p {
  margin: 0px !important;
}

.十二宮,
.雜曜顯 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#英五行數 {
  color: rgb(8, 158, 218);
}

.current_year {
  margin: 2px 1px;
  text-align: center;
  display: block;
  border-color: #034188;
  background-color: rgb(212, 240, 188);
  padding: 2px;
}

.button_sh {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  justify-content: space-between;
}

.button_sh img {
  margin-right: 4px;
  width: 48px !important;
  height: 28px !important;
  vertical-align: middle;
}

.button_sh p {
  margin-top: 2px;
  overflow-wrap: break-word;
}

.button_box {
  /*Essential & NonEssential Stars*/
  max-width: 300px !important;
  margin-bottom: 8px;
}

#heading_box {
  width: 100%; /* Ensures it takes the full width of the screen */
  overflow-x: auto; /* Enables horizontal scrolling when content overflows */
  display: flex; /* Ensures inline-block elements are displayed properly */
  justify-content: center; /* Centers content if needed */
}

#heading {
  padding-top: 18px;
  padding-left: 8px;
  padding-right: 68px;
  display: flex;
  width: max-content; /* Ensures it takes only as much width as needed */
  margin: auto;
}
#生肖 {
  font-size: 48px;
  transform: scaleX(-1);
}

.用戶姓名 {
  font-weight: 600;
  border: 8px dotted rgb(156, 211, 254);
  border-radius: 6px;
  padding: 6px;
  padding-right: 8px;
  margin-top: 0px !important;
  margin-bottom: 6px;
  align-self: flex-end;
}

.用戶姓名 p {
  text-align: center;
}

.用戶姓名 span {
  font-size: 18px;
  color: rgb(7, 175, 241);
  margin-bottom: 12px;
}

.用戶資料 {
  text-align: center;
}

#三甪形,
#三甪形2 {
  background-position: center center;
  background-repeat: no-repeat;
}

.熒光 {
  background-color: #ffff00;
}

.red {
  border: 2px solid rgb(131, 6, 131);
  margin-top: 2px;
  padding: 2px;
}

.content {
  background-color: rgb(254, 178, 178);
  background-color: rgb(198, 254, 198);
}

/**************************************/

.長生顯,
.博士顯,
.雜曜顯,
.將前顯,
.歲前顯,
.流博顯,
.流曜顯,
.小限顯,
.大運顯,
.流年顯,
.飛星顯,
.宮之宮顯,
.本命飛化,
.大運飛化,
.流年飛化,
.八字大運顯,
.胎命身顯,
#the-12-palaces-table-show,
#converted-stars-show,
#the-12-major-palaces-table-show,
#annual-palace-table-show,
#life-chart {
  display: none;
}

#流昌曲 {
  display: none;
}

#ms_logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 218px;
  margin-bottom: -12px;
}

.star_box {
  border: 1px solid rgb(18, 100, 82);
  padding: 2px;
  margin: 2px;
}

.space {
  margin-bottom: 8px !important;
}

.c_radio label {
  vertical-align: middle;
}

.c_radio input[type="radio"] {
  vertical-align: middle;
}

.飛星標題 {
  background-color: rgb(168, 238, 248);
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: 0px;
  margin-bottom: 4px;
}

.化入 {
  background-color: rgb(234, 255, 224);
  border-color: rgb(113, 177, 236);
}

.化出 {
  background-color: rgb(255, 253, 224);
  border-color: rgb(206, 194, 23);
}

.自化 {
  background-color: rgb(255, 228, 228);
  border-color: rgb(204, 104, 104);
}

/*
.化入 div,
.化出 div,
.自化 div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


.化入 .月旺相,
.化出 .月旺相,
.自化 .月旺相 {
  margin-bottom: 2px;
  margin-left: 1px;
  margin-right: 1px;
}*/

.化入 p,
.化出 p,
.自化 p {
  text-align: left !important;
}

.p_emo .op {
  display: inline-block;
  -ms-transform: rotate(180deg);
  /* IE 9 */
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.flip {
  display: inline-block;
  transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
  transform: scaleX(-1);
}

.icon-size,
.icon-size td {
  font-size: 24px;
}

.宮干 {
  display: inline-block;
  font-size: 16px !important;
}

#conversion {
  display: none;
}
.大乙,
.大乙 a {
  display: inline;
  color: gray;
}

.color-pink td {
  background-color: #ffffd6;
}

.color-blue td {
  background-color: #e4ffe0;
}

/********* Lucky Pinwheel */
#pinwheel {
  max-width: 362px;
  margin-left: auto;
  margin-right: auto;
}
#pinwheel h1 {
  all: unset;
  width: 238px;
  display: block;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
  font-size: 22px;
  padding-top: 6px;
  border-color: rgb(255, 146, 44);
  border-style: solid;
  border-width: 2px;
  border-radius: 8px;
}
#pinwheel {
  width: 360px;
  height: 700px;
  border: 1px solid yellowgreen;
}

#pinwheel h1,
#pinwheel p,
#pinwheel a:visited {
  background-color: rgba(0, 0, 0, 0.48);
  color: yellow;
  text-align: center;
}

#pw-app {
  z-index: -1;
  margin-top: 8px;
  border: 1px solid rgb(248, 248, 190);
}

/***Life-Chart***************************/
#life-chart,
#星鈕,
#星鈕盒 {
  margin-left: auto;
  margin-right: auto;
  max-width: 740px;
  /*border: 1px solid lavender;*/
}
#life-chart table {
  width: 100%;
  /*border-collapse: collapse;*/
}

#life-chart td {
  vertical-align: top;
  width: 25%;
  padding: 2px;
  border: 2px solid purple;
  border-radius: 6px;
  border-spacing: 4px;
}

/*****************************/
#星鈕 {
  display: flex;
  flex-wrap: wrap;
}
#星鈕 > div {
  background-color: rgb(218, 244, 255);
  border: 1px solid rgb(7, 75, 138);
  border-radius: 8px;
  padding: 2px;
  margin: 2px;
}

#星鈕 > div:hover {
  background-color: rgb(50, 130, 204);
  border-color: #defdff;
  color: #defdff;
}
.刪除星星 {
  background-color: rgb(255, 186, 244) !important;
  border: 1px solid #8600bb !important;
  color: #3d003a !important;
}

#刪除星星:hover {
  background-color: rgb(168, 0, 140);
  border: 1px solid yellow;
  color: yellow;
}

.刪除星星:hover {
  background-color: rgb(168, 0, 140) !important;
  border: 1px solid yellow !important;
  color: yellow !important;
}

#刪除星星 {
  float: left;
  background-color: rgb(255, 186, 244);
  border: 1px solid #8600bb;
  color: #3d003a;
  border-radius: 8px;
  padding: 2px;
  margin: 2px;
}

.plot {
  display: inline-block;
  white-space: nowrap;
}

.流年表 {
  border: 1px solid rgb(194, 176, 10);
  border-radius: 6px;
  padding: 2px;
  background-color: #f4f4a8;
  margin-top: 2px;
  margin-bottom: 2px;
}

#aib {
  /*ai box*/
  max-width: 698px;
  margin-top: 24px;
}

#aib td {
  padding-top: 8px;
  padding-bottom: 6px;
  padding-left: 18px;
  padding-right: 18px;
}

#命宮ai,
#遷移ai {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 20px;
  vertical-align: bottom;
  text-decoration: underline;
}

#命宮ai p,
#遷移ai p {
  margin-top: 0px !important;
  vertical-align: middle;
  padding: 0px;
}

.星名ai {
  margin-top: 0px !important;
  margin-bottom: 2px;
  font-size: 18px;
  text-decoration: underline;
}

.星名ai p {
  vertical-align: middle;
}

#aib p {
  margin-top: 12px;
  margin-bottom: 12px;
}

.星星 {
}
/**八字***/
.八字六神格 {
  display: flex;
  flex-wrap: wrap;
  word-break: break-all;
}

.八字六神,
.八字六神0,
.八字六神1,
.八字六神2,
.八字長生 {
  border-radius: 6px;
  padding-left: 1px;
  padding-right: 1px;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-right: 2px;
}

.八字六神 {
  border: 1px solid rgb(196, 76, 6);
  background-color: #fcd499;
}

.八字長生 {
  border: 1px solid rgb(14, 146, 2);
  background-color: #d5fce6;
}

.八字六神0,
.八字六神1,
.八字六神2 {
  border: 1px solid rgb(194, 176, 10);
  background-color: #f4f4a8;
}

#八字表 {
  margin-right: 8px;
  margin-left: 8px;
  overflow: auto;
  /*margin-left: auto;
          margin-right: auto;
          width: 1024px;
          border: 1px solid blueviolet
          white-space: nowrap;*/
}

#八字 table tr td,
#胎命身 table tr td {
  max-width: 128px;
}

#八字表 td {
  vertical-align: text-top;
}

#八字表標題,
#胎命身格 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 2px;
  font-size: 18px;
}

.八字 td {
  font-size: 18px;
  text-align: center;
}

.支藏干 td,
#八字星 td {
  font-size: 14px;
  text-align: center;
  word-break: keep-all;
}

.日元 {
  background-color: #ffffd6;
}

.月旺相 {
  display: inline-block;
  border: 1px solid rgb(194, 176, 10);
  background-color: #f4f4a8;
  border-radius: 6px;
  padding: 1px;
  margin-top: 1px;
  margin-bottom: 1px;
}
.bgg {
  border: 1px solid rgb(26, 160, 80);
  background-color: #c4fdc8;
}

.bgp {
  background-color: rgb(250, 242, 242);
}
.bgp td {
  border: 2px solid rgb(252, 155, 184);
  border-radius: 4px;
}
.bgb {
  background-color: rgb(240, 248, 252);
}

.bgb td {
  border: 2px solid rgb(118, 166, 255);
  border-radius: 4px;
}

.月旺相 img {
  vertical-align: -12%;
}

#用戶 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 4px;
  margin-bottom: 8px;
}
#用戶 .用戶 {
  font-size: 16px !important;
  font-weight: 400;
  margin: 4px;
  border: 1px solid rgb(194, 176, 10);
  background-color: #f4f4a8;
  border-radius: 6px;
  padding: 2px;
  word-break: keep-all;
}

.title {
  font-weight: 600;
  border: 1px solid rgb(163, 71, 224);
  border-radius: 6px;
  padding: 2px;
  padding-right: 6px;
  margin: 4px;
  display: inline-block;
  background-color: rgba(248, 236, 255, 0.6);
  text-align: left !important;
}

#流年 {
  font-weight: 800;
  padding: 2px;
  margin-top: 6px;
  margin: 6px;
  text-align: center;
  text-decoration: underline;
}

#星星 {
  text-align: center;
}
.star_name {
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 400;
}
.灰暗 {
  color: rgb(90, 90, 90);
}

/*mini table*/
#mini {
  margin-top: 28px;
}
#mini p {
  text-align: left;
}
#mini table {
  margin: auto;
  border-spacing: 4px;
}
#mini table td {
  vertical-align: top;
  padding: 4px;
  border: 1px solid #4da3b6;
  border-radius: 8px;
}
#mini table td span {
}

.mc {
  /*mini life chart*/
  border: 2px solid #65a5a3 !important;
  background-color: #e8fffe;
}

.mplt a:link,
.mplt a:visited {
  /*mini palace text*/
}

.mplt a:hover {
  /*mini palace text
  color: rgb(36, 168, 168) !important;*/
}
/*
  #胎命身格 {
    text-align: center;
  }
  */

#ft_0,
.conversion-hook {
  border: 2px solid #1890c8;
  border-radius: 8px;
  padding: 4px;
}

.conversion-hook span {
  color: rgb(177, 8, 255);
  font-weight: 600;
}

#ft_1 {
  font-size: 18px;
  color: #107bad;
}

#ft_2 {
  color: #107bad;
  font-weight: 800;
}
.ybg {
  background-color: white;
}

.主星_m {
  border: 2px solid rgb(160, 74, 230);
  background-color: rgb(243, 209, 253);
}

.輔曜_m,
.佐曜_m {
  border-color: rgb(61, 221, 208);
  background-color: rgb(194, 255, 250);
}

.煞曜_m {
  border-color: rgb(231, 43, 58);
  background-color: rgb(250, 194, 198);
}