:root {
    --theme-color-primary: #2D3859;
    --theme-color-secondary: #2E3958;
}

.themeColorBg {
    background-color: var(--theme-color-secondary);
}

.themeColor {
    color: var(--theme-color-primary);
}

.directionDiv {
    background-color: var(--theme-color-secondary);
    color: white;
    border-radius: 20px;
}

.natalTd {
    width: 24%;
}

.natalTable td {
    line-height: 1.2;
}

.natalStem {
    font-size: 3.7em;
}

.natalCH {
    font-family: \6977\4F53;
}

.NatalTenGod {
    border: 1px solid black !important;
}

.NatalTenGodEng {
    font-size: 0.7em;
}

.natalAnimalSign {
    background-color: #CFAF69 !important;
    color: white !important;
    padding: 2%;
    border-radius: 50%;
}

.natalhiddenstemfont {
    font-size: 0.5em;
}

.yangelement {
    color: white !important;
    background-color: #CFAF69 !important;
}

.yinelement {
    color: white !important;
    background-color: var(--theme-color-secondary) !important;
}

.DirRing {
    left: 14.5%;
    width: 72%;
    top: 14%;
}

.DirText {
    font-weight: 800;
    width: 70px;
    font-size: 0.7rem;
}

.DirTextSmall {
    font-weight: 500;
    font-size: 0.8em;
}

.DirGood {
    color: var(--theme-color-secondary-light);
}

.Dir-S, .Dir-South {
    top: 1%;
    left: 38%;
}

.Dir-SW, .Dir-Southwest {
    top: 15%;
    left: 78%;
}

.Dir-SE, .Dir-Southeast {
    top: 15%;
    left: 5%;
}

.Dir-E, .Dir-East {
    top: 42%;
    left: 1%;
}

.Dir-NE, .Dir-Northeast {
    top: 78%;
    left: 5%;
}

.Dir-NW, .Dir-Northwest {
    top: 75%;
    left: 75%;
}

.Dir-W, .Dir-West {
    top: 42%;
    left: 84%;
}

.Dir-N, .Dir-North {
    top: 83%;
    left: 42%;
}

.vertical-text {
    font-size: 9px;
    font-weight: 600;
    -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    height: 74px;
    line-height: 1.2;
}

.sectorTable {
    font-size: 0.65em;
}

.DNADesc {
    font-size: 0.8em;
}

.sectorTable tr {
    border-bottom: 1px solid;
}

.tableHeight {
    min-height: 90px;
    height: 90px;
}

.chkTest {
    display: block;
    position: relative;
    padding-left: 20px;
    /* margin-bottom: 12px; */
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #2d3859 !important;
}

    /* Hide the browser's default checkbox */
    .chkTest input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.chkMark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 13px;
    width: 13px;
    border: 1px solid;
    border-radius: 6px;
    background-color: #fff;
}

/* On mouse-over, add a grey background color */
.chkTest:hover input ~ .chkMark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chkTest input:checked ~ .chkMark {
    background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.chkMark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.chkTest input:checked ~ .chkMark:after {
    display: block;
}

/* Style the checkmark/indicator */
.chkTest .chkMark:after {
    left: 1px;
    top: 1px;
    width: 9px;
    height: 9px;
    border: 4px solid #2d3859 !important;
    /* border-width: 0 3px 3px 0; */
    border-radius: 5px;
    /* -webkit-transform: rotate(45deg); */
    -ms-transform: rotate(45deg);
    /* transform: rotate(45deg); */
}

.colseparator {
    border-right: 1px solid;
}

.colfsimages {
    width: 20px;
    margin-right: 5px;
}

.colddl {
    width: 100%;
    /* height: calc(1em + 0.75rem + 0px); */
    border: 2px solid #2d3859;
    border-radius: 30px;
    margin-bottom: 5px;
}

.clsNatalFlyingStar {
    display: none;
}

.clsYearFlyinngStar {
    display: none;
}

.clsMonthFlyingStar {
    display: none;
}

.clsNatalWhitePurpleScript {
    display: none;
}

.clsYearWhitePurpleScript {
    display: none;
}

.clsMonthWhitePurpleScript {
    display: none;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: table-cell;
    width: 60px;
    height: 34px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #0080009c;
}

input:focus + .slider {
    box-shadow: 0 0 1px #0080009c;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.periodChart {
    position: absolute;
    width: 32% !important;
    top: 27% !important;
    left: 34% !important;
    z-index: 2;
}

.periodChartR {
    position: absolute;
    width: 70% !important;
    top: 1% !important;
    left: 15% !important;
    z-index: 2;
}


.houseMapFav {
    position: absolute;
    width: 70px;
    font-size: 0.8em;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
}

.nobelmanicon0 {
    position: absolute;
    width: 3%;
    top: -2%;
    left: 46.8%;
}

.skyhorse0 {
    position: absolute;
    width: 3%;
    top: -7.0%;
    left: 46.8%;
}

.peachB0 {
    position: absolute;
    width: 3%;
    top: -2.2%;
    left: 50.3%;
}

.intelligence0 {
    position: absolute;
    width: 3%;
    top: -7%;
    left: 50.3%;
}

.nobelmanicon1 {
    position: absolute;
    width: 3%;
    top: 6%;
    left: 55%;
}

.skyhorse1 {
    position: absolute;
    width: 3%;
    top: 1.3%;
    left: 55.6%;
}

.peachB1 {
    position: absolute;
    width: 3%;
    top: 7%;
    left: 58.1%;
}

.intelligence1 {
    position: absolute;
    width: 3%;
    top: 2.3%;
    left: 59.2%;
}

.nobelmanicon2 {
    position: absolute;
    width: 3%;
    top: 9.7%;
    left: 62.1%;
}

.peachB2 {
    position: absolute;
    width: 3%;
    top: 11.7%;
    left: 65.1%;
}

.intelligence2 {
    position: absolute;
    width: 3%;
    top: 7.6%;
    left: 66.7%;
}

.skyhorse2 {
    position: absolute;
    width: 3%;
    top: 5.4%;
    left: 63.7%;
}

.nobelmanicon3 {
    position: absolute;
    width: 3%;
    top: 15.7%;
    left: 68.6%;
}

.peachB3 {
    position: absolute;
    width: 3%;
    top: 19.3%;
    left: 71%;
}

.intelligence3 {
    position: absolute;
    width: 3%;
    top: 16%;
    left: 73.5%;
}

.skyhorse3 {
    position: absolute;
    width: 3%;
    top: 12.7%;
    left: 71.1%;
}

.nobelmanicon4 {
    position: absolute;
    width: 3%;
    top: 28.7%;
    left: 75%;
}

.peachB4 {
    position: absolute;
    width: 3%;
    top: 26.7%;
    left: 78.1%;
}

.intelligence4 {
    position: absolute;
    width: 3%;
    top: 22.4%;
    left: 76.5%;
}

.skyhorse4 {
    position: absolute;
    width: 3%;
    top: 24.4%;
    left: 73.3%;
}

.nobelmanicon5 {
    position: absolute;
    width: 3%;
    top: 39%;
    left: 77.6%;
}

.peachB5 {
    position: absolute;
    width: 3%;
    top: 38.6%;
    left: 81%;
}

.intelligence5 {
    position: absolute;
    width: 3%;
    top: 33.7%;
    left: 80.5%;
}

.skyhorse5 {
    position: absolute;
    width: 3%;
    top: 34.7%;
    left: 77%;
}

.nobelmanicon6 {
    position: absolute;
    width: 3%;
    top: 50.7%;
    left: 78%;
}

.skyhorse6 {
    position: absolute;
    width: 3%;
    top: 45.7%;
    left: 78%;
}

.peachB6 {
    position: absolute;
    width: 3%;
    top: 50.7%;
    left: 81.5%;
}

.intelligence6 {
    position: absolute;
    width: 3%;
    top: 45.7%;
    left: 81.5%;
}

.nobelmanicon7 {
    position: absolute;
    width: 3%;
    top: 61.2%;
    left: 77%;
}

.peachB7 {
    position: absolute;
    width: 3%;
    top: 60.5%;
    left: 77.3%;
}

.intelligence7 {
    position: absolute;
    width: 3%;
    top: 57.8%;
    left: 81%;
}

.skyhorse7 {
    position: absolute;
    width: 3%;
    top: 56.7%;
    left: 77.8%;
}

.nobelmanicon8 {
    position: absolute;
    width: 3%;
    top: 71.7%;
    left: 74%;
}

.skyhorse8 {
    position: absolute;
    width: 3%;
    top: 68.7%;
    left: 75%;
}

.peachB8 {
    position: absolute;
    width: 3%;
    top: 75.7%;
    left: 76.5%;
}

.intelligence8 {
    position: absolute;
    width: 3%;
    top: 70.7%;
    left: 78.5%;
}

.nobelmanicon9 {
    position: absolute;
    width: 3%;
    top: 80.7%;
    left: 68%;
}

.skyhorse9 {
    position: absolute;
    width: 3%;
    top: 76.7%;
    left: 71%;
}

.peachB9 {
    position: absolute;
    width: 3%;
    top: 84.7%;
    left: 71.5%;
}

.intelligence9 {
    position: absolute;
    width: 3%;
    top: 80.7%;
    left: 74.5%;
}

.nobelmanicon10 {
    position: absolute;
    width: 3%;
    top: 85.7%;
    left: 61%;
}

.skyhorse10 {
    position: absolute;
    width: 3%;
    top: 83.7%;
    left: 64%;
}

.peachB10 {
    position: absolute;
    width: 3%;
    top: 90.7%;
    left: 62.5%;
}

.intelligence10 {
    position: absolute;
    width: 3%;
    top: 88.7%;
    left: 66.5%;
}

.nobelmanicon11 {
    position: absolute;
    width: 3%;
    top: 89.7%;
    left: 54%;
}

.skyhorse11 {
    position: absolute;
    width: 3%;
    top: 94.7%;
    left: 55%;
}

.peachB11 {
    position: absolute;
    width: 3%;
    top: 87.7%;
    left: 57.5%;
}

.intelligence11 {
    position: absolute;
    width: 3%;
    top: 92.7%;
    left: 58.5%;
}

.nobelmanicon12 {
    position: absolute;
    width: 3%;
    top: 97.7%;
    left: 47%;
}

.skyhorse12 {
    position: absolute;
    width: 3%;
    top: 102.7%;
    left: 47%;
}

.peachB12 {
    position: absolute;
    width: 3%;
    top: 97.7%;
    left: 50.5%;
}

.intelligence12 {
    position: absolute;
    width: 3%;
    top: 102.7%;
    left: 50.5%;
}

.nobelmanicon13 {
    position: absolute;
    width: 3%;
    top: 88%;
    left: 39.5%;
}

.peachB13 {
    position: absolute;
    width: 3%;
    top: 89.2%;
    left: 42.5%;
}

.intelligence13 {
    position: absolute;
    width: 3%;
    top: 93.7%;
    left: 41.9%;
}

.skyhorse13 {
    position: absolute;
    width: 3%;
    top: 92.7%;
    left: 38.5%;
}

.nobelmanicon14 {
    position: absolute;
    width: 3%;
    top: 82.7%;
    left: 33%;
}

.skyhorse14 {
    position: absolute;
    width: 3%;
    top: 86.7%;
    left: 31.5%;
}

.peachB14 {
    position: absolute;
    width: 3%;
    top: 84.7%;
    left: 35.8%;
}

.intelligence14 {
    position: absolute;
    width: 3%;
    top: 88.7%;
    left: 34.5%;
}

.nobelmanicon15 {
    position: absolute;
    width: 3%;
    top: 76.7%;
    left: 26%;
}

.skyhorse15 {
    position: absolute;
    width: 3%;
    top: 80.7%;
    left: 23%;
}

.peachB15 {
    position: absolute;
    width: 3%;
    top: 79.7%;
    left: 28.5%;
}

.intelligence15 {
    position: absolute;
    width: 3%;
    top: 84.7%;
    left: 25.5%;
}

.nobelmanicon16 {
    position: absolute;
    width: 3%;
    top: 66.7%;
    left: 22%;
}

.skyhorse16 {
    position: absolute;
    width: 3%;
    top: 70.7%;
    left: 19%;
}

.peachB16 {
    position: absolute;
    width: 3%;
    top: 71.7%;
    left: 23.5%;
}

.intelligence16 {
    position: absolute;
    width: 3%;
    top: 74.7%;
    left: 20.5%;
}

.nobelmanicon17 {
    position: absolute;
    width: 3%;
    top: 56.7%;
    left: 19%;
}

.skyhorse17 {
    position: absolute;
    width: 3%;
    top: 58.7%;
    left: 15%;
}

.peachB17 {
    position: absolute;
    width: 3%;
    top: 61.7%;
    left: 19.5%;
}

.intelligence17 {
    position: absolute;
    width: 3%;
    top: 63.7%;
    left: 15.5%;
}

.nobelmanicon18 {
    position: absolute;
    width: 3%;
    top: 44.7%;
    left: 19.2%;
}

.skyhorse18 {
    position: absolute;
    width: 3%;
    top: 44.7%;
    left: 16%;
}

.peachB18 {
    position: absolute;
    width: 3%;
    top: 49.7%;
    left: 19.4%;
}

.intelligence18 {
    position: absolute;
    width: 3%;
    top: 49.7%;
    left: 15.9%;
}

.nobelmanicon19 {
    position: absolute;
    width: 3%;
    top: 34.7%;
    left: 20.5%;
}

.peachB19 {
    position: absolute;
    width: 3%;
    top: 39.1%;
    left: 19.8%;
}

.intelligence19 {
    position: absolute;
    width: 3%;
    top: 38.2%;
    left: 16.5%;
}

.skyhorse19 {
    position: absolute;
    width: 3%;
    top: 33.5%;
    left: 17.5%;
}

.nobelmanicon20 {
    position: absolute;
    width: 3%;
    top: 24.7%;
    left: 23%;
}

.skyhorse20 {
    position: absolute;
    width: 3%;
    top: 21.7%;
    left: 20%;
}

.peachB20 {
    position: absolute;
    width: 3%;
    top: 28.7%;
    left: 20.5%;
}

.intelligence20 {
    position: absolute;
    width: 3%;
    top: 25.7%;
    left: 17.5%;
}

.nobelmanicon21 {
    position: absolute;
    width: 3%;
    top: 15.7%;
    left: 28%;
}

.skyhorse21 {
    position: absolute;
    width: 3%;
    top: 11.7%;
    left: 26%;
}

.peachB21 {
    position: absolute;
    width: 3%;
    top: 19.7%;
    left: 25.5%;
}

.intelligence21 {
    position: absolute;
    width: 3%;
    top: 15.7%;
    left: 22.5%;
}

.nobelmanicon22 {
    position: absolute;
    width: 3%;
    top: 10%;
    left: 35%;
}

.skyhorse22 {
    position: absolute;
    width: 3%;
    top: 6.1%;
    left: 33.5%;
}

.peachB22 {
    position: absolute;
    width: 3%;
    top: 12.5%;
    left: 32.2%;
}

.intelligence22 {
    position: absolute;
    width: 3%;
    top: 8.7%;
    left: 30.5%;
}

.nobelmanicon23 {
    position: absolute;
    width: 3%;
    top: 6.1%;
    left: 42.5%;
}

.skyhorse23 {
    position: absolute;
    width: 3%;
    top: 1.7%;
    left: 41.5%;
}

.peachB23 {
    position: absolute;
    width: 3%;
    top: 7.7%;
    left: 39.5%;
}

.intelligence23 {
    position: absolute;
    width: 3%;
    top: 3.3%;
    left: 38.5%;
}

main {
    container-type: inline-size;
    container-name: main-container;
}

.PersonalChartDirectionTitle {
    font-weight: bold;
    font-size: 0.8rem;
}

    .PersonalChartDirectionTitle.Dir-E, .PersonalChartDirectionTitle.Dir-N {
        width: 70px;
    }

    .PersonalChartDirectionText {
        font-weight: normal;
        font-size: 0.7em;
    }

@container main-container (max-width: 1000px) {
    .PersonalChartDirectionTitle {
        font-size: 0.6rem;
    }
}

@media (max-width: 992px) {
    .PersonalChartDirectionTitle {
        font-size: 0.8rem;
    }
}

@media print {
    .viewDiv {
        margin-top: -0.5%;
    }
}