/* yidaofengshui-style.css */
.content {
    display: flex;
    justify-content: center;
    /* align-items: flex-start; 改为 flex-start 以防止所有元素在垂直方向居中 */
    height: 100vh; /* 或者你需要的具体高度 */
    width: 60%; /* 60% 的宽度 */
    background-color: #f0f0f0;
    margin: 0 auto; /* 使其在水平居中 */
    padding: 20px 0; /* 可以为上下添加间距 */
}

/* .hexagram-container {
    position: relative;
    left: 20%;
    width: 100%;
    max-width: 400px;
    height: auto;
    min-height: 700px;
    border-radius: 50%;
    justify-content: center;
    /* margin: 0 auto; */
    /* display: flex; */
/* }  */


.wrapper {
    display: flex;
    flex-direction: column; /* 垂直布局 */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    height: 100vh; /* 占据整个视口的高度 */
}



.hexagram-container {
    position: relative;
    /* left: 20%; */
    /* width: 100vw; */
    max-width: 400vw;
    width: 100%;
    /* height: 100vh; */
    min-height: 700vh;
    border-radius: 50%;
    justify-content: center;
    /* margin: 0 auto; */
    display: flex;
}



.center-text {
    position: relative;
    width: 100%;
    margin: 0 auto;
    transform: translate(15%, 2.5%);
    font-weight: bold;
    color: #333;
    font-size: 1rem; /* 默认字体大小 */
}



label {
    font-size: 14px;
    white-space: nowrap;
}

#guaForm {
    position: relative;
    width: 100%;
    height: 100%;
}


@media (orientation: portrait) and (max-width: 1200px) {
    .center-text {
        transform: translate(77%, 3%); /* 针对手机竖屏的调整 */
        font-size: 1rem;
    }
}

/* 针对Edge浏览器 */
@supports (-ms-ime-align: auto) {
    .center-text {
        transform: translate(30%, 5%);
    }
}




/* 针对平板设备（横屏和竖屏） */
/* @media (min-width: 769px) and (max-width: 1200px) {
    .center-text {
        transform: translate(33%, 2.5%); /* 针对平板调整 translate */
        /* font-size: 1rem; 调整字体大小 */
    /* } */
/* } */ 

/* 针对7寸手机的竖屏模式 */


.hexagram {
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.hex8Gua {
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    transform: translate(-50%, -50%);
}


.hex8Gua-container {
    position: relative;
    width: 150px;
    height: 150px;
    transform: translate(-8%, 100%);
}

.name {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-align: center;
    transform: rotate(0deg);
}

.hexagram.onegroup {
    color: rgb(3, 111, 102);
    font-weight: bold;
}

.hexagram.highlightselected {
    color: blue !important;
    font-weight: bold;
}

.hexagram.highlightGuaFan {
    color: red !important;
    font-weight: bold;
}

.hexagram.highlightYaoFan {
    color: red !important;
    font-weight: bold;
}

.hexagram.highlightYiGuaChunQing {
    color: rgb(4, 174, 4)  !important;
    font-weight: bold;
}

.hexagram.highlightHeShengCheng {
    color: rgb(4, 174, 4)  !important;
    font-weight: bold;
}

.hexagram.highlightHeShi {
    color: rgb(4, 174, 4) !important;
    font-weight: bold;
}

.hexagram.highlightSanYuanBuBai {
    color: rgb(4, 174, 4)  !important;
    font-weight: bold;
}

.hexagram.highlightHeWuHeShiWu {
    color: rgb(4, 174, 4) !important;
    font-weight: bold;
}

.hexagram.highlightTianXinZhengYun {
    color: #094d12 !important;
    font-weight: bold;
}

.hidden {
    display: none;
}

.chugua {
    color: #a195bde8 !important;
    font-weight: bold;
}

.highlightChugua {
    color: orange; /* 或者其他你想用的高亮颜色 */
    font-weight: bold;
}


#SanYuanBuBaiRadioContainer {
    display: block; /* 整个容器是块级 */
    width: 100%; /* 让其占据整个容器 */
}

.title-line {
    display: block;
    margin-bottom: 10px; /* 确保文字和radio之间有间距 */
}

.radio-line {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: flex-start; /* 按钮从左到右排列 */
    gap: 10px; /* 控制每个按钮之间的间距 */
}

.radio-wrapper {
    display: flex;
    align-items: center;
    flex-basis: 25%; /* 每个按钮占据一行的25% */
    max-width: 40px; /* 限制最大宽度，避免按钮过宽 */
    white-space: nowrap; /* 确保label和radio保持在一起 */
}