{} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #f5f5f5; color: #333; line-height: 1.4; } .container { max-width: 800px; margin: 20px auto; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 30px; } .header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #007bff; padding-bottom: 20px; } .header h1 { color: #007bff; font-size: 22px; margin-bottom: 10px; } .instructions { background: #e3f2fd; border-left: 4px solid #2196f3; padding: 15px; margin-bottom: 25px; border-radius: 5px; } .scale-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 15px 0; } .scale-item { background: white; padding: 8px; border-radius: 4px; text-align: center; font-size: 12px; font-weight: bold; border: 1px solid #ddd; } .section { margin: 25px 0; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; } .section-header { background: #007bff; color: white; padding: 12px 20px; font-weight: bold; font-size: 16px; } .question { padding: 15px 20px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; } .question:last-child { border-bottom: none; } .question-text { flex: 1; font-size: 14px; margin-right: 20px; } .options { display: flex; gap: 15px; } .option { text-align: center; } .option-label { display: block; font-size: 12px; font-weight: bold; margin-bottom: 5px; color: #666; } input[type="radio"] { display: none; } .circle { width: 30px; height: 30px; border: 2px solid #007bff; border-radius: 50%; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .circle:hover { border-color: #0056b3; transform: scale(1.1); } input[type="radio"]:checked + .circle { background: #007bff; border-color: #0056b3; } input[type="radio"]:checked + .circle::after { content: '✓'; color: white; font-size: 16px; font-weight: bold; } .submit-container { text-align: center; margin: 40px 0 20px 0; padding: 20px; background: #f8f9fa; border-radius: 8px; } .submit-btn { background: linear-gradient(135deg, #28a745, #20c997); color: white; border: none; padding: 15px 40px; font-size: 16px; font-weight: bold; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3); } .progress { background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 20px 0; text-align: center; position: sticky; top: 10px; z-index: 100; } .progress-bar { width: 100%; height: 12px; background: #e9ecef; border-radius: 6px; overflow: hidden; margin: 8px 0; } .progress-fill { height: 100%; background: linear-gradient(90deg, #28a745, #20c997); width: 0%; transition: width 0.5s ease; } @media (max-width: 768px) { .container { margin: 10px; padding: 20px; } .question { flex-direction: column; align-items: flex-start; } .question-text { margin-bottom: 15px; margin-right: 0; } .options { width: 100%; justify-content: space-around; } .circle { width: 35px; height: 35px; } .scale-info { grid-template-columns: 1fr; } }