:root {
    --dark-color: #19283f;
    --green-color: #33d1cc;
    --red-color: #ff3150;
    --yellow-color: #ffc400;
    --section-color: #eff7fa;
  }
  body {
    font-family: "Roboto", sans-serif;
  }
  .main-btn {
    background-color: var(--red-color);
    color: var(--yellow-color);
    padding: 0.5rem 1rem;
  }
  .main-btn:hover {
    color: var(--yellow-color);
  }
  .main-title::after {
    content: "";
    width: 120px;
    height: 2px;
    background-color: var(--green-color);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
  }
  /* Start Navbar */
  .navbar {
    background-color: var(--dark-color);
  }
  .navbar-brand{
    color: white;
  }
  .navbar-brand.active,
  .navbar-brand:focus,
  .navbar-brand:hover {
    color: var(--green-color);
  }
  .navbar .navbar-nav .nav-link {
    color: white;
  }
  .navbar .navbar-nav .nav-link.active,
  .navbar .navbar-nav .nav-link:focus,
  .navbar .navbar-nav .nav-link:hover {
    color: var(--green-color);
  }
  .navbar .search {
    border-left: 1px solid var(--green-color);
  }
  .navbar .search svg {
    color: var(--green-color);
  }
  .navbar .navbar-toggler {
    color: white;
    font-size: 25px;
    border-color: white;
  }
  .navbar .navbar-toggler:focus {
    box-shadow: none;
  }
  .navbar .navbar-toggler[aria-expanded="true"] {
    border-color: var(--green-color);
  }
  /* End Navbar */

  /* تنسيقات عامة للنماذج */
.card {
  border-radius: 1rem;
}

.card-header {
  border-radius: 1rem 1rem 0 0 !important;
}

.form-control-lg {
  border: 2px solid #dee2e6;
  transition: all 0.3s ease;
}

.form-control-lg:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.input-group-text {
  background: #f8f9fa;
  border-left: none;
}

.btn-lg {
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.progress {
  background: #e9ecef;
}


.custom-thead {
  background-color:var(--dark-color); /* أي لون تحبه */
  color: #fff; /* لون النص */
}

.custom-header {
  background-color:var(--dark-color) !important; /* خلفية بيضاء */
  color: #fff !important; /* لون النص أزرق داكن */
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #ddd;
}


/* login */
/* تنسيقات بطاقة تسجيل الدخول */
.login-card {
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* تلوين الهيدر */
.custom-primary {
  background-color: var(--dark-color) !important; 
  border-color: var(--green-color) !important;
}

/* تحسين الحقول */
.form-control-lg {
  border: 2px solid #dee2e6;
  transition: all 0.3s ease;
  border-radius: 8px;
}

/* إزالة اللون الأزرق عند التفاعل */
.form-control-lg:focus {
  border-color: var(--green-color) !important;
  box-shadow: 0 0 5px rgba(51, 209, 204, 0.5) !important;
  outline: none !important;
}

/* تحسين زر الدخول */
.btn-primary {
  background-color: var(--dark-color) !important;
  border: none;
  color: var(--yellow-color);
  font-size: 1.1rem;
  padding: 12px;
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
}

.btn-primary:hover {
  background-color: var(--green-color) !important;
  color: white;
}
/* login */

/* تحسين مظهر الـ select2 ليشبه الـ input */
.select2-container .select2-selection--single {
  height: 50px; /* ارتفاع الـ select مشابه لحقل الإدخال */
  padding: 5px 10px; /* إضافة حواف داخلية */
  border-radius: 5px; /* زوايا مدورة */
  font-size: 16px; /* حجم الخط */
  border: 1px solid #ced4da; /* إضافة حدود مشابهة لحقل الإدخال */
  background-color: #ffffff; /* خلفية بيضاء مثل الـ input */
  transition: all 0.3s ease; /* تأثير انتقال للتركيز */
}

/* تحسين الـ select2 عند التركيز */
.select2-container--default .select2-selection--single:focus {
  border-color: #007bff; /* تغيير اللون عند التركيز */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.25); /* إضافة تأثير عند التركيز */
}

/* تحسين مظهر القائمة المنسدلة */
.select2-container--default .select2-results__option {
  font-size: 16px; /* حجم الخط في القائمة المنسدلة */
  padding: 10px; /* إضافة مسافة داخلية في العناصر */
}

/* تحسين مظهر العنصر المحدد في القائمة */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 10px; /* إضافة حواف داخلية للنص المختار */
}