<style>
* {
  direction: rtl;
  box-sizing: border-box;
}

input, select, textarea {
  text-align: right;
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 10px; /* لضبط المسافة بين الحقول */
}

label {
  text-align: right;
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-size: 14px;
  color: #2c3e50; /* جعل النص بلون متناسق */
}

input[type=submit] {
  background-color: #2c3e50; /* اللون الأزرق الداكن متناسق مع اللوجو */
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  font-size: 16px;
}

input[type=submit]:hover {
  background-color: #34495e; /* لون داكن عند التمرير */
}

.container {
  border-radius: 8px;
  background-color: #ffffff; /* خلفية بيضاء لتمييز العناصر */
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* إضافة ظل خفيف حول الصندوق */
}

.col-25 {
  float: right;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  direction: rtl;
}

th, td {
  text-align: left;
  padding: 8px;
  font-size: 14px;
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* خلفية فاتحة للأسطر الزوجية */
}

.btn {
  background-color: #2196F3; /* زر أزرق فاتح */
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
  cursor: pointer;
}

.btn:hover {
  background-color: #0b7dda; /* عند التمرير على الزر */
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* إضافة ظل حول القوائم المنسدلة */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd; /* تأثير عند التمرير على العناصر في القائمة */
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* استجابة للأجهزة الصغيرة */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }

  .container {
    padding: 15px; /* تقليل الحواف في الشاشات الصغيرة */
  }

  .btn {
    width: 100%; /* جعل الأزرار تأخذ العرض الكامل على الشاشات الصغيرة */
  }
}
</style>
