/**
 * FILEPATH: /app/static/css/main.css
 * 
 * This CSS file contains styles for the main layout and components of the web form in the RamSwab application.
 * 
 * Styles:
 * - :root: Defines CSS variables for body background color, border color, and primary color.
 * - .container: Defines styles for the main container element.
 * - .btn-primary: Defines styles for primary buttons.
 * - html: Defines the base font size.
 * - .hide-expense-row, .hide-run-row: Defines styles to hide specific rows.
 * - .row: Defines styles for rows.
 * - .right-align-col, .center-align-col: Defines styles for columns with right and center alignment.
 * - .job-checkbox: Defines styles for job checkboxes.
 * - .item-select: Defines styles for item select dropdowns.
 * - .units-input, .num-input: Defines styles for input fields with specific widths.
 * - .subtotal-col, .taxes-col, .grand-total-col: Defines styles for columns with right alignment for subtotal, taxes, and grand total.
 * - .subtotal-label, .taxes-label, .grand-total-label: Defines styles for labels of subtotal, taxes, and grand total.
 * - .api-note: Defines styles for API notes.
 * - .run-number-input: Defines styles for input field for run number.
 * - .expense-table-title: Defines styles for the title of the expense table.
 * - .form-control: Defines styles for form controls.
 * - .form-check-input[type=checkbox]: Defines styles for checkbox inputs.
 * - .form-check-input:checked: Defines styles for checked checkbox inputs.
 * - #logo: Defines styles for the logo element.
 */

:root {
    --bs-body-bg: #F7F7F7;
    --bs-border-color: #414042;
    --bs-primary: #A3282D;
}

.container {
    width: 1200px;
    margin-left: 48px;
    margin-right: 48px;
    padding-left: 4px;
    padding-right: 4px;
}

.btn-primary {
    --bs-btn-bg: #A3282D;
    --bs-btn-border-color: #A3282D;
    --bs-btn-hover-bg: #942428;
    --bs-btn-hover-border-color: #942428;
    border-radius: 0px;
}

html {
    font-size: 12px;
}

.hide-expense-row {
    display: none;
}

.hide-run-row {
    display: none;
}

.row {
    margin-top: 4px;
    margin-bottom: 4px;
}

.right-align-col {
    text-align: right;
}

.center-align-col {
    text-align: center;
}

.job-checkbox {
    font-size: 18px;
}

.item-select {
    width: 300px;
}

.units-input {
    width: 100px;
}

.num-input {
    width: 80px;
}

.subtotal-col, .taxes-col, .grand-total-col {
    text-align: right;
}

.subtotal-label, .taxes-label, .grand-total-label {
    font-weight: bold;
}

.api-note {
    text-align: right;
    height: 29px;
    vertical-align: middle;
}

.run-number-input {
    width: 50px;
}

.expense-table-title {
    font-weight: bold;
    font-size: 18px;
}

.form-control {
    border-radius: 0px;
    background-color: #FFFFFF;
}

.form-check-input[type=checkbox] {
    border-radius: 0px;
    --bs-form-check-bg: #FFFFFF;
}

.form-check-input:checked {
    background-color: #A3282D;
    border-color: #A3282D;
    box-shadow: none;
}

#logo {
    width: 400px;
}

.invalid {
    border: 3px solid #A3282D;
}

.ui-autocomplete {
    padding-left: 4px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    max-width: 183px;
}

.ui-autocomplete > li {
    list-style-type: none;
}

.ui-autocomplete > li:hover {
    background-color: #888888;
}

.successful {
    color: #942428;
    text-align: center;
}

div.alert {
    display: none;
    margin-bottom: 20px;
    font-size: 1.25em;
}

.error {
    color: #A3282D;
}