:root {
            --primary-color: #104A4B;
            --primary-hover-color: #082A2B;
            --success-color: #1cc88a;
            --info-color: #36b9cc;
            --warning-color: #f6c23e;
            --danger-color: #e74a3b;
            --dark-color: #5a5c69;
            --gray-100: #f8f9fc;
            --gray-200: #eaecf4;
            --gray-300: #dddfeb;
            --gray-400: #d1d3e2;
            --gray-500: #b7b9cc;
            --gray-600: #858796;
        }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
            margin: 0;
            color: #2d3748;
        }
        .swal2-timer-progress-bar {
  background: linear-gradient(to right, var(--primary-color), var(--primary-hover-color)) !important;
  height: 5px !important; 
}
           .hidden {
            display: none;
        }
        
                .container {
            max-width: 95%;
            margin: 15px auto;
            background: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        h2 {
            text-align: center;
            color: #1a202c;
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .card {
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        .card-header {
            background: #F8FAFC;
            color: #2d3748;
            padding: 12px 20px;
            border-radius: 8px 8px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-header h5 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 500;
        }
                .page-title {
            font-weight: 600;
            color: var(--primary-color);
        }
        
       .form-label {
            font-weight: 500;
            color: #718096;
            margin-bottom: 5px;
            font-size: 0.85rem;
            text-transform: uppercase;
        }
       
       /* input, select, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 0.9rem;
            color: #2d3748;
            background: #fff;
            transition: border-color 0.3s ease;
        }
        input:focus, select:focus, textarea:focus {
            border-color: #104A4B;
            outline: none;
            box-shadow: 0 0 5px rgba(16, 74, 75, 0.2);
        }
        */
        .is-invalid {
            border-color: #dc3545 !important;
        }
        
         .invalid-feedback {
            color: #dc3545;
            font-size: 0.8rem;
        }
        
                .error-message {
            color: #dc3545;
            font-size: 0.8rem;
            margin-top: 5px;
            display: none;
        }

        .alert {
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        .alert-success {
            background: #c6f6d5;
            color: #2f855a;
            border-color: #9ae6b4;
        }
        .alert-error {
            background: #fed7d7;
            color: #c53030;
            border-color: #fed7d7;
        }
        
                .select2-container--default .select2-selection--single {
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 0.9rem;
            height: 38px;
            line-height: 38px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px;
            padding-left: 10px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px;
        }
        .select2-container .select2-results__option--highlighted {
        background-color: var(--primary-color) !important;
        color: white !important;
    }
        
                .swal2-close {
            font-size: 24px;
            font-weight: bold;
            color: #6c757d;
            opacity: 0.75;
            transition: all 0.2s;
        }
        .swal2-close:hover {
            opacity: 1;
            color: #495057;
            transform: scale(1.1);
        }
        
                textarea {
            resize: vertical;
            min-height: 100px;
        }
        
                .action-buttons {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 20px;
        }
        
          .action-buttons-multi {
            display: flex;
            justify-content: flex-end;
            gap: 5px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
                .btn-main {
            background: var(--primary-color);
            color: #fff;
        }
        .btn-main:hover, .btn-main:focus {
            background: var(--primary-hover-color);
            color: #fff;
        }
        
                        .btn-outline-main {
            background: none;
            border: 1px solid var(--primary-color);
            color: #111;
        }
        .btn-outline-main:hover, .btn-outline-main:focus {
            background: var(--primary-hover-color);
            color: #fff;
        }
        .btn-main:disabled {
            background: #6b7280;
            border-color: #6b7280;
        }
                .btn-secondary {
            background: #6b7280;
            color: #fff;
            border: none;
        }
        .btn-secondary:hover, .btn-secondary:focus {
            background: #4b5563;
            border-color: #4b5563;
        }
        
            .remove-btn {
            background: #c53030;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 6px 10px;
            cursor: pointer;
            font-size: 0.6rem;
            display: flex;
            align-items: center;
            gap: 5px;
            width: auto;
            
        }
        .remove-btn:hover {
            background: #9b2c2c;
        }
        
                       .btn-filter {
           background-color: var(--primary-color);
            color : #fff;
        }
        .btn-filter:hover {
            background: #082A2B;
            color: #fff;
       }
              .btn-search {
           background-color: var(--primary-color);
            color : #fff;
        }
        .btn-search:hover {
            background: #082A2B;
            color: #fff;
       }
       
               .search-box {
            max-width: 300px;
        }
        
        .clear-search-btn {
            position: absolute;
            right: 50px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            color: #111;
            cursor: pointer;
        }
        .search-container {
            position: relative;
        }
        
           .btn-link {
            background: transparent;
            color: var(--primary-color);
            border: none;
            text-decoration: none;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: opacity 0.3s ease;
        }
        .btn-link:hover {
            opacity: 0.8;
            color: #1a1a1a;
        }
        
        /*  
        .loading-overlay {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .loading-overlay .spinner-border {
            width: 2rem;
            height: 2rem;
            color: var(--primary-color);
        } 
        */
    
        .loading-container 
    {
       display: flex;
       flex-direction: column;
    align-items: center;
    }
    .loading-overlay {
        display: none;
position: fixed;
top:40%;
left: 0%;
width: 100%;
height: 100%;
justify-content: center!important;
align-items: center!important;
z-index: 1000;
}
.loading-overlay.active {
display: flex; 
}
.loading-overlay .spinner-border {
width: 5rem;
height: 5rem;
color: var(--primary-color);
}
.loading-overlay .favicon {
top:16px;
width: 47px; 
height: 47px;
position: absolute;
}
        
                .pagination .page-item.active .page-link {
            background-color: rgba(78, 115, 223, 0.1);
            border-color: var(--primary-color);
        }
        .pagination .page-link {
            color: #000;
        }
        
                .total-count-badge {
            font-size: 1rem;
            margin-left: 10px;
        }
        
        
        @media (max-width: 767px) {
            .container {
                margin: 10px;
                padding: 10px;
            }
            .action-buttons {
                flex-direction: column;
                align-items: stretch;
            }
            .action-buttons  {
                width: 100%;
            }
            .action-buttons-multi
            {
                flex-direction: column;
                align-items: stretch;
            }
            .action-buttons-multi  {
                width: 100%;
            }
            h2 {
                font-size: 1.3rem;
            }

        }
        @media (min-width: 768px) {
            .action-buttons {
                flex-direction: row;
            }
        }