h2{color:red; font-family:Arial rounded;}

h3{color:red; font-family:Arial;}

h4{color:red; font-family:Arial rounded;}

table{border:none; font-family:Arial; background-color:white;}

table th{border:none; font-family:Arial; background-color:grey; color:white;}

body{color:black;}

input{width:200px;}

textarea{resize:none; font-family:Arial;}

select{width:200px;}

.smallButton{width:105px;}

.priv{color:yellow;}

.imageButton{width:30px;height:30px; cursor:pointer;}

.summary{color:green;}

.error{color:orange; font-family:Arial;}

.radio{width:24px;}

.label{color:black; font-family:Arial;}
	
.icon{height:50px;}

.vehicleDisplay{position:absolute; left:7%; top:55%;}

.creditorDisplay{position:absolute; left:7%; top:28%;}

.hidden {display:none;}

.addRow{background-color:#BFFFD1;}

.editRow{background-color:#FFD1BF;}

.selectedVehicleInfo{font-family:Arial;}

.selectedCreditorInfo{font-family:Arial;}

.popup{left:5%; top:15%; position:absolute; z-index:500; background-color:#FFFFFF; width:90%; height:70%; display:none;border:solid 1; overflow:auto;}

.popup2{left:35%; top:35%; position:absolute; z-index:550; background-color:#FFFFFF; width:35%; height:40%; display:none;border:solid 1;}

.testrow{background: #E6E6E6;}

.orderReportTable td {padding:8;}

.orderReportTable th {padding:10;}

.orderReportTable{width:100%;}

.addCreditorTextArea{width:200px;}

.vehicleSearchTable td {padding:8;}

.vehicleHistoryReportTable td {padding:8;}

.tableHeader{color:white; background-color:black;}

.sellTable td {padding:8;}

.adminMenuItem{cursor:pointer;}

#theBackground{position:absolute; z-index:-1; width:100%; height:100%;}

#serverResponse{color:red; font-family:Arial;}

@font-face{font-family: Eras demi; src: url('ERASDEMI.TTF');}

@font-face{font-family: Arial; src: url('arial.TTF');}

@font-face{font-family: Arial rounded; src: url('ARLRDBD.TTF');}

@font-face{font-family: Perpetua bold; src: url('PERB.TTF');}

/* ------------------- ICON DOCK ------------------- */

.dock{position:relative; left:-2%; height:0px; text-align:center;}

.dock-container{position:absolute; height:50px; padding-left:0px;}

a.dock-item{display:block; width:40px; color:#000; position:absolute; top:15px; text-align:center; text-decoration:none; font:12px Arial;}

.dock-item img{border:none; margin:3px 0px 0px; width:100%;}

.dock-item span{display:none; padding-left:20px;}

/* ------------------ PAGINATION ------------------ */

.paginate{font-family: Arial; color: rgba(255, 12, 0, 0.59);}

a.paginate{border: 1px solid rgba(255, 12, 0, 0.59); padding: 2px 6px 2px 6px; text-decoration: none; color: rgba(255, 12, 0, 0.59);}

a.paginate:hover{background-color: rgba(255, 12, 0, 0.59); color: #FFF; text-decoration: underline;}

a.current{border: 1px solid rgba(255, 12, 0, 0.59); font: bold Arial,Helvetica,sans-serif; padding: 2px 6px 2px 6px; cursor: default; background:rgba(255, 12, 0, 0.59); color: #FFF; text-decoration: none;}

span.inactive{border: 1px solid #999; font-family: Arial, Helvetica, sans-serif; padding: 2px 6px 2px 6px; color: #999; cursor: default;}

a:active{outline: none;}

a:focus{-moz-outline-style: none;}

/* Loader */

.flip-btn {
    width: 40px;       /* fixed width */
    height: 40px;      /* fixed height */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;   /* size for ✅/❌ */
    cursor: pointer;
}

.flip-btn.check {
    color: green;
}

.flip-btn.cross {
    color: red;
}

.flip-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.flip-btn .lds-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.6); /* Adjust size to match icons */
}

.lds-ellipsis,
.lds-ellipsis div {
    box-sizing: border-box;
}
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
}
.lds-ellipsis div {
    position: absolute;
    top: 18px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 24px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 40px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}


/* Modal */
.modal-overlay { position: fixed; inset:0; background: rgba(0,0,0,.45); display:none; }
.modal { position: fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    width: 350px; max-width: 95%; background:#fff; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.2); display:none; }
.modal header, .modal footer { padding:10px 14px; background:#f5f5f5 }
.modal .body { padding:14px }
.modal h3 { margin:0; font-size:20px }
.modal .close { float:right; cursor:pointer; font-size:18px; line-height:1 }
.hidden { display:none !important; }
.error { color:#a00; margin-top:8px; }
input[type="radio"][name="status"] {
    width: 20px;
}

/* Status icons (no icon font needed) */
.status-icon { font-size:25px; font-weight:bold; cursor:pointer; }
.status-icon-2 { font-size:25px; font-weight:bold; }
.st-pending { color:#b8860b } /* amber */
.st-authorised { color:#2e7d32 } /* green */
.st-unauthorised { color:#c62828 } /* red */