.edit-popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: auto; /* اجازه می‌دهد که پاپاپ اسکرول شود */
}

.txt-right{
  font-size:13px !important;    
}

button.input-element {
    padding: 10px 40px;
}

.popup-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    width: 90%; /* عرض پاپاپ */
    max-width: 800px; /* حداکثر عرض */
    overflow: auto; /* امکان اسکرول برای محتوای اضافی */
}

.close-popup {
    background-color: #3498db; /* رنگ پس‌زمینه آبی */
    color: #ffffff; /* رنگ متن سفید */
    border: none; /* بدون حاشیه */
    border-radius: 5px; /* گوشه‌های گرد */
    padding: 5px 10px; /* فضا داخلی */
    font-size: 16px; /* اندازه متن */
    cursor: pointer; /* نشانگر موس */
    transition: background-color 0.3s, transform 0.3s; /* انیمیشن تغییر رنگ و تحول */
}

.close-popup:hover {
    background-color: #2980b9; /* تغییر رنگ پس‌زمینه در حالت هاور */
    transform: scale(1.05); /* کمی بزرگ‌تر شدن */
}

.close-popup:focus {
    outline: none; /* حذف خط تمرکز */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); /* سایه در حالت تمرکز */
}


#edit-form-content {
    max-height: 80vh; /* حداکثر ارتفاع محتوا */
    overflow-y: auto; /* اجازه می‌دهد که محتوای اضافی در صورت لزوم اسکرول شود */
}

#edit-form {
    display: flex;
    flex-wrap: wrap; /* اجازه می‌دهد تا فیلدها به سطر جدید بروند */
}

#edit-form label {
    width: calc(50% - 20px); /* هر برچسب 50% عرض را می‌گیرد با فضای padding */
    box-sizing: border-box; /* برای کنترل بهتر عرض */
    padding: 10px; /* فضای داخلی برای زیبایی */
}

#edit-form input[type="text"] {
    width: calc(50% - 20px); /* ورودی‌ها هم عرض 50% را می‌گیرند */
    padding: 10px; /* فضای داخلی برای ورودی */
    margin-bottom: 15px; /* فاصله بین ورودی‌ها */
    box-sizing: border-box; /* برای کنترل بهتر عرض */
}

#edit-form input[type="submit"] {
    width: 100%; /* دکمه ارسال تمام عرض را می‌گیرد */
    padding: 10px; /* فضای داخلی برای دکمه */
    background-color: #4CAF50; /* رنگ پس‌زمینه دکمه */
    color: white; /* رنگ متن دکمه */
    border: none; /* بدون حاشیه */
    border-radius: 5px; /* لبه‌های گرد */
    cursor: pointer; /* نشانگر ماوس به دست */
    margin-top: 10px; /* فاصله بالای دکمه */
}

#edit-form input[type="submit"]:hover {
    background-color: #45a049; /* رنگ دکمه در حالت hover */
}

.preloader {
    display: none; /* پنهان به طور پیش‌فرض */
    position: fixed; /* ثابت در صفحه */
    top: 0; /* از بالا */
    left: 0; /* از چپ */
    width: 100%; /* عرض کامل */
    height: 100%; /* ارتفاع کامل */
    background-color: rgba(255, 255, 255, 0.8); /* پس‌زمینه نیمه شفاف */
    z-index: 9999; /* بالاتر از سایر عناصر */
    display: flex; /* به حالت فلیکس تبدیل */
    align-items: center; /* مرکز افقی */
    justify-content: center; /* مرکز عمودی */
}

.loader {
    border: 8px solid #f3f3f3; /* رنگ پس‌زمینه */
    border-top: 8px solid var(--e-global-color-e88691d); /* رنگ لودر */
    border-radius: 50%; /* گرد کردن لودر */
    width: 50px; /* عرض لودر */
    height: 50px; /* ارتفاع لودر */
    animation: spin 2s linear infinite; /* انیمیشن چرخش */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.form-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.form-search input {
    padding: 5px;
    font-size: 14px;
    width: 200px;
    box-sizing: border-box; /* جلوگیری از بروز مشکل در اندازه‌ها */
}

.form-search button {
    padding: 7px 15px;
    background-color: var(--e-global-color-e88691d);
    color: #fff;
    border: none;
    cursor: pointer;
    box-sizing: border-box; /* جلوگیری از بروز مشکل در اندازه‌ها */
}

.form-search button:hover {
    background-color: #005f8d;
}

/* Media query برای صفحه‌های کوچک */
@media (max-width: 768px) {
    .form-search input {
        width: 100%; /* عرض ورودی برای صفحه‌های کوچک به 100% تغییر می‌کند */
    }
    .form-search button {
        width: 100%; /* دکمه هم عرض کامل می‌گیرد */
        padding: 10px 0; /* تنظیم اندازه مناسب برای دکمه در موبایل */
    }
}

/* Media query برای صفحه‌های خیلی کوچک‌تر */
@media (max-width: 480px) {
    .form-search {
        flex-direction: column; /* ترتیب فرم به صورت عمودی در می‌آید */
    }
    .form-search input,
    .form-search button {
        width: 100%; /* همه المان‌ها عرض 100% می‌گیرند */
    }
}