:root {
    --primary: #ec662b;
}

.badge {
    padding: .4em .4em;
}

/* Select2 */
.select2-selection {
    height: calc(1.5em + .75rem + 2px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .75rem + 2px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .75rem + 2px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    line-height: calc(1.5em + .75rem + 2px) !important;
}

.form-control-select2 .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    height: calc(1.5em + .75rem + 2px);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #eaeaea 1px !important;
    height: auto !important;
}

.select2-container .select2-search--inline .select2-search__field {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-left: 8px;
}

.select2-container .select2-search--inline textarea::placeholder {
    color: #999;
}

.select2-container--default .select2-selection--multiple {
    border: solid #eaeaea 1px !important;
    height: auto !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #eaeaea;
}

.select2-dropdown {
    border: 1px solid #eaeaea;
}
/* End Select2 */

.page-action-container {
    padding-right: 0px;
}
/* Modal */
.modal-full {
    max-width: 95%;
}

/* End Modal */
.btn {
    border-radius: 5px !important;
}

body {
    background-color: #f2f2f3 !important;
}

.relative {
    position: relative;
}

.capitalize {
    text-transform: capitalize;
}

.modal .table thead tr {
    border-top: 2px solid #666;
}

.modal-injector .modal {
    opacity: 0;
    transition: opacity 0.5s;
}

    .modal-injector .modal:last-child {
        opacity: 1.0 !important;
    }

.btn-group .btn {
    border-radius: 0px !important;
}

    .btn-group .btn:first-child {
        border-radius: 10px 0px 0px 10px !important;
    }

    .btn-group .btn:last-child {
        border-radius: 0px 10px 10px 0px !important;
    }

.order-data-wrapper .ui-wrapper {
    border-bottom: none !important;
}

.blocker {
    overflow: hidden;
}

.btn-noborder {
    border: none !important;
}

.no-wrap {
    white-space: nowrap;
}

.nav-header {
    background-image: none;
    background-color: transparent;
}

.nav > li > a {
    color: #555;
    padding: 8px 20px 8px 25px;
}

.nav-pills > li > a {
    padding: 8px 15px 8px 15px;
}

.nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
}

    .nav-pills .nav-item {
        text-wrap: nowrap;
    }

ul.nav-second-level {
    padding-left: 20px;
}

li.menu-title {
    color: #264f70;
}

.nav-header a {
    color: #555;
}

.nav > li a:hover,
.nav > li a:focus {
    background: transparent !important;
    color: #ec662b !important;
}

.nav > li.active {
    background: #f3f3f4;
    border-left: 4px solid #da3933;
    border-radius: 0px 8px 8px 0px;
}

    .nav > li.active > a {
        font-weight: bold;
        color: #ec662b;
    }

ul.nav-second-level {
    background: #f3f3f4;
}

#side-menu .fa {
    color: #da3933;
}

li.menu-title {
    color: #ec662b;
    font-size: 10px;
    font-weight: bold;
    background: #e9e9eb;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 6px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    margin-right: 5px;
    border-radius: 20px;
    background-color: #ec662b;
    background-image: linear-gradient(147deg, #ec662b 0%, #d8470f 74%);
}

.nav-pills > li a:hover, .nav-pills > li a:focus {
    /*background: #da3933 !important;*/
    color: white !important;
    border-radius: 20px;
    background-color: #d8470f;
    background-image: linear-gradient(147deg, #d8470f 0%, #ec662b 74%) !important;
}

select.form-control:disabled {
    background-color: #eaeaea !important;
    cursor: not-allowed;
}

select.form-control {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 5px;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: black;
}

.tabulator {
    border-top: 2px solid black;
}

.tabulator-row-odd {
    background-color: rgba(0,0,0,.05);
}

.tabulator-row.tabulator-selectable:hover {
    background-color: #ec662b12;
}

.btn-green {
    background-color: #55bb59;
    border-color: #55bb59;
    color: #FFFFFF;
}

    .btn-green:hover,
    .btn-green:focus,
    .btn-green:active {
        background-color: #55bb59 !important;
        border-color: #55bb59 !important;
        color: #FFFFFF;
    }

    .btn-green:not(:disabled):not(.disabled):active,
    .btn-green:not(:disabled):not(.disabled).active,
    .show > .btn-green.dropdown-toggle {
        background-color: #55bb59;
        border-color: #55bb59;
        color: #FFFFFF;
    }

    .btn-green.disabled, .btn-green:disabled {
        background-color: #0c2940;
        color: white;
        border: none !important;
    }

    .btn-green.disabled, .btn-green:disabled, btn.green.disabled.btn-green:hover {
        background-color: #0c2940 !important;
        color: white;
        border: none !important;
        cursor: not-allowed;
    }

.btn-primary {
    background-color: #ec662b;
    border-color: #ec662b;
    color: #FFFFFF;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: #e35416 !important;
        border-color: #e35416 !important;
        color: #FFFFFF;
    }

    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        background-color: #ec662b;
        border-color: #ec662b;
        color: #FFFFFF;
    }

    .btn-primary.disabled, .btn-primary:disabled {
        background-color: #e35416;
        color: white;
        border: none !important;
    }

    .btn-primary.disabled, .btn-primary:disabled, btn.primary.disabled.btn-primary:hover {
        background-color: #e35416 !important;
        color: white;
        border: none !important;
        cursor: not-allowed;
    }

.btn-secondary {
    background-color: #0a4f76;
    border-color: #0e608f;
    color: #FFFFFF;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background-color: #264d62 !important;
        border-color: #345566 !important;
        color: #FFFFFF;
    }

    .btn-secondary:not(:disabled):not(.disabled):active,
    .btn-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-secondary.dropdown-toggle {
        background-color: #0a6497;
        border-color: #ec662b;
        color: #FFFFFF;
    }

    .btn-secondary.disabled, .btn-secondary:disabled {
        background-color: #0c2940;
        color: white;
        border: none !important;
    }

    .btn-secondary.disabled, .btn-secondary:disabled, btn.secondary.disabled.btn-secondary:hover {
        background-color: #0c2940 !important;
        color: white;
        border: none !important;
        cursor: not-allowed;
    }

.btn-blue {
    background-color: #005A96;
    border-color: #005A96;
    color: #FFFFFF;
}

    .btn-blue:hover,
    .btn-blue:focus,
    .btn-blue:active {
        background-color: #034774 !important;
        border-color: #034774 !important;
        color: #FFFFFF;
    }

    .btn-blue:not(:disabled):not(.disabled):active,
    .btn-blue:not(:disabled):not(.disabled).active,
    .show > .btn-blue.dropdown-toggle {
        background-color: #005A96;
        border-color: #005A96;
        color: #FFFFFF;
    }

    .btn-blue.disabled, .btn-blue:disabled {
        background-color: #005A96;
        color: white;
        border: none !important;
    }

    .btn-blue.disabled, .btn-blue:disabled, btn.blue.disabled.btn-blue:hover {
        background-color: #005A96 !important;
        color: white;
        border: none !important;
        cursor: not-allowed;
    }

.btn-purple {
    background-color: #774ccf;
    border-color: #8261c7;
    color: #FFFFFF;
}

    .btn-purple:hover,
    .btn-purple:focus,
    .btn-purple:active {
        background-color: #55319f !important;
        border-color: #6646a7 !important;
        color: #FFFFFF;
    }

    .btn-purple:not(:disabled):not(.disabled):active,
    .btn-purple:not(:disabled):not(.disabled).active,
    .show > .btn-purple.dropdown-toggle {
        background-color: #774ccf;
        border-color: #8261c7;
        color: #FFFFFF;
    }

    .btn-purple.disabled, .btn-blue:disabled {
        background-color: #774ccf;
        color: white;
        border: none !important;
    }

    .btn-purple.disabled, .btn-purple:disabled, btn.purple.disabled.btn-purple:hover {
        background-color: #774ccf !important;
        color: white;
        border: none !important;
        cursor: not-allowed;
    }

ul.navbar-top-links li a {
    color: #da3933 !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-top: 2px solid black;
    color: black;
}

.page-heading h2 {
    font-size: 20px;
    color: #ec662b !important;
    text-transform: capitalize;
}

.breadcrumb {
    color: black;
}

.stock-branch .stock-branch-header .fa {
    color: #da3933;
}

.modal-title {
    color: #da3933;
}

.modal-content {
    border-top: none;
}

.system-name {
    color: #ec662b;
    margin-left: 20px;
}

.system-name-color {
    background: rgb(236,91,43);
    background: -moz-linear-gradient(90deg, rgba(236,91,43,1) 0%, rgba(236,102,43,1) 35%, rgba(236,153,43,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(236,91,43,1) 0%, rgba(236,102,43,1) 35%, rgba(236,153,43,1) 100%);
    background: linear-gradient(90deg, rgba(236,91,43,1) 0%, rgba(236,102,43,1) 35%, rgba(236,153,43,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background-color: #ec662b !important;
}

.list-group-item.active {
    background-color: #ec662b;
    border-color: #ec662b;
}

.page-heading {
    padding: 0 10px 10px 10px;
}

    .page-heading.border-bottom {
        border-bottom: none !important;
    }

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-top: 2px solid #ec662b;
}

.tabs-container .tabs-left > .nav-tabs a.active, .tabs-container .tabs-left > .nav-tabs a.active:hover, .tabs-container .tabs-left > .nav-tabs a.active:focus {
    border-left: 2px solid #ec662b;
    border-top: 2px solid #e7eaec;
    border-bottom: 2px solid #e7eaec;
    border-right: none;
    color: #ec662b !important;
}

.tabs-container .tabs-left .tab-pane .panel-body, .tabs-container .tabs-right .tab-pane .panel-body {
    border-top: 2px solid #e7eaec;
}

.tabs-container .tabs-left > .nav-tabs, .tabs-container .tabs-right > .nav-tabs {
    width: 6%;
    margin-right: 0px;
}

.tabs-container .tabs-left .panel-body {
    margin-left: 6%;
    width: auto;
}

.tabs-container .tabs-left > .nav-tabs > li, .tabs-container .tabs-right > .nav-tabs > li {
    width: 52%;
}

    .tabs-container .tabs-left > .nav-tabs > li > a {
        margin-right: -30px;
    }

.swal2-styled.swal2-confirm {
    background-color: #ec662b;
}

.footer {
    background: none repeat scroll 0 0 #f2f2f3;
    border-top: none;
}

.subheader h5 {
    color: black;
    margin-top: 20px;
    padding-left: 5px;
}

.nav-order {
    margin-bottom: 15px;
}

    .nav-order .nav-item {
        cursor: pointer;
    }

.layout-upload-section {
    background-color: #fafafa;
    border-radius: 12px;
    padding: 15px;
    display: block;
    float: left;
    width: 100%;
}

    .layout-upload-section .upload-item {
        width: 100px;
        height: 100px;
        background: white;
        border-radius: 10px;
        display: inline-block;
        margin-top: 15px;
        margin-right: 15px;
        float: left;
        overflow: hidden;
        box-shadow: 2px 2px 5px #ddd;
        cursor: pointer !important;
    }

.table-materials input {
    background: #f8f8f8 !important;
    border: none;
    border-radius: 5px;
}

    .table-materials input:focus {
        background: #eaeaea !important;
    }

.expander-section {
    cursor: pointer;
    color: #333;
    padding: 10px;
    border-radius: 5px;
    padding-left: 12px;
    background-color: #eee !important;
    margin-bottom: 0px;
}

    .expander-section:hover {
        background-color: #da3933 !important;
        color: white;
    }

.expander-content {
    padding: 10px 20px;
    border-radius: 0px 0px 10px 10px;
    background: #f7f7f7;
    border-bottom: 2px solid #d7d7d7;
}

.fc-other {
    background: #ccc;
    border: none;
}

.upload-item {
    position: relative;
    cursor: pointer;
    transition: all 0.1s;
}

    .upload-item:hover {
        transform: scale(1.1);
    }

    .upload-item.upload-button {
        text-align: center;
    }

        .upload-item.upload-button i {
            font-size: 45px;
            display: block;
            color: #ec662b;
            margin-top: 15px;
        }

        .upload-item.upload-button span.upload-button-text {
            display: block;
            font-weight: bold;
            color: #ec662b;
            text-transform: uppercase;
            font-size: 13px;
            letter-spacing: 1px;
        }

        .upload-item.upload-button .filepond--drop-label {
            min-height: 7.75em;
        }

        .upload-item.upload-button .filepond--file-info-sub {
            display: none !important;
        }

        .upload-item.upload-button .filepond--item-panel {
            background-color: #fafafa;
        }

        .upload-item.upload-button .filepond--panel-center {
            height: 185px !important;
        }

        .upload-item.upload-button .filepond--panel-bottom {
            transform: translate3d(0px, 60px, 0px) !important;
        }

        .upload-item.upload-button .filepond--panel-top {
            height: 4.25em;
        }

        .upload-item.upload-button .filepond--panel-bottom {
            height: 2.5em;
        }

        .upload-item.upload-button .filepond--drop-label label {
            cursor: pointer;
        }

.upload-item-preview {
    width: 100%;
    height: 100%;
    background-size: cover;
}

.upload-item-icon {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 15px;
}

    .upload-item-icon img {
        width: 60%;
        margin-top: 8px;
    }

.upload-item .close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 14px;
    text-shadow: 1px 1px 5px white;
    display: none;
}

.upload-item:hover .close-button {
    display: block;
}

.upload-section-small {
    padding: 8px !important;
}

.upload-section .upload-item {
    width: 130px;
    height: 130px;
}

.uploaded-item {
    margin-bottom: 1rem;
}

.uploaded-item-content {
    padding-top: 30px;
}

.uploaded-item-file-name {
    font-size: 11px;
    padding: 3px 5px;
    word-break: break-word;
}

.hidden-iframe {
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    position: absolute;
}

.remark-block {
    font-size: 12px;
    color: #888;
}

.upload-button .filepond--panel-root {
    background-color: white;
}

.progress-bar-wrapper {
    min-width: 1300px;
    padding-left: 8px;
}

.progress-bar {
    opacity: 0.85;
    font-weight: bold;
    font-size: 10px;
    text-shadow: 1px 1px 1px #666;
}

.progress {
    height: 0.8em;
}

.progress-stage {
    margin-top: 5px;
    height: 45px;
}

    .progress-stage .progress-stage-item:first-child {
    }

.progress-stage-item {
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: capitalize;
    flex: 1 1 0 !important;
    font-weight: bold;
}

    .progress-stage-item .text {
        margin: 0px 5px;
    }

.progress-stage-active {
    transform: scale(1.2);
    color: #ec662b;
    transition: all 0.2s;
}

.progress-bar.orange {
    border-radius: 0px 15px 15px 0px;
    background: linear-gradient(315deg, #d8470f, #ec662b);
}

.progress-wrapper {
    margin-top: 8px;
    margin-bottom: 0px;
    overflow-x: auto;
    overflow-y: clip;
}

.progress-header {
    font-size: 20px;
    color: #4f4354;
    font-weight: bold;
    padding-left: 8px;
}

.po-row .po-row-header {
    font-size: 20px;
    padding: 15px 30px;
    border-radius: 35px;
    cursor: pointer;
}

    .po-row .po-row-header:hover {
        background-color: #f3f3f3;
    }

    .po-row .po-row-header .arrow {
        padding-right: 30px;
    }

.input-material-add {
    font-weight: bold;
    width: 100px;
    text-align: center;
}

.layout-names {
    color: #aaa;
    font-size: 10px;
}

.slash {
    text-decoration: line-through;
}

.row-selectable:hover {
    background-color: #eee;
    cursor: pointer;
}

.table-std .subtable-row {
    background-color: #f3f3f3;
}

    .table-std .subtable-row thead tr th {
        background-color: white !important;
    }

.table-summary {
    width: 100%;
}

    .table-summary thead tr {
        border-bottom: 2px solid #333;
        color: #ec662b;
    }

    .table-summary td {
        border: 1px solid #888;
    }

.photo-tab .layout-upload-section {
    height: 500px;
}

.table-order-product tr:hover {
    background-color: #fafafa;
    cursor: pointer;
}

.table-data td {
    padding: 0px;
    border: none;
}

.table-data tr td:last-child {
    padding: 3px;
}

.product-wrapper {
    padding-left: 5px;
}

    .product-wrapper .item {
        font-size: 12px;
    }

.text-start {
    color: green !important;
}

.text-end {
    color: #ED5565 !important;
}

.status-box {
    height: 88px;
    color: white;
    cursor: pointer;
    padding-top: 20px;
    text-align: center;
    border-radius: 18px;
    vertical-align: middle;
    transition: 0.1s all;
    background-color: #ec662b;
    background-image: linear-gradient(315deg, #ec662b 0%, #b02e0c 74%);
}

    .status-box:hover {
        transform: scale(1.2);
        background-color: #ec662b !important;
    }

.status-box-label {
    font-weight: bold;
}

.table-form tr td:first-child {
    font-weight: bold;
}

.table-commission tr:hover {
    background-color: #eaeaea;
    cursor: pointer;
}

.table-commission tr.subtable {
    background-color: #f3f3f3 !important;
}

.table-toolbar {
    margin-bottom: 15px;
}

.modal-table-wrapper {
    max-height: 500px;
}

.worktime-wrapper {
    background-color: #eaeaea;
    padding: 3px 0px 3px 10px;
    border-radius: 5px;
    margin-top: 6px;
}

.table-pl td {
    font-size: 11px;
    padding: 3px 5px !important;
}

.table-pl tr.subcat-header td {
    font-weight: bold;
    text-decoration: underline;
}

.table-pl tr.cat-header {
    background-color: #555;
    color: white;
}

    .table-pl tr.cat-header:hover {
        background-color: #555 !important;
        color: white !important;
    }

    .table-pl tr.cat-header td {
        font-weight: bold;
    }

.table-pl .pl-data-cell {
    width: 50px;
    text-align: right;
    white-space: nowrap;
}

.table-pl tr.pl-footer {
    background-color: yellow;
    color: black;
    text-transform: capitalize;
}

    .table-pl tr.pl-footer:hover {
        background-color: yellow !important;
        color: black !important;
        text-transform: capitalize !important;
    }

.order-user-wrapper {
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 2px 5px #ccc;
    margin-top: 20px;
}

.fnt-co {
    font-weight: bold;
    color: black;
    font-size: 16px;
    letter-spacing: 1px;
}

.fnt-time, .fnt-day {
    color: #888;
    font-size: 12px;
}

.table-user-assg th,
.table-user-assg td {
    padding: 5px 15px !important;
    border: 1px solid #eaeaea;
}

.table-user-assg thead tr {
    background-color: #f3f3f3;
}

.table-pl tr.subcat-header-content.cn {
    background-color: #fafafa;
    color: red;
}

.table-std tr td.highlight,
.table-std tr th.highlight {
    background-color: #eee;
}

.report-content h4 {
    text-transform: uppercase;
    color: #333;
    margin-top: 25px;
    margin-bottom: 5px;
}

.table-kpi a {
    color: #333 !important;
    text-decoration: none;
}

    .table-kpi a:hover {
        font-weight: bold;
        text-decoration: underline;
    }

.co-wrapper {
    background-color: #f3f3f3;
    padding: 5px;
    border-radius: 5px;
}

/*Lead table*/

.lead-report-content {
    overflow-x: scroll;
    position: relative;
}

.table-lead tr:nth-child(2n) td {
    background-color: white !important;
}

.table-lead tr:nth-child(2n+1) td {
    background-color: #f3f3f3 !important;
}

.table-lead.sticky {
    border-collapse: initial;
}

    .table-lead.sticky th,
    .table-lead.sticky td {
        border: 1px;
    }

    .table-lead.sticky .stick-col {
        position: -webkit-sticky;
        position: sticky;
        border-collapse: initial;
    }

        .table-lead.sticky .stick-col.col1 {
            width: 50px;
            min-width: 50px;
            max-width: 50px;
            left: 0px;
        }

        .table-lead.sticky .stick-col.col2 {
            width: 50px;
            min-width: 50px;
            max-width: 50px;
            left: 50px;
        }

        .table-lead.sticky .stick-col.col3 {
            width: 120px;
            min-width: 120px;
            max-width: 120px;
            left: 100px;
        }

        .table-lead.sticky .stick-col.col4 {
            width: 120px;
            min-width: 120px;
            max-width: 120px;
            left: 220px;
        }

        .table-lead.sticky .stick-col.col5 {
            width: 120px;
            min-width: 120px;
            max-width: 120px;
            left: 340px;
        }

        .table-lead.sticky .stick-col.col6 {
            width: 120px;
            min-width: 120px;
            max-width: 120px;
            left: 460px;
        }

        .table-lead.sticky .stick-col.col7 {
            width: 120px;
            min-width: 120px;
            max-width: 120px;
            left: 580px;
        }

.table-lead th.info {
    background-color: #e1ffe1 !important;
    color: #333 !important;
    border-bottom: 2px solid #00b300;
}

.table-lead th.sales {
    background-color: #cff2ff !important;
    color: #333 !important;
    border-bottom: 2px solid #439dbf;
}

.table-lead th.quotation {
    background-color: #ffd6cf !important;
    color: #333 !important;
    border-bottom: 2px solid #f11a10;
}

.table-lead .right-split {
    border-right: 2px solid #888 !important;
}

.btn-sticky input[type=checkbox] {
    vertical-align: middle;
}

.table-so td.open,
.table-so td.inprogress {
    background: #c72e00;
    color: white;
}

.table-so td.closed {
    background: #788fc1;
    color: white;
}

.table-so td.humanerror {
    background: #cf651a;
    color: white;
}

.table-so td.naturalerror {
    background: #0eb90e;
    color: white;
}

.dashboard-content .ibox-title {
    background: #ffffff;
    border-radius: 10px 10px 0px 0px;
    color: #ec662b;
    font-size: 20px;
}

.ibox-content {
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 0px 20px 0px rgb(76 87 125 / 3%);
}

.ibox-border-radius {
    border-radius: 0.625rem;
}

.overlay-chart {
    position: absolute;
    width: 250px;
    z-index: 1000;
    background: #f5f5f5c9;
    border-radius: 15px;
    overflow: hidden;
    left: -80px;
    top: 45px;
    color: white;
    transform: perspective(23em) rotateY(12deg);
    box-shadow: rgba(22, 31, 39, 0.42) 0px 60px 123px -25px, rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
    border-radius: 10px;
    border: 1px solid;
    border-color: rgb(213, 220, 226) rgb(213, 220, 226) rgb(184, 194, 204);
    opacity: 0.7;
    transition: all 0.5s;
    cursor: pointer;
}

    .overlay-chart:hover {
        background: white;
        opacity: 1.0;
        left: 86px;
        transform: rotateY(0deg);
    }

.overlay-chart2 {
    padding: 0px;
    position: absolute;
    z-index: 1;
    background: #f5f5f5;
    border-radius: 15px;
    overflow: hidden;
    top: 90px;
    color: white;
    border: 1px solid;
    border-color: rgb(213, 220, 226) rgb(213, 220, 226) rgb(184, 194, 204);
    opacity: 1.0;
    cursor: pointer;
}

.table-legend th {
    background: #1ab394;
    color: white;
}

.overlay-chart .table td {
    padding: 8px 8px;
    font-size: 10px;
}

.table-order-product td.subproduct {
    padding-left: 20px;
    color: #ff343c;
}

.table-summary tr.subtotal-row {
    border-top: 2px solid #888 !important;
    font-weight: bold;
}

.table-summary tr.grandtotal-row {
    background: #f3f3f3;
    border-top: 1px solid #ccc !important;
    font-weight: bold;
}

.table-summary tr.empty-row-spacer td {
    border: none !important;
}

.template-editor-wrapper {
    min-height: 750px;
}

    .template-editor-wrapper .full-height {
        min-height: inherit;
    }

.component-wrapper-scroller {
    height: 76vh;
    overflow-y: auto;
}

.component-wrapper {
    position: relative;
}

    .component-wrapper .btn-close {
        position: absolute;
        right: 18px;
        top: 15px;
        cursor: pointer;
    }

.cost-display {
    font-size: 14px;
    font-weight: bold;
    margin-right: 5px;
}

.property-wrapper {
    width: 320px;
    height: 76vh;
    overflow-y: auto;
}

.field-component-wrapper {
    background-color: #fafafa;
    border-radius: 10px;
    padding: 15px 15px 1px 15px;
    margin: 10px 10px 0px 0px;
}

    .field-component-wrapper.selected {
        border: 1px solid #666;
        border-top: 4px solid #6b7378;
    }

.property-wrapper {
    padding: 10px;
    border-left: 1px solid #ccc;
    background: #f3f3f3;
}

.sub-property-wrapper {
    background-color: #fafafa;
    padding: 5px;
}

.table-item-selection td {
    padding: 5px;
}

.table-item-selection .selectable:hover {
    background-color: #eee;
    cursor: pointer;
}

.calc-value-wrapper {
    margin: 8px;
}

    .calc-value-wrapper .label-wrapper {
        padding: 8px;
    }

.component-footer {
    padding: 15px;
}

.table-payment tr.dirty {
    background-color: #feffaf;
}

.table-pl tr:hover {
    background-color: #fafafa !important;
    cursor: pointer;
}

.link-wrapper {
    background-color: #f3f3f3;
    padding-left: 10px;
    border-radius: 5px;
    margin-right: 10px;
}

.status-block {
    margin-right: 35px;
}

    .status-block .status-header {
        font-size: 16px;
        font-weight: bold;
        color: #ec662b;
        margin-top: 20px;
    }

    .status-block .table-flow th,
    .status-block .table-flow td {
        border: 1px solid #333;
        padding: 3px;
    }

    .status-block .table-flow th {
        background: #eee;
    }

.table-qc .table-qc-head {
    background-color: #eaeaea;
    font-weight: bold;
}

table.table-qc > thead > tr > th {
    font-size: 13px !important;
}

table.table-qc input[type=checkbox] {
    zoom: 1.2;
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}

.scroller {
    overflow-y: auto;
    height: 450px;
}

.input-label {
    font-weight: bold;
    background: #f8f8f8;
}

.cost-summary h3 {
    color: #084585;
    font-size: 20px;
}

.material-row:hover {
    cursor: pointer;
    background-color: #eee;
}

.table-inner {
    border-top: 2px solid #333;
}

    .table-inner thead tr th {
        border: 1px solid #333;
        border-bottom: 1px solid #333;
        color: #333;
        background-color: #eee;
    }

    .table-inner thead tr {
        border-bottom: 1px solid #333 !important;
    }

.pointer {
    cursor: pointer;
    transition: all 0.1s;
}

    .pointer:hover {
        text-decoration: underline;
        transform: scale(1.1) translateX(30);
        margin-left: 10px;
        color: #ec662b;
    }

div.middle-div {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

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

h2.attr-header {
    font-weight: bold;
    color: #333333;
}

.table-filter {
    border: 1px solid #ccc !important;
    background-color: #fff;
    border-radius: 3px;
    width: 100%;
    margin: 5px 0px 0px 0px;
    outline: none !important;
}

.task-desc-scroller {
    min-height: 150px;
    max-height: 500px;
    height: 250px;
    overflow-y: auto;
    background: #fafafa;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 13px;
    border-radius: 6px;
}

.memo-bar {
    background: #f3f3f3;
    padding: 15px;
    border-radius: 10px;
    font-size: 15px;
}

.memo-item {
    display: inline-block;
    margin-left: 6px;
    margin-right: 6px;
    transition: all 0.2s;
}

    .memo-item a {
        font-weight: bold;
        color: #d33434;
        padding: 10px 8px;
        border-radius: 15px;
        text-decoration: underline;
    }

    .memo-item.newsfeed:hover {
        transform: scale(1.1);
    }

    .memo-item.head {
        font-weight: bold;
    }

.mobile-app-footer {
    text-align: center;
}

    .mobile-app-footer button {
        margin-right: 10px;
    }

.subrow-expand {
    background-color: #f8f8f8;
}

    .subrow-expand .field-component-wrapper {
        background-color: #eeeeee;
    }

.panel-overflow {
    overflow: auto;
}

.red-font {
    color: #e31616;
}

.form-control-table {
    height: 26px;
    font-size: 11px;
}

.cursor-pointer {
    cursor: pointer;
}

table.table-user-assg input[type=checkbox] {
    zoom: 2;
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}

/*Inventory Style Override*/

.po-status {
    border-left: 3px solid #ec662b;
}

tr.top-header th.qty-header {
    border-bottom: 2px solid #ec662b !important;
    color: #c73137;
}

tr.top-header th.highlight {
    border-bottom: 2px solid #ec662b !important;
    color: #c73137;
}

.po-status-value {
    color: #c73137;
}

.po-status:hover .po-status-value {
    background-color: #c73137;
}

table.table-std tr:not(.top-header) th,
tr.bottom-header th {
    border-bottom: 2px solid #c73137 !important;
    color: #c73137;
}

/*Human Resource Style Override*/

.employee-upload-icon {
    color: #ec662b;
}

.payroll-item .item-name,
.payroll-item .item-name a {
    color: #ec662b;
}

.payroll-item .item-control a {
    color: #ec662b;
}

.clocking-display {
    color: #ec662b;
}

.horizontal-line {
    border-color: #ec662b;
}

    .horizontal-line span {
        color: #ec662b;
    }

.table-payroll tr.department-row td {
    background: #c73137;
}

.department-header {
    color: #a00000;
}

/*Scheduler style*/

.fc .fc-toolbar-title {
    color: #ec662b;
}

/*Leads Interest Dashboard style*/

.leads-interest-overflow {
    overflow-x: auto;
    width: 100%;
}

/* Invoice total */
.invoice-total > tbody > tr > td:last-child {
    width: 25%;
}

/* Signature */

.signature-pad {
    width: 280px;
    height: 150px;
    border-radius: 5px;
    background-color: #eee;
    margin-bottom: 15px;
    border-bottom: 2px solid #ec662b;
}

    .signature-pad.signature-big {
        width: 100%;
    }

.signature-image {
    background-color: whitesmoke;
    border-radius: 10px;
    text-align: center;
}

.signature-upload-image {
    background-color: whitesmoke;
    border-radius: 10px;
    max-height: 250px;
    height: 250px;
    text-align: center;
}

/* End Signature */

.file-img {
    font-size: 3rem;
    cursor: pointer;
}

.btn-approve {
    color: #fff;
    background-color: #1ab94b;
    border-color: #1ab94b;
}

    .btn-approve:hover,
    .btn-approve:focus,
    .btn-approve.focus {
        color: #fff;
        background-color: #1cb128;
        border-color: #1cb128;
    }

    .btn-approve.disabled,
    .btn-approve:disabled {
        color: #fff;
        background-color: #1cb128;
        border-color: #1cb128;
    }

    .btn-approve:not(:disabled):not(.disabled):active,
    .btn-approve:not(:disabled):not(.disabled).active,
    .show > .btn-approve.dropdown-toggle {
        color: #fff;
        background-color: #1cb128;
        border-color: #1cb128;
    }

        .btn-approve:not(:disabled):not(.disabled):active:focus,
        .btn-approve:not(:disabled):not(.disabled).active:focus,
        .show > .btn-approve.dropdown-toggle:focus {
            -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        }

.form-group textarea.form-control {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 5px;
}

    .form-group textarea.form-control:disabled {
        background-color: #eaeaea !important;
        cursor: not-allowed;
    }

.select-site-address {
    font-size: 10px;
}

.vertical-m {
    vertical-align: middle !important;
}

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

@media (max-width: 768px) {
    .full-width-m {
        width: 100%;
    }
}

.site-select-description {
    font-size: 12px;
    font-style: italic;
}

.primary-color {
    color: #E35416;
}

.form-section {
    margin-top: 0px;
    color: inherit;
}

.form-section-header {
    color: #ec662b;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.form-section-ibox-header {
    color: #ec662b;
    margin-bottom: 0px;
    padding-bottom: 15px;
    font-size: 20px;
}

.form-section-body {
}

.quotation-customer-status-badge {
    position: relative;
    top: 8px;
}

.table-simple {
    background-color: #fbfbfb;
    border-radius: 5px;
}

    .table-simple thead {
        background-color: #FA6A2D;
        color: white;
    }

    .table-simple > thead > tr > th, .table > tbody > tr > th, .table-simple > tfoot > tr > th, .table > thead > tr > td, .table-simple > tbody > tr > td, .table > tfoot > tr > td {
        border-top: 0px;
    }

    .table-simple thead tr:first-child th:first-child {
        border-top-left-radius: 5px;
    }

    .table-simple thead tr:first-child th:last-child {
        border-top-right-radius: 5px;
    }

.table-pricing {
}

    .table-pricing > thead > tr > th, .table-pricing > tbody > tr > th, .table-pricing > tfoot > tr > th, .table-pricing > thead > tr > td, .table-pricing > tbody > tr > td, .table-pricing > tfoot > tr > td {
        padding: 17px 5px;
        vertical-align: middle !important;
    }

    .table-pricing > tbody > tr {
        border-top: 1px solid #b5b5b526;
        border-top-style: dashed;
    }

    .table-pricing > tfoot > tr {
        border-top: 1px solid #b5b5b526;
        border-top-style: dashed;
    }

        .table-pricing > tfoot > tr > td {
            font-size: 16px;
            font-weight: bold;
        }

.table-pricing-row-divider {
    border-top: 2px solid #c5c5c54f !important
}

.table.table-x-header > tbody > tr > td {
    border-top: none;
    padding: 13px 8px;
}

.table-x-header > tbody > tr:not(:first-child) > td {
    border-top: 1px solid #d1d1d19e !important;
}

.rental-info-header {
    color: #ee7a46;
    font-weight: 700;
    margin-top: 0px;
    font-size: 23px;
}

.rental-overview-head-container {
    min-height: 390px;
}

.rental-overview-middle-body {
    min-height: 220px;
}

.rental-overview-overlay {
    background-color: #fbfbfbb0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0.625rem;
    z-index: 1;
}

.image-gallery-item-container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #dfdfdf;
    padding: 10px;
    border-radius: 1rem;
}

.image-gallery-item-container-image {
    width: 150px;
    height: 150px;
    margin: auto;
}

    .image-gallery-item-container-image img:hover {
        cursor: pointer;
        transform: scale(1.1);
    }

.image-gallery-item-x {
    position: absolute;
    right: 10px;
    cursor: pointer;
    color: #818181c4;
}

.image-fit {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
    cursor: pointer;
}

.multi-item-uploader-item-container {
    width: 50px;
    height: 50px;
}

.multi-item-uploader-item-icon-size {
    font-size: 30px;
}

.orange-separator {
    border-top: 1px solid #e3541640;
}

.text-muted {
    color: #A1A5B7;
}

.text-small {
    font-size: 11px;
}

.text-big {
    font-size: 1rem;
}

.text-color-grey {
    color: #727272c7;
}

.action-icon:hover {
    cursor: pointer;
    color: #e3541694;
}

/* Colors */

.color-blue {
    background-color: #005A96;
    color: #fff;
}

.color-yellow {
    background-color: #E39422;
    color: #fff;
}

.color-green {
    background-color: #1ab394;
    color: #FFFFFF;
}

.color-orange {
    background-color: #E35416;
    color: #fff;
}

.color-red {
    background-color: #E30D0B;
    color: #fff;
}

.color-purple {
    background-color: #710BE3;
    color: #fff;
}

.color-teal {
    background-color: #00E3C4;
    color: #fff;
}

.color-brown {
    background-color: #B06800;
    color: #fff;
}

.color-nude {
    background-color: #E8865D;
    color: #fff;
}

/* End Colors */

.centered-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.font-xlarge {
    font-size: 60px;
}

.dashboard-notification-icon {
    font-size: 20px;
}

.notification-selected-icon {
    color: var(--primary);
}

.notification-read-icon {
    color: #1ab394;
}

.dashboard-notification .ibox-title {
    background: #ffffff;
    border-radius: 10px 10px 0px 0px;
    padding-right: 15px;
}

    .dashboard-notification .ibox-title h3 {
        color: #ec662b;
        font-size: 20px;
    }

.dashboard-notification .ibox-content {
    padding: 0px;
}

.dashboard-notification-item {
    cursor: pointer;
    padding-top: 15px;
    margin-top: 0px;
    padding-right: 15px;
    padding-left: 15px;
}

    .dashboard-notification-item:hover {
        background-color: #fff6f3;
    }

/* Paginator */
.paginator--container {
    font-size: 1rem;
}

.paginator--button {
}

    .paginator--button.paginator--button-disabled {
        color: #d1d1d1;
    }

.paginator--button-left {
    margin: 0px 12px 0px 0px
}

.paginator--button-right {
    margin: 0px 0px 0px 12px;
}

.paginator--page-label {
}
/* End Paginator */

/* Mobile Panel View */
.m--panel {
}

.m--panel-container {
}

.m--item-header {
}

.m--item-header-label {
    font-weight: bold;
    font-size: 1rem;
}

.m--item-header-button {
}

.m--item-body {
}

.m--item-container {
    margin: 0.5rem 0rem 0rem 0rem;
}

.m--item-label {
}

.m--item {
}

.m--approval-header {
    color: var(--primary);
    padding-left: 2px;
}

.m--approval-section-header {
    color: var(--primary);
}

.flex-basis-50 {
    flex-basis: 50%;
}

/* End Mobile Panel View*/
/*Print Related*/
.print-page {
    position: relative;
    width: 100%;
}

.header-padding {
    padding-left: 15px;
    padding-right: 15px;
}

:root {
    --scale: 1.5;
}

/*@media (min-resolution: 1.25dppx) and (max-resolution:1.25dppx) {
    :root {
        --scale: 1.25;
    }
}

@media (min-resolution: 1.5dppx) and (max-resolution:1.5dppx) {
    :root {
        --scale: 1.5;
    }
}

@media (min-resolution: 1.75dppx) and (max-resolution:1.75dppx) {
    :root {
        --scale: 1.75;
    }
}

@media (min-resolution: 2dppx) and (max-resolution:2dppx) {
    :root {
        --scale: 2;
    }
}*/

.print-header, .header-space {
    height: 160px;
}

.print-footer, .footer-space {
    height: 50px;
    display: flex;
    justify-content: end;
    align-items: end;
}

.print-signature {
    height: 0px;
}

.print-table {
    width: 100%;
}

    .print-table tbody td .content {
        margin-top: -40px;
    }

.print-page-wrapper {
    display: flex;
}

.warning-label-small {
    font-size: 10px;
    font-style: italic;
    color: #dc3545;
}

@media print {
    .ui-wrapper {
        border: none;
    }

    .ibox-content {
        background-color: #ffffff;
        color: inherit;
        padding: 15px 20px 20px 20px;
        border-color: initial;
        border-image: none;
        border-style: initial;
        border-width: initial;
        border-radius: initial;
    }

    .footer {
        display: none;
    }

    .pagebreak {
        page-break-before: always;
    }

    .print-table {
        background: white;
        position: relative;
        z-index: 12;
    }

    .print-hidden {
        display: none !important;
    }

    .print-header {
        position: fixed;
        top: 20px;
        width: 100%;
        z-index: 13;
    }

    .print-footer {
        position: fixed;
        bottom: 5px;
        right: 41px;
        width: 100%;
        z-index: 13;
    }

    .print-signature-3 {
        max-width: 8cm;
    }

    #page-wrapper {
        z-index: 10 !important;
    }

    .white-bg.has-bottom-footer {
        background: none !important;
    }

    html, body {
        height: auto !important;
    }

    .print-table .content p:last-of-type {
        margin-bottom: 0px;
    }

    .print-page-wrapper {
        overflow: hidden;
        padding: 40px !important;
        padding-bottom: 1px !important;
        width: 100%;
    }
}

@page {
    size: A4;
}

@media screen {
    .print-header {
        position: absolute;
        top: 0;
        width: 100%;
    }

    .footer-space {
        height: 0px !important;
    }

    .print-page-wrapper {
        margin-top: 20px;
        padding: calc(1.5cm * var(--scale));
        width: calc(19cm * var(--scale));
        min-width: calc(19cm * var(--scale));
        max-width: calc(19cm * var(--scale));
        display: flex;
        box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.2);
    }

    .pagebreak {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: calc(-1.5cm * var(--scale));
        margin-right: calc(-1.5cm * var(--scale));
        border-top: 2px lightgray dotted;
    }

    .page-break-before-auto {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: calc(-1.5cm * var(--scale));
        margin-right: calc(-1.5cm * var(--scale));
        border-top: 2px lightgray dotted;
    }
}

.quotation-print-item-header {
    text-decoration: underline;
    color: black;
    font-size: 18px;
}

.quotation-initial-bottom-border {
    border-bottom: 0.5px solid rgb(0, 0, 0);
    height: 30px;
    width: 100px;
    display: block;
    margin: 0px 7px;
}

.line-h1 {
    line-height: 1;
}

.page-break-before-auto {
    page-break-before: auto;
}

.page-break-inside-avoid {
    page-break-inside: avoid;
}
/*End Print Related*/

/* Checklist Template */

.nav-vertical {
    flex-direction: column;
    text-align: center;
    margin-bottom: 15px;
    cursor: pointer;
}

.checklist-item-control {
    font-size: 14px;
}

.checklist-section-control {
}

.checklist-item-component-selector {
    margin: 10px 0px;
    border: 2px solid #da393347;
    border-radius: 11px;
    padding: 5px 10px;
    cursor: grab;
    display: flex;
}

    .checklist-item-component-selector .fa {
        align-self: center;
        color: #bd555d;
    }

        .checklist-item-component-selector .fa:hover {
            animation: 0.5s;
            transform: scale(1.2);
        }

    .checklist-item-component-selector .icon {
        color: #f59b65;
        padding-right: 5px;
    }

.checklist-item-add-button {
    cursor: pointer;
}

.checklist-item-component-selector-name {
    line-height: 2;
}

.checklist-template-section-tabs .nav-link {
    cursor: pointer;
}

.checklist-template-section {
    min-height: 512px;
    max-height: 512px;
    overflow: auto;
}

.checklist-template-section-label {
    position: absolute;
    left: 45%;
    top: 45%;
    color: #5e5e5e80;
    font-size: 21px;
}

.item-component-wrapper {
    padding: 10px;
    margin-bottom: 1rem;
}

    .item-component-wrapper.selected-item {
        border: 2px solid #ec662b63;
        border-radius: 10px;
    }

.item-component-title-wrapper {
    display: flex;
    margin-bottom: 1rem;
}

    .item-component-title-wrapper .icon {
        color: #f59b65;
    }

.item-component-label {
    margin: 0px 1rem 0px 5px;
    flex-grow: 1;
}

.item-component-action-button {
    margin-left: auto;
}

    .item-component-action-button .action-button {
        font-size: 18px;
    }

.action-button-remove {
    color: #dc3545;
}

    .action-button-remove:hover {
        color: #ad5a62;
    }

.item-component-editor-content {
    padding-left: 13px;
}

.item-component-editor-options-control {
    vertical-align: middle !important;
    text-align: center;
}

.item-component-preview-battery-label {
    flex: 1 1 10%;
    padding-right: 1rem;
    align-self: center !important;
}

/* End Checklist Template */

/* Checklist Template Configuration */
.equipment-checklist-template-configuration-image-container {
    width: 150px;
    margin: 0 auto;
    margin-bottom: 1rem;
}
/* End Checklist Template Configuration */

/* Checklist */

.checklist-wrapper {
    padding: 10px;
}

.checklist-item-container {
    margin-bottom: 1rem;
    padding: 5px;
    width: 100%;
}

.checklist-tab-layout .checklist-item-label {
    font-weight: bold;
    display: flex;
}

.checklist-item-label-order {
    width: 25px;
}

.checklist-tab-layout .checklist-item-input-container {
    padding-left: 25px;
}

.checklist-item-battery-image {
    max-width: 250px;
    min-width: 250px;
    cursor: none;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.checklist-compact-layout .checklist-item-label {
    font-weight: bold;
    display: flex;
    width: 25%;
    flex: 0 0 25%; 
}

.checklist-compact-layout .checklist-item-label label{
    overflow-wrap: break-word;
    width: 100%;
    flex: 0 0 100%;
    margin-left: 0.5rem;
}

.checklist-compact-layout .checklist-item-input-container {
    display: flex;
    padding-left: 25px;
    gap: 0;
    width: 75%;
}

.checklist-compact-layout .checklist-item-input-battery-container {
    padding-left: 25px;
}

.checklist-compact-layout .checklist-item-input-container .checklist-item-individual-input {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 25%;
}

.checklist-compact-layout .checklist-item-input-container .checklist-item-individual-input .checklist-item-individual-input-label {
    align-content: center;
    overflow-wrap: break-word;
    width: 100%;
}

.checklist-compact-layout .checklist-item-battery-container {
    display: flex;
}

.checklist-compact-layout .checklist-item-battery-label {
    min-width: 25%;
}

.checklist-layout-selector-container {
    padding-right: 5px;
    font-size: 14px;
    cursor: pointer;
}

    .checklist-layout-selector-container .active {
        color: var(--primary)
    }

.checklist-compact-layout .checkbox-input-size {
    height: 17px;
}

.checklist-tab-layout .checkbox-input-size {
    width: 17px;
    height: 17px;
}

.checklist-layout-header {
    padding: 5px;
}

.checklist-item-error {
    border: 2px solid #e73636;
    border-radius: 13px;
}

.yes {
    background-color: rgba(0, 200, 83, 0.3);
}

.no {
    background-color: rgba(244, 67, 54, 0.4);
}

.corrected {
    background-color: rgba(33, 150, 243, 0.4);
}

.na {
    background-color: rgba(158, 158, 158, 0.4);
}

.quotation-mobile-table td:not(:first-child),
.quotation-mobile-table th:not(:first-child) {
    text-align: right;
}

.td-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wrapper-mobile-view {
    display: none;
}

.wrapper-desktop-view {
    display: block;
}

@media screen and (max-width: 1150px) {
    .wrapper-mobile-view {
        display: block;
    }

    .wrapper-desktop-view {
        display: none;
    }
}

@media screen and (min-width: 1151px) {
    .wrapper-mobile-view {
        display: none;
    }

    .wrapper-desktop-view {
        display: block;
    }
}

/* End Checklist */
/* CKEDitor */
:root {
    --ck-z-default: 9999;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

/* Tooltip for status */
.status-tooltip {
    display: inline-flex;
    align-items: baseline;
}

/* the clickable icon wrapper */
.tooltip-trigger {
    position: relative;
    cursor: pointer;
    outline: none;
}

/* hide panel by default */
.tooltip-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    width: 300px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
}


    .tooltip-panel::after {
        content: "";
        position: absolute;
        top: -4px;
        right: 17px;
        border: 4px solid transparent;
        border-bottom-color: #fff;
    }

.tooltip-trigger:focus-within .tooltip-panel {
    display: block;
}

/* panel list styling */
/* 1) Make room on the left for the timeline */
.tooltip-panel ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 0 0 34px; /* indent items to make space */
    max-height: 240px;
    overflow-y: auto;
    position: relative;
}

/* 2) Base styles for each item */
.tooltip-panel li {
    position: relative;
    padding: 4px 0;
    color: #333;
}

    /* 3) Draw the grey bullet for every item */
    .tooltip-panel li::before {
        content: "";
        position: absolute;
        left: -24px; /* matches the padding-left */
        top: 8px; /* vertically center relative to padding */
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ccc;
        z-index: 1;
    }

    /* 4) Draw the grey vertical line for every item EXCEPT the current one */
    .tooltip-panel li::after {
        content: "";
        position: absolute;
        left: -21px; /* about center of the bullet */
        top: 16px; /* start just below the bullet */
        width: 2px;
        height: calc(100%);
        background: #ccc;
        z-index: 0;
    }

    /* 6) Highlight the current bullet + text */
    .tooltip-panel li.current::before {
        background: var(--primary);
        transform: scale(2);
    }

    .tooltip-panel li.current {
        font-weight: bold;
        color: var(--primary);
    }

    /* Completed steps: purple bullet + purple line + purple text */
    .tooltip-panel li.completed::before,
    .tooltip-panel li.completed::after {
        background: var(--primary);
    }

    .tooltip-panel li.completed {
        
    }
    .tooltip-panel li:last-child::after {
        display: none;
    }

/* End Tooltip for status */
#page-wrapper {
    padding: 0px;
}

.ui-wrapper-padder {
    padding: 1rem 1rem 1rem 1rem;
}

body.mini-navbar .nav-header {
    background-color: transparent;
}

.mini-navbar .nav .nav-second-level {
    background-color: #f3f3f4;
}

.mini-navbar .nav-second-level > li a:hover {
    background: #ec662b !important;
    color: #ffffff !important;
}

.nav.navbar-top-links > li > a:hover, .nav.navbar-top-links > li > a:focus {
    background: #fbfbfb !important;
}

.notification-menu {
    margin-left: 0px;
}

.notification-footer a {
    border-top: none;
    margin: 0px
}

@media screen and (max-width: 768px) {
    .navmenu-button {
        background-color: #ec662b !important;
        border-bottom: 2px solid #dfdfdf;
    }

        .navmenu-button i {
            color: white !important;
        }

    .mini-navbar .nav-second-level > li a:hover {
        background: #ec662b !important;
        color: #ffffff !important;
    }

    .body-small .page-action-container {
        padding-right: 0px;
    }

    .body-small .print-page-wrapper {
        transform: scale(0.2);
        transform-origin: 3% 0;
        -webkit-transform: scale(0.2);
        -moz-transform: scale(0.25);
        -moz-transform-origin: 0% 0;
    }
}

@media screen and (max-width: 1450px) {
    .print-page-wrapper {
        transform: scale(0.7);
        transform-origin: 3% 0;
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.25);
        -moz-transform-origin: 0% 0;
    }
}


@media screen and (max-width: 1150px) {
    .print-page-wrapper {
        transform: scale(0.5);
        transform-origin: 3% 0;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.25);
        -moz-transform-origin: 0% 0;
    }
}


@media screen and (max-width: 935px) {
    .print-page-wrapper {
        transform: scale(0.3);
        transform-origin: 3% 0;
        -webkit-transform: scale(0.3);
        -moz-transform: scale(0.25);
        -moz-transform-origin: 0% 0;
    }
}