:root {
    --color-main-text: #333;
    --color-background-th: #e2e3e5;
    --color-border-th: #b5b6b7;
    --color-focus-background-editable: #d4f1f94d;
    --color-focus-editable: #333;
    --color-icon-autocomplete: #333;
    --color-border-focus-td: #80bdff;
    --color-border-shadow-focus-td: #007bff40;
    --color-valid: #228e3b;
    --color-warning: #ffc107;
    --color-invalid: #dc3545;
    --color-background-active-autocomplete: #007bff;
    --color-text-active-autocomplete: white;
    --color-text-selected: white;
    --color-icon-dt-expand: #0dcaf0;
    --color-icon-dt-collapse: #dc3545;
    --color-icon-dropdown: #007bff;
    --svg-dropdown: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3cpath fill='currentColor' stroke-width='1' d='M 297.4 470.6 C 309.9 483.1 330.2 483.1 342.7 470.6 L 534.7 278.6 C 547.2 266.1 547.2 245.8 534.7 233.3 C 522.2 220.8 501.9 220.8 489.4 233.3 L 320 402.7 L 150.6 233.4 C 138.1 220.9 117.8 220.9 105.3 233.4 C 92.8 245.9 92.8 266.2 105.3 278.7 L 297.3 470.7 Z'/%3e%3c/svg%3e");
    --svg-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='currentColor' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    --svg-warning: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 5 5'%3e%3cpath stroke='currentColor' fill='none' stroke-width='.32' stroke-linecap='round' stroke-linejoin='round' d='M 0.856 4.464 L 4.264 4.464 C 4.338 4.464 4.41 4.438 4.468 4.391 C 4.525 4.344 4.564 4.279 4.578 4.206 C 4.593 4.133 4.581 4.058 4.546 3.992 L 2.842 0.826 C 2.721 0.602 2.399 0.602 2.278 0.826 L 0.574 3.992 C 0.539 4.058 0.527 4.133 0.542 4.206 C 0.556 4.279 0.595 4.344 0.652 4.391 C 0.71 4.438 0.782 4.464 0.856 4.464 Z'/%3e%3cpath stroke='currentColor' fill='none' stroke-width='.32' stroke-linecap='round' stroke-linejoin='round' d='M 2.503 1.955 L 2.56 3.175 L 2.617 1.955 C 2.618 1.945 2.615 1.934 2.61 1.925 C 2.605 1.916 2.598 1.908 2.589 1.903 C 2.58 1.898 2.57 1.895 2.559 1.895 C 2.549 1.895 2.539 1.898 2.53 1.903 C 2.522 1.909 2.514 1.916 2.509 1.925 C 2.505 1.934 2.502 1.944 2.503 1.955 Z'/%3e%3cpath fill='currentColor' stroke-width='1' d='M 2.56 3.974 C 2.515 3.974 2.471 3.959 2.435 3.93 C 2.4 3.902 2.375 3.863 2.365 3.819 C 2.355 3.774 2.36 3.728 2.38 3.687 C 2.399 3.646 2.432 3.613 2.473 3.594 C 2.514 3.574 2.56 3.569 2.604 3.579 C 2.649 3.589 2.688 3.614 2.716 3.649 C 2.744 3.685 2.76 3.729 2.76 3.774 C 2.76 3.827 2.739 3.878 2.701 3.915 C 2.664 3.953 2.613 3.974 2.56 3.974 Z'/%3e%3c/svg%3e");
    --svg-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='currentColor' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='currentColor' stroke='none'/%3e%3c/svg%3e");
    --svg-expanded: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3cpath fill='currentColor' d='M 320 64 C 178.6 64 64 178.6 64 320 C 64 461.4 178.6 576 320 576 C 461.4 576 576 461.4 576 320 C 576 178.6 461.4 64 320 64 Z M 199 305 C 189.6 295.6 189.6 280.4 199 271.1 C 208.4 261.8 223.6 261.7 232.9 271.1 L 319.9 358.1 L 406.9 271.1 C 416.3 261.7 431.5 261.7 440.8 271.1 C 450.1 280.5 450.2 295.7 440.8 305 L 337 409 C 327.6 418.4 312.4 418.4 303.1 409 L 199 305 Z'/%3e%3c/svg%3e");
    --svg-collapsed: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3e%3cpath fill='currentColor' d='M 320 576 C 461.4 576 576 461.4 576 320 C 576 178.6 461.4 64 320 64 C 178.6 64 64 178.6 64 320 C 64 461.4 178.6 576 320 576 Z M 441 335 C 450.4 344.4 450.4 359.6 441 368.9 C 431.6 378.2 416.4 378.3 407.1 368.9 L 320.1 281.9 L 233.1 368.9 C 223.7 378.3 208.5 378.3 199.2 368.9 C 189.9 359.5 189.8 344.3 199.2 335 L 303 231 C 312.4 221.6 327.6 221.6 336.9 231 L 441 335 Z'/%3e%3c/svg%3e")
}

.zoom {
    position: relative;
    transition: transform 0.2s;
    margin: 0 auto;
    z-index: 1
}

.zoom:hover {
    z-index: 2;
    transform: scale(10)
}

table.dataTable thead th {
    text-align: center
}

.th00,
.thb0 {
    border: 0.065em solid var(--color-border-th)
}

.th00 {
    background-color: var(--color-background-th) !important;
    font-weight: bold
}

.btnClass .btnImage {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer
}

.imageField {
    max-width: 1.5em;
    max-height: 1.5em
}

.td-editable {
    background-color: var(--color-focus-background-editable) !important
}

table.dataTable tbody td.focus {
    outline: 5px solid var(--color-border-shadow-focus-td);
    border-radius: .25rem;
    outline-offset: 0px;
    border: 1px solid var(--color-border-focus-td)
}

.editable {
    background-color: var(--color-transparent) !important;
    padding: 0;
    color: var(--color-main-text);
    border: none;
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box
}

.editable:focus {
    color: var(--color-focus-editable);
    border: none;
    outline: none
}

.select-field-wrapper::after,
.ui-autocomplete-input.editable:focus::after {
    content: "";
    position: absolute;
    right: calc(0.375em + 0.1875rem);
    top: 50%;
    transform: translateY(-50%);
    width: calc(0.75em + 0.375rem);
    height: calc(0.75em + 0.375rem);
    background-color: var(--color-icon-dropdown);
    mask-image: var(--svg-dropdown);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    -webkit-mask-image: var(--svg-dropdown);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%
}

.ui-autocomplete {
    max-height: 9.6em;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 10000 !important;
    position: absolute
}

.ui-autocomplete-input.editable:focus {
    padding-right: 1.5em;
    background-image: none !important;
    height: auto
}

.ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item:hover div i,
.ui-autocomplete .ui-menu-item.ui-state-focus div i,
.ui-autocomplete .ui-menu-item.ui-state-active div i,
.ui-menu-item-wrapper.ui-state-active .icon-autocomplete {
    color: var(--color-text-active-autocomplete) !important
}

.icon-autocomplete {
    color: var(--color-background-active-autocomplete)
}

td.is-valid,
td.is-warning,
td.is-invalid {
    outline: 0.095em solid;
    outline-offset: -0.0325em;
    padding-right: 2.25rem !important;
    position: relative
}

td.is-valid {
    outline-color: var(--color-valid)
}

td.is-warning {
    outline-color: var(--color-warning)
}

td.is-invalid {
    outline-color: var(--color-invalid)
}

td.is-valid::after,
td.is-warning::after,
td.is-invalid::after {
    content: "";
    position: absolute;
    right: calc(0.375em + 0.1875rem);
    top: 50%;
    transform: translateY(-50%);
    width: calc(0.75em + 0.375rem);
    height: calc(0.75em + 0.375rem);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%
}

td.is-valid::after {
    background-color: var(--color-valid);
    mask-image: var(--svg-valid);
    -webkit-mask-image: var(--svg-valid)
}

td.is-warning::after {
    background-color: var(--color-warning);
    mask-image: var(--svg-warning);
    -webkit-mask-image: var(--svg-warning)
}

td.is-invalid::after {
    background-color: var(--color-invalid);
    mask-image: var(--svg-invalid);
    -webkit-mask-image: var(--svg-invalid)
}

td.checkbox-cell {
    vertical-align: middle !important
}

td.checkbox-cell input[type="checkbox"] {
    vertical-align: middle;
    margin: 0 auto
}

.table-responsive {
    overflow: unset;
    position: relative
}

.rowsMenu .rowMenu {
    position: absolute;
    z-index: 10000 !important
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>th.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control::before {
    content: "";
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    width: 2.25em;
    height: 2.25em;
    display: inline-block;
    vertical-align: middle;
    border-top: 0.325em solid transparent;
    border-left: 0.65em solid transparent;
    border-bottom: 0.325em solid transparent;
    border-right: 0 solid transparent;
    margin: 0px
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control::before {
    mask-position: center;
    background-color: var(--color-icon-dt-expand);
    mask-image: var(--svg-expanded);
    -webkit-mask-image: var(--svg-expanded);
}

table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.dtr-expanded>th.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control::before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control::before {
    background-color: var(--color-icon-dt-collapse);
    mask-image: var(--svg-collapsed);
    -webkit-mask-image: var(--svg-collapsed);
}

td.child>table {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty {
    padding: 0 !important
}

th,
td {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important
}

tr.selected * {
    color: var(--color-text-selected) !important
}

@media (min-width: 56.975em) {

    tr.child {
        display: none !important
    }
}

@media print {
    .noPrint {
        display: none
    }

    .text-start {
        text-align: left
    }

    .text-center {
        text-align: center
    }

    .text-end {
        text-align: right
    }
}