.menu-container {
    position: relative;
    z-index: 10;
}

.btn-menu {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white !important;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    text-decoration: none;
    font-size: 0.875rem;
}

    .btn-menu:hover {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        color: white !important;
    }

    .btn-menu:focus {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.5);
        color: white !important;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    }

.dropdown-menu-custom {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    margin-top: 8px !important;
    z-index: 5000 !important;
    position: absolute !important;
    min-width: 200px;
}

.dropdown-item-custom {
    color: #333;
    border-radius: 10px;
    padding: 12px 18px;
    margin: 3px 0;
    transition: all 0.3s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
}

    .dropdown-item-custom:hover,
    .dropdown-item-custom:focus {
        background: linear-gradient(45deg, #0da9a6, #07a869) !important;
        color: white !important;
        transform: translateX(5px);
    }

    .dropdown-item-custom i {
        transition: transform 0.3s ease;
    }

    .dropdown-item-custom:hover i {
        transform: translateX(3px);
    }

.btn-menu.dropdown-toggle::after {
    margin-right: 0.5rem;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.header-with-pattern .menu-container .btn-menu {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* تحسين responsive */
@media (max-width: 768px) {
    .menu-container {
        gap: 1rem !important;
    }

    .btn-menu {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

.header-content {
    overflow: visible !important;
    height: 85px !important;
    max-height: 85px !important;
    position: relative;
    z-index: 2;
}
.header-with-pattern .dropdown-menu,
.header-fixed .dropdown-menu,
.dropdown-menu {
    z-index: 5000 !important;
    position: absolute !important;
}
.header-with-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 2px, transparent 2px), radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08) 3px, transparent 3px), radial-gradient(circle at 50% 10%, rgba(255,255,255,0.05) 1px, transparent 1px), radial-gradient(circle at 20% 80%, rgba(255,255,255,0.06) 2px, transparent 2px), radial-gradient(circle at 80% 30%, rgba(255,255,255,0.04) 1.5px, transparent 1.5px);
    background-size: 60px 60px, 80px 80px, 40px 40px, 70px 70px, 50px 50px;
    background-position: 0 0, 30px 30px, 10px 10px, 40px 40px, 25px 25px;
    pointer-events: none;
    z-index: 1;
}

/* إذا كان هناك أي عنصر يحتوي overflow يؤثر على الظهور */
body, .main-content, .app-wrapper {
    overflow: visible !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes successPulse {
    0% {
        background-color: #e6f7ef;
    }

    50% {
        background-color: #b3e6d0;
    }

    100% {
        background-color: #e6f7ef;
    }
}

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

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

/* Background Utilities */
.bg-ForestGreen {
    background-color: rgba(var(--bs-ForestGreen-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-TealGreen {
    background-color: rgba(var(--bs-TealGreen-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-TealD {
    background-color: rgba(var(--bs-TealD-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-Teal {
    background-color: rgba(var(--bs-Teal-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-BlueGreen {
    background-color: rgba(var(--bs-BlueGreen-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-SageGreen {
    background-color: rgba(var(--bs-SageGreen-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-BlueGreenD {
    background-color: rgba(var(--bs-BlueGreenD-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-BabyBlue {
    background-color: rgba(var(--bs-BabyBlue-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-Spearmint {
    background-color: rgba(var(--bs-Spearmint-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-SpearmintD {
    background-color: rgba(var(--bs-SpearmintD-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-Mint {
    background-color: rgba(var(--bs-Mint-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-Glight {
    background-color: rgba(var(--bs-Glight-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-Aliceblue {
    background-color: rgba(var(--bs-Aliceblue-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-GrayYallow {
    background-color: rgba(var(--bs-GrayYallow-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-Brick01 {
    background-color: rgba(var(--bs-Brick01-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-Brick02 {
    background-color: rgba(var(--bs-Brick02-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-Brick03 {
    background-color: rgba(var(--bs-Brick03-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-Brick04 {
    background-color: rgba(var(--bs-Brick04-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* Text Utilities */
.text-ForestGreen {
    color: rgba(var(--bs-ForestGreen-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-TealGreen {
    color: rgba(var(--bs-TealGreen-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-TealD {
    color: rgba(var(--bs-TealD-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-Teal {
    color: rgba(var(--bs-Teal-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-BlueGreen {
    color: rgba(var(--bs-BlueGreen-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-SageGreen {
    color: rgba(var(--bs-SageGreen-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-BlueGreenD {
    color: rgba(var(--bs-BlueGreenD-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-BabyBlue {
    color: rgba(var(--bs-BabyBlue-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-Spearmint {
    color: rgba(var(--bs-Spearmint-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-SpearmintD {
    color: rgba(var(--bs-SpearmintD-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-Mint {
    color: rgba(var(--bs-Mint-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-Glight {
    color: rgba(var(--bs-Glight-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-Aliceblue {
    color: rgba(var(--bs-Aliceblue-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-GrayYallow {
    color: rgba(var(--bs-GrayYallow-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-Brick01 {
    color: rgba(var(--bs-Brick01-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-Brick02 {
    color: rgba(var(--bs-Brick02-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-Brick03 {
    color: rgba(var(--bs-Brick03-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-Brick04 {
    color: rgba(var(--bs-Brick04-rgb), var(--bs-text-opacity, 1)) !important;
}

/* Border Utilities */
.border-ForestGreen {
    border-color: rgba(var(--bs-ForestGreen-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-TealGreen {
    border-color: rgba(var(--bs-TealGreen-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-TealD {
    border-color: rgba(var(--bs-TealD-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-Teal {
    border-color: rgba(var(--bs-Teal-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-BlueGreen {
    border-color: rgba(var(--bs-BlueGreen-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-SageGreen {
    border-color: rgba(var(--bs-SageGreen-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-BlueGreenD {
    border-color: rgba(var(--bs-BlueGreenD-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-BabyBlue {
    border-color: rgba(var(--bs-BabyBlue-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-Spearmint {
    border-color: rgba(var(--bs-Spearmint-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-SpearmintD {
    border-color: rgba(var(--bs-SpearmintD-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-Mint {
    border-color: rgba(var(--bs-Mint-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-Glight {
    border-color: rgba(var(--bs-Glight-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-Aliceblue {
    border-color: rgba(var(--bs-Aliceblue-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-GrayYallow {
    border-color: rgba(var(--bs-GrayYallow-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-Brick01 {
    border-color: rgba(var(--bs-Brick01-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-Brick02 {
    border-color: rgba(var(--bs-Brick02-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-Brick03 {
    border-color: rgba(var(--bs-Brick03-rgb), var(--bs-border-opacity, 1)) !important;
}

.border-Brick04 {
    border-color: rgba(var(--bs-Brick04-rgb), var(--bs-border-opacity, 1)) !important;
}

/* Select2 Customization */
.select2-container--default .select2-selection--single {
    text-align: right;
    height: 38px !important;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.select2-results__option {
    text-align: right;
    direction: rtl;
    color: #3d7eb9 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #e0f5f4 !important;
    color: #003845 !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #e0ecf6 !important;
    color: #3d7eb9 !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #2DADE0;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(45, 173, 224, 0.25);
}

.select2-results__message {
    text-align: right;
    padding: 6px 12px;
    color: #6c757d;
}

.select2-search--dropdown {
    text-align: right;
    direction: rtl;
    padding: 8px;
}

    .select2-search--dropdown .select2-search__field {
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #ced4da;
    }

    .select2-search--dropdown .select2-searching {
        text-align: right;
        padding: 8px;
        color: #6c757d;
    }

.select2-results__option mark {
    background-color: #c1b489;
    color: #003845;
    font-weight: 700;
    padding: 0 2px;
    border-radius: 2px;
}

.select2-dropdown {
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.select2-container--default.is-invalid .select2-selection--single {
    border-color: #dc3545;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    font-weight: 700;
    margin-left: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1673A3 !important;
    font-weight: 700;
}
/* Responsive Select2 Styling */
@media (max-width: 576px) {
    .select2-container--default .select2-selection--single {
        font-size: 14px;
    }

    .select2-results__option {
        font-size: 14px;
        padding: 8px;
    }
}

/* Page Content Customization */
.page-content-wrapper .main-container {
    background: linear-gradient(135deg, #3d7eb9 0%, #725AA4 100%);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin: 20px 0;
}

.page-content-wrapper .page-header {
    background: white;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    text-align: center;
}

.page-content-wrapper .page-title {
    color: #15445a;
    font-weight: bold;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

.page-content-wrapper .highlight {
    color: #725AA4;
    font-weight: bold;
}

.page-content-wrapper .form-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border: 1px solid #e0ecf6;
    animation: fadeIn 0.5s ease-out;
}

.page-content-wrapper .section-title {
    background: linear-gradient(45deg, #1673A3, #2DADE0);
    color: white;
    text-align: center;
    padding: 12px;
    margin: -20px -20px 20px -20px;
    border-radius: 12px 12px 0 0;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.page-content-wrapper .form-control {
    border-radius: 8px;
    border: 2px solid #e0ecf6;
    font-size: 12px;
    height: 35px;
    transition: all 0.3s ease;
}

    .page-content-wrapper .form-control:focus {
        border-color: #1673A3;
        box-shadow: 0 0 0 0.2rem rgba(22, 115, 163, 0.25);
    }

.page-content-wrapper .form-label {
    font-size: 12px;
    font-weight: bold;
    color: #15445a;
    margin-bottom: 5px;
}

.page-content-wrapper .btn-custom {
    border-radius: 8px;
    font-weight: bold;
    font-size: 12px;
    padding: 8px 15px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
}

.page-content-wrapper .btn-primary-custom {
    background: linear-gradient(45deg, #1673A3, #2DADE0);
    color: white;
}

    .page-content-wrapper .btn-primary-custom:hover {
        background: linear-gradient(45deg, #15445a, #3d7eb9);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(22, 115, 163, 0.3);
    }

.page-content-wrapper .btn-secondary-custom {
    background: linear-gradient(45deg, #B5B5B5, #c2c1c1);
    color: white;
}

    .page-content-wrapper .btn-secondary-custom:hover {
        background: linear-gradient(45deg, #003845, #B5B5B5);
        transform: translateY(-2px);
    }

.page-content-wrapper .table-container {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #e0ecf6;
    animation: fadeIn 0.7s ease-out;
}

.page-content-wrapper .table-custom {
    margin: 0;
    font-size: 11px;
}

    .page-content-wrapper .table-custom thead {
        background: linear-gradient(45deg, #1673A3, #2DADE0);
        color: white;
    }

        .page-content-wrapper .table-custom thead th {
            border: none;
            font-weight: bold;
            text-align: center;
            padding: 10px 6px;
            font-size: 11px;
            letter-spacing: 0.3px;
        }

    .page-content-wrapper .table-custom tbody tr {
        transition: all 0.3s ease;
    }

        .page-content-wrapper .table-custom tbody tr:hover {
            background-color: #e0f5f4;
            transform: scale(1.005);
        }

    .page-content-wrapper .table-custom td {
        padding: 6px 4px;
        vertical-align: middle;
        border-color: #e0ecf6;
        font-size: 10px;
    }

.page-content-wrapper .table-input {
    border: 1px solid #e0ecf6;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 10px;
    width: 100%;
    height: 28px;
}

    .page-content-wrapper .table-input:focus {
        border-color: #1673A3;
        outline: none;
        box-shadow: 0 0 0 0.1rem rgba(22, 115, 163, 0.25);
    }

.page-content-wrapper .table-select {
    border: 1px solid #e0ecf6;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 10px;
    width: 100%;
    height: 28px;
    background: white;
}

    .page-content-wrapper .table-select:focus {
        border-color: #1673A3;
        outline: none;
        box-shadow: 0 0 0 0.1rem rgba(22, 115, 163, 0.25);
    }

.page-content-wrapper .btn-action {
    font-size: 9px;
    padding: 3px 6px;
    margin: 1px;
    border-radius: 4px;
    border: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.page-content-wrapper .btn-success-custom {
    background: linear-gradient(45deg, #07a869, #0da9a6);
    color: white;
}

    .page-content-wrapper .btn-success-custom:hover {
        background: linear-gradient(45deg, #003845, #07a869);
        transform: translateY(-1px);
    }

.page-content-wrapper .btn-danger-custom {
    background: linear-gradient(45deg, #f44336, #ef5350);
    color: white;
}

    .page-content-wrapper .btn-danger-custom:hover {
        background: linear-gradient(45deg, #d32f2f, #f44336);
        transform: translateY(-1px);
    }

.page-content-wrapper .loading-row {
    background: linear-gradient(45deg, #c1b489, #d4c9a8);
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}

.page-content-wrapper .no-data-message {
    background: linear-gradient(45deg, #c1b489, #d4c9a8);
    color: white;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}

.page-content-wrapper .divider {
    border: 2px solid #1673A3;
    margin: 20px 0;
    border-radius: 2px;
}

.page-content-wrapper .row {
    margin-bottom: 15px;
}

.page-content-wrapper .form-group {
    margin-bottom: 15px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .page-content-wrapper .table-custom {
        font-size: 9px;
    }

    .page-content-wrapper .table-input,
    .page-content-wrapper .table-select {
        font-size: 9px;
        height: 25px;
    }

    .page-content-wrapper .btn-action {
        font-size: 8px;
        padding: 2px 4px;
    }

    .page-content-wrapper .main-container {
        padding: 15px;
    }
}

/* Additional animations */
.page-content-wrapper .form-section {
    animation: fadeIn 0.5s ease-out;
}

.page-content-wrapper .table-container {
    animation: fadeIn 0.7s ease-out;
}
/* Loading spinner */
.page-content-wrapper .loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #e0ecf6;
    border-top: 3px solid #1673A3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.page-content-wrapper .success-row {
    animation: successPulse 2s ease-in-out;
}

/* Main container duplications for generic use */
.main-container {
    background: linear-gradient(135deg, #07a869 0%, #0da9a6 50%, #003845 100%);
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin: 20px 0;
}

.form-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border: 1px solid #e0f5f4;
}

.section-title {
    color: #003845;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 14px;
    border-bottom: 2px solid #e0f5f4;
    padding-bottom: 8px;
}

.btn-custom {
    border-radius: 8px;
    font-weight: bold;
    font-size: 11px;
    padding: 8px 15px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary-custom {
    background: linear-gradient(45deg, #07a869, #0da9a6);
    border: none;
    color: white;
}

    .btn-primary-custom:hover {
        background: linear-gradient(45deg, #003845, #07a869);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(7, 168, 105, 0.3);
    }

.table-container {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 1px solid #e0f5f4;
}

.table-custom {
    margin: 0;
    font-size: 11px;
}

    .table-custom thead {
        background: linear-gradient(45deg, #07a869, #0da9a6);
        color: white;
    }

        .table-custom thead th {
            border: none;
            font-weight: bold;
            text-align: center;
            padding: 12px 8px;
            font-size: 11px;
            letter-spacing: 0.5px;
        }

    .table-custom tbody tr {
        transition: all 0.3s ease;
    }

        .table-custom tbody tr:hover {
            background-color: #e6f7ef;
            transform: scale(1.01);
        }

    .table-custom td {
        padding: 8px 6px;
        vertical-align: middle;
        border-color: #e0f5f4;
        font-size: 11px;
    }

.table-input {
    border: 1px solid #e0f5f4;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    width: 100%;
    height: 30px;
}

    .table-input:focus {
        border-color: #0da9a6;
        outline: none;
        box-shadow: 0 0 0 0.1rem rgba(13, 169, 166, 0.25);
    }

.btn-action {
    font-size: 10px;
    padding: 4px 8px;
    margin: 1px;
    border-radius: 4px;
    border: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-success-custom {
    background: linear-gradient(45deg, #07a869, #0da9a6);
    color: white;
}

    .btn-success-custom:hover {
        background: linear-gradient(45deg, #003845, #07a869);
        transform: translateY(-1px);
    }

.btn-danger-custom {
    background: linear-gradient(45deg, #f44336, #ef5350);
    color: white;
}

    .btn-danger-custom:hover {
        background: linear-gradient(45deg, #d32f2f, #f44336);
        transform: translateY(-1px);
    }

.btn-dark-custom {
    background: linear-gradient(45deg, #003845, #15445a);
    color: white;
}

    .btn-dark-custom:hover {
        background: linear-gradient(45deg, #15445a, #003845);
        transform: translateY(-1px);
    }

.save-success {
    background-color: #e6f7ef !important;
    animation: successPulse 2s ease-in-out;
}

.alert-custom {
    border-radius: 10px;
    border: none;
    font-size: 12px;
    padding: 15px;
}

.no-data-message {
    background: linear-gradient(45deg, #07a869, #0da9a6);
    color: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}
/* Bootstrap Select Custom Styling */
.bootstrap-select.btn-group .btn .filter-option {
    text-align: right;
}

/* Custom Alert Classes */
.alert-ForestGreen {
    background-color: #13292a;
    color: #fff;
}

.alert-TealGreen {
    background-color: #167d7f;
    color: #fff;
}

.alert-TealD {
    background-color: #29a0b1;
    color: #fff;
}

.alert-Teal {
    background-color: #499fa4;
    color: #fff;
}

.alert-BlueGreen {
    background-color: #91cabe;
    color: #fff;
}

.alert-SageGreen {
    background-color: #9ca89e;
    color: #fff;
}

.alert-BlueGreenD {
    background-color: #7cb7af;
    color: #fff;
}

.alert-BabyBlue {
    background-color: #cadedf;
    color: #fff;
}

.alert-Spearmint {
    background-color: #b5dfd6;
    color: #fff;
}

.alert-SpearmintD {
    background-color: #98d7c2;
    color: #fff;
}

.alert-Mint {
    background-color: #ddffe7;
    color: #fff;
}

.alert-Glight {
    background-color: #dce8e9;
    color: #fff;
}

.alert-Aliceblue {
    background-color: #f0f8ff;
    color: #fff;
}

.alert-GrayYallow {
    background-color: #fbfcd1;
    color: #fff;
}

.alert-Brick01 {
    background-color: #fbd9d9;
    color: #fff;
}

.alert-Brick02 {
    background-color: #e1b9b9;
    color: #fff;
}

.alert-Brick03 {
    background-color: #dda4a4;
    color: #fff;
}

.alert-Brick04 {
    background-color: #e09494;
    color: #fff;
}

/* Custom Button Classes */
.btn-ForestGreen {
    color: #fff;
    background-color: #13292a;
    border-color: #13292a;
}

    .btn-ForestGreen:hover,
    .btn-ForestGreen:focus {
        background-color: #213e41;
        border-color: #213e41;
    }

.btn-TealGreen {
    color: #fff;
    background-color: #167d7f;
    border-color: #167d7f;
}

    .btn-TealGreen:hover,
    .btn-TealGreen:focus {
        background-color: #115f60;
        border-color: #115f60;
    }

.btn-TealD {
    color: #fff;
    background-color: #29a0b1;
    border-color: #29a0b1;
}

    .btn-TealD:hover,
    .btn-TealD:focus {
        color: #fff;
        background-color: #7c887f;
        border-color: #217f8d;
    }

.btn-Teal {
    color: #fff;
    background-color: #499fa4;
    border-color: #499fa4;
}

    .btn-Teal:hover,
    .btn-Teal:focus {
        background-color: #397e82;
        border-color: #397e82;
    }

.btn-BlueGreen {
    color: #fff;
    background-color: #91cabe;
    border-color: #91cabe;
}

    .btn-BlueGreen:hover,
    .btn-BlueGreen:focus {
        background-color: #65b1a0;
        border-color: #65b1a0;
    }

.btn-SageGreen {
    color: #fff;
    background-color: #9ca89e;
    border-color: #9ca89e;
}

    .btn-SageGreen:hover,
    .btn-SageGreen:focus {
        background-color: #7c887f;
        border-color: #7c887f;
    }

.btn-BlueGreenD {
    color: #fff;
    background-color: #7cb7af;
    border-color: #7cb7af;
}

    .btn-BlueGreenD:hover,
    .btn-BlueGreenD:focus {
        background-color: #5b958e;
        border-color: #5b958e;
    }

.btn-BabyBlue {
    color: #333;
    background-color: #cadedf;
    border-color: #cadedf;
}

    .btn-BabyBlue:hover,
    .btn-BabyBlue:focus {
        background-color: #a5c1c3;
        border-color: #a5c1c3;
    }

.btn-Spearmint {
    color: #333;
    background-color: #b5dfd6;
    border-color: #b5dfd6;
}

    .btn-Spearmint:hover,
    .btn-Spearmint:focus {
        background-color: #8ac3b7;
        border-color: #8ac3b7;
    }

.btn-SpearmintD {
    color: #333;
    background-color: #98d7c2;
    border-color: #98d7c2;
}

    .btn-SpearmintD:hover,
    .btn-SpearmintD:focus {
        background-color: #6fb19b;
        border-color: #6fb19b;
    }

.btn-Mint {
    color: #333;
    background-color: #ddffe7;
    border-color: #ddffe7;
}

    .btn-Mint:hover,
    .btn-Mint:focus {
        background-color: #b2e5c1;
        border-color: #b2e5c1;
    }

.btn-Glight {
    color: #333;
    background-color: #dce8e9;
    border-color: #dce8e9;
}

    .btn-Glight:hover,
    .btn-Glight:focus {
        background-color: #b6c5c7;
        border-color: #b6c5c7;
    }

.btn-Aliceblue {
    color: #333;
    background-color: #f0f8ff;
    border-color: #f0f8ff;
}

    .btn-Aliceblue:hover,
    .btn-Aliceblue:focus {
        background-color: #cbe0f2;
        border-color: #cbe0f2;
    }

.btn-GrayYallow {
    color: #333;
    background-color: #fbfcd1;
    border-color: #fbfcd1;
}

    .btn-GrayYallow:hover,
    .btn-GrayYallow:focus {
        background-color: #d3d4b6;
        border-color: #d3d4b6;
    }

.btn-Brick01 {
    color: #333;
    background-color: #fbd9d9;
    border-color: #fbd9d9;
}

    .btn-Brick01:hover,
    .btn-Brick01:focus {
        background-color: #dcbbbb;
        border-color: #dcbbbb;
    }

.btn-Brick02 {
    color: #333;
    background-color: #e1b9b9;
    border-color: #e1b9b9;
}

    .btn-Brick02:hover,
    .btn-Brick02:focus {
        background-color: #c99c9c;
        border-color: #c99c9c;
    }

.btn-Brick03 {
    color: #333;
    background-color: #dda4a4;
    border-color: #dda4a4;
}

    .btn-Brick03:hover,
    .btn-Brick03:focus {
        background-color: #b77575;
        border-color: #b77575;
    }

.btn-Brick04 {
    color: #333;
    background-color: #e09494;
    border-color: #e09494;
}

    .btn-Brick04:hover,
    .btn-Brick04:focus {
        background-color: #bb6d6d;
        border-color: #bb6d6d;
    }

/* Arabic RTL support */
[lang="ar"] {
    font-family: Tajawal, Arial, sans-serif;
    direction: rtl;
    text-align: right;
}

body {
    font-family: Tajawal, Arial, sans-serif;
    direction: rtl;
    padding-top: 90px; /* الهيدر 80 + ظل 20 تقريبي */
}

/* Custom Width Classes */
.w-12 {
    width: 12% !important;
}

.w-40 {
    width: 40% !important;
}

.w-60 {
    width: 60% !important;
}

/* Answer States */
.correct {
    background-color: #e6f7ef !important;
    color: #000 !important;
}

.incorrect {
    background-color: #fbdbdb !important;
    color: #000 !important;
}

/* Answer List Styling */
.answer-list {
    list-style-type: disc;
    padding-right: 20px;
    margin: 0;
}

    .answer-list li {
        white-space: nowrap;
        padding: 2px 0;
    }
.header-fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 85px;
    max-height: 85px;
    z-index: 5000;
}
/* Main Style is very good */

/* CSS Variables */
:root {
    --bs-ForestGreen: #13292a;
    --bs-TealGreen: #167d7f;
    --bs-TealD: #29a0b1;
    --bs-Teal: #499fa4;
    --bs-BlueGreen: #91cabe;
    --bs-SageGreen: #9ca89e;
    --bs-BlueGreenD: #7cb7af;
    --bs-BabyBlue: #cadedf;
    --bs-Spearmint: #b5dfd6;
    --bs-SpearmintD: #98d7c2;
    --bs-Mint: #ddffe7;
    --bs-Glight: #dce8e9;
    --bs-Aliceblue: #f0f8ff;
    --bs-GrayYallow: #fbfcd1;
    --bs-Brick01: #fbd9d9;
    --bs-Brick02: #e1b9b9;
    --bs-Brick03: #dda4a4;
    --bs-Brick04: #e09494;
    --bs-ForestGreen-rgb: 19, 41, 42;
    --bs-TealGreen-rgb: 22, 125, 127;
    --bs-TealD-rgb: 41, 160, 177;
    --bs-Teal-rgb: 73, 159, 164;
    --bs-BlueGreen-rgb: 145, 202, 190;
    --bs-SageGreen-rgb: 156, 168, 158;
    --bs-BlueGreenD-rgb: 124, 183, 175;
    --bs-BabyBlue-rgb: 202, 222, 223;
    --bs-Spearmint-rgb: 181, 223, 214;
    --bs-SpearmintD-rgb: 152, 215, 194;
    --bs-Mint-rgb: 221, 255, 231;
    --bs-Glight-rgb: 220, 232, 233;
    --bs-Aliceblue-rgb: 240, 248, 255;
    --bs-Brick01-rgb: 251, 217, 217;
    --bs-Brick02-rgb: 225, 185, 185;
    --bs-Brick03-rgb: 221, 164, 164;
    --bs-Brick04-rgb: 224, 148, 148;
}