@font-face {
    font-family: Inter;
    src: url(../assets/fonts/Inter_18pt-Regular.ttf)
}

:root {
    --primary-color: #1A2D72;
    --text-color: #1D1D1F;
    --secondary-color: #C70039;
    --h-color: #191B1C;
    --static-text: #737982;
    --link-text: #003399;
    --white: #FFFFFF;
    --gray: #F5F6F7;
    --disable-grey: #737982;
    --light-blue: #DFF1FA;
    --border-color: #EFF2F5;
    --line-color: #E5E7E8
}

.invoice-body {
    margin: 0;
    font-family: Inter
}

    .invoice-body header {
        padding: 24px;
        box-shadow: 0 16px 24px -6px #1b242C29
    }

.fs-h1 {
    font-size: 48px
}

.fs-h2 {
    font-size: 32px
}

.fs-h3 {
    font-size: 24px
}

.fs-h4 {
    font-size: 20px
}

.lh-h1 {
    line-height: 56px
}

.lh-h2 {
    line-height: 40px
}

.lh-h3 {
    line-height: 32px
}

.lh-h4 {
    line-height: 28px
}

.fw-700 {
    font-weight: 700
}

.fw-600 {
    font-weight: 600
}

.fw-500 {
    font-weight: 500
}

.fs-p-1 {
    font-size: 20px
}

.fs-p-2 {
    font-size: 18px
}

.fs-p-3 {
    font-size: 28px
}

.lh-p-1 {
    line-height: 28px
}

.lh-p-2 {
    line-height: 20px
}

.lh-p-3 {
    line-height: 32px
}

.ls-1 {
    letter-spacing: 1px
}

.invoice-body p {
    margin-bottom: 0 !important
}

.bg-blue {
    background-color: var(--light-blue) !important
}

.bg-gray {
    background-color: var(--gray) !important
}

.primary-text {
    color: var(--primary-color) !important
}

.common-text {
    color: var(--text-color) !important
}

.white-text {
    color: var(--white) !important
}

.static-text {
    color: var(--static-text) !important
}

.danger-text {
    color: var(--secondary-color) !important
}

.hr-color {
    border-color: var(--line-color) !important
}

.h-color {
    color: var(--h-color)
}

.link-text {
    text-decoration: none;
    color: var(--link-text)
}

    .link-text:hover {
        cursor: pointer
    }

.invoice-body .card {
    border: 1px solid var(--border-color) !important;
    border-radius: 19px !important
}

    .invoice-body .card .card-body {
        padding: 40px
    }

.payment-card:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 24px
}

.payment-card {
    padding-top: 24px
}

input.form-control {
    height: 56px;
    border-color: var(--line-color) !important;
    border-radius: 8px !important;
}

input.form-control-parts {
    height: 56px;
    border-color: var(--line-color) !important;
    border-radius: 8px !important;
    margin-bottom: 10px;
}

.invoice-body .btn {
    padding: 16px 30px !important;
    border-radius: 40px !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    margin-bottom: 8px
}

.invoice-body .btn-primary {
    background-color: var(--link-text) !important
}

    .invoice-body .btn-primary:hover {
        background-color: var(--link-text) !important
    }

.invoice-body .btn-secondary {
    background-color: var(--secondary-color) !important
}

    .invoice-body .btn-secondary:hover {
        background-color: var(--secondary-color) !important
    }

.invoice-body .btn-disabled {
    background-color: var(--disable-grey) !important
}

    .invoice-body .btn-disabled:hover {
        background-color: var(--disable-grey) !important
    }

.invoice-body .form-select {
    border-color: var(--line-color) !important;
    border-radius: 8px !important
}

.invoice-body .custom-calendar {
    padding: 0
}

    .invoice-body .custom-calendar:first-child {
        margin-bottom: 0
    }

    .invoice-body .custom-calendar input {
        border-left: 0 !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        box-shadow: none !important
    }

    .invoice-body .custom-calendar .input-group-addon {
        border: 1px solid var(--line-color);
        background-color: var(--white);
        padding-left: 12px;
        padding-right: 12px;
        border-right: none !important;
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important
    }

.invoice-body .input-group {
    position: relative;
    border: 1px solid transparent;
    border-radius: 8px
}

    .invoice-body .input-group:focus-within {
        border: 1px solid var(--primary-color);
        border-radius: 8px;
        outline: 0
    }

.invoice-body footer {
    margin-top: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: var(--primary-color)
}

.footer-info {
    display: flex;
    justify-content: end;
    gap: 10px
}

    .footer-info:last-child {
        margin-left: 21px
    }

@media (max-width:1199px) {
    .fs-p-3 {
        font-size: 20px
    }

    .lh-p-3 {
        line-height: 28px
    }

    .footer-info:last-child {
        margin-left: 5px
    }

    .custom-calendar .input-group-addon {
        padding-right: 0 !important
    }
}

@media (max-width:991px) {
    .invoice-body .card-body {
        padding: 24px !important
    }

    .fs-p-1 {
        font-size: 16px
    }

    .lh-p-1 {
        line-height: 24px
    }

    .fs-h4 {
        font-size: 14px
    }

    .lh-h4 {
        line-height: 20px
    }

    .fs-h2 {
        font-size: 24px
    }

    .lh-h2 {
        line-height: 32px
    }

    .fs-h1 {
        font-size: 40px
    }

    .lh-h1 {
        line-height: 48px
    }

    .fs-p-2 {
        font-size: 16px
    }

    .lh-p-2 {
        line-height: 20px
    }
}

@media (max-width:800px) {
    .invoice-body .container {
        max-width: 100% !important
    }

    .invoice-body header {
        padding: 16px 0 16px 0
    }
}

@media (min-width:769px) {
    .parts-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    .parts-select {
        width: 300px
    }

    .btn-add-part {
        width: auto;
        white-space: nowrap
    }

    .parts-container-inner {
        display: flex;
        align-items: center;
        justify-content: center !important;
        gap: 10px
    }
}

@media (max-width:768px) {
    .footer-info {
        justify-content: center !important
    }

    .parts-container {
        flex-direction: column;
        align-items: flex-start
    }

    .parts-container-inner {
        display: flex;
        justify-content: center;
        flex-direction: column
    }

    .parts-select {
        width: 100%;
        margin-bottom: 10px
    }
}

@media (max-width:653px) {
    .invoice-body .card-body {
        padding: 16px !important
    }

    .fs-p-1 {
        font-size: 14px
    }

    .lh-p-1 {
        line-height: 20px
    }

    .fs-p-2 {
        font-size: 16px
    }

    .lh-p-2 {
        line-height: 20px
    }

    .fs-p-3 {
        font-size: 18px
    }

    .lh-p-3 {
        line-height: 24px
    }

    .fs-h1 {
        font-size: 32px
    }

    .lh-h1 {
        line-height: 40px
    }

    .fs-h2 {
        font-size: 20px
    }

    .lh-h2 {
        line-height: 28px
    }

    .fs-h4 {
        font-size: 12px
    }

    .lh-h4 {
        line-height: 16px
    }

    .parts-container {
        align-items: center;
        width: auto
    }

    .parts-select {
        margin-bottom: 10px
    }

    .footer-info {
        justify-content: start !important
    }

        .footer-info:last-child {
            margin-left: 0 !important;
            margin-top: 16px
        }
}

.wo-page-layout > .wo-page-section {
    font-size: 0.9rem;
    color: var(--color);
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
}

    .wo-page-layout > .wo-page-section > .wo-page-section-header {
        background-color: var(--background-color);
        border-radius: initial;
        padding: 0 0.5rem;
        text-align: center;
        border: 1px solid var(--border);
        border-top-left-radius: 0.6rem;
        border-top-right-radius: 0.6rem;
        font-weight: 600;
    }

        .wo-page-layout > .wo-page-section > .wo-page-section-header .edit-button-selected {
            color: var(--color);
        }

    .wo-page-layout > .wo-page-section > .wo-page-section-body {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        padding: 0.5rem 0.6rem;
        border: 1px solid var(--border);
        background-color: var(--background-color);
        border-top: none;
        border-bottom-right-radius: 0.6rem;
        border-bottom-left-radius: 0.6rem;
        width: auto;
    }

        .wo-page-layout > .wo-page-section > .wo-page-section-body.h-align {
            align-items: center;
        }

        .wo-page-layout > .wo-page-section > .wo-page-section-body.v-align {
            justify-content: center;
        }

    .wo-page-layout > .wo-page-section > .wo-page-section-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

.wo-page-card {
    display: flex;
    flex-direction: column;
    min-width: 10%;
    word-wrap: break-word;
    background-clip: border-box;
    width: auto
}

    .wo-page-card > .wo-page-card-body {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        width: auto
    }

        .wo-page-card > .wo-page-card-body.h-align {
            align-items: center;
        }

        .wo-page-card > .wo-page-card-body.v-align {
            justify-content: center;
        }

    .wo-page-card > .wo-page-card-footer {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-top: 0.5rem;
        background-color: var(--background-color);
        padding: 0.2rem 0.5rem;
        border: 1px solid var(--border);
        border-radius: 0.2rem;
    }

    .wo-page-card .appliance-note {
        font-size: 0.8rem;
        line-height: 1.3rem;
        padding: 0.3rem 0.6rem;
        border-radius: 0.2rem;
        margin-top: 0.3rem;
        font-weight: 600;
        background-color: var(--background-color);
        border: 1px solid var(--border);
    }

    .wo-page-card .wo-page-card-body.wo-page-card-body-document {
        align-items: center;
        justify-content: center;
        flex-basis: 100%;
    }

.grid {
    display: grid;
    grid-template-rows: repeat(var(--rows, 1), 1fr);
    gap: var(--grid-gap, 1rem);
    grid-template-columns: auto;
    overflow: hidden;
}

@media (min-width: 992px) {
    .grid {
        grid-template-columns: auto auto auto;
    }
}

.grid > .justify-self-start {
    justify-self: start;
}

.grid > .justify-self-center {
    justify-self: center;
}

.grid > .justify-self-end {
    justify-self: end;
}

.grid.auto-column-width {
    grid-template-columns: auto;
}

@media (min-width: 992px) {
    .grid.auto-column-width {
        grid-template-columns: repeat(var(--grid-columns, 1), auto);
    }
}

.grid.fit-content {
    width: -moz-fit-content;
    width: fit-content; /* OR max-content OR min-content */
}

.grid.vertical-border > div {
    box-sizing: border-box;
    position: relative;
}

    .grid.vertical-border > div::before {
        content: "";
        position: absolute;
        top: calc(var(--grid-gap, 1rem) / -2 - 1px); /* Half the gap */
        right: 0px;
        width: 100vw; /* Big height*/
        height: 1px;
        background: var(--grid-border-color);
    }

@media (min-width: 992px) {
    .grid.vertical-border > div::before {
        content: "";
        position: absolute;
        top: 0;
        right: calc(var(--grid-gap, 1rem) / -2 - 1px); /* Half the gap */
        height: 100vh; /* Big height*/
        width: 1px;
        background: var(--grid-border-color);
    }
}

.grid.horizontal-border > div {
    box-sizing: border-box;
    position: relative;
}

    .grid.horizontal-border > div::before {
        content: "";
        position: absolute;
        bottom: calc(var(--grid-gap, 1rem) / -2 - 1px); /* Half the gap */
        right: calc(var(--grid-gap, 1rem) / -2);
        width: 100vw; /* Big height*/
        height: 1px;
        background: var(--grid-border-color);
    }

.grid.borders > div {
    box-sizing: border-box;
    position: relative;
}

    .grid.borders > div::after {
        content: "";
        position: absolute;
        top: 0;
        left: calc(var(--grid-gap, 1rem) / -2 - 1px); /* Half the gap */
        height: 100vh; /* Big height*/
        width: 1px;
        background: var(--grid-border-color);
    }

    .grid.borders > div::before {
        content: "";
        position: absolute;
        bottom: calc(var(--grid-gap, 1rem) / -2 - 1px); /* Half the gap */
        right: calc(var(--grid-gap, 1rem) / -2);
        width: 100vw; /* Big height*/
        height: 1px;
        background: var(--grid-border-color);
    }

.grid .g-col-1 {
    grid-column: auto/span 1;
}

.grid .g-col-2 {
    grid-column: auto/span 2;
}

.grid .g-col-3 {
    grid-column: auto/span 3;
}

.grid .g-col-4 {
    grid-column: auto/span 4;
}

.grid .g-col-5 {
    grid-column: auto/span 5;
}

.grid .g-col-6 {
    grid-column: auto/span 6;
}

.grid .g-col-7 {
    grid-column: auto/span 7;
}

.grid .g-col-8 {
    grid-column: auto/span 8;
}

.grid .g-col-9 {
    grid-column: auto/span 9;
}

.grid .g-col-10 {
    grid-column: auto/span 10;
}

.grid .g-col-11 {
    grid-column: auto/span 11;
}

.grid .g-col-12 {
    grid-column: auto/span 12;
}

.grid .g-start-1 {
    grid-column-start: 1;
}

.grid .g-start-2 {
    grid-column-start: 2;
}

.grid .g-start-3 {
    grid-column-start: 3;
}

.grid .g-start-4 {
    grid-column-start: 4;
}

.grid .g-start-5 {
    grid-column-start: 5;
}

.grid .g-start-6 {
    grid-column-start: 6;
}

.grid .g-start-7 {
    grid-column-start: 7;
}

.grid .g-start-8 {
    grid-column-start: 8;
}

.grid .g-start-9 {
    grid-column-start: 9;
}

.grid .g-start-10 {
    grid-column-start: 10;
}

.grid .g-start-11 {
    grid-column-start: 11;
}

.grid .g-span-1 {
    grid-column-start: span 1;
}

.grid .g-end-1 {
    grid-column-end: 1;
}

.grid .g-span-2 {
    grid-column-start: span 2;
}

.grid .g-end-2 {
    grid-column-end: 2;
}

.grid .g-span-3 {
    grid-column-start: span 3;
}

.grid .g-end-3 {
    grid-column-end: 3;
}

.grid .g-span-4 {
    grid-column-start: span 4;
}

.grid .g-end-4 {
    grid-column-end: 4;
}

.grid .g-span-5 {
    grid-column-start: span 5;
}

.grid .g-end-5 {
    grid-column-end: 5;
}

.grid .g-span-6 {
    grid-column-start: span 6;
}

.grid .g-end-6 {
    grid-column-end: 6;
}

.grid .g-span-7 {
    grid-column-start: span 7;
}

.grid .g-end-7 {
    grid-column-end: 7;
}

.grid .g-span-8 {
    grid-column-start: span 8;
}

.grid .g-end-8 {
    grid-column-end: 8;
}

.grid .g-span-9 {
    grid-column-start: span 9;
}

.grid .g-end-9 {
    grid-column-end: 9;
}

.grid .g-span-10 {
    grid-column-start: span 10;
}

.grid .g-end-10 {
    grid-column-end: 10;
}

.grid .g-span-11 {
    grid-column-start: span 11;
}

.grid .g-end-11 {
    grid-column-end: 11;
}

.grid .g-span-12 {
    grid-column-start: span 12;
}

.grid .g-end-12 {
    grid-column-end: 12;
}

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

.align-items-center {
    align-items: center !important;
}

.font-weight-bold {
    font-weight: 700 !important;
}

.font-weight-bolder {
    font-weight: bolder !important;
}

.signature-box {
    height: auto;
    width: auto;
}

.signature-img {
    height: 200px;
    width: 200px;
}