/* CSS Document */

    body{
        font-family: Arial, Helvetica, sans-serif;
        background: #2D4166 !important;
        margin:0;
        padding:20px;
		
    }

    .container{
        
		max-width: 95%;
        margin:auto;
		
        background:#efefef;
        border:1px solid #777;
        padding:15px;
		border-radius: 15px; 
    }

    .top-links{
        font-size:14px;
        margin-bottom:30px;
		background-color: black;
		padding:20px;
		border-radius: 10px; 
    }

    .top-links a{
        color:#fff;
        text-decoration:none;
        margin-right:10px;
    }

    .form-grid{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:25px;
    }

    .section{
        border-top:1px solid #888;
        padding-top:10px;
		padding-bottom:20px;
    }
.section-header{
    font-size:14px;
	font-weight: bolder;
	baseline-shift: super;
	padding-bottom: 10px;
    }

    .row{
        display:flex;
        align-items:center;
        margin-bottom:10px;
    }
  
    .row label{
        width:180px;
        font-size:13px;
        font-weight:bold;
    }

    .row input[type="text"],
    .row input[type="date"],
    .row select,
    .row textarea{
        flex:1;
        padding:5px;
        border:1px solid #999;
        font-size:13px;
        background:#fff;
    }

    textarea{
        resize:vertical;
        min-height:90px;
    }

    .wide-section{
        margin-top:20px;
        border-top:1px solid #888;
        padding-top:15px;
    }

    .wide-row{
        display:grid;
        grid-template-columns: 250px 1fr;
        margin-bottom:12px;
        gap:15px;
        align-items:start;
    }

    .wide-row label{
        font-size:13px;
        font-weight:bold;
    }

    .checkbox-row{
        display:flex;
        align-items:center;
        gap:8px;
    }

    .submit-row{
        text-align:center;
        margin-top:25px;
    }

    button{
        padding:8px 20px;
        border:1px solid #666;
        background:#f5f5f5;
        cursor:pointer;
    }

    button:hover{
        background:#ddd;
    }



/* add customer page */
.row-fixed {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.row-fixed label {
    width: 180px;
    font-size: 13px;
    font-weight: bold;
}

.row-fixed input[type="text"],
.row-fixed input[type="date"],
.row-fixed select {
    width: 250px;
    padding: 5px;
    border: 1px solid #999;
    font-size: 13px;
}
/* CAR/ROR List Page */

.list-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}

.list-title{
font-size:24px;
font-weight:bold;
}
.list-title-right{
	float: right;
font-size:24px;
font-weight:bold;
}
.search-box{
width:300px;
padding:6px;
border:1px solid #999;
}

.new-button{
padding:8px 15px;
background:#f5f5f5;
border:1px solid #666;
text-decoration:none;
color:#000;
}

.new-button:hover {
    background:#ddd;
}

.record-count {
    margin:10px 0;
    font-size:13px;
    font-weight:bold;
}

.list-table {
    width:100%;
    border-collapse:collapse;
   
}

.list-table th {
    background:#cfcfcf;
    border:1px solid #999;
    padding:8px;
    text-align:left;
}

.list-table td {
    border:1px solid #ccc;
    padding:8px;
}

/* Alternating rows */
.list-table tbody tr:nth-child(odd) {
    background-color:#ffffff;
}

.list-table tbody tr:nth-child(even) {
    background-color:#e8e8e8;
}

.list-table tbody tr:hover {
    background-color:#d9e8ff;
}
.car-link{
font-weight:bold;
text-decoration:none;
color:#003399;
}

.car-link:hover{
text-decoration:underline;
}

.status-open{
color:#cc0000;
font-weight:bold;
}

.status-closed{
color:#006600;
font-weight:bold;
}
/* wo page*/
.wo-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#222;
    color:#fff;
    padding:14px 18px;
    border-radius:10px;
    margin-bottom:20px;
}

.wo-title {
    font-size:22px;
    font-weight:bold;
}

.wo-number {
    font-size:20px;
    font-weight:bold;
}

.wo-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.section {
    background:#f7f7f7;
    border:1px solid #ccc;
    border-radius:10px;
    padding:10px;
    margin-bottom:5px;
}

.section-header {
    font-weight:bold;
    font-size:16px;
    margin-bottom:15px;
    padding-bottom:8px;
    border-bottom:1px solid #bbb;
}

.form-row {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.form-row label {
    width:130px;
    font-weight:bold;
}

.form-row input,
.form-row select,
.form-row textarea {
    /*flex:1;
    max-width:350px;*/
    padding:6px;
}
.input-xs {
    width:60px;
}

.input-sm {
    width:100px;
}

.input-md {
    width:180px;
}

.input-lg {
    width:300px;
}

.input-xl {
    width:450px;
}

.input-fill {
    flex:1;
    max-width:450px;

}

.form-row textarea {
    height:80px;
}

.check-row input {
    flex:0;
}

.dim-row {
    display:grid;
    grid-template-columns:90px 1fr 70px 1fr;
    gap:8px;
    align-items:center;
    margin-bottom:10px;
}

.full-width {
    grid-column:1 / -1;
}

.form-actions {
    text-align:right;
    margin-top:20px;
}

.form-actions input {
    padding:8px 20px;
}

.contact-box {
    background:#fff;
    border:1px solid #ccc;
    border-radius:6px;
    padding:8px;
	min-width: 300px;
    min-height:45px;
}
.other-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 30px;
}

.other-grid .form-row {
    margin-bottom:6px;
}

/*modal windows*/
.modal-bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.55);
    z-index:9999;
}

.modal-box {
    width:450px;
    background:#fff;
    margin:120px auto;
    padding:20px;
    border-radius:10px;
    border:1px solid #777;
}

.modal-box-wide {
    width:700px;
}

.entry-table {
    width:100%;
    border-collapse:collapse;
    margin-bottom:12px;
}

.entry-table th,
.entry-table td {
    border:1px solid #ccc;
    padding:6px;
}

.entry-table input {
    width:95%;
    padding:5px;
}

.btnRemoveEntry {
    padding:4px 8px;
}
#btnDeleteSerial {
    background:#b30000;
    color:#fff;
    border:0;
    padding:7px 14px;
}

/*modal windows*/

.modal-confirm{
    width:420px;
    max-width:90%;
}

.modal-header{
    background:#2D4166;
    color:#fff;
    padding:12px 16px;
    font-size:18px;
    font-weight:bold;
}

.modal-body{
    padding:20px;
    font-size:15px;
    line-height:1.5;
}

.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:15px;
    border-top:1px solid #ccc;
}

.btn-danger{
    background:#b00020;
    color:#fff;
    border:none;
    padding:8px 18px;
    cursor:pointer;
}

.btn-danger:hover{
    background:#8c0019;
}

/* customer contact page */

.contact-page {
    max-width:1000px;
}

.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 30px;
}

.contact-grid .form-row {
    margin-bottom:10px;
}

.contact-grid .form-row label {
    width:130px;
}

.contact-grid .form-row input[type="text"],
.contact-grid .form-row input[type="email"],
.contact-grid .form-row input[type="tel"],
.contact-grid .form-row select {
    width:300px;
    padding:6px;
    border:1px solid #999;
    background:#fff;
    box-sizing:border-box;
}

.contact-grid .form-row textarea {
    width:100%;
    height:120px;
    padding:6px;
    border:1px solid #999;
    background:#fff;
    box-sizing:border-box;
}

.contact-grid .full-width {
    grid-column:1 / -1;
}

.contact-grid .full-width .form-row {
    align-items:flex-start;
}

.contact-grid .full-width .form-row textarea {
    flex:1;
}

.contact-active-row {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
}

.contact-active-row label {
    font-size:13px;
    font-weight:bold;
}

.message {
    padding:12px;
    margin-bottom:15px;
    border-radius:6px;
}

.success-message {
    background:#e1f3e1;
    border:1px solid #76a976;
    color:#245724;
}

.error-message {
    background:#f8dddd;
    border:1px solid #bc6b6b;
    color:#8a0000;
}

.required {
    color:#b00000;
}

.form-actions button,
.form-actions input[type="submit"] {
    padding:8px 20px;
    border:1px solid #666;
    cursor:pointer;
}

.form-actions input[type="submit"] {
    background:#2D4166;
    color:#fff;
}

.form-actions input[type="submit"]:hover {
    background:#1f304f;
}

@media (max-width:800px) {

    .contact-grid {
        grid-template-columns:1fr;
    }

    .contact-grid .full-width {
        grid-column:auto;
    }

    .contact-grid .form-row {
        align-items:flex-start;
        flex-direction:column;
    }

    .contact-grid .form-row label {
        width:auto;
    }

    .contact-grid .form-row input[type="text"],
    .contact-grid .form-row input[type="email"],
    .contact-grid .form-row input[type="tel"],
    .contact-grid .form-row select,
    .contact-grid .form-row textarea {
        width:100%;
    }
}


/* Customer contact two-column page */

.contact-page-grid {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:20px;
    align-items:start;
}

.contact-page-grid .section {
    min-width:0;
    margin-bottom:0;
}

.contact-page-grid .form-row {
    display:grid;
    grid-template-columns:140px minmax(0, 1fr);
    gap:10px;
    align-items:center;
    margin-bottom:10px;
}

.contact-page-grid .form-row label {
    width:auto;
    min-width:0;
}

.contact-page-grid .form-row input[type="text"],
.contact-page-grid .form-row input[type="email"],
.contact-page-grid .form-row input[type="tel"],
.contact-page-grid .form-row select {
    width:100%;
    max-width:none;
    min-width:0;
    box-sizing:border-box;
}

.contact-page-grid .input-sm,
.contact-page-grid .input-md,
.contact-page-grid .input-lg,
.contact-page-grid .input-xl {
    width:100%;
}

.contact-full-width {
    grid-column:1 / -1;
}

.contact-notes-row {
    align-items:start;
}

.contact-notes-row textarea {
    width:100%;
    min-width:0;
    min-height:100px;
    box-sizing:border-box;
}

.contact-page-grid .check-row input {
    width:auto;
    justify-self:start;
}

@media (max-width:900px) {

    .contact-page-grid {
        grid-template-columns:1fr;
    }

    .contact-full-width {
        grid-column:auto;
    }
}
.shipto-select-row {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.small-action-link {
    font-size:14px;
    white-space:nowrap;
}
/* inpectors wo list page*/
#inspectorWorkTable {
    width:100%;
}

#inspectorWorkTable th {
    white-space:nowrap;
}

#inspectorWorkTable td {
    vertical-align:middle;
}

.inspector-open-button {
    display:inline-block;
    padding:7px 14px;
    border:1px solid #2D4166;
    border-radius:4px;
    background:#2D4166;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
}

.inspector-open-button:hover {
    background:#1e304f;
    color:#fff;
}

.serial-number {
    color:#003b81;
    font-size:15px;
}

.serial-status-open {
    color:#a51d1d;
    font-weight:bold;
}

#inspectorWorkTable .due-overdue {
    display:inline-block;
    padding:4px 7px;
    border-radius:4px;
    background:#a32626;
    color:#fff;
    white-space:nowrap;
}

#inspectorWorkTable .due-soon {
    display:inline-block;
    padding:4px 7px;
    border-radius:4px;
    background:#c67b00;
    color:#fff;
    white-space:nowrap;
}