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

    .progress-bar {
        width: 95%;
        height: 4px;
        background-color: grey;
        border-radius: 4px;
    }


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


    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;
    }


    .opt1 {
        font-size: 70px;
        color: green;

        display: flex;
        align-items: center;
        margin-right: 1px;
        padding-right: 1px;
        cursor: pointer;
    }

    .opt2 {
        font-size: 50px;
        color: green;

        display: flex;
        align-items: center;
        margin-right: 1px;
        padding-right: 1px;
        cursor: pointer;
    }

    .opt3 {
        font-size: 30px;
        color: black;

        display: flex;
        align-items: center;
        margin-right: 1px;
        padding-right: 1px;
        cursor: pointer;
    }

    .opt4 {
        font-size: 50px;
        color: purple;

        display: flex;
        align-items: center;
        margin-right: 1px;
        padding-right: 1px;
        cursor: pointer;
    }

    .opt5 {
        font-size: 70px;
        color: purple;

        display: flex;
        align-items: center;
        margin-right: 1px;
        padding-right: 1px;
        cursor: pointer;
    }


    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: #33a474; /* 设置按钮背景色为浅蓝色  #00ffcc      5cb85c */
        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: #33a474;
        z-index: 999; /* 元素的堆叠顺序，确保其在其他元素上方显示 */
    }

    .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);         !*灰白灰*!*/

        /*background: linear-gradient(to right, white, #864986, white); !*白紫白*!*/
        background: linear-gradient(to right, #b892b8, white, #b892b8); /*紫白紫*/
        filter: grayscale(70%);
    }

    /*倾向A*/
    .qinxiangA {
        font-size: 20px;
        margin-top: 20px;
        color: green;
        /*background-color: green;*/
        margin-right: 8px;
    }

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


    .progress-bar {
        width: 99%;
        height: 4px;
        background-color: grey;
        border-radius: 4px;
    }

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

}