#display-bazi div, #display-bazi div p {
  font-family: 'Oswald', sans-serif;
  color: #222;
}

/*body {
  overscroll-behavior-y: none;
}

a:hover {
  text-decoration: none;
}
*/
/*::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}
*/
/*#bazi-elements-chart svg, #bazi-tengods-chart svg {
  width: 100%;
  max-width: 100%;
  height: 90vw;
  min-height: 90vw;
  margin-top: 0px;
  margin-bottom: 25px;
}
*/
.title-big {
/*      font-family: "Arial Black";*/
  text-align: center;
  font-weight: 369;
}

/*.ajax-wait {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 99999;
  text-align: center;
  vertical-align: middle;
  line-height: 100vh;
  font-size: 35vw;
  color: #ccc;
  background-color: rgba(0,0,0, 0.7);
  pointer-events: none !important;
  display: none;
}*/

.btn:focus {
  box-shadow: none;
}

/*.myinput, .myinputx {
  background: #ddd;
  text-align: center;
  text-align-last: center;
}*/

.area-title {
  font-size: 1.2em;
  background: #000; 
  color: #eee; 
  text-align: center; 
  padding: 4px 0 2px 30px;
  width: 100%;
}

.pillar {
  vertical-align: top;
}

.pillar-title {
  font-family: "Arial";
  font-size: 0.9em;
  text-align: center;
  font-weight: bold;
  color: #ccc;
  background: #000;
  padding: 1px 0 3px 0;
  min-width: 85px !important;
}

.natal-chart {
  width: 100% !important;
  text-align: center;
}

.natal-pillar {
  width: 25% !important;
}

.luck-pillar {
  width: 25%;
  min-width: 111px;
}

.natal-container, .decade-container, .annual-container {
  width: 100% !important;
  overflow-x: scroll;
  overflow-y: hidden;
}

.heaven-stem {
  width: 25% !important;
  min-width: 24%;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  padding-bottom: 0 10px 10px 10px;
}

.earth-branch {
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  padding-bottom: 10px;
}

.hidden-stem {
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
  color: #444;
}

.bazi-dm {
  box-shadow: inset 0px 0px 3px 6px #fa6;
}

.bazi-modern {
  margin: 10px 15px 0 15px;
  min-width: 78px !important;
}

.bazi-modern-small {
  margin: 0 auto;
  width: 58px !important;
}

.bazi-notation {
  width: 100%;
  font-size: 2.9em;
  font-weight: bold;
  white-space: nowrap;
  margin-top: 10px;
}
.bazi-notation-chinese {
  width: 100%;
  font-size: 3.5em;
  font-weight: bold;
  white-space: nowrap;
}
.bazi-notation-small {
  width: 100%;
  font-size: 1.6em;
  font-weight: bold;
  white-space: nowrap;
}

.bazi-chinesename {
  width: 100%;
  font-size: 1em;
  white-space: nowrap;
  color: #444;
  margin-top: 15px;
  margin-bottom: -15px;
}    
.bazi-chinesename-small {
  width: 100%;
  font-size: 1em;
  white-space: nowrap;
  color: #444;
  margin-top: 10px;
  margin-bottom: -7px;
}

.bazi-element {
  width: 100%;
  font-size: 1em;
  white-space: nowrap;
  color: #444;
  margin-top: -12px;
}    
.bazi-element-small {
  width: 100%;
  font-size: 1em;
  white-space: nowrap;
  color: #444;
  margin-top: -6px;
  margin-bottom: 1px;
}

.bazi-animal {
  width: 100%;
  font-size: 1em;
  white-space: nowrap;
  color: #444;
  margin-top: -12px;
  margin-bottom: 8px;
}    
.bazi-animal-small {
  width: 100%;
  font-size: 1em;
  white-space: nowrap;
  color: #444;
}

.bazi-god {
  width: 100%;
  font-size: 1em;
  white-space: nowrap;
  color: #444;
  margin-top: -5px;
}    
.bazi-god-small {
  width: 100%;
  font-size: 1em;
  white-space: nowrap;
  color: #444;
  margin-top: -7px;
}

.bazi-lifecycle {
  font-size: 0.8em;
  white-space: nowrap;
  text-align: center;
  line-height: 135%;
  padding: 5px;
  color: #888;
}

.bazi-melodic {
  font-size: 0.8em;
  white-space: wrap;
  text-align: center;
  line-height: 110%;
  padding: 5px;
  color: #888;
}

.bazi-interactions {
  font-size: 0.8em;
  white-space: nowrap;
  text-align: center;
  line-height: 145%;
  padding: 5px;
  color: #888;
}

.bazi-planet {
  font-size: 0.85em;
  white-space: nowrap;
  text-align: center;
  line-height: 120%;
  padding: 5px;
  color: #888;
}

.bazi-jupiter-return {
  font-size: 0.85em;
  white-space: nowrap;
  text-align: center;
  line-height: 120%;
  padding: 5px;
  color: #888;
}

.bazi-solar-return {
  font-size: 0.85em;
  white-space: nowrap;
  text-align: center;
  line-height: 120%;
  padding: 5px;
  color: #888;
}

.bazi-lifecycle .badge, .bazi-interactions .badge {
  font-size: 0.75em;
  position: relative;
  top: -1px;
}

.bazi-family {
  margin: 3px 0 -10px 0;
  background: #757;
  color: #fff;
  padding: 2px 0 3px 0;
  outline: 1px solid #fff;
}

.bazi-tengods-table {
  margin: 3px 0 -10px 0;
  background: #775;
  color: #fff;
  padding: 2px 0 3px 0;
  outline: 1px solid #fff;
}


.familytree-chart .bazi-box {
}

.melodic {
  background: #f6f6f6;
}

.lifecycle, .interactions {
  overflow-x: scroll;
}

.wood-yang-color {
  color: #0a0 !important;
}
.wood-yin-color {
  color: #0a0 !important;
}
.fire-yang-color {
  color: #d00 !important;
}
.fire-yin-color {
  color: #d00 !important;
}
.metal-yang-color {
  color: #cb0 !important;
}
.metal-yin-color {
  color: #cb0 !important;
}
.water-yang-color {
  color: #12e !important;
}
.water-yin-color {
  color: #12e !important;
}

.wood-yang-bg {
  background: #99ff99;
}
.wood-yin-bg {
  background: #99ff99;
}
.wood-yang-bg div, .wood-yin-bg div {
  /*color: #060;*/
  color: #222;
}
.fire-yang-bg {
  background: #ff8888;
}
.fire-yin-bg {
  background: #ff8888;
}
.fire-yang-bg div, .fire-yin-bg div {
  /*color: #600;*/
  color: #222;
}
.earth-yang-bg {
  background: #afafaf;
}
.earth-yin-bg {
  background: #afafaf;
}
.earth-yang-bg div, .earth-yin-bg div {
  /*color: #666;*/
  color: #222;
}
.metal-yang-bg {
  background: #fffdaf;
}
.metal-yin-bg {
  background: #fffdaf;
}
.metal-yang-bg div, .metal-yin-bg div {
  /*color: #660;*/
  color: #222;
}
.water-yang-bg {
  background: #a1b1ff;
}
.water-yin-bg {
  background: #a1b1ff;
}
.water-yang-bg div, .water-yin-bg div {
  /*color: #006;*/
  color: #222;
}

.flatpickr-mobile {
  border: none;
  background: none;
}

#select-gender a.active::before {
  content: '√ ';
}

/*@media (max-width: 576px){.modal-dialog.modal-dialog-slideout {width: 80%}}
.modal-dialog-slideout {min-height: 100%; margin: 0 auto 0 0 ;background: #fff;}
.modal.fade .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(-100%,0);transform: translate(-100%,0);}
.modal.fade.show .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(0,0);transform: translate(0,0);flex-flow: column;}
.modal-dialog-slideout .modal-content{border: 0;}*/

.toggle_radio_wrapper {
  padding: 5px;
  z-index: 1;
}
.toggle_radio {
  position: relative;
  background: rgba(200, 200, 50, 0.9);
  overflow: hidden;
  margin: auto;
  padding: 0 !important;
  border-radius: 50px;
  position: relative;
  height: 30px;
  width: 320px;
  z-index: 1;
}
.toggle_radio > * {
  float: left;
}
.toggle_radio input[type=radio]{
  display: none;
}
.toggle_radio label p {
  color: #555;
  z-index: 0;
  display: block;
  width: 100px;
  height: 30px;
  margin: 3px 3px;
  border-radius: 50px;
  cursor: pointer;
  z-index: 10;
  text-align: center;
}
.toggle_option_slider{
  width: 100px;
  height: 24px;
  position: absolute;
  top: 3px;
  border-radius: 50px;
  transition: all .4s ease;
  z-index:1;
}


#click-display-notation:checked ~ .toggle_option_slider{
  background: rgba(255, 255, 255, 0.7);
  left: 3px;
}
#click-display-chinese:checked ~ .toggle_option_slider{
  background: rgba(255, 255, 255, 0.7);
  left: 110px;
}
#click-display-modern:checked ~ .toggle_option_slider{
  background: rgba(255, 255, 255, 0.7);
  left: 217px;
}

.zwds-container {
  padding: 3px 5px 0 5px;
  display: noflex;
  margin-bottom: 5px;
}
.zwds-natal-chart {
  height: calc(100vh - 60px);
  min-height: 476px;
  table-layout: fixed;
}
.zwds-box {
  position: relative;
  width: 25vw;
  height: calc(100vh/4 - 15px);
  min-height: 119px;
  border: 1px solid #aaa;
  table-layout: fixed;
}
.zwds-box-inside {
  width: 100% !important;
  height: calc(100vh/4 - 15px);
  min-height: 119px;
  overflow: hidden;
}
.zwds-box-inside-scroll {
  position: relative;
  top: 0;
  left: 0;
  width: 100% !important;
  height: calc(100vh/4 - 20px);
  min-height: 100px;
  text-align: left;
  vertical-align: top;
  padding: 3px 5px;
  overflow-y: scroll;
}
.zwds-center-box {
  text-align: left;
  vertical-align: top;
  padding: 10px;
  line-height: 130%;
  font-size: 15px;
}
.zwds-box p {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 120%;
  margin: 0;
}
.zwds-box p.palace-title {
  font-size: 13px;
  font-weight: 550;
  margin: 0;
}
.zwds-box p.palace-title-2 {
  font-size: 12px;
  font-weight: 550;
  margin: 0;
}
.zwds-box p.palace-stars {
  font-size: 11px;
  margin-top: 5px;
  line-height: 115%;
}
.zwds-box p.palace-element {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 11px;
}
.zwds-extradesc {
  display: none;
}
.zwds-westernastro {
  display: none;
  font-size: 11px;
  font-weight: normal;
  font-style: italic;
  line-height: 100%;
  color: #369;
}

#main-container {
  background: linear-gradient(270deg, #0489bb, #c60000, #7508bf, #396913);
  background-size: 600% 600%;
  -webkit-animation: sagedivine-top 24s ease infinite;
  -moz-animation: sagedivine-top 24s ease infinite;
  animation: sagedivine-top 24s ease infinite;
}

#top-header {
  padding: 5px 20px 5px;
  margin: 0;
  position: relative;
  background-color: #761;
}

@-webkit-keyframes sagedivine-top {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes sagedivine-top {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes sagedivine-top {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

img {
  max-width: 100%;
  height: auto;
}

#top-logo {
  max-width: 135px;
}

#top-menu-button {
  color: #fff;
  position: absolute;
  top: 7px;
  right: 25px;
}
#top-menu-button:hover {
  cursor: pointer;
}

/*@media screen and (orientation:portrait){
  #fullscreen-viewer, #viewer-iframe {
    width: 100vh !important;
    height: 100vw !important;
    position: absolute;
    top: 0;
  }
  #viewer-iframe {
    transform: rotate(90deg);
  }
}*/



	.natal-container, .decade-container, .annual-container, .transit-container, .extra-container {
      width: 100%!important;
      overflow-x: scroll;
      overflow-y: hidden;
	}
	#natal-chart, #decade-chart, #annual-chart, #transit-chart, #extra-chart {
	  table-layout: fixed;
      width: 100% !important;
	}
	.transit-chart, .extra-chart {
      width: 100%!important;
	  text-align: center;
	}
    
	.bazi-modern { margin: 3px; }
	
	.extra-chart .heaven-stem {
	  width: 20%!important;
	  min-width: 20%;
	}


	.fire-yin-bg, .fire-yang-bg {
		background: url(/img/nusantara-bazi-firebg.png) center center;
		background-color: rgba(255,255,255,0.3);
    	background-blend-mode: lighten;
		background-size: cover;
	}
	.wood-yin-bg, .wood-yang-bg {
		background: url(/img/nusantara-bazi-woodbg.png) center center;
		background-color: rgba(255,255,255,0.3);
    	background-blend-mode: lighten;
		background-size: cover;
	}
	.water-yin-bg, .water-yang-bg {
		background: url(/img/nusantara-bazi-waterbg.png) center center;
		background-color: rgba(255,255,255,0.3);
    	background-blend-mode: lighten;
		background-size: cover;
	}
	.metal-yin-bg, .metal-yang-bg {
		background: url(/img/nusantara-bazi-metalbg.png) center center;
		background-color: rgba(255,255,255,0.3);
    	background-blend-mode: lighten;
		background-size: cover;
	}
	.earth-yin-bg, .earth-yang-bg {
		background: url(/img/nusantara-bazi-earthbg.png) center center;
		background-color: rgba(255,255,255,0.3);
    	background-blend-mode: lighten;
		background-size: cover;
	}


  .bazi-extrainfo {
    position: absolute;
    width: 100%;
    bottom: 3px;
    padding: 0 5px 5px 5px;
  }
  .bazi-extrainfo-small {
    width: 100%;
    padding: 0 5px 10px 5px;
  }
  .infocell {
    padding: 2px 2px 2px 2px;
    display: inline-block;
    border-radius: 20%;
    font-size: 14px;
  }
  .infocell .fa {
    color: #fff;
  }
  .bazi-extrainfo, .bazi-extrainfo-small {
  }
  .bazi-extrainfo-small .infocell {
    font-size: 12px;
  }
  
  #bazi-elements-chart svg {
    width: 100%;
    height: 100%;
    min-height: 369px;
    max-height: 630px;
  }
  #bazi-tengods-chart svg {
    width: 100%;
    height: 100%;
    min-height: 369px;
    max-height: 579px;
  }
  
  #celestial-form {
    display: none !important;
  }

.zwds-chinese {
  display: none;
}
.zwds-natal-chart .zwds-box {
    background: #edf;
}
.zwds-decade-chart .zwds-box {
    background: #deb;
}
.zwds-decade-chart .active-box {
    background: #ece;
  //background: #bda;
}
.zwds-annual-flying {
  box-shadow: inset 0 0 10px 10px #eae;
}
.zwds-annual-chart .zwds-box {
    background: #fdd;
}
.zwds-box:hover {
    background: #ffd !important;
    cursor: pointer;
  }
.zwds-center-box {
  padding: 0;
  position: relative;
}
.zwdscenter {
  width:100%; height:100%; position:absolute; display:none; opacity:0.5;
}
.zwds-box p.palace-decade {
  position: absolute;
  bottom: 15px;
  right: 5px;
  font-size: 14px;
}
.zwds-mainstars { color: #639; }
.zwds-extrastars { color: #963;	}
.zwds-extrastars2 { color: #369; }
.zwds-extrastars2 { color: #369; }
.zwds-extrastars3 { color: #369; }
.zwds-boshichangsheng { color: #936; }

.zwds-chinesechar {
  display: none;
}
.hualabel .badge, .hualabeldecade .badge, .hualabelannual .badge, .hualabelself .badge {
  font-size: 11px;
}
.hualabeldecade .badge {
  box-shadow: 0 0 0 2px #3f3;
}
.hualabelannual .badge {
  box-shadow: 0 0 0 2px #ff3;
}
.palace-title { font-size: 15px; }
.decade-palace { font-size: 14px; color: #393; }


.display-modern > .img-fluid {
  width: 100% !important;
  max-width: 99px !important;
}