/* Define Corporate Colors as CSS Variables */
:root {
    --primary-color: #b42323;    /* Corporate Primary Color */
    --primary2-color: #800707;    /* Corporate Primary Color2 */
    --button-color: #d3d2d2;  /* Corporate Secondary Color */
    --button2-color: #5f6061;  /* Corporate Secondary Color */
    --input-color: #fafafa;   /* Corporate Tertiary Color */
    --input-border-color: #ccc;   /* Corporate Tertiary Color */
    --font-color: #3a3b3b;   /* Corporate Tertiary Color */
    --font-Header-color: #3a3b3b;   /* Corporate Tertiary Color */
    --bg-Header-color: #e9e9e9;   /* Corporate Tertiary Color */
}


/* Classic Input Styling */
input.form-control,
textarea.form-control,
select.form-control {
    border: 1px solid var(--input-border-color);  /* Lighter border color */
    border-radius: 3px;      /* Rounded corners for a classic look */
    padding: 4px 6px;       /* Padding inside the input */
    font-size: 12px;         /* Slightly smaller text for a vintage feel */
    background-color: var(--input-color);  /* Lighter background for input fields */
    transition: border-color 0.3s ease;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
    border-color: #007bff;   /* Focused border color */
    outline: none;           /* Remove outline on focus */
}

/* Classic Checkbox Styling */
.form-check-input {
    border: 1px solid var(--input-border-color);  /* Classic border color */
    border-radius: 4px;       /* Slightly rounded checkboxes */
    width: 16px;              /* Smaller checkbox size */
    height: 16px;             /* Smaller checkbox size */
    background-color: var(--input-color); /* Classic light background */
    margin-right: 10px;        /* Space between checkbox and label */
}

.form-check-label {
    font-size: 12px;          /* Smaller text for the label */
}

/* Classic Select Field Styling */
select.form-control {
    border: 1px solid var(--input-border-color); /* Lighter border for select dropdown */
    border-radius: 3px;      /* Classic rounded corners */
    background-color: var(--input-color);/* Light background */
    padding: 4px 6px;       /* Padding for better spacing */
    font-size: 12px;         /* Smaller font size */
}


/* Classic Button Styling */
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
    border: 1px solid var(--button-color);  /* Classic border */
    border-radius: 5px;      /* Rounded corners */
    padding: 5px 10px;      /* Padding for a classic button size */
    font-size: 12px;         /* Smaller text for buttons */
    background-color: var(--button-color);; /* Lighter background for buttons */
    color: var(--font-color);     /* Classic text color */
    cursor: pointer;        /* Pointer cursor on hover */
    transition: background-color 0.3s ease, color 0.3s ease;
}

button.btn:hover,
input[type="submit"].btn:hover,
input[type="button"].btn:hover {
    background-color: var(--button2-color); /* Classic button hover effect */
    color: white;              /* White text on hover */
}

/* Remove focus outlines from buttons for a classic look */
button.btn:focus,
input[type="submit"].btn:focus,
input[type="button"].btn:focus {
    outline: none;
    box-shadow: none;
}

.form-label-container label {
    font-weight: bold;       /* Bold text for labels */
    font-size: 12px;          /* Same font size as inputs for consistency */
    color: var(--font-color);;             /* Text color */
}
label {
    font-weight: bold!important;       /* Bold text for labels */
    font-size: 12px!important;          /* Same font size as inputs for consistency */
    color: var(--font-color)!important;            /* Text color */
    min-width: 200px!important;
}
/* Custom h2 styling */
h2 {
    font-size: 1rem;               /* Set the font size */
    font-weight: 700;              /* Bold font */
    color: var(--font-Header-color);                  /* Dark color for text */
    text-align: left;           /* Center-align the heading */
    margin-bottom: 20px;          /* Add space below the heading */
    letter-spacing: 1px;          /* Add spacing between letters */
    text-transform: uppercase;    /* Make the text uppercase for emphasis */
    padding: 10px;                /* Add padding around the heading */
    border-bottom: 2px solid var(--bg-Header-color); /* Add a bottom border for decoration */
    background-color: var(--bg-Header-color);    /* Solid background color */
}



.page-item .page-link {
    padding: 5px 10px;
    text-decoration: none;
    color:var(--button2-color);
}

.page-item.active .page-link {
    background-color:var(--button2-color);
    border-color: var(--button2-color);
    color: white;
}

.page-item:hover .page-link {
    background-color: var(--button-color);
    border-color:var(--button-color);
    color: white;
}

 /* Style for the entire table */
 table {
    width: 100%;
    border-collapse: collapse; /* Ensure the borders are merged into one */
}

/* Style for table rows (tr) */
tr {
    background-color: #f9f9f9 !important; /* Light gray background color for each row */
}

/* Hover effect for table rows */
tbody tr:hover {
    background-color: #f1f1f1; /* Slightly darker gray when hovered */
}

/* Style for table data (td) */
td {
    padding: 10px; /* Add padding inside each cell */
    border: 1px solid #ddd; /* Light gray border around each cell */
    text-align: left; /* Align text to the left inside cells */
}

/* Style for table headers (th) */
th {
    padding: 12px;
    border: 1px solid #ddd;
    background-color: #333!important; /* Green background for headers */
    color: white !important; /* White text color for headers */
    text-align: center; /* Center-align header text */
}

/* Zebra striping effect */
tr:nth-child(even) {
    background-color: #f2f2f2 !important; /* Light gray background for even rows */
}

tr:nth-child(odd) {
    background-color: white !important; /* White background for odd rows */
}