/* تعريف متغيرات CSS */




.joy-loading-circle-container {
    display: flex;
    justify-content: center; /* محاذاة أفقية للمنتصف */
    align-items: center; /* محاذاة عمودية للمنتصف */
    height: 100px; /* ارتفاع الحاوية */
    margin: 0; /* إزالة المسافات الخارجية */
}

/* تصميم دائرة التحميل */
.joy-loading-circle-border {
    width: var(--loading-circle-size); /* قطر الدائرة */
    height: var(--loading-circle-size); /* قطر الدائرة */
    border-radius: 50%; /* تحويل الشكل إلى دائرة */
    background: var(--loading-circle-colors); /* التدرج اللوني */
    -webkit-mask: radial-gradient( circle, transparent var(--loading-circle-inner-radius), black var(--loading-circle-outer-radius) ); /* إنشاء الفراغ الداخلي */
    mask: radial-gradient( circle, transparent var(--loading-circle-inner-radius), black var(--loading-circle-outer-radius) ); /* إنشاء الفراغ الداخلي */
    animation: loading-spin var(--loading-animation-duration) linear infinite; /* حركة الدوران */
}

/* حركة الدوران */
@keyframes loading-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.backgroundAutocomplete {
    background-color: black !important;
    color: white !important;
    border: 1px solid #454d55 !important;
    z-index: 2000 !important;
    font-size: 16px; /* حجم خط ملائم */
    max-height: 200px; /* تحديد الحد الأقصى للارتفاع */
    overflow-y: auto; /* إضافة شريط تمرير عند الحاجة */
}

    .backgroundAutocomplete .ui-menu-item {
        padding: 8px 12px !important;
        border-bottom: 1px solid #454d55 !important;
    }

    .backgroundAutocomplete .ui-state-hover {
        background-color: #2b6c1e !important;
        color: white !important;
    }



.joy-loading-container {
    margin-top: 20px;
}

.joy-loading-circle-border {
    width: 50px;
    height: 50px;
    border: 5px solid #ffcc00;
    border-top: 5px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

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

    100% {
        transform: rotate(360deg);
    }
}

.joy-loading-text {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #ffcc00;
}

.joy-result {
    background-color: #292929;
    padding: 15px;
    border-radius: 5px;
}
/* تصميم شاشة التحميل */
loadingPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

    loadingPage p {
        font-size: 20px;
        font-weight: bold;
    }