/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Roboto:300,400,500,700,900');

body {
    background-color: #e5e5e5;
    font-size: 13px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h1 {
    font-size: 2em;
    font-weight: bold;
    color: #000000;
    line-height: 1.2em;
}


.vehicleInput{
    width:100px;
}

.contraRaisedButton{
    width:200px !important;
}

html, body, #main {
    margin: 0;
    height: 100%;
    width: 100%;
    font-size: 13px;
    font-family: 'Roboto';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* .spacerXSml {
    clear:both;
    height:8px;
} */
.spacerSml {
    clear:both;
    height:13px;
}
.spacerMed {
    clear:both;
    height:18px;
}
.spacerLrg {
    clear:both;
    height:23px;
}
.spacerXLrg {
    clear:both;
    height:28px;
}

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.styledTable td[data-col="select"] input[type="checkbox"] {
    width: 20px;
    height: 20px;
    display: inline-block;
    /* Optionally, add some margin or padding if needed */
    margin: 0 auto;
}

/* Target only the contra invoice select column */
.contraSelectColumn {
    text-align: right;
    padding-right: 20px;
}

/* Ensure the checkbox container is pushed to the right */
.contraSelectColumn .checkboxInput {
    margin-left: auto;
    /* Optionally add some spacing on the left if needed */
    margin-right: 10px;
}

#wageReportButton {
    width: 200px
}

#contraButton {
    width: 190px
}

img {
    display:block;
}

input:focus, .select2-container span:focus {
    outline: #FF4900;
    caret-color: #FF4900;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(155, 155, 155);
    opacity: 0.9;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(155, 155, 155);
    opacity: 0.9;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: rgb(155, 155, 155);
    opacity: 0.9;
}

input:focus::placeholder {
    opacity: 0.2;
}

input:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
    opacity: 0.2;
}

input:focus::-ms-input-placeholder { /* Microsoft Edge */
    opacity: 0.2;
}

fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

fieldset > div {
    margin: auto;
}

legend {
    margin: 20px auto;
    text-decoration: underline;
    font-family: sans-serif;
    font-size: 14px;
}

/* This causes issues to other forms that load select2... */
.select2-container {
    vertical-align: top;
    margin-right: 10px;
    min-width: 160px;
}

.filterField {
    margin-right: 10px;
    min-width: 160px;
    box-shadow: none;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    border: 2px solid #e5e5e5; /* add a grey border */
    border-radius: 5px; /* add rounded corners */
    background-color: white; 
    color: #000;
    padding-left: 2px;
}

.filterField.amount-input {
    min-width: 120px;
    padding-right: 10px;
    text-align: right;
}

/* Hide arrows in Chrome, Safari, Edge, Opera */
.filterField.amount-input::-webkit-outer-spin-button,
.filterField.amount-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.filterField:focus {
    outline: none; /* remove default outline */
    border-color: #FF4900; /* set border color to orange */
}

.notFound{
    margin-left:auto;
    margin-right: auto;
    margin-top:80px;
    padding:5px;
    display: table;
}

.notFound h1, .notFound h2{
    /* margin-right: auto;
    margin-left: auto; */
    display:block;
    text-align:center;
}

.notFound h1{
    font-size: 60px;
}

.notFound h2{
    font-size: 40px;
}

.styledTable tr.invalid td {
    background-color: #f8d7da !important; /* Ensure .invalid class takes precedence */
}

.tableHeader span.select2-container{
    margin-bottom:10px;
}


.select2-container .select2-selection--single {
    height: 44px;
    line-height: 44px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
}

.select2-container--default .select2-selection--single {
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    border-radius: 5px;
    border: 1px solid #f0f0f0;
}

.styledForm .select2-container--default .select2-selection--single {
    box-shadow: none;
    border: 2px solid #e5e5e5;
}

.styledForm input[type="number"] {
    border-radius: 5px;
    background-color: rgba(0,0,0,0);
    border: 2px solid #e5e5e5;
    padding: 5px;
}

.styledForm input[type="date"] {
    border-radius: 5px;
    background-color: rgba(0,0,0,0);
    border: 2px solid #e5e5e5;
    padding: 5px;
}

.animateFadeInUp {
    -webkit-animation: fadeInUp 1s;
    -moz-animation: fadeInUp 1s;
    -ms-animation: fadeInUp 1s;
    -o-animation: fadeInUp 1s;
    animation: fadeInUp 1s;
}

.animateFadeInDown {
    -webkit-animation: fadeInDown 1s;
    -moz-animation: fadeInDown 1s;
    -ms-animation: fadeInDown 1s;
    -o-animation: fadeInDown 1s;
    animation: fadeInDown 1s;
}

.animateFadeOutDown {
    -webkit-animation: fadeOutDown 1s;
    -moz-animation: fadeOutDown 1s;
    -ms-animation: fadeOutDown 1s;
    -o-animation: fadeOutDown 1s;
    animation: fadeOutDown 1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.animateFadeOutUp {
    -webkit-animation: fadeOutUp 1s;
    -moz-animation: fadeOutUp 1s;
    -ms-animation: fadeOutUp 1s;
    -o-animation: fadeOutUp 1s;
    animation: fadeOutUp 1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

.columns {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}

.columns .oneHalf {
    width: 50%;
}

.columns.spaced .oneHalf {
    width: calc(50% - 9px);

}

.columns.spaced.border .oneHalf:first-child {
    border-right: 1px solid #DDDDDD;
}

.columns.spaced{
    margin-bottom:10px;
    padding-bottom:10px;
}

.columns .oneThird {
    width: 33.333%;
}
.columns.spaced .oneThird {
    width: calc(33.333% - 9px);
}

.columns .oneFourth {
    width: 25%;
}
.columns.spaced .oneFourth {
    width: calc(25% - 13px);
}

.columns .threeFourths {
    width: 75%;
}
.columns.spaced .threeFourths {
    width: calc(75% - 13px);
}

.columns .twoThirds {
    width: 66.666%;
}
.columns.spaced .twoThirds {
    width: calc(66.666% - 9px);
}

.tableHeader .top5Header{
    font-size:15px;
    text-align:center;
}
.paginationContainer {
    margin: 5px 0;
}

.pagination {
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

.pagination .actionButton {
    padding: 4px;
    width: 30px;
    height: 30px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    border-radius: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #f0f0f0;
    font-size: 20px;
    margin-right: 5px;
    text-align: center;
    cursor: pointer;
}

.pagination .pageNumber, .pagination .pageNumber  {
    padding: 4px;
    width: 30px;
    height: 30px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    border-radius: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #f0f0f0;
    font-size: 16px;
    margin-right: 5px;
    text-align: center;
    cursor: pointer;
}

.pagination .pageNumber.selected {
    background-color: #009dfd;
    border: 1px solid #009dfd;
    color:#FFFFFF;
    cursor: auto;
}

.pagination .actionButton.disabled {
    background-color: rgb(167, 167, 167);
    border: 1px solid rgb(167, 167, 167);
    color: #3e4a5c;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination .actionButton:not(.disabled):not(.selected):hover, .pagination .pageNumber:not(.disabled):not(.selected):hover {
    background-color: #FF4900;
    border: 1px solid #FF4900;
    color: #FFFFFF;
}

.pagination .pageOption  {
    margin: 0 8px;
    font-size:20px;
}

#noteDetails{
    resize: none;
}

#matchInvoicesAndPaymentsContainer .payFullButton {
    background-color: #FF4900;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 90px;
}

#matchInvoicesAndPaymentsContainer .payFullButton:hover {
    background-color: #e54200;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

#matchInvoicesAndPaymentsContainer .amountMatchContainer {
    display: flex;
    align-items: center;
    gap: 12px; /* Add space between input and button */
}

#matchInvoicesAndPaymentsContainer .amountMatchContainer .amountInput {
    flex: 1;
    min-width: 100px;
    padding: 8px 10px;
    border-radius: 5px;
    border: 2px solid #e5e5e5;
}

#matchInvoicesAndPaymentsContainer .amountMatchContainer .amountInput:focus {
    border-color: #FF4900;
    outline: none;
}

#matchInvoicesAndPaymentsContainer .amountMatchContainer .payFullButton {
    flex: 0 0 auto;
}

.button:disabled {
    background-color: #cccccc; 
    cursor: not-allowed;
}

.button {
    background-color: #FF4900; 
    cursor: pointer;
}

/* Popup styling */
#paymentPopup {
    display: none;
    position: absolute; 
    top: 20%;
    left: 30%;
    width: 40%;
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

#paymentPopup .popup-header {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
    cursor: move;
}

#paymentPopup .popup-body {
    margin-bottom: 10px;
}

#paymentPopup button {
    background-color: #FF4900;
    color: #FFFFFF;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

#paymentPopup button:hover {
    background-color: #c94600;
}

/* #notePopup {
    display: none; 
    position: fixed;
    top: 50px;
    left: 50px;
    width: 600px;
    height: auto;
    max-height: 80%;
    z-index: 1000;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    overflow: auto;
} */

.popup-header {
    padding: 10px;
    background-color: #FF4900;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    position: relative; 
    cursor: move;
}

.closePopup span {
    position: absolute;
    top: 5px;
    right: 10px; 
    font-size: 18px;
    cursor: pointer;
    color: white;
}

#addNoteButtonPopup {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #FF4900; 
    color: white;
    border: 1px solid #FF4900;
    padding: 8px 15px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#addNoteButtonPopup:hover {
    background-color: #FF4900;
    color: white;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }
}

@keyframes ripple {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(8);
    }
}

@keyframes largeRipple {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(14);
    }
}


.styledForm label, .styledForm p {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

/* Style the file upload container */
.file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #ddd;
    padding: 8px 12px;
    border-radius: 5px;
    background: #fff;
    width: fit-content;
}

/* Hide the default file input */
#repair_image, #invoice_document {
    display: none;
}

/* Custom label to look like a button */
.custom-file-upload {
    background-color: #ff5722;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

/* Change hover effect */
.custom-file-upload:hover {
    background-color: #e64a19;
}

/* File name display */
#file-name, #invoice-document-name {
    font-size: 14px;
    color: #666;
}

/* Style the submit button */
.upload-button {
    background-color: #ff5722;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.upload-button:hover {
    background-color: #e64a19;
}

.styledForm input[type="submit"], .styledForm input[type="button"], .button{
    border-radius: 5px;
    background-color: #FF4900;
    padding: 16px 2px;
    color:#FFFFFF;
    border:none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.6s, width 0.6s, border-radius 0.6s, padding 0.6s;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-shadow: 0px 1px 0px rgba(18,18,18,0.40);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(0,0,0,0.2);
    border-left: 1px solid rgba(0,0,0,0);
    border-right: 1px solid rgba(0,0,0,0);
    min-width: 140px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.button span.hoverEffect {
    position: absolute;
    border-radius: 50%;
    background-color: #bb4100;
    width: 60px;
    height: 60px;
    opacity: 0;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    z-index: -1;
}

.button:hover span.hoverEffect:not(.large) {
    animation-name: ripple;
}

.button:hover span.hoverEffect.large {
    animation-name: largeRipple;
}

.button.disabled {
    background-color: #888888 !important;
    cursor: auto !important;
}

.styledForm input[type="submit"]:hover, .styledForm input[type="button"]:hover, .button:hover span.hoverEffect  {
    background-color: #c94600;
}

.styledForm input[type="submit"]:active, .styledForm input[type="button"]:active, .button:active span.hoverEffect  {
    background-color: #9b3600;
    border: 1px solid rgba(0,0,0,0.2);
    transition: background-color 0.2s;
    color: #DDDDDD;
}

.styledForm input[type="submit"].altButton, .styledForm input[type="button"].altButton, .button.altButton span.hoverEffect, .button.altButton{
    background-color: #009dfd;
}
.styledForm input[type="submit"].altButton:hover, .styledForm input[type="button"].altButton:hover, .button.altButton:hover span.hoverEffect {
    background-color: #0075be;
}
.styledForm input[type="submit"].altButton:active, .styledForm input[type="button"].altButton:active, .button.altButton:active span.hoverEffect {
    background-color: #00588f;
    border: 1px solid rgba(0,0,0,0.2);
    transition: background-color 0.2s;
}

a.actions.dropdown-toggle {
    background-color: #FF4900;
    color:#FFFFFF;
    border:none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.6s, width 0.6s, border-radius 0.6s, padding 0.6s;
    padding: 10px 10px;
    box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 8%);
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 13px;
    height: 40px;
    width: 130px;
}

.dropdown-btn .menu-item a {
    background-color: transparent !important;
    color: inherit !important;
    padding: 10px 15px;
    display: block;
    text-decoration: none;
}

.dropdown-btn .menu-item a:focus {
    outline: none;
    /* border-bottom: 2px solid #FF4900; */
}

.dropdown-btn .menu-item a:hover,
.dropdown-btn .menu-item a:focus {
    background-color: transparent !important;
    color: #FF4900 !important;
}

.styledForm input[type="reset"], .styledForm input[type="button"], .button{
    border-radius: 5px;
    background-color: #FF4900;
    color:#FFFFFF;
    border:none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.6s, width 0.6s, border-radius 0.6s, padding 0.6s;
    padding: 10px 10px;
    box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 8%);
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 13px;
    margin-right: 12px;
    height: 40px;
    width: 144px;
}

/* Custom styling for Add Credit Note Item button */
#addItem.credit-note-item {
    width: 180px !important; /* Wider than standard buttons */
    font-size: 13px;
    padding: 10px 10px;
}

.styledForm input[type="text"], .styledForm input[type="password"], .styledForm textarea {
    border-radius: 5px;
    background-color: rgba(0,0,0,0);
    border: 2px solid #e5e5e5;
    padding: 5px;
}

.styledForm input[readonly] {
    background-color: #eaeaea;
}

.styledForm textarea {
    height:70px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0);
    border: 2px solid #e5e5e5;
    padding: 5px;
    font-family: 'Roboto';
    resize: vertical;
}

.styledForm textarea[readonly],
.styledForm textarea:disabled {
    background-color: #eaeaea;
    cursor: default;
    resize: none;
}

.styledForm .inputRow {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    align-items: center;
}

.styledForm .inputRow.center {
    justify-content: center;
}

.styledForm .inputRow label:not(.checkLabel) {
    width: 180px;
    padding-top: 5px;
    padding-right: 20px;
    box-sizing: border-box;
    text-align: right;
}

.styledForm .inputRow.disabled input {
    background-color: #dadada;
}

.styledForm .inputRow a:not(.button) {
    text-decoration: underline;
}

.styledForm .inputRow input[type="checkbox"] {
    width: 16px;
    height: 16px; 
    margin: 0 5px; 
    vertical-align: middle; 
    cursor: pointer; 
    border: 1px solid #ccc; 
    background-color: white; 
    visibility: visible;
}

#loginContainer {
    background-color: #000;
    height: 100vh;
    overflow: hidden;
}

#loginContainer .backgroundImage {
    background-image: url(/assets/img/background.jpeg);
    background-size: cover;
    min-width: 100vw;
    min-height: 100vh;
    display: block;
    position: fixed;
    top: 0;
    transition: opacity 2s;
    transform: scaleX(-1);
    right: 0;
}

#loginContainer h1 {
    font-size: 52px;
    margin-bottom: 50px;
    color:#FFFFFF;
}

#loginSidebar {
    width: 400px;
    background-color: rgba(62,74,92,0.95);
    overflow: hidden;
    height: 100vh;
    position: relative;
    z-index: 1;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-animation: sidebarFade 0.8s;
    -moz-animation: sidebarFade 0.8s;
    -ms-animation: sidebarFade 0.8s;
    -o-animation: sidebarFade 0.8s;
    animation: sidebarFade 0.8s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

@keyframes sidebarFade {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

#sendPasswordResetForm {
    display:none;
    opacity: 1;
}

#updatePasswordForm {
    opacity: 100;
}

.sidebarForm {
    position: absolute;
    top: -5vh;
    left:0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 500px;
    width: 80%;
    opacity: 0;
    animation-delay: 1.1s;
    animation-fill-mode: forwards;
}

.sidebarForm label, .sidebarForm p {
    color:#FFFFFF;
    margin-bottom: 10px;
    font-size: 16px;
}

.sidebarForm .loginFieldContainer {
    position: relative;
    margin-bottom: 30px;
}

.sidebarForm .field.focus .icon {
    color: #FF4900;
}

.sidebarForm .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 15px;
    height: 17px;
    font-size: 16px;
    color:#CCCCCC;
    transition: color 0.5s;
    pointer-events: none;
}

.sidebarForm input[type="text"], .sidebarForm input[type="password"] {
    width: 100%;
    height: 50px;
    padding: 10px;
    padding-left: 50px;
    box-sizing: border-box;
    color:#FFFFFF;
    font-size: 16px;
    caret-color: #FF4900;
    font-weight: 500;
}

.sidebarForm input[type="text"]:focus, .sidebarForm input[type="password"]:focus {
    outline: 0;
}

.sidebarForm .button {
    width: 100%;
    margin-top: 30px;
    border-radius: 5px;
    font-weight: bold;
    /* padding: 21px 10px; */
    cursor: pointer;
    box-sizing: border-box;
}

.sidebarForm .forgotPassword {
     margin-bottom: 10px;
     font-size: 13px;
     color:#FFFFFF;
     text-decoration: underline;
     font-weight: 500;
}

.sidebarForm .field {
    transition: opacity 0.2s;
}

#loginContainer .field.noFocus {
    opacity: 0.3;
}

#loginContainer .field.focus {
    opacity: 1;
}

#loginContainer .noFocus {
    opacity: 0.8;
}

#loginContainer .focus {
    opacity: 1;
}

.sidebarForm .field input::placeholder {
    opacity: 1;
}

.sidebarForm .field input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    opacity: 1;
}

.sidebarForm .field input::-ms-input-placeholder { /* Microsoft Edge */
    opacity: 1;
}

.sidebarForm .field.focus input::placeholder {
    opacity: 0.6;
}

.sidebarForm .field.focus input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    opacity: 0.6;
}

.sidebarForm .field.focus input::-ms-input-placeholder { /* Microsoft Edge */
    opacity: 0.6;
}

#loginContainer .logo {
    position: absolute;
    bottom: 20px;
    right: 25px;
    z-index: 1;
}

#loginContainer .fa-spin {
    font-size: 40px;
    animation-duration: 0.75s !important;
  }

.sidebarForm .submitFormLoading {
    width: 60px;
    height: 60px;
    padding: 10px;
    border-radius: 30px;
    margin: 30px auto;
    cursor: auto;
}

#loginDashboard {
    display: none;
}

.loadingContainer {
    position: absolute;
    top:0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.submitLoginFormLoaded {
    width: 30px;
    height: 30px;
    padding: 10px;
    border-radius: 1000px;
    cursor: auto;
    background-color: #FF4900;
    position: absolute;
    z-index: 1;
    top: 62.5%;
    left: 176px;
    opacity: 0;
    pointer-events: none;
}

.submitLoginFormLoaded.animate {
    -webkit-animation: enlargeCircle 1.5s;
    -moz-animation: enlargeCircle 1.5s;
    -ms-animation: enlargeCircle 1.5s;
    -o-animation: enlargeCircle 1.5s;
    animation: enlargeCircle 1.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}

@keyframes enlargeCircle {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(125);
    }
}

.loadingContainer .loadingFadeOut {
    animation-fill-mode: none;
    transform: scale(125);
    -webkit-animation: fadeOutCircle 1s;
    -moz-animation: fadeOutCircle 1s;
    -ms-animation: fadeOutCircle 1s;
    -o-animation: fadeOutCircle 1s;
    animation: fadeOutCircle 1s;
    animation-fill-mode: forwards;
}

@keyframes fadeOutCircle {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

#mainMenu {
    position: relative;
    background-color: #3e4a5c;
    display: flex;
    color: #FFFFFF;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
    height: 70px;
    z-index: 150;
}

#mainMenu .logo {
    width: 115px;
    height: auto;
    padding: 8px
}

#mainMenu .menuItems {
    display: flex;
    padding-left: 0px;
    margin: 0px 10px;
    justify-content: flex-end;
    width: 100%;
    background-color: #3e4a5c;
}

.menuItems li {
    list-style: none;
    transition: background-color 0.5s;
    position: relative;
}

.menuItems li a {
    list-style: none;
    padding: 24px 12px;
    transition: color 0.2s;
    font-size: 14px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-shadow: 1px 1px 0px rgba(18,18,18,0.60);
    display:block;
    max-height: 21px;
}

.menuItems li ul li a {
    padding: 12px 14px;
    font-size: 12px;
    min-width: 100px;
}

.menuItems li a i {
    font-size: 20px;
    margin-right: 2px;
    color:#DDDDDD;
}

.menuItems li:hover > a {
    color: #FF4900;
    background-color: rgba(255,255,255,0.1);
}

.menuItems li:hover ul {
    display:block;
}

.menuItems li ul {
    display:none;
    background-color: #2d3642;
    width:100%;
    position: absolute;
    padding:0;
}

.menuItems li ul {
    width: auto;
}

.container {
    width:100%;
    padding: 30px;
    box-sizing: border-box;
    margin: 0 auto;
}

.containerPayment {
    width:30%;
    padding: 30px;
    box-sizing: border-box;
    margin: 0 auto;
}

.section {
    box-shadow: 1px 1px 7px 3px rgba(0,0,0,0.08);
    width:100%;
    border-radius: 10px; /* Ensure consistent rounded corners */
    background-color: #FFFFFF;
    padding:15px;
    box-sizing: border-box;
    margin-bottom: 18px;
}

.noPadding {
    padding: 0;
}

.salesIcon {
    background-color: rgba(255,85,0,0.2);
    color: #FF4900;
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block;
    text-align: center;
    font-size: 25px;
    margin-bottom: 10px;
    border-radius: 50px;
}

.chartContainer {
    display: flex;
    align-items: flex-end;
    position: relative;
    height: calc(100% - 18px);
}

.chartText {
    position: absolute;
    top: 15px;
    left: 15px;
}

.chartText h3 {
    font-size:20px;
}

.chartText h4 {
    font-size:12px;
    color:#888888;
}

.scrollGraph {
    padding: 15px;
    height: 460px;
    margin-bottom: 15px;
    overflow-x:hidden;
}

.tableHeader {
    background-color: #FFFFFF;
    padding: 20px;
    margin-bottom: -15px;
    z-index: 5;
    position: relative;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    box-shadow: 11px 0px 7px -8px rgba(0,0,0,0.08);
    width: 100%;
    box-sizing: border-box;
}

.tableHeader h3 {
    font-size: 20px;
    display: flex;
    align-content: center;
    height: 25px;
    line-height: 35px;
}

.tableHeader h3 i {
    font-size: 25px;
    color: #FF4900;
    margin-right: 5px;
}

.styledTable {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden; /* Keep default as hidden for safety */
    width: 100%;
    border: 1px solid #ddd; /* Ensure there's a border */
}

/* Allow overflow only for tables that have tooltips (invoice and other index lists) */
.styledTable:has(.overlay-text),
.listContainer .styledTable {
    overflow: visible;
}

.styledTable thead tr:first-child th:first-child {
    border-top-left-radius: 10px;
}

.styledTable thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

.styledTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.styledTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.styledTable tr {
    box-shadow: 1px 1px 7px 3px rgba(0,0,0,0.08);
}

/*
 ---START---

 THIS ID CAN BE MANIPULATED IN invoiceItemRow.phtml OTHERWISE IT WONT WORK!!!!!!! 
*/
.styledTable td #styleiiReg {
    width: 90px !important;
}
/* .styledTable td #styleiiName {
    width: 100% !important;
    display: block;
} */

.inputFullWidth {
    width: 100% !important;
}

/* .styledTable td #styleiiQty {
    width: 40px !important;
} */

.styledTable td #styleiiPrice {
    width: 80px !important;
}

/* END */

.styledTable th, .styledTable th span, .styledTable td {
    text-align: left;
    background-color: #FFFFFF;
    padding: 15px 10px 0 10px;
    padding-top: 15px;
    padding-bottom: 0;
    border:none;
}

.styledTable tr:last-child th, .styledTable tr:last-child th span, .styledTable td {
    text-align: left;
    background-color: #FFFFFF;
    padding:15px 10px;
    border-bottom: 2px solid #f0f0f0;
    font-size: 13px;
}

.styledTable tr th:first-child, .styledTable tr th:first-child span, .styledTable tr td:first-child {
    padding-left: 20px;
}

.styledTable th:last-child, .styledTable th:last-child span, .styledTable td:last-child {
    padding-right: 20px !important;
}

.styledTable tr:nth-child(n+2) th, .styledTable tr:nth-child(n+2) th span {
    padding-top: 5px;
}

.styledTable .styledTable tr:last-child td {
    border-bottom: none;
}

.styledTable th, .styledTable td {
    padding: 10px;
    text-align: left;
}

.styledTable th {
    color: rgb(165, 165, 165);
    font-weight: 400;
    position: relative;
    z-index: 25;
    /* cursor: pointer; */
}

#vehicleTotalDamageCost {
    text-align: right;
}

#vehicleTotalCost{
    text-align: right;
}

#styleVehicleAndDamageList {
    text-align: center;
    color: rgb(165, 165, 165);
}

/* Not sure about the below as it's styling columns that shouldn't be styled... will leave it just in case some are needed */
.styledTable td {
    width: auto;
    color: #000000;
    font-weight: bold;
}

.styledTable #vehiclesTotalColumn {
    width: auto;
    color: #000000;
    font-weight: bold;
}

.styledTable td input, 
.styledTable td select {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    height: 44px;
}

.styledTable td.price {
    text-align: right; 
}

.styledTable tbody tr:hover td {
    background-color: rgb(254, 245, 245);
    cursor: pointer;
}

.styledTable thead th:hover {
    cursor: default;
}

.styledTable .linkedItem td {
    cursor: pointer;
}

/* Make table cell links positioned for tooltip anchoring */
.styledTable td a {
  position: relative;
  display: inline-block;
}

.fa-file-pdf,
.fa-envelope {
  position: relative;
}

.overlay-text {
  position: absolute;
  padding: 6px;
  background-color: #eaeaea;
  color: #333;
  display: none; 
  z-index: 1000;
  white-space: nowrap;
  bottom: 100%; /* Position above the link */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px; /* Small gap above */
  pointer-events: none;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.fa-file-pdf:hover + .overlay-text,
.fa-envelope:hover + .overlay-text,
a:hover .overlay-text {
  display: block; 
}

.styledTable .totals td {
    background-color: #fff2e9;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #fff2e9;
    font-weight: bold;
    padding: 10px;
}

.styledTable .marshallTotals td {
    background-color: #fff2e9;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #fff2e9;
    font-weight: bold;
    padding: 10px;
}

.styledTable tr.totals:hover td {
    background-color: #fff2e9;
}

.styledTable .totals ~ .totals td {
    border-top: 1px solid #fff2e9;
    border-bottom: 1px solid #fff2e9;
}

.styledTable .hiddenRow {
    opacity: 0;
}

.sentInvoicesFilterForm {
    position: relative;
    z-index: 100;
}

.sentInvoicesFilterForm h1 {
    line-height: 1.7em;
}

.sentInvoicesFilterForm input[type="text"] {
    padding: 10px 5px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    width:200px;
    height: 43px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    border:1px solid #f0f0f0;
    font-size: 13px;
    margin-right:12px;
}

.sentInvoicesFilterForm input[type="number"] {
    padding: 10px 5px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    width:200px;
    height: 43px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    border:1px solid #f0f0f0;
    font-size: 13px;

    margin-right:12px;
}

.sentInvoicesFilterForm input[class="minMaxSearch"]{
    padding: 10px 5px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    width:100px;
    height: 43px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    border:1px solid #f0f0f0;
    font-size: 13px;

    margin-right:12px;
}

.sentInvoicesFilterForm input[type="date"] {
    padding: 10px 5px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    width:200px;
    height: 43px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    border:1px solid #f0f0f0;
    font-size: 13px;
    margin-right:12px;
    font-family: Arial;
    color: rgba(0, 0, 0, 0.5);
}

.searchForm {
    display: flex;
}

.searchForm h1 {
    line-height: 1.7em;
}

.searchHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 2px solid #e0e0e0;
}

.searchHeading h1 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.searchForm input[type="text"] {
    padding: 10px 5px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    width:200px;
    height: 43px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    border:1px solid #f0f0f0;
    font-size: 13px;
    margin-right:12px;
}

.searchForm input[type="number"] {
    padding: 10px 5px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    width:200px;
    height: 43px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    border:1px solid #f0f0f0;
    font-size: 13px;

    margin-right:12px;
}

.searchForm input[class="minMaxSearch"]{
    padding: 10px 5px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    width:100px;
    height: 43px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    border:1px solid #f0f0f0;
    font-size: 13px;

    margin-right:12px;
}

.searchForm input[type="date"] {
    padding: 10px 5px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    width:200px;
    height: 43px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-sizing: border-box;
    border:1px solid #f0f0f0;
    font-size: 13px;
    margin-right:12px;
    font-family: Arial;
    color: rgba(0, 0, 0, 0.5);
}

/* Give the .datePicker a calendar icon on the right */
.datePicker {
    background: url("/assets/img/calendar.png") no-repeat right 0.75rem center / 1rem auto;
    /* background-color: #fff; This is overriden by js css  */
    /* border: 2px solid #e5e5e5; This is overriden by js css */
    /* border-radius: 5px; This is overriden by js css */
    height: 44px;
    line-height: 44px;
    width: 140px;            
    /* padding: 0 2rem 0 0.75rem; This is overriden by js css */
    box-sizing: border-box;
    color: #333;
    cursor: pointer;
    font-size: 13px;
}
  
.datePicker:focus {
    outline: none;
    border-color: #FF4900;
}
  
  /* The jQuery UI datepicker popup needs a higher z-index otherwise this will overlap with the table */
.ui-datepicker {
    z-index: 9999 !important;
}

.searchHeading input.datePicker {
    margin-right: 0;
    text-align: center;
    cursor: pointer;
}

.searchForm input.transparentField {
    background-color: rgba(0,0,0,0);
    font-size: 2em;
    font-weight: bold;
    margin-top:1px;
    margin-left:20px;
    margin-right:20px;
    background-image:
    linear-gradient(45deg, transparent 50%, blue 50%),
    linear-gradient(135deg, blue 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    1em 1em;
  background-repeat: no-repeat;  
}

select.transparentSelect2Field, .transparentSelect2Field .select2-selection__rendered {
    display:none !important;
}

.transparentSelect2Field .select2-dropdown.select2-dropdown--below {
    width: 185px !important;
    overflow: hidden;
}

.transparentSelect2Field {
    background-color: rgba(0,0,0,0);
    border: 0;
    box-shadow: none;
    font-weight: bold;
    margin:0;
    position: absolute;
}

.transparentSelect2Field .select2-results__options {
    height: 60vh;
    overflow-y: scroll;
}

.searchForm input.transparentFieldYear {
    background-color: rgba(0,0,0,0);
    border: none;
    box-shadow: none;
    font-size: 2em;
    font-weight: bold;
    margin-top:1px;
}

select.transparentSelect2FieldYear, .transparentSelect2FieldYear .select2-selection__rendered {
    display:none !important;
}

.transparentSelect2FieldYear .select2-dropdown.select2-dropdown--below {
    width: 185px !important;
    overflow: hidden;
}

.transparentSelect2FieldYear {
    background-color: rgba(0,0,0,0);
    border: 0;
    box-shadow: none;
    font-weight: bold;
    margin:0;
    position: absolute;
}

.transparentSelect2FieldYear .select2-results__options {
    height: 60vh;
    overflow-y: scroll;
}

.selectedFranchise, .searchForm input.transparentField {
    color: rgb(233, 70, 5);
    cursor: pointer;
}

.selectedFranchise {
    padding: 10px 34px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    border-radius: 5px;
    background-color: rgba(0,0,0,0);
    box-sizing: border-box;
    border:1px solid #f0f0f0;
    margin-right:12px;
    background-image:
    linear-gradient(45deg, transparent 50%, blue 50%),
    linear-gradient(135deg, blue 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    1em 1em;
  background-repeat: no-repeat;
}

.selectedYear, .searchForm input.transparentFieldYear {
    color: rgb(233, 70, 5);
    cursor: pointer;
}

.selectedFranchise:hover, .searchForm input.transparentField:hover {
    color: rgb(255, 72, 0);
}

.selectedYear:hover, .searchForm input.transparentFieldYear:hover {
    color: rgb(255, 72, 0);
}

.styledTable .invoiceCredit td {
    color: red !important;
}

.report {
    min-height: 200px;
}

.carLoading > * {
    transition: opacity 0.4s;
    opacity: 0;
}

.carLoading:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 9998;
    pointer-events: none;
}

.carLoading:after, .carLoadingIcon {
    content: '';
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 150px;
    background-color: #fff;
    border-radius: 100px;
    padding: 10px;
    background-image:url('/assets/img/loader.gif');
    background-size:cover;
    background-position: center;
    margin-top: 50px;
    border:2px solid #FF4900;
    box-shadow: 4px 5px 6px 0px rgba(0,0,0,0.2);
}

.carLoading:after {
    position: fixed;
    margin: auto;
    top: 0;
    bottom:0;
    left:0;
    right:0;
    z-index: 9999;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.table-actions {
    display: flex;
    justify-content: end;
}

.table-actions > a, .table-actions > button {
    margin-right: 8px;
}


/* TAB Start */

.tab-content {
    display: none;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 20px;
}
  
.tab-content.active {
    display: block; 
}
  
.tab-link {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 15px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    transition: color 0.2s ease-in-out;
}
  
.tab-link {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 15px;
    border: none;
    background-color: #f2f2f2;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    border-radius: 5px 5px 0 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
  
.tab-link.active {
    color: #fff; 
    background-color: #FF4900; 
}
  
.filterButton {
    border: none;
    background-color: #6c757d;
    color: #fff;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.2s ease-in-out;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
  
.filterButton:hover {
    background-color: #FF4900; /* Change the background color on hover */
}

.spacer {
    height: 18px;
    width: 18px;
}

.pageHeader {
    /* margin-left: 10px; */
    margin-bottom: 15px;
    z-index: 5;
    border-radius: 5px 5px 0 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pageHeader h1 {
    font-size: 20px;
    /* display: flex; */
    align-content: center;
    height: 25px;
    line-height: 35px;
}

.pageHeader h1 i {
    font-size: 25px;
    color: #FF4900;
    margin-right: 5px;
}

.pageActions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* could be used in the future for secondary buttons */
.pageActions .button.secondary {
    background-color: #F5F5F5;
    color: #333;
    border: 1px solid #DDD;
}

.pageActions .button.secondary:hover {
    background-color: #E0E0E0;
}

.buttonList {
    padding: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 800px;
}

.buttonList .button {
    width:calc(50% - 60px);
    margin: 10px 30px;
    box-sizing: border-box;
}

.price {
    text-align: right !important;
}

.centerText {
    text-align: center !important;
}

.listContainer {
    max-height: calc(100vh - 70px);
    overflow-x: hidden;
    overflow-y: scroll;
}

.repairImages {
    display: flex;
    flex-wrap: wrap;
}

.repairImages > div {
    padding: 20px;
}

*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: rgb(78, 82, 88);
    -webkit-box-shadow: inset 0 0 4px 1px rgba(0,0,0,0.6);
}

/* Handle */
*::-webkit-scrollbar-thumb {
    background: rgb(158, 53, 4);
    border-radius: 5px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

*::-webkit-scrollbar-thumb:hover {
    background: rgb(218, 62, 0);
}

.transparent {
    opacity: 0.6;
}

.errorMessage {
    font-size: 16px;
    font-weight: bold;
    color: #F40000;
    margin-bottom:10px;
}

.infoMessage {
    font-size: 14px;
    color: #0c5460;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
}

.infoMessage i {
    margin-right: 5px;
}

.savedMessage {
    padding: 8px 18px;
    background-color: #34b125;
    font-size: 18px;
    border-radius: 0 0 5px 5px;
    width: 200px;
    text-align: center;
    color: #fff;
    border: 2px solid #008c1e;
    border-top: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.savedMessage::after {
    content: ' (click to dismiss)';
    font-size: 11px;
    opacity: 0.8;
    display: block;
    margin-top: 2px;
}

.flash-close-btn {
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.flash-close-btn:hover {
    opacity: 1;
}

@media (max-width : 1500px) {
    .scrollGraph {
        padding: 15px;
        height: 320px;
        margin-bottom: 15px;
        overflow-x: hidden;
    }
}

.styledForm .inputRow #customerSelect {
    width: 300px !important;
    display:inline-block !important;
    word-wrap: break-word !important;
}

.styledForm .inputRow #jobSelect {
    width: 300px !important;
    display:inline-block !important;
    word-wrap: break-word !important;
}

.styledForm .inputRow .inSelfBilling {
    width: 80px !important;
}

.styledForm .inputRow input[type="text"]#PONumber {
    width: 120px !important;
}

.styledForm .inputRow input[type="text"]#inName {
    width: 120px !important;
}

.styledForm .inputRow input[type="number"]#inAmount {
    width: 80px !important;
}

.styledTable tr #iiNameStyle {
    width: 800px !important;
}

.styledTable tr #iiQtyStyle {
    width: 400px !important;
}

.styledTable tr #iiAmountStyle {
    width: 20px !important;
}

@media (max-width : 1900px) {
    /*
    ---START---

    THIS ID CAN BE MANIPULATED IN invoice.phtml OTHERWISE IT WONT WORK!!!!!!! 
    */
    .styledTable tr #iiNameStyle {
        width: 860px !important;
    }
    
    .styledTable tr #iiQtyStyle {
        width: 680px !important;
    }
    
    .styledTable tr #iiAmountStyle {
        width: 20px !important;
    }

    /* END */
}

@media (min-width: 1000px) and (max-width: 1700px){

    /*
    ---START---

    Payment system container styling! 
    */
    .containerPayment {
        width: 52%;
        padding: 30px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    /* END */
}


@media (min-width: 800px) and (max-width : 999px) {
    /*
    ---START---

    Payment system container styling! 
    */
    .containerPayment {
        width: 60%;
        padding: 30px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    /* END */
}

@media (min-width: 640px) and (max-width : 799px) {
    /*
    ---START---

    Payment system container styling! 
    */
    .containerPayment {
        width: 80%;
        padding: 30px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    /* END */
    
    form {
       display: contents !important;
    }
}

@media (min-width: 501px) and (max-width : 639px) {
    /*
    ---START---

    Payment system container styling! 
    */
    .containerPayment {
        width: 80%;
        padding: 30px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    /* END */
    
    form {
       display: contents !important;
    }
}

@media (max-width : 500px) {
    /*
    ---START---

    Payment system container styling! 
    */
    .containerPayment {
        width: 100%;
        padding: 30px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    /* END */

    form {
       display: contents !important;
    }
}

#columnControlButton a {
    color: white;
}

#columnControlButton {
    border: none;
    background-color: #6c757d;
    padding: 10px 15px;
    font-size: 16px;
    transition: background-color 0.2s ease-in-out;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

#columnControlButton:hover {
    background-color: #FF4900;
}
  
#columnControl {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    background-color: white;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);
    padding: 10px;
    min-width: 150px;
    display: none; 
}

#columnControl li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#columnControl li label {
    display: block;
    padding: 8px 12px;
    cursor: pointer;
    color: #333;
}

#columnControl li label:hover,
#columnControl li label:focus {
    background-color: #f0f0f0;
    color: #FF4900; 
    outline: none;
}

#columnControl li label input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;
}

.columnControlLabel {
    display: flex;
    justify-content: space-between;
}

.smallButton {
    padding: 8px 8px;
    min-width: auto;
    max-width: 40px;
    margin: 5px;
}

.rowButton{
    margin-left: 180px;
    z-index: 1;
}

.dropdown {
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
}
  
.dropdown .menu {
    animation: slide-down .15s ease 1;
    display: none;
    left: 0;
    max-height: 50vh;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid #CCCCCC;
}
  
.dropdown.dropdown-right .menu {
    left: auto;
    right: 0;
}
  
.dropdown.active .menu,
.dropdown .dropdown-toggle:focus + .menu,
.dropdown .menu:hover {
    display: block;
}
  
.dropdown .btn-group .dropdown-toggle:nth-last-child(2) {
    border-bottom-right-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
}
  
.table-actions .dropdown-btn {
    margin-left: 0.5rem;
    border-radius: 0.1rem;
    background-color: #007bff;
    color: #FFFFFF;
    border: 1px solid #007bff;
}
  
.table-actions .dropdown-btn:hover {
    background-color: #0069d9;
    color: #FFFFFF;
    border: 1px solid #0062cc;
}
  
:root .export-menu {
  min-width: 100px;
}

:root .export .export-link {
  font-size: 1.2rem;
}

.menu {
  box-shadow: 0 0.05rem 0.2rem rgba(28, 37, 66, 0.3);
  background: #fff;
  border-radius: 0.1rem;
  list-style: none;
  margin: 0;
  min-width: 180px;
  padding: 0.5rem;
  transform: translateY(0.2rem);
  z-index: 300;
}

.menu .menu-item {
  margin-top: 0;
  padding: 0 0.5rem;
  position: relative;
  text-decoration: none;
}

.menu .menu-item > a {
  border-radius: 0.1rem;
  color: inherit;
  display: block;
  margin: 0 -0.5rem;
  padding: 0.2rem 0.5rem;
  text-decoration: none;
}

.menu .menu-item > a:focus, .menu .menu-item > a:hover {
  background: #80c1e5;
  color: #2b97d4;
}

.menu .menu-item > a:active, .menu .menu-item > a.active {
  background: #80c1e5;
  color: #2b97d4;
}

input[type=checkbox] {
    visibility: hidden;
}

.checkboxInput label:hover::after {
    opacity: 0.5;
}

.checkboxInput input[type=checkbox]:checked + label:after {
    opacity: 1;;
}

.checkboxInput input[type=checkbox]:checked + label {
    background:#FF4900;
}

.checkboxInput label:after {
    opacity: 1;
    content: '';
    /* position: absolute; */
    width: 9px;
    height: 5px;
    background: transparent;
    /* top: 6px; */
    /* left: 7px; */
    border: 3px solid #FFFFFF;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

/* Ensure the checkbox column cells are properly aligned */
.styledTable th[data-col="select"], 
.styledTable td[data-col="select"] {
    text-align: center;
    vertical-align: middle;
    width: 50px;
}

/* Center the checkbox container */
.styledTable th[data-col="select"] .checkboxInput, 
.styledTable td[data-col="select"] .checkboxInput {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style the checkbox label */
.checkboxInput label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    position: relative;
    margin: 0;
}

/* Ensure the input checkbox is properly contained */
.checkboxInput input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Show checkmark when checked */
.checkboxInput input[type="checkbox"]:checked + label {
    background: #FF4900;
    border-color: #FF4900;
}

.checkboxInput {
    width: 25px;
    position: relative;
}

.menu .menu-item .form-checkbox,
.menu .menu-item .form-radio,
.menu .menu-item .form-switch {
  margin: 0.1rem 0;
}

.menu .menu-item + .menu-item {
  margin-top: 0.2rem;
}

ul.menu > li.menu-item {
    background-color: unset !important;
    width: auto;
}

/* Style for clearFilters */
.clearFilters {
    border: none;
    background-color: #6c757d;
    color: #fff;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease-in-out;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
  
.clearFilters:hover {
    background-color: #FF4900;
}
  
.searchForm input.filter_cuCreditLimit {
    width: 100px;
}

.searchForm input.filter_cuBalance {
    width: 100px;
}

/* Payment */
/* Variables */

  .checkout body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    align-content: center;
    height: 100vh;
    width: 100vw;
  }
  .checkout form {
    width: 30vw;
    min-width: 500px;
    align-self: center;
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),
      0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 7px;
    padding: 40px;
  }
  .checkout input {
    border-radius: 6px;
    margin-bottom: 6px;
    padding: 12px;
    border: 1px solid rgba(50, 50, 93, 0.1);
    height: 44px;
    font-size: 16px;
    width: 100%;
    background: white;
  }
  .result-message {
    line-height: 22px;
    font-size: 16px;
  }
  .result-message a {
    color: rgb(89, 111, 214);
    font-weight: 600;
    text-decoration: none;
  }
  .hidden {
    display: none;
  }
  #card-error {
    color: rgb(105, 115, 134);
    text-align: left;
    font-size: 13px;
    line-height: 17px;
    margin-top: 12px;
  }
  #card-element {
    border-radius: 4px 4px 0 0 ;
    padding: 12px;
    border: 1px solid rgba(50, 50, 93, 0.1);
    height: 44px;
    width: 100%;
    background: white;
    box-sizing: border-box;
  }
  #payment-request-button {
    margin-bottom: 32px;
  }
  /* Buttons and links */
  .checkout button {
    background: #5469d4;
    color: #ffffff;
    font-family: Arial, sans-serif;
    border-radius: 0 0 4px 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
    width: 100%;
  }
  .checkout button:hover {
    filter: contrast(115%);
  }
  .checkout button:disabled {
    opacity: 0.5;
    cursor: default;
  }
  /* spinner/processing state, errors */
  .spinner,
  .spinner:before,
  .spinner:after {
    border-radius: 50%;
  }
  .spinner {
    color: #ffffff;
    font-size: 22px;
    text-indent: -99999px;
    margin: 0px auto;
    position: relative;
    width: 20px;
    height: 20px;
    box-shadow: inset 0 0 0 2px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
  .spinner:before,
  .spinner:after {
    position: absolute;
    content: "";
  }
  .spinner:before {
    width: 10.4px;
    height: 20.4px;
    background: #5469d4;
    border-radius: 20.4px 0 0 20.4px;
    top: -0.2px;
    left: -0.2px;
    -webkit-transform-origin: 10.4px 10.2px;
    transform-origin: 10.4px 10.2px;
    -webkit-animation: loading 2s infinite ease 1.5s;
    animation: loading 2s infinite ease 1.5s;
  }
  .spinner:after {
    width: 10.4px;
    height: 10.2px;
    background: #5469d4;
    border-radius: 0 10.2px 10.2px 0;
    top: -0.1px;
    left: 10.2px;
    -webkit-transform-origin: 0px 10.2px;
    transform-origin: 0px 10.2px;
    -webkit-animation: loading 2s infinite ease;
    animation: loading 2s infinite ease;
  }
  @-webkit-keyframes loading {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes loading {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @media only screen and (max-width: 800px) {
    #mainMenu {
        position: relative;
        background-color: #3e4a5c;
        display: flex;
        color: #FFFFFF;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
        height: 70px;
        z-index: 150;
    } 

    form {
        position: relative;
        display: inline-table;
    }
  }

#downloadForm{
    display:none;
}

#vehicleTable {
    padding-top: 10px;
    padding-bottom: 10px;
}

.repairImage:hover{
    cursor: pointer;
}

.popup {
	display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 999;
    width: 100%;
    height: 100%;
}

.popup .popupContent {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 10px !important; /* Apply rounded corners */
    /* Remove the border-radius to fix white background issues */
    /* border-radius: 0;  */
    margin: auto;
    transition: 1s;
    overflow: hidden;
}

.popup .popupContent .popupHead {
	margin-top: -1px;
    width: 100%;
    border-top-left-radius: 10px !important;;
    border-top-right-radius: 10px !important;;
    height: 36px;
    background-color: #FF4900;
    color: #FFFFFF;
}

.popup .popupContent .popupHead.negative {
    background: rgb(255, 133, 133);
    background: -moz-linear-gradient(left, rgb(216, 49, 49) 1%, rgb(255, 133, 133) 100%);
    background: -webkit-linear-gradient(left, rgb(216, 49, 49) 1%,rgb(255, 133, 133) 100%);
    background: linear-gradient(to right, rgb(216, 49, 49) 1%,rgb(255, 133, 133) 100%);
}

.popup .popupContent .popupHead .closePopup span {
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 14px;
    color: #ffffff;
    background-color: #ff0000;
    border-radius: 100%;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
}

.popup .popupContent .popupBody {
    height: calc(100% - 30px);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
    background-color: #DDDDDD;
}

.popup .popupContent .popupBody.noFooter {
	height: calc(100% - 30px);
}

.popup-body .inputRow label {
    display: block; 
    margin-bottom: 8px; 
    font-size: 14px;
    font-weight: bold;
    color: #333; 
    box-sizing: content-box !important;
    margin-left: 20px;
    width: 20px !important;
}

.popup-body .inputRow {
    margin-bottom: 20px; 
    width: 100%;
}

.popup-body input[type="date"],
.popup-body textarea {
    width: 90%; 
    padding: 10px;
    margin: 15px auto;  
    display: block; 
    border: 1px solid #ccc;  
    border-radius: 5px;
    font-size: 14px;
    background-color: white;
}

.popup .popupContent .popupFooter {
    box-shadow: 0px -2px 20px -8px rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 60px;
    border-bottom-left-radius: 10px !important;;
    border-bottom-right-radius: 10px !important;;
    padding: 10px; 
    box-sizing: border-box;
    text-align: center; 
    background-color: #f1f1f1;
}

.popup .popupContent .popupFooter button {
    background-color: #FF4900;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    width: 150px; 
    transition: background-color 0.3s ease;
}

.popup .popupContent .popupFooter button:hover {
    background-color: #c94600; 
}

.popup .popupContent .popupHead .popupTitle {
    line-height: 36px;
    font-size: 16px;
    padding-left: 16px;
}

.popup .popupContent .popupHead .downloadPhoto span {
    position: absolute;
    right: 40px;
    top: 6px;
    font-size: 14px;
    color: #ffffff;
    background-color: #038c3e;
    border-radius: 100%;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
}

.appPopupContainer {
    background-color:#fff;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 10px !important;
    color:#111;
    display:none;
    height: auto !important;
    width: auto !important;
}

.appPopupContainer .appPopupHead {
	/* margin-top: -1px; */
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 36px;
    background-color: #FF4900;
    color: #FFFFFF;
}

.appPopupContainer .appPopupFooter {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.appPopupContainer .appPopupHead .appPopupTitle {
    line-height: 36px;
    font-size: 16px;
    padding-left: 16px;
}

.appPopupContainer .appPopupHead .appPopupClose span {
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 14px;
    color: #ffffff;
    background-color: #ff0000;
    border-radius: 100%;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
}

.appPopupContent {
    padding: 40px;
    padding-top: 30px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
    background-color: #DDDDDD;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.popupheading {
    margin:0px 0px 20px 0px;
    font-size:20px;
    font-weight:400;
    color:#303030;
    font-style:italic;
    text-align: center;
}

.jconfirm-title {
    font-weight: bold;
}

.jconfirm-title i {
    color: #FF4900;
    margin-right: 5px;
}

.jconfirm-content {
    font-size: 14px;
}

.jconfirm-buttons button {
    text-transform: none !important;
}

.img-wrap {
    position: relative;
}

.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
}

.deleteImg span {
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 28px;
    color: #ff0000;
    border-radius: 100%;
    width: 22px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
}

.auditTrailRow.exported td{
    background-color: #f2cc74;
}

.paymentLinkRow.paid td{
    background-color: #f2cc74;
}

label.checkLabel.excludeCheck {
    background-color: #FFFFFF;
}

a#hideExportedButton, a#showExportedButton {
    background-color: #9b3600;
}

#hideExportedButton{
    line-height: 90%;
}

.afterExport{
    display: none;
}

.tdFlex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
}

.greyIcon{
    color: #3e4a5c;
    font-size: 18px
}

.customerLegend{
    text-align: center;
}

.addLocationButton{
    margin-left: calc(50% - 65px);
}

.addEmailButton{
    margin-left: calc(50% - 65px);
}

#sendInvoiceButton{
    float: right;
    margin-bottom: 10px;
}

.tinyButton {
    padding: 4px 4px;
    min-width: auto;
    max-width: 30px;
    margin: 5px;
    max-height: 30px;
    font-size: 10px;
}

/* Style the "No damages recorded" message */
#styleVehicleAndDamageList {
    text-align: center;
    padding: 15px;
    color: #777;
    font-style: italic;
}

/* Fix the popup content to handle dynamic content better */
.appPopupContent {
    max-height: 80vh;
    overflow-y: auto;
    padding: 30px 40px 40px;
}

/* Style the Add Damage button to match other buttons */
#addDamageButton {
    display: inline-block;
    margin: 10px 0;
    text-align: center;
}

/* Ensure consistent spacing in the vehicle form */
.inputRow {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.inputRow label {
    width: 150px;
    text-align: right;
    padding-right: 15px;
}

/* Make damage input fields smaller to match vehicle input fields */
#damagesTable input[type="text"],
#damagesTable input[type="number"] {
    width: 100px !important;
}

/* Make table headers more compact */
#damagesTable thead th {
    background-color: #f5f5f5;
    padding: 2px 4px;
    text-align: left;
    font-weight: 500;
    font-size: 12px;
}

/* Make table cells more compact */
#damagesTable tbody td {
    padding: 3px 5px;
    vertical-align: middle;
}

/* Make the delete button smaller */
#damagesTable .tinyButton {
    padding: 2px;
    margin: 2px;
    max-width: 24px;
    max-height: 24px;
}

/* Make the description field wider than the cost fields */
#damagesTable td:first-child input[type="text"] {
    width: 100px !important;
}

/* Style the dropdown to match vehicle input fields */
#damagesTable select {
    width: 120px !important;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
    box-sizing: border-box;
    height: 29px;
    background-color: white;
    appearance: menulist;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
}

/* Add consistent styling for all form elements */
.inputRow input,
.inputRow select,
#damagesTable input,
#damagesTable select {
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Roboto';
    height: 29px;
    padding: 4px;
    box-sizing: border-box;
    background-color: white;
}

/* Set specific widths for damage table elements */
#damagesTable select {
    width: 120px !important;
    appearance: menulist;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
}

#damagesTable input[type="number"] {
    width: 80px !important;
}

/* Make table headers and cells compact */
#damagesTable thead th {
    background-color: #f5f5f5;
    padding: 2px 4px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
}

#damagesTable tbody td {
    padding: 3px 5px;
    vertical-align: middle;
}

/* Make the delete button smaller */
#damagesTable .tinyButton {
    padding: 2px;
    margin: 2px;
    max-width: 24px;
    max-height: 24px;
}

/* Style the multiple select dropdown for damages */
.damage-description-select {
    width: 180px !important;
    height: 29px !important;
}

/* Ensure the damage description select is properly styled */
#damagesTable select.damage-description-select {
    width: 180px !important;
    height: 29px !important;
}

/* Style for Select2 dropdown */
.select2-container--default .select2-selection--multiple {
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 29px;
    font-size: 12px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 5px;
    margin: 2px;
    font-size: 12px;
}

.select2-container--default .select2-results__option {
    padding: 4px 8px;
    font-size: 12px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ccc;
    font-size: 12px;
}

.select2-dropdown {
    border: 1px solid #ccc;
}

/* Custom dropdown styling */
.custom-dropdown-container {
    position: relative;
    display: inline-block;
    width: 100%;
    z-index: 1;
}

.custom-dropdown-container:focus-within {
    z-index: 10;
}

.dropdown-display {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 28px 5px 10px; /* Increased right padding for arrow */
    background-color: white;
    cursor: pointer;
    height: 29px;
    box-sizing: border-box;
    font-size: 13px;
    display: flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.2s ease-in-out;
}

.dropdown-display:hover {
    border-color: #aaa;
}

.dropdown-display:focus {
    outline: none;
    border-color: #66afe9;
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.5);
}

.dropdown-display:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 12px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #888;
    transition: transform 0.2s ease;
}

.dropdown-display[aria-expanded="true"]:after {
    transform: rotate(180deg); /* Rotate arrow when dropdown is open */
}

.dropdown-list {
    position: fixed; /* Fixed position relative to viewport */
    width: 180px;
    max-height: 200px;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 999999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: none;
    padding: 2px 0;
    margin-top: 2px;
}

/* Specifically for dropdowns in popups */
.popup .dropdown-list,
.appPopupContent .dropdown-list {
    /* Ensure dropdowns in popups are displayed correctly */
    z-index: 1000000; /* Even higher z-index */
}

.dropdown-item {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
    font-size: 13px;
}

.dropdown-item.selected {
    background-color: #f0f0f0;
    font-weight: bold;
}

.dropdown-item.selected:before {
    content: '✓';
    position: absolute;
    right: 10px;
}

.dropdown-item:hover {
    background-color: #f5f5f5;
}

.dropdown-item:focus {
    outline: none;
    background-color: #e9f5ff;
}

.dropdown-done-btn {
    border-top: 1px solid #ddd;
    text-align: center;
    font-weight: bold;
    background-color: #f8f8f8;
    padding: 8px 10px;
    transition: background-color 0.2s ease;
}

.dropdown-done-btn:hover {
    background-color: #eeeeee;
}

/* Add keyboard focus indicator */
.dropdown-list:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5);
}

/* Remove Select2 styles if they're still being applied */
/* Hide select2 only in damage dropdowns */
#damagesTable .select2-container,
.custom-dropdown-container .select2-container {
    display: none !important;
}

/* Ensure all other select2 containers are properly displayed */
.select2-container:not(#damagesTable .select2-container):not(.custom-dropdown-container .select2-container) {
    display: inline-block !important;
}

.nominalCodeSelect {
    max-width: 220px !important;
    width: 220px !important;
}

.nominalCodeSelect + .select2-container {
    max-width: 220px !important;
    width: 220px !important;
}

.price.debit {
    color: #e74c3c;
    font-weight: bold;
}

.price.credit {
    color: #27ae60;
    font-weight: bold;
}

/* New styles for repair form elements that are extending too far */
.styledForm .inputRow select[name="repair[customer_id]"],
.styledForm .inputRow select[name="repair[franchise_id]"] {
    width: 165px !important;
    max-width: 50%;
    display: inline-block !important;
    word-wrap: break-word !important;
}

.styledForm .inputRow textarea[name="repair[notes]"] {
    width: 300px !important;
    max-width: 50%;
    resize: vertical;
}

.styledForm .inputRow .inSelfBilling {
    width: 80px !important;
}

.no-click {
    cursor: default !important;
    background-color: #f5f5f5 !important;
    color: #666 !important;
}

.no-click:hover {
    background-color: #f5f5f5 !important;
}

.no-click td {
    cursor: default !important;
}

.repair-completed tbody tr {
    cursor: default !important;
    pointer-events: none;
    opacity: 0.9;
}

.repair-completed tbody tr:hover td {
    background-color: inherit !important;
}

/* Existing no-click styles enhancement */
.no-click {
    cursor: default !important;
    pointer-events: none;
}

.no-click:hover {
    cursor: default !important;
}

.no-click td {
    background-color: inherit !important;
}

/* Add styles for the completed repair table */
.repair-completed-table {
    position: relative;
}

.repair-completed-table::after {
    content: "Completed - Read Only";
    position: absolute;
    top: -24px;
    right: 0;
    background-color: #f5f5f5;
    color: #555;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #ddd;
}

/* Style for completed repair images section */
.repair-completed-images {
    position: relative;
}

.repair-completed-images::after {
    content: "Completed - Read Only";
    position: absolute;
    top: -24px;
    right: 0;
    background-color: #f5f5f5;
    color: #555;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #ddd;
}

/* Styles for disabled input fields */
.disabled-field,
input[readonly],
select:disabled,
input:disabled {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #777 !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* Ensure disabled Select2 elements have proper styling */
.select2-container--disabled .select2-selection--single,
select:disabled + .select2-container .select2-selection--single,
select[disabled] + .select2-container .select2-selection--single {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #777 !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

.select2-container--disabled .select2-selection--single .select2-selection__rendered,
select:disabled + .select2-container .select2-selection--single .select2-selection__rendered,
select[disabled] + .select2-container .select2-selection--single .select2-selection__rendered {
    color: #777 !important;
}

/* Style for fields that remain editable even on paid invoices */
.editable-field {
    border-left: 3px solid #3a87ad !important;
    background-color: #f8fbfd !important;
}

/* Style for Select2 elements that contain editable fields */
.select2-container--default .selection:has(+ select.editable-field) .select2-selection,
select.editable-field + .select2-container .select2-selection {
    border-left: 3px solid #3a87ad !important;
    background-color: #f8fbfd !important;
}

/* Editable field marker text */
.editable-field-marker {
    display: inline-block;
    color: #777;
    font-size: 11px;
    font-style: italic;
    margin-left: 8px;
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Special handling for the editable marker next to select fields */
select.editable-field + .editable-field-marker,
.select2-container + .editable-field-marker {
    position: absolute;
    top: 9px;
    margin-left: 10px;
    z-index: 10;
    background-color: rgba(245, 245, 245, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Ensure date fields look properly disabled */
input[type="text"].dateTimePicker:disabled,
input[type="text"].datePicker:disabled,
input[type="text"].dateTimePicker[readonly],
input[type="text"].datePicker[readonly] {
    background-color: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #777 !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}

/* For payment information on paid invoices */
.paid-invoice-info {
    font-weight: bold;
    color: #28a745;
}

/* Payment Popup Styles */
.payments-popup {
    padding: 20px;
}

.payments-popup h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}

.payment-summary {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 4px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    justify-content: space-between;
}

.summary-item {
    margin-right: 30px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-item .value {
    font-size: 1.2em;
    font-weight: bold;
}

.summary-item .label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #666;
}

.info-message {
    padding: 15px;
    background-color: #e8f4ff;
    border-left: 4px solid #4a90e2;
    border-radius: 3px;
    margin: 20px 0;
}

.info-note {
    padding: 10px 15px;
    background-color: #fff8e1;
    border-left: 4px solid #ffca28;
    border-radius: 3px;
    margin: 15px 0;
    font-size: 14px;
}

.info-note .fas {
    margin-right: 5px;
    color: #999;
}

.synthetic-payment {
    background-color: #f8f9fa;
}

.synthetic-payment td {
    color: #555;
}

#deleteConfirmationDialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1001;
    width: 300px;
    text-align: center;
}

#deleteConfirmationDialog .button-group {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

#confirmDelete {
    background-color: #e74c3c;
}

#confirmDelete:hover {
    background-color: #c0392b;
}

#cancelDelete {
    background-color: #7f8c8d;
}

#cancelDelete:hover {
    background-color: #636e72;
}

.successMessage {
    background-color: #d4edda;
    color: #155724;
    padding: 10px 15px;
    border-radius: 4px;
    margin: 15px 0;
    border-left: 4px solid #28a745;
    position: relative;
    cursor: pointer;
}

.errorMessage {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px 15px;
    border-radius: 4px;
    margin: 15px 0;
    border-left: 4px solid #dc3545;
    position: relative;
    cursor: pointer;
}

/* Flash message specific styling - appears at top of screen */
.errorMessage.flash-message {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: auto;
    min-width: 300px;
    max-width: 600px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin: 0;
}

.button.disabled,
.smallButton.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Payment Popup Positioning */
#paymentsPopup {
    max-width: 90%;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-radius: 5px;
    overflow: hidden;
}

/* Ensure popup containers are positioned correctly */
#paymentsPopup.appPopupContainer,
#paymentsPopup .appPopupContainer,
body > div#paymentsPopup,
#paymentPopup.appPopupContainer,
#paymentPopup .appPopupContainer,
body > div#paymentPopup,
#refundPopup.appPopupContainer,
#refundPopup .appPopupContainer,
body > div#refundPopup,
#createInvoicePopup.appPopupContainer,
#createInvoicePopup .appPopupContainer,
body > div#createInvoicePopup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 90vh;
    overflow: auto;
}

/* Show X button inside Add Payment header */
#paymentPopup .appPopupClose {
    display: block !important;
}

#paymentPopup.appPopupContainer {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Payment Error Popup Styles */
.payments-error-popup {
    padding: 20px;
    text-align: center;
}

.payments-error-popup h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
    margin: 20px 0;
    border-left: 4px solid #dc3545;
    text-align: left;
}

.error-message i {
    font-size: 18px;
    margin-right: 8px;
    vertical-align: middle;
}

.button-group {
    margin-top: 20px;
}

.button.smallButton.disabled {
    border: 1px solid #ddd;
    opacity: 1;
    padding: 10px 10px;
    box-shadow: none;
}

#deleteConfirmationDialog {
    z-index: 9999 !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #333;
    padding: 20px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    width: 300px;
    text-align: center;
    border-radius: 4px;
}

#deleteConfirmationDialog p {
    margin-bottom: 15px;
    font-size: 14px;
}

#deleteConfirmationDialog .button-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

/* Note: .popup class already has position: fixed in line 2769 */
/* Only override position for payments-popup, not all popups */
.payments-popup {
    position: relative;
}

/* Ensure image popup stays fixed and centered (JS controls display) */
#imagePopup {
    position: fixed !important;
}

/* Center the popup content within the fixed overlay */
#imagePopup .popupContent {
    margin: auto;
}

.successMessage {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
    padding: 15px;
    border-radius: 4px;
    margin: 10px 0;
}

.errorMessage {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
    padding: 15px;
    border-radius: 4px;
    margin: 10px 0;
}

#paymentsPopup {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

#paymentsPopup.appPopupContainer,
#addPaymentPopup.appPopupContainer {
    background-color: rgba(0, 0, 0, 0.4);
}

#paymentsPopup.appPopupContainer,
#paymentsPopup {
    z-index: 100001;
}

/* Month dropdown styling - matches selectedYear and selectedFranchise pattern */
.selectedMonth {
    color: rgb(233, 70, 5);
    cursor: pointer;
    padding: 10px 34px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    border-radius: 5px;
    background-color: rgba(0,0,0,0);
    box-sizing: border-box;
    border: 1px solid #f0f0f0;
    margin-right: 12px;
    background-image:
        linear-gradient(45deg, transparent 50%, blue 50%),
        linear-gradient(135deg, blue 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px),
        100% 0;
    background-size:
        5px 5px,
        5px 5px,
        1em 1em;
    background-repeat: no-repeat;
    display: inline-block;
    min-width: 140px;
    text-align: center;
}

.selectedMonth:hover {
    color: rgb(255, 72, 0);
}

/* Month dropdown styling - matches datePicker pattern for consistency */
.selectedMonth {
    color: rgb(233, 70, 5);
    cursor: pointer;
    background: url("/assets/img/calendar.png") no-repeat right 0.75rem center / 1rem auto;
    background-color: rgba(0,0,0,0);
    height: 44px;
    line-height: 44px;
    width: 140px;
    box-sizing: border-box;
    font-size: 13px;
    padding: 0 2rem 0 0.75rem;
    border: none;
    margin-right: 12px;
    text-align: center;
    display: inline-block;
}

.selectedMonth:hover {
    color: rgb(255, 72, 0);
}

/* Month dropdown Select2 styling to match transparent theme */
#selectedMonth + .select2-container .select2-dropdown {
    background-color: #FFFFFF;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    width: 140px !important;
    min-width: 140px !important;
}

#selectedMonth + .select2-container .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
    padding: 2px 0;
}

#selectedMonth + .select2-container .select2-results__option {
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.2;
    border-bottom: 1px solid #f8f8f8;
}

#selectedMonth + .select2-container .select2-results__option:hover {
    background-color: #f0f0f0;
}

#selectedMonth + .select2-container .select2-results__option:last-child {
    border-bottom: none;
}

/* Override the 60vh height from transparentSelect2Field for month dropdown */
#selectedMonth + .select2-container .select2-results__options {
    height: 200px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* Additional override with even higher specificity */
#selectedMonth.transparentSelect2Field + .select2-container--default .select2-results > .select2-results__options {
    height: 200px !important;
    max-height: 200px !important;
}

/* Month dropdown styling */
.selectedMonth {
    color: rgb(233, 70, 5);
    cursor: pointer;
    background: url("/assets/img/calendar.png") no-repeat right 0.75rem center / 1rem auto;
    background-color: rgba(0,0,0,0);
    height: 44px;
    line-height: 44px;
    width: 140px;
    box-sizing: border-box;
    font-size: 13px;
    padding: 0 2rem 0 0.75rem;
    border: none;
    margin-right: 12px;
    text-align: center;
    display: inline-block;
}

.selectedMonth:hover {
    color: rgb(255, 72, 0);
}

/* Transaction Type dropdown styling - same as month */
.selectedTransactionType {
    color: rgb(233, 70, 5);
    cursor: pointer;
    background-color: rgba(0,0,0,0);
    height: 44px;
    line-height: 44px;
    width: 100px;
    box-sizing: border-box;
    font-size: 13px;
    padding: 0 0.5rem;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.08);
    margin-left: 8px;
    margin-right: 12px;
    text-align: left;
    display: inline-block;
}

.selectedTransactionType:hover {
    color: rgb(255, 72, 0);
}

/* Month dropdown specific class to avoid 60vh height issue */
.monthSelect2Field {
    background-color: rgba(0,0,0,0);
    border: 0;
    box-shadow: none;
    font-weight: bold;
    margin: 0;
    position: absolute;
}

select.monthSelect2Field, .monthSelect2Field .select2-selection__rendered {
    display: none !important;
}

.monthSelect2Field .select2-dropdown.select2-dropdown--below {
    width: 180px !important;
    overflow: hidden;
}

.monthSelect2Field .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
}

/* === Year Selector Enhancements === */
.yearSelector {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 20px;
}

.yearSelectWrap {
    position: relative;
    display: inline-block;
}

.yearSelector .yearSelect {
    /* Reset native styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Box */
    padding: 0.5rem 2rem 0.5rem 0.75rem; /* room for the arrow */
    border: 1px solid #d0d5dd;
    border-radius: 0.5rem;
    font: inherit;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    color: #495057;
    background-color: #fff;
    cursor: pointer;
    min-width: 80px;
    /* Custom arrow (inline SVG, high-contrast) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23343a40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    transition: border-color 0.2s, background-color 0.2s;
}

.yearSelector .yearSelect:hover {
    border-color: #a0a6b0;
    background-color: #f9fafb;
}

.yearSelector .yearSelect:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
    border-color: #4f46e5;
}

.yearSelector .prevYear,
.yearSelector .nextYear {
    border: 1px solid #d0d5dd;
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.45rem 0.6rem;
    line-height: 1;
    cursor: pointer;
    font-size: 14px;
    color: #495057;
    transition: background-color 0.2s, border-color 0.2s;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yearSelector .prevYear:hover,
.yearSelector .nextYear:hover {
    background: #f9fafb;
    border-color: #a0a6b0;
}

.yearSelector .prevYear:focus,
.yearSelector .nextYear:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
    border-color: #4f46e5;
}

.yearSelector .prevYear:disabled,
.yearSelector .nextYear:disabled {
    background: #f8f9fa;
    color: #6c757d;
    border-color: #e5e7eb;
    cursor: not-allowed;
    opacity: 0.6;
}

.yearSelector .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* iOS tweak - prevent zoom on focus */
@supports (-webkit-touch-callout: none) {
    .yearSelector .yearSelect {
        font-size: 16px;
    }
}

.pageHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}