/* CSS Document */

.weekly-wages {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Adjust the number of columns as needed */
    grid-gap: 10px; /* Adjust the gap between cells as needed */
}

.weekly-wages .table-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Adjust the number of columns as needed */
}

.table-header,
.table-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Adjust the number of columns as needed */
    border-bottom: 1px solid #eee;
    padding: 5px;
}

.project-header .table-header,
.project-header .table-row {
}

.project-header .table-row span .fa-house-chimney {
    color: #a776d2;
}

.project-header .table-row span .fa-house-chimney-medical {
    color: #df9b4d;
}

.supplier-transactions .table-header,
.supplier-transactions .table-row {
    grid-template-columns: repeat(9, 1fr); /* Adjust the number of columns as needed */
}

.table-header {
    font-weight: bold;
}

.table-row div,
.table-header div {
    padding: 5px 5px;
}

.pro-app {
    color: #364153;
    width: calc(100% - 0px);
}

.docs-page {
    width: 100%;
    min-height: calc(100vh - 180px);
}

.my-docs-form {
    margin-bottom: 20px;
    min-width: 25%;
    justify-items: center;
    padding: 50px;
}

.documentsList {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

@media (max-width: 767px) {
    .documentsList {
        grid-template-columns: repeat(1, 1fr);
    }
}

/*.documentsList h3 {*/
/*    font-size: 24px !important;*/
/*    font-weight: 800 !important;*/
/*    line-height: 45px !important;*/
/*    margin-bottom: 20px;*/
/*}*/

.document-item:hover,
.document-item a:hover,
.document-item a,
.document-item img {
    cursor: pointer !important;
}

.document-content {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*margin-bottom: 10px;*/
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.document-content img {
    width: 150px;
}

.document-content .doc-details,
.document-content .doc-image,
.document-content .document-actions {
    display: inline-block;
    vertical-align: top;
}

.document-content .doc-details {
    margin: 0 20px 0 0;
}

.document-content .document-actions {
    text-align: right;
}

.documentsList .document-item {
    border-top: 1px solid #ddd;
    padding: 10px 0 0px;
    margin: 0 0 20px 0;
}

.filename {
    font-weight: bold;
    color: #333;
    text-decoration: none;
    margin-bottom: 5px;
}

.document-date {
    font-size: 12px;
    color: #888;
}

.document-date-hidden {
    font-size: 12px;
    color: #ffffff;
}

.document-actions i {
    font-size: 16px;
    min-width: 20px;
}

.pro-app form:not([data-twc] *) {
}

form.single-form {
    display: inline-block;
    border: none;
    box-shadow: none !important;
    line-height: inherit !important;
    margin: 0 !important;
    background: inherit !important;
    width: inherit !important;
    padding: 0 !important;
}

form.single-form button {
    padding: 5px 5px;
    margin: 0 0 0 5px;
}

.pro-app form label:not([data-twc] *),
.add-estimate {
    min-width: 125px;
    display: inline-block;
    vertical-align: top;
    /*padding: 3px 0 0 0;*/
    padding: 7px 10px 0 0;
}

.pro-app.fixed-costs form label:not([data-twc] *) {
    min-width: 240px;
}

.pro-app input:not([data-twc] *),
.pro-app textarea:not([data-twc] *),
.pro-app select:not([data-twc] *),
.pro-app button:not([data-twc] *),
.uwp-account-form input:not([data-twc] *),
.uwp-account-form button:not([data-twc] *) {
    -webkit-appearance: none;
    margin: 0 0 5px;
    border: 0px;
    padding: 10px;
    font-size: 14px;
    line-height: 14px;
    border-radius: 5px;
    /*vertical-align: top;*/
    box-shadow: inset 0 0 0 1px #ddd;
}

.pro-app select:not([data-twc] *) {
    /*padding: 5px 18px 5px 5px;*/
    padding: 10px 20px 10px 10px;
    height: 17px;
}

.pro-app input[type='file']:not([data-twc] *) {
    padding: 7px 10px;
    border-radius: 5px;
}

.pro-app button:not([data-twc] *),
.nav.button:not([data-twc] *) {
    padding: 5px 5px;
    margin: 0px 0 0px;
    box-shadow: none;
    border: 0px !important;
    border-radius: 5px !important;
    white-space: nowrap;
}

.pro-app input[type='submit']:not([data-twc] *),
button:not([data-twc] *) {
    background: rgb(37 99 235);
    color: #fff;
    border: 0px !important;
    border-radius: 5px !important;
    padding: 10px;
    text-transform: inherit;
}

.prepro-container .documents {
    width: calc(100% - 20px);
    height: 100%;
    margin-bottom: 0px !important;
}

.prepro-container .document {
    display: flex;
    /* justify-content: space-around; */
    /* gap: 10px; */
}

.hidden:not([data-twc] *) {
    display: none !important;
}

.spinner-card {
    position: relative;
}

/* The spinner style */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}

.button-spinner {
    width: 10px;
    height: 10px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Animation for spinner */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Style for the whole card, excluding those with 'access-error' class */
.section-attachPayment div.card:not(.access-error) {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    min-height: calc(100vh - 200px);
}

/* Style for the first div (logo, spinner, form, and submit button) */
.section-attachPayment div.card > div:first-child {
    display: flex;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    align-items: flex-start;
    flex-grow: 1;
    min-height: 100%;
}

/* Style for the image inside the first div */
.section-attachPayment div.card > div:first-child img {
    width: 150px;
    height: auto;
    margin: 10px 0 30px 5px;
}

/* Style for the intent submit wrapper inside the first div */
.section-attachPayment div.card > div:first-child .intentSubmitWrapper {
    align-self: flex-end;
    margin-top: auto;
}

/* Style for the second div (price explanation and breakdown) */
.section-attachPayment div.card > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 50%;
    background-color: #3c6ca3;
    border-radius: 12px;
    flex-grow: 1;
    padding: 40px;
    font-size: 16px;
    min-height: 100%;
}

/* Center the .priceExplained div and make it take up half the height */
.section-attachPayment div.card > div:last-child .priceExplained {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    height: 50%; /* Take up half the height of its container */
}

.section-attachPayment .priceExplained p.estimatePrice {
    line-height: 35px;
}

.section-attachPayment .priceExplained p a {
    text-decoration: underline;
    color: #f0c43c;
}

/* Style for the price breakdown section */
.section-attachPayment div.card > div:last-child .priceBreakDown {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    flex-grow: 1;
}

/* Style for each div inside priceBreakDown */
.priceBreakDown div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 100%;
}

.section-attachPayment div.card > div:last-child .spacer {
    margin: 10px 0 10px 0 !important;
}

/* Style for the title */
.priceBreakDown .title {
    font-weight: bold;
}

/* Style for the text inside the price breakdown */
.section-attachPayment div.card > div:last-child p {
    color: #ffffff;
    margin: 0 5px 5px 0;
}

.upload-plan.checkoutDiv {
    display: flex;
    width: 100%;
    align-items: stretch;
    justify-content: space-between;
    box-shadow: none;
}

.upload-plan.checkoutDiv .checkoutPlansList {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
}

.intentSubmitWrapper {
    display: none;
    justify-content: flex-end;
}

#preprocess-intent-form {
    width: 100%;
    /* justify-self: center; */
    flex-direction: column;
    /* align-items: center; */
}

#preprocess-intent-form div.payment-button-container {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
    margin-top: 10px;
}

/* Styling for the Stripe submit button */
.stripeSubmitBtn,
.intent-gateway {
    padding: 15px 30px;
    background: #f0c43c;
    color: #222;
    border: none;
    border-radius: 5px;
    max-width: 180px;
    cursor: pointer;
    transition: background-color 180ms ease;
    /* margin-top: 15px; */
}

.payment-gateway button[type='submit'],
.intent-gateway {
    background: #f0c43c;
    color: #364153;
    padding: 15px 30px;
    transition: background-color 180ms ease;
    align-self: center;
}

/* .pro-app button[type="submit"]:not([data-twc] *):hover,
button:not([data-twc] *):hover */
.intent-gateway:hover,
.stripeSubmitBtn:hover {
    background: #c39a23;
    color: #fff !important;
    border-radius: 5px !important;
    transition: background-color 180ms ease;
}

/* INPUT with the type of submit (strip plugin makes it an input rather than a button?) */
.payment-gateway input[type='submit'] {
    background: #f0c43c;
    color: #222;
    padding: 10px 20px;
    min-width: 130px;
    transition: background-color 180ms ease;
}

.payment-gateway input[type='submit']:hover {
    background: #c39a23;
    color: #fff;
    transition: background-color 180ms ease;
}

.pro-app-estimate {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 180px);
    width: 100%;
}

.add-estimate {
    /* change to display none when Rory gets info */
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    width: calc(100% - 20px);
    color: #222;
    height: 100%;
}

.edit-estimate {
    width: 100%;
}

.add-estimate button[type='submit'],
.edit-estimate button[type='submit'] {
    align-self: flex-end;
}

/* .stacked-form-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    max-width: 700px;
    margin: 0 auto;
    padding: 65px;
} */

/* .stacked-form-container button[type=submit] {
    align-self: flex-end;
} */

.spacer {
    border-top: solid 1px #cbcbcb;
    margin: 30px 0 30px 0;
    width: 100%;
}

/* .stacked-form-container h3 {
    font-weight: 800 !important;
} */

/* .stacked-form-container p {
    margin-bottom: 15px !important;
} */

/* .stacked-form-input input {
    min-width: 30%;
    margin-bottom: 25px;
} */

/* .stacked-form-input textarea {
    width: calc(100% - 35px);
}

.stacked-form-input select {
    min-width: 40%;
} */

/* .stacked-form-input label,
.stacked-form-input-together label {
    display: inline-block;
    width: 100%;
    text-align: left;
    margin-bottom: 15px;
    font-weight: 600 !important;
} */

/* .stacked-form-input-together {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
} */

/* .stacked-form-input-together input {
    width: calc(100% - 38px);
}/*

.stacked-form-input-together.address input {
    width: calc(100% - 35px);
}

/* .stacked-form-input-together div {
    display: flex;
    flex-direction: column;
    width: 100%;
} */

/* .stacked-form-input input::placeholder,
.stacked-form-input select::placeholder,
.stacked-form-input textarea::placeholder,
.stacked-form-input-together input::placeholder,
.stacked-form-input-together select::placeholder,
.stacked-form-input-together textarea::placeholder {
    color: #b1b1b1;
}

.stacked-form-input input:focus,
.stacked-form-input select:focus,
.stacked-form-input textarea:focus {
    box-shadow: 0 0 0 2px #ccc;
    outline: none;
} */

#topBriefDiv {
    /* Change to display flex when there is info to add and uncomment 1399 in platform jquery extra */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.topBriefDivHeader {
    width: 80%;
    text-align: center;
}

#topBriefDiv .topBriefDivHeader h1 {
    font-size: 30px;
    font-weight: 800;
    padding: 10px;
}

.estimateRadioWrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: none;
    gap: 20px;
    width: 100%;
}

.estimateOption {
    background-color: #fff;
    cursor: pointer;
    transition: scale 500ms ease;
    border-radius: 20px;
    border: solid #cacaca 1px;
    padding: 40px;
    width: 20%;
}

.estimatePriceWrapper,
.newBuildPriceWrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

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

.newBuildPriceWrapper .estimatePrice,
.estimatePriceWrapper .estimatePrice {
    margin-top: 10px;
}

.estimateOptionButton {
    margin-top: 20px !important;
    width: 130px;
    align-self: flex-start;
}

#newBuildCountCard {
    width: 30px;
}

.estimateDesc {
    margin-top: 40px;
    width: 100%;
}

.estimateDescGrid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    margin-top: 15px;
}

.gridItem {
    display: flex;
    align-items: center;
}

.gridItem p {
    margin: 0 !important;
}

.estimateDesc i {
    color: #3cb55a;
    font-size: 20px;
}

.estimateDesc p {
    margin: 0;
}

.estimatePrice {
    font-size: 34px;
    font-weight: 700;
}

.estimateOption h3 {
    font-size: 20px !important;
}

.estimateOption:hover {
    scale: 1.02;
    transition: scale 500ms ease;
}

.estimateRadioWrapper input[type='radio'] {
    display: none;
}

/* Swal Alert CSS */

body {
    padding-right: 0 !important;
}

.swal2-container {
    z-index: 9999;
}

@media screen and (min-width: 1170px) {
    .estimate-form-input select,
    .estimate-form-input textarea {
        max-width: 120px;
    }
}

@media screen and (max-width: 1176px) {
    .estimatePriceWrapper,
    .newBuildPriceWrapper {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .estimatePrice {
        font-size: 26px;
        font-weight: 700;
    }

    .estimateOption h3 {
        font-size: 16px !important;
    }

    .estimateOption {
        padding: 20px;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .estimateRadioWrapper {
        width: calc(100% - 20px);
        flex-direction: column;
    }

    .estimateOption {
        max-width: none;
        width: calc(100% - 40px);
    }
}

@media screen and (max-width: 1100px) {
    .upload-plan.checkoutDiv {
        flex-direction: column;
        box-shadow: none;
    }

    .upload-plan.checkoutDiv .checkoutPlansList {
        width: 100% !important;
    }

    #preprocess-intent-form {
        width: 100% !important;
    }

    .estimate-form-input label {
        padding-right: 0;
        margin-bottom: 5px;
    }

    .estimate-form-input input,
    .estimate-form-input select,
    .estimate-form-input textarea {
        width: 100%;
    }

    .pro-app-estimate {
        display: flex;
        justify-content: center;
        height: 50%;
    }
}

form.add-project button:not([data-twc] *),
.nav.button:not([data-twc] *) {
    padding: 10px;
}

form.add-project .error-message {
    padding: 10px;
    font-size: 12px;
}

.pro-app input[name='cPostcode']:not([data-twc] *) {
    text-transform: uppercase;
}

.required {
    color: #ce1717 !important;
    vertical-align: top;
    margin: 0px 0 0 5px;
}

.pro-app a:not([data-twc] *) {
    color: #364153;
    text-decoration: none;
}

.pro-app a:not([data-twc] *):hover {
    color: #93c4fe;
    text-decoration: none;
}

.pro-app a i:not([data-twc] *) {
    /*width: 16px;
    margin: 0 0px 0 0;
    text-align: center;*/
}

.card {
    display: block;
    margin: 0 0 20px;
    border-left: none;
    background: #fff;
    vertical-align: top;
    color: #364153;
    padding: 20px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 20px;
    overflow: visible;
    box-shadow: inset 0 0 0px 1px #ddd !important;
    border: 0px;
}

.card h3,
.add-project h3 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 17px;
}

.onboard-text-container div {
    display: flex;
    flex-direction: row;
}

/* So that the required red star doesn't move about on resize */
.onboard-text-container div div {
    position: relative;
}

.onboard-text-container .required {
    position: absolute;
    right: -10px;
}

#businessDetailBtn {
    min-width: 50%;
    padding: 20px 0px 20px 0px;
    margin-top: 20px;
}

.onboard-fixed-costs input,
.onboard-text-container input {
    border: solid 1px #9b9b9b;
}

.onboard-fixed-costs input:focus,
.onboard-text-container input:focus {
    border: solid 2px #9b9b9b;
}

.onboard-text-container div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.onboard-fixed-costs div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
}

@media screen and (max-width: 450px) {
    .onboard-text-container {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        width: 100%;
    }

    .onboard-text-container div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .onboard-fixed-costs div {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 5px;
    }

    .onboard-fixed-costs div div,
    .onboard-text-container div div {
        display: flex;
        flex-direction: row;
    }

    .onboard-text-container .required {
        position: absolute;
        right: -10px;
    }
}

/*.card.graph {
    width: calc(50% - 25px);
	display: inline-block;
	margin: 0 10px 10px 0;
}
.card.graph:nth-child(odd) {
	margin: 0 0px 10px 0;
}*/

/*.single-budget:hover,
.ledger .row-result:hover div,
.ledger .row-result:hover,
.single-wage:hover {
    background: #fff !important;
}*/
/*.single-budget:hover,
.ledger .row-result:hover,
.single-wage:hover {
    box-shadow: 0px 0px 0px 4px #bfdcfe;
    position: relative;
    z-index: 1000;
    border-color: #fff;
}*/
/*.single-budget.heading:hover,
.single-wage.heading:hover,
.single-budget.footer:hover,
.single-wage.footer:hover,
.row-result.footer:hover {
    box-shadow: none;
    background: #ddd !important;
}
.row-result.footer:hover div {
    background: #ddd !important;
}

form .single-wage:hover {
    box-shadow: none;
    background: #fff !important;
}*/

/* Dashboard */
.dashboard {
    width: calc(100% - 0px);
    margin: 0px 0 0 0;
}

/*.dashboard h2,
.wages h2,
.budgets h2 {
    margin: 0 0 5px;
    text-transform: uppercase;
    font-size: 14px !important;
    line-height: 14px !important;
    background: #eee;
    margin: -10px -5px 5px -5px !important;
    padding: 4px 10px;
    border-radius: 2px 2px 0 0;
}
.ledger h2 {
    background: #0db4ec;
}
.budgets h2 {
    background: #a776d2;
}
.budgets-vo h2 {
    background: #df9b4d;
}
.wages h2 {
    background: #0dd4ec;
}
.wages-weekly h2 {
    background: #a776d2;
}
.type-all h2,
.budgets-all h2,
.all-staff h2 {
    background: #66a30d;
}
.wages-weekly.type-vo h2 {
    background: #df9b4d;
}
*/
.pro-home {
    padding: 0 0px 0 0;
    display: inline-block;
    margin: 0px 0 0;
    width: calc(100% - 0px);
    color: #364153;
}

.pro-home .single-project {
    display: inline-block;
    width: 250px;
    height: 150px;
    overflow: hidden;
    margin: 5px 14px 5px 0;
    border-left: none;
    background: #fff;
    vertical-align: top;
    box-shadow: 0 0 3px -1px #364153 !important;
}

.pro-home .single-project .p-info {
    line-height: 16px;
    margin: 2px 0 2px;
}

.pro-home .single-project .p-type {
    font-size: 12px;
    line-height: 12px;
    border-radius: 3px;
    padding: 4px;
    margin: 0 5px 0 0;
    display: inline-block;
    text-transform: uppercase;
    /*border: 1px solid #888;*/
    vertical-align: top;
    font-weight: 400;
    background: #eee;
    box-shadow: inset 0 0 0 1px #bbb;
}

.pro-home .single-project:hover {
    /*box-shadow: 0 0 0px 3px #fff;*/
    box-shadow: 0 0 3px 0px #364153 !important;
    background: #fff;
    color: #364153;
}

.pro-home .project-list {
    overflow-y: hidden;
    overflow-x: scroll;
    width: calc(100% + 5px);
    margin: 0 0px 30px -5px;
    box-shadow: inset -50px 0 50px -50px rgba(0, 0, 0, 0.08);
    border-radius: 0 8px 8px 0;
}

.pro-home .single-project-box {
    margin: 0 0 5px 5px;
}

/*.project-list .single-project-box {
	width: unset !important;
}
.pro-home .project-list .single-project-box {
	width: inherit !important;
}*/

.project-list .add-project {
    display: none;
}

.pro-home .project-list .add-project {
    display: inline-block;
    width: 40px;
}

.pro-home .admin-nav a {
    min-width: 75px;
    text-align: left;
    margin: 0 0 2px 0;
    float: right;
}

.nav i {
    width: 15px;
    text-align: center;
    margin: 0 0px 0 0px;
}

.pro-home .page-head {
    display: none;
}

.section-list .list {
    margin: 10px 0 0 0;
}

.section-tools {
    overflow-y: scroll;
    width: calc(100% + 5px);
    margin: 0 0px 30px -5px;
}

h3.section-title {
    /*color: #f8e930;*/
    /*color: #93c4fe;*/
    color: #4073dc;
    font-weight: 400;
    font-size: 20px !important;
    line-height: 22px !important;
}

.section-tools-box {
    margin: 0 0 0 5px;
    width: 2140px;
}

.section-tools .single-tool {
    display: inline-block;
    width: 520px;
    height: 170px;
    overflow: hidden;
    margin: 5px 14px 5px 0;
    border-left: none;
    background: #eee;
    vertical-align: top;
    color: #364153;
    padding: 0px;
    border-radius: 5px;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
}

.section-tools .single-tool:hover {
    box-shadow: 0 0 0px 3px #364153;
    background: #fff;
}

.section-merchants .single-tool {
    width: 300px;
}

.section-merchants .section-tools-box {
    width: 1260px;
}

/* Categories */
h3.category-title {
    /*color: #f8e930;*/
    /*color: #93c4fe;*/
    /*color: #1f41af;*/
    /*color: #eff6ff;*/
    font-weight: 600 !important;
    font-size: 22px !important;
    line-height: 45px !important;
    /*margin: 0 0 20px !important;*/
}

.category-section .add-card,
.add-card {
    display: inline-block;
    width: 40px !important;
}

.category-section {
    /*overflow-y: hidden;
    overflow-x: scroll;*/
    width: calc(100% + 0px);
    /*margin: 0 0px 20px 0px;*/
    margin: 0 0px 0px 0px;
    /*box-shadow: inset -50px 0 50px -50px rgba(0, 0, 0, 0.08);*/
    /*border-radius: 0 8px 8px 0;*/
}

.category-section-box {
    margin: 0;
    padding: 0px;
}

.category-card {
    display: inline-block;
    width: calc(33.333% - 30px);
    overflow: hidden;
    margin: 0px 10px 10px 0;
    border-left: none;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    vertical-align: top;
    color: #364153;
    /*padding: 10px;
    border-radius: 5px;*/
    /*box-shadow: 0 0 3px -1px #364153 !important;*/
}

.category-staff .category-card,
.category-suppliers .category-card {
}

.inactive .category-card {
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

.inactive .category-card:hover {
    opacity: 1;
}

a.category-card:hover,
.inactive .category-card:hover {
    /*box-shadow: 0 0 0px 3px #fff !important;*/
    /*box-shadow: 0 0 3px 0px #364153 !important;*/
    /*background: #fff;*/
    /*box-shadow: 0 0 0px 3px #dbf4f5 !important;
    background: #dbf4f5;*/
    /*color: #1f41af;*/
    color: #4073dc;
}

/*a.category-card:before {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    margin: 134px 0px 0 0px;
	position: relative;
	z-index: 100;
	opacity: 0.1;
	float: right;
	transform: rotate(45deg);
}
a.category-card:hover:before {
	opacity: 1;
	margin: 137px -3px 0 0px;
}*/

.category-card .category-name {
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    margin: 0 0 5px;
}

.category-card .category-admin span i {
    position: absolute;
    margin: -12px 0 0 5px;
    color: #ce1717;
    font-size: 18px;
}

.category-card .category-budget span {
    line-height: 12px;
    font-size: 12px;
    display: inline-block;
    font-weight: 400;
    margin: 0 5px 5px 0;
}

.category-card .category-budget {
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    margin: 0 0 0px;
}

.category-card .category-budget.dates {
    font-size: 12px;
    line-height: 12px;
    margin: 0 0 10px;
}

.category-card .category-budget-out {
}

.category-admin {
    display: block;
    margin: 10px 0 0 0;
}

.category-admin .nav {
}

/* overview section */
.overview-section {
    overflow: visible;
    box-shadow: none;
}

.overview-section .category-card {
    width: calc(100% - 30px);
    height: unset;
    margin: 0px 0 0px;
    padding: 0;
    background: transparent;
    border-radius: 0px;
}

.overview-section a.category-card:hover {
    /*box-shadow: 0 0 0px 3px #fff !important;*/
    box-shadow: none !important;
    background: #fff;
}

.overview-section .category-section-box {
    margin: 0 0 0px 0px;
}

.overview-section .category-sub {
    display: inline-block;
    vertical-align: top;
    margin: 0 30px 0 0;
}

.overview-section .category-sub span {
    background: #ddd;
    border-radius: 5px;
    padding: 10px;
    margin: 4px 0 0 5px;
    display: inline-block;
    line-height: 24px;
    font-size: 24px;
    font-weight: 600;
}

.overview-section .category-sub b {
    vertical-align: top;
    margin: 14px 0 0 0;
    display: inline-block;
}

.overview-section.positive .category-sub span,
.page-projects table.estimate-list tr.stage-row.positive {
    background: #b8d3bb;
}

.overview-section.negative .category-sub span {
    background: #ddb2b2;
}

.overview-section .business-logo {
    float: left;
    vertical-align: top;
    width: 90px;
    /*height: 90px;*/
    margin: 0 10px 0 0;
    line-height: 0px;
}

.overview-section .pie-box {
    width: 80px;
    height: 80px;
    display: inline-block;
    margin: -15px 0 0 10px;
    vertical-align: top;
}

.overview-section .category-sub .percent-value {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    text-align: center;
    margin: 14px -100px 0 0;
    position: relative;
    z-index: 1;
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
}

.overview-section .category-sub .percent-value small {
    font-size: 10px;
    vertical-align: super;
    position: relative;
    vertical-align: top;
    margin: -4px -4px 0 0;
    display: inline-block;
    position: absolute;
}

.project-profit {
    /*width: calc(100% - 100px);*/
}

.project-profit .symbol {
    display: inline-block;
    width: 25px;
    vertical-align: top;
    line-height: 12px;
}

.project-profit .running {
    display: inline-block;
    width: 40%;
    vertical-align: top;
    line-height: 12px;
}

.project-profit .out {
    display: inline-block;
    /*width: 38%;*/
    vertical-align: top;
    line-height: 14px;
    margin: 0 0px 0 0;
}

.project-profit .percent {
    /*width: calc(22% - 25px);*/
    vertical-align: top;
    /*line-height: 12px;
	margin: 0 10px 0 0;*/
    position: relative;
}

.project-profit .percent-box {
    display: inline-block;
}

.project-profit .percent div {
    position: absolute;
    width: 70px;
    text-align: center;
    margin: 25px 0 0 0;
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
}

.project-profit .percent div span {
    font-size: 7px;
    line-height: 7px;
    text-transform: uppercase;
    display: block;
    margin: 0;
    color: #364153;
}

.project-profit.positive .percent div {
}

.project-profit.negative .percent div {
}

.project-profit .pie-box {
    width: 70px;
    height: 70px;
}

.project-profit .heading {
    font-size: 10px;
    font-weight: 600;
}

.project-profit .out .budget-total {
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
}

.project-profit .out .master-total {
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    margin: 10px 0 0 0;
}

.project-profit.positive .master-total,
.project-profit.positive .budget-total {
    color: #04a700;
}

.project-profit.negative .master-total,
.project-profit.negative .budget-total {
    color: #ce1717;
}

.project-profit .remaining-budget {
    display: inline-block;
    vertical-align: top;
    width: 200px;
}

.project-profit .master-budget {
    display: inline-block;
    vertical-align: top;
    width: 200px;
}

.project-profit .vos span {
    margin: 0px;
    padding: 0 5px 5px 0;
    color: #a776d2;
    background: transparent;
}

.project-profit .vos span.vo {
    color: #df9b4d;
    background: transparent;
}

.project-profit .budget-label {
    display: inline-block;
    margin: 0 10px 0 0;
}

/* Business Secction */
.category-business .category-card {
    width: 260px;
    line-height: 16px;
    font-size: 14px;
}

.category-business .category-card span {
    font-size: 12px;
    line-height: 14px;
    position: relative;
}

.category-business .category-card .details-name {
}

.category-business .category-card .details-address {
}

.category-business .category-card .details-phone {
}

.category-business .category-card .details-email {
}

.category-business .category-card .details-link {
    font-size: 20px;
    line-height: 20px;
    vertical-align: top;
    margin: 5px 0px 0 10px;
    display: inline-block;
}

/* Projects */
form.add-project,
.uwp-registration-off,
.uwp-login-off {
    display: inline-block;
    vertical-align: top;
    padding: 20px;
    border-radius: 5px;
    /*margin: 0 20px 20px 0;*/
    margin: 0 20px 20px 0;
    background: #fff;
    width: calc(100% - 40px);
    color: #364153;
    box-shadow: inset 0 0 0px 1px #ddd !important;
}

.add-project select {
    padding-right: 25px;
}

form h3 {
    margin: 0 0 10px;
}

.info {
    /*font-size: 12px;*/
    margin: 0 0 10px 0;
    display: inline-block;
    background: #fff;
    /*padding: 10px;
    border-radius: 5px;*/
}

form .info.error {
    color: #ce1717;
}

form .info.error:after {
    content: '\f071';
    font-family: 'Font Awesome 5 Free';
    margin: 0px 5px 0 0px;
}

.form-section {
    /*width: calc(33.333% - 10px);*/
    /*width: auto;
    vertical-align: top;
    display: inline-block;
    margin: 0 0px 0 0;*/
}

.form-gap {
    width: 1px;
    display: inline-block;
    background: #eee;
    height: 100px;
    position: relative;
    margin: 0 30px;
    display: none;
}

.project-list {
    display: inline-block;
    min-width: 300px;
    vertical-align: top;
    margin: 0 20px 0 0;
}

.project-list .single-budget.heading {
    background: transparent !important;
    border-radius: 0px !important;
    margin: 0px 0 0 0;
    padding: 0px 0 5px;
}

.project-list .single-budget.footer {
    background: transparent !important;
    border-radius: 0px !important;
    border: none !important;
    line-height: 13px;
    padding: 5px 0;
}

.project-list .single-budget div {
    padding: 0 10px 0 0;
}

.p-group,
.dash-group {
    display: inline-block;
    vertical-align: top;
    margin: 0 0px 5px 0;
    min-width: 200px;
}

.p-group {
    /*width: calc(100% - 100px);*/
    overflow: hidden;
}

.single-project {
    background: #fff;
    color: #364153;
    padding: 10px;
    border-radius: 5px;
    /*border-left: 4px solid #888;*/
    /*box-shadow: inset 0 0 5px -2px #364153;*/
    /*box-shadow: 0 0 5px -3px #364153;*/
    display: block;
    /*width: calc(100% - 4px);*/
    margin: 0px 10px 10px 0;
}

.single-project-OFFFFFFFFFFF:hover {
    box-shadow:
        inset 0 0 5px -2px #364153,
        0 0 2px 2px #93c4fe;
    color: #364153;
}

.single-project .p-name {
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    margin: 0px 0 0 0;
}

.single-project .p-name span {
    display: inline-block;
    margin: 0 0 5px 0px;
    font-size: 14px;
    line-height: 14px;
    color: #888;
    font-weight: 500;
}

.single-project .p-number {
    font-size: 10px;
    line-height: 10px;
    padding: 3px 8px 3px 16px;
    background: #ddd;
    color: #364153;
    display: inline-block;
    margin: -19px 0 0px -18px;
    position: absolute;
    font-weight: 600;
    border-radius: 20px 0 0 0;
}

.single-project .p-brief {
    font-size: 11px;
    line-height: 13px;
    max-width: 400px;
    width: 100%;
}

.single-staff {
    background: #fff;
    color: #364153;
    padding: 10px;
    border-radius: 5px;
    /*box-shadow: inset 0 0 5px -2px #364153;*/
    display: block;
    margin: 0 0 10px;
}

.single-staff .p-name {
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 0 0;
    min-width: 180px;
}

.single-staff .p-info {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 0 0;
}

.single-staff .admin-nav {
    display: inline-block;
    vertical-align: top;
    width: unset;
    float: right;
    margin: 0px;
}

.single-stage .p-name {
    display: inline-block;
}

.single-stage .sort {
    font-size: 14px;
    line-height: 14px;
    color: #888;
    font-weight: 500;
    display: inline-block;
    margin: 0 10px 0px 0px;
    min-width: 40px;
}

.single-stage .admin-nav,
.category-section .admin-nav,
.single-project .admin-nav {
    display: inline-block;
    width: 100px;
    float: right;
    vertical-align: top;
    margin: 0 0 0 0px;
    text-align: right;
}

.card-info {
    /*width: calc(100% - 100px);*/
    vertical-align: top;
    display: inline-block;
}

.project-page {
    display: block;
    margin: 0px 0 10px;
    padding: 12px 10px 0;
    border-radius: 5px;
}

.project-page h1 {
    margin: 0px 10px 10px 0px !important;
    display: inline-block;
}

.project-page .head {
    display: inline-block;
    vertical-align: top;
    margin: 0px 20px 0px 0;
}

.project-page .brief {
    font-size: 11px;
    line-height: 12px;
    display: inline-block;
    vertical-align: baseline;
    margin: 0 0 10px;
    max-width: 300px;
    vertical-align: top;
}

.project-page .p-info {
    display: inline-block;
    vertical-align: top;
    margin: 0px 0 10px 0;
    font-size: 11px;
    line-height: 12px;
}

.project-page .p-info .admin-nav {
    width: auto;
    display: inline-block;
    text-align: unset;
    margin: 0px 0 0 0;
}

.project-page .c-name {
    font-size: 14px;
    font-weight: 500;
    margin: 0px;
    display: inline-block;
    vertical-align: baseline;
}

.project-page .dates {
    margin: 0px 0 0 0;
    display: inline-block;
    vertical-align: top;
}

.project-page .dates span {
    font-weight: 600;
}

.project-page .p-number {
    font-size: 12px;
    line-height: 12px;
    padding: 5px 6px;
    background: #364153;
    color: #fff;
    margin: 0px 0 10px;
    /*display: inline-block;*/
    display: none;
    vertical-align: top;
    position: relative;
    border-radius: 0px;
}

.project-page .details {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
}

.project-page .contact-details {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 0 0;
}

.page-head {
    display: block;
    margin: 0px 0 20px;
    font-size: 11px;
    line-height: 11px;
    color: #888;
}

/* Fixed Costs */
.fixed-cost-box div {
    display: inline-block;
    margin: 10px 20px 0 0;
    vertical-align: top;
}

.fixed-cost-box h4 {
    margin: 0 0 5px !important;
    color: #4073dc;
}

/* Estiates */
.estimate-overview {
    margin: 0 0 20px;
    box-shadow: none !important;
    padding: 0;
    background: transparent;
}

.estimate-overview .nav.float {
    margin: 0px 0 -8px 40px;
    float: unset;
}

.estimate-overview .option {
    float: right;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 100%;
    max-width: calc(40% - 40px);
    box-shadow: inset 0 0 0px 1px #ddd !important;
    /*margin: 0 0 20px 0;*/
}

form.add-project,
.uwp-registration-off,
.uwp-login-off {
}

.page-estimates .estimate-overview .estimate-spec {
    margin: 0 0 20px 0;
}

.page-estimates .estimate-overview .option {
    max-width: calc(100% - 40px);
    float: unset;
}

.estimate-overview .option .steps {
    font-weight: 500;
    display: block;
    margin: 5px 0 10px;
}

.estimate-overview .option .small {
    /*font-size: 12px;
    line-height: 14px;*/
    margin: 5px 0 0 0;
    color: #888;
}

.estimate-overview .option span {
    margin: 0 0px 0 0;
    display: inline-block;
}

.estimate-overview .option .steps i {
    color: #ccc;
    margin: 0 5px;
    font-size: 12px;
}

.estimate-overview .option .steps span {
    font-size: 12px;
    line-height: 13px;
    padding: 8px;
    border-radius: 5px;
}

.estimate-overview .option .steps span .number {
    font-size: 11px;
    line-height: 11px;
    margin: -14px 0 0 -5px;
    font-weight: 600;
    display: block;
    position: absolute;
    background-color: #f5f5f5;
    padding: 0 5px;
}

.estimate-overview .option span.done {
    color: #3ec35d;
    box-shadow: 0 0 0px 1px #3ec35d;
}

.estimate-overview .option span.highlight {
    color: #4073dc;
    box-shadow: 0 0 0px 1px #4073dc;
}

.estimate-overview .option span.not-done {
    color: #ccc;
    box-shadow: 0 0 0px 1px #ccc;
}

.estimate-overview .nav.button {
    margin: 10px 0 0 10px;
    float: right;
}

.estimate-overview .estimate-spec {
    vertical-align: top;
    display: inline-block;
    margin: 0 20px 0 0;
    width: 100%;
    max-width: calc(100% - 40px);
}

.estimate-overview .option .status,
.estimate-overview .option .status-badge {
    float: right;
}

.estimate-overview .estimate-status-0 .option {
}

.estimate-overview .estimate-status-1 .option {
}

.estimate-overview .estimate-status-2 .option {
}

.estimate-overview .estimate-status-3 .option {
}

.estimate-overview .estimate-status-4 .option {
}

form.estimate .default-margins {
    display: inline-block;
    margin: 0 20px 20px 0px;
}

form.estimate .default-margins button {
    margin: 0 0 0 10px;
    vertical-align: revert;
}

#form2 tr .calc {
    background: #f9f9f9;
}

#form2 tr .markup {
    background: #f2f2f2;
}

.margin-form {
    display: inline-block;
    vertical-align: top;
    margin: 0 20px 0 0;
}

.materials tr td {
    padding: 0 5px;
    vertical-align: middle;
}

.materials tr:nth-child(even),
table.estimate-list.payments tr:nth-child(even) {
    background: #f8f8f8;
}

.estimate input.margin {
    max-width: 40px;
    vertical-align: revert;
}

.estimate table button {
    vertical-align: revert;
}

.page-projects table.estimate-list tr.stage-row td,
table.estimate-list tr.final-payment-row td {
    padding: 11px 0 11px 6px !important;
}

span.gen-invoice {
    margin: 0 10px 5px 0;
    width: 82px;
}

.estimate-list {
    table-layout: fixed;
}

.page-estimates .estimate-list .stage-row:hover {
    cursor: pointer;
}

.estimate-list .margin-input,
.estimate-list .contingency-input {
    width: 30px;
}

.estimate-list .workers-input {
    width: 40px;
}

.estimate-list td {
    line-height: 20px;
    white-space: pre-line;
    vertical-align: middle;
}

/* Stops info icons being in a weird place */
tr.large td.markup,
tr.large td.profit {
    line-height: 20px;
    white-space: normal;
    vertical-align: unset;
}

.estimate-list td button {
    background: none !important;
}

.estimate-list td button i {
    font-size: 32px;
}

.estimate-list td button i.fa-toggle-off {
    color: #d6d6d6;
}

.estimate-list td button i.fa-toggle-on {
    background: none;
    color: #3cb55a;
}

.estimate-list td input[type='text'],
.estimate-list td input[type='number'] {
    margin: 5px 0;
}

.estimate-list .breakdown {
    display: none;
}

.estimate-list .breakdown table td {
    padding: 0 30px 0 10px !important;
}

.estimate-list .breakdown.active {
    background: #fff;
    border-radius: 0 0 10px 10px;
    width: calc(100vw - 360px);
    padding: 10px 0;
    display: inline-block;
    box-shadow: inset 0 0 0 2px #e5e7eb;
}

.estimate-list .stage-row.active td {
    /*background: #bfdcfe;*/
    background: #e5e7eb;
}

.estimate-list .stage-row.active td:first-of-type {
    border-radius: 10px 0px 0 0;
}

.estimate-list .stage-row.active td:last-of-type {
    border-radius: 0px 10px 0 0;
}

.estimate-quote {
}

.estimate-quote .stage-row {
    padding: 0 0 5px;
}

.estimate-quote .stage-row td,
.estimate-quote .stage-row span {
    line-height: 16px;
    font-size: 14px;
    padding: 0 0px 5px 0px !important;
}

.estimate-quote .stage-row span {
    width: 50%;
    display: inline-block;
}

.estimate-quote .breakdown-row {
    display: block;
}

.estimate-quote .breakdown-row div div {
    padding: 0 0 20px !important;
    white-space: pre;
    font-size: 10px;
    line-height: 14px;
}

.estimate-quote .breakdown-row td b {
}

.summery .estimate-quote tr.large td {
    padding: 10px 0px !important;
}

.estimate .totals td b,
.acceptance .value {
    font-size: 18px;
    font-weight: 600;
    padding: 10px 0 0;
    display: inline-block;
}

.estimate .totals td {
    padding: 0 0 10px 0 !important;
}

.card.acceptance .value {
    font-size: 14px;
}

.card.acceptance .value-title {
    width: 140px;
    display: inline-block;
    line-height: 22px;
}

.card.acceptance .value-total {
    font-size: 18px;
}

.card.a4paper {
    background: #fff;
    border-radius: 0px;
    /*box-shadow: 0 0 5px -3px #364153;*/
    box-shadow: 0 0 9px -2px #888;
    width: calc(3 * 210px);
    /*height: calc(3 * 297px);*/
    min-height: calc(3 * 297px);
    padding: 30px 30px;
}

.pdf .card.a4paper {
    height: calc(3 * 297px);
    min-height: unset;
}

/*.card.a4paper.cover {
    background: url("/wp-content/plugins/trutrade/src/images/quote-images/quote-cover-space-2.jpg");
    background-size: 100% auto;
}
.card.a4paper.cover .builder {
    margin: 0 0 10px;
    position: absolute;
}
.card.a4paper.cover .titles-quote {
    margin: 300px auto 0;
    text-align: center;
    font-size: 20px;
    line-height: 25px;
    width: 100%;
}
.card.a4paper.cover .estimate-quote {
    margin: 0 0 10px;
    font-weight: 600;
}
.card.a4paper.cover .address {
    font-size: 14px;
    line-height: 14px;
}
.card.a4paper.cover .client {
    margin: 0 0 10px;
}
.card.a4paper.cover .brief-quote {
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
}*/
.quote-page .poweredby {
    display: none;
}

.estimate table {
    margin: 0 -5px 10px !important;
}

.estimate td {
    padding: 0 5px 0 5px !important;
}

.estimate-list tr.large td {
    padding: 10px 5px !important;
    font-size: 14px;
}

.estimate-list tr.large.totals td {
    padding: 5px 5px !important;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
}

.col50 {
    width: calc(50% - 20px);
    display: inline-block;
    margin: 0 20px 0px 0;
    vertical-align: top;
}

.col-labour-rates {
    margin: 0 0px 20px 0px;
}

.flex-card-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    max-width: 100%;
    gap: 20px;
    margin-bottom: 20px;
}

.flex-card {
    width: 50%;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
}

.costs-card,
.labour-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-grow: 1;
    min-height: 170px;
    box-shadow: inset 0 0 0px 1px #ddd !important;
}

.card-footer {
    margin-top: auto;
}

.section-credits.page-reports .card-container,
.section-dashboard .card-container {
    display: flex;
    gap: 20px;
    cursor: pointer;
}

.section-credits.page-reports .card-container .card,
.section-dashboard .card-container .card {
    flex: 1;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-credits.page-reports .card-container .card:hover,
.section-dashboard .card-container .card:hover,
.section-dashboard .card-container .card.selected,
.section-credits .card-container .card.selected {
    box-shadow: inset 0 0 0 1px #888 !important;
    cursor: pointer;
}

.section-credits.page-reports .card-container p,
.section-dashboard .card-container p {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 30px;
}

.section-credits.page-reports .credit-filters {
    display: flex;
    justify-content: space-between;
}

.section-credits.page-reports .grid-row,
.grid-header,
.grid-footer {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    padding: 5px 0;
}

.section-credits.page-reports .grid-header div {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
}

.section-credits.page-reports .grid-row:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.section-credits.page-reports .grid-footer div,
.grid-row div {
    padding: 8px;
}

.section-credits.page-reports .grid-footer div {
    font-weight: bold;
}

.section-credits.page-reports .no-credit-results-message {
    display: none;
    text-align: center;
    padding: 20px;
}

.section-credits .filters select {
    width: fit-content;
    padding-right: 20px;
}

.section-credits .reconciled-input {
    width: 80px;
    padding: 4px;
}

.section-credits .edit-btn,
.section-credits .save-btn {
    display: inline-block;
    font-size: 16px;
    width: 18px;
}

.section-credits .grid-row div a span {
    font-size: 10px !important;
}

.section-credits .credit-reconciled {
    text-wrap: nowrap;
}

@media screen and (max-width: 600px) {
    .flex-card-container {
        justify-content: center;
        flex-direction: column;
    }

    .flex-card {
        width: calc(100% - 20px);
        margin-right: 20px;
    }
}

/* Centers the button on mobile */
@media screen and (max-width: 430px) {
    .card-footer {
        align-self: center;
    }
}

.labour-card .cost {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.costs-card span {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.col-labour-rates span {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.generic-rates span {
    min-width: 100px;
    display: inline-block;
}

.users-labour-rates {
    display: grid;
    grid-template-columns: auto auto;
    gap: 5px;
}

.labour-rates-item {
    padding: 5px;
}

.labour-rate-title {
    display: inline-block;
    word-wrap: break-word;
    width: 130px;
}

@media screen and (max-width: 912px) {
    .users-labour-rates {
        grid-template-columns: auto;
        height: 100px;
        overflow-y: scroll;
        text-align: center;
    }

    .labour-rate-title {
        width: unset;
    }

    .labour-rates-item {
        padding: 2px;
    }
}

.project-card {
    width: calc(100% - 40px);
    display: inline-block;
    margin: 0 20px 20px 0;
}

.project-card:hover {
    /*box-shadow: 0 0 3px 0px #364153 !important;*/
    color: #364153 !important;
    /*background: #dae3f2;*/
    box-shadow: inset 0 0 0px 1px #888 !important;
}

/*.project-card:nth-child(even) {
    margin: 0 0 20px 0;
}*/

.project-card .spec {
    vertical-align: top;
    display: block;
}

.project-card .stats {
    display: inline-block;
    float: left;
    vertical-align: top;
    margin: 10px 0 0 0;
}

.project-card .spec .title {
    font-size: 20px;
    line-height: 20px;
    margin: 0 10px 0 0;
    display: inline-block;
    font-weight: 800;
}

.project-card .spec .brief,
.estimate-spec .brief {
    padding: 5px 5px;
    display: inline-block;
    border-radius: 5px;
    margin: 5px 0 0px;
    font-size: 10px;
    line-height: 10px;
    background-color: #f9f9f9;
    box-shadow: inset 0 0 0 1px #ddd;
    vertical-align: top;
    font-weight: 600;
}

.project-card .spec .customer {
    line-height: 14px;
    margin: 0 0 15px 0;
}

.card:hover .stats .project-profit {
    color: #364153;
}

form.file-upload,
form.upload-plan {
    /*width: calc(50% - 30px);
    vertical-align: top;*/
}

form.upload-plan {
    /* margin: 0 0 20px; */
}

.status-1,
.status-2,
.status-3,
.status-4,
.status-5,
.status-6,
.status-7 {
    /* draft */
    display: inline-block;
    background: #bbd2f5;
    background: #eee366;
    color: #364153 !important;
    padding: 8px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
    border-radius: 5px;
    vertical-align: top;
    font-weight: 400;
}

.status-2 {
    /* requested */
    background: #f6ab1a;
    background: #f5b12f;
}

.status-3 {
    /* completed */
    /*background: #a8dd19;*/
    background: #65e5ce;
}

.status-4 {
    /* checked */
    background: #a8dd19;
}

.status-5 {
    /* project */
    background: #a8dd19;
}

.float-message {
    position: absolute;
    margin: 0 0 0 0;
    height: 28px;
    color: #182454;
    background: #bfdcfe;
    border-radius: 5px;
    /*box-shadow: 0 0 3px -1px #364153;*/
    padding: 0 10px;
    white-space: pre;
    font-weight: 600;
}

.disabled button,
button.disabled,
a.disabled,
input.disabled,
input.disabled::file-selector-button {
    opacity: 0.3;
    cursor: not-allowed !important;
}

.upload-plan .documents,
.correspondence .ticket {
    /*background: #fff;*/
    /*padding: 10px 10px 1px;*/
    padding: 10px 0px;
    margin: 0px 0 10px;
    /*border-radius: 5px;*/
    display: block;
    /*box-shadow: inset 0 0 0 2px #e9ebf4;*/
    border-top: 1px solid #ddd;
}

.correspondence .ticket.titles {
    border-top: none;
    font-weight: 600;
}

.card.correspondence .ticket p {
    margin: 0;
}

.card.correspondence .ticket {
    display: grid;
    grid-template-columns: 5% 12% 20% 40% 15%;
    gap: 2%;
    margin: 0;
}

.card.correspondence .ticket img {
    width: auto;
    height: 30px;
}

.card.correspondence .ticket span {
    align-self: center;
    margin: 0;
}

.upload-plan .documents .document {
    margin: 0 0 10px;
}

.upload-plan .documents .filename {
    /*font-size: 16px;
    line-height: 16px;*/
    margin: 0 10px 0 5px;
}

.upload-plan .documents .document-date {
    font-size: 12px;
    margin: 0 10px 0 0px;
}

.admin-nav {
    display: inline-block;
    margin: 50px 0 10px 20px;
    vertical-align: top;
}

.admin-nav a {
    /*padding: 5px 5px;
	font-size: 12px;
	line-height: 12px;
	border-radius: 20px;
	display: inline-block;
	margin: 0 0px 0 0px;
	text-align: center;
	text-decoration: none;*/
}

.admin-nav a:hover {
    /*background: #364153;
	color: #93c4fe;*/
}

.nav {
    padding: 5px 5px;
    font-size: 14px;
    line-height: 14px;
    border-radius: 5px;
    /*box-shadow: inset 0 0 3px -1px #364153;*/
    /*background: #bfdcfe;*/
    background: rgb(37 99 235);
    color: #fff !important;
    display: inline-block;
    margin: 0;
    transition: background-color 180ms ease;
    min-width: 50px;
    text-align: center;
}

.nav-text a.nav-text {
    color: #4073dc;
}

.nav-text:hover {
    color: #2e529c;
    cursor: pointer;
}

/* Targets the set all buttons on csv margins page */
.default-margins button.nav.button {
    background: #4073dc;
    color: #fff;
    transition: background-color 180ms ease;
}

.default-margins button.nav.button:hover {
    background: #1b54c7;
    color: #fff;
    transition: background-color 180ms ease;
}

.nav:hover {
    background: #1b54c7;
    color: #fff;
    transition: background-color 180ms ease;
    cursor: pointer;
}

.filters button[type='submit']:hover {
    background: #1b54c7;
    color: #fff;
    transition: background-color 180ms ease;
}

/* Targets the buttons on the csv margins table as well as secondary */
.secondry,
button.nav.button.secondry,
button.secondry {
    background: rgb(34 197 94);
    transition: background-color 180ms ease;
    color: #fff;
}

.secondry:hover,
button.nav.button.secondry:hover,
button.secondry:hover {
    background: #309148;
    transition: background-color 180ms ease;
}

.third {
    background: #f4c12c;
    transition: background-color 180ms ease;
}

.third:hover {
    background: #c39a23;
    transition: background-color 180ms ease;
}

button.button.deleteBtn {
    background: #fd0000;
    transition: background-color 180ms ease;
}

button.button.deleteBtn:hover {
    background: #ca0000;
    transition: background-color 180ms ease;
}

.nav-off {
    opacity: 0.2;
}

.nav.active {
    background: #1b54c7;
}

.comming {
    position: absolute;
    background: #364153;
    color: #ddd;
    font-size: 11px;
    line-height: 11px;
    padding: 3px;
    border-radius: 3px;
    margin: 3px 0 0 -40px;
    width: 80px;
    font-weight: 600;
}

/*form.unsaved {
    box-shadow: 0 0 0 2px #ce1717 !important;
    border-radius: 5px;
}

form.unsaved button {
    background: #ce1717;
    color: #fff;
}
form.unsaved button:hover {
    background: #364153;
    color: #ce1717;
}*/

/* Reprts */
.cis-gross-wages .category-title {
    margin: 0 0 10px 0 !important;
}

.cis-gross-grid .columns {
    display: grid;
    grid-template-columns: 14% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 6.5% 8%;
}

.cis-gross-grid .money {
    text-align: right;
    display: inline-block;
}

.cis-gross-grid .columns {
}

.cis-gross-grid .columns b {
    display: inline-block;
}

.cis-gross-grid .columns div {
    padding: 3px 5px 3px 0;
}

.cis-gross-grid .columns:nth-child(even) {
    background: #f8f8f8;
}

.cis-gross-grid .columns.col-head {
    padding: 0px 0 10px;
}

.cis-gross-grid .columns.col-foot {
    padding: 5px 0 0px;
}

.cis-wages-grid .columns:nth-child(even) {
    background: #f8f8f8;
}

.cis-wages-grid .columns.col-head {
    padding: 0px 0 10px;
}

.cis-wages-grid .columns.col-foot {
    padding: 5px 0 0px;
}

.cis-gross-grid a:nth-child(even) div,
.row-wrapper:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

/* Help */
.help {
    color: #eee;
    margin: 0 0 10px;
    background: #000;
    max-width: 400px;
    border-radius: 5px;
    padding: 10px;
    font-size: 12px;
    line-height: 14px;
    border-left: 4px solid #034ebb;
    text-transform: initial;
    display: none;
    vertical-align: top;
    position: absolute;
}

.help.visible {
    display: inline-block;
}

h2 .help {
    /*display: none;*/
    position: absolute;
}

h3 .help {
    /*display: none;*/
    position: absolute;
}

.help-button {
    background: #eee;
    color: #034ebb;
    padding: 2px 4px;
    font-size: 10px;
    line-height: 10px;
    border-radius: 3px;
    font-weight: 600;
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;
}

h3 .help-button {
    margin: 3px 10px 0;
}

.filter .help-button {
    margin: 3px 10px 0 0;
}

h2 .help-button {
    position: unset;
}

.help-button:hover {
    background: #034ebb;
    color: #fff;
}

a.info {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 12px;
    color: #364153;
    display: block;
}

a.info:hover {
    color: #93c4fe;
}

/* Platform Menu */
.hamburger {
    display: none;
    padding: 10px;
    background: #f1f1f1;
    position: fixed;
    z-index: 9999;
    box-shadow: inset 0 0 0 1px #ddd;
    top: 10px;
    left: 20px;
    border-radius: 5px;
}

.hamburger:hover {
    cursor: pointer;
}

.the-menu {
    position: fixed;
    background: #fff;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 220px;
    padding: 20px;
    box-shadow: inset 0 0 0px 1px #ddd !important;
    transition: left 0.3s ease;
}

.the-menu.open {
    left: 0px;
}

.the-menu .menu-footer {
    border-top: 1px solid #e5e7eb;
    padding: 5px 0 0 0;
}

.menu-items {
    flex: 1;
    overflow: auto;
}

.the-menu .site-title {
    margin: 0 0 20px;
}

.the-menu .menu-head {
    /*font-size: 16px;
    font-weight: 600;*/
    margin: 20px 0 10px;
    display: none;
}

.the-menu .menu-item {
    font-size: 14px;
    line-height: 14px;
    margin: 0 0 2px 0;
    display: block;
    background-color: transparent;
    padding: 10px;
    border-radius: 5px;
    font-weight: 600;
    color: #364153;
}

.the-menu .menu-items .menu-item {
    width: calc(100% - 25px);
}

.the-menu .menu-item.active,
.the-menu .menu-item:hover {
    background-color: #f3f4f6;
    color: #364153;
    box-shadow: inset 0 0 0px 1px #ddd;
}

.the-menu .footer {
    position: absolute;
    bottom: 0px;
}

.the-menu .divide {
    padding: 5px 0 0 0;
    margin: 0 0 5px 0;
    border-bottom: 1px solid #ddd;
}

.the-menu .project-name {
    display: block;
    padding: 0px 0 5px 26px;
    font-weight: 700;
}

.the-menu .submenu {
    background: #f3f4f6;
    padding: 5px 10px 10px;
    width: calc(100% - 25px);
    margin: -5px 0 2px 0;
    border-radius: 0 0 5px 5px;
    box-shadow: inset 0 0 0px 1px #ddd !important;
}

.the-menu .submenu a {
    display: block;
    padding: 5px 0 5px 26px;
    font-weight: 500;
}

.the-menu .submenu a:hover,
.the-menu .submenu a.active {
    background: #e5e7eb;
    color: #364153;
}

.the-menu .submenu a.submenu-item-pid {
    padding: 5px 0 5px 46px;
}

.the-menu .menu-item .icon img {
    width: 16px;
    display: inline-block;
    filter: brightness(100) invert();
    margin: 0 10px 0 0;
}

.the-menu .menu-item i {
    font-size: 16px;
    width: 16px;
    text-align: center;
    margin: 0 10px 0 0;
}

.the-menu .menu-item-estimates i {
    color: #613a8d;
}

.the-menu .menu-item-projects i {
    color: #475c9d;
}

.the-menu .menu-item-reports i {
    color: #55a5a6;
}

.the-menu .menu-item-settings i {
    color: #68ab78;
}

.the-menu .menu-item-pro-services i {
    color: #97af7f;
}

.the-menu .menu-item-building-control i {
    color: #b3ac92;
}

.the-menu .menu-item-party-wall i {
    color: #966940;
}

.the-menu .menu-item-hse i {
    color: #a34f66;
}

.the-menu .menu-item-land i {
    color: #a860aa;
}

.the-menu .menu-item-tutorials i {
    color: #8477ad;
}

.menu-item-acc-tax {
    position: relative;
    padding-top: 20px; /* space above the line */
}

.menu-item-acc-tax::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%; /* or 100% if you want full width */
    height: 1px;
    background-color: #888;
    border-radius: 0;
}

.the-menu .menu-item-learn-trade i {
    color: #8ba0b3;
}

.the-menu .menu-item-feedback i {
    color: #54943e;
}

.the-menu .menu-item-mental-health i {
    color: #a19c4b;
}

.the-menu .menu-item-find-trader i {
    color: #a86b59;
}

.the-menu .menu-item-jobs i {
    color: #ac6f8e;
}

.the-menu .menu-item-plant i {
    color: #a584af;
}

.the-menu .menu-item-acc-tax i {
    color: #7e96c5;
}

.the-menu .menu-item-contracts i {
    color: #c97b4a;
}

.the-menu .menu-item-dev-training i {
    color: #4aa58f;
}

.the-menu .menu-item-insurance i {
    color: #793298;
}

.the-menu .menu-item-pers-finance i {
    color: #de8f8f;
}

.the-menu .menu-item-prop-finance i {
    color: #4290bd;
}

.the-menu .menu-item-planning i {
    color: #5e671d;
}

.the-menu .menu-item-renewables i {
    color: #5a9c7b;
}

.page-status .the-menu {
    display: none !important;
}

.page-status .site {
    width: calc(100vw - 40px) !important;
    float: unset;
}

/* page menu */

.page-nav {
    display: block;
    margin: 0 0 0px;
}

.page-nav a {
    display: inline-block;
    margin: 0 0 4px;
}

.page-nav a:hover {
}

a.page-link {
    margin: -120px 0 0px;
    position: absolute !important;
    display: block !important;
    background: #ce1717 !important;
    border: 0 !important;
    padding: 0 !important;
}

.line {
    display: block;
    border-bottom: 1px solid #bfdcfe;
    margin: 1px 0 6px;
}

/* filters v2 */
form.filters {
    /*padding: 5px 5px 5px;
        vertical-align: top;
        margin: 0 0 5px;
        box-shadow: 0 0 3px -1px #364153;
        border-radius: 3px;
        background: #f9f9f9;*/
}

form.filters input {
    padding: 5px;
}

form.filters select {
    padding: 5px 20px 5px 5px;
}

form.filters b,
form.filters select {
    margin: 0 10px 0 0;
}

/* Filter */
.filter {
    float: unset;
    margin: 0 0 10px 0;
    padding: 10px 10px 10px;
    border-radius: 5px;
    background: #000;
    color: #888;
    position: fixed;
    top: 90px;
    right: 10px;
    z-index: 5000;
    transition: all 0.3s ease-out;
}

.pro-app.filter {
    display: inline-block;
    /*width: 50%;
        margin: 0px 0 0px 0;
        vertical-align: top;
        padding: 5px 10px 0px;
        position: absolute;
        z-index: 100;*/
    width: calc(100% - 20px);
    margin: 0px 0 10px 0;
    vertical-align: top;
    padding: 10px 10px 5px;
    position: unset;
    background: #fff;
}

.filter.hide {
    transform: translateX(100%);
}

.filter .toggle-menu {
    position: absolute;
    margin: -4px 0 0 -29px;
    background: #888;
    padding: 5px;
    color: #364153;
    border-radius: 5px 0 0 5px;
    transition: all 0.3s ease-out;
}

.filter .toggle-menu:hover {
    background: #93c4fe;
    color: #364153;
}

.filter.hide .toggle-menu {
    /*position: fixed;
        margin: -4px 0 0 0px;
        right: 10px;
        padding: 5px 8px;
        border-radius: 5px;*/
}

.filter.hide .toggle-menu i {
    transform: rotate(180deg);
}

.filter b {
    margin: 0 10px 0 0;
}

.filter select {
    font-size: 11px;
    line-height: 15px;
    padding: 5px 18px 5px 5px;
    margin: 0 0px 5px 0;
}

/* Toggles */
.fa-toggle-on {
    color: #309148;
}

.fa-toggle-off {
    color: #ddd;
}

/*.filter input {
        min-height: 26px;
        max-height: 26px;
    }*/

.calendar-notes {
    display: inline-block;
    float: right;
}

.calendar-notes.popup h2 {
    font-size: initial;
    line-height: initial;
    background: #fff;
    padding: 20px 20px 15px;
    border-radius: 10px;
    /*border: 3px solid #93c4fe;*/
}

.calendar-notes.popup h2 span {
    font-weight: 400;
    text-transform: capitalize;
}

/* Ledger */
.ledger {
    overflow-x: scroll;
    display: inline-block;
    vertical-align: top;
    font-size: 11px;
    line-height: 16px;
    /*border-left: 4px solid #0db4ec;*/
    padding: 10px 5px 0px;
    border-radius: 5px;
    margin: 0 10px 10px 0;
    background: #fff;
    box-shadow: 0 0 5px -3px #364153;
    max-width: 1406px;
}

.ledger form {
    width: 1356px;
    border-radius: 3px;
    padding: 5px 5px 0;
    color: #364153;
    margin: 5px 0 10px 38px;
    line-height: 28px;
    background: #fff;
    box-shadow: 0 0 2px 0px #364153;
}

.ledger .row-head {
    width: 1396px;
    background: #ddd;
    padding: 5px;
    border-radius: 3px;
    margin: 0 0 5px 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 10px;
}

.ledger .row-result {
    width: 1396px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
}

.ledger .totals {
    margin: 0 0 10px 0;
}

.ledger .totals span {
    font-weight: 700;
}

.ledger .row-result:nth-child(odd) {
    background: #f9f9f9;
}

.ledger .row-result:nth-child(even) {
    background: #f4f4f4;
}

.ledger input,
.ledger textarea,
.ledger select,
.budgets input,
.budgets textarea,
.budgets select,
.wages input,
.wages textarea,
.wages select {
    padding: 2px 5px;
    border-radius: 3px;
    vertical-align: top;
    font-size: 11px;
    line-height: 15px;
    min-height: 22px;
    max-height: 22px;
    font-family: inherit;
}

.budgets input {
    padding: 2px 5px;
    border-radius: 3px;
    vertical-align: top;
    font-size: 11px;
    line-height: 15px;
    min-height: 22px;
    max-height: 22px;
    font-family: inherit;
    border: #adc5e2 solid 1px;
}

.ledger .admin-nav a {
    margin-top: 1px;
}

select,
.ledger select,
.wages select {
    padding: 2px 18px 2px 5px;
    background: #fff
        url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E')
        no-repeat right 5px top 55%;
    background-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

form .type select.paytype {
    width: 73px;
}

.ledger .row {
    display: inline-block;
}

.ledger .column {
    display: inline-block;
    padding: 0px 0 0 4px;
    vertical-align: top;
}

.ledger .row-result .column {
    padding: 4px 0 4px 4px;
}

.ledger .row-result.footer .column {
    padding: 0px 0 0px 4px;
    background: inherit;
}

.ledger .id {
    width: 36px;
}

.ledger .type {
    width: 100px;
}

.ledger .vo {
    width: 45px;
}

.ledger .supplier {
    width: 183px;
}

.ledger .invoice {
    width: 106px;
}

.ledger .invoice-check {
    width: 45px;
}

.ledger .date {
    width: 86px;
}

.ledger .vatrate {
    width: 54px;
}

.ledger .net,
.ledger .vat,
.ledger .gross,
.ledger .net2,
.ledger .vat2,
.ledger .gross2 {
    width: 73px;
}

.ledger .stages {
    width: 175px;
}

.ledger .descript {
    width: 260px;
    white-space: pre;
    overflow: hidden;
}

.ledger .credit-ref {
    width: 125px;
}

.ledger .credit-date {
    width: 86px;
}

.ledger .code {
    width: 66px;
}

.ledger .a-e-credit {
    width: 78px;
}

.ledger .notes {
    width: 208px;
    white-space: pre;
    overflow: hidden;
}

.ledger .descript:hover::before,
.ledger .notes:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    background-color: #555;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    bottom: 100%;
    margin: 0 0 0 0;
    transform: translateX(-50%);
    white-space: nowrap;
    max-width: 300px;
    white-space: pre-line;
}

.ledger input[name='invoice'] {
    width: 90px;
}

.ledger .admin-nav {
    width: auto;
    margin: 0;
    padding: 0px !important;
}

.ledger input[name='net'],
.ledger input[name='vat'],
.ledger input[name='gross'],
.ledger input[name='net2'],
.ledger input[name='vat2'],
.ledger input[name='gross2'] {
    width: 50px;
}

.ledger input[name='descript'] {
    width: 240px;
}

.ledger input[name='notes'] {
    width: 200px;
}

.ledger input[name='code'] {
    width: 60px;
}

.ledger input[name='credit-ref'] {
    width: 115px;
}

.ledger input[name='a-e-credit'] {
    width: 60px;
}

.ledger-form-hidden {
    display: none;
    padding: 10px;
}

.ledger-form-hidden.visible {
    display: block;
}

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

.pro-app input[name='date']:not([data-twc] *),
.pro-app input[name='credit-date']:not([data-twc] *) {
    width: 68px;
    min-width: 68px;
    /*vertical-align: top;*/
    min-height: 14px;
    /*max-height: 14px;*/
}

.row-result .type i {
    min-width: 18px;
    font-size: 15px;
    line-height: 10px;
    vertical-align: middle;
    text-align: center;
    margin: 0 1px 0 0;
}

.row-result.type-0 .type i {
    /* Incoice A&E */
    color: #ce1717;
}

.row-result.type-4 .type i {
    /* Incoice Client */
    color: #131de4;
}

.row-result.type-1 .type i {
    /* Cash A&E */
    color: #ce1717;
}

.row-result.type-5 .type i {
    /* Cash Client */
    color: #131de4;
}

.row-result.type-2 .type i {
    /* Credit A&E */
    color: #04a700;
}

.row-result.type-3 .type i {
    /* Credit Client */
    color: #38e1b7;
}

.ledger .row-result .net,
.ledger .row-result .net2 {
    background: #d2edf6;
}

.ledger .row-result .vat,
.ledger .row-result .gross,
.ledger .row-result .vat2,
.ledger .row-result .gross2 {
    background: #eaf2f5;
}

.check-1 .invoice-check i {
    color: #04a700;
    min-width: 32px;
    text-align: center;
    font-size: 18px;
    line-height: 10px;
    vertical-align: sub;
}

.check-0 .invoice-check i {
    color: #ce1717;
    min-width: 32px;
    text-align: center;
    font-size: 18px;
    line-height: 10px;
    vertical-align: sub;
}

.type-1 {
}

.vo-0 .vo i {
    color: #a776d2;
    min-width: 14px;
    text-align: center;
    font-size: 16px;
    line-height: 10px;
    vertical-align: sub;
}

.vo-1 .vo i {
    color: #df9b4d;
    min-width: 14px;
    text-align: center;
    font-size: 16px;
    line-height: 10px;
    vertical-align: sub;
}

.vos {
    display: block;
    line-height: 14px;
    vertical-align: top;
    margin: 5px 0 0 0;
}

.vos span {
    display: block;
    background: #d7c1eb;
    vertical-align: top;
    padding: 3px 1px 3px 5px;
    margin: 0 0 0 -5px;
}

.vos span.vo {
    background: #f1d2af;
}

.symbol .vos span {
    color: #a776d2;
    background: transparent;
}

.symbol .vos span.vo {
    color: #df9b4d;
    background: transparent;
}

select.select-standard {
    display: inline-block;
}

select.select-vo {
    display: none;
}

/* Budgets */
/*.budgets {
        width: auto;
        display: inline-block;
        border-left: 4px solid #a776d2;
        padding: 10px 5px 5px;
        border-radius: 5px;
        margin: 0 10px 10px 0;
        vertical-align: top;
        background: #fff;
        box-shadow: 0 0 5px -3px #364153;
        font-size: 11px;
    }*/
/*.budgets-vo {
        border-color: #df9b4d;
    }*/
.single-budget {
    width: auto;
    line-height: 28px;
    padding: 5px 0px;
    /*border-bottom: 1px solid #ddd;*/
}

.single-budget form {
    padding: 0;
    border-radius: 5px;
    display: inline-block;
    position: relative;
}

.single-budget .single-row-wrapper {
    grid-column: span 8;
    display: grid;
    /*grid-template-columns: repeat(10, 1fr);*/
    grid-template-columns: 170px repeat(5, 1fr) 75px;
    align-items: center;
    cursor: pointer;
}

.single-budget .single-row-wrapper .editBtn {
    margin: 3px;
}

.single-budget .single-row-wrapper .close-data {
    display: none;
}

.single-budget .single-row-wrapper .close-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: #000;
    width: fit-content;
}

.single-budget .single-row-wrapper.open {
    background-color: #e5e7eb;
    border-radius: 5px 5px 0px 0px;
}

.single-budget .hidden-row-wrapper {
    display: none;
    grid-column: span 11;
    gap: 10px;
    flex-direction: column;
    /*padding: 5px;*/
    background-color: #fff;
    border-radius: 0px 0px 5px 5px;
    box-shadow: inset 0px 0px 0px 2px #e5e7eb;
}

.single-budget .hidden-row-wrapper.visible {
    display: flex;
}

.single-budget .hidden-row-wrapper .hidden-section-wrapper {
    padding: 10px;
    display: grid;
    align-items: center;
    background-color: #fff;
    margin: 10px;
    border-radius: 5px;
}

.budget-section-header {
    font-size: 14px;
    margin-bottom: 10px;
    border-bottom: #e5e7eb solid 1px;
}

.budget-section-header span {
    font-weight: normal !important;
}

.duration-section-header {
    font-size: 14px;
    margin-bottom: 10px;
    border-bottom: #e5e7eb solid 1px;
}

.duration-section-header span {
    font-weight: normal !important;
}

.single-budget .hidden-row-wrapper .hidden-section-wrapper span {
    font-weight: bold;
}

.section-invoices,
.section-materials,
.section-credits {
    grid-template-columns: repeat(4, 1fr);
}

.section-profit {
    grid-template-columns: repeat(6, 1fr);
}

.section-profit-estimate {
    grid-template-columns: repeat(5, 1fr);
}

.section-profit-old,
.section-duration {
    grid-template-columns: repeat(2, 1fr);
}

.section-profit-vo-old {
    grid-template-columns: repeat(3, 1fr);
}

.single-budget .section-profit-running {
    display: none;
}

.section-profit button {
    width: fit-content;
    height: fit-content;
    padding: 15px 20px;
}

.section-invoices > :nth-child(1),
.section-duration > :nth-child(1),
.section-profit > :nth-child(1),
.section-credits > :nth-child(1),
.section-materials > :nth-child(1),
.section-profit-estimate > :nth-child(1),
.section-profit-old > :nth-child(1),
.section-profit-vo-old > :nth-child(1) {
    grid-column: 1 / -1;
}

.section-invoices > :nth-child(n + 2),
.section-duration > :nth-child(n + 2),
.section-profit > :nth-child(n + 2),
.section-credits > :nth-child(n + 2),
.section-materials > :nth-child(n + 2),
.section-profit-old > :nth-child(n + 2),
.section-profit-vo-old > :nth-child(n + 2) {
    grid-column: auto;
}

.hidden-row-wrapper .stage-budget {
    display: flex;
    flex-direction: column;
}

.single-budget div {
    display: inline-block;
    vertical-align: top;
    /*min-width: 90px;*/
    padding: 0 0px;
}

.budgets-standard .single-budget {
    display: grid;
    /*grid-template-columns: repeat(10, 1fr);*/
    grid-template-columns: 170px repeat(5, 1fr) 75px;
    border-radius: 5px;
}

.budgets-vo .single-budget {
    display: grid;
    /*grid-template-columns: repeat(12, 1fr);*/
    grid-template-columns: 170px repeat(5, 1fr) 75px;
    border-radius: 5px;
}

.budgets-all .single-budget .invoices,
.budgets-all .single-budget .cash {
    min-width: 85px;
}

.budgets-all .scroll-box .single-budget {
    padding: 5px 0px;
}

.single-budget .name {
    /*min-width: 185px;*/
    /*width: 190px;*/
    padding: 0 0px 0 5px;
}

.single-budget .name a,
.single-budget .name form {
    float: right;
    margin: 0px 10px 0 5px;
}

.single-budget .hours {
    /*min-width: 60px;*/
}

.single-budget .out,
.single-budget .running {
    padding: 0 0 0 5px;
}

/*.scroll-box .single-budget .out {
        background: #eaf2f5;
    }
    .scroll-box .single-budget .running {
        background: #d2edf6;
    }*/
/*.single-budget:nth-child(even) {
        background: #f9f9f9;
    }*/
.single-budget:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.single-budget .budget input {
    max-width: 63px;
    margin: 1px 0 0px;
}

.single-budget .cust-out {
    padding: 0 0 0 5px;
}

/*.scroll-box .single-budget .cust-out {
        background: #eaf2f5;
    }
    .scroll-box .single-budget .cust-wage {
        background: #eaf2f5;
    }*/
.budgets-standard .single-budget .cust-out,
.budgets-standard .single-budget .cust-wage,
.budgets-standard .single-budget .cust-saving {
    display: none;
}

.single-budget.negative,
.single-budget.negative .single-row-wrapper {
    background: #f2d9d9 !important;
}

.single-budget.negative .out {
    color: #ce1717;
}

.single-budget.heading {
    background: #fff;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    border-radius: 0;
}

/*.single-budget.heading div {
        background: #ddd;
    }*/
.single-budget.footer,
.single-wage.footer,
.row-result.footer {
    border-top: 1px solid #ddd;
    background: #fff !important;
    font-weight: 600;
    border-radius: 0;
}

/* .single-budget.footer {
        width: calc(100% - 20px);
    } */

/* wages */
.wages {
    width: auto;
    display: inline-block;
    /*border-left: 4px solid #0dd4ec;*/
    padding: 10px 10px 5px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 22px;
    vertical-align: top;
    background: #fff;
    box-shadow: 0 0 5px -3px #364153;
    margin: 0 10px 10px 0;
}

.wages-weekly {
    border-color: #a776d2;
    margin: 0 10px 10px 0;
    line-height: 16px;
}

/*.type-all,
    .budgets-all,
    .all-staff {
        border-color: #66a30d;
    }
    .wages-weekly.type-vo {
        border-color: #df9b4d;
    }*/
.single-wage {
    padding: 1px 5px 1px;
    border-bottom: 1px solid #ddd;
}

form .single-wage {
    border-bottom: 0;
}

.wages-list .project-wages,
#recent-wages .project-wages {
    margin: 0 -5px;
}

.project-wages .table-header {
    border-bottom: 1px solid #ddd;
}

.project-wages .table-footer {
    font-weight: 600;
}

.list-ledger .table-header {
    border-bottom: 1px solid #ddd;
}

.wages-list form div {
    display: inline-block;
}

.single-wage div {
    display: inline-block;
    vertical-align: top;
    margin: 0 0px 0px 0;
    padding: 0 5px;
}

.single-wage .name {
    width: 146px;
}

.wages-weekly .single-wage .name,
.type-all .single-wage .name {
    width: 82px;
}

.single-wage .staff {
    width: 160px;
}

.single-wage select[name='staffID'] {
    width: 150px;
}

.single-wage .stage {
    width: 166px;
}

.single-wage .date {
    width: 75px;
}

.single-wage .hours {
    width: 38px;
}

.single-wage .note {
    width: 260px;
}

.single-wage .vo {
    width: 45px;
}

.single-wage .total {
    width: 43px;
}

.wages-weekly .single-wage .total,
.type-all .single-wage .total {
    width: 60px;
}

.budgets-vo input#sName {
    width: 140px;
}

.single-wage .admin-nav,
.no-width {
    width: unset;
    min-width: unset !important;
}

.wages-list input[name='hours'] {
    width: 30px;
}

.wages-list input[name='note'] {
    width: 250px;
}

.wages-list .wages-form {
    border-radius: 3px;
    padding: 5px 5px 2px;
    color: #364153;
    margin: 5px 0 10px;
    line-height: 28px;
    background: #fff;
    box-shadow: 0 0 2px 0px #364153;
    width: calc(100% - 12px);
}

.wages-list .wages-form div {
    padding: 0px;
}

.wages-list .wages-form div div {
    padding: 0px 5px;
}

.single-wage.heading {
    background: #ddd !important;
    padding: 5px;
    border-radius: 3px;
    margin: 0 0 5px 0;
    border-bottom: 1px solid #ddd;
    font-size: 10px;
    font-weight: 600;
    line-height: 10px;
    display: inline-block;
    width: calc(100% - 10px);
    white-space: nowrap;
}

.single-wage.week {
    font-size: 11px;
    padding: 0px 10px 0px;
    margin: 0px 0 0px 0;
    background: #fff !important;
}

.single-wage.week i {
}

.single-wage.total {
    margin: 0px 0 0px;
}

.wages .single-wage:nth-child(odd) {
    background: #f9f9f9;
}

.wages .single-wage:nth-child(even) {
    background: #f4f4f4;
}

.date-gap {
    margin: 0px 0 15px;
}

.vo-stage-form-hidden {
    display: none;
}

.vo-stage-form-hidden.visible {
    display: block;
}

.standard-stage-form-hidden {
    display: none;
}

.standard-stage-form-hidden.visible {
    display: block;
}

.vo-stages-form {
    border-radius: 5px;
    padding: 0px 0px 25px 0px;
    margin-bottom: 10px;
    color: #364153;
    line-height: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #ddd;
    gap: 5px;
    overflow: hidden;
}

.vo-stages-form input {
    margin: 0 5px;
}

.vo-stages-form div:first-child {
    background-color: #bfdcfe;
    padding: 10px;
}

.vo-stages-form div:first-child,
.vo-stages-form div:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.vo-stages-form div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vo-stages-form .vo-form-stage {
    position: static;
}

.addVoStageBtn,
.addStandardStageBtn {
    padding-bottom: 10px;
}

.open-std-form,
.open-vo-form {
    cursor: pointer;
}

.addVoStageBtn .close-form,
.addStandardStageBtn .close-form {
    cursor: pointer;
}

.scroll-box {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.ledger .scroll-box {
    width: 1406px;
}

.wages-weekly .scroll-box {
    max-height: 351px;
}

.budgets .scroll-box {
    max-height: 316px;
}

/* Master Totals */

/* Master Staff Totals */

.all-staff {
}

.all-staff .single-wage .name {
    width: 100px;
}

.all-staff .single-wage .total {
    width: 80px;
}

.all-staff .single-wage .cis {
    width: 80px;
}

.all-staff .single-wage.month-total {
    margin: 0px 0 20px;
    background: #fff !important;
    font-weight: 600;
    font-size: 11px;
    border: none;
}

.all-staff .month-date {
    font-size: 11px;
    padding: 0px 10px 0px;
    margin: 0px 0 0px 0;
    background: #fff !important;
    font-weight: 600;
}

.all-staff .single-wage .line {
    display: block;
    border-bottom: 1px solid #888;
    margin: 3px 5px 3px;
}

.budgets-all .single-budget .name {
    min-width: 100px;
}

.suppliers-all .single-budget .name {
    min-width: 200px;
}

.budgets-all .single-budget .symbol {
    min-width: 25px;
}

.no-data {
    color: #ce1717;
    padding: 5px 0px;
    display: inline-block;
}

.access-error h1 {
    /* Removed the color for consistency*/
}

.grecaptcha-badge {
    display: none !important;
}

.graph .tab {
    display: block;
    /*position: absolute;*/
    position: fixed;
    z-index: -1;
}

.graph .tab.show {
    display: block;
    position: relative;
    z-index: 1;
}

.category-graph .graph-box {
    display: block;
    height: 200px;
}

/* Scrollbar */
:root,
root,
html {
    scrollbar-color: #e5e7eb #ddd !important;
    scrollbar-width: thin !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 5px;
    background-color: transparent;
    background-color: #fff;
    /*background-color: #d1d8e1;*/
}

::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: none;
    /*background-color: #1f41af;*/
    background-color: #e5e7eb;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #dae3f2;
}

::-webkit-scrollbar-thumb:active {
    background-color: #dae3f2;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    /*background-color: #d1d8e1;*/
    background-color: #fff;
    border-radius: 0px;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
    /*background-color: #d1d8e1;*/
}

/* Scrollbar firefox ?? */
::-moz-scrollbar,
::-ms-scrollbar {
    width: 8px;
    height: 5px;
    background-color: transparent;
    background-color: #fff;
    /*background-color: #d1d8e1;*/
}

::-moz-scrollbar-thumb:horizontal,
::-ms-scrollbar-thumb:horizontal {
    width: 5px;
    height: 5px;
}

::-moz-scrollbar-thumb,
::-ms-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    /*background-color: #1f41af;*/
    background-color: #e5e7eb;
}

::-moz-scrollbar-thumb:hover,
::-ms-scrollbar-thumb:hover {
    background-color: #dae3f2;
}

::-moz-scrollbar-track,
::-ms-scrollbar-track {
    background-color: transparent;
    /*background-color: #d1d8e1;*/
    border-radius: 0px;
}

::-moz-scrollbar-corner,
::-ms-scrollbar-corner {
    background-color: transparent;
    /*background-color: #d1d8e1;*/
}

::-moz-scrollbar-thumb:active,
::-ms-scrollbar-thumb:active {
    background-color: #dae3f2;
}

/*.ledger ::-webkit-scrollbar-thumb {
        background-color: #0db4ec;
    }
    .wages ::-webkit-scrollbar-thumb {
        background-color: #0dd4ec;
    }
    .type-standard ::-webkit-scrollbar-thumb,
    .budgets ::-webkit-scrollbar-thumb {
        background-color: #a776d2;
    }
    .type-vo ::-webkit-scrollbar-thumb,
    .budgets-vo ::-webkit-scrollbar-thumb {
        background-color: #df9b4d;
    }
    .type-all ::-webkit-scrollbar-thumb,
    .budgets-all ::-webkit-scrollbar-thumb,
    .suppliers-all ::-webkit-scrollbar-thumb,
    .all-staff ::-webkit-scrollbar-thumb {
        background-color: #66a30d;
    }*/

/* end */

.project-ledger.inline-form-parent {
    margin: 0 -5px;
}

/* Copyright, Version, powered by */
.version {
    font-size: 10px;
    line-height: 10px;
}

footer .version {
    padding: 3px 4px;
    background: rgba(255, 255, 255, 0.3);
    color: #364153;
    border-radius: 3px;
    float: right;
}

/* POPUP */
.popup {
    position: fixed;
    width: 100vw;
    left: 0px;
    top: 0px;
    z-index: 9999;
    height: 100vh;
    background: #eff6ff !important;
    text-align: center;
}

.popup h2 {
    color: #888 !important;
    display: inline-block;
    font-size: 50px !important;
    line-height: 50px !important;
    margin: calc(50vh - 25px) 0 0 0 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}

.popup h2 span {
    font-weight: 600 !important;
    color: #93c4fe !important;
    font-size: 20px;
    line-height: 20px;
    vertical-align: top;
    margin: 5px auto;
    display: block;
    text-align: center;
}

.popup h2 span:before {
    content: '[';
    display: inline-block;
    position: relative;
}

.popup h2 span:after {
    content: ']';
    display: inline-block;
    position: relative;
}

.popup .info {
    font-size: 12px;
    line-height: 14px;
    margin: 10px auto 0;
    display: block;
    background: #333;
    color: #888;
    padding: 8px;
    position: relative;
    width: fit-content;
    text-transform: initial;
    font-weight: 500;
}

.wp-admin .admin-area .card {
    max-width: unset;
    /*width: calc(100% - 20px);*/
}

.box-50 {
    width: calc(50% - 10px);
    display: inline-block;
    vertical-align: top;
}

.builder-details .labour-rates span,
.builder-details .fixed-costs span {
    display: inline-block;
    width: 200px;
}

.recent-scroll {
    width: 100% !important;
    overflow: scroll;
}

.row-wrapper.day-Saturday,
.row-wrapper.day-Sunday {
    background: #e9f0f8;
}

.row-wrapper.day-Saturday:nth-child(2n),
.row-wrapper.day-Sunday:nth-child(2n) {
    background: #d1d8e1;
}

/* Margins Page CSS Changes */
.totals .margin-actions {
    text-align: right;
    vertical-align: middle;
}

/* Day of week background colours on ledger */
.day-saturday {
    /*background: #d9dff3 !important;*/
}

.day-sunday {
    background: #e5e0f1 !important;
}

/*Info Icon Popup Styling */
.info-container {
    position: relative;
    display: inline-block;
}

.info-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    background-color: #4073dc;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
}

.info-popup {
    display: none !important;
}

.info-popup.visible {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #333;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    min-width: 150px;
    max-width: 300px;
    text-align: center;
    font-size: 12px;
    font-weight: normal;
}

.modal-start-input {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Badges */

.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 5px 5px;
    font-size: 10px;
    line-height: 10px;
    font-weight: 500;
    white-space: nowrap;
    justify-content: center;
    text-transform: capitalize;
}

.status-gray {
    background-color: #f3f4f6;
    color: #374151;
    box-shadow:
        inset 0 0 0 0px #fff,
        inset 0 0 0 calc(1px + 0px) rgba(55, 65, 81, 0.5),
        inset 0 0 #000;
}

.status-blue {
    background-color: #dbeafe;
    color: #1d4ed8;
    box-shadow:
        inset 0 0 0 0px #fff,
        inset 0 0 0 calc(1px + 0px) rgba(59, 130, 246, 0.5),
        inset 0 0 #0000;
}

.status-red {
    background-color: #fee2e2;
    color: #b91c1c;
    box-shadow:
        inset 0 0 0 0px #fff,
        inset 0 0 0 calc(1px + 0px) rgba(185, 28, 28, 0.5),
        inset 0 0 #0000;
}

.status-green {
    background-color: #dcfce7;
    color: #15803d;
    box-shadow:
        inset 0 0 0 0px #fff,
        inset 0 0 0 calc(1px + 0px) rgba(21, 128, 61, 0.5),
        inset 0 0 #0000;
}

.status-yellow {
    background-color: #fef9c3;
    color: #a16207;
    box-shadow:
        inset 0 0 0 0px #fff,
        inset 0 0 0 calc(1px + 0px) rgba(234, 178, 8, 0.5),
        inset 0 0 #0000;
}

.status-indigo {
    background-color: #e0e7ff;
    color: #4338ca;
    box-shadow:
        inset 0 0 0 0px #fff,
        inset 0 0 0 calc(1px + 0px) rgba(67, 56, 202, 0.5),
        inset 0 0 #0000;
}

.status-purple {
    background-color: #f3e8ff;
    color: #7e22ce;
    box-shadow:
        inset 0 0 0 0px #fff,
        inset 0 0 0 calc(1px + 0px) rgba(126, 34, 206, 0.5),
        inset 0 0 #0000;
}

.status-pink {
    background-color: #fce7f3;
    color: #be185d;
    box-shadow:
        inset 0 0 0 0px #fff,
        inset 0 0 0 calc(1px + 0px) rgba(190, 24, 93, 0.5),
        inset 0 0 #0000;
}

.status-orange {
    background-color: #ffedd5;
    color: #c2410c;
    box-shadow:
        inset 0 0 0 0px #fff,
        inset 0 0 0 calc(1px + 0px) rgba(194, 65, 12, 0.5),
        inset 0 0 #0000;
}

.status-teal {
    background-color: #ccfbf1;
    color: #0f766e;
    box-shadow:
        inset 0 0 0 0px #fff,
        inset 0 0 0 calc(1px + 0px) rgba(15, 118, 110, 0.5),
        inset 0 0 #0000;
}

.status-badge.font-xs {
    font-size: 10px;
    line-height: 10px;
}

.status-badge.font-sm {
    font-size: 12px;
    line-height: 12px;
}

.status-badge.font-md {
    font-size: 14px;
    line-height: 14px;
}

.status-badge.font-lg {
    font-size: 16px;
    line-height: 16px;
}

.status-badge.font-xl {
    font-size: 18px;
    line-height: 18px;
}

p.admin {
    color: #993333;
}

/* Media Queries */
@media screen and (max-width: 767px) {
    .project-list {
        margin: 0px;
    }

    /*.single-project,*/
    form.add-project,
    .uwp-registration-off,
    .uwp-login-off,
    .uwp-account-off .uwp-account-form {
        /*width: calc(100% - 24px) !important;*/
    }

    .pro-home .single-project,
    .single-project {
        /*width: calc(100% - 4px) !important;*/
    }

    .budgets {
        margin: 0;
    }

    .card-budget-new {
        background: none !important;
    }

    form.file-upload,
    form.upload-plan {
        /* width: calc(100% - 20px);
            margin: 0 0 10px; */
    }

    .form-gap {
        display: none;
    }

    .card.graph {
    }

    .overview-section .business-logo {
        width: 50px;
        /*height: 80px;*/
        line-height: 0px;
    }

    .overview-section .category-sub span {
        line-height: 18px;
        font-size: 18px;
        padding: 5px;
        margin: 12px 0 0 5px;
    }

    .overview-section .category-sub .percent-value {
        margin: 14px -50px 0 10px;
        width: 40px;
        line-height: 22px;
        font-size: 18px;
    }

    .overview-section .category-sub b {
        margin: 3px 0 0 0;
    }

    .overview-section .category-sub span {
        margin: 0px 0 0 5px;
    }

    .overview-section .percent-sub b {
        margin: 13px 0 0 0;
    }

    /*.overview-section.positive .percent-value {
            background: #b8d3bb;
        }
        .overview-section.negative .percent-value {
            background: #ddb2b2;
        }*/
    .pro-app.fixed-costs form label {
        display: block;
    }

    .overview-section .pie-box {
        width: 40px;
        height: 40px;
        margin: 5px 0 0 10px;
    }

    .estimate-overview .option {
        max-width: calc(100% - 20px);
        float: unset;
        padding: 20px;
    }

    .estimate-overview .estimate-spec {
        margin: 0px 0 0 0;
        max-width: calc(100% - 40px);
    }

    .estimate-overview .nav.float {
        /*margin: 10px 0 0 0;
            float: unset;*/
        margin: -22px 0 0 0;
        float: right;
    }

    .estimate-overview .option .status {
        /*margin: -5px -5px 0px 0;*/
        margin: 0px 0px 10px 0;
        float: unset;
    }

    .estimate .totals td {
        display: block;
        line-height: 20px;
        margin: 0 0 10px;
    }

    .estimate-list {
        table-layout: auto;
    }

    .project-card {
        width: calc(100% - 40px);
        margin: 0 0px 10px 0;
    }

    .project-card:nth-child(even) {
        margin: 0 0 10px 0;
    }

    form.estimate {
        overflow-x: scroll;
    }

    .upload-plan .documents .document {
        margin: 0 0 20px;
    }

    .upload-plan .documents .filename {
        font-size: 12px;
        margin: 0;
    }

    .upload-plan .documents .filname b {
        display: block;
    }

    .project-header {
        overflow: scroll;
    }

    .project-header .table-header,
    .project-header .table-row {
        width: 1200px;
    }

    /*.project-wage-ledger.scroll-box .row-wrapper,
        .table-header.hidden-form-fields.grid-col-8 {*/
    .wages-list .grid-col-8,
    .wages-list .wrapper {
        width: 1000px;
    }

    .project-wages.inline-form-parent .scroll-box {
        overflow-y: unset;
        overflow-x: unset;
    }

    .wages-list .project-wages {
        overflow-x: scroll;
        overflow-y: scroll;
    }

    .project-ledger.scroll-box {
        overflow-x: hidden;
        overflow-y: scroll;
        width: 1300px;
    }

    .project-ledger.scroll-box .row-wrapper {
        width: 1300px;
    }

    .project-ledger.inline-form-parent {
        overflow: scroll;
        width: 100%;
        /*height: 50vh;*/
    }

    .wages-list .table-header.hidden-form-fields {
        width: 1000px;
    }

    .list-ledger-form .table-header.grid-col-10 {
        gap: 0px;
    }

    .list-ledger-form .project-ledger.inline-form-parent {
        overflow: hidden;
    }

    .list-ledger-form .project-ledger.scroll-box {
        overflow: scroll;
        width: 100% !important;
    }

    .wages-list .filters select,
    .list-ledger .filters select {
        margin: 0 0 5px 5px;
    }

    .wages-list .filters .search-box,
    .list-ledger .filters .search-box {
        float: unset;
        margin: 10px 0 0 0;
    }

    .frontend-bc-grid {
        display: inline-block;
        margin: 0 0 20px 0;
        line-break: strict;
        width: 100%;
        grid-template-columns: none !important;
    }

    .frontend-bc-grid div:first-of-type {
        font-weight: 600;
    }

    .list-title,
    .mobile-hide {
        display: none !important;
    }

    .mobile-scroll {
        overflow: scroll;
    }

    #recent-wages .table-header.hidden-form-fields.grid-col-8 {
        width: unset;
    }

    .recent-wages {
        width: 100%;
        overflow-y: unset !important;
        overflow-x: scroll !important;
    }

    .recent-wages .row-wrapper {
        width: 1000px;
    }

    .mobile-scroll-x {
        overflow-x: scroll;
    }

    .mobile-scroll-y {
        overflow-y: scroll;
        overflow-x: hidden;
        max-height: 70vh;
        width: 1020px;
    }

    .learn-row {
        width: 1000px;
    }

    .cis-gross-grid {
        width: 1200px;
    }

    .project-ledger .project-ledger {
        width: 1300px;
    }

    .pro-app form.add-estimate label:not([data-twc] *) {
        display: block;
    }

    form.labour-rates-form label {
        display: block;
    }

    .version {
        font-size: 9px;
        line-height: 9px;
    }

    .section-credits.page-reports .card-container,
    .section-dashboard .card-container {
        flex-direction: column;
        gap: 0px;
    }

    .section-credits.page-reports .card-container p,
    .section-dashboard .card-container p {
        flex-direction: row;
        gap: 20px;
        text-align: center;
        line-height: 30px;
    }
}

@media screen and (min-width: 600px) {
    .hamburger {
        display: inline-block;
    }

    .the-menu .site-title {
        position: fixed;
        padding: 10px 0;
        display: block;
        background-color: #fff;
        width: 100vw;
        top: 0;
        left: 0;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    .the-menu {
        top: 55px;
        height: calc(100vh - 95px);
        left: -260px;
    }

    .project-card .spec .customer {
        margin: 0;
    }

    .project-profit .out .master-total {
        margin: unset;
    }

    .project-card .spec {
        display: inline-block;
    }

    .project-card .stats {
        float: right;
        margin: 0px 0 0 0;
    }
}

@media screen and (min-width: 960px) {
    .hamburger {
        display: none;
    }

    .the-menu .site-title {
        position: unset;
        padding: 0px;
        display: block;
        background-color: unset;
        width: inherit;
        top: unset;
        left: unset;
        text-align: inherit;
        border-bottom: unset;
    }

    .the-menu {
        top: 0px;
        height: calc(100vh - 40px);
        left: 0px;
    }
}

@media screen and (max-width: 1440px) {
    .list-ledger .table-header.hidden-form-fields,
    .list-ledger .project-ledger .project-ledger {
        width: 1400px;
    }

    .project-ledger.scroll-box .row-wrapper {
        width: 1400px;
    }

    .list-ledger .project-ledger.inline-form-parent {
        overflow: scroll;
        width: 100%;
    }

    .project-ledger.scroll-box {
        overflow-x: hidden;
        overflow-y: scroll;
        width: 1400px;
    }

    .recent-scroll-box {
        overflow: scroll;
        width: 100%;
    }

    .section-credits .credit-card {
        overflow-x: scroll;
    }

    .section-credits.page-reports .grid-row,
    .grid-header,
    .grid-footer {
        grid-template-columns: 60px 100px 1fr 90px 1fr 130px 130px 130px 130px 1fr 1fr;
    }

    .section-credits.page-reports .card-container p,
    .section-dashboard .card-container p {
        font-size: 18px;
    }

    .section-credits.page-reports .card-container .card,
    .section-dashboard .card-container .card {
        padding: 10px !important;
    }
}

@media (max-width: 959px) {
    .stacked-form-input-together {
        flex-direction: column !important;
    }

    .stacked-form-container input {
        width: calc(100% - 40px) !important;
    }

    .stacked-form-container select {
        width: calc(100% - 50px) !important;
    }

    .hidden-section-wrapper input {
        width: 75px;
    }

    .single-budget .profit {
        display: none;
    }

    .single-budget .margin {
        display: none;
    }

    .budgets-standard .single-budget,
    .budgets-vo .single-budget {
        /*grid-template-columns: repeat(10, 1fr);*/
        grid-template-columns: 170px repeat(3, 1fr) 75px;
    }

    .single-budget .single-row-wrapper {
        grid-column: span 6;
        display: grid;
        /*grid-template-columns: repeat(10, 1fr);*/
        grid-template-columns: 170px repeat(3, 1fr) 75px;
        align-items: center;
    }

    .section-credits.page-reports .card-container p,
    .section-dashboard .card-container p {
        font-size: 16px;
        text-wrap: nowrap;
    }
}

@media (max-width: 600px) {
    /* was 660 */
    .estimate-list td.profit {
        display: none;
    }

    .page-projects table.estimate-list td.profit,
    .page-projects table.estimate-list td.markup {
        display: none;
    }

    .estimate-list td button i {
        font-size: 32px;
    }

    .stacked-form-container {
        padding: 20px;
        max-width: 100%;
    }

    .section-attachPayment div.card {
        flex-direction: column-reverse;
    }

    .section-attachPayment div.card div:first-child {
        width: 100%;
    }

    #preprocess-intent-form div.payment-button-container {
        gap: 0px;
    }

    .section-attachPayment div.card > div:last-child {
        width: calc(100% - 30px);
        padding: 15px;
    }

    .the-menu {
        top: 55px;
        height: calc(100vh - 95px);
        left: -260px;
    }

    .hamburger {
        display: inline-block;
    }

    .the-menu .site-title {
        position: fixed;
        padding: 16px 0 15px;
        display: block;
        background-color: #fff;
        width: 100vw;
        top: 0;
        left: 0;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    .budget-section-header {
        text-align: center;
    }

    .single-budget .profit {
        display: none;
    }

    .single-budget .running {
        display: none;
    }

    .single-budget .section-profit-running {
        display: inline-block;
    }

    .budgets-standard .single-budget,
    .budgets-vo .single-budget {
        /*grid-template-columns: repeat(10, 1fr);*/
        grid-template-columns: 125px repeat(2, 1fr) 75px;
    }

    .single-budget .single-row-wrapper {
        grid-column: span 6;
        /*grid-template-columns: repeat(10, 1fr);*/
        grid-template-columns: 125px repeat(2, 1fr) 75px;
    }

    .single-budget .edit,
    .single-budget .budget,
    .single-budget .out,
    .single-budget .budgets {
        text-align: center;
    }

    .section-invoices,
    .section-duration,
    .section-credits,
    .section-materials,
    .section-duration,
    .section-profit,
    .section-profit-vo-old {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-row: auto auto;
    }

    .edit-data span {
        display: none;
    }

    .close-data span {
        display: none;
    }

    .single-row-wrapper .editBtn {
        display: flex;
        justify-content: center;
        align-items: start;
    }

    .vo-stages-form {
        grid-template-columns: 1fr 1fr;
    }

    .section-credits.page-reports .card-container,
    .section-dashboard .card-container {
        margin: 0 0 20px 0;
    }

    .section-credits.page-reports .card-container .card,
    .section-dashboard .card-container .card {
        margin: 0 0 5px 0;
        justify-content: start;
    }

    .section-credits.page-reports .card-container .card p,
    .section-dashboard .card-container .card p {
        margin: 0;
    }
}

@media (max-width: 480px) {
    .vo-stages-form {
        grid-template-columns: 1fr;
    }

    .vo-stages-form :first-child {
        flex-direction: column;
    }
}

/*@media (max-width: 830px) {
    .totals .margin-actions a {
        margin: 2px;
    }
}

@media (max-width: 835px) {
    .totals .margin-actions {
        text-align: left;
    }
}*/