/*<style>*/
body {
    font-family: 'Arial', sans-serif;
    text-align: center;
    background-color: #f4f4f4;
    margin: 20px;
    font-size: 18px; /* 设置基础字体大小 */
}

#hiddenForm{
    width: 100%;
}

form, #result-options_container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 99%; /* 设置最大宽度为屏幕宽度的99% */
    margin: 20px auto; /* 上下居中，左右自动边距 */
}


h3 {
    /* text-align:center; */
    text-align: left;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}


a {
    color: #0066cc;
    text-decoration: none;
    font-weight: bold;
}


.option {
    display: flex;
    align-items: center;
    margin-right: 5px;
    cursor: pointer;
}


/* 蓝色 - 用于突出重要元素 */
.blue-color {
    color: #3498db; /* 深蓝色 */
}

/* 绿色 - 用于突出辅助元素，提供颜色的层次结构 */
.green-color {
    color: #2ecc71; /* 绿色 */
}

/* 红色 - 用于强调或突出特定元素 */
.red-color {
    color: #e74c3c; /* 红色 */
}

/* 背景灰色 - 用于网页的背景色，通常是淡色调 */
.background-gray {
    background-color: #ecf0f1; /* 淡灰色 */
}

/* 深灰色文本 - 用于正文文本的颜色 */
.dark-gray-text {
    color: #333333; /* 深灰色 */
}

/* 蓝色链接 - 用于超链接文本的颜色 */
.blue-link {
    color: #2980b9; /* 蓝色 */
}

/* 悬停绿色 - 当用户悬停在链接或按钮上时的颜色变化 */
.hover-green:hover {
    color: #1abc9c; /* 绿松石色 */
}

/* 银边框 - 用于元素之间的分隔或突出显示 */
.silver-border {
    border-color: #bdc3c7; /* 银色 */
}

.Light-Blue {
    color: #336666; /* #404040*/
}

.orange {
    color: #996600;
}

.blue {
    color: blue;
}

.purple {
    color: purple;
}

.green {
    color: green;
}

.three-size {
    font-size: calc(70px);
}

.double-size {
    font-size: calc(50px);
}

.one-size {
    font-size: calc(30px);
}


input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    margin-right: 3px; /* Add some spacing between the radio button and the text */
}

/* 悬停时的样式 */
input[type="radio"]:hover:before {
    font-weight: bold;
    content: "●"; /* ▲▼●◆■★♥❤♠♦♣✔√??????×? 红心   选中后显示 符号*/
    font-size: 0.9em;
}

input[type="radio"]:before {
    content: "○"; /* △▽○◇□☆♡??????√? 选中前显示   红心 符号*/
    font-size: 1em;
}

input[type="radio"]:checked:before {
    content: "●"; /* ▲▼●◆■★♥❤♠♦♣✔√??????×? 红心   选中后显示 符号*/
    font-size: 0.70em;
}


.label_option {
    font-weight: bold;
    margin-right: 3px;
    display: flex;
    align-items: center;
    font-size: 0.8em;
    margin-top: 16px; /* 调整这个值以改变垂直方向的距离 */
    cursor: pointer; /*鼠标移动上面后显示手形鼠标*/
    transition: font-size 0.3s ease; /* 添加平滑过渡效果 */
}

/* 悬停时的样式 */
.label_option:hover {
    font-size: 17px; /* 设置悬停时的字体大小 */
}

.label_question {
    top: 100px;
    font-size: 20px;
    /*font-weight: bold;*/
    color: black; /* 996600 橙色  green 绿色*/
    margin-top: 20px;
    margin-bottom: 10px;
    padding-top: 20px; /* 增加上内边距 */
}

.label_question_awser {

    font-size: 22px;
    font-weight: bold;
    color: #666666; /* 666666 灰色 */
    margin-bottom: 10px;
    cursor: pointer; /*鼠标移动上面后显示手形鼠标*/
    /* 添加过渡效果，背景颜色的变化在 0.3 秒内平滑过渡 */
    transition: background-color 0.3s ease;

    padding-top: 10px; /* 增加上内边距 */
    padding-bottom: 10px; /* 增加下内边距 */
    padding-left: 30px; /* 增加左内边距 */
    padding-right: 30px; /* 增加右内边距 */
}

/* 悬停时的样式 */
.label_question_awser:hover {
    font-size: 25px; /* 设置悬停时的字体大小 */
    border: 5px dashed green; /* 添加边框，颜色可以根据需要进行调整  #996600*/
    background-color: darkseagreen;    /*答案悬停颜色  #b5dab5 */
}


label {
    font-size: 22px; /* 使用相对单位适应用户设置的字体大小 */
    color: #333;
    margin-bottom: 10px;
}


label[id^="question"][id$="_lbl"] {
    margin-top: 20px;
    padding-top: 20px;
    color:black;
}

/*question1_lbl_A*/
label[id^="question"][id$="_lbl_A"] {
    font-size: 22px;
    color: green;
}

label[id^="question"][id$="_lbl_B"] {
    font-size: 22px;
    color: purple;
}



.split4 {
    font-size: 14px;
    color: #333333; /* 设置字体颜色为深灰色 */
}


/* 提交按钮样式 */
.submit_button {
    background-color: #5cb85c; /* 设置按钮背景色为浅蓝色  #00ffcc*/
    color: #ffffff; /* 设置字体颜色为白色 */
    padding: 10px 15px; /* 设置内边距 */
    border: none;
    border-radius: 5px; /* 设置圆角 */
    cursor: pointer;
    font-size: 16px;
    display: block;
    margin: 0 auto;
    width: 98%;
    text-align: center; /* 文本居中 */
}

/* 按钮悬停效果 */
.submit_button:hover {
    background-color: darkgreen; /* 设置悬停时的背景色 */
}


#Reporthtml { /* 定义一个名为 #Reporthtml 的选择器 */
    width: 300px;
    position: fixed; /* 元素固定在页面上，不会随着滚动而移动 */
    top: 50%; /* 元素垂直居中 */
    left: 50%; /* 元素水平居中 */
    transform: translate(-50%, -50%); /* 元素相对于自身中心进行平移，使其在页面中心位置 */
    background-color: lightskyblue; /* 元素背景颜色为白色 */
    padding: 20px; /* 元素内边距为 20px */
    border-radius: 5px; /* 元素边框半径为 5px */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 元素添加阴影效果 */
    display: none; /* 元素初始时隐藏 */
    z-index: 999; /* 元素的堆叠顺序，确保其在其他元素上方显示 */
    opacity: 0.95; /* 元素的透明度，取值范围为 0（完全透明）到 1（完全不透明） */
    flex-direction: column; /* 元素的子元素排列方式为垂直排列 */
    align-items: center; /* 元素的子元素在垂直方向上居中对齐 */
    justify-content: center; /* 元素的子元素在水平方向上居中对齐 */
}

/* 复制按钮样式 */
.copyButton {
    background-color: #5cb85c; /* 绿色按钮 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s; /* 过渡效果 */
}

.copyButton:hover {
    background-color: #4cae4c; /* 鼠标经过时颜色变深 */
}

/* 复制按钮样式 */
#close-button {
    background-color: #5cb85c; /* 绿色按钮 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s; /* 过渡效果 */
    margin-left: 10px; /* 增加左边距 */
}

#close-button:hover {
    background-color: darkgreen; /* 鼠标经过时颜色变深 */
}

.top_bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 32px;
    width: 100%;
    background-color: white;
    padding: 10px;
    color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 24px;
    background-color: #5cb85c;
}

.options_container {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;

    margin-top: -20px; /* 如果需要垂直居中，可以调整这个值 * */
    margin-bottom: -30px; /* 如果需要垂直居中，可以调整这个值 * */
    padding-top: -20px; /* 如果需要垂直居中，可以调整这个值 * */
    padding-bottom: -30px; /* 如果需要垂直居中，可以调整这个值 * */

}



.linear {
    margin-top: -10px; /* 如果需要垂直居中，可以调整这个值 * */
    /*background: linear-gradient(to right, #b5dab5, white, #b5dab5);         !*绿白绿*!*/
    background: linear-gradient(to right, white, #b5dab5, white); /*白绿白*/
    /*background: linear-gradient(to right, white, #bbbbbb, white);           !*白灰白*!*/
    /*background: linear-gradient(to right, #bbbbbb, white, #bbbbbb);         !*灰白灰*!*/

}

/*倾向A*/
.qinxiangA {
    font-size: 20px;
    margin-top: 20px;
    color:green;
    /*background-color: green;*/
    margin-right: 120px;
}
/*倾向B*/
.qinxiangB {
    font-size: 20px;
    margin-top: 20px;
    left:20px;
    color:purple;
    /*background-color: yellow;*/
}



.progress-bar {
    width: 95%;
    height: 4px;
    background-color: grey;
    border-radius: 4px;
}
.progress1 {
    height: 3px;
    width: 100%;
    background-color: darkgreen;    /*darkgreen*/
    border-radius: 5px;
    margin-top: 9px;
}


@media only screen and (max-width: 600px) {
    label {
        font-size: 28px;
    }


}

/*</style>*/