body {
            font-family: Arial, sans-serif;
            direction: rtl;
            text-align: center;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 480px; /* لضبط عرض الحاسبة */
            width: 90%; /* لضمان أن الحاسبة ستتوافق مع أحجام الشاشات الصغيرة */
            margin: 20px auto;
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: right;
        }
        input[type="number"], input[type="date"], select {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 20px;
            padding: 20px;
            background-color: #e9f7ef;
            border: 1px solid #4CAF50;
            border-radius: 8px;
        }
        .result ul {
            list-style-type: none;
            padding: 0;
        }
        .result ul li {
            margin-bottom: 10px;
            font-size: 18px;
            color: #333;
        }
        .result ul li span {
            font-weight: bold;
            color: #4CAF50;
        }
        @media screen and (max-width: 480px) {
            .container {
                width: 95%;
                margin: auto;
                padding: 10px;
            }
            input[type="number"], input[type="date"], select, button {
                font-size: 16px;
                padding: 8px;
            }
        }

        .button-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

      .video-container {
			position: relative;
			width: 100%;
			height: 200px;
			overflow: hidden;
			border-radius: 6px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}

		video {
			width: 100%;
			height: 100%;
			object-fit: cover;  /* يحافظ على نسبة العرض إلى الارتفاع وملء الإطار بدون تشويه */
		}
			/* لشاشات الهواتف مثل الأندرويد والآيفون */
			@media screen and (max-width: 767px) {
				.video-container {
					height: 180px;  /* المقاس المناسب لشاشات الهواتف */
				}
			}

			/* لشاشات أكبر مثل الآيباد أو الأجهزة اللوحية */
			@media screen and (min-width: 768px) and (max-width: 1024px) {
				.video-container {
					height: 200px;  /* المقاس المتوسط للأجهزة اللوحية */
				}
			}

			/* لشاشات الأيفون بروماكس أو الهواتف ذات الشاشة الكبيرة */
			@media screen and (min-width: 414px) and (max-width: 736px) {
				.video-container {
					height: 190px;  /* المقاس المناسب للأيفون بروماكس */
				}
			}

        .footer {
            text-align: center;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border-radius: 8px;
            margin-top: 20px;
        }
        .footer a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }

        /* إخفاء الحقول بشكل افتراضي */
        #avgSalaryField, #optionalFields {
            display: none;
        }

        /* Popup */
        .popup {
            display: none;
            position: fixed;
            z-index: 9999;
            background-color: rgba(0, 0, 0, 0.5);
            top: 0;
            left: 0;
            width: 100%;
            height: 90%;
            justify-content: center;
            align-items: center;
        }
        .popup-content {
            background-color: white;
            padding: 10px;
            border-radius: 8px;
            max-width: 400px;
            width: 90%; /* لضبط العرض بحيث يتوافق مع الشاشات الأصغر */
            max-height: 80%; /* لتجنب تجاوز النافذة المنبثقة طول الشاشة */
            overflow-y: auto; /* لإضافة شريط تمرير إذا كان المحتوى أطول من النافذة */
            text-align: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .popup-content button {
            margin-top: 10px;
            padding: 10px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* تصميم للعلامة "؟" */
        .help-icon {
            cursor: pointer;
            display: inline-block;
            margin-left: 5px;
            color: #4CAF50;
            font-size: 14px;  /* حجم خط العلامة */
            font-weight: bold;
            padding: 3px;
            border-radius: 50%;
            border: 1px solid #4CAF50;
            width: 12px;  /* عرض الدائرة */
            height: 12px; /* ارتفاع الدائرة */
            line-height: 14px;  /* لضبط العلامة في منتصف الدائرة عمودياً */
            text-align: center;  /* لضبط العلامة في منتصف الدائرة أفقياً */
        }
        .help-icon:hover {
            background-color: #4CAF50;
            color: white;
        }
        /* إضافة نمط لأخطاء الحقول */
        .error-message {
            color: red;
            font-size: 12px;
            margin-top: -10px;
            margin-bottom: 10px;
        }
		
		/* تنسيق رسالة النسخة */
		.version-info {
			color: red; /* اللون الأحمر للرسالة */
			font-size: 10px; /* حجم النص الصغير */
			text-align: left; /* محاذاة النص لليسار */
			margin-top: 5px; /* مسافة بسيطة فوق النص */
			margin-left: 0; /* محاذاة إلى اليسار تمامًا */
		}
		.whatsapp-icon {
			position: fixed;
			bottom: 20px; /* المسافة من الأسفل */
			right: 20px; /* المسافة من الجهة اليمنى */
			z-index: 1000; /* لضمان أن تكون الأيقونة فوق جميع العناصر */
			width: 50px; /* عرض الأيقونة */
			height: 50px; /* ارتفاع الأيقونة */
			cursor: pointer;
		}

		.whatsapp-icon img {
			width: 100%;
			height: 100%;
			object-fit: contain; /* للتأكد من عدم تشويه الأيقونة */
			border-radius: 50%; /* إذا كنت تريد جعل الأيقونة دائرية */
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* إضافة ظل خفيف */
		}