.upload-container {
    max-width: 1000px; /* Increased width for better display */
    margin: 0 auto;
    padding: 20px;
}

.progress {
    display: none;
    margin-top: 10px;
}

.file-list {
    margin-top: 20px;
}

/* Table responsiveness */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

#filesTable {
    width: 100% !important; /* Ensures full width */
}

/* Style for file input with multiple files */
.file-upload-wrapper {
    margin-bottom: 15px;
}

.selected-files {
    margin-top: 10px;
}

.selected-file-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.file-remove {
    margin-left: 10px;
    cursor: pointer;
    color: #dc3545;
}

:root {
    --default-text-color: #5e4753;
    
    /* Brand Colors */
    --primary-color: #d61154; /* Primary color */
    --secondary-color: #f15a2b; /* Secondary color */

    /* Complementary Colors */
    --tertiary-color: #3f8e4a; /* Tertiary color (for accents, e.g., success) */
    --accent-color-1: #ea8e16; /* Accent color 1 (for highlights) */
    --accent-color-2: #6e43b1; /* Accent color 2 (for contrasts) */

    /* Neutrals */
    --light-gray: #f8f9fa; /* Light background color */
    --medium-gray: #e0e0e0; /* Medium gray for borders, inactive states */
    --dark-gray: #343a40; /* Dark gray for text and borders */
    --white: #ffffff; /* White color */
    --black: #000000; /* Black color */

    /* Success, Info, Warning, and Danger */
    --success-color: #28a745; /* Success color (green) */
    --info-color: #17a2b8; /* Info color (blue) */
    --warning-color: #ffc107; /* Warning color (yellow) */
    --danger-color: #dc3545; /* Danger color (red) */

    /* Light & Dark variants */
    --light-primary: #f8b2c1; /* Lighter primary color for hover or subtle accents */
    --dark-primary: #9c0045; /* Darker primary color for active elements */
    --light-secondary: #f7b09e; /* Lighter secondary color */
    --dark-secondary: #b33b1e; /* Darker secondary color */

    /* Text Colors */
    --text-light: #ffffff; /* Light text on dark backgrounds */
    --text-dark: #343a40; /* Dark text on light backgrounds */
    --text-muted: #6c757d; /* Muted text */
    --text-success: #28a745; /* Success text color */
    --text-info: #17a2b8; /* Info text color */
    --text-warning: #ffc107; /* Warning text color */
    --text-danger: #dc3545; /* Danger text color */

    /* Button States */
    --btn-primary-bg: var(--primary-color);
    --bs-btn-hover-bg: var(--secondary-color) !important;
    --btn-primary-border: var(--primary-color);
    --btn-secondary-bg: var(--secondary-color);
    --btn-secondary-border: var(--secondary-color);
    --btn-success-bg: var(--success-color);
    --btn-success-border: var(--success-color);
    --btn-info-bg: var(--info-color);
    --btn-info-border: var(--info-color);
    --btn-warning-bg: var(--warning-color);
    --btn-warning-border: var(--warning-color);
    --btn-danger-bg: var(--danger-color);
    --btn-danger-border: var(--danger-color);
    --btn-light-bg: var(--light-gray);
    --btn-light-border: var(--light-gray);
    --btn-dark-bg: var(--dark-gray);
    --btn-dark-border: var(--dark-gray);
    --bs-pagination-active-bg: var(--primary-color) !important;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('avantgarde.woff') format('woff'); /* Corrected path */
}

body {
   
    color: var(--default-text-color) !important;
    font-family: 'MyCustomFont', sans-serif !important;
    font-size: 13px;  /* Set default font size to 16px */
    font-weight: 400;  
    height: 100vh;
}
table.dataTable {
    font-size: 16px !important;  /* Set font size to 16px */
    font-weight: 200 !important;  /* Set font weight to 100 */
}




.btn-primary:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

/* Background Colors */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-tertiary {
    background-color: var(--tertiary-color) !important;
}

.bg-light {
    background-color: var(--light-gray) !important;
}

.bg-dark {
    background-color: var(--dark-gray) !important;
}

/* Text Colors */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-tertiary {
    color: var(--tertiary-color) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-light {
    color: var(--text-light) !important;
}

.text-dark {
    color: var(--text-dark) !important;
}

.text-success {
    color: var(--text-success) !important;
}

.text-info {
    color: var(--text-info) !important;
}

.text-warning {
    color: var(--text-warning) !important;
}

.text-danger {
    color: var(--text-danger) !important;
}

/* Button Colors */
.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
}

.btn-success {
    background-color: var(--btn-success-bg);
    border-color: var(--btn-success-border);
}

.btn-info {
    background-color: var(--btn-info-bg);
    border-color: var(--btn-info-border);
}

.btn-warning {
    background-color: var(--btn-warning-bg);
    border-color: var(--btn-warning-border);
}

.btn-danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-border);
}

.btn-light {
    background-color: var(--btn-light-bg);
    border-color: var(--btn-light-border);
}

.btn-dark {
    background-color: var(--btn-dark-bg);
    border-color: var(--btn-dark-border);
}

/* Border Colors */
.border-primary {
    border-color: var(--primary-color) !important;
}

.border-secondary {
    border-color: var(--secondary-color) !important;
}

.border-tertiary {
    border-color: var(--tertiary-color) !important;
}

.border-light {
    border-color: var(--light-gray) !important;
}

.border-dark {
    border-color: var(--dark-gray) !important;
}

/* Utility Classes */
.bg-light-primary {
    background-color: var(--light-primary) !important;
}

.bg-dark-primary {
    background-color: var(--dark-primary) !important;
}

.bg-light-secondary {
    background-color: var(--light-secondary) !important;
}

.bg-dark-secondary {
    background-color: var(--dark-secondary) !important;
}

.background {
    position: fixed;
    z-index: -99;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('Background-gradient.png');
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
}