.banner-image {
    width: 100%;
    height: auto;

    margin-bottom: 30px; /* مسافة بين البنر والعنوان */
}



/* @@@@@@@@@@@@@@@@@@@@@@ خاص بالتاريخ الميلادي الذي يظهر في أعلى الصفحة  */
.current-date {
	
    font-size: 22px; /* حجم الخط */
    color: #000000; /* لون النص */
     text-align: center; /* محاذاة النص */
    margin: 1px auto; /* هوامش خارجية (تحدد المسافة من العناصر المحيطة) */
    padding: 1px; /* هوامش داخلية (تحدد المسافة داخل العنصر) */
    background-color: #E7E0CC; /* لون خلفية اختياري */
    border-radius: 6px; /* زوايا مستديرة */

}
.current-date {
    float: left; /* يجعل العنصر يتموضع إلى اليسار */
}







        body {
            direction: rtl;
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 20px;
            margin: 0;
            padding: 20px;
            /*display: flex; /// @@@@@@@@@@@  تم تعطيل هذه الخاصية لأنها تمنع ظهور إعلانات قوقل */  
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #498F8F;
			
        }
		
		
		
		
		
		
		
		
		
	/*@@@@@@@@@@@@@ كود خيارات السنة والشهر @@@@@@@@@@@*/	     

        .label-blue {
            font-weight: bold;
            font-size: 1.5em;
            color: #000080;
        }
        
        select {
            font-size: 1.2em;
            padding: 10px 10px;
            border-radius: 50px;
            border: 10px solid #000000;
            background: #FFFFB9; /* خلفية أصفر  */
            color: #000000; /* لون النص أسود*/
            text-align: center;
            text-align-last: center; /* لضبط النص في المنتصف */

        }
        
        select option {
            background: #ffffff; /* خلفية بيضاء لخيار القائمة */
            color: #000000; /* لون النص للخيار */
        }



		
		
		
		
		
	
	
		
	.reset-button {
    font-size: 50px;
    padding: 20px 20px 20px 20px;
    margin : 40px;
    background-color: #00B900;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	
	    float: right; /* محاذاة الزر إلى اليسار */
    margin-right: 0; /* تأكد من عدم وجود هامش أيسر */
	
}

.reset-button:hover {
    background-color: #e60000;
	
	
	
	
}
	
		
		
		
		
		
		
		
		
		
        .container {
		background-color: #E7E7E7;   	/* صورة خلفية */
			background-image: url('pic/01.gif');  
            padding: 20px;
            border-radius: 30px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            width: 100%;
            text-align: right;
			margin: 20px auto; /* إضافة هوامش علوية وسفلية بقيمة 20 بكسل */
            padding: 30px;
			 
        }

	
		
		


        table {
			
            width: 100%;
            border-collapse: collapse;
            margin-top: 30px;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 15px;
            text-align: center;
            font-size: 30px; /* حجم خط الأيام والتواريخ */
            font-weight: bold;
        }
        th {
            background-color: #333;
            color: #fff;
        }
        td.day-cell {
            background-color: #4CAF50;
            color: white;
        }
        tr.current-day td {
            background-color: #00B900; /* لون مميز ليوم اليوم الحالي */
            color: white;
        }
        select {
            font-size: 30px;
            padding: 5px;
            margin: 10px;
            background-color: #e0e0e0; /* تظليل خلفية اختيارات السنة والشهر */
        }
		
		
		
        /* تصغير عرض خانة التاريخ الميلادي وتكبير الخط */
        td.gregorian-date {
            width: 250px;
            font-size: 35px;
			background-color: #E1E1E1; /* تظليل خلفية */
        }
		
		
		
        /* تكبير خط التاريخ الهجري */
        td.hijri-date {
            font-size: 35px;
			background-color: #FFD5AA; /* تظليل خلفية */
        }
		
		
		
		
        /* تكبير خط اسم اليوم */
        td.day-name {
            font-size: 45px;
			background-color: #326565; /* تظليل خلفية أسماء الأيام  */
			 color: white;
        }
		
		
		
		
		    /* المناسبات  */
        td.mnasbat{
			width: 200px;
            font-size: 40px;
			background-color: #CECEFF; /* تظليل خلفية */
        }