html {
    font-size: 12px;
}

@media (min-width: 576px) {
    html {
        font-size: 16px;
    }
}

.chart-data-page {
    height: 100vh;
}

.chart-image {
    max-width: calc(100vw - 2rem);
}
@media (min-width: 576px) {
    .chart-image {
        width: 58%;
        max-height: calc(100vh - 2rem);
    }
}

.chart-info {
    margin-right: auto !important;
    margin-left: auto !important;
    word-wrap: break-word;
    font-size: 1.2rem;
}
@media (min-width: 576px) {
    .chart-info {
        margin-right: auto !important;
        margin-left: auto !important;
        width: 21%;
        word-wrap: break-word;
    }
}

/* 命盤 */
.board-male {
    position: relative;
    background-color: #fff;
    margin: auto;
    border: 20px solid #fbdec0;
    width: 850px;
}
.board-female {
    position: relative;
    background-color: #fff;
    margin: auto;
    border: 20px solid #ffcdcf;
    width: 850px;
}
.table-trad-horoscope,
.table-trad-horoscope td {
    border: solid 3px #424242;
}
@media (min-width: 576px) {
    .table-trad-horoscope,
    .table-trad-horoscope td {
        border: solid 3px #424242;
    }
}

.table-trad-horoscope td {
    height: 170px;
    padding: 0;
}
.trad-block-star {
    writing-mode: vertical-rl;
    margin-right: 0;
    margin-left: auto;
}
.trad-block-star p {
    width: 24px;
    margin: 0;
}
@media (min-width: 576px) {
    .trad-block-star p {
        width: 1.75rem;
    }
}

.block-td {
    width: 186.75px;
    min-width: 60px;
    position: relative;
}
@media (min-width: 576px) {
    .block-td {
        width: 174px;
    }
}
.block-td .row {
    margin-right: 0;
    margin-left: 0;
}

.block-td .col-2, .block-td .col-8 {
    padding-right: 0;
    padding-left: 0;
    align-self: flex-end;
}

/* 運 */
.tag-red {
    font-size: 10px;
    line-height: 1;
    text-align: center;
    color: #f00;
    width: 12px;
    height: 12px;
    border: solid 1px #f00;
    margin-bottom: 2px;
    margin-right: 8px;
}
@media (min-width: 576px) {
    .tag-red {
        font-size: 1.7rem; /*1.65*/
        width: 1.65rem;
        height: 1.65rem;
        margin-right: 8px;
    }
}

.out-energy-block-top {
    top: -35px;
    right: 4%;
    display: flex!important;
    flex-direction: row-reverse!important;
}
    .out-energy-block-top span {
        width: 1.75rem;
        margin: 0;
    }

.out-energy-block-left {
    top: 0%;
    left: -36px;
    display: flex !important;
    writing-mode: vertical-lr;
}
    .out-energy-block-left span {
        height: 24px;
        margin: 0;
    }

.out-energy-block-right {
    top: 0%;
    right: -36px;
    display: flex !important;
    writing-mode: vertical-lr;
}
    .out-energy-block-right span {
        height: 24px;
        margin: 0;
    }

.out-energy-block-bottom {
    bottom: -35px;
    right: 4%;
    display: flex !important;
    flex-direction: row-reverse !important;
}
    .out-energy-block-bottom span {
        width: 1.75rem;
        margin: 0;
    }

/* 四化 */
.pos-tag-top {
    top: -32px;
    right: 4%;
    text-align: end;
}

.pos-tag-left {
    top: 43%;
    left: -26px;
}

.pos-tag-right {
    top: 43%;
    right: -26px;
}

.pos-tag-bottom {
    bottom: -50px;
    left: 43%;
}

/* 側邊文字 */
.vertical-description {
    position: absolute;
    right: -21px;
    top: 10%;
    writing-mode: vertical-lr;
    font-size: 14px;
}
@media (min-width: 576px) {
    .vertical-description {
        right: -25px;
        font-size: 22px;
    }
}

/* 基本資料 */
.profile-container {
    position: absolute;
    background-color: #fff;
    margin: auto;
    text-align: center;
}
.profile-container span {
    font-size: 19px;
    display: block;
}


/* 斜線 */
.diagonal {
    width: 100%;
    height: 100%;
    position: absolute;
    color: #1e8f8f;
    font-size: 1.7rem; /*1.65*/
}
.diagonal-text {
    display: inline-block;
}
.diagonal-si-to-hai {
    background: linear-gradient(42deg, transparent calc(50% - 1px), #1616ff 50%, transparent calc(50% + 1px));
}
.diagonal-zi-to-wu {
    background: linear-gradient(61deg, transparent calc(50% - 1px), #1616ff 50%, transparent calc(50% + 1px));
}
.diagonal-chou-to-wei {
    background: linear-gradient(119deg, transparent calc(50% - 1px), #1616ff 50%, transparent calc(50% + 1px));
}
.diagonal-yin-to-shen {
    background: linear-gradient(138deg, transparent calc(50% - 1px), #1616ff 50%, transparent calc(50% + 1px));
}
.diagonal-chen-to-xu {
    background: linear-gradient(25deg, transparent calc(50% - 1px), #1616ff 50%, transparent calc(50% + 1px));
}
.diagonal-mao-to-you {
    background: linear-gradient(335deg, transparent calc(50% - 1px), #1616ff 50%, transparent calc(50% + 1px));
}

/* 斜線文字 */
.diagonal-text-block-si {
    transform: rotate(42deg) translate(46px, 113px);
}
.diagonal-text-block-si .diagonal-text {
    transform: rotate(-42deg);
}

.diagonal-text-block-hai {
    transform: rotate(222deg) translate(-130px, -82px);
}

    .diagonal-text-block-hai .diagonal-text {
        transform: rotate(-222deg);
    }

.diagonal-text-block-zi {
    transform: rotate(0deg) translate(238px, 308px);
    position: absolute;
    width: 88px;
    top: -4px;
    display: flex;
    justify-content: center;
}

    .diagonal-text-block-zi .diagonal-text {
        transform: rotate(0deg);
    }

.diagonal-text-block-wu {
    transform: rotate(0deg) translate(50px, -4px);
    position: absolute;
    width: 88px;
    top: 0;
    display: flex;
    justify-content: center;
}
.diagonal-text-block-wu .diagonal-text {
    transform: rotate(0deg);
}

.diagonal-text-block-chou {
    transform: rotate(0deg) translate(50px, 308px);
    position: absolute;
    width: 88px;
    top: -4px;
    display: flex;
    justify-content: center;
}

    .diagonal-text-block-chou .diagonal-text {
        transform: rotate(0deg);
    }

.diagonal-text-block-wei {
    transform: rotate(0deg) translate(238px, -4px);
    position: absolute;
    width: 88px;
    top: 0;
    display: flex;
    justify-content: center;
}
    .diagonal-text-block-wei .diagonal-text {
        transform: rotate(0deg);
    }

.diagonal-text-block-yin {
    transform: rotate(318deg) translate(-156px, 112px);
}

    .diagonal-text-block-yin .diagonal-text {
        transform: rotate(-318deg);
    }

.diagonal-text-block-shen {
    transform: rotate(138deg) translate(20px, -84px);
}
.diagonal-text-block-shen .diagonal-text {
    transform: rotate(-138deg);
}

.diagonal-text-block-chen {
    transform: rotate(0deg) translate(4px, 30px);
    position: absolute;
    height: 96px;
    top: 0;
    display: flex;
    justify-content: center;
    flex-flow: column;
}
    .diagonal-text-block-chen .diagonal-text {
        transform: rotate(0deg);
        height: 1.65rem;
    }

.diagonal-text-block-xu {
    transform: rotate(0deg) translate(352px, 200px);
    position: absolute;
    height: 96px;
    top: 0;
    display: flex;
    justify-content: center;
    flex-flow: column;
}

    .diagonal-text-block-xu .diagonal-text {
        transform: rotate(0deg);
        height: 1.65rem;
    }

.diagonal-text-block-mao {
    transform: rotate(0deg) translate(4px, 200px);
    position: absolute;
    height: 96px;
    top: 0;
    display: flex;
    justify-content: center;
    flex-flow: column;
}

    .diagonal-text-block-mao .diagonal-text {
        transform: rotate(0deg);
        height: 1.65rem;
    }

.diagonal-text-block-you {
    transform: rotate(0deg) translate(352px, 30px);
    position: absolute;
    height: 96px;
    top: 0;
    display: flex;
    justify-content: center;
    flex-flow: column;
}
    .diagonal-text-block-you .diagonal-text {
        transform: rotate(0deg);
        height: 1.65rem;
    }