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

body {
  font-family: "微軟正黑體", "Microsoft JhengHei", Tahoma, Verdana, Arial,
    sans-serif;
  background-attachment: fixed;
  background-image: url(../images/tf.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
}

/************************************************/
html,
body,
iframe,
canvas,
#c2canvasdiv,
#pinwheel {
  touch-action: auto;
  -ms-touch-action: auto;
}
.scroll {
  overflow-x: auto;
}
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: 600px;
  margin-left: auto;
  margin-right: auto;
}

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

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

.header_title {
  clear: both;
  display: block;
  margin-top: 4px;
  background-color: rgb(253, 74, 223);
  font-size: 16px;
  padding: 6px;
  color: white;
  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 {
  max-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: 34px;
  margin-left: 8px;
  margin-top: 2px;
  margin-bottom: 2px;
  padding-top: 6px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 2px;
  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: 8px;
  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(212, 0, 255);
}

/**********chart******************/

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

#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 {
  color: #aa0000;
  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 {
  margin-bottom: 4px;
}

#address_list,
#leap_month_box,
#solar_time_box,
#六月四季表,
#截空截路表,
#旬空表,
#lunar_birthdate_box {
  padding: 4px;
  border: 2px solid rgb(150, 83, 204);
  border-radius: 8px;
}

#旬空表 {
  margin-bottom: 6px;
}

#leap_month_box,
#results,
#solar_time_box,
#六月四季表,
#截空截路表,
#旬空表,
#lunar_birthdate_box {
  display: none;
}

#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 {
  display: block;
  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,
#六月四季紐:hover,
#截空截路紐:hover,
#旬空表紐:hover,
#lunar_birthdate: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;
}
*/

.move,
.love,
.ground {
  border-width: 4px !important;
}

.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;
}

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

.ground {
  border-color: #b3b358 !important;
  background-color: #faffc7;
}
*/
/*80F6292
B21F66
3B0000*/

.legend_box {
  display: block;
  margin: auto;
  max-width: 600px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.legend p {
  width: unset;
  padding: unset;
  padding: 2px;
  display: inline-block !important;
  text-align: center;
  margin: 4px;
}

.star_legend {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1px;
  margin-bottom: 1px;
}

.strength {
  display: block;
  border: 2px solid rgb(142, 196, 228);
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 4px;
}

.strength table {
  margin: auto;
}

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

.strength p {
  text-align: center;
  word-break: break-all;
}

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

.caution {
  width: 214px;
  margin-top: 6px;
  margin-bottom: 6px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffd8d8;
  border: 2px solid #ac0118;
  border-radius: 8px;
  padding: 2px;
  text-align: center;
}

.注意 {
  color: #ac0118;
}

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 {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgb(156, 211, 254);
  border-collapse: separate;
  border-spacing: 2px;
  overflow-x: auto;
}

.user_table td {
  border: 1px solid rgb(156, 211, 254);
  padding: 4px;
}
.insert p {
  margin-bottom: 10px;
}

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

.th {
  background-color: #f8f3ff;
}

.th td {
  color: #9244ec;
  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);
}

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

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

/*.宮垣,*/
.current_year,
.move,
.love,
.ground,
.選流年,
.選大運,
.宮之宮顯,
/*.歲將博顯,*/
.宮位,
.大運,
.八字大運,
.八字大運宮星,
.長生,
.流年歲,
.流年年,
.流年宮,
.主星,
.輔曜,
.佐曜,
.煞曜,
.雜曜,
.流化,
.流曜,
.博士,
.將前,
.歲前,
.流博,
.小限,
.化入,
.化出,
.自化 {
  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(57, 182, 140);
  background-color: rgb(225, 255, 232);
}

.上大運 {
  width: auto !important;
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
  padding: 2px;
}

.大運 {
  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);
}

.歲將博顯,
.博長 {
  display: flex;
  justify-content: space-between;
  padding-top: 0;
}

.歲將博顯 > div,
.博長 > div {
  margin-left: 2px;
  margin-right: 2px;
}

.宮位 {
  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;
}

.宮之宮顯,
.宮位,
.雜曜 {
  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;
}

.button_box img {
  width: 68px !important;
  height: 26px !important;
}

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

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

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

#生肖 {
  padding-top: 18px;
  font-size: 48px;
  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: 348px;
  margin-bottom: -8px;
}

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

.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);
}
.arrow {
  border-radius: 4px;
}

.arrow:hover {
  background-color: transparent;
  outline: 2px solid #0c8dc0;
}

.btn img:hover,
.btn流年神煞 img:hover {
  z-index: 1;
  /*filter: hue-rotate(300deg);*/
  outline: 1px solid #c56e0b;
  padding: 2px;
  border-radius: 14px;
}

.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(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;
}

.月旺相 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,
#流年 {
  text-align: left !important;
}

#星星 {
  text-align: center;
}
.star_name {
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 400;
}

.干支 {
  font-weight: 900;
}

.甲,
.寅 {
  border: 4px solid #28a010 !important;
  border-radius: 10px !important;
}
.乙,
.卯 {
  border: 5px dotted #28a010 !important;
  border-radius: 10px !important;
}
.壬,
.子 {
  border: 4px solid #44b2c0 !important;
  border-radius: 10px !important;
}
.癸,
.亥 {
  border: 5px dotted #44b2c0 !important;
  border-radius: 10px !important;
}
.丙,
.午 {
  border: 4px solid #e90b0b !important;
  border-radius: 10px !important;
}
.丁,
.巳 {
  border: 5px dotted #e90b0b !important;
  border-radius: 10px !important;
}
.庚,
.申 {
  border: 4px solid rgb(255, 196, 0) !important;
  border-radius: 10px !important;
}
.辛,
.酉 {
  border: 5px dotted rgb(255, 196, 0) !important;
  border-radius: 10px !important;
}
.戊,
.辰,
.戌 {
  border: 4px solid #8b4513 !important;
  border-radius: 10px !important;
}
.己,
.丑,
.未 {
  border: 5px dotted #8b4513 !important;
  border-radius: 10px !important;
}
.xxx {
  border-style: inset;
}

.甲格 {
  border: 2px solid #28a010 !important;
  border-radius: 6px !important;
}

.乙格 {
  border: 3px dotted #28a010 !important;
  border-radius: 6px !important;
}

.壬格 {
  border: 2px solid #44b2c0 !important;
  border-radius: 6px !important;
}

.癸格 {
  border: 3px dotted #44b2c0 !important;
  border-radius: 6px !important;
}

.丙格 {
  border: 2px solid #e90b0b !important;
  border-radius: 6px !important;
}

.丁格 {
  border: 3px dotted #e90b0b !important;
  border-radius: 6px !important;
}

.庚格 {
  border: 2px solid rgb(255, 196, 0) !important;
  border-radius: 6px !important;
}

.辛格 {
  border: 3px dotted rgb(255, 196, 0) !important;
  border-radius: 6px !important;
}

.戊格 {
  border: 2px solid #8b4513 !important;
  border-radius: 6px !important;
}

.己格 {
  border: 3px dotted #8b4513 !important;
  border-radius: 6px !important;
}

.本宮,
.現大,
.現流,
.身宮,
.身宮,
.宮干支 {
  border-radius: 6px;
  padding-top: 0px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  margin-left: 1px;
  margin-right: 0px;
}
.本宮 {
  color: rgb(124, 2, 22);
  border: 1px solid rgb(124, 2, 22);
  background-color: #ffd9d9;
}

.現大 {
  color: rgb(24, 83, 138);
  border: 1px solid rgb(16, 60, 102);
  background-color: rgb(222, 250, 255);
}

.現流 {
  color: rgb(53, 0, 58);
  border: 1px solid rgb(53, 0, 58);
  background-color: rgb(252, 223, 255);
  border-radius: 6px;
}

.身宮 {
  color: rgb(93, 11, 11);
  border: 1px solid rgb(124, 2, 22);
  background-color: rgb(255, 254, 236);
}

.宮干支 {
  color: rgb(101, 2, 63);
  border: 1px solid rgb(138, 24, 108);
  background-color: rgb(244, 255, 200);
}

.命財官 {
  width: fit-content;
  margin: auto;
  margin-bottom: 4px;
  font-size: 16px !important;
}

.命財官 > span {
  font-size: 16px !important;
}

#斗數格 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
}
.斗數格 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
  overflow-x: auto;
}

#斗數格 > table,
.斗數格 > table {
  margin: 10px;
}