/* Modified By	: Tak on 08 Jun 2022 */
/* Modified By	: Tak on 20 Feb 2025 - add Media Queries using DeepSeek suggestion */
/* to validate the css, use below link */
/* https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input */
		body {
			background-image: url("~/images/1114-Background.png");
			background-color: #ffffff; /* #fefbd8; light-yellow */
			}

        .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: 220px; */
            width: 100%;
            height: 24px;
            box-sizing: border-box;
			font-family: Arial, Helvetica, sans-serif;
            }
         .LangBar {
            text-align: right;
            width: 100%;            
			white-space: nowrap;
			font-family: Arial, Helvetica, sans-serif;
            }
         .LangBarWelcome {
            text-align: center;
            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:250px;
			border: none;
			color: white;
			padding: 5px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
            }
         .gridbutton3 {
            border-radius: 12px;
			background-color: #04AA6D;
			width:60px;
			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;
            }
         .gridbutton {
            border-radius: 12px;
			background-color: #04AA6D;
			width:100px;
			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 不会影响宽度 */
		}

		.flex-container {
		  display: flex;
		}

		/* 优化 Textbox 内的文字大小 */
		input[type="text"], textarea {
			font-size: 14px; /* 调整 Textbox 内的文字大小 */
			padding: 5px;
			width: 100%; /* 让 Textbox 占据整个宽度 */
			box-sizing: border-box; /* 确保 padding 不会影响宽度 */
		}
		
		/* Tak add on 23 Jun 2025 */
		.first-word-uppercase-p::first-letter {
		  font-size: 36px;
		  color: #000000; /* #e80222; =red */
		  font-weight: bold;
		  line-height: .75;
		}


		/* Tak add Navigate css on 16 Sep 2025 */
        .divNav {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 2px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
        }
        
        .NavButton {
            background-color: #4a72b5;
            color: white;
            border: 1px solid #3a5a8c;
            padding: 4px 8px;
            margin: 0 2px;
            cursor: pointer;
            border-radius: 3px;
			font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            transition: all 0.2s ease;
        }
        
        .NavButton:hover {
            background-color: #3a5a8c;
        }
        
		.NavButton:active {
		    background-color: #3e8e41; /* Even darker green on click */
			transform: translateY(1px); /* Slight press effect */
		}
        
        .NavLabel {
			font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
            margin: 0 5px;
            color: #555;
            display: inline-block;
        }
        
        .NavText {
            border: 1px solid #ccc;
            padding: 3px 5px;
            border-radius: 3px;
			font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
            margin: 0 3px;
            display: inline-block;
            box-sizing: border-box;
        }
        
        .NavText:focus {
            border-color: #4a72b5;
            outline: none;
            box-shadow: 0 0 3px rgba(74, 114, 181, 0.5);
        }
        
        .NavErrLabel {
            color: #d9534f;
            margin-left: 15px;
            font-weight: bold;
        }

/* 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%; */ /* 按钮在小屏幕上占据整个宽度 */
        width: 200px; /* 按钮在小屏幕上占据整个宽度 */
		font-size: 12px;
        margin: 2px; /* 减少间距 */
    }

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

    .gridbutton {
        width: 100px; /* 恢复原来的宽度 */
		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 不会影响宽度 */
	}

	/* Tak add on 17 Sep 2025 */
    .divNav {
        padding: 8px;
        text-align: center;
    }
    
    .NavButton {
        padding: 6px 10px;
        margin: 4px 2px;
        font-size: 14px;
    }
    
    .NavLabel {
        display: block;
        margin: 8px 0;
        font-size: 14px;
    }
    
    .NavText {
        width: 50px;
        margin: 5px 0;
        padding: 5px;
        font-size: 14px;
    }
    
    .NavErrLabel {
        display: block;
        margin: 10px 0 0 0;
        text-align: center;
    }
    
    /* 调整特定元素布局 */
    #lblNavPageDesc, #lblNavOfPage, #lblNavTtlPage {
        display: inline-block !important;
        margin: 0 5px !important;
    }

}

/* 响应式设计 - 针对超小屏幕设备（如小型手机） */
@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 不会影响宽度 */
	}

	/* Tak add on 17 Sep 2025 */
    .divNav {
        padding: 10px 5px;
    }
    
    .NavButton {
        padding: 8px 12px;
        margin: 5px 3px;
        font-size: 16px;
        width: 40px;
    }
    
    .NavLabel {
        font-size: 14px;
        margin: 10px 0;
    }
    
    .NavText {
        width: 60px;
        padding: 8px;
        font-size: 16px;
        margin: 8px 0;
    }
    
    .NavErrLabel {
        font-size: 14px;
        margin: 15px 0 5px 0;
    }
    
    /* 调整按钮布局 */
    .divNav input[type="button"] {
        margin-bottom: 10px;
    }	
	
}