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

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

h4 {
    font-size: 1em;
    color: #555;
    margin-bottom: 15px;
}

form {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: auto;
}

result-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 300px;
    margin: auto;
}


label[class^="option"] {
    font-size: 1.2em;
    cursor: pointer; /* 将鼠标指针设置为手型，以表示可点击 */
    display: inline-block;
    margin-bottom: 1px;
}


label[for^="optionA"] {
    color: green; /* 绿色 */
}

label[for^="optionB"] {
    color: #9933cc; /* 紫色 */
}


label[id^="question"] {
    font-size: 20px;
    vertical-align: middle;
    font-weight: bold;
    color: black;
}

label:hover {
    text-decoration: none; /* 移除悬停时的下划线效果 */
    font-size: 24px;
    font-weight: bold;
}


input[type="radio"] {
    cursor: pointer; /* 将鼠标指针设置为手型，以表示可点击 */
    padding: 20px;
    vertical-align: middle;
    margin-right: 1px;
    /* display: none;*/ /* 隐藏原始的radio按钮 */
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;
    transition: transform 0.3s; /* 添加过渡效果 */
}

input:hover[type="radio"] {
    transform: scale(1.2); /* 放大 1.2 倍 */
}


label:not([for^="question"]) {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 5px;

}


#submit{
    width: 90%;
    background-color: #007BFF;
    color: #fff;
    padding: 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}


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


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

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: 14px;
}

th {
    background-color: #f2f2f2;
}

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


.option-container input[type="radio"] {
    /* 设置选项容器中的单选按钮默认缩放比例为 0.8 */
    transform: scale(1);
}

.option-container input[id^="optionA"][id$="_1"],
.option-container input[id^="optionB"][id$="_2"] {
    /* 设置以"optionA"开头且以"_1"结尾和以"optionB"开头且以"_2"结尾的单选按钮的缩放比例为 1.5，这是第一组和第五组共用样式 */
    transform: scale(2);
}

.option-container input[id^="optionA"][id$="_2"],
.option-container input[id^="optionB"][id$="_1"] {
    /* 设置以"optionA"开头且以"_2"结尾和以"optionB"开头且以"_1"结尾的单选按钮的缩放比例为 1，这是第二组和第三组共用样式 */
    transform: scale(1.5);
}


/* 复制按钮样式 */
.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: #4cae4c; /* 鼠标经过时颜色变深 */
}

/*.option-container:hover input[type="radio"] {*/
/*    !* 当选项容器被鼠标悬停时，其中的单选按钮缩放比例变为 1.2 *!*/
/*    transform: scale(2);*/
/*}*/

.top_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background-color: lightblue;
    padding: 10px;
    color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 24px;
    margin: 0 auto; /* 在大屏幕上水平居中 */
}
#jinzhan{
    font-size: 20px;
    margin-left: 5px;
    color:red;
    text-align: center;
}

.top_bar:hover {
    font-size: 36px;
    background-color: #0b96e5; /* 鼠标经过时的背景颜色 */
    color: white;
}
#Reporthtml { /* 定义一个名为 #Reporthtml 的选择器 */
    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; /* 元素的子元素在水平方向上居中对齐 */
}


/* 应用于移动设备的样式 */
@media only screen and (max-width: 600px) {
    form {
        width: 90%; /* 将表单宽度调整为屏幕宽度的80% */
        padding: 5px; /* 减少填充 */
        margin-top: 70px; /* 调整上边距 */
        margin-left: 2%;
        margin-right: 2%; /* 让表单在水平方向上居中 */
    }

    .top_bar {
        width: 78%;
        margin: 0; /* 移动端取消 margin */
        text-align: center; /* 水平居中 */
        left: 7%;
    }

    label {
        font-size: 22px;
        color: black;
    }

    input[id="submit"] {
        margin: 0px 0;
        width: 50%;
    }

    #Reporthtml {
        width: 80%; /* 小屏幕时调整宽度 */
        overflow-y: auto; /* 滚动条 */
        border: 1px solid #ccc; /* 边框样式 */
    }
}