/* Modified By	: Tak on 02 Apr 2025 */
/* https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input */
		body {
			background-color: #fefbd8;
			}

        .HeadingLabel {
            text-align: center;
            border: none; /* 3px solid green; */
            display: inline-block; /* block */
            width: 100%;
			white-space: pre-wrap; /* nowrap; */
			font-family: Arial, Helvetica, sans-serif;
			font-size: 24px;
			color: #00008b; 
			font-weight: 600; /* 400=normal, 700=bold */
            }
        .DescLabel {
            display: inline-block;
            width: 100%;
			white-space: pre-wrap; /* nowrap; */
			font-family: Arial, Helvetica, sans-serif;
            }
        .MessageLabel {
            display: inline-block;
            width: 100%;
			white-space: pre-wrap; /* nowrap; */
			font-family: Arial, Helvetica, sans-serif;
            }
        .FootlineLabel {
            display: inline-block;
            width: 100%;
			white-space: pre-wrap; /* nowrap; */
			font-family: Arial, Helvetica, sans-serif;
			/* position: fixed;
			bottom: 0; */
            }
        .LoginLabel {
            display: inline-block;
            width: 150px;
			font-family: Arial, Helvetica, sans-serif;
            }
        .LoginText {
            display: inline-block;
            width: 150px;
			font-family: Arial, Helvetica, sans-serif;
            }
         .LangBar {
            text-align: right;
            width: 100%;            
			white-space: nowrap;
			font-family: Arial, Helvetica, sans-serif;
            }
         .langbutton {
            border-radius: 12px;
			background-color: #808080; /* Ref: https://www.w3schools.com/colors/colors_shades.asp */
			width:60px;
			border: none;
			color: white;
			padding: 4px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 12px;
			margin: 4px 2px;
            }
            
         .button {
            border-radius: 12px;
			background-color: #04AA6D;
			width:80px;
			border: none;
			color: white;
			padding: 5px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
            }
         .button2 {
            border-radius: 12px;
			background-color: #04AA6D;
			width:200px;
			border: none;
			color: white;
			padding: 5px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
            }
         .gridbutton2 {
            border-radius: 12px;
			background-color: #04AA6D;
			width:30px;
			border: none;
			color: white;
			padding: 5px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
            }
            
         .textbox { /* Tak add for testing on 20 Feb 2025 */
			font-size: 14px; /* 调整 Textbox 内的文字大小 */
			padding: 5px;
			width: 100%; /* 让 Textbox 占据整个宽度 */
			box-sizing: border-box; /* 确保 padding 不会影响宽度 */
		}


		/* 优化 Textbox 内的文字大小 */
		input[type="text"], textarea {
			font-size: 14px; /* 调整 Textbox 内的文字大小 */
			padding: 5px;
			width: 100%; /* 让 Textbox 占据整个宽度 */
			box-sizing: border-box; /* 确保 padding 不会影响宽度 */
		}

/* Tak add using DeepSeek suggestion on 20 Feb 2025 */
/* 响应式设计 - 针对小屏幕设备（如手机） */
@media (max-width: 768px) {
    .HeadingLabel {
        font-size: 20px; /* 在小屏幕上减小标题字体大小 */
    }

    .button {
        width: 60px; /* 恢复原来的宽度 */
		font-size: 12px;
        margin: 2px; /* 减少间距 */
    }

    .button2 {
        width: 100%; /* 按钮在小屏幕上占据整个宽度 */
        margin: 2px; /* 减少间距 */
    }

    .gridbutton2 {
        width: 30px; /* 恢复原来的宽度 */
		font-size: 12px;
        margin: 2px; /* 减少间距 */
    }

    .langbutton {
        width: 50px; /* 减小语言按钮的宽度 */
        font-size: 10px; /* 减小语言按钮字体大小 */
        margin: 2px; /* 调整语言按钮间距 */
    }

    .LangBar {
        /* text-align: center; /* 在小屏幕上将语言按钮居中 */ */
    }

    .LoginLabel, .LoginText {
        width: 100%; /* 登录标签和输入框在小屏幕上占据整个宽度 */
        margin-bottom: 10px; /* 增加间距 */
    }

    .DescLabel, .MessageLabel, .FootlineLabel {
        font-size: 14px; /* 减小描述、消息和页脚文本的字体大小 */
    }

         .textbox { /* Tak add for testing on 20 Feb 2025 */
			font-size: 12px; /* 调整 Textbox 内的文字大小 */
			padding: 5px;
			width: 100%; /* 让 Textbox 占据整个宽度 */
			box-sizing: border-box; /* 确保 padding 不会影响宽度 */
		}
}

/* 响应式设计 - 针对超小屏幕设备（如小型手机） */
@media (max-width: 480px) {
    .HeadingLabel {
        font-size: 18px; /* 在超小屏幕上进一步减小标题字体大小 */
    }

    .button, .button2, .gridbutton2 {
        font-size: 14px; /* 保持字体大小不变 */
    }

    .langbutton {
        width: 40px; /* 进一步减小语言按钮的宽度 */
        font-size: 8px; /* 进一步减小语言按钮字体大小 */
    }

    .DescLabel, .MessageLabel, .FootlineLabel {
        font-size: 12px; /* 进一步减小描述、消息和页脚文本的字体大小 */
    }

         .textbox { /* Tak add for testing on 20 Feb 2025 */
			font-size: 10px; /* 调整 Textbox 内的文字大小 */
			padding: 5px;
			width: 100%; /* 让 Textbox 占据整个宽度 */
			box-sizing: border-box; /* 确保 padding 不会影响宽度 */
		}
}