/**
* Template Name: NiceAdmin - v2.4.0
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body,html{
    /* height: 100%; */
    /* text-transform: capitalize; */
}
body *{
    font-family: sans-serif;
    /* font-weight: bold !important; */
}
h1{
    font-size: 2.5rem
}

.table-crate th{
    font-weight: bolder !important;
    border-color: #d1d1d1 !important;
}
main{
    position: relative;
}
.extcls{
    max-height:100px;
    overflow-y:scroll !important;
    display: flex;
    flex-direction: column;
}
.s1 {
    font-size: 15px;
}
.s2 {
    font-size: 15px;
    width: 100%;
}

.in1 {
    padding: 1px;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 15px;
}
.in3 {
    padding: 1px;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight:bold;
    font-size: 18px;
}
.in2 {
    text-align: center;
    font-size: 15px;
}

.tg {
    border-collapse: collapse;
    border-color: rgb(90, 99, 177);
    /*#aabcfe;*/
    border-spacing: 0;
    width: 100%;
    border-color: rgb(90, 99, 177);
    border: 1px solid;
}
.btn-secondary{
    margin:0 10px;
}
.tg td {
    background-color: #e8edff;
    border-color: rgb(90, 99, 177);
    /* #aabcfe;*/
    border-style: solid;
    border-width: 1px;
    color: #333333;
    font-size: 14px;
    overflow: hidden;
    padding: 5px 5px;
    word-break: normal;
}

.tg th {
    background-color: #b9c9fe;
    border-color: rgb(90, 99, 177);
    /* #aabcfe;*/
    border-style: solid;
    border-width: 1px;
    color: #039;
    font-size: 14px;
    font-weight: normal;
    overflow: hidden;
    padding: 10px 5px;
    word-break: normal;
    text-align: center;
}
.tg-1vta,.tg-egzj{
    text-align: center !important;
}

.tg .tg-s6t0 {
    background-color: #fae3c6;
    color: #333333;
    text-align-last: left;
    vertical-align: center;
}
.tg .tg-s6t000 {
    background-color: #fae3c6;
    color: #333333;
    vertical-align: center;
    text-align-last: right;
    font-weight:bold;
    font-size: 18px;
}
.tg .tg-s6t00 {
    background-color: #fff;
    width: 70%;
    text-align: left;
    font-weight: bold;
    font-size: 16px;
    padding-left: 15px;
    
}

.tg .tg-tysj {
    color: #333333;
    text-align: center;
    vertical-align: center;
}

.tg .tg-a1xz {
    background-color: #b9c9fe;
    position: -webkit-sticky;
    position: sticky;
    text-align: center;
    top: -1px;
    vertical-align: top;
    will-change: transform;
}

.tg .tg-egzj {
    background-color: #fae3c6;
    color: #333333;
    font-weight: bold;
    text-align: right;
    vertical-align: top;
}

.tg .tg-fbdv {
    background-color: #d2e4fc;
    color: #333333;
    text-align: left;
    vertical-align: top;
}

.tg .tg-0lk3 {
    background-color: #b9c9fe;
    color: #003399;
    text-align: center;
    vertical-align: top;
}

.tg .tg-i6b8 {
    background-color: #b9c9fe;
    border-color: rgb(90, 99, 177);
    border: 1px solid;
    position: -webkit-sticky;
    position: sticky;
    text-align: center;
    top: -1px;
    vertical-align: top;
    will-change: transform;
}

.tg .tg-1vta {
    background-color: #fae3c6;
    color: #333333;
    font-weight: bold;
    text-align: right;
    vertical-align: top;
}

.tg .tg-fayn {
    background-color: #fae3c6;
    color: #333333;
    text-align: left;
    vertical-align: top;
}

@media screen and (max-width: 767px) {
    .tg {
        width: auto !important;
    }

    .tg col {
        width: auto !important;
    }

    .tg-wrap {
        /* overflow-x: auto; */
        -webkit-overflow-scrolling: touch;
    }
}
/*  */
.image-model {
    max-height: 80px;
    max-height: 80px;
}
.cat-model {
    color: #aaaaaa;
    font-size: 12px;
}
.SPZ {
    background-color: rgb(32, 208, 252);
}
.IMP {
    background-color: rgb(255, 199, 79);
}
.NA {
    background-color: red;
}
.STD {
    background-color: rgb(255, 255, 255);
}

input:required:invalid {
    border-color: #b5aaaa;
}

input:required:valid {
    border-color: rgb(177, 231, 177);
}
textarea:required:invalid {
    border-color: #f0b2b1;
}

textarea:required:valid {
    border-color: rgb(177, 231, 177);
}
select:required:invalid {
    border-color: #f0b2b1;
}

select:required:valid {
    border-color: rgb(177, 231, 177);
}
.mid {
    vertical-align: middle;
}
.profile-img {
    width: 100px;
    height: 100px;
}
.profile-master-img {
    width: 50px;
    height: 50px;
}
.list-mat-img {
    width: 80px;
    height: 80px;
}
.success {
    color: #4f8a10;
    /* background-color: #dff2bf; */
    /*border-left: 4px solid #00bf00;*/
}

.error {
    color: #d8000c;
    /* background-color: #ffd2d2; */
}

:root {
    scroll-behavior: smooth;
    --form-action-cancel-bg: #dc3545;
    --form-action-cancel-bg-hover: #bb2d3b;
    --form-action-cancel-border: #dc3545;
    --form-action-save-bg: #198754;
    --form-action-save-bg-hover: #157347;
    --form-action-save-border: #198754;
    --form-action-check-pending-bg: #0d6efd;
    --form-action-check-pending-bg-hover: #0b5ed7;
    --user-management-edit-action-size: 2rem;
    --panel-action-edit-bg: #0d6efd;
    --panel-action-edit-bg-hover: #0b5ed7;
    --panel-action-edit-border: #0d6efd;
    --panel-action-delete-bg: var(--form-action-cancel-bg);
    --panel-action-delete-bg-hover: var(--form-action-cancel-bg-hover);
    --panel-action-delete-border: var(--form-action-cancel-border);
    --panel-action-icon-color: #fff;
    --panel-action-view-bg: #20c4dd;
    --panel-action-view-bg-hover: #11afc9;
    --panel-action-view-border: #20c4dd;
    --panel-action-view-color: #082f3a;
    --panel-tooltip-bg: #17243a;
    --panel-tooltip-color: #fff;
}

body {
    /* font-family: "Open Sans", sans-serif; */
    background: #e4edff;
    color: #444444;
    overflow-x: hidden;
}

a {
    color: #4154f1;
    text-decoration: none;
}

a:hover {
    color: #717ff5;
    text-decoration: none;
}

.btn-action-cancel,
.btn-action-save,
.btn-action-view {
    color: #fff !important;
}

.btn-action-cancel {
    border-color: var(--form-action-cancel-border) !important;
    background-color: var(--form-action-cancel-bg) !important;
}

.btn-action-cancel:hover,
.btn-action-cancel:focus-visible {
    border-color: var(--form-action-cancel-bg-hover) !important;
    background-color: var(--form-action-cancel-bg-hover) !important;
}

/* Keep every semantic cancel/danger control on the shared cancel color. */
:is(.btn-action-cancel, .btn-cancel, .btn-danger, .cancel, .MTcancel, .modal-footer .btn[data-bs-dismiss="modal"]) {
    border-color: var(--form-action-cancel-border) !important;
    color: #fff !important;
    background-color: var(--form-action-cancel-bg) !important;
}

:is(.btn-action-cancel, .btn-cancel, .btn-danger, .cancel, .MTcancel, .modal-footer .btn[data-bs-dismiss="modal"]):hover,
:is(.btn-action-cancel, .btn-cancel, .btn-danger, .cancel, .MTcancel, .modal-footer .btn[data-bs-dismiss="modal"]):focus-visible {
    border-color: var(--form-action-cancel-bg-hover) !important;
    background-color: var(--form-action-cancel-bg-hover) !important;
}

/* SweetAlert sets button colors inline, so keep its cancel action tied to the same tokens. */
.swal2-actions .swal2-cancel {
    border-color: var(--form-action-cancel-border) !important;
    color: #fff !important;
    background-color: var(--form-action-cancel-bg) !important;
}

.swal2-actions .swal2-cancel:hover,
.swal2-actions .swal2-cancel:focus-visible {
    border-color: var(--form-action-cancel-bg-hover) !important;
    background-color: var(--form-action-cancel-bg-hover) !important;
}

.btn-action-save {
    border-color: var(--form-action-save-border) !important;
    background-color: var(--form-action-save-bg) !important;
}

.btn-action-save:hover,
.btn-action-save:focus-visible {
    border-color: var(--form-action-save-bg-hover) !important;
    background-color: var(--form-action-save-bg-hover) !important;
}

.transport-unit {
    display: block;
}

/* Saved rows start green; new or edited rows stay blue until confirmed. */
.btn.check-value.is-new,
.btn.check-value.is-pending,
.btn-primary.check-value:not(.is-saved),
.btn.check-value.is-new:focus,
.btn.check-value.is-pending:focus,
.btn-primary.check-value:not(.is-saved):focus,
.btn.check-value.is-new:active,
.btn.check-value.is-pending:active,
.btn-primary.check-value:not(.is-saved):active {
    border-color: var(--form-action-check-pending-bg) !important;
    color: #fff !important;
    background-color: var(--form-action-check-pending-bg) !important;
}

.btn.check-value.is-new:hover,
.btn.check-value.is-pending:hover,
.btn-primary.check-value:not(.is-saved):hover,
.btn.check-value.is-new:focus-visible,
.btn.check-value.is-pending:focus-visible,
.btn-primary.check-value:not(.is-saved):focus-visible {
    border-color: var(--form-action-check-pending-bg-hover) !important;
    background-color: var(--form-action-check-pending-bg-hover) !important;
}

.btn-success.check-value:not(.is-pending):not(.is-new),
.btn.check-value.is-saved,
.btn-primary.check-value.is-saved,
.btn-success.check-value.is-saved,
.btn.check-value.is-saved:focus,
.btn.check-value.is-saved:active {
    border-color: var(--form-action-save-border) !important;
    color: #fff !important;
    background-color: var(--form-action-save-bg) !important;
}

.btn.check-value.is-saved:hover,
.btn.check-value.is-saved:focus-visible {
    border-color: var(--form-action-save-bg-hover) !important;
    background-color: var(--form-action-save-bg-hover) !important;
}

.btn-action-view {
    border-color: var(--panel-action-view-border) !important;
    background-color: var(--panel-action-view-bg) !important;
    color: var(--panel-action-view-color) !important;
}

.btn-action-view:hover,
.btn-action-view:focus-visible {
    border-color: var(--panel-action-view-bg-hover) !important;
    background-color: var(--panel-action-view-bg-hover) !important;
    color: var(--panel-action-view-color) !important;
}

.btn-action-view > i,
.btn-action-view .bi,
.btn-action-view .fa {
    color: inherit !important;
}

/* Shared Office and Warehouse address styling for every User Management form. */
:root {
    --user-management-address-surface: #c8c8c8;
    --user-management-address-header-bg: #fff;
    --user-management-address-border: #ced4da;
    --user-management-address-separator: #edf0f2;
    --user-management-address-focus: #86b7fe;
    --user-management-address-focus-ring: rgba(13, 110, 253, .12);
    --user-management-address-row-focus: #f8faff;
}

#main.main :is(.user-management-address-sections, .customer-address-sections, .factory-address-sections) {
    display: grid;
    gap: 0;
}

#main.main .user-management-address-section {
    min-width: 0;
    margin: 0 0 1.1rem;
    padding: 10px 18px 18px;
    border: 1px solid #d5d9e0;
    border-radius: 12px;
    background: var(--user-management-address-surface);
}

#main.main .user-management-address-section-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    margin: 0 0 22px;
    padding-inline: 4px;
}

/* Match the same gray address card and white title strip on every edit page. */
#main.main .user-management-edit-address-section {
    padding: 10px 18px 18px;
    background: var(--user-management-address-surface);
}

#main.main .user-management-edit-address-section .user-management-address-section-header {
    padding: 4px 6px 10px;
    border-radius: 8px;
    background: var(--user-management-address-header-bg);
}

#main.main .user-management-address-section-title {
    min-width: 0;
    margin: 0;
    color: #344054;
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1.35;
}

#main.main .user-management-add-user-section {
    min-width: 0;
    margin: 1.25rem 0 1.1rem;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #aab3d2;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}

#main.main .user-management-add-user-section > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-bottom: 1px solid #aab3d2;
    background: #d3d9ff;
    color: #082f7a;
}

#main.main .user-management-add-user-title {
    margin: 0;
    color: #082f7a;
    font-size: 1.08rem;
    font-weight: 700;
}

#main.main .user-management-add-user-section > .card-header > .btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
}

#main.main .user-management-add-user-section > .user-sec:empty {
    display: none;
}

#main.main .user-management-add-user-section > .user-sec:not(:empty) {
    padding: 18px;
}

#main.main .user-management-add-user-section > .card-footer {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 12px 18px;
    border: 0;
    border-top: 1px solid #edf0f5;
    background: #fff;
}

#main.main .user-management-add-user-section > .card-footer.d-none {
    display: none !important;
}

#main.main .user-management-address-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin-inline-start: 0;
    padding: 0;
    border-radius: 9px;
    white-space: nowrap;
}

#main.main .user-management-address-add span {
    display: none;
}

#main.main .user-management-address-add.customer-pluse {
    padding: 0 !important;
    font-size: 1rem;
}

#main.main .user-management-address-list {
    display: grid;
    gap: 12px;
}

#main.main :is(.admin-address-item, .customer-address-item, .factory-address-item, .factory-create-address-item, .supplier-address-item, .office-address-item) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
    min-width: 0;
    margin: 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible !important;
    box-shadow: none;
}

#main.main .customer-create-address {
    display: block !important;
    margin-top: 20px;
}

#main.main :is(.admin-address-content, .customer-address-content, .factory-address-content, .factory-create-address-content, .supplier-address-content) {
    display: grid;
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
    min-width: 0;
}

#main.main :is(.customer-address-content, .factory-address-content, .factory-create-address-content, .supplier-address-content) {
    grid-row: 1;
    padding: 0;
}

#main.main .admin-address-transport {
    margin: 0;
}

#main.main :is(.admin-address-fields, .admin-address-transport, .office-address-fields,
    .customer-address-fields, .customer-address-transport, .factory-address-fields,
    .factory-address-transport, .supplier-address-fields, .supplier-address-transport,
    .factory-create-address-fields, .factory-create-address-transport, .customer-create-address-fields, .user-management-address-fields) {
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--user-management-address-border);
    border-radius: .5rem;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#main.main :is(.admin-address-fields, .admin-address-transport, .office-address-fields,
    .customer-address-fields, .customer-address-transport, .factory-address-fields,
    .factory-address-transport, .supplier-address-fields, .supplier-address-transport,
    .factory-create-address-fields, .factory-create-address-transport, .customer-create-address-fields, .user-management-address-fields):focus-within {
    border-color: var(--user-management-address-focus);
    box-shadow: 0 0 0 .15rem var(--user-management-address-focus-ring);
}

#main.main :is(.admin-address-row, .office-address-row, .customer-address-row,
    .factory-address-row, .supplier-address-row, .factory-create-address-row, .user-management-address-row) {
    display: grid;
    grid-template-columns: minmax(125px, 26%) minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    min-height: 50px;
    margin: 0;
    padding: .45rem .9rem;
    transition: background-color .15s ease;
}

#main.main :is(.admin-address-row, .office-address-row, .customer-address-row,
    .factory-address-row, .supplier-address-row, .factory-create-address-row, .user-management-address-row) +
    :is(.admin-address-row, .office-address-row, .customer-address-row,
    .factory-address-row, .supplier-address-row, .factory-create-address-row, .user-management-address-row) {
    border-top: 1px solid var(--user-management-address-separator);
}

#main.main :is(.admin-address-row, .office-address-row, .customer-address-row,
    .factory-address-row, .supplier-address-row, .factory-create-address-row, .user-management-address-row):focus-within {
    background: var(--user-management-address-row-focus);
}

#main.main :is(.admin-address-row, .office-address-row, .customer-address-row,
    .factory-address-row, .supplier-address-row, .factory-create-address-row, .user-management-address-row) label {
    margin: 0;
    color: #6c757d;
    font-size: .85rem;
    font-weight: 400;
}

#main.main :is(.admin-address-row, .office-address-row, .customer-address-row,
    .factory-address-row, .supplier-address-row, .factory-create-address-row, .user-management-address-row) .form-control {
    width: 100%;
    min-width: 0;
    padding: .35rem .25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#main.main .user-management-address-row > label {
    grid-column: 1;
}

#main.main .user-management-address-row > .u-input-contain {
    grid-column: 2;
    min-width: 0;
    width: auto;
}

#main.main .user-management-address-row .form-select {
    width: 100%;
    min-width: 0;
    padding: .35rem .25rem;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

#main.main .user-management-address-row textarea {
    min-height: 72px;
    resize: vertical;
}

#main.main .factory-create-address-row .form-control {
    padding-block: .35rem;
}

#main.main :is(.admin-address-actions, .customer-address-actions, .factory-address-actions,
    .factory-create-address-actions, .supplier-address-actions, .office-address-actions) > button {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 9px;
}

#main.main :is(.admin-address-primary, .customer-address-primary, .factory-address-primary,
    .supplier-address-primary, .office-address-primary, .factory-create-address-actions > label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    margin: 0 !important;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    #main.main :is(.user-management-address-section, .user-management-edit-address-section) {
        padding: 14px;
    }

    #main.main .user-management-address-section-header {
        margin-bottom: 18px;
    }

    #main.main :is(.admin-address-row, .office-address-row, .customer-address-row,
        .factory-address-row, .supplier-address-row, .factory-create-address-row, .user-management-address-row) {
        grid-template-columns: 105px minmax(0, 1fr);
        padding-inline: .75rem;
    }

}

/* Keep controls in their normal position until scrolling reaches them, bounded by their address card. */
#main.main :is(.admin-address-actions, .customer-address-actions, .factory-address-actions, .factory-create-address-actions, .supplier-address-actions, .office-address-actions) {
    position: sticky !important;
    top: var(--user-management-edit-sticky-top, 84px) !important;
    z-index: 8;
    align-self: flex-start;
    display: grid !important;
    grid-template-columns: auto;
    grid-template-rows: repeat(2, max-content);
    justify-items: center;
    align-items: center;
    width: max-content !important;
    flex: 0 0 auto;
    gap: 6px !important;
    border: 0;
    border-radius: 0;
    padding: 0 !important;
    background: transparent;
    box-shadow: none;
}

#main.main :is(.admin-address-actions, .customer-address-actions, .factory-address-actions, .factory-create-address-actions, .supplier-address-actions, .office-address-actions):has(> label) {
    grid-template-columns: auto auto;
}

#main.main :is(.admin-address-actions, .customer-address-actions, .factory-address-actions, .supplier-address-actions, .office-address-actions):has(> label) > :first-child {
    grid-column: 1;
    grid-row: 1;
}

#main.main :is(.admin-address-actions, .customer-address-actions, .factory-address-actions, .supplier-address-actions, .office-address-actions):has(> label) > :nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

#main.main :is(.admin-address-actions, .customer-address-actions, .factory-address-actions, .supplier-address-actions, .office-address-actions):has(> label) > label {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

/* Create forms can have a radio and delete button without a save button. */
#main.main :is(.factory-create-address-actions, .supplier-address-actions):has(> label):not(:has(> .btn-success)) {
    grid-template-rows: max-content;
}

#main.main :is(.factory-create-address-actions, .supplier-address-actions):has(> label):not(:has(> .btn-success)) > label {
    grid-column: 2;
    grid-row: 1;
}

#main.main :is(.factory-create-address-actions, .supplier-address-actions):has(> label):not(:has(> .btn-success)) > button {
    grid-column: 1;
    grid-row: 1;
}

#main.main .factory-create-address-actions:has(> label):not(:has(> button)) {
    grid-template-columns: auto;
}

#main.main .factory-create-address-actions:has(> label):not(:has(> button)) > label {
    grid-column: 1;
    grid-row: 1;
}

#main.main :is(.admin-address-actions, .customer-address-actions, .factory-address-actions, .factory-create-address-actions, .supplier-address-actions, .office-address-actions) > * {
    margin: 0 !important;
}

/* Keep every address form beside its action rail, matching the Admin editor. */
#main.main :is(.customer-address-content, .factory-address-content, .factory-create-address-content, .supplier-address-content) {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

#main.main :is(.customer-address-actions, .factory-address-actions, .factory-create-address-actions, .supplier-address-actions) {
    grid-column: 2;
    grid-row: 1;
}

/* Older user-management address forms use Bootstrap columns as the action rail. */
#main.main :is(#pluse-address, #pluse-addressorder) > div > :is(.col-1, .col-3, .col-4):has(> .check-value) {
    position: sticky !important;
    top: var(--user-management-edit-sticky-top, 84px) !important;
    z-index: 8;
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: auto;
    grid-template-rows: repeat(2, max-content);
    justify-items: center;
    align-items: center;
    width: max-content !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#main.main :is(#pluse-address, #pluse-addressorder) > div > :is(.col-1, .col-3, .col-4):has(> input[type="radio"]) {
    grid-template-columns: auto auto;
}

#main.main :is(#pluse-address, #pluse-addressorder) > div > :is(.col-1, .col-3, .col-4):has(> .check-value) > .check-value {
    grid-column: 1;
    grid-row: 1;
}

#main.main :is(#pluse-address, #pluse-addressorder) > div > :is(.col-1, .col-3, .col-4):has(> .check-value) > .btn-danger {
    grid-column: 1;
    grid-row: 2;
}

#main.main :is(#pluse-address, #pluse-addressorder) > div > :is(.col-1, .col-3, .col-4):has(> input[type="radio"]) > input[type="radio"] {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

#main.main :is(#pluse-address, #pluse-addressorder) > div > :is(.col-1, .col-3, .col-4):has(> .check-value) > * {
    margin: 0 !important;
}

#main.main #pluse-address > div > textarea,
#main.main #pluse-addressorder > div > :is(.col-9, .col-11) {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* The older Person editor stores an address as one multiline value; give it the same field panel and action rail. */
#main.main #pluse-address > div:has(> textarea) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
    min-width: 0;
}

#main.main #pluse-address > div > textarea,
#main.main #pluse-addressorder > div > :is(.col-9, .col-11) {
    border: 1px solid var(--user-management-address-border) !important;
    border-radius: .5rem !important;
    background: #fff !important;
}

#main.main #pluse-address > div > textarea {
    height: 100px;
    padding: .65rem .75rem;
    box-shadow: none;
}

#main.main #pluse-addressorder > div:has(> :is(.col-9, .col-11)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
    margin: 0 0 .75rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#main.main #pluse-addressorder > div > :is(.col-9, .col-11) {
    display: grid !important;
    grid-template-columns: minmax(125px, 26%) minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

#main.main #pluse-addressorder > div > :is(.col-9, .col-11) > textarea {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    height: 100px;
    padding: .65rem .75rem;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--user-management-address-separator);
    box-shadow: none;
}

#main.main #pluse-addressorder > div > :is(.col-9, .col-11) > label {
    width: auto !important;
    margin: 0 !important;
    padding: .5rem .75rem;
    color: #6c757d;
    font-size: .85rem;
}

#main.main #pluse-addressorder > div > :is(.col-9, .col-11) > input {
    width: 100%;
    min-width: 0;
    padding: .35rem .25rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Keep row-level save and delete controls together instead of spreading them across the whole column. */
#main.main .u-input-contain[id^="pluse-"] > div > :is(.col-4, .col-3) {
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-inline-start: 8px !important;
}

.tooltip {
    --bs-tooltip-bg: var(--panel-tooltip-bg);
    --bs-tooltip-color: var(--panel-tooltip-color);
    --bs-tooltip-opacity: 1;
}

.tooltip .tooltip-inner {
    padding: .45rem .7rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .55rem;
    box-shadow: 0 .4rem 1.1rem rgba(15, 23, 42, .2);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.user-management-password-copy {
    cursor: copy;
}

.user-management-password-copy-status:not(:empty) {
    display: inline-block;
    margin-inline-start: .55rem;
    color: var(--form-action-save-bg);
    font-size: .9rem;
    font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Nunito", sans-serif;
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
    margin-top: 60px;
    padding: 20px 18px;
    transition: all 0.3s;
}
@media (max-width: 1199px) {
    #main {
        padding: 20px;
    }
}

/* One shared edit/delete color system for Basic Information and User Management. */
body.basicinfo-tools-page .panel-action-edit,
body.user-management-tools-page .panel-action-edit {
    color: var(--panel-action-icon-color) !important;
    background-color: var(--panel-action-edit-bg) !important;
    border-color: var(--panel-action-edit-border) !important;
}

body.basicinfo-tools-page .panel-action-edit:hover,
body.user-management-tools-page .panel-action-edit:hover,
body.basicinfo-tools-page .panel-action-edit:focus-visible,
body.user-management-tools-page .panel-action-edit:focus-visible {
    color: var(--panel-action-icon-color) !important;
    background-color: var(--panel-action-edit-bg-hover) !important;
    border-color: var(--panel-action-edit-bg-hover) !important;
}

body.basicinfo-tools-page .panel-action-delete,
body.user-management-tools-page .panel-action-delete {
    color: var(--panel-action-icon-color) !important;
    background-color: var(--panel-action-delete-bg) !important;
    border-color: var(--panel-action-delete-border) !important;
}

body.basicinfo-tools-page .panel-action-delete:hover,
body.user-management-tools-page .panel-action-delete:hover,
body.basicinfo-tools-page .panel-action-delete:focus-visible,
body.user-management-tools-page .panel-action-delete:focus-visible {
    color: var(--panel-action-icon-color) !important;
    background-color: var(--panel-action-delete-bg-hover) !important;
    border-color: var(--panel-action-delete-bg-hover) !important;
}

body.basicinfo-tools-page .panel-action-edit :is(i, svg),
body.basicinfo-tools-page .panel-action-delete :is(i, svg),
body.user-management-tools-page .panel-action-edit :is(i, svg),
body.user-management-tools-page .panel-action-delete :is(i, svg) {
    color: var(--panel-action-icon-color) !important;
    fill: currentColor;
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
    margin-bottom: 10px;
    text-indent: 10px;
}

.pagetitle h1 {
    /* font-size: 33px; */
    margin-bottom: 0;
    font-weight: 600;
    color: #012970;
    /* font-size: 2.7rem !important; */
    font-size: 2.5rem !important;
}
.main-pricelist .priceform {
    margin-top: 0px !important;
}
.pricecard {
    margin-bottom: 0px !important;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background: #4154f1;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
    z-index: auto;
    z-index: 2;
}

.back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.back-to-top:hover {
    background: #6776f4;
    color: #fff;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
    border-radius: 4px;
    padding: 10px 0;
    -webkit-animation-name: dropdown-animate;
    animation-name: dropdown-animate;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    border: 0;
    box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
    text-align: center;
    font-size: 15px;
    padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
    color: #444444;
    text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
    text-decoration: none;
}

.dropdown-menu .dropdown-divider {
    color: #a5c5fe;
    margin: 0;
}

.dropdown-menu .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

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

@media (min-width: 768px) {
    .dropdown-menu-arrow::before {
        content: "";
        width: 13px;
        height: 13px;
        background: #fff;
        position: absolute;
        top: -7px;
        right: 20px;
        transform: rotate(45deg);
        border-top: 1px solid #eaedf1;
        border-left: 1px solid #eaedf1;
    }
}

@-webkit-keyframes dropdown-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

@keyframes dropdown-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

/* Light Backgrounds */
.bg-primary-light {
    background-color: #cfe2ff;
    border-color: #cfe2ff;
}

.bg-secondary-light {
    background-color: #e2e3e5;
    border-color: #e2e3e5;
}

.bg-success-light {
    background-color: #d1e7dd;
    border-color: #d1e7dd;
}

.bg-danger-light {
    background-color: #f8d7da;
    border-color: #f8d7da;
}

.bg-warning-light {
    background-color: #fff3cd;
    border-color: #fff3cd;
}

.bg-info-light {
    background-color: #cff4fc;
    border-color: #cff4fc;
}

.bg-dark-light {
    background-color: #d3d3d4;
    border-color: #d3d3d4;
}

/* Card */
.card {
    /* margin-bottom: 30px; */
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
    padding-top: 26px;
}

.card-header,
.card-footer {
    border-color: #ebeef4;
    background-color: #fff;
    color: #798eb3;
    padding: 15px;
}
.cart-form{
    width: 380px;
}
.card-title {
    padding: 2px 0 15px 0;
    font-size: 18px;
    font-weight: 500;
    color: #012970;
    font-family: "Poppins", sans-serif;
}

.card-title span {
    color: #899bbd;
    font-size: 14px;
    font-weight: 400;
}

.card-body {
    padding: 20px;
}

.card-img-overlay {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
}

/* Close Button */
.btn-close {
    background-size: 25%;
}

.btn-close:focus {
    outline: 0;
    box-shadow: none;
}

/* Accordion */
.accordion-item {
    border: 1px solid #ebeef4;
}

.accordion-button:focus {
    outline: 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: #012970;
    background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
    padding: 15px 0;
    background: none;
    border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
    box-shadow: none;
    color: #4154f1;
}

.accordion-flush .accordion-body {
    padding: 0 0 15px 0;
    color: #3e4f6f;
    font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
    font-size: 14px;
    font-family: "Nunito", sans-serif;
    color: #899bbd;
    font-weight: 600;
}

.breadcrumb a {
    color: #899bbd;
    transition: 0.3s;
}

.breadcrumb a:hover {
    color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
    color: #899bbd;
}

.breadcrumb .active {
    color: #51678f;
    font-weight: 600;
}

/* Bordered Tabs */
.nav-tabs-bordered {
    border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
    margin-bottom: -2px;
    border: none;
    color: #2c384e;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
    color: #4154f1;
}

.nav-tabs-bordered .nav-link.active {
    background-color: #fff;
    color: #4154f1;
    border-bottom: 2px solid #4154f1;
}

/* Reuse the same gray track and short blue underline for section headings in edit forms. */
#main.main :is(
    .user-management-address-section-header,
    .basicinfo-edit-title,
    .logestic-form-section > h5,
    .customer-delivery-terms-heading,
    .customer-payment-terms-heading,
    .salesman-heading,
    .customer-design-section-title,
    .user-management-address-subheading,
    .user-management-detail-section > :is(h2, h3, h4, h5),
    .user-management-form-section > h5
) {
    position: relative;
    padding-bottom: 8px;
    border-bottom: 2px solid #ebeef4;
}

#main.main :is(
    .user-management-address-section-header,
    .basicinfo-edit-title,
    .logestic-form-section > h5,
    .customer-delivery-terms-heading,
    .customer-payment-terms-heading,
    .salesman-heading,
    .customer-design-section-title,
    .user-management-address-subheading,
    .user-management-detail-section > :is(h2, h3, h4, h5),
    .user-management-form-section > h5
)::after {
    position: absolute;
    inset-inline-start: 0;
    bottom: -2px;
    width: clamp(76px, 22%, 140px);
    height: 2px;
    background: #4154f1;
    content: "";
    pointer-events: none;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
    line-height: 1;
    justify-content: center;
    align-items: center;
}

@media (min-width: 1200px) {
    .logo {
        /* width: 280px; */
    }
}

.logo img {
    max-height: 48px;
    margin-right: 12px;
}

.logo span {
    font-size: 18px;
    font-weight: 700;
    color: #012970;
    font-family: "Nunito", sans-serif;
    margin-top: 4px;
}

.login2{
    font-size: 36px;
    font-weight: 700;
    color: #001d50;
    font-family: "Nunito", sans-serif;
}
.dropdown-menu.show{
    display: flex !important;
}
.dropdown-menu{
    min-width: max-content;
    width: max-content;
    
    justify-content: center;
    /* align-items: center; */
    flex-direction: column;
}
.dropdown-header{
    background-color: #003399;
    color: white !important;
}
.dropdown-header h6{
    color: white !important;
}
.dropdown-header span{
    font-size: 1.5rem;
}
.notification-item{
    padding: 15px;
    font-weight: bold;
    color: black;
    font-size: 0.9rem;
}
.header {
    transition: all 0.5s;
    z-index: 997;
    /* height: 67px; */
    box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
    background-color: #fff;
    /* padding-left: 20px; */
    padding-top: 6px;
    padding-bottom: 5px;
    position: sticky;
    top: 0;
}

#header.header {
    margin-bottom: 0;
}

.header .toggle-sidebar-btn {
    font-size: 28px;
    margin-left: 14px;
    cursor: pointer;
    color: #012970;
    display: flex;
    align-items: center;
    margin-top: 3px;
}

.header .search-bar {
    min-width: 360px;
    padding: 0 20px;
}

@media (max-width: 1199px) {
    .header .search-bar {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        padding: 20px;
        box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
        background: white;
        z-index: 9999;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
    }

    .header .search-bar-show {
        top: 60px;
        visibility: visible;
        opacity: 1;
    }
}

.header .search-form {
    width: 100%;
}

.header .search-form input {
    border: 0;
    font-size: 14px;
    color: #012970;
    border: 1px solid rgba(1, 41, 112, 0.2);
    padding: 7px 38px 7px 8px;
    border-radius: 3px;
    transition: 0.3s;
    width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
    outline: none;
    box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
    border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
    border: 0;
    padding: 0;
    margin-left: -30px;
    background: none;
}

.header .search-form button i {
    color: #012970;
}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
    list-style: none;
}

.header-nav > ul {
    margin: 0;
    padding: 0;
}

.header-nav .nav-icon {
    font-size: 22px;
    color: #012970;
    margin-right: 25px;
    position: relative;
}

.header-nav .nav-profile {
    color: #012970;
}

.header-nav .nav-profile img {
    max-height: 36px;
}

.header-nav .nav-profile span {
    font-size: 0.7em;
    font-weight: 600;
}

.header-nav .badge-number {
    position: absolute;
    inset: -2px -5px auto auto;
    font-weight: normal;
    font-size: 12px;
    padding: 3px 6px;
}

.header-nav .notifications {
    inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .notifications .notification-item i {
    margin: 0 20px 0 10px;
    font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
    font-size: 13px;
    margin-bottom: 3px;
    color: #919191;
}

.header-nav .notifications .notification-item:hover {
    background-color: #f6f9ff;
}

.header-nav .messages {
    inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .messages .message-item a {
    display: flex;
}

.header-nav .messages .message-item img {
    margin: 0 20px 0 10px;
    max-height: 40px;
}

.header-nav .messages .message-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #444444;
}

.header-nav .messages .message-item p {
    font-size: 13px;
    margin-bottom: 3px;
    color: #919191;
}

.header-nav .messages .message-item:hover {
    background-color: #f6f9ff;
}

.header-nav .profile {
    min-width: 240px;
    padding-bottom: 0;
    top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 600;
    color: #444444;
}

.header-nav .profile .dropdown-header span {
    font-size: 14px;
}

.header-nav .profile .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
}


.header-nav .profile .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
    background-color: #d6d9db;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
    position: fixed;
    top: var(--site-header-height, 68px);
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 996;
    transition: all 0.3s;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
    background-color: #fff;
}

@media (max-width: 1199px) {
    .sidebar {
        left: -300px;
    }
}

.sidebar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}

@media (min-width: 1200px) {
    #main,
    #footer {
        margin-left: 236px;
    }
}

@media (max-width: 1199px) {
    .toggle-sidebar .sidebar {
        left: 0;
    }
}

@media (min-width: 1200px) {
    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 0;
    }

    .toggle-sidebar .sidebar {
        left: -300px;
    }
}

.sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-item {
    margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
    font-size: 11px;
    text-transform: uppercase;
    color: #899bbd;
    font-weight: 600;
    margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #4154f1;
    transition: 0.3;
    background: #f6f9ff;
    padding: 10px 6px;
    border-radius: 4px;
}

.sidebar-nav .nav-link i {
    font-size: 16px;
    margin-right: 10px;
    color: #4154f1;
}

.sidebar-nav .nav-link.collapsed {
    color: #012970;
    background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
    color: #899bbd;
}

.sidebar-nav .nav-link:hover {
    color: #4154f1;
    background: #f6f9ff;
}

.sidebar-nav .nav-link:hover i {
    color: #4154f1;
}

.sidebar-nav .nav-link .bi-chevron-down {
    margin-right: 0;
    transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

.sidebar-nav .nav-content {
    padding: 5px 0 0 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-content a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #012970;
    transition: 0.3;
    padding: 10px 0 10px 31px;
    transition: 0.3s;
    
}

.sidebar-nav .nav-content a i {
    font-size: 6px;
    margin-right: 8px;
    line-height: 0;
    border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: #4154f1;
}

.sidebar-nav .nav-content a.active i {
    background-color: #4154f1;
}

.sidebar-nav .nav-content a > i.sidebar-menu-icon {
    flex: 0 0 18px;
    width: 18px;
    margin: 0;
    margin-inline-end: 10px;
    border-radius: 0;
    font-size: 14px;
    line-height: 1;
    color: #7183a4;
    background: transparent;
}

.sidebar-nav .nav-content a.active > i.sidebar-menu-icon {
    color: #4154f1;
    background: transparent;
}

.sidebar-nav .basicinfo-nav-content > li > a > i.basicinfo-icon,
.sidebar-nav #groups-nav > li > a > i.basicinfo-icon,
.sidebar-nav #container-management-nav > li > a > i.basicinfo-icon {
    flex: 0 0 18px;
    width: 18px;
    margin: 0;
    margin-inline-end: 10px;
    border-radius: 0;
    font-size: 15px;
    line-height: 1;
    color: #7183a4;
    background: transparent;
}

.sidebar-nav .basicinfo-nav-content > li > a.active > i.basicinfo-icon,
.sidebar-nav #groups-nav > li > a.active > i.basicinfo-icon,
.sidebar-nav #container-management-nav > li > a.active > i.basicinfo-icon {
    color: #4154f1;
    background: transparent;
}

.sidebar-nav .basicinfo-nav-content > li > a:not(.groups-parent-link),
.sidebar-nav #groups-nav > li > a {
    font-weight: 400;
}

.sidebar-nav .basicinfo-nav-content > li > a.active:not(.groups-parent-link),
.sidebar-nav #groups-nav > li > a.active {
    font-weight: 700;
}

/* Groups submenu hierarchy */
.sidebar-nav .nav-content a.groups-parent-link {
    margin: 0;
    padding: 10px 12px 10px 31px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #173b75;
    font-weight: 700;
}

.sidebar-nav .nav-content a.groups-parent-link > i:first-child {
    margin-inline-end: 10px;
    border-radius: 0;
    font-size: 12px;
    line-height: 1;
    color: #315b9b;
    background: transparent;
}

.sidebar-nav .nav-content a.groups-parent-link .bi-chevron-down {
    margin: 0;
    margin-inline-start: auto;
    font-size: 10px;
    color: #60789f;
    transition: transform 0.2s ease;
}

.sidebar-nav .nav-content a.groups-parent-link[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.sidebar-nav .nav-content a.groups-parent-link:focus:not(:focus-visible) {
    outline: none;
}

.sidebar-nav .nav-content a.groups-parent-link:focus-visible {
    outline: 2px solid #315bb5;
    outline-offset: -2px;
}

.sidebar-nav .nav-content .groups-submenu {
    margin: 0 12px 6px 37px;
    padding: 0 0 0 12px;
    border-inline-start: 1px solid #d6e1f1;
    border-radius: 0;
    background: transparent;
}

.sidebar-nav .nav-content .groups-submenu a {
    margin: 0;
    padding: 9px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #526580;
}

.sidebar-nav .nav-content .groups-submenu a.active {
    color: #17489c;
    font-weight: 700;
}

.sidebar-nav .nav-content .groups-submenu a:hover,
.sidebar-nav .nav-content a.groups-parent-link:hover {
    color: #17489c;
}

.sidebar-nav .nav-content .groups-submenu a.active i {
    background-color: #315bb5;
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
    position: absolute;
    right: 0px;
    top: 15px;
}

.dashboard .filter .icon {
    color: #aab7cf;
    padding-right: 20px;
    padding-bottom: 5px;
    transition: 0.3s;
    font-size: 16px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
    color: #4154f1;
}

.dashboard .filter .dropdown-header {
    padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #aab7cf;
    margin-bottom: 0;
    padding: 0;
}

.dashboard .filter .dropdown-item {
    padding: 8px 15px;
}

/* Info Cards */
.dashboard .info-card {
    padding-bottom: 10px;
}

.dashboard .info-card h6 {
    font-size: 28px;
    color: #012970;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.dashboard .card-icon {
    font-size: 32px;
    line-height: 0;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    flex-grow: 0;
}

.dashboard .sales-card .card-icon {
    color: #4154f1;
    background: #f6f6fe;
}

.dashboard .revenue-card .card-icon {
    color: #2eca6a;
    background: #e0f8e9;
}

.dashboard .customers-card .card-icon {
    color: #ff771d;
    background: #ffecdf;
}

/* Activity */
.dashboard .activity {
    font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
    color: #888;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
    content: "";
    position: absolute;
    right: -11px;
    width: 4px;
    top: 0;
    bottom: 0;
    background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
    margin-top: 3px;
    z-index: 1;
    font-size: 11px;
    line-height: 0;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid #fff;
    flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
    padding-left: 10px;
    padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
    top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
    padding-bottom: 0;
}

/* News & Updates */
.dashboard .news .post-item + .post-item {
    margin-top: 15px;
}

.dashboard .news img {
    width: 80px;
    float: left;
    border-radius: 5px;
}

.dashboard .news h4 {
    font-size: 15px;
    margin-left: 95px;
    font-weight: bold;
    margin-bottom: 5px;
}

.dashboard .news h4 a {
    color: #012970;
    transition: 0.3s;
}

.dashboard .news h4 a:hover {
    color: #4154f1;
}

.dashboard .news p {
    font-size: 14px;
    color: #777777;
    margin-left: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
    font-size: 14px;
}

.dashboard .recent-sales .table thead {
    background: #f6f6fe;
}

.dashboard .recent-sales .table thead th {
    border: 0;
}

.dashboard .recent-sales .dataTable-top {
    padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
    padding: 10px 0 0 0;
}

/* Top Selling */
.dashboard .top-selling {
    font-size: 14px;
}

.dashboard .top-selling .table thead {
    background: #f6f6fe;
}

.dashboard .top-selling .table thead th {
    border: 0;
}

.dashboard .top-selling .table tbody td {
    vertical-align: middle;
}

.dashboard .top-selling img {
    border-radius: 5px;
    max-width: 60px;
}

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
    display: grid;
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    padding-top: 15px;
}

.iconslist .icon {
    background-color: #fff;
    border-radius: 0.25rem;
    text-align: center;
    color: #012970;
    padding: 15px 0;
}

.iconslist i {
    margin: 0.25rem;
    font-size: 2.5rem;
}

.iconslist .label {
    font-family: var(--bs-font-monospace);
    display: inline-block;
    width: 100%;
    overflow: hidden;
    padding: 0.25rem;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
}

/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
.profile .profile-card img {
    max-width: 100%;
}

.profile .profile-card h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2c384e;
    margin: 10px 0 0 0;
}

.profile .profile-card h3 {
    font-size: 18px;
}

.profile .profile-card .social-links a {
    font-size: 20px;
    display: inline-block;
    color: rgba(1, 41, 112, 0.5);
    line-height: 0;
    margin-right: 10px;
    transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
    color: #012970;
}

.profile .profile-overview .row {
    margin-bottom: 20px;
    font-size: 15px;
}

.profile .profile-overview .card-title {
    color: #012970;
}

.profile .profile-overview .label {
    font-weight: 600;
    color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
    font-weight: 600;
    color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
    max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
    font-size: 18px;
    font-weight: 600;
    color: #4154f1;
}

.faq .basic p {
    color: #6980aa;
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
    padding: 28px 30px;
}

.contact .info-box i {
    font-size: 38px;
    line-height: 0;
    color: #4154f1;
}

.contact .info-box h3 {
    font-size: 20px;
    color: #012970;
    font-weight: 700;
    margin: 20px 0 10px 0;
}

.contact .info-box p {
    padding: 0;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.contact .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    -webkit-animation: animate-loading 1s linear infinite;
    animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
    border-color: #4154f1;
}

.contact .php-email-form input {
    padding: 10px 15px;
}

.contact .php-email-form textarea {
    padding: 12px 15px;
}

.contact .php-email-form button[type="submit"] {
    background: #4154f1;
    border: 0;
    padding: 10px 30px;
    color: #fff;
    transition: 0.4s;
    border-radius: 4px;
}

.contact .php-email-form button[type="submit"]:hover {
    background: #5969f3;
}

@-webkit-keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
    padding: 30px;
}

.error-404 h1 {
    font-size: 180px;
    font-weight: 700;
    color: #4154f1;
    margin-bottom: 0;
    line-height: 150px;
}

.error-404 h2 {
    font-size: 24px;
    font-weight: 700;
    color: #012970;
    margin-bottom: 30px;
}

.error-404 .btn {
    background: #51678f;
    color: #fff;
    padding: 8px 30px;
}

.error-404 .btn:hover {
    background: #3e4f6f;
}

@media (min-width: 992px) {
    .error-404 img {
        max-width: 50%;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    padding: 20px 0;
    font-size: 14px;
    transition: all 0.3s;
    border-top: 1px solid #cddfff;
}

.footer .copyright {
    text-align: center;
    color: #012970;
}

.footer .credits {
    padding-top: 5px;
    text-align: center;
    font-size: 13px;
    color: #012970;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* main Section */
.mainSection{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*--------------------------------------------------------------
# Category Price Page
--------------------------------------------------------------*/
.main-pricelist {
    padding: 20px 30px 0px !important;
}
.main-pricelist > .pagetitle {
  margin-bottom: 24px !important;
}


.searchSection{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-direction: column;
    background-color: #86b0dc9c;
    padding: 1%;
    /* margin-bottom: 2%; */
    border-radius: 5px;
}
.searchSection h5{
    color: #012970;
}
.searchSection form{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    justify-content: space-between;
}
.searchSection input{
    /* width: 20%;
    height: auto;
    float: left;
    padding: 0.3%;
    border: none;
    outline: none;
    border-radius: 5px; */
}
.searchSection input::placeholder{
    color: black;
}
.searchButton{
    /* width: 10% !important; */
    height: auto;
    float: left;
    border: none;
    background-color: #003399;
    color: white;
    text-transform: capitalize;
}
/* ///////////////////////////////////////////////////// */
/* table Dashboard */
.tableDash{
    width: 100%;
    max-height: auto;
    height: fit-content;
    float: left;
    /* display: flex; */
    align-items: flex-start;
}
.tableDash th, .tableDash td {
    width: 19.9%;
    height: auto;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: break-word;
}
.tableDash table{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-wrap: wrap;
}
.tableDash table thead,.tableDash table tbody{
    width: 100%;
}
.tableDash tbody{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-direction: column;
}
.tableDash tr{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.2%;
    text-align: center;
    padding: 0.3% 0%;
}
/* .tableDash th,.tableDash td{
    width: 19.9%;
    height: auto;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
} */
.tableHead{
    background-color: #003399 !important;
}
.tableDash th{
    color: white !important;
}
.tableDash td{
    color: black !important;
    font-size: 14px !important;
}
tbody tr{
    background-color: #dbdfff !important;
}
.tableDash a,
#OrderNotif a{
    color: #ffffff;
    /* border: 2px solid blue; */
    background-color: #003399;
    border-radius: 5px;
    padding: 3% 7%;
    font-size: 0.9rem;
}
.edit-btn{
    padding: 3% 6% 3% 8% !important;
}
#OrderNotif {
    color: black;
}
.unpaid{
    color: rgb(226, 57, 5);
    font-weight: bold;
}
.paid{
    color: #006737;
    font-weight: bold;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* header section */
header{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    margin-bottom: 1%;
    border-radius: 5px;
}
.u-header-container{
    flex-direction: column !important;

}
.userInfoColumn{
    width: 27%;
    height: auto;
    padding: 0.5% 1.5%;
}
.userInfoColumn p{
    background-color: #8080801c;
    color: #039;
    padding: 2% 2%;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;

}
.userInfoColumn span{
    margin-left: 2%;
}
.rederenceINP{
    width: 70%;
    height: auto;
    float: left;
    border: none;
    border-radius: 3px;
    margin-left: 2%;
    padding: 0.5% 1.5%;
    outline: none;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* BTN option box */
.col-xl-7{
    width: 50%;
    height: auto;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.BTNoption,.confirmBTN{
    width: 80%;
    height: auto;
    float: left;
    display: flex;
    justify-content: space-evenly;
    margin-top: 4%;
}
.confirmBTN{
    justify-content: center !important;
}
.BTNoption button,.confirmBTN button{
    width: 20%;
    height: auto;
    float: left;
    background-color: #006737;
    border: none;
    color: white;
    border-radius: 4px;
}
.confirmBTN button{
    width: 36% !important;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* modal container */
.modalContainer,.headStone_modalContainer,.u-pr-modal,.u-pr-my-modal{
    width: 100vw;
    height: 93.5vh;
    float: left;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 1100;
    margin-top: 4%;
    overflow: scroll;
}
.modalHeader{
    width: 95%;
    height: 15%;
    float: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1% 0%;
}
.modalHeader h2{
    margin: 0px;
}
.modalHeader form{
    width: fit-content;
    height: auto;
    float: left;
    display: flex;
    flex-direction: column;
}
.modalHeader label{
    width: 100%;
    height: auto;
    float: left;
    background-color: #6190f9;
    color: white;
    margin-bottom: 2%;
    padding: 1% 2%;
    border-radius: 5px;
}
.modalHeader input{
    width: 100%;
    height: auto;
    float: left;
    padding: 1% 3%;
    border: none;
    background-color: #5d6cf489;
    outline: none;
    border-radius: 5px;
}
.modalHeader input::placeholder{
    color: rgb(255, 255, 255);
}

/* stones Pisctur */
.stonesPisctur,.materialPicturs{
    width: 95%;
    height: 60%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow-y: scroll;
    position: relative;
}
.stones{
    width: 10.5%;
    height: fit-content;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1%;
    cursor: pointer;
    transition: 0.5s;
    position: relative;
}
.stones img{
    width: 100%;
    height: auto;
    float: left;
}

/* modal Table */
.modalTable{
    width: 95%;
    height: auto;
    float: left;
}
.materialType{
    width: 100%;
    padding: 6%;
    text-align: center;
    background-color: white;
    cursor: pointer;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}
/* done & cancel button */
.ButtonSection{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    justify-content: center;
    
}
.done,.cancel,.MTcancel,.MTdone{
    width: 6%;
    padding: 0.2% 0%;
    color: white;
    margin: 1% 2%;
    border: none;
    outline: none;
}
.done,.MTdone{
    background-color: #4f8a10;
    border-radius: 5px;
}
.cancel,.MTcancel{
    background-color: rgb(205, 9, 9);
    border-radius: 5px;
}
.hidPass{
    z-index: -1;
    opacity: 0;
    cursor: pointer;
    color: #808080de;
}
.showPass{
    z-index: 1;
    opacity: 1;
    cursor: pointer;
    color: #808080de;
}
.showPassword{
    right: 40px;
    top: 30px;
}
/* ////////////////////////////////////////////////////////////////////////////////// */
/* material modal */
.materialModal{
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: -110%;
    left: 0;
    z-index: 1101;
    background-color: white;
}
/* //////////////////////////////////////////////////////////////////////////////// */
/* head stone modal */
.headStone_modalContainer {
    height: 107vh !important;
}
.partStones{
    width: 95%;
    height: auto;
    float: left;
    display: flex;
}
.partStones select{
    border: 1px solid #ced4da;
    background-color: white;
    border-radius: 0.375rem;
    outline: none;
}
.sectionStone{
    width: 100%;
    height: 400px;
    float: left;
    position: relative;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    z-index: 1;
}

.rightSection,.leftSection,.middleSection{
    width: 100%;
    height: auto;
    float: left;
    margin: 1%;
    background-color: #b9c9fe;
    display: flex;
    flex-wrap: wrap;
}
.sectionTitle{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    justify-content: center;
    margin-top: 1.5%;
    color: #039;
}
/* .rightSection>.stones,.leftSection>.stones,.centerSection>.stones{
    width: 15% !important;
    margin: 1% 2.5% !important;
} */
.rightPosition,.leftPosition{
    display: none;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* modelOverview */
.modelOverview,.materialOverview,.finishOverview{
    width: 100%;
    height: 100vh;
    float: left;
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 1100;
    background-color: white;
    top: 0;
    left: 100%;
    margin-top: 3%;
    padding: 3% 2%;
}

.overviewHeader{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 1%; */
}
.overviewHeader button{
    background-color: rgb(246 39 39);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 0% 1%;
    border-radius: 5px;
}
.modelSection,.materialSection,.finishSection{
    width: 100%;
    height: 89%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
}
.models,.material{
    width: 9%;
    height: fit-content;
    float: left;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 1%;
}
.models img,.material img{
    width: 100%;
    height: auto;
    float: left;
}

.btn-success{
    position: relative;   
}
.btn-success input{
    width: 100%;
    float: left;
    position: absolute;
    opacity: 0;
    z-index: 1;
    top: 0;
    left: 0;
}
.tg-wrap{
    margin-top: 1.5%;
}
.btn-success{
    position: relative;   
    /* padding: 15px; */
}
.btn-success input{
    width: 100%;
    height: 100%;
    float: left;
    position: absolute;
    opacity: 0;
    z-index: 1;
    top: 0;
    left: 0;
}
.stones i{
    position: absolute;
    padding: 1% 5%;
    color: white;
    background-color: #039;
    top: -12px;
    left: 100px;
    z-index: 1;
    border-radius: 100px;
    cursor: pointer;
}
/* //////////////////////////////////////////////////////////////////// */
/* modal Image slider */
.modalImageContainer{
    width: 100%;
    height: 92%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index:-2;
    opacity: 0;
    background-color: rgba(118, 118, 118, 0.584);
    margin-top: 4%;
    position: fixed;
}
.modalImageContainer button{
    position: relative;
    top: -42%;
    left: 60%;
    background-color: red;
    color: white;
    font-size: 28px;
    padding: 0% 0.9%;
    border-radius: 100px;
    border: none;
}
.modalImg{
    /* width: 30%; */
    /* height: auto; */
    float: left;
    display: flex;
    /* overflow: hidden; */
    /* background-color: white; */
}
.modalImg img{
    width: 65%;
    /* height: auto;
    float: left; */
}
/* ///////////////////////////////////////////////////////////////////////// */
/* modal section */
.ModalContainer,.loadingSec{
    width: 100%;
    height: 100%;
    float: left;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    background-color: #0e1c36b3;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loadingSec{
    background-color: #01335f6b !important;
}
.Modal{
    width: 500px;
    height: auto;
    float: left;
    padding: 2%;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    color: rgb(104, 104, 104);
    justify-content: space-between;
}
.ErrorTitle{
    width: 100%;
    height: auto;
    margin: 5% 0% 7%;
    display: flex; 
    justify-content: center; 
    position: relative; 
}
.ErrorTitle h2{
    margin: 0;
    margin-top: 4%;
    color: black;
    font-weight: bold;
}
.ErrorSec{
    width: 100%;
    height: auto;
    float: left;
    margin-bottom: 3%;
    display: flex;
    justify-content: center;
}
.ErrorSec li{
    margin-bottom: 3%;
    color: black;
    font-weight: bold;
}
.ErrorSec p{
    display: flex;
    flex-direction: column;
}
.ErrorSec span{
    margin: 1% 0%;
}
.closeBTN{
    position: absolute;
    top: 7%;
    right: 4%;
    cursor: pointer;
    background-color: white;
    padding: 0.5% 1.5%;
    font-size: 40px;
    border-radius: 6px;
    transition: 0.5s;
}
.closeBTN:hover{
    background-color: #21252982;
    color: white;
    transition: 0.5s;
}
.closeModal,.ShowTermM{
    padding: 2% 47%;
    color: white;
    border-radius: 6px;
    background-color: #c71e15;
    border: none;
}
.ModalBTN,.ModalBTNM{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    justify-content: center;
}

/* check roll */
.CheckedContainer{
    height: 0vw;
    overflow: hidden;
    /* display: none; */
    /* margin-top: 3% !important; */
}
.DeliverContainer{
    height: 58px;
    overflow: hidden;
}
.Checked{
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    color: black;
    font-weight: bold;
    opacity: 0;
    font-size: 0.9vw;
}
.Deliver{
    margin-top: 4%;
}
.term-agree{
    margin-top: 2%;
}
.term-agree label{
    font-weight: bold;
}
.term-agree > .form-check-input{
    border:2px solid rgba(0,0,0,0.33);
}
.CheckedIMG{
    width: 12%;
    height: auto;
    float: left;
}

/* loading */
@keyframes ldio-b9fqorjm8lk {
    0% { transform: translate(9.85px,76.83px) scale(0); }
   25% { transform: translate(9.85px,76.83px) scale(0); }
   50% { transform: translate(9.85px,76.83px) scale(1); }
   75% { transform: translate(76.83px,76.83px) scale(1); }
  100% { transform: translate(143.81px,76.83px) scale(1); }
 }
 @keyframes ldio-b9fqorjm8lk-r {
    0% { transform: translate(143.81px,76.83px) scale(1); }
  100% { transform: translate(143.81px,76.83px) scale(0); }
 }
 @keyframes ldio-b9fqorjm8lk-c {
    0% { background: #0b268e }
   25% { background: #00999d }
   50% { background: #0b268e }
   75% { background: #00999d }
  100% { background: #0b268e }
 }
 .ldio-b9fqorjm8lk div {
   position: absolute;
   width: 43.339999999999996px;
   height: 43.339999999999996px;
   border-radius: 50%;
   transform: translate(76.83px,76.83px) scale(1);
   background: #0b268e;
   animation: ldio-b9fqorjm8lk 2.8571428571428568s infinite cubic-bezier(0,0.5,0.5,1);
 }
 .ldio-b9fqorjm8lk div:nth-child(1) {
   background: #00999d;
   transform: translate(143.81px,76.83px) scale(1);
   animation: ldio-b9fqorjm8lk-r 0.7142857142857142s infinite cubic-bezier(0,0.5,0.5,1), ldio-b9fqorjm8lk-c 2.8571428571428568s infinite step-start;
 }.ldio-b9fqorjm8lk div:nth-child(2) {
   animation-delay: -0.7142857142857142s;
   background: #0b268e;
 }.ldio-b9fqorjm8lk div:nth-child(3) {
   animation-delay: -1.4285714285714284s;
   background: #00999d;
 }.ldio-b9fqorjm8lk div:nth-child(4) {
   animation-delay: -2.142857142857143s;
   background: #0b268e;
 }.ldio-b9fqorjm8lk div:nth-child(5) {
   animation-delay: -2.8571428571428568s;
   background: #00999d;
 }
 .loadingio-spinner-ellipsis-4j6rzt5hlxx {
   width: 197px;
   height: 197px;
   display: inline-block;
   overflow: hidden;
   background: none;
 }
 .ldio-b9fqorjm8lk {
   width: 100%;
   height: 100%;
   position: relative;
   transform: translateZ(0) scale(1);
   backface-visibility: hidden;
   transform-origin: 0 0;
   color:hsl(188, 94%, 40%);
 }
 .ldio-b9fqorjm8lk div { box-sizing: content-box; }

.pl {
	display: block;
	width: 6.25em;
	height: 6.25em;
}
.pl__ring, .pl__ball {
	animation: ring 2s ease-out infinite;
}
.pl__ball {
	animation-name: ball;
}

/* Dark theme  */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,10%);
		--fg: hsl(var(--hue),10%,90%);
	}
}

/* Animation */
@keyframes ring {
	from {
		stroke-dasharray: 0 257 0 0 1 0 0 258;
	}
	25% {
		stroke-dasharray: 0 0 0 0 257 0 258 0;
	}
	50%, to {
		stroke-dasharray: 0 0 0 0 0 515 0 0;
	}
}
@keyframes ball {
	from, 50% {
		animation-timing-function: ease-in;
		stroke-dashoffset: 1;
	}
	64% {
		animation-timing-function: ease-in;
		stroke-dashoffset: -109;
	}
	78% {
		animation-timing-function: ease-in;
		stroke-dashoffset: -145;
	}
	92% {
		animation-timing-function: ease-in;
		stroke-dashoffset: -157;
	}
	57%, 71%, 85%, 99%, to {
		animation-timing-function: ease-out;
		stroke-dashoffset: -163;
	}
}


@media screen and (min-width:1200px) {
    .fs-4{
        font-size: 2.5rem !important;
    }
}

main{
    /* padding-top: 30px !important; */
}

.register{
    padding-top: 1rem !important;
}
.form-login .form-label{
    text-indent: 5px;
}
.form-login .form-check-label{
    font-size: 15px !important;
    /* text-align: justify; */
}


.TypeBusiness{
    font-size: 15px;
    margin-top: 20px;
    text-indent: 7px;
}
.ModalSec{
    width: 100%;
    background-color: rgba(128, 128, 128, 0.484);
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    /* margin-left: 19%; */
}
.modalTerm{
    background-color: white;
    width: 65%;
    height: 86%;
    z-index: -1;
    opacity: 0;
    display: none;
}
.modalTerm > .col-12{
    box-shadow: 0 -1px 0 #d1cece42;
}
.terms{
    width: 100%;
    height: 85%;
    overflow-y: scroll;
    text-align: justify;
}
.closeModalTerm{
    width: 20%;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
.ModalDes{
    background-color: white;
    display: none;
}
.salemanTable{
    border: 1px solid #8c9ef5;
}
.salemanTable i{
    font-size: 11px !important;
}
.salemanTable td,.salemanTable th{
    font-size: 14px !important;
    text-transform: capitalize;
    text-align: center;
    border: 1px solid #8c9ef5;
}
.salemanTable p{
    justify-content: center;
}
.salemanInfo input{
    background-color: transparent;
    text-align: center;
    text-transform: capitalize;

}
.checkedEdit{
    opacity: 0;
    z-index: -1;
    background-color: #006737;
}
.UploadDesignsBTN,.ViewDesignsBTN{
    width: 69%;
    font-size: 19px;
}
.UploadDesignsBTN{
    margin-bottom: 4px;
}
.showModalBTN,.ViewDesignsBTN{
    color: white;
    border: none;
}
.UploadDesignsBTN{
    background-color: #2b9984;
}
.ViewDesignsBTN{
    background-color: #37939f;
}
.salemanTable tr{
    background-color: #5f6de345;
}
.Accepted label{
    margin-top: 7px;
}
.NameSalemane label,.tableTitle>th{
    text-indent: 7px;
    font-size: 15px !important;
}
.btn-primary{
    background-color: #2559a7;
}
.CheckedContainer{
    /* margin-top: 15px !important; */
    /* margin-bottom: 17px !important; */
}
.CheckedContainer .CheckedLabel{
    font-size: 13px !important;
}
.CheckedContainer>.CheckedIMG{
    width: 10%;
}
.login-form-btn{
    /* margin-top: 0px !important; */
}
.checked-accept{
    margin-bottom: 0px !important;
}
.not-accept-error{
    float: left ;
    margin: 0 !important;
}
.not-accept-terms{
    margin-left: 10px;
    font-size: 14px;
    text-decoration: underline;
    margin-top: 0 !important;
}

#login .login-field-status {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 1.25rem;
    margin: .35rem .2rem 0;
    color: #526176;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
}

#login input[name="login"]:disabled {
    cursor: wait;
    opacity: .78;
}

#login .login-field-status:empty {
    visibility: hidden;
}

#login .login-field-status.is-checking { color: #526176; }
#login .login-field-status.is-success { color: #16804a; }
#login .login-field-status.is-error { color: #c62828; }
#login .login-field-status.is-info { color: #526176; }

#login .login-field-status.is-checking i {
    display: inline-block;
    animation: login-status-spin .8s linear infinite;
}

@keyframes login-status-spin {
    to { transform: rotate(360deg); }
}

#login .DeliverContainer {
    height: auto;
    overflow: visible;
}

#login .login-terms-control {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0 !important;
    padding: .8rem .9rem;
    border: 1px solid #c9d5e5;
    border-radius: .75rem;
    background: #f7f9fc;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

#login .login-terms-control .form-check-input {
    float: none;
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: .12rem 0 0;
    cursor: pointer;
}

#login .login-terms-control .form-check-label {
    color: #25334b;
    font-size: 1rem !important;
    font-weight: 650;
    line-height: 1.5;
    cursor: pointer;
}

#login .login-terms-control .TermCinditions {
    display: inline-block;
    margin-inline-start: .2rem;
    font-weight: 750;
    white-space: nowrap;
}

#login .login-terms-hint {
    display: block;
    margin: .35rem .25rem 0;
    color: #526176;
    font-size: .8rem;
    line-height: 1.4;
}

#loginTermsContainer.has-error .login-terms-control {
    border-color: #dc3545;
    background: #fff7f7;
    box-shadow: 0 0 0 .15rem rgb(220 53 69 / 12%);
}

#login .login-terms-error {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .5rem .25rem 0;
    color: #b42318;
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.45;
}

#login .login-terms-error[hidden] {
    display: none;
}

#login .login-terms-error i {
    flex: 0 0 auto;
    margin-top: .15rem;
}

@media (max-width: 575px) {
    #login .login-terms-control { padding: .7rem; }
    #login .login-terms-control .form-check-label { font-size: .93rem !important; }
}
.not-accept-modal{
    width: 620px;
}
.rules-saved{
    background: white;
    padding: 26px 0px;
    display: flex;
    justify-content: center;
    box-shadow: 0 0 9px #b0aeaea1;
}
@media (min-width: 576px){
    .modal-dialog{
        max-width: 50% !important;
    }
}
.rules-row{
    margin-right: 0px !important;
    margin-left: 0px !important;
    
}
.rules-row>.card{
    padding: 15px !important;
}
.rules-label{
    font-weight: bold;
    font-size: 17px;
    text-indent: 5px;
    margin-bottom: 4px;
}
.rules-body{
    max-height: 60vh;
    overflow-y: scroll;
}
.fade:not(.show) {
    opacity: 0 !important;
    display: none !important;
}
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:before{
    content: "" !important;
}
table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:after{
    content: "" !important;
}

/* table row colors */
.confirmed-done{
    background-color: #327bc5d0 !important;
}
.confirmed{
    background-color: #f3908399 !important;
}
.waiting,.wait{
    background-color: rgba(202, 202, 202, 0.737) !important; 
}

/* notification box */
.notifContainer{
    right: 20px;
    top: -500px;
    z-index: 1;
    padding: 20px !important;
    background-color: rgb(115,115,149) !important;
    transition:0.5s;
    box-shadow: 4px 4px 9px #5a5959a3;
}
.bellIcon i{
    color: #ffc600;
}
.upIcon{
    font-size: 33px;
    right: 232px;
    z-index: -1;
    top: -21px;
    color: #5d5d83;
}
.cancelNotif{
    right: -8px;
    top: -8px;
    font-size: 18px
}

.notifLength{
    font-size:10px;
    top: -10px;
    right: -6px;
}
.update-recorde{
    font-weight: bolder;
}

.notifTable{
    max-height: 180px;
    overflow-y: scroll;
    font-size: 13px;
    background-color: #e9ebf0 !important;
}
.active-note{
    top:61px;
    
    z-index:999;
}
.payment-paid a{
    padding: 0% 4% !important;
}
::-ms-reveal {
    display: none;
  }

/* new login */
.login-section{
    min-height: 100% !important;
    float: left;
} 

#Password:focus,#Username:focus,#email:focus {
    box-shadow: 0px 0px 10px 2px rgba(181, 178, 178, 0.28) !important;
    border-color: #b5aaaa78;
}
.username-label,.password-label{
    color: rgba(128, 128, 128, 0.793);
}

.language-select{
    background-color: rgba(207, 207, 207, 0.54) !important;
}

.language-list{
    min-width: auto !important;
    inset: 7px 0px auto auto !important;
}
.language-list a{
    display: flex;
}
.forget-container{
    /* margin-top: 10px !important; */
    margin-bottom: 5px !important;
}
.forget-password-btn{
    font-size: 15px !important;
    color:#212529ad !important;
    border-bottom-color:#212529ad !important;
}
.forget-password-btn:hover{
    color:#47525b !important;
    border-bottom-color:#47525b !important;
    text-shadow: 2px 2px 1px #80808024;
}

.enter-code{
    height: 0px;
    overflow: hidden;
    opacity: 0;
}
.enter-email{
    height: 160px;
    overflow: hidden;
    padding: 10px;
}

.social-media a{
    font-size: 21px;
    color: rgba(79, 79, 79,0.86);
    transition: 0.3s;
}
.social-media a:hover{
    transform: scale(1.1);
    transition: 0.3s;
}
.lang-text{
    color: #000000c7;
}

.message-size{
    font-size: 13px !important;
}

.customer-pluse{
    padding: 5px 6px !important;
    font-size: 10px;
}
.login-text-shadow{
    text-shadow:2px 2px 1px #8080805e;
}
.login-container{
    width: 67% !important;
    background-color: rgba(255, 255, 255, 0.877);
}
.login-child{
    padding:0px 2% !important;
}
.card-introduction{
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.card-introduction .card-body{
    padding: 0 !important;
}
.card-introduction .card-body img{
    max-width: 64% !important;
}

.card-language ul li a,
.language-list li a{
    padding: 14px 19px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-language ul li a{
    text-shadow: 3px 1px 2px #8080808f ;
}


.language-select{
    width: 133px !important;
}
.language-select span,
.language-list span{
    margin-right: 10px !important;
}
.language-list{
    top: 3px !important;
    padding: 0px !important;
    width: 133px !important;
}
.language-list li a{
    flex-direction: row-reverse !important;
}
.background-germany::before {
    content: "";
    position: fixed;
    inset: -8px;
    z-index: -2;
    background-image: url(../img/germany-2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(3px) brightness(.94) saturate(.86);
    transform: scale(1.015);
    pointer-events: none;
}
.background-germany::after {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(125deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .2) 52%, rgba(8, 31, 70, .12));
    z-index: -1;
    pointer-events: none;
}
.background-germany{
    background-color: #eaf0f8;
    position: relative;
    z-index: 1;
    isolation: isolate;
}
.login-info{
    border-right: 1px solid rgba(128, 128, 128, 0.307);
}   
@media screen  and (max-width:1200px) {
    .login-info{
        border-right: none;
    }
    .login-container-fluid.h-100,login-container-fluid .h-100,body{
        height: auto !important;
    }
    .card-introduction .card-body img{
        max-width: 65% !important;
    }
    .login2{
        font-size: 3rem !important;
    }
    .response-flag{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .response-flag img{
        width: 50px !important;
    }
    
}
@media screen  and (min-width:1200px) {
    .h1,h1{
        font-size: calc(2rem + 1.5vw) !important;
    }
}
@media screen  and (max-width:845px) {

    /* lord-icon{
        width: 13vw !important;
        height: 13vw !important;
        top: -12vw !important;
    } */
}
@media screen  and (max-width:600px) {
    .login-container{
        width: 100% !important;
    }
    .Modals{
        width: 300px;
    }
    /* lord-icon{
       display: none;
    } */
}
.box-scroll{
    display:none;
    width:350px;
    height:300px;
    overflow: auto;
    position: absolute;
    z-index:999;
    background:white;
    box-shadow:0 0 5px #ccc;
    border-radius:5px;
    padding:10px;
    left: -50px;
}
.box-scroll label{
    display: inline !important;
}
td{
    position: relative;
    overflow:unset !important;
}


.btn{
    box-shadow: 1px 1px 2px gray;
}
.btn-cancel{
    background-color: var(--form-action-cancel-bg) !important;
    border: 1px solid var(--form-action-cancel-border) !important;
}
.btn-inquiry{
    background-color: #556f0e !important;
    border:1px solid #556f0e;
}
.btn-print{
    background-color: #777 !important;
    border:1px solid #777;
}
.btn-pdf{
    background-color: #db7272 !important;
    border:1px solid #db7272;
}
.btn-edit{
    transition:all 0.5s;
    color:rgb(255, 255, 255) !important; 
    background-color: coral;
    
}
.btn-edit:hover{
    background-color: rgb(238, 84, 29) !important;
    border:1px solid #ffffff !important;
    box-shadow:2px 2px 2px gray;
}
.btn-show-analysis{
    background-color: #f4c228;
    border:1px solid #f4c228;
    /* padding:2% 5%; */
    font-size: 1rem;
    font-weight:bold;
}
.btn-hide-analysis{
    background-color: #e1a900;
    border:1px solid #e1a900;
    /* padding:2% 5%; */
    font-size: 1rem;
    font-weight:bold;
}
.tools-box{
    /* display: flex; */
    flex-wrap: wrap;
    align-content: center
}
.tools-box a {
    /* margin: 2px 0; */
    padding: 5px 9.5px !important;
    box-shadow: 1px 1px 2px gray;
}
.duplicate-btn{
    background-color: #0ea70e !important;
    border-color:  #0ea70e !important;
    margin-right: 6% !important;
}
.history-btn{
    background-color: #0d6efd !important;
}
.history-btn:hover{
    background-color: #0a387d !important;
border-color:#0a387d !important;
}
.view-factor-btn{
    width: 83% !important;
    background: var(--panel-action-view-bg) !important;
    border-color: var(--panel-action-view-border) !important;
    color: var(--panel-action-view-color) !important;
    margin-bottom: 8px !important;
    margin-right: 0px !important;
}
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.u-order-btn{
    background-color: #fba7a7 !important;
    border-color: #fba7a7;
}
.u-order-btn:hover,.u-inquiry-btn:hover{
    color: black !important;
}
.u-inquiry-btn{
    background-color: #b9c9fe !important;
    border-color: #b9c9fe;
}
.u-order-conversion{
    width: 90%;
    height: auto;
    float: left;
}
.u-pagetitle{
    width: 100%;
    float: left;
    background-color: #ffffffd6;
    padding: 13px 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px !important;
    box-shadow: 1px 1px 7px #80808070;
    border-radius: 5px;
}
.u-pagetitle h1,.u-pagetitle h2{
    width: 100%;
    float: left;
    background-color: white;
    /* font-size: 28px !important; */
    font-weight: bold;
}
.transportation-change-page {
    /* The site header is sticky and remains in document flow on this page. */
    margin-top: 0 !important;
    padding-top: 18px !important;
}
.transportation-change-page > .u-pagetitle {
    float: none;
}
.transportation-change-errors {
    margin-bottom: 12px;
}
.transportation-change-page > form {
    margin-bottom: 0;
}
.u-modal-pagetitle h2{
    color: white !important;
    background-color: transparent;
}
.u-modal-pagetitle button{
    /* background-color: white !important;
    opacity: 1 !important; */
}
.u-modal-pagetitle{
    background-color: #003399;
    color: white !important;
    align-items: center;
    border-radius: 0;
    padding: 13px 20px !important;
}
.u-costomized{
    float: left;
}
.u-upload-design-modal,.u-info-page-modal,.u-status-modal,.u-show-img-stone-modal,.u-chat-modal,.u-to-do-list-modal{
    width: 100%;
    height: 92%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #41444bd4;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    opacity: 0;
    margin-top: 4%;
}
/* .u-to-do-list-modal{
    opacity: 1;
    z-index: 1;
} */
.u-upload-design-container,.u-info-page-container,.u-status-container,.u-show-img-stone,.u-chat-section,.u-to-do-list-section{
    width: 90%;
    height: 90%;
    float: left;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
}
.u-show-img-stone{
    width: 70%;
}
.u-uploaded-design-container,.u-info-page-description{
    width: 100%;
    height: 90%;
    float: left;
    padding: 2%;
    display: flex;
    flex-direction: column;
    /* overflow-y: scroll; */
    /* flex-wrap: wrap; */
    /* align-content: flex-start; */
}
.u-uploaded-design-btn-container,.u-info-page-buttons,.u-status-title,.u-show-img-stone_title,.u-chat-title,.u-to-do-list-title{
    width: 100%;
    height: 10%;
    float: left;
    display: flex;
    padding: 1%;
    justify-content: space-between;
    align-items: center;
}
.u-info-page-buttons,.u-status-title,.u-show-img-stone_title,.u-chat-title,.u-to-do-list-title{
    justify-content: flex-end;
}
.u-uploaded-design-button{
    padding: 0.3% 1%;
    overflow: hidden;
    border-radius: 5px;
    background-color: #003399;
    color: white;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 2%;
}
.u-to-do-list-title{
    padding-bottom: 5px;
}
.u-uploaded-design-button input{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    z-index: 1;
    opacity: 0;
}
.u-uploaded-design{
    width: 18%;
    height: 58% !important;
    /* height: fit-content; */
    float: left;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin: 1%;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
    /* border: 1px solid #00000040; */
}
.u-show-img-box{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    overflow: hidden;
}
.u-uploaded-design-img{
    width: 100%;
    height: 100% !important;
    float: left;
    display: flex;
    overflow: hidden;
    border-radius: 5px;
    /* padding: 8%; */
}
.u-uploaded-design-img img,.u-show-img-box img{
    width: 100%;
    height: auto;
    float: left;
    object-fit: contain;
}
.u-done-btn{
    padding:0.3% 2%;
    color: white;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.u-close-btn{
    background-color: #c71e15;
}
.u-done-btn{
    background-color: #006737 !important;
}
.u-sidebar{
    width: 236px;
    padding: 10px;
}
.u-main{
    margin-bottom: 20px;
    /* margin-left: 245px !important; */
}
.u-filter{
    width: 13%;
}
.u-filter-style{
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    color: #212529b8 !important;
    padding: 0.45rem 0.75rem !important;
    margin-right: 1%;
}
.u-filter-style::placeholder{
    color: #212529b8 !important;
}
.u-searchSection{
    padding: 1.5%;
}
.searchSection.factory-order-finder{
    align-items: stretch;
    box-sizing: border-box;
    float: none;
    gap: 12px;
    min-width: 0;
    padding: 16px;
}
.searchSection.factory-order-finder .factory-order-finder__title{
    width: auto;
}
.factory-order-finder__header{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    min-width: 0;
}
.factory-order-finder__title{
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}
.factory-order-finder__country-filters{
    display: flex;
    align-items: center;
    flex: 1 1 480px;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.factory-order-finder__country-filters .btn,
.factory-order-finder__container-items .btn{
    flex: 0 0 auto;
    margin: 0 !important;
    white-space: nowrap;
}
.factory-order-finder__container-items{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0 0 4px;
}
.factory-order-finder form.factory-order-finder__filters{
    align-items: end;
    justify-content: flex-start;
    margin: 0;
    min-width: 0;
}
.factory-order-finder__filters > [class*="col-"]{
    min-width: 0;
}
.factory-order-finder__filters .u-filter{
    width: auto;
}
.factory-order-finder__filters .u-filter-style,
.factory-order-finder__filters .searchButton{
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-right: 0;
}
.factory-order-finder__filters .api-box-search{
    z-index: 20;
}
.u-h5{
    font-weight: bold;
}
.u-table-header{
    font-size: 15px;
    margin-bottom: 0px !important;
    /* border-bottom: 1px solid rgb(255 255 255 / 36%); */
    min-height: 75px;
    padding: 0px !important;
}
.u-table-counter {
    width: 7% !important;
}
.u-table-td {
    margin-bottom: 0px !important;
    border-bottom: 1px solid  rgb(255 255 255 / 76%);
    min-height: 75px;
}
.u-table-header th,.u-table-header td{
    border-right: 1px solid  rgb(255 255 255 / 76%);
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.337); */
}
.u-table-value{
    /* padding: 0px 1%; */
    border-right: 1px solid rgb(255 255 255 / 76%);
}
.u-search{
    width: 10%;
}
.u-search input{
    font-size: 17px;
    font-weight: bold;
}
.u-status-table{
    width: 100%;
    height: 90%;
    float: left;
    overflow-y: scroll;
}
.u-status-table table{
    width: 98%;
    height: auto;
    text-align: center;
    margin: 0 1%;
    border-radius: 5px;
    overflow: hidden;
}
.u-status-table tr{
    border-top: 1px solid white;
    border-top: 1px solid white;
}
.u-statuse-img{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.u-statuse-img img{
    width: 100%;
    height: auto;
    float: left;
}
.u-user-info-box{
    width: 98%;
    height: auto;
    float: left;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding: 1%;
    background-color: #0446cbb5;
    color: white;
}
.refrence-box{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.userInfoColumn p{
    margin: 2px 0;
    display: flex;
    color: white;
}
.header-title{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1% 2%;
}
.u-header-des{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.u-read-delivery{
    background-color: rgb(223,209,31);
}
.u-monuments-btn{
    position: relative;
}
.u-monuments-btn input{
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
}
.u-payment-terms-container{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-direction: row-reverse;
}
.u-payment-terms-container p{
    background-color: rgb(250,241,154);
    padding: 1% 3%;
}
.u-show-img-stone p,.u-uploaded-design p{
    text-align: center;
}
.u-payment-terms-container{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
}
.u-compent-select-container{
    width: 25%;
    height: auto;
    float: left;
    display: flex;
    align-items: center;
}
.u-compent-select-container span{
    width: 70%;
    height: auto;
    float: left;
}
.u-min-btn{
    position: relative;
}
.u-min-btn .fa-plus{
    position: absolute;
    opacity: 0;
}
.u-pluse-btn .fa-plus{
    opacity: 1;
}
.u-pluse-btn .fa-minus{
    opacity: 0;   
}
.u-tableDash-title{
    width: 98%;
    padding: 1%;
    border-radius: 5px;
}
.u-done-bg{
    background-color: #7de35a;
}
.u-delivered-bg{
    background-color: #f3b5ef;
}
.u-cancle-bg{
    background-color: #eb9a9a;
}
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* chat */
.u-chat-button,.u-services-button,.u-set-button{
    position: fixed;
    right: -20px;
    background-color: rgb(90 90 90);
}
.u-services-button{
    top: 190px;
}
.u-set-button{
    top: 148px;
    color: white;
    font-size: 20px;
}
.u-chat-button:hover,.u-services-button:hover{
    background-color: rgb(90 90 90) !important;
}
.u-chat-button{
    top: 75px;
}
.u-caht-num{
    width: 19px;
    height: 18px;
    position: absolute;
    left: -10px;
    top: -7px;
    border-radius: 100px;
    font-size: 10px;
    box-shadow: 0px 0px 4px 0px #1d1d1d6b;
    background-color: rgb(90 90 90);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container-chat{
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
}

.contact-container{
    width: 25%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    background-color: #b9c9fe;
}
.contact-container ul{
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}
.contact{
    width: 100%;
    height: auto;
    float: left;
    padding: 3% 10%;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: 0.4s;
    color: white;
}
.contact-img{
    width: 3.2em;
    height: 3em;
    float: left;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: 3px solid white;
}
.contact-img img{
    width: 100%;
    float: left;
}
.contact-name {
    width: 80%;
    height: auto;
    float: right;
    margin-left: 15px;
    text-align: end;
}

.contact-active{
    background-color: #8691b7;
    transition: 0.4s;
}

/* chat container */
.chat-container{
    width: 75%;
    height: 100%;
    float: right;
    display: flex;
    flex-direction: column;
}
.chat-section{
    width: 100%;
    height: 90%;
    float: left;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
.send-container{
    width: 100%;
    height: 10%;
    float: left;
    margin-bottom: 5px;
}
.send-container form{
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;

}
.send-container input{
    width: 90%;
    font-size: 16px;
    padding: 0.7% 3%;
    border-radius: 100px;
    border: 2px solid #727272;
    outline: none;
}
.send-container button{
    padding: 0.9em;
    background-color: #b9c9fe;
    color: white;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left,.right{
    width: 100%;
    float: left;
    display: flex;
    margin-top: 1%;
    align-items: center;
}
.left{
    justify-content: flex-start;
    margin-left: 1%;
    align-self: flex-start;
}
.left small{
    word-wrap: break-word;
}
.left p{
    background-color: #decccca6;
}
.right{
    margin-right: 1%;
    display: flex;
    justify-content: flex-start;
    align-self: flex-end;
    flex-direction: row-reverse;
}
.right p{
    background-color: #ccd8e4;
}
.left p,.right p{
    width: fit-content;
    margin: 0;
    padding: 1% 2%;
    float: left;
    border-radius: 100px;
}
.u-pro-chat-sec{
    width: 6%;
    height: auto;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-img-chat{
    width: 40px;
    height: 39px;
    margin: 0px 5px;
    border-color: #8691b7;
}
.u-to-do-list-title-sec{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2.5%;
}
.u-to-do-list-title-sec input{
    /* width: 88%; */
    height: auto;
    float: left;
    /* border:none; */
    outline: 0 !important;
    padding: 1%;
    /* border: 1px solid rgb(228 228 228); */
    /* margin-right: 2%; */
    /* border-radius: 10px; */
}
.u-to-do-list-title-sec button{
    width: 10%;
    height: 100%;
    border: none;
    /* background-color: gray; */
    color: white;
    border-radius: 10px;
}
.u-access-to-do-list{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-direction: column;
    padding: 0 2.5%;
    border-top: 1px solid rgb(228 228 228);
    border-bottom: 1px solid rgb(228 228 228);
    margin-top: 2%;
    padding: 1% 0;
}
.u-access-to-do-list-sec{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    padding: 0 2.5%;
}
.u-access-to-do-list-filter{
    width: 50%;
    height: auto;
    float: left;
    display: flex;
}
.u-access-to-do-list-sec button{
    border: none;
}
.u-access-to-do-list-ele{
    width: fit-content;
    height: auto;
    float: left;
    border: 1px solid rgb(228 228 228);
    padding: 1% 4%;
    margin: 0;
    border-radius: 5px;
}
.u-to-do-list-box{
    width:94.5%;
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    padding: 0;
}
.u-to-do-list{
    width: 99%;
    height: auto;
    display: flex;
    padding: 1%;
    list-style: none;
    align-items: center;
    border: 1px solid rgb(228 228 228);
    border-radius: 5px;
    margin-top: 1%;
    background-color: #b8c6e382;
}
.u-to-do-list textarea{
    width: 85%;
    height: 100%;
    margin: 0;
    /* background-color: white !important; */
}
.u-to-do-list-btn{
    width: 15%;
    height: auto;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*.u-open-to-do-list{*/
/*    position: fixed;*/
/*    !* right: -20px; *!*/
/*    padding: 0;*/
/*    !* background-color: #545454; *!*/
/*}*/
.u-open-to-do-list-box{
    position: fixed;
    right: -20px;
    padding: 0;
    background-color: #545454;
}
.u-to-do-list-num{
    width: 20px;
    height: 20px;
    border-radius: 100px;
    background-color: #545454;
    position: absolute;
    top: -10px;
    left: -10px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    box-shadow: 0px 0px 7px -2px black;
}
.u-open-to-do-list-box:hover{
    background-color: #545454 !important;

}
.u-to-do-list-check{
    font-size: 39px;
    margin-top: 0;
}
.u-draft-bg{
    background-color: rgb(208, 208, 208);
}
.u-uploading-documents-container{
    width: 100%;
    height: auto;
    float: left;
    display: flex;
    flex-direction: column;
}
.u-uploading-documents-btn{
    width: fit-content;
    font-size: 18px;
}
.u-documents-history{
    width: 100%;
    height: 200px;
    float: left;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    font-size: 14px;
    border-radius: 10px;
    background-color: white;
    padding: 1%;
}
.u-documents-history a{
    width: fit-content;
    margin: 5px 0;
    text-decoration: underline;
}

.api-box-search{
    width: 200px;
    height: auto;
   
    background-color: white;
    border:1px solid #ccc;
    overflow: auto;
    position: absolute;
    /* top: 90px; */
    z-index: 555;
    display: none;
    border-radius: 5px;
    max-height: 400px;
}
.api-box-search div,
.api-box-search label{
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.api-box-search div:hover,
.api-box-search label:hover{
    background-color: rgb(119 129 153);
    color: white; 
}
.api-item-extra{
    width: 200px !important;
    max-height: 400px !important;
}
.cover-box{
    position: absolute;
    z-index: -1;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #001d50ab;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}
.cover-box i{
    font-size: 25px;
    color:white;

    top:unset !important;
    left:unset !important;
    background-color: unset;
}
.u-box-cover:hover .cover-box{
    opacity: 1;
    z-index: 1000;
}

input:read-only {
    /* background-color: transparent; */
}

.modalBlock{
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(187, 186, 186, 0.632);
    box-shadow: 0 0 4px #ccc;
    z-index: 11111;
}
.modalBlock table{
    width:95%;
    background-color: white;
    /* border:2px solid #ccc; */
}
.modalBlock td{
    color: black;
    border: 1px solid #9e9e9ec7;
    text-align: center;
    cursor: pointer;
}
.modalBlock th{
    background-color: #012b73;
    border: 1px solid #9e9e9ec7;
    color: white;
    text-align: center;
}
.btn-close-modalBlock{
    position: absolute;
    right: 25px;
    top: 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 10px;
    font-size: 20px;
    color: white;
}
.btn-close-modalBlock:hover{
    color: white !important;
}
.api-block-media{
    display: none;
}
.modal-block-container{
    width: 90%;
    height: 80%;
    float: left;
    display: flex;
    justify-content: flex-start;
    overflow-y: scroll;
    overflow-x: hidden;
    border-radius: 5px;
    align-items: center;
    flex-direction: column;
    background-color: #f6f6f6;
}
.api-block-media{
    background-color: #dddddd !important;
}
.cslider2{
    background-color: white !important;
    border-radius: 10px;
    /* margin-top: 20px; */
}
.zoom-container{
    width: 16em;
    height: auto;
    float: left;
    display: flex;
    margin-right: 45px;
}

  .spinner {
    position: absolute;
    margin: auto;
    box-sizing: border-box;
    background-clip: padding-box;
    width: 360px;
    height: 360px;
    border-radius: 500px;
    border: 6px solid rgba(255, 255, 255, 0.1);
    -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
    transform-origin: 50% 60%;
    transform: perspective(200px) rotateX(66deg);
    animation: spinner-wiggle 1.2s infinite;
  }
  .spinner:before,
  .spinner:after {
    content: "";
    position: absolute;
    margin: -6px;
    box-sizing: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    opacity: .05;
    border: inherit;
    border-color: transparent;
    animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
  }
  
  .spinner:before {
    border-top-color: #66e6ff;
  }
  
  .spinner:after {
    border-top-color: #f0db75;
    animation-delay: 0.3s;
  }
  
  @keyframes spinner-spin {
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes spinner-fade {
    20% {
      opacity: .1;
    }
    40% {
      opacity: 1;
    }
    60% {
      opacity: .1;
    }
  }

  .loading-logo{
    width: 29%;
    height: auto;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .loading-logo img{
    width: 300px;
    height: auto;
    float: left;
  }
  .api-material-block{
    padding: 1.5% 3%;
  }
  .modal-dialog{
    max-width: 77% !important;
    height: 90% !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
  }
  .modal-content{
    max-height: 100% !important;
    overflow-y: auto;
  }
  .u-hover-upload-img{
    width: 100px;
    height: 100px;
    float: left;
    cursor: pointer;
    align-items: center;
  }

  /* 1402/9/7 */
  .u-label-input{
    width: 14%;
  }
  .u-input-contain{
    width: 86%;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .u-open-upload-img{
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    display:none
  }
  /**********/
  .modal-backdrop{
    opacity: 0.7 !important;
  }
 .modal-body{
    padding-left: 35px;
    padding-top: 35px;
 }
.modal-body label::after{
    content: ":";
    display: inline-block;
}
.modal-body label{
    /* width: 100% !important; */
    font-weight: bold;
}
.u-label-input{
    width: 15% !important;
  }
  .u-input-contain{
    width: 100% !important;
  }

  .u-open-upload-img{
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    display:none
  }
  .u-block-img{
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: contain;
  }
  .u-block-img-contain{
    margin-right: 10px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  label{
    text-transform: capitalize;
  }

  .api-addresses label::after{
    content: "";
  }
  .u-pagetitle p{
    margin: 10px 0;
    background-color: white;
  }
  .u-address-print{
    display: flex;
    align-items: center;
    font-weight: bold;
    text-indent: 10px;
    padding-right: 20px;
  }
  .u-address-print p{
    margin: 0;
  }
  /* 1402.9.9 */
  .overviewHeader,.modalHeader{
    margin-bottom: 0;
    border-bottom: 1px solid rgb(196, 195, 195);
}

.overviewHeader button {
    padding: 0.3% 1%;
}
.materialH2 h2::after{
    content: ":";
}
.modalHeader label {
    width: 52%;
    text-align: center;
    border-radius: 5px 0 0 5px;
}
.modalHeader input {
    border-radius:0 5px 5px 0 ;
}
.searchBox,.u-compent-select-container,.modalHeader h2{
    width: 30%;
}
.u-component-table{
    max-height: 185px;
    overflow-y: auto;
  }
  .u-component-table select:disabled{
    /* background-image: url(../img/arrow-down-icon-png-3.png); */
  }
/* 1402.9.10 */
.refrence-box{
    background-color: #000000 !important;
}
.models,.material{
    width: 9%;
}
.stones{
    width: 10.5%;
}
.btn-upload{
    background-color: #2559a7 !important;
    border-color: #2559a7 !important;
}
.btn-upload:hover{
    background-color: #153f7d !important;
    border-color: #153f7d !important;
}
.btn-print:hover{
    background-color: rgb(93, 92, 92) !important;
    color: white !important;
}
.btn-see {
    background: #4c82ed !important;
    border: 1px solid #4c82ed !important;
    padding: 6% 20% !important;
}
.btn-see:hover {
    background: #3b6bcb !important;
    border: 1px solid #3b6bcb !important;
}
/****************** 1402.9.12 *******************/
.tab-content{
    height: 100%;
}
.tab-pane{
    height: 100%;
    display: flex !important;
    flex-direction: column;
}
.u-tab-header{
    width: 100%;
    height: auto;
    float: left;
    padding-bottom: 1%;
    margin-bottom: 1%;
    border-bottom: 1px solid #dee2e6;
    display: flex;
}
.u-tab-main{
    width: 100%;
    height: 98%;
    float: left;
    display: flex;
}
.u-general-sec{
    width: 50%;
    height: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.u-general-items,.u-tab-items{
    width: 100%;
    max-height: 95%;
    float: left;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.u-general-items{
    max-height: 70%;

}
.u-uploaded-design-container{
    padding: 0 2%;
}
.u-general-sec .u-uploaded-design{
        width: 48%;      
}
.u-to-do-list-container{
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
}
.u-request-container,.u-work-container{
    width: 50%;
    max-height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
}
.u-request-sec{
    width: 94%;
    height: auto;
    float: left;
    display: flex;
    padding:1% 3%;
}
.u-request-sec input{
    font-size: 20px;
}
.btn-confirm{
    background-color: #05bf49;
    color: white;
}
.btn-confirm:hover{
    background-color: #098536 !important;
    color: white !important;
}
.todo-create-date{
    background: gray;
    color: rgb(255, 255, 255);
    width: 150px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    position: absolute;
    right: 70%;
    bottom: 0;
}
.todo-close-date{
    background: rgb(9, 163, 91);
    color: rgb(235, 235, 235);
    width: 150px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    position: absolute;
    right: 40px;
    bottom: -12px;
}
.api-item-task{
    min-height: 120px !important;
}
.u-uploaded-design a{
    display: flex;
}

/* Order image and design picker */
.u-upload-design-modal {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 16px;
    float: none;
    box-sizing: border-box;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: auto;
    transition: opacity .18s ease, visibility .18s ease;
}
.u-upload-design-modal.is-open {
    z-index: 12000;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.u-upload-design-container {
    width: min(1180px, 100%);
    height: min(820px, calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
    min-height: 360px;
    float: none;
    flex: 0 0 auto;
    background-color: #fff;
    box-shadow: 0 20px 60px rgba(14, 31, 68, .25);
}
.u-upload-design-modal .upload-design-modal-header {
    height: auto;
    min-height: 72px;
    flex: 0 0 auto;
    padding: 12px 20px;
    border-bottom: 1px solid #e6ebf4;
}
.upload-design-modal-header h2 {
    margin: 0;
    color: #173c82;
    font-size: 20px;
    font-weight: 700;
}
.upload-design-modal-header p {
    margin: 3px 0 0;
    color: #66748a;
    font-size: 13px;
}
.upload-design-modal-header .u-close-design-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.u-upload-design-modal .u-uploaded-design-container {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    padding: 0 20px 18px;
    overflow: hidden;
}
.u-upload-design-modal .upload-design-tabs {
    flex: 0 0 auto;
    gap: 4px;
    margin: 0;
    padding-top: 12px;
}
.u-upload-design-modal .upload-design-tabs .nav-link {
    padding: 10px 15px;
    color: #31517d;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}
.u-upload-design-modal .upload-design-tabs .nav-link.active {
    color: #0b398f;
    background: #f4f7fd;
    border-color: #d9e2f1 #d9e2f1 #f4f7fd;
}
.u-upload-design-modal .upload-design-tab-content {
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px 2px 2px;
}
.u-upload-design-modal .tab-pane {
    display: none !important;
    height: auto !important;
}
.u-upload-design-modal .tab-pane.active {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}
.u-upload-design-modal .upload-design-toolbar {
    min-height: 74px;
    height: auto;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #dce5f2;
    border-radius: 10px;
    background: #f7f9fd;
}
.upload-design-help {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.upload-design-help strong { color: #263b5c; font-size: 14px; }
.upload-design-help span { color: #68778e; font-size: 12px; }
.u-upload-design-modal .upload-design-pick {
    min-height: 40px;
    flex: 0 0 auto;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 7px;
    background: #174ca5;
    box-shadow: 0 2px 5px rgba(22, 55, 110, .18);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.u-upload-design-modal .upload-design-pick:hover { background: #103d89; }
.u-upload-design-modal .upload-design-pick input {
    width: 1px;
    height: 1px;
    padding: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.u-upload-design-modal .upload-design-pick:focus-within { outline: 3px solid #9bc4ff; outline-offset: 2px; }
.u-upload-design-modal .u-tab-main {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}
.u-upload-design-modal .upload-design-section {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: hidden;
    border: 1px solid #dce5f2;
    border-radius: 10px;
    background: #fff;
}
.upload-design-section-heading {
    min-height: 48px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #24479a;
    background: #0b398f;
}
.upload-design-section-heading h3 {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.upload-design-section-heading > span {
    color: rgba(255,255,255,.78);
    font-size: 11px;
}
.u-upload-design-modal .u-general-items,
.u-upload-design-modal .u-tab-items {
    width: 100%;
    max-height: min(48vh, 460px);
    min-height: 180px;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    align-content: start;
    align-items: start;
    gap: 12px;
    overflow: auto;
    padding: 12px;
}
.u-upload-design-modal .u-general-items:empty::before,
.u-upload-design-modal .u-models-sec:empty::before {
    grid-column: 1 / -1;
    align-self: center;
    justify-self: center;
    padding: 26px 12px;
    color: #8491a5;
    font-size: 13px;
    text-align: center;
    content: attr(data-empty);
}
.u-upload-design-modal .upload-media-card {
    width: auto !important;
    min-width: 0;
    height: auto !important;
    min-height: 220px;
    float: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 9px;
    overflow: hidden;
    border: 1px solid #e0e6ef;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(29, 48, 78, .07);
    cursor: default;
}
.u-upload-design-modal .upload-media-preview {
    width: 100%;
    height: 132px;
    flex: 0 0 132px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: #f2f5fa;
}
.u-upload-design-modal .upload-media-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.upload-file-icon {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #d73a49;
}
.upload-file-icon i { font-size: 42px; }
.upload-file-icon span { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.upload-media-meta {
    min-width: 0;
    padding: 8px 2px 5px;
}
.upload-media-name {
    display: block;
    overflow: hidden;
    color: #34435a;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-media-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid #edf0f5;
}
.u-upload-design-modal .upload-delete-btn {
    width: 34px;
    height: 32px;
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.upload-design-select {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: #31517d;
    font-size: 11px;
    cursor: pointer;
}
.upload-design-select .form-check-input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
    cursor: pointer;
}
.upload-media-progress { margin-top: auto; color: #66748a; font-size: 11px; }
.upload-media-progress .progressbar_container { height: 5px; margin: 6px 0; overflow: hidden; border-radius: 99px; background: #e7edf7; }
.upload-media-progress .progressbar_color { height: 100%; border-radius: inherit; background: #1c9a63; transition: width .15s ease; }
body.upload-design-open { overflow: hidden; }
body.upload-design-open .swal2-container { z-index: 12100 !important; }
.swal2-container.dashboard-task-swal-container { z-index: 10020 !important; }
@media (max-width: 700px) {
    .u-upload-design-modal { padding: 8px; align-items: stretch; }
    .u-upload-design-container { width: 100%; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); min-height: 0; }
    .u-upload-design-modal .upload-design-modal-header { min-height: 62px; padding: 10px 14px; }
    .upload-design-modal-header h2 { font-size: 17px; }
    .upload-design-modal-header p { font-size: 11px; }
    .u-upload-design-modal .u-uploaded-design-container { padding: 0 12px 12px; }
    .u-upload-design-modal .upload-design-tabs .nav-link { padding: 8px 9px; font-size: 12px; }
    .u-upload-design-modal .upload-design-toolbar { min-height: 62px; gap: 8px; padding: 9px; }
    .upload-design-help span { font-size: 10px; }
    .u-upload-design-modal .upload-design-pick { padding: 7px 10px; }
    .u-upload-design-modal .u-tab-main { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .u-upload-design-modal .u-general-items,
    .u-upload-design-modal .u-tab-items { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); max-height: 36vh; min-height: 150px; padding: 9px; }
    .u-upload-design-modal .upload-media-card { min-height: 205px; }
    .u-upload-design-modal .upload-media-preview { height: 115px; flex-basis: 115px; }
}
/* ************1402.9.15************ */
.bg-gray{
    background-color: rgb(232 232 232);
}
.bg-gray-light{
    background-color: rgb(200, 200, 200);
    border-radius: 10px;
}
.u-information-user{
    max-height: 66.2rem;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 3px;
}
.user-img-box{
    width: 10rem;
    height: auto;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.user-img-box img{
    width: 100%;
    height: auto;
    float: left;
}


/****** Accounting - Paid ******/
.main-account{
    margin-top:75px;
}
.main-account-title{
    margin-bottom:21px;
}
.thead-account{
    padding: 2% 0% !important;
}
.thead-account th{
    font-size: 1.1rem !important;
}
.u-td{
    color: black !important;
    font-size: 14px !important;
    padding: 8px 11px 0px;
    background-color: #f5f3f3;
}
#invoices td{
    padding: 15px 10px;
    gap: 12px;
}
.u-td-invoice{
    background: #8080801c;
    /* box-shadow: 1px 1px 3px #80808066; */
    -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    padding: 0;
    /* margin-right: 14px !important; */
    width: 15%;
    /* margin-bottom: 14px !important; */
}
.table-list-warehouse{
    width: 100%;
    justify-content: flex-start;
    /* padding: 5px 15px !important; */
}
.table-list-warehouse td{
    width: 100%;
}
.u-td-invoice span{
    box-shadow: 0 0 0 #ffff;
    background: #a09e9e2b;
    cursor: auto;
    width: 100%;
    display: block;
    text-align: center;
    padding: 13px 5px;
    border-bottom: 1px solid #ffffff47;
    font-size:0.9rem;
}
.u-td-invoice span:first-child{
    font-weight: bolder;
    font-size: 1rem;
}
.u-td-invoice span:last-child{
    border-bottom: none;
    background:#e3e3e3
    
}
.u-td-invoice input[type=checkbox]{
    font-size: 33px;
}
.form-check-input:checked{
    background-color: #198754;
    border-color: #198754;
    color: white;
}
.form-check-input:hover{
    cursor: pointer;
}
.w-90{
    width: 90% !important;
}
.w-20{
    width: 15% !important;
}
.p-lr-1{
    padding-left: 1%;
    padding-right: 1%;
}
.p-lr-2{
    padding-left: 20px;
    padding-right: 20px;
} 
.p-tb-1{
    padding-top: 10px;
    padding-bottom: 10px;
}
.u-upload-file{
    background-color: #afafaf70;
    padding: 2% 11px 0px;
}
.u-choose-file {
    margin-top: 10px;
    width: 27%;
}
.u-upload-item {
    padding: 10px 3px;
    margin-right: 6px !important;
    width: 18%;
    margin-bottom: 14px !important;
    margin-left: 15px !important;
    padding-top: 0 !important;

}
.u-tools {
    padding-top: 15px;
}
.u-tools a {
    width: 100%;
    margin-bottom: 10px;
}
.u-upload-body {
    margin-top: 13px !important;
}
.w-14 {
    width:11% !important;
}
.w-85{
    width: 85% !important;
}
.w-10{
    width: 10% !important;
}
.btn-status{
    border: none;
    box-shadow: unset;
    background-color: transparent;
}
.btn-status:hover{
    background-color: unset !important;
}
.btn-status{
    border: none;
    box-shadow: unset;
    background-color: transparent;
}
.btn-status:hover{
    background-color: unset !important;
}
.u-gray{
    color: #d9dfe1;
}
.word-break{
    word-break: break-all;
}
.u-status-btn{
    color: white !important;
    margin-top: -2px;
    margin-left: 5px;
}
/************************************ 1402.10.2 *************************************/
.u-icon-dash{
    padding: 3px 11px !important;
    font-size: 0.8rem !important;
}
/************************************ 1402.10.3 *************************************/
.modal-body{
    padding: 30px !important;
}
.modal-body label{
    margin-bottom: 9px;
    text-indent: 3px;
}
.dataTables_filter input{
    padding: 6px !important;
    border: 2px solid #c9c9c9a1 !important;
    border-radius: 5px !important;
    text-indent: 3px !important;
}
.dataTable_filter input:focus-visible{
    border: 2px solid #c9c9c9a1 !important;
}
:root {
    --panel-table-header-bg: #002489;
    --panel-table-header-hover: #001f73;
    --panel-table-row-bg: #d2d7ff;
    --panel-table-row-alt-bg: #c7ccf2;
    --panel-table-row-hover-bg: #bac6f8;
    --panel-table-border: #a5aac4;
    --panel-table-text: #22252a;
}

#main.main table.table {
    --bs-table-color: var(--panel-table-text);
    --bs-table-bg: var(--panel-table-row-bg);
    --bs-table-striped-color: var(--panel-table-text);
    --bs-table-striped-bg: var(--panel-table-row-alt-bg);
    --bs-table-hover-color: #17213f;
    --bs-table-hover-bg: var(--panel-table-row-hover-bg);
    border: 1px solid var(--panel-table-border);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

#main.main table.datatable {
    width: 100% !important;
    table-layout: fixed !important;
}

#main.main table.datatable col {
    width: auto !important;
}

#main.main table.datatable thead th {
    width: auto !important;
}

#main.main table.table thead th {
    padding: .8rem .7rem;
    border-bottom: 1px solid var(--panel-table-header-bg);
    background: var(--panel-table-header-bg) !important;
    color: #fff !important;
    font-weight: 650;
    text-align: center;
    vertical-align: middle;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

#main.main table.table thead th a,
#main.main table.table thead th button {
    color: #fff !important;
}

#main.main table.table tbody td,
#main.main table.table tbody th {
    padding: .7rem;
    border-color: var(--panel-table-border);
    color: var(--panel-table-text);
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
}

#main.main table.table tbody tr > * {
    background-color: var(--panel-table-row-bg) !important;
}

#main.main table.table tbody tr:nth-child(odd) > * {
    background-color: var(--panel-table-row-alt-bg) !important;
}

#main.main table.table tbody tr:hover > * {
    background-color: var(--panel-table-row-hover-bg) !important;
}

#main.user-management-page table.user-management-table tr > :first-child {
    width: 5% !important;
}

#main.user-management-page table.user-management-table tr > :nth-child(2) {
    width: 10% !important;
}

#main.user-management-page table.user-management-table tr > :last-child {
    width: 15% !important;
}

#main.main .customer-transport-cost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

:root {
    --user-management-edit-gap: 14px;
    --user-management-profile-column: .95fr;
    --user-management-form-column: 1.35fr;
    --user-management-edit-profile-min-height: 24rem;
}

#main.main .user-management-edit-columns {
    display: grid;
    grid-template-columns:
        minmax(300px, var(--user-management-profile-column))
        minmax(0, var(--user-management-form-column));
    align-items: start;
    gap: var(--user-management-edit-gap);
    width: 100%;
    margin: 0 0 1rem;
}

#main.main .user-management-edit-columns > * {
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
    margin: 0 !important;
    padding: 0 !important;
}

#main.main .user-management-edit-columns > :first-child {
    grid-column: 1;
    min-height: var(--user-management-edit-profile-min-height);
}

#main.main .user-management-edit-columns > :first-child > *,
#main.main .user-management-edit-columns > :first-child > * > .card {
    flex: 1 1 auto;
}

#main.main .user-management-edit-columns > :last-child {
    grid-column: 2;
}

#main.main .user-management-edit-columns > :first-child > .col-xl-12,
#main.main .user-management-edit-columns > :last-child > .u-information-user {
    min-width: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
}

#main.main .user-management-edit-columns .card {
    width: 100%;
    min-width: 0;
}

/* Bootstrap contact rows must share the address sections' content edges. */
#main.main .user-management-edit-columns .row.bg-gray-light,
#main.main .user-management-edit-columns .user-management-address-section {
    box-sizing: border-box;
    width: 100%;
    margin-inline: 0 !important;
}

#main.main .user-management-edit-columns .row.bg-gray-light {
    padding: 12px !important;
    border: 1px solid #e1e8f3;
    border-radius: 12px;
    background-color: #f4f7fc !important;
}

#main.main .user-management-edit-columns .user-img-box {
    width: 10rem;
    flex: 0 0 10rem;
}

#main.main .user-management-edit-columns .user-img-box img {
    width: 9rem !important;
    height: 9rem !important;
    max-width: 100%;
    margin: 0 !important;
    object-fit: cover;
}

/* Keep every user profile photo uploader in the left profile card. */
#main.main .user-management-edit-columns .user-management-photo-editor {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 0 1.25rem !important;
    padding: 0;
}

#main.main .user-management-edit-columns .user-management-photo-editor > label {
    width: 100%;
    max-width: none;
    margin: 0 0 .65rem;
    padding: 0;
    text-align: center;
}

#main.main .user-management-edit-columns .user-management-photo-editor .u-input-contain {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: .7rem;
    width: 100%;
}

#main.main .user-management-edit-columns .user-management-photo-editor .user-img-box {
    width: 16rem;
    flex: 0 1 16rem;
    text-align: center;
}

#main.main .user-management-edit-columns .user-management-photo-editor .user-img-box img {
    width: min(15rem, 100%) !important;
    height: 15rem !important;
    object-fit: contain;
}

#main.main .user-management-edit-columns .user-management-photo-editor .pt-2-pimg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding-top: 0 !important;
}

#main.main .user-management-edit-columns .user-management-photo-editor .pt-2-pimg .feedback {
    margin: 0;
}

/* Keep field labels consistent whether legacy rows are inside a tab pane or its parent. */
#main.main .user-management-edit-columns .r-profile > .col-form-label {
    color: #444;
    font-weight: 400;
}

/* Match the contact labels (Email, Mobile, Fax, Phone) to the other edit-form labels. */
#main.main .user-management-edit-columns .row.bg-gray-light > .col-md-4 > div > .col-form-label {
    margin: 0;
    color: #34445a !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    line-height: 1.4;
}

/* Shared framing for detail sections across User Management profiles. */
#main.main .user-management-detail-card {
    background: #fff;
    border-radius: 12px;
}

#main.main .user-management-detail-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 20px;
    text-align: center;
}

#main.main .user-management-detail-profile img {
    width: 170px;
    height: 170px;
    max-width: 100%;
    margin: 0 0 8px;
    border-radius: 14px;
    object-fit: cover;
    background: #f3f5f7;
}

#main.main .user-management-detail-profile h2 {
    margin: 0;
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

#main.main .user-management-detail-content {
    min-width: 0;
    padding: 20px;
}

#main.main .user-management-detail-content > .user-management-detail-section:last-child {
    margin-bottom: 0;
}

#main.main .user-management-detail-card > .user-management-detail-actions {
    margin: 0;
    padding: 20px;
    border: 0;
    border-top: 1px solid #e0e5ec;
    border-radius: 0 0 12px 12px;
    background: #fff;
    box-shadow: none;
}

#main.main .user-management-detail-section {
    min-width: 0;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid #e0e5ec;
    border-radius: 12px;
    background: #fff;
}

/* The supplier editor uses the same content sections and form rhythm as the customer editor. */
#main.main .user-management-form-section {
    min-width: 0;
    margin: 0 0 16px;
    padding: 18px 20px;
    border: 1px solid #e3e8ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgb(16 24 40 / 5%);
}

#main.main .user-management-form-section > h5 {
    margin: 0 0 16px;
    color: #344054;
    font-size: 1.05rem;
    font-weight: 650;
}

#main.main .user-management-form-section .form-control,
#main.main .user-management-form-section .form-select {
    min-height: 42px;
    border-color: #cfd7e4;
    border-radius: 8px;
}

#main.main .user-management-form-section label:not(.btn) {
    display: block;
    margin: 0 0 7px;
    color: #475467;
    font-size: .9rem;
    font-weight: 600;
}

/* Keep the supplier editor's two-column frame and form card aligned with Admin edit. */
#main.supplier-edit-page .user-management-form-section {
    margin: 0 0 18px;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid #e3e8ef;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#main.supplier-edit-page .user-management-form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

#main.supplier-edit-page .user-management-form-section > h5 {
    margin-bottom: 12px;
    font-size: 1rem;
}

/* Shared password form layout for every User Management password page. */
#main.main .user-management-password-body {
    padding: clamp(20px, 3vw, 36px);
}

#main.main .user-management-password-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 26px;
    padding: 0 0 20px;
    border-bottom: 1px solid #e5eaf2;
}

#main.main .user-management-password-intro-icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid #d9e3ff;
    border-radius: 14px;
    color: #304ffe;
    background: #f0f4ff;
    font-size: 1.35rem;
}

#main.main .user-management-password-intro h2 {
    margin: 0;
    color: #344054;
    font-size: 1.12rem;
    font-weight: 700;
}

#main.main .user-management-password-intro p {
    margin: 4px 0 0;
    color: #667085;
    font-size: .92rem;
}

#main.main .user-management-password-form {
    display: grid;
    gap: 22px;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

#main.main .user-management-current-password {
    display: grid;
    gap: 9px;
    padding: 16px 18px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #f8faff;
}

#main.main .user-management-current-password > label,
#main.main .user-management-password-field > label {
    display: block;
    margin: 0;
    color: #344054;
    font-size: .98rem;
    font-weight: 650;
}

#main.main .user-management-current-password-value {
    display: flex;
    min-height: 42px;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#main.main .user-management-password-copy {
    display: inline-flex;
    max-width: 100%;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    overflow-wrap: anywhere;
    border: 1px solid #d7dfef;
    border-radius: 9px;
    color: #344054;
    background: #fff;
    font-weight: 600;
    text-align: start;
}

#main.main .user-management-password-copy:hover {
    border-color: #a9b8de;
    background: #f4f7ff;
}

#main.main .user-management-password-unavailable {
    color: #667085;
    font-size: .95rem;
}

#main.main .user-management-password-field {
    display: grid;
    gap: 9px;
}

#main.main .user-management-password-field .input-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 !important;
    align-items: stretch;
}

#main.main .user-management-password-field .form-control {
    min-width: 0;
    min-height: 52px;
    padding-inline: 15px;
    border-color: #cfd7e4;
    border-radius: var(--ui-radius-input) 0 0 var(--ui-radius-input) !important;
    margin: 0 !important;
    font-size: 1rem;
}

#main.main .user-management-password-field .form-control:focus {
    position: relative;
    z-index: 2;
    border-color: #5667ff;
    box-shadow: 0 0 0 .2rem rgb(86 103 255 / 14%);
}

#main.main .user-management-password-toggle {
    display: inline-flex;
    width: 52px;
    min-width: 52px;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin: 0 0 0 -1px !important;
    padding: 0 !important;
    border: 1px solid var(--panel-action-edit-border) !important;
    border-radius: 0 var(--ui-radius-input) var(--ui-radius-input) 0 !important;
    color: #fff !important;
    background: var(--panel-action-edit-bg) !important;
    box-shadow: none !important;
    font-size: 1.1rem;
}

#main.main .user-management-password-toggle:is(:hover, :active) {
    background: var(--panel-action-edit-bg-hover) !important;
    border-color: var(--panel-action-edit-bg-hover) !important;
}

#main.main .user-management-password-match {
    min-height: 1.25rem;
    margin: 0;
    color: #c0394a;
    font-size: .88rem;
    font-weight: 600;
}

#main.main .user-management-password-match.is-valid {
    color: #168354;
}

#main.main .user-management-password-match:empty {
    display: none;
}

#main.main .user-management-sticky-actions.user-management-password-actions {
    width: auto;
    margin: 8px 20px 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    #main.main .user-management-password-body {
        padding: 18px;
    }

    #main.main .user-management-password-intro {
        gap: 11px;
        margin-bottom: 20px;
    }

    #main.main .user-management-password-current {
        padding: 13px 14px;
    }

    #main.main .user-management-password-form {
        gap: 18px;
    }

    #main.main .user-management-sticky-actions.user-management-password-actions {
        margin: 4px 18px 18px;
    }
}

#main.main :is(.supplier-port-row, .supplier-child-row) {
    min-width: 0;
    margin: 0 0 10px;
    padding: 14px;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    background: #f8faff;
}

#main.main .user-management-detail-section > :is(h2, h3, h4, h5) {
    margin: 0 0 12px;
    color: #344054;
    font-size: 1rem;
    font-weight: 650;
}

#main.main .user-management-detail-section .row {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid #edf0f2;
    font-size: 15px;
}

#main.main .user-management-detail-section .row:last-child {
    border-bottom: 0;
}

#main.main .user-management-detail-list {
    display: grid;
    grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
}

#main.main .user-management-detail-list dt {
    color: #697586;
}

#main.main .user-management-detail-list + .user-management-detail-list {
    margin-top: 8px;
}

#main.main .user-management-detail-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

#main.main.user-management-detail-page .user-management-detail-section :is(
    dt, dd, th, td, label, strong, p, li, .text-muted,
    .user-management-full-address, .user-management-transport-values
) {
    font-size: .9rem !important;
}

#main.main .user-management-contact-people {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-inline-start: 1.4rem;
    list-style: decimal;
}

#main.main .user-management-address-entry {
    display: grid;
    grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr);
    gap: 8px 16px;
    align-items: start;
    padding: 9px 0;
    border-bottom: 1px solid #edf0f2;
}

#main.main .user-management-address-entry:last-child {
    border-bottom: 0;
}

#main.main .user-management-address-entry > strong {
    color: #697586;
    font-weight: 600;
}

#main.main .user-management-full-address {
    min-width: 0;
    color: #344054;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

#main.main .user-management-transport-values {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 2px;
    color: #697586;
    font-size: .875rem;
    line-height: 1.45;
}

#main.main .user-management-transport-values .transport-unit {
    display: inline !important;
    white-space: nowrap;
}

#main.main .user-management-transport-values > span {
    white-space: nowrap;
}

#main.main .user-management-transport-values strong {
    color: #344054;
    font-weight: 600;
}

#main.main .user-management-detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 20px;
    border: 1px solid #e0e5ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(24 39 75 / 6%);
}

#main.main .user-management-detail-actions-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

#main.main .user-management-detail-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    text-align: center;
}

@media (max-width: 575px) {
    #main.main .user-management-detail-actions {
        padding-inline: 12px;
    }

    #main.main .user-management-detail-list {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    #main.main .user-management-detail-list dd {
        margin-bottom: 8px;
    }

    #main.main .user-management-address-entry {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

#main.main .user-management-edit-header {
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
}

#main.main .user-management-edit-header > h1 {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
}

#main.main .user-management-header-save {
    flex: 0 0 auto;
    min-width: 148px;
    min-height: 46px;
    padding: 9px 20px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgb(24 39 75 / 14%);
}


#main.main .user-management-sticky-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 1rem;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff !important;
    box-shadow: 0 4px 16px rgb(24 39 75 / 10%);
}

#main.main .user-management-sticky-actions:has(> .btn-danger:only-child, > .btn-outline-secondary:only-child) {
    justify-content: flex-start;
    width: auto;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

#main.main .user-management-sticky-actions > :is(.btn-danger, .btn-outline-secondary) {
    min-width: 124px;
    min-height: 46px;
    padding: 9px 18px;
    border: 1px solid var(--form-action-cancel-border) !important;
    border-radius: 10px;
    color: #fff !important;
    background: var(--form-action-cancel-bg) !important;
    font-weight: 600;
    box-shadow: 0 2px 5px rgb(24 39 75 / 14%);
}

#main.main .user-management-sticky-actions > :is(.btn-danger, .btn-outline-secondary):hover {
    border-color: var(--form-action-cancel-bg-hover) !important;
    background: var(--form-action-cancel-bg-hover) !important;
}

#main.main .user-management-sticky-actions > :is(.btn-success, .btn-primary) {
    min-width: 148px;
    min-height: 46px;
    padding: 9px 20px;
    border: 1px solid var(--form-action-save-border) !important;
    border-radius: 10px;
    color: #fff !important;
    background: var(--form-action-save-bg) !important;
    font-weight: 600;
    box-shadow: 0 2px 5px rgb(24 39 75 / 14%);
}

#main.main .user-management-sticky-actions > :is(.btn-success, .btn-primary):hover {
    border-color: var(--form-action-save-bg-hover) !important;
    background: var(--form-action-save-bg-hover) !important;
}

@media (max-width: 480px) {
    #main.main .user-management-edit-header {
        gap: 8px;
    }

    #main.main .user-management-header-save {
        min-width: 0;
        padding-inline: 12px;
    }


    #main.main .user-management-sticky-actions {
        gap: 8px;
        padding: 8px;
    }

    #main.main .user-management-sticky-actions > :is(.btn-danger, .btn-outline-secondary),
    #main.main .user-management-sticky-actions > :is(.btn-success, .btn-primary) {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 10px;
    }
}

/* Customer is the shared reference for all user account editors. */
#main.main .user-management-edit-columns > * {
    display: flex;
    flex-direction: column;
}

#main.main .user-management-edit-columns .u-information-user {
    max-height: none;
    overflow: visible;
}

#main.main .user-management-edit-columns > * > .card,
#main.main .user-management-edit-columns > * > .col-xl-12 > .card {
    height: auto;
    margin-bottom: 0 !important;
}

#main.main .user-management-edit-columns > .is-shorter-sticky {
    position: sticky;
    top: var(--user-management-edit-sticky-top, 84px);
    align-self: start;
    min-height: min(var(--user-management-edit-profile-min-height), calc(100vh - var(--user-management-edit-sticky-top, 84px) - 16px));
    max-height: calc(100vh - var(--user-management-edit-sticky-top, 84px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 2;
}

/* Cards retain their natural height inside the independently scrolling column. */
#main.main .user-management-edit-columns > * > * {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    #main.main .user-management-edit-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--user-management-edit-gap);
    }

    #main.main .user-management-edit-columns > .is-shorter-sticky {
        position: static;
        top: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    #main.main .user-management-edit-columns > :first-child,
    #main.main .user-management-edit-columns > :last-child {
        grid-column: auto;
    }

    #main.main .user-management-edit-columns > :first-child {
        min-height: 0;
    }
}

/* Keep the group list controls close to the top of their card. The legacy
   card, card-body, pt-2, and inline padding were stacking up above the button. */
#main.main.groups-list-page > .u-pagetitle {
    float: none;
}

#main.main.groups-list-page .groups-list-card {
    padding-top: 0;
}

#main.main.groups-list-page .groups-list-content,
#main.main.groups-list-page .groups-list-table-content {
    padding-top: 0;
}

#main.main.groups-list-page .groups-list-actions-title {
    margin: 0 0 12px;
    padding: 0;
}

.groups-table {
    width: 100% !important;
    table-layout: fixed !important;
}

#customer-group-table th:nth-child(1) { width: 7% !important; }
#customer-group-table th:nth-child(2) { width: 35% !important; }
#customer-group-table th:nth-child(3) { width: 46% !important; }
#customer-group-table th:nth-child(4) { width: 12% !important; }
#customer-group-table col:nth-child(1) { width: 7% !important; }
#customer-group-table col:nth-child(2) { width: 35% !important; }
#customer-group-table col:nth-child(3) { width: 46% !important; }
#customer-group-table col:nth-child(4) { width: 12% !important; }

#material-group-table th:nth-child(1) { width: 7% !important; }
#material-group-table th:nth-child(2) { width: 25% !important; }
#material-group-table th:nth-child(3) { width: 19% !important; }
#material-group-table th:nth-child(4) { width: 19% !important; }
#material-group-table th:nth-child(5) { width: 18% !important; }
#material-group-table th:nth-child(6) { width: 12% !important; }
#material-group-table col:nth-child(1) { width: 7% !important; }
#material-group-table col:nth-child(2) { width: 25% !important; }
#material-group-table col:nth-child(3) { width: 19% !important; }
#material-group-table col:nth-child(4) { width: 19% !important; }
#material-group-table col:nth-child(5) { width: 18% !important; }
#material-group-table col:nth-child(6) { width: 12% !important; }

.groups-table .group-actions-cell {
    padding-inline: 6px;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.groups-table .group-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.groups-table .group-row-actions > .btn {
    display: inline-flex;
    width: 36px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.groups-table .group-row-actions > .btn i {
    line-height: 1;
}

.groups-table .group-row-actions > .btn-warning {
    color: #212529 !important;
}

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

.disable-select{
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url(../img/arrow-disabel.svg);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.swal2-backdrop-show{
    padding: 10% !important;
}
.bg-whitelight{
    background-color: #f5f3f3 !important;
}
.description-container{
    border: 1px solid #eee;
    background: #c6c0c0ab;
    padding: 14px;
}
.description-container h3{
    border-bottom: 1px solid #80808063;
    display: inline;
    padding: 0 37px 6px;
}
.Paid{
    background-color:#94d794b0;
    border-top: 4px solid #3a8d3a;
}
.Unpaid{
    background-color:#f157573d;
    border-top: 4px solid #b83333;
}
.Paying{
    background-color:#ecec6bc4;
    border-top: 4px solid #e5e507;
}
.remaining{
    background-color: #4428c34f;
}
.bolder *{
    font-weight: bolder !important;
    /* font-family:'tahoma';
    font-size: 16px;
    text-shadow: 0 0 10px rgba(69, 66, 66, 0.765); */
}
.clear-after::after{
    content: "" !important;
}
i.heart-section{
    top: 0px !important;
    right: 0 !important;
    position: absolute !important;
    font-size: 35px;
    z-index: 10000;
    background-color: unset !important;
}
.no-item,
.tableDash td.no-item{
    padding: 13px 0px;
    text-align: center;
    width: 100% !important;
    font-size: 1.4rem !important;
}
.tableHead th{
    padding: 0 3px;
    font-size: 0.9rem;
}
.u-service-container{
    margin-top: 16px;
    padding-top: 5px !important;
}
.u-service-container .card-header{
    margin: 0px 10px;
    padding-bottom: 5px;
}
.u-service-container .card-body{
    padding: 0px 20px 20px;
}
.u-Trans-table th{
    padding: 10px;
    background-color: #003399;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.337);
    border-left: 1px solid rgba(255, 255, 255, 0.337);
}
.u-Trans-table th>a{
    color: white;
    font-weight: bold;
    font-size: 17px;
}
.u-Trans-table td{
    background-color: #dbdfff;
    border: 1px solid rgba(255, 255, 255, 0.337);
}
/************************************ 1402.10.28 *************************************/
.u-factor-title{
    font-size: 25px;
    text-align:center;
    margin:0;
}
.m-10px{
    margin: 0px 5px 14px 0px !important;
}
.w-15{
    width: 15% !important;
}
.w-30{
    width: 30% !important;
}
.w-20 {
    width: 20% !important;
}
.downward-triangle{
    border-top: 5px solid black;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    right: 33px;
    bottom: 3px;

}
.letter-spacing-2{
    letter-spacing: 0.2px;
}
.item-box-search{
    display: block;
    background: #797979;
    padding: 0 !important;
    border: none;
    top: 42px;
   
}
.item-box-search div{
color: white;
padding: 10px;
}
.date-box{
    width: 100%;
    padding: 5px 10px !important;
    border:none !important;
}
.date-style-crate{
    width: 590px;
}
.swal2-actions{
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    direction: ltr;
    justify-content: center !important;
    gap: .5rem .75rem;
}
.swal2-actions .swal2-styled{
    width: auto !important;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: .25rem !important;
    padding-inline: 1.35em;
}
.swal2-confirm{
    color: #fff !important;
    background-color: #198754 !important;
    border-color: #198754 !important;
    min-width: max-content;
}
.swal2-confirm:hover{
    color: white !important;
    background-color: #157347 !important;
    border-color: #157347 !important;
}

/* User-management delete confirmations need a destructive action style,
   separate from the global green save/confirm variant. */
.swal2-popup.user-management-delete-alert {
    width: min(28rem, calc(100vw - 1.5rem)) !important;
    padding: 1.35rem 1.25rem 1.2rem;
    border: 1px solid #e5eaf2;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(19, 35, 65, .2);
}

.user-management-delete-alert .swal2-icon {
    width: 4.5em;
    height: 4.5em;
    margin: .4em auto .65em;
}

.user-management-delete-alert .swal2-title {
    margin: 0;
    padding: .1em .35em 0;
    color: #344054;
    font-size: 1.3rem;
    line-height: 1.35;
}

.user-management-delete-alert .swal2-html-container {
    margin: .55rem 1rem 0;
    color: #667085;
    font-size: .92rem;
    line-height: 1.5;
}

.user-management-delete-alert .swal2-actions {
    width: 100% !important;
    justify-content: center !important;
    gap: .55rem;
    margin: 1.2rem 0 0;
}

.user-management-delete-alert .swal2-actions .swal2-confirm {
    border: 1px solid #157347 !important;
    color: #fff !important;
    background: #198754 !important;
}

.user-management-delete-alert .swal2-actions .swal2-cancel,
.swal-delete-confirmation .swal2-actions .swal2-cancel {
    border: 1px solid #dc3545 !important;
    color: #fff !important;
    background: #dc3545 !important;
}

.user-management-delete-alert .swal2-actions .swal2-cancel:hover,
.swal-delete-confirmation .swal2-actions .swal2-cancel:hover {
    border-color: #bb2d3b !important;
    background: #bb2d3b !important;
}

.user-management-delete-alert .swal2-actions .swal2-cancel { order: 1 !important; }
.user-management-delete-alert .swal2-actions .swal2-confirm { order: 2 !important; }

.user-management-delete-alert .swal2-actions .swal2-confirm:hover,
.user-management-delete-alert .swal2-actions .swal2-confirm:focus-visible {
    border-color: #157347 !important;
    background: #157347 !important;
}

/* Single-action success alerts in user management should sit centered in the dialog. */
.swal2-popup.user-management-success-alert .swal2-actions {
    justify-content: center !important;
    margin-inline: auto !important;
}

@media (max-width: 576px){
    .swal2-actions .swal2-styled{
        flex: 0 0 auto;
        max-width: 100%;
        min-width: max-content;
        white-space: normal;
    }
}
.u-notif-reject{
    position: absolute;
    top:45px;
    left:-400px;
    width:500px;
}
.u-notif-reject .card-header{
    padding: 8px 12px !important;
}
.u-notif-reject .card-header h3{
    margin: 0;
    font-size: 1.5rem;
}
.u-rejection-notif td{
    padding: 10px;
    cursor: pointer;
    background:#d81a1aa1 !important;
    color: white;
}
.u-rejection-notif td,.u-rejection-notif *{
    font-size:12px;
}
.u-notifreject-close{
    background-color: red;
    color:white;
    position: absolute;
    top:5px;
    right: 5px;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border: 1px solid gray;
    cursor: pointer;
}
.u-bold{
    font-weight: bold !important;
}
.n-modal-extra{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1111;
    background-color: #00000079;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}
.n-btn-close-mextra{
    width:max-content;
}
.n-search-consigment{
    background:white;
    padding:10px 5px;
}
/* /////////////////////////////////1403.3.11//////////////////////////////////// */
.home-btn{
    background-color: #012970;
    color:white;
    border-color: #012970 !important;
}
.home-btn:hover{
    background-color: #012970 !important;
    color: white !important;
    border-color: #012970 !important;
}
.port-ele,.user-ele{
    background-color: #dadada;
    padding:2%;
}
:is(.port-ele,.user-ele) label{
    color: #304e81;
    font-weight: bold;
}
.upload-btn{
    position: relative;
    overflow: hidden;
}
.upload-btn input[type="file"]{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
}
/* ////////////////////////1403.3.21//////////////////////// */
.edit-person{
    display: none;
}
.dataTables_filter{
    width: 36%;
}
.dataTables_filter :where(label,input){
    width: 100%;
}
.u-product-ele::before{
    content: "";
    width: 93%;
    height: 64%;
    position: absolute;
    background-color: #c0c7d2;
    border-radius: 5px 5px 0 0;
}
/* ////////////////////////1403.3.23//////////////////////// */
.u-buy-container,.u-product-info{
    position: relative;
    z-index: 1;
    overflow: hidden;
}
:is(.u-buy-container,.u-product-info)::before{
    content: "";
    width: 100%;
    height: 80%;
    float: left;
    background-color: #2559a7;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.u-product-container::before{
    background-color: #c0c7d2;
}
/* ////////////////////////1403.3.26//////////////////////// */
.dataTables_wrapper input[type=search]{
    margin-left: 0 !important;
}
.u-back-btn{
    box-shadow: 1px 1px 2px #623f86 !important;
    background: #623f86 !important;
    color: white !important;
}
/* ////////////////////////1403.3.26//////////////////////// */
.u-card-header{
    padding: 18px 15px;
}
/* ////////////////////////1403.3.27//////////////////////// */

.u-fill-btn{
    background: #f49292;
    border:#f49292;
    color: black
}
.u-fill-btn:hover{
    background: #cc7373 !important;
    border: #cc7373 !important;
    color: black !important;
}

.u-buy-btn{
    background:#b2ef91;
    border:#c7f2b0;
    color: black;
}
.u-buy-btn:hover{
    background: #77ac5a !important;
    border:#77ac5a !important;
    color:white !important;
}
.u-view-btn {
    background: #0f3371 !important;
    border:1px solid #0f3371 !important;
    padding: 5px 25px;
    text-transform: capitalize;
    color: white;
  }

.u-view-btn:hover{
    background-color: #2693aa !important;
    color:white !important;
}
/* //// */
.tab-container{
    border-color: #21b9b8;
}
.tabs-ele{
    background-color: #edeeef !important;
}
.active-tab{
    background-color:#21b9b8 !important;
    color:white !important;
    transition:0.4s;
}
.bg-Customized:before{
    background-color: #039;
}
.bg-customized:before{
    background-color: #039;
}
.bg-Produce::before,.bg-Buy:before{
    background-color: #c0c7d2;
}
.bg-produce::before{
    background: #cc7373 !important;
}
.bg-purchase::before{
    background-color: #b2ef91;
}
.bg-Purchase::before{
    background-color: #b2ef91;
}
/*******************/
.slider-models {
    position: relative;
    
    width: 700px; /* adjust to your desired width */
    /* height: 200px;  */
  }
  
  .slides {
    display: flex;
    transition: transform 0.5s; /* animate the transform property */
    overflow: hidden;
  }
  
  .slide {
    width: 700px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  
  .prev-models , .next-models  {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
  }
  
  .prev-models  {
    left: 10px !important;
    background: unset !important;
    right: unset !important;
    color: #232323 !important;
    font-size: 46px !important;
  }
  
  .next-models  {
    right: 10px !important;
    background: unset !important;
    left: unset !important;
    color: #232323 !important;
    font-size: 46px !important;
  }
  .u-table-product{
    font-size: 0.9rem;
  }
  .u-table-product th{
    padding: 0 3px !important;
    font-size: 0.9rem !important;
  }
.w-80{
    width: 87% !important;
}

.list-box-product{
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    text-align:center;
}
.list-box-product:first-child{
    border-top:0;
}
.custom-table>:not(caption)>*>*
{
    border: 1px solid #fff !important;
}
.table-box{
    width: 23%;
    height: 360px;
    float: left;
    margin: 0.5em 1%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    margin-top: 2em;
    padding: 10px;
    background: white;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: rgb(204, 204, 204) 0px 0px 5px;
}
.table-box table{
    width: 50em;
}
.table-box-header{
    width: 100%;
    height: auto;
    float: left;
    padding:0.5em 2.5%;
}
.show-table-btn{
    display: flex;
}
.hide-table-btn{
    display: none;
}
.search-box{
    display: none;
}
.pagination-table{
    display: none;
}
.draft-box .tableHead {
    background-color: #fbd317 !important;
}
.draft-box .tableHead th {
    color: #000 !important;
}
.delivery-box .tableHead {
    background-color: #149744 !important;
}
.reject-box .tableHead {
    background-color: #d13131 !important;
}
.reject-box .tableBody {
    background-color: rgb(239, 145, 145) !important;
}
.cursor-pointer{
    cursor: pointer;
}
.search-filter{
    /* position: sticky; */
    top: 5.1em;
    margin-bottom: 10px !important;
    background-color: white;
    border-radius: 5px;
    z-index: 11;
}

/*Pagination Dashboard*/
.pagination-container {
    text-align: center; /* برای مرکز کردن پیجینیشن */
    margin-top: 20px; /* فاصله از بالا */
}

.pagination .page-item .page-link {
    border-radius: 0.25rem; /* گوشه‌های گرد */
    padding: 0.5rem 1rem; /* فاصله داخلی */
}

.pagination-info {
    font-weight: bold; /* برجسته کردن شماره صفحه */
}

.u-table-counter-record{
    width: 30% !important;
}
td.u-table-counter-record{
    padding: 4.4px !important;
}

.lang-flag a{
    transition: 0.4s;
}
.lang-flag img{
    opacity: 0.4;
}
.lang-flag img{
    box-shadow: 3px 1px 2px #8080808f;
}
.lang-active img{
    opacity: 1 !important;
}
.tools-list{
    width: 5.5em;
    cursor: pointer;
    transition: 0.4s;
}
:is(.tools-list,.lang-flag a):hover{
    background-color: #f3f3f3;
    transition: 0.4s;
}
.u-open-to-do-list-factor{
    position: fixed !important;
    right: -4px !important;
    padding: 0 !important;
    background-color: #545454 !important;
}
.modal-footer{
    background: #b9b9b9 !important;
}
.tools-row{
    width: 98%;
    height: auto;
    float: left;
    padding: 0.4em 1%;
}
.tools-btn{
    display: none;
}

.u-table-td th {
    border: 1px solid #fff !important;
    color: white;
}
.pr-modal{
    width: 100%;
    height: 100%;
    float: left;
    position: fixed;
    align-items: center;
    top: 0;
    left: 0;
    display: none;
    z-index: 2000;
    background-color: #4c4c4c8c;
    opacity: 0;
}
.pr-search{
    width: 30%;
}

/* #search {
    pointer-events: auto;
    opacity: 1; 
    display: block; 
    visibility: visible;
    z-index: 10
} */
 /*1403-08-07*/
 .search-results{
    background: white;
    border-radius: 5px;
    /* border: 1px solid rgb(204, 204, 204); */
    height: auto;
    max-height: 100px;
    overflow: auto;
    margin-bottom: 0.2rem;
 }
 .search-item{
    padding: 5px 0;
    border-bottom:1px solid #ccc;
 }
 .add-new-btn{
    box-shadow: 2px 2px 2px #80808094 !important;
    padding: 9px 20px !important;
 }
 .add-new-btn i{
    margin-right: 2px !important;
 }
 .product-img{
    position: relative;
    background: #80808024;
    padding: 0 !important;
    margin-right: 15px;
 }
 .product-img img{
    object-fit: cover;
 }
 .form-control:focus {
    color: #212529;
    background-color: #fff;
    outline: 0;
    box-shadow: 0 0 0 2px rgb(239 239 239 / 25%);
    border: 2px solid #c9c9c9a1;
}
.product-dele{
    width: 35px; 
    height: 35px;
}
.product-dele i{
    display: flex;
}
.box-search-position .search-results{
    top: -250% !important;
}


.clear-model{
    position: absolute;
    bottom: 12px;
    right: 7px;
    font-size: 0;
    color: red !important;
    cursor: pointer;
}
.box-model:hover .clear-model{
    color: #000;
    font-size: 20px;
}
.box-model-text{
    width: 100%;
    padding: 8px 5px;
    border-radius: 5px;
    /* border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #eaecef; */
    /* border: 1px solid #ccc; */
    margin-top: 10px;
}
/* .header is already sticky. Switching it to fixed after scrolling removes it
   from document flow and makes the page jump by the header's full height. */
.header-scrolled {
    position: sticky;
    top: 0;
}
.u-tableDash-title h2{
    text-indent: 8px;
    margin-bottom: 0;
    letter-spacing: 2px;
    font-weight: bold;
}
.btn-print-dahsboard{
    background:transparent !important;
    border:none !important;
    box-shadow: none !important;
    color:#313131 !important;
    font-size: 1.2rem !important;
    margin-top: 0 !important;
}


.btn-groups-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
    width: 100%;
    min-width: 92px;
    background: #f8f9faba;
    border-radius: 3px;
}

.position-quick-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.position-quick-actions > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
}

.position-tools-dropdown {
    position: relative;
}

.position-tools-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #34445a;
    background: #fff;
    border: 1px solid #cbd3df;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(22, 42, 72, .14);
}

.position-tools-toggle:hover,
.position-tools-toggle:focus-visible {
    color: #123c91;
    background: #eef3ff;
    border-color: #9bb5e8;
}

.position-tools-toggle i {
    font-size: 18px;
}

.position-tools-menu {
    position: absolute;
    z-index: 1200;
    top: 0;
    left: calc(100% + 8px);
    display: none;
    flex-direction: column;
    width: 230px;
    max-width: min(300px, calc(100vw - 24px));
    padding: 6px 0;
    color: #27364b;
    text-align: left;
    background: #fff;
    border: 1px solid #d5dce8;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(20, 38, 69, .2);
}

.position-tools-dropdown.is-open .position-tools-menu {
    display: flex;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.position-tools-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 12px;
}

.position-tools-section + .position-tools-section {
    border-top: 1px solid #edf0f5;
}

.position-tools-label {
    color: #68758a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.position-tools-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.position-tools-items .move-wrapper {
    display: inline-flex;
}

.position-tools-items .btn-secondary {
    margin: 0;
}

.position-tools-items > .btn,
.position-tools-items .move-wrapper > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 10px;
}

.cell.position-tools-open {
    position: relative;
    z-index: 1100;
    overflow: visible !important;
}

td.position-tools-cell-open {
    position: relative;
    z-index: 1101;
    overflow: visible;
}

.minimize .cell.position-tools-open .btn-groups-container {
    display: flex !important;
    height: auto !important;
    overflow: visible !important;
}


.api-discount-select{
    display: inline-block;
    background: none;
    border: none;
    appearance: none;
    width: auto;
    font-weight: bold;
    
    margin-top:0.3em;
    margin-left: 7px;
    margin-right: 4px;
    cursor: pointer;
    background-color:white;
    border-radius:5px;
    padding:2px 10px;
    border:1px solid #cdcdcd;
}

.minimize{
    height: 100px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.minimize .btn-groups-container{
    overflow: hidden;
    height: 100px;
}
.minimize > *, .minimize > i {
    display: none;
}

/* .minimize > *:first-child {
    display: inline-flex;
} */
.minimize .show-in-minimaze{
    display: inline-flex;
    margin: 0 !important;
}
.api-item-text-material{
    margin-top: 10px;
}
.btn-modal-extra{
    background: #9eb922;
    color: white;
    border: 1px solid #9eb922;
}
.btn-modal-extra:hover{
    background: #62740f !important;
    color: #fff !important;
    border: 1px solid #9eb922 !important;
}
.btn-modal-set{
    background: #a549dc;
    color: white;
    border: 1px solid #a549dc;
}
.btn-modal-set:hover{
    background: #6f249c !important;
}
/****************************/
.customized-panel-button-fixed {
    position: fixed;
    top: 17%;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1;
}

/* wrapper مستقل */
.panel-btn-wrapper {
    position: relative;
    width: 46px;          /* ⬅️ فضا فقط برای یک دکمه */
    min-height: 46px;
    overflow: visible;
}

/* دکمه */
.customized-btn {
    position: relative;
    height: 46px;
    width: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 8px 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
    transition: width .3s ease, box-shadow .3s ease;
    background: white;
    border: 1px solid #e5e7eb;
    cursor: pointer;
}

/* استایل‌های مختلف برای دکمه‌ها */
.customized-btn-set {
    background: linear-gradient(135deg, #a549dc 0%, #a549dc 100%);
    color: white;
    border: none;
}
.customized-btn-set:hover{
    color: white !important;
}

.customized-btn-services {
    background: linear-gradient(135deg, #14a450 0%, #0e6633 100%);
    color: white;
    border: none;
}

/* فقط همین دکمه باز شود */
.panel-btn-wrapper:hover .customized-btn {
    width: 180px;  /* افزایش عرض برای نمایش کامل */
    box-shadow: -6px 0 14px rgba(0,0,0,0.15);
}

/* متن */
.customized-btn .btn-text {
    opacity: 0;
    transition: opacity .2s ease .1s; /* تأخیر برای انیمیشن */
    font-size: 14px;
    font-weight: 500;
}

/* نمایش متن موقع hover */
.panel-btn-wrapper:hover .btn-text {
    opacity: 1;
}

/* شماره سرویس */
.api-service-num {
    position: absolute;
    top: -5px;
    left: -5px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .3s ease, transform .3s ease;
}

/* نمایش شماره موقع hover */
.panel-btn-wrapper:hover .api-service-num {
    opacity: 1;
    transform: translateX(0);
}

/* استایل آیکون */
.service-icon {
    width: 24px;
    height: 24px;
    min-width: 24px; /* جلوگیری از تغییر سایز */
}

/* آیکون فونت-آسم */
.fa {
    font-size: 18px;
    min-width: 24px;
}

/* ابزارک (Tooltip) برای نمایش توضیح قبل از hover */
.panel-btn-wrapper::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: #374151;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 101;
    pointer-events: none;
}

.panel-btn-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
}

/* انیمیشن برای باز شدن نرم‌تر */
.panel-btn-wrapper {
    transition: transform 0.3s ease;
}

.panel-btn-wrapper:hover {
    transform: translateX(-5px);
}
.service-icon-wrapper{
    display: flex;
}

/* Keep User Management list cards visible at full width, including empty tables. */
.user-management-page > .card {
    width: 100% !important;
    min-width: 0;
}

.user-management-page > .card > .card-body {
    width: 100%;
    min-width: 0;
}

/* To Do list polish: preserve the existing tabs, task list and composer. */
.u-to-do-list-modal {
    top: 0 !important;
    bottom: 0;
    height: 100% !important;
    margin-top: 0 !important;
    padding: clamp(8px, 2.5vw, 26px);
    box-sizing: border-box;
    background: rgba(15, 32, 59, .38);
    backdrop-filter: blur(3px);
}
.u-to-do-list-modal .u-to-do-list-section {
    width: min(980px, 100%);
    max-width: 100%;
    height: min(820px, 100%);
    min-height: 0;
    float: none;
    border: 1px solid #e4eaf3;
    border-radius: 18px;
    background: #f7f9fc;
    box-shadow: 0 24px 70px rgba(17, 39, 75, .24);
}
.u-to-do-list-modal .u-to-do-list-section > .u-to-do-list-title {
    flex: 0 0 auto;
    height: auto !important;
    min-height: 66px;
    padding: 11px 18px;
    justify-content: space-between;
    background: #fff;
}
.todo-modal-heading { display:flex; min-width:0; align-items:center; gap:12px; }
.todo-modal-icon {
    display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center;
    border-radius:13px; background:#eaf1ff; color:#2456a6; font-size:19px;
}
.todo-modal-heading h2 { margin:0; color:#172b4d; font-size:19px; font-weight:700; line-height:1.25; }
.todo-modal-heading p { margin:3px 0 0; color:#77849a; font-size:12px; font-weight:400; }
.u-to-do-list-modal .todo-close-modal {
    display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; padding:0;
    border:1px solid #e4eaf3; border-radius:11px; background:#f6f8fb; color:#66748a;
    font-size:17px; transition:background-color .18s ease, color .18s ease;
}
.u-to-do-list-modal .todo-close-modal:hover { background:#fff0f0; color:#c03939; }
.u-to-do-list-modal .todo-tabs {
    display:flex; flex:0 0 auto; flex-wrap:nowrap; gap:7px; margin:0 !important;
    padding:11px 17px 0; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid #e5eaf2;
    scrollbar-width:thin;
}
.u-to-do-list-modal .todo-tabs .nav-item { flex:0 0 auto; }
.u-to-do-list-modal .todo-tabs .nav-link {
    display:inline-flex; min-height:40px; align-items:center; gap:8px; padding:8px 13px;
    border:1px solid transparent; border-bottom:0; border-radius:11px 11px 0 0;
    background:transparent; color:#64738a; font-size:13px; font-weight:600; white-space:nowrap;
}
.u-to-do-list-modal .todo-tabs .nav-link > i { color:#8b9ab1; font-size:13px; }
.u-to-do-list-modal .todo-tabs .nav-link:hover { background:#f1f5fb; color:#244f90; }
.u-to-do-list-modal .todo-tabs .nav-link.active { border-color:#e5eaf2; background:#fff; color:#244f90; }
.u-to-do-list-modal .todo-tabs .nav-link.active > i { color:#3569b6; }
.u-to-do-list-modal .todo-tabs small { padding:2px 6px; border-radius:20px; background:#edf2fa; color:#65748a; font-size:10px; }
.u-to-do-list-modal .tab-content { display:flex; flex:1 1 auto; width:100%; min-height:0; height:auto !important; overflow:hidden; }
.u-to-do-list-modal .tab-content > .tab-pane { width:100%; min-height:0; flex:1 1 auto; overflow:hidden !important; }
.u-to-do-list-modal .tab-pane > .w-100, .u-to-do-list-modal .u-to-do-list-container { min-height:0; }
.u-to-do-list-modal .u-to-do-list-container {
    display:flex; flex:1 1 auto; flex-direction:column; flex-wrap:nowrap; overflow:hidden;
}
.u-to-do-list-modal .u-to-do-list-box {
    display:flex; width:100%; height:auto !important; min-height:0; flex:1 1 auto; flex-direction:column;
    gap:9px; margin:0 !important; padding:13px 17px 7px; overflow-y:auto; list-style:none;
    scrollbar-color:#c3cede transparent; scrollbar-width:thin;
}
.u-to-do-list-modal .todo-task-card {
    display:block; width:100%; height:auto; flex:0 0 auto; margin:0; padding:11px;
    border:1px solid #e3e9f2; border-radius:14px; background:#fff;
    box-shadow:0 3px 12px rgba(31, 54, 88, .045);
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.u-to-do-list-modal .todo-task-card:hover { transform:translateY(-1px); border-color:#cbd8eb; box-shadow:0 8px 20px rgba(31, 54, 88, .08); }
.todo-task-layout { display:grid; grid-template-columns:minmax(104px, 132px) minmax(0, 1fr) minmax(170px, 205px); align-items:center; gap:12px; }
.todo-task-actions, .todo-task-content, .todo-task-details { min-width:0; }
.todo-task-actions { display:flex; flex-direction:column; align-items:center; gap:9px; }
.todo-task-sender { display:flex; max-width:100%; align-items:center; gap:6px; color:#63748d; font-size:11px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.todo-task-sender i { flex:0 0 auto; color:#8292a9; }
.todo-action-group { display:flex; min-height:34px; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; }
.u-to-do-list-modal .todo-action-btn {
    display:inline-grid; width:34px; height:34px; flex:0 0 34px; place-items:center; padding:0;
    border:1px solid #e2e8f1; border-radius:10px; background:#f8faff; color:#62738d;
    font-size:13px; box-shadow:none; transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.u-to-do-list-modal .todo-edit-btn:hover { border-color:#c7d8f1; background:#edf4ff; color:#285ba3; }
.u-to-do-list-modal .todo-delete-btn:hover { border-color:#f1caca; background:#fff0f0; color:#c34444; }
.todo-edit-btn {
    border-color: var(--panel-action-edit-border, #0d6efd) !important;
    background: var(--panel-action-edit-bg, #0d6efd) !important;
    color: #fff !important;
}
.todo-edit-btn:is(:hover, :focus-visible) {
    border-color: var(--panel-action-edit-bg-hover, #0b5ed7) !important;
    background: var(--panel-action-edit-bg-hover, #0b5ed7) !important;
    color: #fff !important;
}
.todo-delete-btn {
    border-color: var(--panel-action-delete-border, #dc3545) !important;
    background: var(--panel-action-delete-bg, #dc3545) !important;
    color: #fff !important;
}
.todo-delete-btn:is(:hover, :focus-visible) {
    border-color: var(--panel-action-delete-bg-hover, #bb2d3b) !important;
    background: var(--panel-action-delete-bg-hover, #bb2d3b) !important;
    color: #fff !important;
}
.todo-edit-btn > i, .todo-delete-btn > i { color:inherit !important; }
.u-to-do-list-modal .todo-save-btn { border-color:#198754; background:#198754; color:#fff; }
.todo-complete-control {
    display:inline-flex; width:34px; height:34px; flex:0 0 34px; align-items:center; justify-content:center;
    margin:0; border:1px solid #dbe4f0; border-radius:10px; background:#f8faff; cursor:pointer;
}
.todo-complete-control .form-check-input { float:none; width:16px; height:16px; margin:0; cursor:pointer; }
.todo-complete-control.is-checked { border-color:#bfe4d2; background:#edf9f2; }
.u-to-do-list-modal .todo-task-content textarea {
    display:block; width:100%; min-height:76px; height:100%; margin:0; padding:11px 13px; resize:vertical;
    border:1px solid #e4eaf3; border-radius:11px; background:#fbfcfe; color:#243650;
    font-size:14px; font-weight:400; line-height:1.55; box-shadow:none;
}
.u-to-do-list-modal .todo-task-content textarea:disabled { opacity:1; color:#34445c; -webkit-text-fill-color:#34445c; cursor:default; }
.u-to-do-list-modal .todo-task-content textarea:enabled { border-color:#8eace0; background:#fff; box-shadow:0 0 0 3px rgba(63, 111, 190, .1); }
.todo-task-details { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.todo-status-badges { display:flex; min-width:0; flex-wrap:wrap; align-items:center; gap:5px; }
.todo-task-status { display:inline-flex; width:fit-content; align-items:center; gap:6px; padding:5px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.todo-task-status.is-open { background:#fff5dc; color:#9a6b13; }
.todo-task-status.is-complete { background:#e9f7ef; color:#238050; }
.todo-freshness-badge {
    display:inline-flex; min-height:23px; align-items:center; gap:4px; padding:4px 8px;
    border:1px solid transparent; border-radius:999px; font-size:9px; font-weight:800;
    letter-spacing:.035em; line-height:1; text-transform:uppercase; white-space:nowrap;
}
.todo-freshness-badge i { font-size:9px; }
.todo-freshness-badge--new { border-color:#cfe0ff; background:linear-gradient(135deg,#f2f7ff,#e6efff); color:#285aa5; }
.todo-freshness-badge--today { border-color:#d9d5ff; background:linear-gradient(135deg,#f5f3ff,#ebe8ff); color:#5b50bb; }
.todo-date-line { display:grid; grid-template-columns:15px auto minmax(0, 1fr); align-items:center; gap:6px; color:#8491a4; font-size:10px; line-height:1.4; }
.todo-date-line > i { color:#94a1b3; text-align:center; }
.todo-date-line time { color:#5f6f86; font-size:10px; text-align:right; white-space:nowrap; }
.todo-completed-date > i { color:#2c9661; }
.u-to-do-list-modal .u-to-do-list-container > .w-100.pt-3 {
    flex:0 0 auto; margin-top:0 !important; padding:11px 17px 14px !important;
    border-top:1px solid #e8edf4; background:#fff;
}
.u-to-do-list-modal .u-access-to-do-list-sec { gap:9px; padding:0; }
.u-to-do-list-modal .todo-add-button {
    display:inline-flex; min-height:44px; flex:0 0 auto; align-items:center; justify-content:center; gap:8px;
    padding:9px 15px; border:0; border-radius:10px; background:#285aa5; color:#fff;
    font-size:13px; font-weight:600; white-space:nowrap; box-shadow:0 3px 8px rgba(40, 90, 165, .16);
}
.u-to-do-list-modal .todo-add-button:hover, .u-to-do-list-modal .todo-add-button:focus-visible { background:#1f4b8f; color:#fff; }
.u-to-do-list-modal .u-access-to-do-list-sec textarea {
    min-width:0; min-height:44px; height:44px; max-height:100px; flex:1 1 auto; padding:10px 13px;
    resize:vertical; border:1px solid #dce4ef; border-radius:10px; color:#2f4058; font-size:13px; font-weight:400; box-shadow:none;
}
.u-to-do-list-modal .u-access-to-do-list-sec textarea:focus { border-color:#8eace0; box-shadow:0 0 0 3px rgba(63, 111, 190, .11); }
.u-to-do-list-modal .u-to-do-list-section > .u-to-do-list-title:last-child {
    min-height:56px; justify-content:flex-end; padding:8px 17px; border-top:1px solid #e8edf4; background:#fff;
}
.u-to-do-list-modal .u-done-btn {
    display:inline-flex; min-height:36px; align-items:center; justify-content:center; gap:7px; padding:7px 14px;
    border:1px solid #dce4ef; border-radius:9px; background:#f7f9fc !important; color:#56677f; font-size:12px; font-weight:600;
}
.u-to-do-list-modal .u-done-btn:hover { background:#eef3fa !important; color:#304c73; }
.todo-empty-state { display:flex; min-height:150px; flex:1 0 130px; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:#8290a5; text-align:center; }
.todo-empty-state > i { margin-bottom:3px; color:#91a6c4; font-size:27px; }
.todo-empty-state > span { color:#52647d; font-size:14px; font-weight:600; }
.todo-empty-state > small { color:#8a97a9; font-size:12px; }
.u-open-to-do-list-factor {
    top:128px !important; right:12px !important; z-index:100 !important;
    display:grid; box-sizing:border-box; width:42px; min-width:42px; height:42px; min-height:42px;
    place-items:center; padding:0 !important;
    border:1px solid rgba(255,255,255,.55) !important; border-radius:12px !important;
    background:#214f94 !important; color:#fff !important; font-size:17px; line-height:1;
    box-shadow:0 3px 10px rgba(27,61,112,.2); transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.u-open-to-do-list-factor:hover { background:#193f7a !important; transform:translateX(-2px); box-shadow:0 5px 13px rgba(27,61,112,.24); }
.n-chat-btn {
    top:75px !important; right:12px !important; z-index:100 !important;
    box-sizing:border-box; width:42px !important; min-width:42px !important; height:42px; min-height:42px;
    padding:0 !important; border:1px solid rgba(255,255,255,.55) !important; border-radius:12px !important;
    box-shadow:0 3px 10px rgba(65,55,155,.2); transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.n-chat-btn:hover { transform:translateX(-2px); box-shadow:0 5px 13px rgba(65,55,155,.24); }
.n-chat-btn p { display:none !important; }
.n-chat-btn .n-chat-btn-icon { margin:0 !important; font-size:18px !important; }
.factor-edit-order-btn {
    position:fixed;
    top:181px; right:12px; z-index:100;
    display:grid; place-items:center; padding:0;
    box-sizing:border-box; width:42px; min-width:42px; height:42px; min-height:42px;
    border:1px solid rgba(255,255,255,.55); border-radius:12px;
    background:#285aa5; color:#fff;
    font-size:17px; box-shadow:0 3px 10px rgba(27,61,112,.2);
    transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.factor-edit-order-btn:hover { background:#1f4b8f; color:#fff; transform:translateX(-2px); box-shadow:0 5px 13px rgba(27,61,112,.24); }
.n-chat-btn .u-caht-num,
.u-open-to-do-list-factor .u-to-do-list-num {
    position:absolute !important;
    top:-6px !important;
    right:-6px !important;
    left:auto;
    display:flex;
    width:18px;
    height:18px;
    border:2px solid #fff;
    border-radius:50%;
    background:#e53945;
    color:#fff;
    font-size:9px;
    font-weight:700;
    line-height:1;
    box-shadow:0 2px 6px rgba(37, 47, 68, .18);
}
.u-open-to-do-list-factor .u-to-do-list-num > .api-count-todo { display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.factor-edit-order-btn:focus-visible,
.u-open-to-do-list-factor:focus-visible,
.n-chat-btn:focus-visible { outline:3px solid rgba(49,104,202,.28); outline-offset:2px; }
@media (max-width:760px) {
    .n-chat-btn, .u-open-to-do-list-factor, .factor-edit-order-btn { right:8px !important; width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important; }
    .u-open-to-do-list-factor { top:125px !important; }
    .factor-edit-order-btn { top:175px; }
}
@media (max-height:500px) {
    .n-chat-btn { top:24px !important; }
    .u-open-to-do-list-factor { top:76px !important; }
    .factor-edit-order-btn { top:128px; }
}

/* Give the invoice's floating shortcuts a clear, inset dock instead of three
   controls appearing to cling to the viewport edge. */
body:has(.factor-edit-order-btn)::after {
    content:"";
    position:fixed;
    top:66px;
    right:8px;
    z-index:99;
    width:64px;
    height:164px;
    border:1px solid rgba(255,255,255,.82);
    border-radius:21px;
    background:rgba(247,250,255,.88);
    box-shadow:0 8px 24px rgba(24,47,86,.16), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    pointer-events:none;
}
body:has(.factor-edit-order-btn) .n-chat-btn,
body:has(.factor-edit-order-btn) .u-open-to-do-list-factor,
body:has(.factor-edit-order-btn) .factor-edit-order-btn {
    right:18px !important;
    z-index:100 !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    border:1px solid rgba(255,255,255,.82) !important;
    border-radius:13px !important;
    box-shadow:0 4px 11px rgba(30,48,78,.2), 0 1px 2px rgba(30,48,78,.12) !important;
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body:has(.factor-edit-order-btn) .n-chat-btn { top:75px !important; }
body:has(.factor-edit-order-btn) .u-open-to-do-list-factor { top:128px !important; }
body:has(.factor-edit-order-btn) .factor-edit-order-btn { top:181px !important; }
body:has(.factor-edit-order-btn) .n-chat-btn:hover,
body:has(.factor-edit-order-btn) .u-open-to-do-list-factor:hover,
body:has(.factor-edit-order-btn) .factor-edit-order-btn:hover {
    transform:translateY(-2px) !important;
    filter:brightness(1.04);
    box-shadow:0 7px 15px rgba(30,48,78,.24), 0 2px 4px rgba(30,48,78,.12) !important;
}
body:has(.factor-edit-order-btn) .n-chat-btn .u-caht-num,
body:has(.factor-edit-order-btn) .u-open-to-do-list-factor .u-to-do-list-num {
    top:-4px !important;
    right:-4px !important;
    width:17px;
    height:17px;
    border-width:2px;
}
@media (max-width:760px) {
    body:has(.factor-edit-order-btn)::after {
        top:66px;
        right:6px;
        width:60px;
        height:156px;
    }
    body:has(.factor-edit-order-btn) .n-chat-btn,
    body:has(.factor-edit-order-btn) .u-open-to-do-list-factor,
    body:has(.factor-edit-order-btn) .factor-edit-order-btn {
        right:16px !important;
        width:40px !important;
        min-width:40px !important;
        height:40px !important;
        min-height:40px !important;
    }
    body:has(.factor-edit-order-btn) .u-open-to-do-list-factor { top:125px !important; }
    body:has(.factor-edit-order-btn) .factor-edit-order-btn { top:175px !important; }
}
@media (max-height:500px) {
    body:has(.factor-edit-order-btn)::after { top:15px; height:164px; }
    body:has(.factor-edit-order-btn) .n-chat-btn { top:24px !important; }
    body:has(.factor-edit-order-btn) .u-open-to-do-list-factor { top:76px !important; }
    body:has(.factor-edit-order-btn) .factor-edit-order-btn { top:128px !important; }
}

/* Movable quick-action dock on invoice pages. The grip is the only drag target,
   so the chat, task and edit shortcuts keep their normal click behavior. */
.factor-floating-dock {
    position:fixed;
    top:100px;
    right:16px;
    z-index:1030;
    display:none;
    width:62px;
    box-sizing:border-box;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:7px;
    border:1px solid rgba(255,255,255,.88);
    border-radius:20px;
    background:rgba(247,250,255,.92);
    box-shadow:0 9px 24px rgba(24,47,86,.2), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:.58;
    transition:opacity .18s ease, box-shadow .18s ease;
    touch-action:none;
    user-select:none;
    max-height:calc(100vh - 16px);
    overflow-y:auto;
}
.factor-floating-dock.is-ready { display:flex; }
.factor-floating-dock:hover,
.factor-floating-dock:focus-within,
.factor-floating-dock.is-dragging { opacity:1; }
body:has(.factor-floating-dock)::after { display:none !important; }
.factor-floating-dock__handle {
    display:flex;
    width:42px;
    height:20px;
    min-height:20px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#8091ac;
    cursor:grab;
    touch-action:none;
}
.factor-floating-dock__handle:hover { background:#e8eef8; color:#315b9b; }
.factor-floating-dock.is-dragging { box-shadow:0 14px 30px rgba(24,47,86,.28), inset 0 1px 0 rgba(255,255,255,.95); }
.factor-floating-dock.is-dragging .factor-floating-dock__handle { cursor:grabbing; }
.factor-floating-dock__handle:focus-visible { outline:3px solid rgba(49,104,202,.3); outline-offset:1px; }
body .factor-floating-dock .n-chat-btn,
body .factor-floating-dock .u-open-to-do-list-factor,
body .factor-floating-dock .factor-edit-order-btn {
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    z-index:auto !important;
    display:grid !important;
    flex:0 0 42px;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    place-items:center;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.78) !important;
    border-radius:13px !important;
    box-shadow:0 4px 11px rgba(30,48,78,.2), 0 1px 2px rgba(30,48,78,.12) !important;
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body .factor-floating-dock .n-chat-btn:hover,
body .factor-floating-dock .u-open-to-do-list-factor:hover,
body .factor-floating-dock .factor-edit-order-btn:hover {
    transform:translateY(-2px) !important;
    filter:brightness(1.04);
    box-shadow:0 7px 15px rgba(30,48,78,.24), 0 2px 4px rgba(30,48,78,.12) !important;
}
.factor-floating-dock .n-chat-btn p { display:none !important; }
.factor-floating-dock .n-chat-btn .n-chat-btn-icon { margin:0 !important; font-size:18px !important; }
.factor-floating-dock .n-chat-btn .u-caht-num,
.factor-floating-dock .u-open-to-do-list-factor .u-to-do-list-num {
    top:-4px !important;
    right:-4px !important;
    width:17px;
    height:17px;
    border-width:2px;
}
.factor-floating-dock .factor-edit-order-btn:focus-visible,
.factor-floating-dock .u-open-to-do-list-factor:focus-visible,
.factor-floating-dock .n-chat-btn:focus-visible { outline:3px solid rgba(49,104,202,.28); outline-offset:2px; }
@media (max-width:760px) {
    .factor-floating-dock { width:60px; padding:6px; gap:7px; border-radius:18px; }
    body .factor-floating-dock .n-chat-btn,
    body .factor-floating-dock .u-open-to-do-list-factor,
    body .factor-floating-dock .factor-edit-order-btn { width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important; flex-basis:40px; }
    .factor-floating-dock__handle { width:40px; }
}
@media (max-width:760px) {
    .u-to-do-list-modal { padding:7px; }
    .u-to-do-list-modal .u-to-do-list-section { width:100%; height:100%; border-radius:14px; }
    .u-to-do-list-modal .u-to-do-list-section > .u-to-do-list-title { min-height:58px; padding:9px 12px; }
    .todo-modal-heading p { display:none; }
    .u-to-do-list-modal .todo-tabs { gap:4px; padding:8px 9px 0; }
    .u-to-do-list-modal .todo-tabs .nav-link { min-height:37px; gap:6px; padding:7px 9px; font-size:12px; }
    .u-to-do-list-modal .u-to-do-list-box { gap:8px; padding:9px 9px 6px; }
    .todo-task-layout { grid-template-columns:38px minmax(0,1fr); gap:8px; }
    .todo-task-actions { grid-row:1 / span 2; align-self:start; }
    .todo-task-sender { justify-content:center; font-size:0; }
    .todo-task-sender i { font-size:14px; }
    .todo-action-group { flex-direction:column; }
    .todo-task-content, .todo-task-details { grid-column:2; }
    .todo-task-details { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:9px; row-gap:5px; }
    .todo-task-details > .todo-status-badges { grid-row:1 / span 2; }
    .u-to-do-list-modal .u-to-do-list-container > .w-100.pt-3 { padding:9px 9px 11px !important; }
    .u-to-do-list-modal .u-access-to-do-list-sec { gap:7px; }
    .u-to-do-list-modal .todo-add-button { min-height:42px; padding:8px 11px; }
    .u-to-do-list-modal .todo-add-button span { display:none; }
}
@media (max-width:420px) {
    .todo-task-layout { grid-template-columns:32px minmax(0,1fr); gap:7px; }
    .u-to-do-list-modal .todo-action-btn, .todo-complete-control { width:29px; height:29px; flex-basis:29px; }
    .todo-task-details { grid-template-columns:1fr; }
    .todo-task-details > .todo-status-badges { grid-row:auto; }
    .u-to-do-list-modal .todo-date-line time { font-size:9px; }
}

/* Admin order update notifications */
.notifContainer {
    position: fixed !important;
    inset: 88px auto auto 50%;
    z-index: 1055 !important;
    width: min(1180px, calc(100vw - 32px)) !important;
    max-height: min(72vh, 620px);
    overflow: hidden !important;
    padding: 0 !important;
    border: 1px solid #e0e7f1;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 16px 42px rgba(20, 39, 75, .18), 0 3px 10px rgba(20, 39, 75, .06) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px) scale(.99);
    transform-origin: top center;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.notifContainer.active-note {
    inset-block-start: 88px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid #e8edf5;
    background: linear-gradient(115deg, #f8faff 0%, #fff 72%);
}
.notif-panel-heading,
.notif-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.notif-panel-icon,
.notif-empty-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #eaf1ff;
    color: #2858a3;
    font-size: 1rem;
}
.notif-panel-header h2 {
    margin: 0;
    color: #183864;
    font-size: .98rem;
    font-weight: 750;
    letter-spacing: -.01em;
}
.notif-panel-header p {
    margin: 3px 0 0;
    color: #758198;
    font-size: .78rem;
}
.notif-panel-count {
    padding: 7px 11px;
    border: 1px solid #e5ebf5;
    border-radius: 999px;
    background: #fff;
    color: #54647d;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.notif-panel-count #orderNotifCount {
    display: inline-block;
    min-width: 1.25rem;
    color: #2858a3;
    text-align: center;
}
.notif-panel-actions .closeNotif {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e4eaf3;
    border-radius: 9px;
    background: #fff;
    color: #65748b;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.notif-panel-actions .closeNotif:hover {
    border-color: #f2c7c7;
    background: #fff5f5;
    color: #c53b45;
}
.notif-panel-content { padding: 10px; }
.notifTable {
    /* This wrapper can shrink to zero on the dashboard because the list is
       populated after the page layout. Keep the scroll viewport full-width. */
    display: block;
    width: 100% !important;
    min-width: 0;
    max-height: calc(min(72vh, 620px) - 82px);
    overflow: auto;
    border: 0;
    border-radius: 10px;
    background: #f6f8fc;
    scrollbar-color: #b9c8dd transparent;
    scrollbar-width: thin;
}
.notif-order-list { display: grid; width: 100%; min-width: 0; gap: 8px; padding: 1px; }
.notif-order-card {
    display: grid;
    grid-template-columns: minmax(190px, 1.15fr) minmax(0, 3.5fr) auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 15px;
    padding: 12px 15px;
    border: 1px solid #e5ebf4;
    border-inline-start: 3px solid #e7a928;
    border-radius: 11px;
    background: #fff;
    color: #34445c;
    box-shadow: 0 2px 7px rgba(28, 50, 83, .045);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.notif-order-card:hover { border-color: #d5dfed; box-shadow: 0 5px 14px rgba(28, 50, 83, .08); }
.notif-order-card-header { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
.notif-order-quick-actions { display: flex; align-items: center; justify-content: center; }
.notif-order-quick-actions > .d-flex { flex-direction: row !important; align-items: center; gap: 4px; }
.notif-order-quick-actions > .d-flex > span { color: #52637b; font-size: .78rem; font-weight: 700; }
.notif-order-quick-actions a { width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; font-size: .82rem !important; }
.notif-order-identity { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 5px 14px; }
.notif-order-number { color: #203c67; font-size: .92rem; font-weight: 750; }
.notif-order-number > div { display: flex !important; flex-direction: row !important; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; }
.notif-order-number .btn { min-height: 25px !important; margin: 0 !important; padding: 3px 8px !important; font-size: .72rem !important; }
.notif-order-customer { color: #66748a; font-size: .8rem; font-weight: 600; }
.notif-order-summary { display: flex; min-width: 0; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 6px 10px; }
.notif-order-summary .notif-order-field { display: flex; align-items: center; gap: 5px; }
.notif-order-field-label { display: block; color: #8290a4; font-size: .65rem; font-weight: 700; line-height: 1.2; }
.notif-order-field-value { color: #34445c; font-size: .77rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.notif-order-status .notif-order-field-value { display: flex; align-items: center; gap: 5px; }
.notif-order-status img { width: 24px !important; height: 24px !important; object-fit: contain !important; }
.notif-order-payment .notif-order-field-value { padding: 4px 8px; border-radius: 999px; background: #f1f5f9; color: #52637b; font-size: .7rem; }
.notif-order-details { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px 12px; padding: 0; }
.notif-order-field { min-width: 0; }
.notif-order-details .notif-order-field-value .date-box { padding: 0 !important; background: transparent !important; font-size: inherit !important; }
.notif-order-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding-inline-start: 14px; border-inline-start: 1px solid #edf1f6; }
#OrderNotif .notif-order-actions > a {
    display: inline-flex !important;
    width: auto !important;
    min-width: 76px;
    max-width: 100%;
    min-height: 34px;
    height: auto !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 1px solid #174ca5;
    border-radius: 8px;
    background: #174ca5;
    color: #fff;
    box-shadow: 0 2px 5px rgba(23, 76, 165, .18);
    font-size: .76rem !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
#OrderNotif .notif-order-actions > a:hover { background: #103d88; border-color: #103d88; }
.notif-order-tool-group { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.notif-order-tool-label { margin-inline-end: 3px; color: #8290a4; font-size: .65rem; font-weight: 700; }
.notif-order-tool-group .btn,
.notif-order-tool-group a {
    display: inline-flex !important;
    width: auto !important;
    min-width: 30px;
    min-height: 29px !important;
    height: 29px;
    max-width: none;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    white-space: nowrap;
}
.notif-order-tool-group .btn i,
.notif-order-tool-group a i { margin: 0 !important; }
.notif-order-tool-group .view-factor-btn { width: auto !important; }
.notif-empty {
    display: flex;
    min-height: 130px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: #64748b;
    text-align: center;
}
.notif-empty .notif-empty-icon { margin-bottom: 4px; background: #eaf7f0; color: #16865c; font-size: 1.35rem; }
.notif-empty strong { color: #263b59; font-size: 1rem; }
.notif-empty > span:last-child { font-size: .86rem; }
.bellIcon > a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; transition: background .15s ease; }
.bellIcon > a:hover { background: #fff7df; }
.bellIcon .notifLength-bell { min-width: 19px; height: 19px; padding: 1px 5px !important; border: 2px solid #fff; font-size: .68rem; line-height: 15px; text-align: center; }
@media (max-width: 767.98px) {
    .notifContainer { inset: 76px auto auto 50% !important; width: calc(100vw - 20px) !important; max-height: 82dvh; border-radius: 13px !important; }
    .notifContainer.active-note { inset-block-start: 76px !important; transform: translate(-50%, 0) scale(1); }
    .notifContainer:not(.active-note) { transform: translate(-50%, -8px) scale(.99); }
    .notif-panel-header { align-items: center; gap: 8px; padding: 10px 12px; }
    .notif-panel-heading { align-items: center; gap: 8px; }
    .notif-panel-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; }
    .notif-panel-header h2 { font-size: .88rem; }
    .notif-panel-header p { max-width: 52vw; font-size: .68rem; }
    .notif-panel-actions { gap: 5px; }
    .notif-panel-count { padding: 5px 7px; font-size: .65rem; }
    .notif-panel-actions .closeNotif { flex-basis: 30px; width: 30px; height: 30px; }
    .notif-panel-content { padding: 7px; }
    .notifTable { max-height: calc(82dvh - 70px); }
    .notif-order-card { grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; padding: 10px; }
    .notif-order-card-header { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; }
    .notif-order-summary { justify-content: flex-start; }
    .notif-order-details { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 0; }
    .notif-order-actions { grid-column: 1 / -1; justify-content: flex-start; padding: 8px 0 0; border-inline-start: 0; border-top: 1px solid #f0f2f6; }
}
@media (max-width: 420px) {
    .notif-order-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .notif-order-card-header { align-items: flex-start; flex-direction: column; }
    .notif-order-identity { gap: 3px 9px; }
    .notif-order-number { font-size: .82rem; }
    .notif-order-customer { font-size: .73rem; }
    .notif-order-field-value { font-size: .72rem; }
}

/* Keep the superadmin account tables balanced and readable. */
.superadmin-dashboard-home > .mainSection {
    align-items: stretch;
}

.superadmin-dashboard-home > .mainSection > #superadmin-errors-alert,
.superadmin-dashboard-home > .mainSection > section[aria-labelledby="superadmin-ticket-overview-title"] {
    width: 100%;
    box-sizing: border-box;
}

.superadmin-dashboard-home .mainSection .row.w-100 {
    width: auto !important;
}

.superadmin-dashboard-home .mainSection .row.w-100 > [class*="col-"] {
    display: flex;
}

.superadmin-dashboard-home .mainSection .row.w-100 > [class*="col-"] > .card {
    width: 100%;
}

.superadmin-dashboard .superadmin-account-overview > [class*="col-"] {
    display: flex;
}

.superadmin-dashboard .superadmin-account-overview .card {
    width: 100%;
}

.superadmin-dashboard .superadmin-recent-users-table,
.superadmin-dashboard .superadmin-role-count-table {
    width: 100%;
    table-layout: fixed;
}

.superadmin-dashboard .superadmin-recent-users-table {
    min-width: 860px;
}

.superadmin-dashboard .superadmin-recent-users-table th:nth-child(1) { width: 16%; }
.superadmin-dashboard .superadmin-recent-users-table th:nth-child(2) { width: 17%; }
.superadmin-dashboard .superadmin-recent-users-table th:nth-child(3) { width: 16%; }
.superadmin-dashboard .superadmin-recent-users-table th:nth-child(4) { width: 12%; }
.superadmin-dashboard .superadmin-recent-users-table th:nth-child(5) { width: 20%; }
.superadmin-dashboard .superadmin-recent-users-table th:nth-child(6) { width: 19%; }

.superadmin-dashboard .superadmin-recent-users-table th,
.superadmin-dashboard .superadmin-recent-users-table td {
    vertical-align: middle;
}

.superadmin-dashboard .superadmin-recent-users-table td:nth-child(1),
.superadmin-dashboard .superadmin-recent-users-table td:nth-child(3) {
    overflow-wrap: anywhere;
}

.superadmin-dashboard .superadmin-role-count-table th:first-child,
.superadmin-dashboard .superadmin-role-count-table td:first-child {
    width: 76%;
}

.superadmin-dashboard .superadmin-role-count-table th:last-child,
.superadmin-dashboard .superadmin-role-count-table td:last-child {
    width: 24%;
}

#main.main .container-tools-cell {
    white-space: nowrap;
}

#main.main .container-tools-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

#main.main .container-tools-actions > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0;
    border-radius: 7px;
    line-height: 1;
}

#main.main .container-tools-actions > .btn i {
    font-size: 15px;
}

/* Shared action-column layout for Basic Information tables. */
body.basicinfo-tools-page #main.main .basicinfo-tools-heading {
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

body.basicinfo-tools-page #main.main .basicinfo-tools-cell {
    min-width: 112px;
    padding-inline: .45rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

body.basicinfo-tools-page #main.main .basicinfo-tool-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    margin: .15rem !important;
    padding: 0 !important;
    border-radius: 8px;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
}

body.basicinfo-tools-page #main.main .basicinfo-tool-button > i {
    display: block;
    margin: 0 !important;
    font-size: 15px;
    line-height: 1;
}

@media (max-width: 575.98px) {
    body.basicinfo-tools-page #main.main .basicinfo-tools-cell {
        min-width: 96px;
        padding-inline: .25rem !important;
    }

    body.basicinfo-tools-page #main.main .basicinfo-tool-button {
        flex-basis: 32px;
        width: 32px;
        min-width: 32px;
        height: 32px;
        margin: .1rem !important;
    }
}

/* Keep the shared section-heading underline above page-level styles. */
#main.main .nav.nav-tabs.nav-tabs-bordered {
    border-bottom: 2px solid #ebeef4 !important;
}

#main.main .nav.nav-tabs.nav-tabs-bordered > .nav-item > .nav-link.active,
#main.main .nav.nav-tabs.nav-tabs-bordered > .nav-item.show > .nav-link.active,
#main.main .nav.nav-tabs.nav-tabs-bordered > .nav-link.active {
    margin-bottom: -2px !important;
    border: 0 !important;
    border-bottom: 2px solid #4154f1 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    color: #4154f1 !important;
}

#main.main :is(
    .user-management-address-section-header,
    .basicinfo-edit-title,
    .logestic-form-section > h5,
    .customer-delivery-terms-heading,
    .customer-payment-terms-heading,
    .salesman-heading,
    .customer-design-section-title,
    .user-management-address-subheading,
    .user-management-detail-section > :is(h2, h3, h4, h5),
    .user-management-form-section > h5
) {
    position: relative !important;
    border-bottom: 2px solid #ebeef4 !important;
}

#main.main :is(
    .user-management-address-section-header,
    .basicinfo-edit-title,
    .logestic-form-section > h5,
    .customer-delivery-terms-heading,
    .customer-payment-terms-heading,
    .salesman-heading,
    .customer-design-section-title,
    .user-management-address-subheading,
    .user-management-detail-section > :is(h2, h3, h4, h5),
    .user-management-form-section > h5
)::after {
    position: absolute !important;
    inset-inline-start: 0 !important;
    bottom: -2px !important;
    width: clamp(76px, 22%, 140px) !important;
    height: 2px !important;
    background: #4154f1 !important;
    content: "" !important;
    pointer-events: none;
}

/* Modal form sections use filled heading bars, without the edit-page underline. */
#main.main .modal .modal-body :is(
    .user-management-address-section-header,
    .basicinfo-edit-title,
    .logestic-form-section > h5,
    .customer-delivery-terms-heading,
    .customer-payment-terms-heading,
    .salesman-heading,
    .customer-design-section-title,
    .user-management-address-subheading,
    .user-management-detail-section > :is(h2, h3, h4, h5),
    .user-management-form-section > h5
) {
    border-bottom: 0 !important;
}

#main.main .modal .modal-body :is(
    .user-management-address-section-header,
    .basicinfo-edit-title,
    .logestic-form-section > h5,
    .customer-delivery-terms-heading,
    .customer-payment-terms-heading,
    .salesman-heading,
    .customer-design-section-title,
    .user-management-address-subheading,
    .user-management-detail-section > :is(h2, h3, h4, h5),
    .user-management-form-section > h5
)::after {
    display: none !important;
    content: none !important;
}

/* Basic Information modal forms share field widths and gutters across legacy layouts. */
body.basicinfo-tools-page #main.main .modal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 1040px !important;
    margin: 1rem auto;
}
body.basicinfo-tools-page #main.main .modal .modal-header {
    padding: 1rem 1.5rem !important;
    margin: 0 !important;
    border-radius: var(--ui-radius-card) var(--ui-radius-card) 0 0 !important;
    background: var(--panel-table-header-bg) !important;
    color: #fff;
}
body.basicinfo-tools-page #main.main .modal .modal-title {
    margin: 0;
    color: #fff !important;
    font-size: 1.5rem !important;
}
body.basicinfo-tools-page #main.main .modal .modal-header > button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    flex: 0 0 38px;
}
body.basicinfo-tools-page #main.main .modal .modal-body {
    padding: 1.5rem !important;
}
body.basicinfo-tools-page #main.main .modal .modal-body .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    width: 100%;
    margin: 0 0 1rem !important;
}
body.basicinfo-tools-page #main.main .modal .modal-body .row:has(> [class*="col-"]):not(:has(> label)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
body.basicinfo-tools-page #main.main .modal .modal-body .row > [class*="col-"] {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}
body.basicinfo-tools-page #main.main .modal .modal-body .row:has(> label) {
    display: flex;
    flex-direction: column;
    gap: 0;
}
body.basicinfo-tools-page #main.main .modal .modal-body label:not(.btn):not(.form-check-label):not(.customer-picker-option):not(.model-add-information) {
    display: block;
    width: 100% !important;
    margin: 0 0 .4rem !important;
    padding: 0;
    text-indent: 0;
    color: #34445a;
    font-size: .9rem;
    font-weight: 600;
}
body.basicinfo-tools-page #main.main .modal .u-input-contain {
    width: 100% !important;
    min-width: 0;
    align-items: stretch;
}
body.basicinfo-tools-page #main.main .modal :is(.form-control, .form-select) {
    width: 100% !important;
    min-width: 0;
    min-height: 42px;
    border-color: #a5aac4;
    border-radius: var(--ui-radius-input) !important;
}
body.basicinfo-tools-page #main.main .modal .modal-footer {
    gap: .75rem;
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--panel-table-border);
    background: #f4f5ff;
}
body.basicinfo-tools-page #main.main .modal .modal-footer > .btn {
    min-width: 90px;
    min-height: 40px;
    margin: 0;
}
@media (max-width: 575.98px) {
    body.basicinfo-tools-page #main.main .modal .modal-body .row:has(> [class*="col-"]):not(:has(> label)) {
        grid-template-columns: minmax(0, 1fr);
    }
    body.basicinfo-tools-page #main.main .modal :is(.modal-body, .modal-header, .modal-footer) {
        padding: 1rem !important;
    }
}

/* Product creation keeps related fields together instead of wrapping odd columns. */
body.basicinfo-tools-page #main.main .product-create-modal .product-form-group {
    margin: 0 0 16px;
    border: 1px solid #d8deed;
    border-radius: 12px;
    overflow: hidden;
}
body.basicinfo-tools-page #main.main .product-create-modal .product-form-group:last-child { margin-bottom: 0; }
body.basicinfo-tools-page #main.main .product-create-modal .product-form-heading {
    margin: 0;
    padding: 12px 16px;
    background: #d5d9fc;
    color: #082970;
    font-size: .95rem;
    font-weight: 600;
    border-radius: 0 !important;
    border: 0;
}
body.basicinfo-tools-page #main.main .product-create-modal .product-form-heading::after { content: none; }
body.basicinfo-tools-page #main.main .product-create-modal .product-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
}
body.basicinfo-tools-page #main.main .product-create-modal .product-form-field { min-width: 0; }
body.basicinfo-tools-page #main.main .product-create-modal .product-form-details > :last-child { grid-column: 1 / -1; }
body.basicinfo-tools-page #main.main .product-create-modal .product-form-dimensions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 575.98px) {
    body.basicinfo-tools-page #main.main .product-create-modal .product-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Basic Information uses the same panel tokens and action variants as User Management. */
body.basicinfo-tools-page #main.main .user-image-upload-card {
    display: flex;
    width: 100%;
    min-height: 146px;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #d9dfef;
    border-radius: var(--ui-radius-card);
    background: #f7f8ff;
}
body.basicinfo-tools-page #main.main .user-image-preview-frame {
    position: relative;
    display: grid;
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #a5aac4;
    border-radius: var(--ui-radius-card);
    background: #fff;
}
body.basicinfo-tools-page #main.main .user-image-placeholder {
    color: #7583ad;
    font-size: 3.25rem;
}
body.basicinfo-tools-page #main.main .user-image-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.basicinfo-tools-page #main.main .user-image-additional-previews {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: .45rem;
}
body.basicinfo-tools-page #main.main .user-image-additional-previews[hidden] {
    display: none !important;
}
body.basicinfo-tools-page #main.main .user-image-additional-previews img {
    width: 52px;
    height: 52px;
    border: 1px solid #d9dfef;
    border-radius: var(--ui-radius-control);
    background: #fff;
    object-fit: cover;
}
body.basicinfo-tools-page #main.main :is(.user-image-preview-frame img, .user-image-placeholder)[hidden] {
    display: none;
}
body.basicinfo-tools-page #main.main .user-image-upload-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .75rem;
}
body.basicinfo-tools-page #main.main .user-image-upload-copy h3 {
    width: 100%;
    margin: 0;
    color: #253b72;
    font-size: 1rem;
    font-weight: 650;
}
body.basicinfo-tools-page #main.main .user-image-upload-copy p {
    width: 100%;
    margin: 0 0 .2rem;
    color: #667085;
    font-size: .875rem;
}
body.basicinfo-tools-page #main.main .user-image-upload-actions {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}
body.basicinfo-tools-page #main.main .user-image-upload-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: .45rem;
    border-radius: var(--ui-radius-control);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .16);
}
body.basicinfo-tools-page #main.main .user-image-file-name {
    overflow: hidden;
    max-width: min(420px, 55vw);
    color: #596780;
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.basicinfo-tools-page #main.main .model-create-modal .model-image-upload-card,
body.basicinfo-tools-page #main.main .model-edit-body > .model-image-upload-card {
    margin-bottom: 0;
}
body.basicinfo-tools-page #main.main .model-create-modal .model-image-preview-list.is-empty {
    display: none !important;
}
body.basicinfo-tools-page #main.main .model-create-modal .modal-body .model-add-information {
    display: flex !important;
    width: 100% !important;
    min-height: 46px;
    align-items: center;
    gap: .6rem;
    margin: 0 !important;
    padding: .75rem 1rem !important;
    border: 1px solid #a5aac4;
    border-radius: .65rem;
    background: #f4f5ff;
    color: #34445a;
    font-weight: 600;
    text-indent: 0 !important;
    cursor: pointer;
}
body.basicinfo-tools-page #main.main .model-create-modal .modal-body .model-add-information::after {
    display: none !important;
    content: none !important;
}
body.basicinfo-tools-page #main.main .model-create-modal .modal-body .model-add-information > input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin: 0;
    accent-color: #002489;
}
@media (max-width: 575.98px) {
    body.basicinfo-tools-page #main.main .user-image-upload-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

#main.main.basicinfo-edit-page > .u-pagetitle {
    /* u-pagetitle is floated globally; that made the following section start behind it. */
    float: none !important;
}
#main.main.basicinfo-edit-page .u-pagetitle,
#main.main.basicinfo-edit-page .card {
    border-radius: var(--ui-radius-card) !important;
}
#main.main.basicinfo-edit-page form > .card-body {
    padding: 20px !important;
}
#main.main.basicinfo-edit-page .basicinfo-edit-title {
    margin: 0 0 20px !important;
    padding: 0 0 12px !important;
    color: #4154f1;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0 !important;
    background: transparent !important;
}
/* Expand legacy half-width wrappers without changing form markup or field order. */
#main.main.basicinfo-edit-page form > .card-body > :is(.col-6, .col-12),
#main.main.basicinfo-edit-page form > .card > .card-body > :is(.col-6, .col-12) {
    width: 100% !important;
    max-width: none !important;
    padding: 0;
}
#main.main.basicinfo-edit-page form .row:has(> label.col-form-label) {
    display: grid !important;
    grid-template-columns: minmax(160px, 28%) minmax(0, 1fr);
    align-items: center;
    gap: 12px 20px;
    margin: 0 0 16px !important;
}
#main.main.basicinfo-edit-page form .row:has(> label.col-form-label) > :is(label, div) {
    width: auto !important;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding-inline: 0;
}
#main.main.basicinfo-edit-page form .col-form-label {
    color: #444;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: normal;
}
#main.main.basicinfo-edit-page :is(.form-control, .form-select) {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border-radius: var(--ui-radius-input) !important;
}
body.basicinfo-tools-page #main.main .basicinfo-customer-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: auto;
    min-height: 42px;
    padding: .5rem 1rem;
}
#main.main.basicinfo-edit-page .row:has(> .basicinfo-customer-picker-trigger) {
    display: grid;
    grid-template-columns: minmax(160px, 28%) minmax(0, 1fr);
    gap: 12px 20px;
    margin: 0 0 16px;
}
#main.main.basicinfo-edit-page .row > .basicinfo-customer-picker-trigger {
    grid-column: 2;
    justify-self: start;
}
body.basicinfo-tools-page #main.main .basicinfo-customer-picker .modal-dialog {
    max-width: 640px !important;
}
body.basicinfo-tools-page #main.main .basicinfo-customer-picker .modal-body .customer-picker-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    margin: 0 !important;
    cursor: pointer;
}
body.basicinfo-tools-page #main.main .customer-picker-option::after {
    content: none !important;
}
body.basicinfo-tools-page #main.main .customer-picker-option .form-check-input {
    flex: 0 0 1rem;
    margin: 0;
}
@media (max-width: 767.98px) {
    #main.main.basicinfo-edit-page .row:has(> .basicinfo-customer-picker-trigger) {
        grid-template-columns: minmax(0, 1fr);
    }
    #main.main.basicinfo-edit-page .row > .basicinfo-customer-picker-trigger {
        grid-column: 1;
    }
}
#main.main.basicinfo-edit-page .basicinfo-edit-actions {
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px !important;
    margin: 0 !important;
    border-top: 1px solid #e0e5ec;
    background: #fff !important;
    border-radius: 0 0 var(--ui-radius-card) var(--ui-radius-card) !important;
}
#main.main.basicinfo-edit-page .basicinfo-edit-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0 !important;
    padding: 8px 20px;
    border-radius: var(--ui-radius-control) !important;
}
body.basicinfo-tools-page #main.main table.basicinfo-tools-table {
    width: 100% !important;
    table-layout: auto !important;
    border-radius: var(--ui-radius-card) !important;
}
body.basicinfo-tools-page #main.main .basicinfo-tools-table :is(th, td) {
    vertical-align: middle !important;
    overflow-wrap: break-word;
    word-break: normal;
}
body.basicinfo-tools-page #main.main .basicinfo-tools-table .basicinfo-tools-heading,
body.basicinfo-tools-page #main.main .basicinfo-tools-table .basicinfo-tools-cell {
    width: 1% !important;
    white-space: nowrap !important;
}
body.basicinfo-tools-page #main.main .basicinfo-tools-cell form {
    display: inline-block;
    margin: 0;
}
body.basicinfo-tools-page #main.main .basicinfo-tool-button {
    border-radius: var(--ui-radius-icon-box) !important;
}
@media (max-width: 575.98px) {
    #main.main.basicinfo-edit-page form .row:has(> label.col-form-label) {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    #main.main.basicinfo-edit-page form > .card-body {
        padding: 16px !important;
    }
}

/* Match the solid pencil used by User Management edit actions. */
body.basicinfo-tools-page #main.main .basicinfo-tool-edit > i {
    font-family: "Font Awesome 6 Free", FontAwesome !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

/* Stock product management follows the Basic Information table/form system. */
#main.stock-management-page .stock-products-table { width: 100%; min-width: 680px; text-align: center; }
#main.stock-management-page .stock-product-thumbnail {
    width: 64px; height: 64px; object-fit: contain; background: #fff;
    border: 1px solid #dce2ef; border-radius: 8px;
}
#main.stock-management-page .stock-product-actions { display: flex; justify-content: center; align-items: center; gap: 8px; }
#main.stock-management-page .stock-product-actions .btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; margin: 0 !important; }
#main.stock-management-page .stock-product-actions .btn-action-view { background: var(--panel-action-view-bg) !important; border-color: var(--panel-action-view-border) !important; color: var(--panel-action-view-color) !important; }
#main.stock-management-page .stock-product-actions .btn-action-view:hover { background: var(--panel-action-view-bg-hover) !important; }
body.basicinfo-tools-page #main.stock-management-page #largeModal .modal-body .row:has(> .col-12) { grid-template-columns: minmax(0, 1fr); }
body.basicinfo-tools-page #main.stock-management-page #largeModal .modal-body .row:has(> .col-4) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.basicinfo-tools-page #main.stock-management-page #largeModal .modal-body .row:has(> .col-3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.basicinfo-tools-page #main.stock-management-page #largeModal .modal-body label.product-image-dropzone { display: flex; padding: 1rem; }
#main.stock-product-edit-page .stocks-store .u-input-contain { width: 100% !important; min-width: 0; }
#main.stock-product-edit-page .stocks-store .row { --bs-gutter-x: 0; margin-inline: 0; }
#main.stock-product-edit-page .stocks-store label { color: #34445a; font-size: .9rem; font-weight: 600; text-indent: 0; margin-bottom: .4rem; }
#main.stock-product-edit-page .stocks-store li label { font-weight: 400; }
#main.stock-product-edit-page .stocks-store :is(.form-control, .form-select) { min-height: 42px; border-color: #a5aac4; }
#main.stock-product-edit-page .card > .card-header { background: #f4f5ff !important; color: #173b78 !important; padding: 16px 20px; }
#main.stock-product-edit-page .card-header h2 { font-size: 1.1rem; margin: 0; }
#main.stock-product-edit-page .stock-product-form-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid #dce2ef; }
#main.stock-product-edit-page .stock-product-form-actions .btn { min-width: 100px; min-height: 40px; }
@media (max-width: 575.98px) {
    body.basicinfo-tools-page #main.stock-management-page #largeModal .modal-body .row:has(> .col-4),
    body.basicinfo-tools-page #main.stock-management-page #largeModal .modal-body .row:has(> .col-3) { grid-template-columns: minmax(0, 1fr); }
}
#main.stock-management-page .product-image-dropzone::after { content: none !important; }
body.basicinfo-tools-page #main.stock-management-page #largeModal .modal-footer { background: #f4f5ff !important; }

/* Reuse the Basic Information edit-page rhythm for stock product editing. */
#main.main.stock-product-edit-page.basicinfo-edit-page > .pagetitle { float: none !important; margin-bottom: 1rem; }
#main.main.stock-product-edit-page.basicinfo-edit-page .u-pagetitle { border-radius: var(--ui-radius-card) !important; }
#main.main.stock-product-edit-page.basicinfo-edit-page form > .row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem;
    margin: 0 !important; align-items: stretch;
}
#main.main.stock-product-edit-page.basicinfo-edit-page form > .row > [class*="col-"] {
    width: 100% !important; max-width: none !important; min-width: 0; padding: 0;
}
#main.main.stock-product-edit-page.basicinfo-edit-page form .card {
    height: 100%; overflow: hidden; border: 1px solid #dce2ef !important;
    border-radius: 10px 10px 0 0 !important; box-shadow: 0 2px 10px rgba(25, 54, 104, .05);
}
#main.main.stock-product-edit-page .stock-product-card-heading {
    min-height: 54px; display: flex; align-items: center; padding: 12px 20px !important;
    border-bottom: 1px solid #dce2ef; background: #f4f5ff !important; color: #173b78 !important;
    border-radius: 9px 9px 0 0 !important;
}
#main.main.stock-product-edit-page .stock-product-card-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; color: inherit; }
#main.main.stock-product-edit-page .stock-product-image-body { align-items: stretch !important; padding: 20px !important; }
#main.main.stock-product-edit-page .stock-product-upload-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    border: 1px solid #e0e5ec; border-radius: var(--ui-radius-control); background: #f8f9fc;
}
#main.main.stock-product-edit-page .stock-product-upload-row .user-img-box { width: 64px; height: 64px; display: grid; place-items: center; }
#main.main.stock-product-edit-page .stock-product-upload-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: auto !important; min-width: 0; max-width: max-content; flex: 0 0 auto;
    min-height: 40px; margin: 0; cursor: pointer; white-space: nowrap;
}
#main.main.stock-product-edit-page .stock-product-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#main.main.stock-product-edit-page .galleryContainer { width: 100%; max-width: 100%; margin-top: 16px; }
#main.main.stock-product-edit-page .stocks-store .row { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 16px !important; }
#main.main.stock-product-edit-page .stocks-store .row > .col { width: 100%; padding: 0; }
#main.main.stock-product-edit-page .basicinfo-edit-actions { width: 100%; margin-top: 4px !important; }
@media (max-width: 767.98px) {
    #main.main.stock-product-edit-page.basicinfo-edit-page form > .row { grid-template-columns: minmax(0, 1fr); }
}

#main.solidrock-products-list-page .solidrock-products-list-actions {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
}
#main.solidrock-products-list-page .solidrock-products-list-actions .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-width: 88px; min-height: 38px; padding: 7px 12px; margin: 0;
    border-radius: var(--ui-radius-icon-box, 8px); font-size: .875rem; font-weight: 600;
    line-height: 1.25; box-shadow: 0 2px 5px rgba(20, 42, 82, .14);
}
#main.solidrock-products-list-page .solidrock-products-list-actions .btn i { font-size: 1rem; }
#main.solidrock-products-list-page .solidrock-products-list-actions .btn-action-general {
    color: #fff !important; background: var(--panel-action-edit-bg) !important;
    border-color: var(--panel-action-edit-border) !important;
}
#main.solidrock-products-list-page .solidrock-products-list-actions .btn-action-general:hover,
#main.solidrock-products-list-page .solidrock-products-list-actions .btn-action-general:focus-visible {
    color: #fff !important; background: var(--panel-action-edit-bg-hover) !important;
    border-color: var(--panel-action-edit-bg-hover) !important;
}
#main.solidrock-products-list-page .solidrock-products-list-actions .btn-action-view {
    border-radius: var(--ui-radius-icon-box, 8px) !important;
}
@media (max-width: 575.98px) {
    #main.solidrock-products-list-page .solidrock-products-list-actions { gap: 6px; }
    #main.solidrock-products-list-page .solidrock-products-list-actions .btn { min-width: 78px; padding-inline: 9px; }
}

/* Keep the stock image and details cards at their content height. */
#main.main.stock-product-edit-page.basicinfo-edit-page form > .row { align-items: start !important; }
#main.main.stock-product-edit-page.basicinfo-edit-page form > .row > [class*="col-"] > .card { height: auto !important; min-height: 0; }
#main.main.stock-product-edit-page .card-body > .tab-content,
#main.main.stock-product-edit-page .card-body .stocks-store { height: auto !important; min-height: 0; }
#main.main.stock-product-edit-page .card-body .stocks-store { display: block !important; }
#main.main.stock-product-edit-page .show-ele > .show_item { height: 15rem; }
#main.main.stock-product-edit-page .show_item > img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
#main.main.stock-product-edit-page .stocks-store .stock-product-description-row { margin: 0 0 20px !important; }
#main.main.stock-product-edit-page .stock-product-description-row textarea {
    min-height: 120px; height: 120px !important; resize: vertical;
}
#main.main.stock-product-edit-page .card-body:has(.stocks-store) { padding: 20px 20px 28px !important; }

/* SolidRock Products pages share the Basic Information page frame and list styling. */
#main.solidrock-products-list-page > .pagetitle,
#main.solidrock-category-products-page > .pagetitle,
#main.solidrock-product-detail-page > .pagetitle {
    float: none !important;
    margin: 0 0 16px !important;
}
#main.solidrock-products-list-page .u-pagetitle,
#main.solidrock-category-products-page .u-pagetitle,
#main.solidrock-product-detail-page .u-pagetitle {
    display: flex;
    align-items: center;
    min-height: 64px;
    margin: 0 !important;
    padding: 12px 20px !important;
    border: 1px solid #e0e5ec;
    border-radius: var(--ui-radius-card, 12px) !important;
    background: #fff;
    box-shadow: 0 2px 10px rgba(25, 54, 104, .08);
}
#main.solidrock-products-list-page .u-pagetitle h1,
#main.solidrock-category-products-page .u-pagetitle h1,
#main.solidrock-product-detail-page .u-pagetitle h1 {
    margin: 0;
    color: #173b78;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.25;
}
#main.solidrock-products-list-page .solidrock-products-list-card,
#main.solidrock-category-products-page .solidrock-products-results-card,
#main.solidrock-product-detail-page .solidrock-product-detail-shell {
    border: 1px solid #dce2ef !important;
    border-radius: var(--ui-radius-card, 12px) !important;
    box-shadow: 0 2px 10px rgba(25, 54, 104, .06);
}
#main.solidrock-products-list-page .solidrock-products-list-card { padding-top: 0 !important; }
#main.solidrock-products-list-page .solidrock-products-list-body { padding: 20px !important; }
#main.solidrock-products-list-page table.solidrock-products-table {
    width: 100% !important;
    min-width: 620px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto !important;
    border-radius: var(--ui-radius-card, 12px) !important;
    overflow: hidden;
}
#main.solidrock-products-list-page .solidrock-products-table thead th {
    padding: 12px 10px;
    border: 1px solid #24479a;
    background: #0b328e !important;
    color: #fff !important;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
}
#main.solidrock-products-list-page .solidrock-products-table thead th a,
#main.solidrock-products-list-page .solidrock-products-table thead th .dataTable-sorter {
    color: inherit !important;
    text-decoration: none;
}
#main.solidrock-products-list-page .solidrock-products-table tbody th,
#main.solidrock-products-list-page .solidrock-products-table tbody td {
    padding: 12px 10px;
    border: 1px solid #e0e5ef;
    background: #f1f4ff;
    color: #26374f;
    text-align: center;
    vertical-align: middle;
}
#main.solidrock-products-list-page .solidrock-products-table tbody tr:nth-child(even) > * { background: #e4eaff; }
#main.solidrock-products-list-page .solidrock-products-table tbody tr:hover > * { background: #d8e2ff; }
#main.solidrock-products-list-page .datatable-top,
#main.solidrock-products-list-page .datatable-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 0 14px;
}
#main.solidrock-products-list-page .datatable-bottom { padding: 14px 0 0; }
#main.solidrock-products-list-page .datatable-search input,
#main.solidrock-products-list-page .datatable-dropdown select {
    min-height: 38px;
    border: 1px solid #c8d2e0;
    border-radius: var(--ui-radius-input, 8px);
    padding: 6px 10px;
}
#main.solidrock-products-list-page .datatable-wrapper { max-width: 100%; overflow-x: auto; }
#main.solidrock-products-list-page .solidrock-products-list-actions .btn {
    min-width: 90px;
    min-height: 38px;
}

#main.solidrock-category-products-page .solidrock-products-results-card {
    margin-top: 16px !important;
    padding-top: 0 !important;
}
#main.solidrock-category-products-page .solidrock-products-empty-card { min-height: 150px; }
#main.solidrock-category-products-page .solidrock-products-empty-card > .card-body {
    display: grid;
    place-items: center;
    min-height: 150px;
    padding: 24px;
}
#main.solidrock-category-products-page .solidrock-products-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 92px;
    border: 1px dashed #ccd6e8;
    border-radius: var(--ui-radius-card, 12px);
    background: #f5f7fc;
    color: #6d819f;
    font-size: 1rem;
    font-weight: 600;
}
#main.solidrock-category-products-page .solidrock-products-empty-state i {
    color: #8da0bf;
    font-size: 1.25rem;
}
#main.solidrock-category-products-page .solidrock-product-search-header {
    position: static !important;
    z-index: auto !important;
    padding: 18px 20px 0 !important;
    border: 0 !important;
    background: transparent !important;
}
#main.solidrock-category-products-page .solidrock-product-search-card {
    margin: 0;
    padding-top: 0 !important;
    border: 1px solid #e0e5ef;
    border-radius: var(--ui-radius-card, 12px) !important;
    box-shadow: none;
}
#main.solidrock-category-products-page .solidrock-product-search-body { padding: 16px !important; }
#main.solidrock-category-products-page .solidrock-product-search-row {
    display: grid;
    grid-template-columns: minmax(64px, auto) repeat(2, minmax(150px, 1fr)) minmax(90px, auto);
    align-items: center;
    gap: 12px;
    margin: 0;
}
#main.solidrock-category-products-page .solidrock-product-search-row > [class*="col"] {
    width: auto;
    min-width: 0;
    padding: 0;
}
#main.solidrock-category-products-page .solidrock-product-search-label label {
    margin: 0;
    color: #173b78;
    font-weight: 600;
    white-space: nowrap;
}
#main.solidrock-category-products-page .solidrock-product-search-row input,
#main.solidrock-category-products-page .solidrock-product-search-row select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid #c8d2e0;
    border-radius: var(--ui-radius-input, 8px);
}
#main.solidrock-category-products-page .solidrock-product-search-submit {
    width: 100%;
    min-height: 42px;
    margin: 0;
    border-radius: var(--ui-radius-control, 8px);
}
#main.solidrock-category-products-page .solidrock-products-results-body {
    padding: 18px 20px 20px;
    border: 0;
    background: transparent;
}
#main.solidrock-category-products-page .solidrock-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    max-height: 65vh;
    overflow: auto;
    margin: 0;
    padding: 4px;
}
#main.solidrock-category-products-page .solidrock-product-tile {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding: 0 !important;
    display: flex;
}
#main.solidrock-category-products-page .solidrock-product-card {
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid #dce2ef;
    border-radius: var(--ui-radius-card, 12px) !important;
    box-shadow: 0 2px 8px rgba(25, 54, 104, .08);
}
#main.solidrock-category-products-page .solidrock-product-card > img {
    width: 100% !important;
    height: 220px !important;
    padding: 12px;
    background: #f5f7fc;
    object-fit: contain;
}
#main.solidrock-category-products-page .solidrock-product-card .card-body { padding: 16px !important; }
#main.solidrock-category-products-page .solidrock-product-card .list-box-product {
    margin: 0 0 10px;
    color: #34445a;
    text-align: center;
    overflow-wrap: anywhere;
}
#main.solidrock-category-products-page .solidrock-product-card .btn { min-width: 92px; }

#main.solidrock-product-detail-page .solidrock-product-detail-shell {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0 !important;
    padding: 20px !important;
    background: #fff;
}
#main.solidrock-product-detail-page .solidrock-product-detail-shell::before { content: none !important; display: none !important; }
#main.solidrock-product-detail-page .solidrock-product-detail-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding: 0 !important;
    float: none !important;
    display: flex;
}
#main.solidrock-product-detail-page .solidrock-product-detail-panel {
    width: 100% !important;
    min-width: 0;
    padding: 20px !important;
    border: 1px solid #e0e5ef;
    border-radius: var(--ui-radius-card, 12px) !important;
    box-shadow: none !important;
}
#main.solidrock-product-detail-page .solidrock-product-info-card {
    width: 100%;
    margin: 16px 0 0 !important;
    padding: 20px !important;
    border: 1px solid #dce2ef;
    border-radius: var(--ui-radius-card, 12px) !important;
    background: #fff;
    box-shadow: 0 2px 10px rgba(25, 54, 104, .06);
}
#main.solidrock-product-detail-page .solidrock-product-info-card::before { content: none !important; display: none !important; }
#main.solidrock-product-detail-page .solidrock-product-info-card > h3 {
    width: 100% !important;
    color: #173b78 !important;
    font-size: 1.15rem;
    text-align: left;
}
#main.solidrock-product-detail-page .solidrock-product-info-card > div {
    width: 100% !important;
    border: 1px solid #e0e5ef;
    border-radius: var(--ui-radius-card, 12px) !important;
    box-shadow: none !important;
}
@media (max-width: 991.98px) {
    #main.solidrock-category-products-page .solidrock-product-search-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #main.solidrock-category-products-page .solidrock-product-search-label { grid-column: 1 / -1; }
    #main.solidrock-category-products-page .solidrock-product-search-submit { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    #main.solidrock-product-detail-page .solidrock-product-detail-shell { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    #main.solidrock-products-list-page .solidrock-products-list-body { padding: 14px !important; }
    #main.solidrock-category-products-page .solidrock-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 2px; }
    #main.solidrock-category-products-page .solidrock-product-card > img { height: 170px !important; }
    #main.solidrock-category-products-page .solidrock-product-card .card-body { padding: 12px !important; }
}

/* Container items: use the same card, table and control rhythm as Basic Information. */
#main.container-items-page > .container-items-page-title {
    display: flow-root;
    visibility: visible !important;
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
    margin: 0 0 16px !important;
    text-indent: 0;
}
#main.container-items-page .container-items-page-title > .u-pagetitle {
    display: flex !important;
    visibility: visible !important;
    float: none !important;
    align-items: center;
    min-height: 64px;
    margin: 0 !important;
    padding: 12px 20px !important;
    border: 1px solid #e0e5ec;
    border-radius: var(--ui-radius-card, 12px) !important;
    background: #fff;
    box-shadow: 0 2px 10px rgba(25, 54, 104, .08);
}
#main.container-items-page .container-items-page-title h1 {
    display: block !important;
    visibility: visible !important;
    margin: 0;
    color: #173b78;
    font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
    line-height: 1.25;
}
#main.container-items-page .container-items-section {
    display: block;
    width: 100%;
    float: none;
}
#main.container-items-page .container-items-table-card {
    width: 100%;
    float: none;
    overflow: hidden;
    padding: 16px;
    border: 1px solid #dce2ef;
    border-radius: var(--ui-radius-card, 12px);
    background: #fff;
    box-shadow: 0 2px 10px rgba(25, 54, 104, .06);
}
#main.container-items-page .container-items-table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
#main.container-items-page table.container-items-table {
    display: table;
    width: 100%;
    min-width: 1280px;
    margin: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d8e0ef;
    border-radius: var(--ui-radius-card, 12px);
    overflow: hidden;
}
#main.container-items-page .container-items-col-number { width: 4%; }
#main.container-items-page .container-items-col-container { width: 7%; }
#main.container-items-page .container-items-col-id { width: 8%; }
#main.container-items-page .container-items-col-crate-number { width: 5%; }
#main.container-items-page .container-items-col-booking { width: 8%; }
#main.container-items-page .container-items-col-date { width: 8%; }
#main.container-items-page .container-items-col-etd { width: 8%; }
#main.container-items-page .container-items-col-shipping { width: 8%; }
#main.container-items-page .container-items-col-weight { width: 11%; }
#main.container-items-page .container-items-col-status { width: 11%; }
#main.container-items-page .container-items-col-documents { width: 9%; }
#main.container-items-page .container-items-col-orders { width: 7%; }
#main.container-items-page .container-items-col-crates { width: 6%; }
#main.container-items-page .container-items-table thead,
#main.container-items-page .container-items-table tbody { display: table-header-group; width: auto; float: none; }
#main.container-items-page .container-items-table tbody { display: table-row-group; }
#main.container-items-page .container-items-table tr {
    display: table-row;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}
#main.container-items-page .container-items-table th,
#main.container-items-page .container-items-table td {
    display: table-cell;
    float: none;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 10px 8px;
    border-right: 1px solid #e0e5ef;
    border-bottom: 1px solid #e0e5ef;
    text-align: center;
    vertical-align: middle;
    overflow-wrap: anywhere;
    word-break: normal;
}
#main.container-items-page .container-items-table thead th {
    height: 58px;
    border-color: #24479a;
    background: #0b328e !important;
    color: #fff !important;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
}
#main.container-items-page .container-items-table tbody td {
    height: 60px;
    background: #f1f4ff !important;
    color: #26374f !important;
    font-size: .9rem !important;
}
#main.container-items-page .container-items-table tbody tr.container-items-data-row:nth-child(4n + 3) > td { background: #e4eaff !important; }
#main.container-items-page .container-items-table tbody tr:hover > td { background: #d8e2ff !important; }
#main.container-items-page .container-items-table tr > :last-child { border-right: 0; }
#main.container-items-page .container-items-table tbody tr:last-child > td { border-bottom: 0; }
#main.container-items-page .container-items-table .container-items-empty {
    height: 110px;
    background: #f5f7fc !important;
    color: #6d819f !important;
    font-size: 1rem !important;
    font-weight: 600;
}
#main.container-items-page .container-items-etd-heading { white-space: nowrap; }
#main.container-items-page .container-items-etd-heading span { display: block; }
#main.container-items-page .container-items-etd-heading span + span {
    width: 42px;
    margin: 3px auto 0;
    padding-top: 3px;
    border-top: 1px dotted rgba(255,255,255,.8);
}
#main.container-items-page .container-items-status-heading { white-space: nowrap; }
#main.container-items-page .container-items-status-heading .btn-status {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 6px;
    background: rgba(255,255,255,.12);
    color: #fff !important;
}
#main.container-items-page .container-items-field-editor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
}
#main.container-items-page .container-items-field-editor .form-control {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0;
    min-height: 36px;
    margin: 0 !important;
    padding: 6px 9px;
    border: 1px solid #c8d2e0;
    border-radius: var(--ui-radius-input, 8px);
    background: #fff;
    color: #26374f;
    font-size: .875rem;
}
#main.container-items-page .container-items-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: var(--ui-radius-icon-box, 8px) !important;
    box-shadow: none;
}
#main.container-items-page button[class*="api-edit-"] {
    border-color: var(--panel-action-edit-border, #0d6efd) !important;
    background: var(--panel-action-edit-bg, #0d6efd) !important;
    color: #fff !important;
}
#main.container-items-page button[class*="api-edit-"]:hover { background: var(--panel-action-edit-bg-hover, #0b5ed7) !important; }
#main.container-items-page .container-items-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 64px;
    min-height: 36px;
    margin: 0 !important;
    padding: 6px 8px !important;
    border-radius: var(--ui-radius-control, 8px) !important;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none;
}
#main.container-items-page .container-items-action-button i { font-size: .95rem; }
#main.container-items-page .container-items-action-button.btn-action-view {
    border-color: var(--panel-action-view-border, #20c4dd) !important;
    background: var(--panel-action-view-bg, #20c4dd) !important;
    color: var(--panel-action-view-color, #082f3a) !important;
}
#main.container-items-page .container-items-action-button.btn-upload { color: #fff !important; }
#main.container-items-page .container-items-status-controls { display: flex; align-items: center; justify-content: center; gap: 6px; }
#main.container-items-page .container-items-status-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 52px;
    min-height: 36px;
    margin: 0 !important;
    padding: 4px 6px !important;
    border: 1px solid #d5deed;
    border-radius: var(--ui-radius-control, 8px);
    background: #fff;
    color: #26374f;
}
#main.container-items-page .container-items-status-current img,
#main.container-items-page .container-items-status-cell > div img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain;
    margin: 0 2px !important;
}
#main.container-items-page .container-items-status-cell > div { justify-content: center; }
#main.container-items-page .container-items-status-cell .container-items-ok {
    min-height: 36px;
    padding: 6px 12px;
    border-radius: var(--ui-radius-control, 8px);
    white-space: nowrap;
}
#main.container-items-page .box-upload > td { padding: 14px !important; background: #f8faff !important; }
#main.container-items-page .box-upload .card { margin: 0; border: 1px solid #dce2ef; border-radius: 10px; }
#main.container-items-page .box-upload .card-header { gap: 10px; flex-wrap: wrap; padding: 12px; background: #f4f6ff; }
#main.container-items-page .box-upload .card-header .btn,
#main.container-items-page .box-upload .card-header .form-control { min-height: 38px; margin: 0 !important; border-radius: var(--ui-radius-control, 8px); }
@media (max-width: 767.98px) {
    #main.container-items-page .container-items-table-card { padding: 10px; }
    #main.container-items-page .container-items-page-title > .u-pagetitle { min-height: 56px; padding: 10px 14px !important; }
}
#main.container-items-page .container-items-status-cell { white-space: nowrap; }
#main.container-items-page .container-items-status-controls { gap: 5px; }
#main.container-items-page .container-items-status-current {
    width: 68px;
    min-width: 68px;
    min-height: 34px;
    flex: 0 0 68px;
    gap: 3px;
    padding: 3px 5px !important;
    white-space: nowrap;
    line-height: 1;
}
#main.container-items-page .container-items-status-code {
    display: inline-block;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
#main.container-items-page .container-items-status-current img,
#main.container-items-page .container-items-status-cell > div img {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px;
}
#main.container-items-page .container-items-status-cell .container-items-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 42px;
    min-height: 34px;
    padding: 5px 8px;
    line-height: 1;
}
#main.container-items-page .downward-triangle { right: 24px; bottom: 5px; }
#main.container-items-page .container-items-col-id { width: 10%; }
#main.container-items-page .container-items-col-booking,
#main.container-items-page .container-items-col-date,
#main.container-items-page .container-items-col-shipping { width: 9%; }
#main.container-items-page .container-items-col-etd { width: 6%; }
#main.container-items-page .container-items-col-weight,
#main.container-items-page .container-items-col-status { width: 10%; }
#main.container-items-page .container-items-col-documents { width: 8%; }
#main.container-items-page .container-items-col-orders { width: 7%; }
#main.container-items-page .container-items-col-crates { width: 6%; }
#main.container-items-page .container-items-field-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px 30px;
    justify-content: stretch;
    gap: 5px;
}
#main.container-items-page .container-items-field-editor .form-control {
    grid-column: 1;
    align-self: center;
    min-height: 34px;
    padding: 5px 7px;
    font-size: .82rem;
}
#main.container-items-page .container-items-field-editor .container-items-icon-action {
    width: 30px;
    height: 30px;
}
#main.container-items-page .container-items-field-editor:has(.form-control:disabled) { display: flex; }
#main.container-items-page .container-items-field-editor:has(.form-control:disabled) .form-control { flex: 1 1 auto; }
#main.container-items-page .container-items-status-controls { position: relative; }
#main.container-items-page .container-items-status-current {
    position: relative;
    justify-content: space-between;
    width: 68px;
    min-width: 68px;
    flex: 0 0 68px;
    padding: 3px 5px !important;
    border-color: #c9d5ea;
    box-shadow: 0 1px 3px rgba(22, 48, 91, .12);
    cursor: pointer;
}
#main.container-items-page .container-items-status-current:hover,
#main.container-items-page .container-items-status-current:focus-visible {
    border-color: #6b94da;
    background: #f7faff;
    box-shadow: 0 0 0 3px rgba(42, 104, 201, .12);
}
#main.container-items-page .container-items-status-current img { width: 24px !important; height: 24px !important; flex-basis: 24px; }
#main.container-items-page .container-items-status-chevron { color: #71809a; font-size: 10px; }
#main.container-items-page .u-select-option {
    top: calc(100% + 7px);
    left: 0;
    width: 190px;
    min-width: 190px;
    max-height: 260px;
    padding: 5px;
    overflow-y: auto;
    border: 1px solid #d8e1ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(23, 48, 89, .2);
    scrollbar-width: thin;
}
#main.container-items-page .container-items-status-option {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    background: #fff;
    color: #26374f;
    cursor: pointer;
    text-align: left;
}
#main.container-items-page .container-items-status-option:hover { background: #f0f5ff; }
#main.container-items-page .container-items-status-option.is-current { background: #eaf1ff; color: #173b78; }
#main.container-items-page .container-items-status-option img { width: 48px; height: 30px; object-fit: contain; }
#main.container-items-page .container-items-status-option > i { color: #198754; opacity: 0; }
#main.container-items-page .container-items-status-option.is-current > i { opacity: 1; }
#main.container-items-page .container-items-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(25, 70, 48, .18);
}
#main.container-items-page .container-items-ok i { font-size: 16px; }
#main.container-items-page .container-items-action-button {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0 !important;
    gap: 0;
    border-radius: 9px !important;
}
#main.container-items-page .container-items-action-button > i { font-size: 16px; }
#main.container-items-page .u-select-option {
    width: 270px;
    min-width: 270px;
    max-height: min(320px, 55vh);
    padding: 6px;
    border-radius: 12px;
}
#main.container-items-page .container-items-status-option {
    grid-template-columns: 34px 42px minmax(0, 1fr) 18px;
    min-height: 48px;
    gap: 7px;
    padding: 7px 9px;
    text-align: left;
    transition: background-color .15s ease, color .15s ease;
}
#main.container-items-page .container-items-status-option:focus-visible {
    outline: 2px solid #6b94da;
    outline-offset: -2px;
    background: #f0f5ff;
}
#main.container-items-page .container-items-status-option img { width: 42px; height: 32px; }
#main.container-items-page .container-items-status-label {
    overflow: hidden;
    color: #46566e;
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
}
#main.container-items-page .container-items-status-option.is-current .container-items-status-label { color: #173b78; font-weight: 600; }

#main.container-items-page .container-items-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 16px; }
#main.container-items-page .container-items-count { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#173b78; }
#main.container-items-page .container-items-search { display:flex; align-items:center; gap:10px; width:280px; max-width:65%; padding:8px 12px; margin:0; border:1px solid #c8d2e0; border-radius:var(--ui-radius-input,8px); color:#7c8da8; background:#fff; }
#main.container-items-page .container-items-search input { width:100%; min-width:0; border:0; outline:0; padding:0; background:transparent; font-size:14px; color:#26374f; }
#main.container-items-page .container-items-search:focus-within { border-color:#86b7fe; box-shadow:0 0 0 3px rgba(13,110,253,.1); }
#main.container-items-page .container-items-code { white-space:nowrap; font-weight:700; color:#173b78; }
#main.container-items-page .container-items-code small { font-weight:400; color:#70819a; }
#main.container-items-page .container-items-field-editor .form-control:disabled { background:transparent; border-color:transparent; text-align:center; box-shadow:none; font-weight:600; }
#main.container-items-page .container-items-field-editor .container-items-icon-action:disabled { display:none; }
#main.container-items-page .container-items-field-editor:has(.form-control:disabled) { flex-wrap:nowrap; }
#main.container-items-page .container-items-field-editor .container-items-icon-action { flex:0 0 30px; width:30px; height:30px; }
#main.container-items-page .container-items-table tr[hidden] { display:none !important; }

/* Balanced columns keep action headings and identifiers readable. */
#main.container-items-page table.container-items-table { min-width:1120px; width:100%; float:none; }
#main.container-items-page .container-items-table-card { padding:12px; }
#main.container-items-page .container-items-col-number { width:5%; }
#main.container-items-page .container-items-col-container { width:6%; }
#main.container-items-page .container-items-col-id { width:9%; }
#main.container-items-page .container-items-col-crate-number { width:5%; }
#main.container-items-page .container-items-col-booking,
#main.container-items-page .container-items-col-date,
#main.container-items-page .container-items-col-etd { width:8%; }
#main.container-items-page .container-items-col-shipping { width:7%; }
#main.container-items-page .container-items-col-weight,
#main.container-items-page .container-items-col-status { width:12%; }
#main.container-items-page .container-items-col-documents { width:8%; }
#main.container-items-page .container-items-col-orders,
#main.container-items-page .container-items-col-crates { width:6%; }
#main.container-items-page .container-items-table :is(th,td) { padding:9px 4px; word-break:normal; overflow-wrap:normal; }
#main.container-items-page .container-items-table thead th { font-size:12px; }
#main.container-items-page .container-items-table tbody td { font-size:12px !important; }
#main.container-items-page .container-items-table thead th:first-child,
#main.container-items-page .container-items-data-row > td:first-child {
    white-space:nowrap !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    font-variant-numeric:tabular-nums;
    text-align:center;
    padding-inline:8px;
}
#main.container-items-page .container-items-table td:nth-child(3),
#main.container-items-page .container-items-table td:nth-child(5),
#main.container-items-page .container-items-table td:nth-child(6),
#main.container-items-page .container-items-table td:nth-child(7) { white-space:nowrap; font-variant-numeric:tabular-nums; }
#main.container-items-page .container-items-field-editor { display:flex; flex-wrap:nowrap; gap:4px; width:100%; justify-content:center; }
#main.container-items-page .container-items-field-editor .form-control { flex:1 1 0; width:0 !important; min-width:0; padding:5px; font-size:12px; }
#main.container-items-page .container-items-field-editor .container-items-icon-action { flex:0 0 26px; width:26px; height:30px; }
#main.container-items-page .container-items-status-controls { gap:4px; }
#main.container-items-page .container-items-status-current {
    width:62px; min-width:62px; flex:0 0 62px; height:34px;
    padding:4px !important; border:1px solid #b6c8e3;
    border-radius:8px !important; box-shadow:none; gap:3px;
}
#main.container-items-page .container-items-status-current[aria-expanded="true"] { border-color:#3973ca; box-shadow:0 0 0 3px #3973ca1a; }
#main.container-items-page .container-items-status-current img { width:22px !important; height:22px !important; flex:0 0 22px; margin:0 !important; }
#main.container-items-page .container-items-status-code { font-size:12px; }
#main.container-items-page .container-items-status-chevron { font-size:9px; transition:transform .15s; }
#main.container-items-page .container-items-status-current[aria-expanded="true"] .container-items-status-chevron { transform:rotate(180deg); }
#main.container-items-page .container-items-status-cell .container-items-ok { width:28px; min-width:28px; flex:0 0 28px; height:34px; padding:0; box-shadow:none; }
#main.container-items-page .container-items-status-option { white-space:normal; grid-template-columns:26px 32px minmax(0,1fr) 16px; }
#main.container-items-page .container-items-status-option .container-items-status-label { white-space:normal; overflow:visible; overflow-wrap:normal; text-overflow:clip; }
#main.container-items-page .container-items-status-option img { width:30px !important; height:30px !important; }
#main.container-items-page .container-items-action-button { width:30px; min-width:30px; height:32px; min-height:32px; }
@media (max-width: 767.98px) {
    #main.container-items-page table.container-items-table { min-width:1120px; }
}
#main.container-items-page .container-items-toolbar { flex-wrap:wrap; justify-content:flex-start; }
#main.container-items-page .container-items-toolbar > .container-items-count { margin-right:auto; }
#main.container-items-page #container-items-status-filter,
#main.container-items-page #container-items-page-size { min-height:38px; width:auto; border:1px solid #c8d2e0; border-radius:8px; color:#34445a; font-size:13px; }
#main.container-items-page #container-items-status-filter { min-width:190px; max-width:260px; }
#main.container-items-page .container-items-page-size { display:flex; align-items:center; gap:7px; margin:0; color:#66768e; font-size:13px; }
#main.container-items-page .container-items-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 2px 0; color:#66768e; font-size:13px; }
#main.container-items-page .container-items-pagination > div { display:flex; gap:6px; }
#main.container-items-page .container-items-pagination .btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:34px; padding:0; border-radius:7px; font-size:20px; line-height:1; }
#main.container-items-page .container-items-pagination .btn:disabled { opacity:.45; cursor:not-allowed; }
#main.container-items-page .container-items-table thead,
#main.container-items-page .container-items-table thead tr,
#main.container-items-page .container-items-table thead th {
    position:static !important;
    inset:auto !important;
    top:auto !important;
    z-index:auto !important;
    transform:none !important;
}
#main.container-items-page .container-items-table thead th { white-space:normal; overflow-wrap:normal; word-break:normal; }
#main.container-items-page .container-items-table th:nth-child(3),
#main.container-items-page .container-items-table td:nth-child(3) { white-space:nowrap; overflow-wrap:normal; word-break:keep-all; }

/* Keep the status arrow in its own track and expand only while editing. */
#main.container-items-page .container-items-status-current {
    display:grid !important; grid-template-columns:18px 22px 10px;
    align-items:center; justify-content:center; gap:2px; overflow:hidden;
}
#main.container-items-page .container-items-status-current .container-items-status-chevron {
    display:block !important; position:static !important; inset:auto !important;
    width:10px; height:12px; margin:0 !important; padding:0 !important;
    font-size:9px; line-height:12px; float:none !important;
}
#main.container-items-page .container-items-status-current .container-items-status-chevron::before { vertical-align:0; line-height:12px; }
#main.container-items-page .container-items-editor-value {
    display:block; width:100%; min-width:0; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; cursor:help;
}
#main.container-items-page .container-items-field-editor .form-control:disabled {
    text-overflow:ellipsis; white-space:nowrap; overflow:hidden; cursor:help; text-align:left;
}
#main.container-items-page table.container-items-table:has(.container-items-field-editor.is-editing) {
    table-layout:auto; min-width:1250px;
}
#main.container-items-page .container-items-table:has(.container-items-field-editor.is-editing) col { width:auto; }
#main.container-items-page .container-items-table td:has(.container-items-field-editor.is-editing) { min-width:250px; }
#main.container-items-page .container-items-field-editor.is-editing { min-width:240px; }
#main.container-items-page .container-items-field-editor.is-editing .form-control {
    min-width:200px; border-color:#6b94da; background:#fff; box-shadow:0 0 0 3px rgba(42,104,201,.1);
}

/* Reserve the lower-right corner for the shared floating back-to-top button. */
#main.container-items-page .container-items-pagination > div {
    margin-right: 54px;
    flex: 0 0 auto;
}
#main.container-items-page .container-items-pagination {
    flex-wrap: wrap;
    padding-bottom: 12px;
}

/* Keep crate numbers on one line in the C No. column. */
#main.container-items-page .container-items-col-crate-number { width:5%; }
#main.container-items-page .container-items-table td:nth-child(4) {
    min-width:64px;
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:keep-all;
    font-variant-numeric:tabular-nums;
}

/* Give weight values and their edit control enough room to read comfortably. */
#main.container-items-page .container-items-col-weight { width:12%; }
#main.container-items-page .container-items-table td:nth-child(9) { min-width:132px; }
#main.container-items-page .container-items-field-editor button[class*="api-edit-mw"] {
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:var(--ui-radius-icon-box, 8px) !important;
    background:var(--panel-action-edit-bg, #0d6efd) !important;
    border:1px solid var(--panel-action-edit-border, #0d6efd) !important;
    color:var(--panel-action-icon-color, #fff) !important;
    box-shadow:0 2px 5px rgba(20,42,82,.18);
}
#main.container-items-page .container-items-field-editor button[class*="api-edit-mw"] > i {
    font-size:17px !important;
    font-weight:900;
}
#main.container-items-page .container-items-field-editor button[class*="api-edit-mw"]:hover,
#main.container-items-page .container-items-field-editor button[class*="api-edit-mw"]:focus-visible {
    background:var(--panel-action-edit-bg-hover, #0b5ed7) !important;
    border-color:var(--panel-action-edit-bg-hover, #0b5ed7) !important;
}
#main.container-items-page .container-items-table tbody td:nth-child(11),
#main.container-items-page .container-items-table tbody td:nth-child(12),
#main.container-items-page .container-items-table tbody td:nth-child(13) {
    text-align:center !important;
    vertical-align:middle !important;
}
#main.container-items-page .container-items-table tbody td:nth-child(11) .container-items-action-button,
#main.container-items-page .container-items-table tbody td:nth-child(12) .container-items-action-button,
#main.container-items-page .container-items-table tbody td:nth-child(13) .container-items-action-button {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    margin:0 auto !important;
    vertical-align:middle;
}

/* Click the truncated value to reveal it without entering edit mode. */
#main.container-items-page .container-items-value-preview {
    display:none; min-width:0; flex:1 1 0; padding:6px 2px;
    background:transparent; border:0; color:#26374f; font:inherit;
    font-weight:600; text-align:left; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; cursor:pointer;
    text-decoration:underline dotted #9aaac0; text-underline-offset:4px;
}
#main.container-items-page .container-items-field-editor:has(input:disabled) .container-items-value-preview { display:block; }
#main.container-items-page .container-items-field-editor input:disabled { display:none; }
#main.container-items-page .container-items-field-editor.is-value-expanded .container-items-value-preview {
    white-space:normal; overflow-wrap:anywhere;
}
#main.container-items-page .container-items-value-preview:focus-visible { outline:2px solid #3973ca; outline-offset:2px; border-radius:4px; }
#main.container-items-page .container-items-field-editor.is-editing [class*="api-edit-"] { display:none !important; }
#main.container-items-page .container-items-field-editor.is-editing input {
    animation:container-field-reveal .22s ease-out;
}
@keyframes container-field-reveal {
    from { opacity:0; transform:translateY(4px); }
    to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
    #main.container-items-page .container-items-field-editor.is-editing input { animation:none; }
}

/* Factory fields stay compact until the operator explicitly starts editing. */
#main.container-items-page .container-items-field-editor.container-items-editable {
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
}
#main.container-items-page .container-items-editable > input { display:none !important; }
#main.container-items-page .container-items-editable > .container-items-value-preview { display:block !important; }
#main.container-items-page .container-items-editable > [class*="api-set-"] { display:none !important; }
#main.container-items-page .container-items-editable > [class*="api-edit-"] {
    display:inline-flex !important;
    flex:0 0 36px;
    width:36px;
    min-width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    border:1px solid var(--panel-action-edit-border, #0d6efd) !important;
    border-radius:var(--ui-radius-icon-box, 8px) !important;
    background:var(--panel-action-edit-bg, #0d6efd) !important;
    color:#fff !important;
    box-shadow:0 2px 5px rgba(20,42,82,.18);
}
#main.container-items-page .container-items-editable > [class*="api-edit-"] > i { font-size:17px !important; }
#main.container-items-page .container-items-editable.is-editing > input {
    display:block !important;
    flex:1 1 auto;
    min-width:95px;
    max-width:100%;
    animation:container-field-reveal .22s ease-out;
}
#main.container-items-page .container-items-editable.is-editing > .container-items-value-preview,
#main.container-items-page .container-items-editable.is-editing > [class*="api-edit-"] { display:none !important; }
#main.container-items-page .container-items-editable.is-editing > [class*="api-set-"] {
    display:inline-flex !important;
    flex:0 0 36px;
    width:36px;
    min-width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    padding:0 !important;
}
#main.container-items-page .container-document-card {
    display:flex; flex-direction:column; width:calc(25% - 16px); min-width:180px;
    margin:8px !important; padding:8px; overflow:hidden;
    border:1px solid #dce4f2; border-radius:12px; background:#fff;
    box-shadow:0 3px 12px rgba(28,55,104,.08); transition:transform .18s,box-shadow .18s;
}
#main.container-items-page .container-document-card:hover { transform:translateY(-2px); box-shadow:0 7px 18px rgba(28,55,104,.13); }
#main.container-items-page .container-document-preview {
    position:relative; display:flex; align-items:center; justify-content:center;
    height:116px !important; padding:12px !important; overflow:hidden;
    border:0; border-radius:8px; background:#f3f6ff;
}
#main.container-items-page .container-document-link {
    display:flex !important; align-items:center; justify-content:center;
    width:76px !important; height:76px !important; padding:8px !important;
    border:1px solid #d8e2f2 !important; border-radius:10px !important;
    background:#fff !important; color:#168557; text-decoration:none;
}
#main.container-items-page .container-document-link img { width:100% !important; height:100% !important; object-fit:contain; border-radius:6px; }
#main.container-items-page .container-document-link i { font-size:42px !important; color:#285ca8 !important; }
#main.container-items-page .container-document-name { flex:1; display:flex; align-items:center; justify-content:center; min-height:48px; padding:10px 6px !important; text-align:center; }
#main.container-items-page .container-document-name span { max-width:100%; overflow-wrap:anywhere; color:#26374f; font-size:15px; font-weight:600; }
#main.container-items-page .container-document-actions { display:flex; justify-content:center; padding:8px 0 2px !important; border-top:1px solid #edf0f6; background:transparent; }
#main.container-items-page .container-document-actions .btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:36px; padding:0 !important; border:0; border-radius:8px; box-shadow:0 2px 5px rgba(30,45,75,.16); }
#main.container-items-page .container-document-actions .btn i { font-size:15px; }
@media (max-width:767.98px) { #main.container-items-page .container-document-card { width:calc(50% - 16px); } }
@media (max-width:480px) { #main.container-items-page .container-document-card { width:100%; } }
#main.container-items-page .container-items-page-title { margin-top:0 !important; }
#main.container-items-page .container-items-section { margin-top:0 !important; }
#main.container-items-page .container-items-card-heading {
    display:block !important;
    visibility:visible !important;
    width:100%;
    margin:0 0 16px;
    padding:2px 4px 12px;
    border-bottom:1px solid #e8edf5;
}
#main.container-items-page .container-items-card-heading h1 {
    display:block !important;
    visibility:visible !important;
    margin:0 !important;
    padding:0 !important;
    color:#173b78 !important;
    background:transparent !important;
    font-size:clamp(1.5rem, 2.4vw, 2rem) !important;
    line-height:1.25;
}

/* Per-column reveal controls and the shared edit-all control. */
#main.container-items-page .container-items-toolbar .container-items-edit-all {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:38px; padding:7px 12px; border-radius:8px;
}
#main.container-items-page .container-items-table thead th[data-expand-column] {
    position:relative; padding-bottom:30px !important; white-space:normal;
}
#main.container-items-page .container-items-column-expand {
    position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:20px; padding:0; border:1px solid #ffffff70;
    border-radius:6px; color:#fff; background:#ffffff1c; cursor:pointer;
}
#main.container-items-page .container-items-column-expand:hover,
#main.container-items-page .container-items-column-expand[aria-pressed="true"] { background:#ffffff40; }
#main.container-items-page .container-items-column-expand i { font-size:12px; }
#main.container-items-page .container-items-editable { position:relative; }
#main.container-items-page .container-items-editable:not(.is-editing) > .container-items-value-preview { padding-right:18px; }
#main.container-items-page .container-items-editable:not(.is-editing) > [class*="api-edit-"] {
    position:absolute; right:2px; top:50%; transform:translateY(-50%);
    width:9px; min-width:9px; height:9px; flex:0 0 9px;
    padding:0 !important; overflow:hidden; border:0 !important;
    border-radius:50% !important; box-shadow:none; cursor:pointer;
    transition:width .18s ease,height .18s ease,border-radius .18s ease;
    background:var(--panel-action-edit-bg,#0d6efd) !important;
}
#main.container-items-page .container-items-editable:not(.is-editing) > [class*="api-edit-"] > i {
    opacity:0; font-size:16px !important; transition:opacity .12s ease;
}
#main.container-items-page .container-items-editable:not(.is-editing):hover > [class*="api-edit-"],
#main.container-items-page .container-items-editable:not(.is-editing):focus-within > [class*="api-edit-"] {
    width:34px; min-width:34px; height:34px; border-radius:8px !important;
}
#main.container-items-page .container-items-editable:not(.is-editing):hover > [class*="api-edit-"] > i,
#main.container-items-page .container-items-editable:not(.is-editing):focus-within > [class*="api-edit-"] > i { opacity:1; }
#main.container-items-page .container-items-editable.is-editing > input { width:100% !important; }
#main.container-items-page .container-items-table.is-column-expanded-3 td:nth-child(3) .container-items-value-preview,
#main.container-items-page .container-items-table.is-column-expanded-5 td:nth-child(5) .container-items-value-preview,
#main.container-items-page .container-items-table.is-column-expanded-6 td:nth-child(6) .container-items-value-preview,
#main.container-items-page .container-items-table.is-column-expanded-8 td:nth-child(8) .container-items-value-preview,
#main.container-items-page .container-items-table.is-column-expanded-9 td:nth-child(9) .container-items-value-preview,
#main.container-items-page .container-items-table.is-column-expanded-3 td:nth-child(3) .container-items-editor-value,
#main.container-items-page .container-items-table.is-column-expanded-5 td:nth-child(5) .container-items-editor-value,
#main.container-items-page .container-items-table.is-column-expanded-6 td:nth-child(6) .container-items-editor-value,
#main.container-items-page .container-items-table.is-column-expanded-8 td:nth-child(8) .container-items-editor-value,
#main.container-items-page .container-items-table.is-column-expanded-9 td:nth-child(9) .container-items-editor-value {
    display:block; overflow:visible; white-space:normal; overflow-wrap:anywhere;
    text-overflow:clip; padding-block:6px;
}
@media (prefers-reduced-motion:reduce) {
    #main.container-items-page .container-items-editable > [class*="api-edit-"],
    #main.container-items-page .container-items-editable > [class*="api-edit-"] > i { transition:none; }
}

/* Action columns use single-line headings and evenly padded square buttons. */
#main.container-items-page .container-items-table .container-items-data-row > td:nth-last-child(-n+3),
#main.container-items-page .container-items-table thead th:nth-last-child(-n+3) {
    padding:12px 8px;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    text-align:center !important;
    vertical-align:middle !important;
}
#main.container-items-page .container-items-action-button {
    width:36px; min-width:36px; height:36px; min-height:36px;
    padding:0 !important; line-height:1;
}
#main.container-items-page .container-items-action-button > i {
    display:block; margin:0; line-height:1;
}

/* Container Items is a navigation/list page; shipment details live in Logistics. */
#main.container-items-page.container-items-readonly table.container-items-table {
    width:100%;
    min-width:900px;
    table-layout:fixed;
}
#main.container-items-page.container-items-readonly .container-items-col-number { width:6%; }
#main.container-items-page.container-items-readonly .container-items-col-container { width:17%; }
#main.container-items-page.container-items-readonly .container-items-col-crate-number { width:9%; }
#main.container-items-page.container-items-readonly .container-items-col-status { width:28%; }
#main.container-items-page.container-items-readonly .container-items-col-orders,
#main.container-items-page.container-items-readonly .container-items-col-crates { width:12%; }
#main.container-items-page.container-items-readonly .container-items-col-logistics { width:16%; }
#main.container-items-page.container-items-readonly .container-items-admin-table .container-items-col-status { width:14%; }
#main.container-items-page.container-items-readonly .container-items-admin-table .container-items-col-consignments { width:14%; }
#main.container-items-page.container-items-readonly .container-items-toolbar { align-items:center; }
#main.container-items-page.container-items-readonly .container-items-logistics-link,
#main.container-items-page.container-items-readonly .container-items-row-logistics {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:7px 12px;
    border-radius:var(--ui-radius-icon-box, 8px);
    white-space:nowrap;
}
#main.container-items-page.container-items-readonly .container-items-code { font-size:15px; }
#main.container-items-page.container-items-readonly .container-items-data-row > td:nth-child(3) { font-variant-numeric:tabular-nums; }
#main.container-items-page.container-items-readonly .container-items-stage-pill {
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    max-width:100%;
    min-height:32px;
    padding:5px 9px;
    border:1px solid #d8e2f2;
    border-radius:999px;
    background:#f7f9fe;
    color:#43546e;
    text-align:left;
    vertical-align:middle;
}
#main.container-items-page.container-items-readonly .container-items-stage-pill strong {
    flex:0 0 auto;
    min-width:24px;
    color:#174a9c;
    font-variant-numeric:tabular-nums;
}
#main.container-items-page.container-items-readonly .container-items-stage-pill > span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#main.container-items-page.container-items-readonly .container-items-stage-pill.is-active {
    border-color:#b8e4cd;
    background:#effaf4;
    color:#167447;
    font-weight:700;
}
#main.container-items-page.container-items-readonly .container-items-stage-cell { text-align:left !important; }

/* Shared dashboard, customizer and invoice position-message indicator. */
.order-message-indicator {
    display: inline-grid !important;
    flex: 0 0 40px;
    width: 40px;
    height: 32px;
    place-items: center;
    margin: 0;
    padding: 0 !important;
    border: 1px solid #e8d7d8 !important;
    border-radius: 7px !important;
    background: #fff3f3 !important;
    color: #c72f3d !important;
    box-shadow: 0 1px 3px rgba(38, 54, 78, .12) !important;
    line-height: 1;
    text-decoration: none !important;
    vertical-align: middle;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.order-message-indicator > .fa-comment {
    color: inherit !important;
    font-size: 14px;
    line-height: 1;
}
.order-message-indicator:hover,
.order-message-indicator:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 3px 7px rgba(38, 54, 78, .16) !important;
}
.order-message-indicator.btn-danger {
    border-color: #f0c4c7 !important;
    background: #fff1f1 !important;
    color: #c72f3d !important;
}
.order-message-indicator.btn-warning {
    border-color: #f0dfb9 !important;
    background: #fff8e9 !important;
    color: #a66a0a !important;
}
.order-message-indicator.btn-success {
    border-color: #c9e4d2 !important;
    background: #eff8f2 !important;
    color: #218052 !important;
}
.order-message-indicator.btn-danger:hover,
.order-message-indicator.btn-danger:focus-visible { background: #ffe9ea !important; }
.order-message-indicator.btn-warning:hover,
.order-message-indicator.btn-warning:focus-visible { background: #fff2d7 !important; }
.order-message-indicator.btn-success:hover,
.order-message-indicator.btn-success:focus-visible { background: #e5f4ea !important; }

@media(max-width:767.98px) {
    #main.container-items-page.container-items-readonly .container-items-toolbar { gap:10px; }
    #main.container-items-page.container-items-readonly .container-items-search { flex:1 1 100%; width:100%; max-width:none; order:2; }
    #main.container-items-page.container-items-readonly .container-items-page-size { margin-right:auto; }
    #main.container-items-page.container-items-readonly .container-items-logistics-link { order:4; }
}

/* Dashboard task center: clear ownership, readable task descriptions, compact filters. */
.dashboard-task-panel.u-to-do-list-modal {
    inset:0 !important;
    width:100% !important;
    height:100dvh !important;
    margin:0 !important;
    padding:18px;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.dashboard-task-panel .u-to-do-list-section {
    display:flex;
    width:min(1440px, calc(100vw - 36px));
    max-width:none;
    height:min(920px, calc(100dvh - 36px));
    min-height:0;
    flex:0 1 auto;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #dbe5f3;
    border-radius:18px;
    background:#f5f8fd;
    box-shadow:0 24px 72px rgba(17,43,83,.24);
}
.dashboard-task-panel .u-to-do-list-section > .u-to-do-list-title {
    flex:0 0 auto;
}
.dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title {
    min-height:78px;
    padding:13px 20px;
    border-bottom:1px solid #e4ebf5;
}
.dashboard-task-panel .todo-modal-heading { gap:13px; }
.dashboard-task-panel .todo-modal-icon {
    width:44px;
    height:44px;
    flex-basis:44px;
    border:1px solid #dfebff;
    border-radius:14px;
    background:#edf4ff;
    color:#2457a6;
}
.dashboard-task-panel .todo-modal-heading h2 { font-size:20px; }
.dashboard-task-panel .todo-modal-heading p { font-size:12px; }
.dashboard-task-panel .dashboard-task-filters {
    display:grid;
    grid-template-columns:repeat(14, minmax(0, 1fr));
    gap:12px;
    flex:0 0 auto;
    align-items:end;
    padding:16px 20px;
    border-bottom:1px solid #e2e9f3;
    background:#fff;
}
.dashboard-task-panel .dashboard-task-filters > label,
.dashboard-task-panel .dashboard-task-composer label {
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:6px;
    margin:0;
    color:#50627d;
    font-size:11px;
    font-weight:700;
}
.dashboard-task-panel .dashboard-task-filters > label > span,
.dashboard-task-panel .dashboard-task-composer label > span { line-height:1.2; }
.dashboard-task-panel .dashboard-task-filters .form-control,
.dashboard-task-panel .dashboard-task-filters .form-select,
.dashboard-task-panel .dashboard-task-composer .form-control,
.dashboard-task-panel .dashboard-task-composer .form-select {
    min-width:0;
    min-height:40px;
    border:1px solid #d5dfec;
    border-radius:9px;
    background-color:#fff;
    color:#263954;
    font-size:12px;
    box-shadow:none;
}
.dashboard-task-panel .dashboard-task-filters .form-control:focus,
.dashboard-task-panel .dashboard-task-filters .form-select:focus,
.dashboard-task-panel .dashboard-task-composer .form-control:focus,
.dashboard-task-panel .dashboard-task-composer .form-select:focus {
    border-color:#84a9e1;
    box-shadow:0 0 0 3px rgba(45,102,183,.1);
}
.dashboard-task-panel #dashboard-task-person { grid-column:span 3; }
.dashboard-task-panel #dashboard-task-period { grid-column:span 2; }
.dashboard-task-panel .dashboard-task-date-filter { grid-column:span 2; }
.dashboard-task-panel #dashboard-task-status { grid-column:span 2; }
.dashboard-task-panel .dashboard-task-search { grid-column:span 3; }
.dashboard-task-panel .dashboard-task-filter-apply,
.dashboard-task-panel .dashboard-task-filter-reset {
    min-height:40px;
    grid-column:span 2;
    padding:7px 11px;
    border-radius:9px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}
.dashboard-task-panel .dashboard-task-filter-apply { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:#2457a6; border-color:#2457a6; }
.dashboard-task-panel .dashboard-task-filter-reset { grid-column:span 2; }
.dashboard-task-panel .dashboard-task-date-filter[hidden] { display:none !important; }
.dashboard-task-panel .dashboard-task-main {
    display:flex;
    min-height:0;
    flex:1 1 auto;
    flex-direction:column;
    overflow:hidden;
    background:#f5f8fd;
}
.dashboard-task-panel .dashboard-task-summary {
    flex:0 0 auto;
    padding:9px 21px 0;
    color:#74839a;
    font-size:11px;
    font-weight:600;
}
.dashboard-task-panel .dashboard-task-list {
    display:flex;
    min-height:0;
    flex:1 1 auto;
    flex-direction:column;
    gap:10px;
    padding:10px 20px;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-color:#bccbe0 transparent;
    scrollbar-width:thin;
}
.dashboard-task-panel .dashboard-task-card {
    flex:0 0 auto;
    padding:13px 15px;
    border:1px solid #dfe7f2;
    border-left:3px solid #e7ad38;
    border-radius:12px;
    background:#fff;
    box-shadow:0 3px 10px rgba(29,55,91,.035);
}
.dashboard-task-panel .dashboard-task-card.is-complete { border-left-color:#37a477; }
.dashboard-task-panel .dashboard-task-card-main {
    display:grid;
    grid-template-columns:40px minmax(0, 1fr) minmax(175px, 220px);
    align-items:center;
    gap:14px;
}
.dashboard-task-panel .dashboard-task-card-icon {
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    border:1px solid #f0dfbd;
    border-radius:11px;
    background:#fff8e9;
    color:#a77617;
    font-size:16px;
}
.dashboard-task-panel .dashboard-task-card-icon.is-complete { border-color:#cce8d9; background:#eff9f3; color:#248158; }
.dashboard-task-panel .dashboard-task-card-body { min-width:0; }
.dashboard-task-panel .dashboard-task-text {
    display:block;
    width:100%;
    min-height:44px;
    max-height:110px;
    margin:0;
    padding:9px 11px;
    overflow:auto;
    border:1px solid #e5ebf4;
    border-radius:9px;
    background:#f9fbfe;
    color:#263954;
    font-family:inherit;
    font-size:13px;
    font-weight:500;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
.dashboard-task-panel textarea.dashboard-task-text {
    resize:vertical;
    font-family:inherit;
}
.dashboard-task-panel .dashboard-task-card.is-editing .dashboard-task-text { border-color:#82a6dc; background:#fff; }
.dashboard-task-panel .dashboard-task-participants {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px 15px;
    margin-top:8px;
    color:#667792;
    font-size:10px;
    line-height:1.35;
}
.dashboard-task-panel .dashboard-task-participants > span { display:inline-flex; min-width:0; align-items:center; gap:4px; }
.dashboard-task-panel .dashboard-task-participants > span > i { color:#8b9ab0; }
.dashboard-task-panel .dashboard-task-participants strong { color:#526680; }
.dashboard-task-panel .dashboard-task-participants small { color:#8b98aa; }
.dashboard-task-panel .dashboard-task-order-link { display:inline-flex; align-items:center; gap:4px; color:#2457a6; font-weight:700; text-decoration:none; }
.dashboard-task-panel .dashboard-task-card-meta { display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:7px; }
.dashboard-task-panel .dashboard-task-card-meta .todo-status-badges { align-items:flex-start; }
.dashboard-task-panel .dashboard-task-card-meta .todo-task-status { min-height:27px; padding:5px 9px; }
.dashboard-task-panel .dashboard-task-time { display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; color:#8794a7; font-size:10px; }
.dashboard-task-panel .dashboard-task-time time { color:#51647f; font-size:10px; white-space:nowrap; }
.dashboard-task-panel .dashboard-task-card-actions { display:flex; flex-wrap:wrap; gap:6px; }
.dashboard-task-panel .dashboard-task-card-actions .btn { display:inline-flex; min-height:29px; align-items:center; justify-content:center; gap:5px; padding:4px 8px; border-radius:7px; font-size:10px; font-weight:700; }
.dashboard-task-panel .dashboard-task-empty,
.dashboard-task-panel .dashboard-task-error,
.dashboard-task-panel .dashboard-task-loading {
    display:flex;
    min-height:150px;
    flex:1 1 auto;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px dashed #d4dfed;
    border-radius:12px;
    background:#fff;
    color:#74839a;
    font-size:13px;
}
.dashboard-task-panel .dashboard-task-error { color:#a64048; }
.dashboard-task-panel .dashboard-task-pagination {
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    min-height:48px;
    padding:5px 20px 11px;
}
.dashboard-task-panel .dashboard-task-pagination .btn { display:grid; min-width:32px; height:31px; place-items:center; padding:4px 8px; border-radius:7px; font-size:11px; }
.dashboard-task-panel .dashboard-task-page-gap { padding:0 4px; color:#8b98aa; }
.dashboard-task-panel .dashboard-task-composer {
    flex:0 0 auto;
    padding:13px 20px 15px;
    border-top:1px solid #e1e8f2;
    background:#fff;
}
.dashboard-task-panel .dashboard-task-composer-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; color:#334c70; }
.dashboard-task-panel .dashboard-task-composer-heading > div { display:flex; align-items:center; gap:8px; font-size:12px; }
.dashboard-task-panel .dashboard-task-composer-heading > div > i { color:#2c63ae; }
.dashboard-task-panel .dashboard-task-composer-heading small { color:#8290a5; font-size:10px; text-align:right; }
.dashboard-task-panel #dashboard-task-create-form {
    display:grid;
    grid-template-columns:minmax(190px, 1fr) minmax(260px, 2fr) auto;
    align-items:end;
    gap:10px;
}
.dashboard-task-panel #dashboard-task-new-description { min-height:42px; max-height:100px; resize:vertical; }
.dashboard-task-panel #dashboard-task-create-button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 14px; border-radius:9px; background:#2457a6; border-color:#2457a6; font-size:12px; font-weight:700; white-space:nowrap; }

/* Task edit and delete controls use the same filled colors as Basic Information actions. */
.u-to-do-list-modal :is(.todo-edit-btn, .panel-action-edit),
.dashboard-task-panel .dashboard-task-card-actions .panel-action-edit {
    color:var(--panel-action-icon-color, #fff) !important;
    background:var(--panel-action-edit-bg, #0d6efd) !important;
    border:1px solid var(--panel-action-edit-border, #0d6efd) !important;
}
.u-to-do-list-modal :is(.todo-edit-btn, .panel-action-edit):is(:hover, :focus-visible),
.dashboard-task-panel .dashboard-task-card-actions .panel-action-edit:is(:hover, :focus-visible) {
    color:var(--panel-action-icon-color, #fff) !important;
    background:var(--panel-action-edit-bg-hover, #0b5ed7) !important;
    border-color:var(--panel-action-edit-bg-hover, #0b5ed7) !important;
}
.u-to-do-list-modal :is(.todo-delete-btn, .panel-action-delete),
.dashboard-task-panel .dashboard-task-card-actions .panel-action-delete {
    color:var(--panel-action-icon-color, #fff) !important;
    background:var(--panel-action-delete-bg, #dc3545) !important;
    border:1px solid var(--panel-action-delete-border, #dc3545) !important;
}
.u-to-do-list-modal :is(.todo-delete-btn, .panel-action-delete):is(:hover, :focus-visible),
.dashboard-task-panel .dashboard-task-card-actions .panel-action-delete:is(:hover, :focus-visible) {
    color:var(--panel-action-icon-color, #fff) !important;
    background:var(--panel-action-delete-bg-hover, #bb2d3b) !important;
    border-color:var(--panel-action-delete-bg-hover, #bb2d3b) !important;
}
.u-to-do-list-modal .dashboard-task-card-actions .panel-action-edit,
.u-to-do-list-modal .dashboard-task-card-actions .panel-action-delete,
.dashboard-task-panel .dashboard-task-card-actions :is(.panel-action-edit, .panel-action-delete) {
    box-shadow:0 2px 5px rgba(20,42,82,.18);
}

@media (max-width:1100px) {
    .dashboard-task-panel .dashboard-task-filters { grid-template-columns:repeat(6, minmax(0, 1fr)); }
    .dashboard-task-panel #dashboard-task-person { grid-column:span 3; }
    .dashboard-task-panel #dashboard-task-period { grid-column:span 3; }
    .dashboard-task-panel #dashboard-task-status { grid-column:span 2; }
    .dashboard-task-panel .dashboard-task-date-filter { grid-column:span 2; }
    .dashboard-task-panel .dashboard-task-search { grid-column:span 3; }
    .dashboard-task-panel .dashboard-task-filter-apply { grid-column:span 1; }
    .dashboard-task-panel .dashboard-task-filter-reset { grid-column:span 2; }
}
@media (max-width:700px) {
    .dashboard-task-panel.u-to-do-list-modal { padding:0; }
    .dashboard-task-panel .u-to-do-list-section { width:100%; height:100dvh; border:0; border-radius:0; }
    .dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title { min-height:65px; padding:9px 12px; }
    .dashboard-task-panel .todo-modal-icon { width:38px; height:38px; flex-basis:38px; }
    .dashboard-task-panel .todo-modal-heading h2 { font-size:17px; }
    .dashboard-task-panel .todo-modal-heading p { display:none; }
    .dashboard-task-panel .dashboard-task-filters { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:9px; padding:11px 12px; }
    .dashboard-task-panel #dashboard-task-person,
    .dashboard-task-panel #dashboard-task-period,
    .dashboard-task-panel .dashboard-task-date-filter,
    .dashboard-task-panel #dashboard-task-status,
    .dashboard-task-panel .dashboard-task-search { grid-column:span 1; }
    .dashboard-task-panel .dashboard-task-search { grid-column:1 / -1; }
    .dashboard-task-panel .dashboard-task-filter-apply,
    .dashboard-task-panel .dashboard-task-filter-reset { grid-column:span 1; width:100%; }
    .dashboard-task-panel .dashboard-task-summary { padding:8px 12px 0; }
    .dashboard-task-panel .dashboard-task-list { padding:8px 11px; }
    .dashboard-task-panel .dashboard-task-card { padding:10px; }
    .dashboard-task-panel .dashboard-task-card-main { grid-template-columns:32px minmax(0,1fr); gap:8px; }
    .dashboard-task-panel .dashboard-task-card-icon { width:31px; height:31px; border-radius:9px; font-size:13px; }
    .dashboard-task-panel .dashboard-task-card-meta { grid-column:2; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6px 8px; }
    .dashboard-task-panel .dashboard-task-card-meta .todo-status-badges { grid-column:1 / -1; }
    .dashboard-task-panel .dashboard-task-time { display:block; }
    .dashboard-task-panel .dashboard-task-time time { display:block; margin-top:2px; white-space:normal; }
    .dashboard-task-panel .dashboard-task-card-actions { grid-column:1 / -1; }
    .dashboard-task-panel .dashboard-task-participants { align-items:flex-start; flex-direction:column; gap:5px; }
    .dashboard-task-panel .dashboard-task-pagination { padding:4px 12px 8px; }
    .dashboard-task-panel .dashboard-task-composer { padding:10px 12px; }
    .dashboard-task-panel .dashboard-task-composer-heading small { display:none; }
    .dashboard-task-panel #dashboard-task-create-form { grid-template-columns:1fr auto; }
    .dashboard-task-panel .dashboard-task-recipient,
    .dashboard-task-panel .dashboard-task-description { grid-column:1 / -1; }
    .dashboard-task-panel #dashboard-task-create-button { grid-column:1 / -1; width:100%; }
}

/* Dashboard task center: desktop split workspace with progressive filters. */
.dashboard-task-panel .u-to-do-list-section {
    width:min(1600px, calc(100vw - 40px));
    height:min(960px, calc(100dvh - 40px));
}
.dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title {
    min-height:76px;
    color:#fff;
    background:#123b88;
    border-bottom:0;
}
.dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title h2,
.dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title p,
.dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title .todo-modal-icon {
    color:#fff;
}
.dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title .todo-modal-icon {
    border-color:rgba(255,255,255,.2);
    background:rgba(255,255,255,.12);
}
.dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title p { opacity:.78; }
.dashboard-task-panel .todo-close-modal {
    display:inline-flex;
    width:44px;
    min-width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border:1px solid #cf293d;
    border-radius:10px;
    background:#df3347;
    color:#fff;
    box-shadow:0 2px 6px rgba(14,31,61,.2);
    transition:background-color .15s ease, transform .15s ease;
}
.dashboard-task-panel .todo-close-modal:hover,
.dashboard-task-panel .todo-close-modal:focus-visible {
    background:#c9273b;
    color:#fff;
    transform:translateY(-1px);
}
.dashboard-task-panel .todo-close-modal i { color:inherit; }
.dashboard-task-panel .dashboard-task-workspace {
    display:grid;
    min-width:0;
    min-height:0;
    flex:1 1 auto;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 370px);
    overflow:hidden;
}
.dashboard-task-panel .dashboard-task-left {
    display:flex;
    min-width:0;
    min-height:0;
    flex-direction:column;
    overflow:hidden;
}
.dashboard-task-panel .dashboard-task-filters {
    display:block;
    flex:0 0 auto;
    padding:17px 20px;
    border-bottom:1px solid #e2e9f3;
    background:#fff;
}
.dashboard-task-panel .dashboard-task-filter-primary {
    display:grid;
    grid-template-columns:minmax(190px, 1fr) auto auto;
    align-items:end;
    gap:10px;
}
.dashboard-task-panel .dashboard-task-filters label,
.dashboard-task-panel .dashboard-task-composer label {
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:6px;
    margin:0;
    color:#50627d;
    font-size:12px;
    font-weight:700;
}
.dashboard-task-panel .dashboard-task-filters label > span,
.dashboard-task-panel .dashboard-task-composer label > span { line-height:1.25; }
.dashboard-task-panel .dashboard-task-advanced {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:end;
    gap:12px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #edf1f7;
}
.dashboard-task-panel .dashboard-task-advanced .dashboard-task-date-filter { grid-column:auto; }
.dashboard-task-panel .dashboard-task-advanced[hidden] { display:none !important; }
.dashboard-task-panel .dashboard-task-filters .form-control,
.dashboard-task-panel .dashboard-task-filters .form-select,
.dashboard-task-panel .dashboard-task-composer .form-control,
.dashboard-task-panel .dashboard-task-composer .form-select {
    width:100%;
    min-width:0;
    min-height:42px;
    border:1px solid #d5dfec;
    border-radius:9px;
    background-color:#fff;
    color:#263954;
    font-size:13px;
    box-shadow:none;
}
.dashboard-task-panel .dashboard-task-filters .form-control:focus,
.dashboard-task-panel .dashboard-task-filters .form-select:focus,
.dashboard-task-panel .dashboard-task-composer .form-control:focus,
.dashboard-task-panel .dashboard-task-composer .form-select:focus {
    border-color:#84a9e1;
    box-shadow:0 0 0 3px rgba(45,102,183,.1);
}
.dashboard-task-panel .dashboard-task-filter-apply,
.dashboard-task-panel .dashboard-task-filter-reset,
.dashboard-task-panel .dashboard-task-advanced-toggle {
    display:inline-flex;
    min-height:42px;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:8px 14px;
    border-radius:9px;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.dashboard-task-panel .dashboard-task-filter-apply { background:#2457a6; border-color:#2457a6; }
.dashboard-task-panel .dashboard-task-advanced-toggle { color:#2457a6; background:#fff; }
.dashboard-task-panel .dashboard-task-advanced-chevron { margin-left:2px; font-size:11px; transition:transform .18s ease; }
.dashboard-task-panel .dashboard-task-advanced-toggle[aria-expanded="true"] .dashboard-task-advanced-chevron { transform:rotate(180deg); }
.dashboard-task-panel .dashboard-task-filter-reset { align-self:end; }
.dashboard-task-panel .dashboard-task-date-filter[hidden] { display:none !important; }
.dashboard-task-panel .dashboard-task-main { flex:1 1 auto; min-height:0; }
.dashboard-task-panel .dashboard-task-summary { padding:11px 20px 0; font-size:12px; }
.dashboard-task-panel .dashboard-task-list { padding:12px 20px; gap:12px; }
.dashboard-task-panel .dashboard-task-card { padding:15px 17px; }
.dashboard-task-panel .dashboard-task-card-main { grid-template-columns:42px minmax(0,1fr) minmax(185px,220px); gap:14px; }
.dashboard-task-panel .dashboard-task-text { min-height:48px; font-size:14px; }
.dashboard-task-panel .dashboard-task-participants { font-size:11px; }
.dashboard-task-panel .dashboard-task-card-meta .todo-task-status { font-size:12px; }
.dashboard-task-panel .dashboard-task-time,
.dashboard-task-panel .dashboard-task-time time { font-size:11px; }
.dashboard-task-panel .dashboard-task-composer {
    display:flex;
    min-width:0;
    min-height:0;
    flex:0 0 auto;
    flex-direction:column;
    padding:21px 20px;
    overflow:auto;
    border-top:0;
    border-left:1px solid #e1e8f2;
    background:#fff;
}
.dashboard-task-panel .dashboard-task-composer-heading {
    display:block;
    flex:0 0 auto;
    margin-bottom:19px;
}
.dashboard-task-panel .dashboard-task-composer-heading > div { gap:9px; font-size:16px; }
.dashboard-task-panel .dashboard-task-composer-heading > div > i { font-size:15px; }
.dashboard-task-panel .dashboard-task-composer-heading small {
    display:block;
    margin-top:7px;
    color:#77869d;
    font-size:12px;
    line-height:1.5;
    text-align:left;
}
.dashboard-task-panel #dashboard-task-create-form {
    display:flex;
    min-height:0;
    flex:1 1 auto;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
}
.dashboard-task-panel .dashboard-task-recipient { flex:0 0 auto; }
.dashboard-task-panel .dashboard-task-description { flex:1 1 auto; }
.dashboard-task-panel #dashboard-task-new-description {
    min-height:180px;
    max-height:none;
    flex:1 1 auto;
    resize:vertical;
}
.dashboard-task-panel #dashboard-task-create-button {
    min-height:46px;
    width:100%;
    flex:0 0 auto;
    font-size:14px;
    border-color:#198754;
    background:#198754;
    color:#fff;
}
.dashboard-task-panel #dashboard-task-create-button:hover,
.dashboard-task-panel #dashboard-task-create-button:focus-visible {
    border-color:#157347;
    background:#157347;
    color:#fff;
}
.dashboard-task-panel #dashboard-task-create-button:active {
    border-color:#146c43;
    background:#146c43;
    color:#fff;
}

@media (max-width:1050px) {
    .dashboard-task-panel .dashboard-task-workspace { grid-template-columns:minmax(0,1fr) minmax(285px, 32%); }
    .dashboard-task-panel .dashboard-task-card-main { grid-template-columns:38px minmax(0,1fr) minmax(160px,190px); gap:10px; }
    .dashboard-task-panel .dashboard-task-advanced { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:820px) {
    .dashboard-task-panel.u-to-do-list-modal { align-items:flex-start; overflow-x:hidden; overflow-y:auto; }
    .dashboard-task-panel .u-to-do-list-section {
        width:min(720px, calc(100vw - 24px));
        height:auto;
        min-height:calc(100dvh - 24px);
        margin:12px auto;
        overflow:visible;
    }
    .dashboard-task-panel .dashboard-task-workspace { display:flex; flex-direction:column; overflow:visible; }
    .dashboard-task-panel .dashboard-task-left { min-height:56vh; overflow:visible; }
    .dashboard-task-panel .dashboard-task-main { min-height:360px; }
    .dashboard-task-panel .dashboard-task-list { min-height:270px; }
    .dashboard-task-panel .dashboard-task-composer { min-height:390px; flex:0 0 auto; border-top:1px solid #e1e8f2; border-left:0; overflow:visible; }
    .dashboard-task-panel #dashboard-task-create-form { min-height:280px; }
    .dashboard-task-panel #dashboard-task-new-description { min-height:130px; }
}
@media (max-width:600px) {
    .dashboard-task-panel.u-to-do-list-modal { padding:0; }
    .dashboard-task-panel .u-to-do-list-section { width:100%; min-height:100dvh; margin:0; border:0; border-radius:0; }
    .dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title { min-height:64px; padding:9px 12px; }
    .dashboard-task-panel .todo-modal-icon { width:38px; height:38px; flex-basis:38px; }
    .dashboard-task-panel .todo-modal-heading h2 { font-size:17px; }
    .dashboard-task-panel .todo-modal-heading p { display:none; }
    .dashboard-task-panel .todo-close-modal { width:38px; min-width:38px; height:38px; }
    .dashboard-task-panel .dashboard-task-filters { padding:12px; }
    .dashboard-task-panel .dashboard-task-filter-primary { grid-template-columns:minmax(0,1fr) auto; gap:9px; }
    .dashboard-task-panel .dashboard-task-person-filter { grid-column:1 / -1; }
    .dashboard-task-panel .dashboard-task-filter-apply,
    .dashboard-task-panel .dashboard-task-advanced-toggle { min-height:40px; padding:7px 10px; font-size:12px; }
    .dashboard-task-panel .dashboard-task-advanced { grid-template-columns:1fr; gap:10px; }
    .dashboard-task-panel .dashboard-task-summary { padding:9px 12px 0; }
    .dashboard-task-panel .dashboard-task-list { padding:9px 12px; }
    .dashboard-task-panel .dashboard-task-card { padding:10px; }
    .dashboard-task-panel .dashboard-task-card-main { grid-template-columns:32px minmax(0,1fr); gap:8px; }
    .dashboard-task-panel .dashboard-task-card-icon { width:31px; height:31px; border-radius:9px; font-size:13px; }
    .dashboard-task-panel .dashboard-task-card-meta { grid-column:2; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6px 8px; }
    .dashboard-task-panel .dashboard-task-card-meta .todo-status-badges { grid-column:1 / -1; }
    .dashboard-task-panel .dashboard-task-time { display:block; }
    .dashboard-task-panel .dashboard-task-time time { display:block; margin-top:2px; white-space:normal; }
    .dashboard-task-panel .dashboard-task-participants { align-items:flex-start; flex-direction:column; gap:5px; }
    .dashboard-task-panel .dashboard-task-pagination { padding:4px 12px 8px; }
    .dashboard-task-panel .dashboard-task-composer { min-height:0; padding:15px 12px; }
    .dashboard-task-panel .dashboard-task-composer-heading small { display:block; }
    .dashboard-task-panel #dashboard-task-create-form { min-height:0; gap:12px; }
    .dashboard-task-panel #dashboard-task-new-description { min-height:125px; }
}

/* Flow controls in reading order and wrap only when the list panel runs out of room. */
.dashboard-task-panel .dashboard-task-advanced,
.dashboard-task-panel .dashboard-task-filters-inline .dashboard-task-filters {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:8px;
}
.dashboard-task-panel .dashboard-task-filters-inline .dashboard-task-filters {
    padding:10px 12px;
}
.dashboard-task-panel .dashboard-task-filters-inline :is(.dashboard-task-filter-primary,.dashboard-task-advanced) {
    display:contents;
}
.dashboard-task-panel .dashboard-task-filters-inline .dashboard-task-advanced-toggle,
.dashboard-task-panel .dashboard-task-range[hidden] {
    display:none;
}
.dashboard-task-panel .dashboard-task-advanced > label,
.dashboard-task-panel .dashboard-task-filters-inline .dashboard-task-person-filter {
    flex:1 1 116px;
    max-width:100%;
}
.dashboard-task-panel .dashboard-task-advanced > .dashboard-task-search {
    flex-basis:150px;
}
.dashboard-task-panel .dashboard-task-range {
    display:flex;
    flex:2 1 260px;
    min-width:0;
    gap:8px;
}
.dashboard-task-panel .dashboard-task-range > label {
    flex:1 1 0;
}
.dashboard-task-panel .dashboard-task-filter-actions {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.dashboard-task-panel .dashboard-task-filter-actions > .btn {
    width:auto;
    padding:7px 10px;
    font-size:12px;
}

/* Invoice task center: keep the dashboard visual system while retaining its contextual tabs. */
.factor-task-panel .u-to-do-list-section {
    width:min(1600px, calc(100vw - 40px));
}
.factor-task-panel .todo-tabs {
    flex:0 0 auto;
    padding:10px 18px 0;
    background:#f5f8fd;
}
.factor-task-panel .todo-tabs .nav-link {
    min-height:44px;
    padding:9px 14px;
}

/* Destructive controls in the customizer and invoice screens use the same solid red treatment. */
#main form.customizer-page button:is(
    .clear-model,
    .btn-remove-block,
    .upload-delete-btn,
    .delete_btn,
    [data-customize-tooltip*="remove" i],
    [title*="remove" i],
    [aria-label*="remove" i],
    [title*="delete" i],
    [aria-label*="delete" i],
    [onclick*="delete" i]
),
#main .u-upload-design-modal button.upload-delete-btn,
#main.factorMain button:is(
    #btn-del-uploading,
    .upload-delete-btn,
    [title*="delete" i],
    [aria-label*="delete" i],
    [title*="remove" i],
    [aria-label*="remove" i],
    [onclick*="delete" i]
) {
    box-sizing:border-box;
    border:1px solid #dc3545 !important;
    background:#dc3545 !important;
    color:#fff !important;
}
#main form.customizer-page button:is(
    .clear-model,
    .btn-remove-block,
    .upload-delete-btn,
    .delete_btn,
    [data-customize-tooltip*="remove" i],
    [title*="remove" i],
    [aria-label*="remove" i],
    [title*="delete" i],
    [aria-label*="delete" i],
    [onclick*="delete" i]
):is(:hover, :focus-visible, :active),
#main .u-upload-design-modal button.upload-delete-btn:is(:hover, :focus-visible, :active),
#main.factorMain button:is(
    #btn-del-uploading,
    .upload-delete-btn,
    [title*="delete" i],
    [aria-label*="delete" i],
    [title*="remove" i],
    [aria-label*="remove" i],
    [onclick*="delete" i]
):is(:hover, :focus-visible, :active) {
    border-color:#bb2d3b !important;
    background:#bb2d3b !important;
    color:#fff !important;
}
#main form.customizer-page button:is(
    .clear-model,
    .btn-remove-block,
    .upload-delete-btn,
    .delete_btn,
    [data-customize-tooltip*="remove" i],
    [title*="remove" i],
    [aria-label*="remove" i],
    [title*="delete" i],
    [aria-label*="delete" i],
    [onclick*="delete" i]
) :is(i, svg),
#main.factorMain button:is(
    #btn-del-uploading,
    .upload-delete-btn,
    [title*="delete" i],
    [aria-label*="delete" i],
    [title*="remove" i],
    [aria-label*="remove" i],
    [onclick*="delete" i]
) :is(i, svg) {
    color:inherit !important;
}
.factor-task-panel .factor-task-tab-content {
    display:flex;
    width:100%;
    min-height:0;
    flex:1 1 auto;
    overflow:hidden;
    background:#f5f8fd;
}
.factor-task-panel .factor-task-tab-content > .tab-pane {
    display:none !important;
    width:100%;
    min-width:0;
    min-height:0;
    flex:1 1 auto;
    flex-direction:column;
    overflow:hidden !important;
}
.factor-task-panel .factor-task-tab-content > .tab-pane.active {
    display:flex !important;
}
.factor-task-panel .factor-task-workspace {
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    grid-template-columns:minmax(0, 1fr) minmax(320px, 370px);
}
.factor-task-panel .factor-task-workspace--list-only {
    grid-template-columns:minmax(0, 1fr);
}
.factor-task-panel .factor-task-main {
    min-width:0;
    min-height:0;
}
.factor-task-panel .dashboard-task-list {
    margin:0;
    list-style:none;
}
.factor-task-panel .factor-task-composer {
    min-width:0;
}
.factor-task-panel .factor-task-create-controls {
    display:flex;
    min-height:0;
    flex:1 1 auto;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
}
.factor-task-panel .factor-task-create-controls textarea {
    width:100%;
    min-height:180px;
    height:auto;
    max-height:none;
    flex:1 1 auto;
    resize:vertical;
}
.factor-task-panel .todo-add-button {
    width:100%;
    min-height:46px;
    flex:0 0 auto;
    border:1px solid #198754;
    background:#198754;
    color:#fff;
    font-size:14px;
    font-weight:700;
}
.factor-task-panel .todo-add-button:hover,
.factor-task-panel .todo-add-button:focus-visible {
    border-color:#157347;
    background:#157347;
    color:#fff;
}
.factor-task-panel .factor-task-footer {
    flex:0 0 auto;
}

@media (max-width:1050px) {
    .factor-task-panel .factor-task-workspace {
        grid-template-columns:minmax(0, 1fr) minmax(285px, 32%);
    }
}
@media (max-width:820px) {
    .factor-task-panel.u-to-do-list-modal {
        align-items:flex-start;
        overflow-x:hidden;
        overflow-y:auto;
    }
    .factor-task-panel .u-to-do-list-section {
        width:min(720px, calc(100vw - 24px));
        height:auto;
        min-height:calc(100dvh - 24px);
        margin:12px auto;
        overflow:visible;
    }
    .factor-task-panel .todo-tabs {
        max-width:100%;
        overflow-x:auto;
    }
    .factor-task-panel .factor-task-tab-content {
        overflow:visible;
    }
    .factor-task-panel .factor-task-tab-content > .tab-pane.active {
        overflow:visible !important;
    }
    .factor-task-panel .factor-task-workspace,
    .factor-task-panel .factor-task-workspace--list-only {
        display:flex;
        height:auto;
        flex-direction:column;
        overflow:visible;
    }
    .factor-task-panel .factor-task-main {
        min-height:360px;
        overflow:visible;
    }
    .factor-task-panel .dashboard-task-list {
        min-height:270px;
    }
    .factor-task-panel .factor-task-composer {
        min-height:320px;
        flex:0 0 auto;
        border-top:1px solid #e1e8f2;
        border-left:0;
        overflow:visible;
    }
    .factor-task-panel .factor-task-create-controls textarea {
        min-height:130px;
    }
}
@media (max-width:600px) {
    .factor-task-panel.u-to-do-list-modal { padding:0; }
    .factor-task-panel .u-to-do-list-section {
        width:100%;
        min-height:100dvh;
        margin:0;
        border:0;
        border-radius:0;
    }
    .factor-task-panel .todo-tabs { padding:8px 10px 0; }
    .factor-task-panel .todo-tabs .nav-link {
        min-height:39px;
        padding:7px 10px;
        font-size:12px;
    }
    .factor-task-panel .factor-task-main { min-height:320px; }
    .factor-task-panel .factor-task-composer { min-height:0; padding:15px 12px; }
    .factor-task-panel .factor-task-create-controls textarea { min-height:125px; }
    .factor-task-panel .todo-add-button { min-height:44px; }
}

/* Recipient picker: keep self assignment distinct and make the team groups easy to scan. */
.dashboard-task-panel .dashboard-task-recipient .select2-container { width:100% !important; font-weight:500; }
.dashboard-task-panel .dashboard-task-recipient .select2-container--default .select2-selection--single {
    display:flex;
    min-height:50px;
    align-items:center;
    border:1px solid #d5dfec;
    border-radius:12px;
    background:linear-gradient(135deg,#fff 0%,#f7faff 100%);
    box-shadow:0 2px 8px rgba(30,61,104,.045);
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.dashboard-task-panel .dashboard-task-recipient .select2-container--default .select2-selection--single:hover {
    border-color:#a8bee0;
    background:#fff;
}
.dashboard-task-panel .dashboard-task-recipient .select2-container--default.select2-container--focus .select2-selection--single,
.dashboard-task-panel .dashboard-task-recipient .select2-container--default.select2-container--open .select2-selection--single {
    border-color:#7399d0;
    box-shadow:0 0 0 4px rgba(45,102,183,.11),0 5px 16px rgba(30,61,104,.08);
}
.dashboard-task-panel .dashboard-task-recipient .select2-container--default .select2-selection--single .select2-selection__rendered {
    display:flex;
    min-width:0;
    align-items:center;
    padding:4px 40px 4px 11px;
    color:#263954;
    line-height:1.2;
}
.dashboard-task-panel .dashboard-task-recipient .select2-container--default .select2-selection--single .select2-selection__arrow {
    top:0;
    right:8px;
    height:100%;
    color:#58708f;
}
.dashboard-task-panel .dashboard-task-recipient .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color:#58708f transparent transparent;
    border-width:5px 5px 0;
}
.dashboard-task-panel .dashboard-task-recipient .select2-dropdown {
    z-index:1090;
    overflow:hidden;
    border:1px solid #d9e3f0;
    border-radius:13px;
    background:#fff;
    box-shadow:0 16px 38px rgba(20,43,76,.18);
}
.dashboard-task-panel .dashboard-task-recipient .select2-search--dropdown { padding:9px 10px; }
.dashboard-task-panel .dashboard-task-recipient .select2-search--dropdown .select2-search__field {
    min-height:37px;
    padding:7px 10px;
    border:1px solid #d5dfec;
    border-radius:8px;
    outline:0;
}
.dashboard-task-panel .dashboard-task-recipient .select2-search--dropdown .select2-search__field:focus {
    border-color:#84a9e1;
    box-shadow:0 0 0 3px rgba(45,102,183,.1);
}
.dashboard-task-panel .dashboard-task-recipient .select2-results__options { max-height:300px; }
.dashboard-task-panel .dashboard-task-recipient .select2-results__option { padding:7px 9px; }
.dashboard-task-panel .dashboard-task-recipient .select2-results__option--highlighted.select2-results__option--selectable {
    background:#edf4ff;
    color:#203d68;
}
.dashboard-task-panel .dashboard-task-recipient .select2-results__option[aria-selected="true"] {
    background:#f3f7fd;
    color:#263954;
}
.dashboard-task-recipient-option {
    display:flex;
    min-width:0;
    align-items:center;
    gap:10px;
    padding:2px 3px;
    color:#283c58;
}
.dashboard-task-recipient-avatar {
    display:grid;
    width:31px;
    height:31px;
    flex:0 0 31px;
    place-items:center;
    border:1px solid #dfe8f4;
    border-radius:10px;
    background:#f2f6fc;
    color:#617c9e;
    font-size:12px;
}
.dashboard-task-recipient-option.is-self .dashboard-task-recipient-avatar {
    border-color:#cce9dc;
    background:#eaf8f1;
    color:#23835d;
}
.dashboard-task-recipient-copy { display:flex; min-width:0; flex:1 1 auto; flex-direction:column; gap:2px; }
.dashboard-task-recipient-copy strong { overflow:hidden; color:#273a56; font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-task-recipient-copy small { overflow:hidden; color:#8090a5; font-size:10px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-task-recipient-you {
    flex:0 0 auto;
    padding:4px 8px;
    border:1px solid #cce9dc;
    border-radius:999px;
    background:#eaf8f1;
    color:#23835d;
    font-size:9px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.dashboard-task-recipient-option.is-compact { gap:8px; }
.dashboard-task-recipient-option.is-compact .dashboard-task-recipient-avatar { width:27px; height:27px; flex-basis:27px; border-radius:9px; }
.dashboard-task-recipient-option.is-compact .dashboard-task-recipient-copy strong { font-size:12px; }
.dashboard-task-recipient-placeholder { color:#7d8ca1; font-weight:500; }
.dashboard-task-recipient-group { display:flex; align-items:center; gap:7px; color:#77879c; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.dashboard-task-recipient-group i { color:#8ca0ba; font-size:11px; }
.dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title .todo-modal-heading h2,
.dashboard-task-panel .u-to-do-list-section > header.u-to-do-list-title .todo-modal-heading p {
    color:#fff !important;
}

/* Model, material and finish overviews use the same centered dialog shell. */
.modelOverview,
.materialOverview,
.finishOverview {
    position:fixed;
    inset:0;
    z-index:-1;
    display:flex;
    width:100%;
    height:100vh;
    height:100dvh;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:0;
    margin:0;
    padding:16px;
    float:none;
    overflow:auto;
    background:rgba(17, 24, 39, .68);
    backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, visibility 0s linear .18s;
    box-sizing:border-box;
}

.modelOverview.is-open,
.materialOverview.is-open,
.finishOverview.is-open {
    z-index:12000;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .18s ease, visibility 0s;
}

.modelOverview > .overviewHeader,
.materialOverview > .overviewHeader,
.finishOverview > .overviewHeader {
    display:flex;
    width:min(1180px, 100%);
    min-height:64px;
    height:auto;
    flex:0 0 auto;
    align-items:center;
    gap:12px;
    margin:0;
    padding:12px 20px;
    float:none;
    border:1px solid #24479a;
    border-bottom:1px solid #24479a;
    border-radius:12px 12px 0 0;
    background:#0b398f;
    box-shadow:0 20px 60px rgba(14, 31, 68, .2);
    box-sizing:border-box;
}

.modelOverview > .overviewHeader h2,
.materialOverview > .overviewHeader h2,
.finishOverview > .overviewHeader h2 {
    min-width:0;
    flex:1 1 auto;
    width:auto;
    margin:0;
    color:#fff;
    font-size:1.5rem !important;
    font-weight:700;
    line-height:1.3;
}

.modelOverview > .overviewHeader .closeOverview,
.materialOverview > .overviewHeader .closeOverview,
.finishOverview > .overviewHeader .closeOverview {
    display:inline-flex;
    width:40px;
    min-width:40px;
    height:40px;
    flex:0 0 40px;
    align-items:center;
    justify-content:center;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #dc3545;
    border-radius:8px;
    background:#dc3545;
    color:#fff;
    font-size:18px;
    box-shadow:0 2px 5px rgba(22, 35, 58, .18);
}

.modelOverview > .overviewHeader .closeOverview:hover,
.materialOverview > .overviewHeader .closeOverview:hover,
.finishOverview > .overviewHeader .closeOverview:hover {
    border-color:#bb2d3b;
    background:#bb2d3b;
}

.modelOverview > .overviewHeader .searchBox,
.materialOverview > .overviewHeader .searchBox,
.finishOverview > .overviewHeader .searchBox {
    width:auto;
    min-width:180px;
    flex:0 1 28%;
    gap:8px;
}

.modelOverview > .overviewHeader .searchBox label,
.materialOverview > .overviewHeader .searchBox label,
.finishOverview > .overviewHeader .searchBox label {
    flex:0 0 auto;
    color:#fff;
}

.modelOverview > .overviewHeader .form-select,
.materialOverview > .overviewHeader .form-select,
.finishOverview > .overviewHeader .form-select {
    min-width:140px;
    max-width:190px;
    margin:0 !important;
}

.modelOverview > .modelSection,
.materialOverview > .materialSection,
.finishOverview > .finishSection {
    width:min(1180px, 100%);
    height:min(660px, calc(100dvh - 112px));
    max-height:calc(100dvh - 112px);
    min-height:180px;
    flex:0 1 auto;
    align-content:flex-start;
    margin:0;
    padding:14px;
    float:none;
    overflow:auto;
    border:1px solid #dce5f2;
    border-top:0;
    border-radius:0 0 12px 12px;
    background:#f8f9fc;
    box-shadow:0 20px 60px rgba(14, 31, 68, .2);
    box-sizing:border-box;
}

.finishOverview .finishSection .list-group-item {
    min-height:42px;
    padding:10px 14px;
    border-color:#e4e8f0;
    background:#fff;
    color:#29364a;
    font-size:14px;
}

.finishOverview .finishSection .finish-favorite-item {
    padding:0 !important;
    border:0;
    background:transparent;
}

.finishOverview .finishSection .finish-favorite-row {
    display:grid;
    width:100%;
    min-height:44px;
    grid-template-columns:42px 20px 150px minmax(0, 1fr);
    align-items:center;
    gap:10px;
    padding:9px 14px;
    border:0;
    border-bottom:1px solid #e4e8f0;
    border-radius:0 !important;
    background:#fff;
    color:#29364a;
    text-align:left;
    cursor:pointer;
    transition:background-color .15s ease,color .15s ease;
}

.finishOverview .finishSection .finish-favorite-row:hover {
    background:#f4f7fc;
}

.finishOverview .finishSection .finish-favorite-row:focus-visible {
    position:relative;
    z-index:1;
    outline:2px solid #7398d6;
    outline-offset:-2px;
}

.finishOverview .finishSection .finish-favorite-number {
    width:42px;
    color:#53637a;
    font-variant-numeric:tabular-nums;
    text-align:right;
}

.finishOverview .finishSection .finish-favorite-icon {
    width:20px;
    flex:0 0 20px;
    color:#8995a6;
    font-size:17px;
    text-align:center;
    transition:color .15s ease,transform .15s ease;
}

.finishOverview .finishSection .finish-favorite-row:hover .finish-favorite-icon {
    color:#dc3545;
    transform:scale(1.08);
}

.finishOverview .finishSection .finish-favorite-row.is-favorite {
    background:#fff8f8;
}

.finishOverview .finishSection .finish-favorite-row.is-favorite .finish-favorite-icon {
    color:#dc3545;
}

.finishOverview .finishSection .finish-favorite-code {
    width:150px;
    min-width:0;
    overflow:hidden;
    color:#53637a;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.finishOverview .finishSection .finish-favorite-name {
    min-width:0;
    overflow-wrap:anywhere;
}

@media (max-width:520px) {
    .finishOverview .finishSection .finish-favorite-row {
        grid-template-columns:36px 20px 112px minmax(0, 1fr);
        gap:8px;
        padding-right:10px;
        padding-left:10px;
    }

    .finishOverview .finishSection .finish-favorite-number { width:36px; }
    .finishOverview .finishSection .finish-favorite-code { width:112px; }
}

@media (max-width:740px) {
    .modelOverview,
    .materialOverview,
    .finishOverview { padding:10px; }

    .modelOverview > .overviewHeader,
    .materialOverview > .overviewHeader,
    .finishOverview > .overviewHeader {
        min-height:58px;
        flex-wrap:wrap;
        gap:8px;
        padding:10px 12px;
    }

    .modelOverview > .overviewHeader .searchBox,
    .materialOverview > .overviewHeader .searchBox,
    .finishOverview > .overviewHeader .searchBox {
        min-width:0;
        flex:1 1 100%;
        order:3;
    }

    .modelOverview > .overviewHeader .form-select,
    .materialOverview > .overviewHeader .form-select,
    .finishOverview > .overviewHeader .form-select {
        min-width:0;
        max-width:none;
        flex:1 1 100%;
        order:4;
    }

    .modelOverview > .modelSection,
    .materialOverview > .materialSection,
    .finishOverview > .finishSection {
        height:min(660px, calc(100dvh - 148px));
        max-height:calc(100dvh - 148px);
        padding:10px;
    }
}

/* Keep task edit/delete actions visibly filled on dashboard and invoice task cards. */
.dashboard-task-panel .dashboard-task-card-actions > .todo-edit-btn,
.factor-task-panel .dashboard-task-card-actions > .todo-edit-btn,
.u-to-do-list-modal .todo-task-card .todo-edit-btn {
    color:#fff !important;
    background-color:#0d6efd !important;
    background-image:none !important;
    border:1px solid #0d6efd !important;
    box-shadow:0 2px 4px rgba(13,110,253,.24) !important;
}
.dashboard-task-panel .dashboard-task-card-actions > .todo-delete-btn,
.factor-task-panel .dashboard-task-card-actions > .todo-delete-btn,
.u-to-do-list-modal .todo-task-card .todo-delete-btn {
    color:#fff !important;
    background-color:#dc3545 !important;
    background-image:none !important;
    border:1px solid #dc3545 !important;
    box-shadow:0 2px 4px rgba(220,53,69,.24) !important;
}
.dashboard-task-panel .dashboard-task-card-actions > .todo-save-btn,
.factor-task-panel .dashboard-task-card-actions > .todo-save-btn,
.u-to-do-list-modal .todo-task-card .todo-save-btn {
    color:#fff !important;
    background-color:#198754 !important;
    background-image:none !important;
    border:1px solid #198754 !important;
    box-shadow:0 2px 4px rgba(25,135,84,.24) !important;
}
.dashboard-task-panel .dashboard-task-card-actions > .todo-edit-btn > :is(i,svg),
.dashboard-task-panel .dashboard-task-card-actions > .todo-delete-btn > :is(i,svg),
.dashboard-task-panel .dashboard-task-card-actions > .todo-save-btn > :is(i,svg),
.factor-task-panel .dashboard-task-card-actions > :is(.todo-edit-btn,.todo-delete-btn,.todo-save-btn) > :is(i,svg),
.u-to-do-list-modal .todo-task-card :is(.todo-edit-btn,.todo-delete-btn,.todo-save-btn) > :is(i,svg) {
    color:#fff !important;
    fill:currentColor;
}
.dashboard-task-panel .dashboard-task-card-actions > .todo-edit-btn:is(:hover,:focus-visible),
.factor-task-panel .dashboard-task-card-actions > .todo-edit-btn:is(:hover,:focus-visible),
.u-to-do-list-modal .todo-task-card .todo-edit-btn:is(:hover,:focus-visible) {
    background-color:#0b5ed7 !important;
    border-color:#0b5ed7 !important;
}
.dashboard-task-panel .dashboard-task-card-actions > .todo-delete-btn:is(:hover,:focus-visible),
.factor-task-panel .dashboard-task-card-actions > .todo-delete-btn:is(:hover,:focus-visible),
.u-to-do-list-modal .todo-task-card .todo-delete-btn:is(:hover,:focus-visible) {
    background-color:#bb2d3b !important;
    border-color:#bb2d3b !important;
}
.dashboard-task-panel .dashboard-task-card-actions > .todo-save-btn:is(:hover,:focus-visible),
.factor-task-panel .dashboard-task-card-actions > .todo-save-btn:is(:hover,:focus-visible),
.u-to-do-list-modal .todo-task-card .todo-save-btn:is(:hover,:focus-visible) {
    background-color:#157347 !important;
    border-color:#157347 !important;
}
.dashboard-task-panel .dashboard-task-card-actions > .todo-action-btn,
.factor-task-panel .dashboard-task-card-actions > .todo-action-btn,
.u-to-do-list-modal .todo-task-card .todo-action-btn {
    display:inline-grid !important;
    box-sizing:border-box !important;
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:30px !important;
    min-height:30px !important;
    flex:0 0 32px !important;
    place-items:center !important;
    gap:0 !important;
    padding:0 !important;
    border-radius:6px !important;
    font-size:14px !important;
    line-height:1 !important;
    white-space:nowrap;
}
.dashboard-task-panel .dashboard-task-card-actions > .todo-action-btn > i,
.factor-task-panel .dashboard-task-card-actions > .todo-action-btn > i,
.u-to-do-list-modal .todo-task-card .todo-action-btn > i {
    margin:0 !important;
    font-size:14px !important;
    line-height:1 !important;
}

/* Align task status and freshness labels as one consistent badge row. */
.todo-status-badges,
.dashboard-task-panel .dashboard-task-card-meta .todo-status-badges {
    align-items:center !important;
    gap:6px;
}
.todo-status-badges > .todo-task-status,
.todo-status-badges > .todo-freshness-badge {
    box-sizing:border-box;
    height:28px;
    min-height:28px !important;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0 10px !important;
    border-radius:999px;
    font-size:10px !important;
    font-weight:700;
    line-height:1 !important;
    letter-spacing:0;
}
.todo-status-badges > .todo-task-status > i,
.todo-status-badges > .todo-freshness-badge > i {
    font-size:11px !important;
    line-height:1 !important;
}