body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; max-width: 80%; margin: 0 auto; padding: 20px; background-color: #f4f6f9; } .form-container { max-width: 800px; margin: 20px auto; padding: 20px; background: #ffffff; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #2c3e50; text-align: center; border-bottom: 3px solid #3498db; padding-bottom: 10px; margin-bottom: 20px; font-size: 24px; font-weight: bold; } h3 { color: #2980b9; margin-top: 25px; border-left: 4px solid #3498db; padding-left: 10px; } p { text-align: justify; margin-bottom: 15px; } list { display: block; margin-left: 30px; } list li { margin-bottom: 10px; position: relative; padding-left: 20px; } list li::before { content: '•'; color: #3498db; font-weight: bold; position: absolute; left: -20px; } .form-title { color: #2c3e50; text-align: center; margin-bottom: 30px; font-size: 24px; font-weight: bold; } .form-table { width: 100%; border-collapse: separate; border-spacing: 0 15px; } .form-table th { text-align: left; padding: 8px; color: #34495e; font-weight: 600; width: 30%; vertical-align: middle; } .form-table input[type="text"], .form-table input[type="date"] { width: 90%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.3s; } .form-table input[type="text"]:focus, .form-table input[type="date"]:focus { border-color: #3498db; outline: none; box-shadow: 0 0 5px rgba(52,152,219,0.3); } .form-table input[type="file"] { padding: 8px 0; } .submit-btn { background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .submit-btn:hover { background-color: #2980b9; } .file-input-wrapper { position: relative; } .file-input-label { display: inline-block; background-color: #f8f9fa; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; } .alert { background-color: #d4edda; color: #155724; padding: 15px; margin: 10px 0; border-radius: 4px; border: 1px solid #c3e6cb; animation: fadeOut 5s forwards; } @keyframes fadeOut { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } /* Responsive design */ @media (max-width: 768px) { .form-container { margin: 10px; padding: 15px; } .form-table th { width: 100%; display: block; } .form-table td { width: 100%; display: block; } body { padding: 10px; } h1 { font-size: 24px; } h3 { font-size: 20px; } }