:root {
    --wizard-stepper--active: rgba(22, 85, 143, .2);
    --wizard-stepper--active-font-color: #16558f;
    --wizard-circle-border-color: #6571ff;
    --wizard-stepper--btn-bg: rgba(101,113,255,.2);
    --wizard-stepper--btn-color: #6571ff;
    --wizard-stepper--btn-border-color: transparent;
    --wizard-stepper--prev-btn-bg: rgba(101,113,255,.2);
    --wizard-stepper--prev-btn-color: #6571ff;
    --wizard-stepper--prev-btn-border-color: transparent;
    --wizard-line-color: #dee2e6;
    --wizard-circle-color: #dee2e6;
    --wizard-stepper--disabled: #dee2e6;
    --wizard-stepper--disabled-font: #dee2e6;

    --ct-border-width: 1px;
    --ct-border-style: solid;
    --ct-border-color: #dee2e6;
    --ct-border-radius: 0.25rem;

    --ct-primary-rgb: 40,146,253;
    --ct-secondary-rgb: 108,117,125;
    --ct-success-rgb: 90,208,146;
    --ct-info-rgb: 79,198,225;
    --ct-warning-rgb: 253,196,94;
    --ct-danger-rgb: 247,89,100;
    --ct-light-rgb: 243,247,249;
    --ct-dark-rgb: 50,58,70;
    --ct-pink-rgb: 246,114,167;
    --ct-blue-rgb: 102,88,221;
    --app-height: 100%;
}

body {
    font-size: 0.805rem;
}

.vue-feather {
    overflow: unset!important;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-md {
    height: 37px;
}

.c-white {
    color: #fff;
}

.p-overlaypanel-content .d-grid {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}

.h-13 {
    height: 13px;
}

.h-14 {
    height: 14px;
}

.text-orange {
    color: #E04F16 !important;
}

.p-icon-field-left .form-control {
    padding-left: 2.25rem;
}

.p-icon-field-right .form-control {
    padding-right: 2.25rem;
}

.p-invalid, .p-invalid .p-inputtext {
    border-color: #f44336 !important;
}

.p-datatable-tbody .p-inputswitch, .p-datatable-thead .p-inputswitch {
    width: 1.8rem;
    height: 1.1rem;
}

.p-datatable-tbody .p-inputswitch .p-inputswitch-slider:before, .p-datatable-thead .p-inputswitch .p-inputswitch-slider:before {
    background: #ffffff;
    width: .5rem;
    height: .5rem;
    left: 0.25rem;
    border-radius: 50%;
    transition-duration: 0.2s;
}

.p-datatable-tbody .p-inputswitch .p-inputswitch-slider:before, .p-datatable-thead .p-inputswitch .p-inputswitch-slider:before {
    margin-top: -0.365rem;
    width: 0.7rem;
    height: .7rem;
    left: 0.25rem;
}

.p-inputswitch.p-highlight .p-inputswitch-slider {
    background: #16558f;
}

.p-datatable-tbody .p-inputswitch.p-highlight .p-inputswitch-slider:before, .p-datatable-thead .p-inputswitch.p-highlight .p-inputswitch-slider:before {
    background: #ffffff;
    transform: translateX(.5rem);
}

.label-calendar {
    background-color: #e3f2fd;
    padding: 5px;
    border-radius: 5px;
    color: #000000;
    width: 100%;
    flex-wrap: wrap;
    font-size: 0.7rem;
}

.fc .fc-toolbar-title {
    font-size: 0.975em;
}

.long-text {
    flex: 1;
    display: block;
    overflow: auto;
    max-height: 67px;
    height: 67px;
    white-space: normal;
    word-break: break-word;
    word-wrap: break-word;
}

.history {
    height: 300px;
    display: flex;
    align-items: center;
    margin: auto;
}

.vr-wizard--footer {
    display: flex;
    justify-content: flex-end;
}

.vr-wizard--btn {
    --wizard-stepper--btn-bg: #FF9F43;
    --wizard-stepper--btn-border-color: #FF9F43;
    --wizard-stepper--btn-color: #fff;
    --wizard-stepper--prev-btn-bg: #fff;
    --wizard-stepper--prev-btn-color: #495057;
    --wizard-stepper--prev-btn-border-color: #e9ecef;
    border-radius: 3px;
    min-width: 100px;
    text-transform: unset !important;
}

.vr-wizard--btn.vr-wizard--close-btn, .vr-wizard--btn.vr-wizard--prev-btn {
    --wizard-stepper--btn-bg: #fff;
    --wizard-stepper--btn-border-color: #e9ecef;
    --wizard-stepper--btn-color: #495057;
}

.swal2-container {
    z-index: 3002 !important;
}

.p-dialog, .p-dropdown-label, .p-dropdown-panel {
    font-family: "Nunito", sans-serif;
}

.form-check-input {
    width: 18px !important;
    height: 18px !important;
}

.base-text {
    text-transform: unset !important;
}

.p-checkbox .p-checkbox-box {
    width: 18px !important;
    height: 18px !important;
    border-radius: 5px;
    border: 1px solid #adb5bd;
}

.form-check-input svg{
    width: 100%;
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
}

.form-check-lg label {
    font-size: 0.9rem;
}

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

.pi-xs {
    font-size: 13px;
}

.z-index-1050 {
    z-index: 1050 !important;
}

span.delete {
    font-size: 14px;
    padding: 2px;
}

.table-top span.delete {
    font-size: 14px;
    padding: 2px;
    width: 186px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

td img {
    max-height: 28px;
}

.table thead tr th {
    color: #495057;
    font-size: 12.5px;
    padding: .30rem .75rem;
    font-weight: bold;
}

.table tbody tr td {
    color: #495057;
    font-size: 12px;
    padding: .40rem .75rem;
}

.text-w-limit {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 120px;
}

.stock-adjustment-modal .p-accordion-header-action svg {
    order: 1;
    font-size: 0.695rem;
    height: 10px;
}

.stock-adjustment-modal .p-accordion-header {
    border-bottom: 1px solid #dddddd;
}

.stock-adjustment-modal .p-accordion-header-action .p-accordion-header-text {
    order: 2;
    font-size: 0.695rem;
}

.stock-adjustment-modal .p-accordion-header-action {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: .5rem;
}

.c-multi-select {
    height: 38px;
    border: 1px solid #dbe0e6;
    border-radius: .35rem;
    padding-left: 7px;
    font-size: 0.875rem;
    font-family: "Nunito", sans-serif;
    padding-top: 0.08rem;
}

.p-dropdown-label {
    padding-top: 0.65rem;
}

.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
    margin-top: 0rem;
}

ul {
    font-family: "Nunito", sans-serif;
}

.p-multiselect-panel .p-multiselect-items .p-multiselect-item {
    font-size: 0.795rem;
}

.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
    margin-top: -0.22rem;
}

.p-multiselect.p-multiselect-chip .p-multiselect-token {
    font-size: 0.78rem;
}

.connection {
    position: fixed;
    width: 100%;
    height: 100svh;
    background-image: radial-gradient(rgb(255 252 252 / 1050%), rgb(255 252 252 / 40%), rgb(255 252 252 / 100%));
    z-index: 2000;
    display: none;
}

.connection img{
    width: 36px;
    height: 36px;
}

.connection div{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.connection span{
    font-size: 1rem;
    font-weight: bold;
}

th, td {
    white-space: nowrap;
}

.p-overlaypanel .p-overlaypanel-content {
    font-family: "Nunito", sans-serif;
}

.p-dialog .p-datatable-table,
.p-datatable-table {
    font-family: "Nunito", sans-serif;
    font-size: 0.805rem;
}

.p-dialog .p-datatable-table th{
    border: unset;
}

.p-dialog .p-datatable-table th,
.p-datatable-table th {
    font-weight: 600;
}

.p-dialog .p-datatable .p-sortable-column .p-sortable-column-icon,
.p-datatable .p-sortable-column .p-sortable-column-icon {
    height: 10px;
}

.p-dialog .p-datatable .p-datatable-thead > tr > th 
.p-datatable .p-datatable-thead > tr > th {
    padding: .597rem 1rem;
    position: relative;
    font-weight: 700;
}

.p-dialog .p-datatable .p-datatable-tbody > tr > td,
.p-datatable .p-datatable-tbody > tr > td {
    padding: .597rem 1rem;
    position: relative;
    min-width: 54px;
    cursor: pointer;
}

tbody, td, tfoot, th, thead, tr {
    border-bottom: 1px solid #dbe0e6;
}

.p-dialog .p-datatable-loading-overlay,
.p-datatable-loading-overlay {
    background: rgba(255,250,250, 0.3);
}

.p-dialog .p-datatable .p-sortable-column .p-sortable-column-icon,
.p-datatable .p-sortable-column .p-sortable-column-icon {
    /* display: none; */
    position: absolute;
    z-index: 1;
    opacity: 0;
}

.p-dialog .p-datatable .p-sortable-column .p-column-title+span::after,
.p-datatable .p-sortable-column .p-column-title+span::after {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    width: .7rem;
    height: .7rem;
    background-image: url("data:image/svg+xml,%3Csvg width='0.7rem' height='0.7rem' viewBox='0 0 292 375' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M131.965 15.3808C139.5 7.12345 152.5 7.12346 160.035 15.3808L262.976 128.193C274.106 140.39 265.453 160 248.941 160H43.0589C26.5474 160 17.8943 140.39 29.0238 128.193L131.965 15.3808Z' fill='%23dde1ee'/%3E%3Cpath d='M160.035 359.619C152.5 367.877 139.5 367.877 131.965 359.619L29.0238 246.807C17.8942 234.61 26.5473 215 43.0589 215L248.941 215C265.453 215 274.106 234.61 262.976 246.807L160.035 359.619Z' fill='%23dde1ee'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: .7rem .7rem;
    content: "";
    margin-left: .5rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.p-dialog .p-datatable .p-sortable-column[aria-sort="descending"] .p-column-title+span::after,
.p-datatable .p-sortable-column[aria-sort="descending"] .p-column-title+span::after {
    background-image: url("data:image/svg+xml,%3Csvg width='0.7rem' height='0.7rem' viewBox='0 0 292 375' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M131.965 15.3808C139.5 7.12345 152.5 7.12346 160.035 15.3808L262.976 128.193C274.106 140.39 265.453 160 248.941 160H43.0589C26.5474 160 17.8943 140.39 29.0238 128.193L131.965 15.3808Z' fill='%23dde1ee'/%3E%3Cpath d='M160.035 359.619C152.5 367.877 139.5 367.877 131.965 359.619L29.0238 246.807C17.8942 234.61 26.5473 215 43.0589 215L248.941 215C265.453 215 274.106 234.61 262.976 246.807L160.035 359.619Z' fill='%23377dff'/%3E%3C/svg%3E%0A");
    content: "";
}

.p-dialog .p-datatable .p-sortable-column[aria-sort="ascending"] .p-column-title+span::after,
.p-datatable .p-sortable-column[aria-sort="ascending"] .p-column-title+span::after {
    background-image: url("data:image/svg+xml,%3Csvg width='0.7rem' height='0.7rem' viewBox='0 0 292 375' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M131.965 15.3808C139.5 7.12345 152.5 7.12346 160.035 15.3808L262.976 128.193C274.106 140.39 265.453 160 248.941 160H43.0589C26.5474 160 17.8943 140.39 29.0238 128.193L131.965 15.3808Z' fill='%23377dff'/%3E%3Cpath d='M160.035 359.619C152.5 367.877 139.5 367.877 131.965 359.619L29.0238 246.807C17.8942 234.61 26.5473 215 43.0589 215L248.941 215C265.453 215 274.106 234.61 262.976 246.807L160.035 359.619Z' fill='%23dde1ee'/%3E%3C/svg%3E%0A");
    content: "";
}

.p-overlaypanel-content .p-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #495057;
    min-width: 141px;
    font-size: .8rem;
}

.p-overlaypanel-content {
    margin: 9px;
}

.p-overlaypanel-content .p-button-icon {
    text-align: center;
    padding: 0;
    font-size: 0.93rem;
}

.p-overlaypanel-content .p-button-label {
    text-align: left !important;
}

.p-overlaypanel {
    box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.1);
    font-family: "Nunito", sans-serif;
}

.kebab-btn {
    width: 23px;
    border-radius: 100%;
    height: 22px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.kebab-btn span {
    padding-top: 2.1px;
}

.kebab-btn:focus, .kebab-btn:hover {
    background: var(--primary) !important;
    color: #fff !important;
    border: 1px solid var(--primary) !important;
    transition: .3s;
}

.btn-default:focus, .btn-default:hover {
    background: #f8f9fa !important;
    border: 1px solid #f8f9fa !important;
    color: #495057 !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

.p-paginator-left-content h5 {
    font-size: 12px;
}

.handle {
    cursor: grab;
    background: #fff;
}

.w-100 {
    width: 100%;
}

.p-fileupload .p-fileupload-content { 
    padding: 0px;
}

.img-wrapper {
    width: 100%;
    height: 100%;
    min-height: 170px;
}

.img-wrapper img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img-wrapper .img-remove {
    display: flex;
    position: absolute;
    bottom: 7px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 100% !important;
}

.p-fileupload-empty {
    padding: 12px 0;
}

.img-preview-cont .img-preview {
    margin: 0 auto;
}

.d-inline-block {
    display: inline-block;
}

.d-block {
    display: block;
}

.custom-img .camera-action-btn {
    right: unset !important;
    bottom: 8px;
}

.h-16 {
    height: 16px;
}

.option-wrapper {
    background: #fafafa;
    padding: 30px 36px;
}

.close-font {
    position: absolute;
    right: -38px;
    height: 17px;
    top: -20px;
    color: #bbbbbb;
}

.text-label {
    color: #b5b5b5;
    font-size: 0.875rem !important;
    text-transform: capitalize;
}

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

.justify-content-end {
    justify-content: end;
}

.btn-text-default {
    color: #999999;
    background: none;
}

.w-90 {
    width: 90%;
}

.right-span {
    margin-right: 44px;
    margin-top: 2px;
}

.sm-w {
    max-width: 150px;
    width: 150px;
    min-width: 150px;
}

.variation-model-table .table-cell {
    min-height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    color: #999;
    border: 1px solid #ebebeb;
    border-bottom-width: 0;
    border-right-width: 0;
    word-break: break-word;
}

.wrap {
    flex-wrap: wrap !important;
}

.p-dialog td {
    position: relative;
}

.table-cell input {
    text-align: center;
    border-color: rgb(102 102 102 / 30%);
    margin-left: calc(.75rem + 10px);
    width: 90%;
    padding: .375rem .75rem;
    border-radius: 4px;
    color: #5b6670;
}

.table-cell .with-peso {
    flex: 0 0 100%;
}

.excel-table .with-peso:after {
    left: 1.7rem;
    font-size: .775rem !important;
    top: 52%;
}

.fs-small {
    font-size: .775rem !important;
}

.fs-e-small {
    font-size: .695rem !important;
}

.z-index-9 {
    z-index: 9;
}

.account-payable-modal .with-peso:after {
    content: '₱';
    position: absolute;
    top: 49%;
    left: .75rem;
    transform: translateY(-50%);
    width: 15px;
    height: calc(100% - (.375rem* 2));
    font-size: 0.875rem;
    line-height: 1.5;
    color: inherit;
    display: flex;
    align-items: center;
}

.with-peso:after {
    content: '₱';
    position: absolute;
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    width: 15px;
    height: calc(100% - (.375rem* 2));
    font-size: 0.875rem;
    line-height: 1.5;
    color: inherit;
    display: flex;
    align-items: center;
}

.h-38 {
    height: 38px !important;
}

.account-payable-modal .with-peso:after{
    left:1.1rem;
}

.expense-modal .with-peso:after {
    top: 40.6%;
    left: 1.7rem;
    flex-direction: column;
}

.manage {
    max-height: 40.39px;
}

.form-overlay .field {
    position: relative;
}

.form-overlay .p-error {
    position: absolute;
    left: 0;
    top: -25px;
    z-index: 10;
    padding: 1px 10px;
    line-height: 1.5em;
    font-size: 12px;
    color: #fff;
    border-radius: 2px;
    background: #ff5f5f;
    -webkit-box-shadow: 0 2px 4px 0 #e8e8e8;
    box-shadow: 0 2px 4px 0 #e8e8e8;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    white-space: nowrap;
}

.left-12 {
    left: 12px !important;
}

.t-n-2 {
    top: -2px;
}

.wc-30 {
    width: 30px !important;
}

.pay-saving-modal .form-overlay .p-error, .saving-modal .form-overlay .p-error, .manage-saving-modal .form-overlay .p-error {
    top: -21px !important;
}

.kit-costing-items .p-error, .response-dialog .p-error {
    top: 6px !important;
}

.account-payable-modal .form-overlay .p-error, .edit-receivable-modal .form-overlay .p-error, .edit-category-modal .form-overlay .p-error {
    top: 4px !important;
}

.account-receivable-modal .form-overlay .accepted .p-error {
    top: -21px !important;
}

.account-receivable-modal .form-overlay .declined .p-error {
    top: 4px !important;
}

.payment-modal .form-overlay .p-error {
    top: -11px;
}

.create-modal .form-overlay .p-error {
    top: 0px;
}


.mct-1 {
    /* margin-top: 10px; */
}

.top-0 {
    top: 0;
}

.transaction-export-modal .form-overlay .p-error,
.beginning-modal .form-overlay .p-error,
.no-top .form-overlay .p-error {
    top: 0;
}

.form-overlay .p-error:after {
    border-color: #ff5f5f transparent transparent;
    border-width: 6px 8px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: 100%;
    left: 16px;
    bottom: 1px;
}

.form-overlay .p-error:empty {
    display: none;
}

.form-overlay th {
    /* border-width: 0 var(--bs-border-width) !important; */
}

.mxw-custom {
    max-width: calc(50% - ((0.5rem + 72px) / 2));
}

.form-overlay .table-responsive {
    border-top: 1px solid #dbe0e6 !important;
}

.form-overlay input::placeholder {
    text-transform: capitalize;
    font-family: "Nunito", sans-serif !important;
}

.h-sm {
    height: 24px;
}

.flex-wrap {
    flex-wrap: wrap;
}

/* img.thumbnail {
    width: 60px;
    min-height: 60px;
} */

.table-img {
    display: block;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: .425rem;
    position: relative;
    background: #e9edf0;
}

.table-img  img {
    width: 100%;
    min-height: 60px;
}

.white-space-br {
    white-space: pre-wrap;
}

.white-space-nr {
    white-space: nowrap;
}

.elem-center {
    margin: 0 auto;
}

.btn-content {
    height: 17px;
    margin: 1px;
}

.shop-cont {
    display: flex;
    align-items: flex-start;
}

.shop-cont .products-container {
    flex: 1;
    max-width: calc(100% - 480px);
    min-height: calc(100vh - 154px);
}

.shop-cont .cart-details-container {
    flex: 0 0 475px;
    max-width: 475px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    margin-left: auto;
    font-size: 12px;
}

img.empty {
    min-height: calc(100vh - (214px + (14px* 1.5) + 8.944rem + (0.85rem* 1.5) + (.85rem* 1.5) + (0.805rem* 1.5)));
    filter: opacity(0.2);
    position: relative;
    margin: 0 auto;
    display: block;
    filter: opacity(0.4);
}

#shop-products img.empty {
    min-height: 10vh;
    width: 22%;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
}

img.s2 {
    min-height: calc(100vh - (214px + (14px* 1.5) + 8.944rem + (0.85rem* 1.5) + (.85rem* 1.5) + (0.805rem* 1.5) + (0.875rem * 1.5) + 3px)) !important;
}

input.p-dropdown-filter.p-inputtext.p-component:focus {
    box-shadow: none;
    border: 1px solid #1791f2;
}

input:enabled:hover, textarea:enabled:hover, .p-dropdown:not(.p-disabled):hover {
    border-color: #2196F3;
}

input:enabled:focus, textarea:enabled:focus, .p-inputwrapper-focus {
    border-color: var(--primary) !important;
}

span.empty {
    color: #cacaca;
    font-size: .875rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.p-dialog-maximized .step-view {
    /* max-height: calc(100vh - (5rem + 4px)) !important; */
    max-height: calc(100svh - (5rem + 2px + ((1rem* 1.5)))) !important;
    height: calc(100svh - (5rem + 2px + ((1rem* 1.5)))) !important;
}

.expense-modal.p-dialog-maximized .section {
    max-height: calc(100svh - (4rem + (.875rem * 1.5) + (1.125rem * 1.2))) !important;
    height: calc(100svh - (4rem + (.875rem * 1.5) + (1.125rem * 1.2))) !important;
}

.hv-skeleton {
    height: 95vh;
}

/* .account-payable-modal .step-view {
    max-height: calc(100vh - (7rem + 2px + ((1rem * 1.5) + (0.875rem * 1.5)))) !important;
    height: calc(100vh - (7rem + 2px + ((1rem * 1.5) + (0.875rem * 1.5)))) !important;
    margin-block: 0 !important;
} */

.account-payable-modal .step-view {
    max-height: calc(95svh - (7rem + 2px + ((1rem * 1.5) + (0.875rem * 1.5)))) !important;
    height: calc(95svh - (7rem + 2px + ((1rem * 1.5) + (0.875rem * 1.5)))) !important;
    margin-block: 0 !important;
}

.stock-request-modal .step-view {
    max-height: calc(95svh - (7rem + 2px + ((1rem * 1.5) + (0.875rem * 1.5)))) !important;
}

.stock-request-modal .stock-row > .row{
    margin-left: 0px; 
    margin-right: 0px; 
}

.p-dialog-maximized-sub {
    max-height: 95%;
}

.shop-cont .header, .items-selection-container .header {
    display: flex;
    align-items: center;
    min-height: 50px;
    border-bottom: 1px solid #d8d8d8;
    box-shadow: 0 1px 2px #dcdcdc;
    margin-bottom: 1.325rem;
    padding: 0 .75rem;
    justify-content: space-between;
    position: relative;
    z-index: 9;
    width: 100%;
}

.product-card {
    flex: 0 0 81px;
    max-width: calc(81px - 4px);
    padding: 0;
    margin: 0 2px 4px;
    transition: unset;
}

.product-img-cont {
    height: auto;
    margin-bottom: 0;
    min-height: 75px;
    max-height: 75px;
}

.product-img-cont, .expense-item-img-cont {
    border-radius: 4px;
    overflow: hidden;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.product-details {
    display: none;
}

.products-container .body, .items-selection-container .body {
    max-height: calc(100vh - 166px);
    min-height: 0;
    align-items: flex-start;
}

.category-cont a {
    border: 1px solid #1791f2;
    border-radius: 4px;
    padding: .25rem .825rem;
    background: #fff;
    transition: background .25s ease-in-out;
    font-size: 12px;
    color: #1791f2;
}

.category-cont a.selected {
    background: #d0ecff;
}

.search-input {
    position: relative;
    margin-right: 15px;
}

.search-input .btn-searchset {
    border-radius: 50px;
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    color: #bbbbbb;
}

.w-medium {
    width: 254px;
}

.h-0 {
    height: auto;
}

.shop-search {
    flex: 0 0 100%;
    margin: 5px 0;
}

.h-80 {
    height: 80px;
}

.variation-shop.show, .expense-item-modal.show {
    transform: scale(1);
}

.show {
    display: block !important;
}

.delivery-cont {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.v-fade {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.variation-shop, .expense-item-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform .25s ease-in-out;
    transform: scale(0);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variation-shop.show .overlay, .expense-item-modal.show .overlay {
    bottom: 0;
}

.variation-shop .overlay {
    cursor: pointer;
}

.variation-shop .overlay, .expense-item-modal .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* border-radius: 4px; */
    background: rgba(0, 0, 0, .4);
    transition: bottom .25s;
    transition-delay: .5s;
}

.shop-cont .overlay, .payment-window-cont .overlay {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
}

.product-variation-cont {
    max-width: 400px !important;
}

.product-variation-cont, .expense-item-form-cont {
    margin: 1.825rem auto;
    display: flex;
    max-width: 400px;
    border-radius: 4px;
    background: #fff;
    z-index: 1;
    position: relative;
    padding: 1rem;
    flex: 1;
    font-size: 12px;
}

.product-variation-cont > div {
    padding: 0 5px;
}

.product-variation-cont > div, .expense-item-form-cont > div {
    position: relative;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.product-variant-details {
    flex: 1;
    max-width: 100%;
}

.product-variant-details .product-name {
    padding-right: 10px;
    margin-bottom: 4px;
}

.product-variant-details .product-name, .product-variant-details .product-price {
    line-height: 20px;
    font-size: 18px;
}

.product-variant-details .product-name {
    font-weight: 500;
    line-height: 1.75rem;
    font-size: 1.1rem;
    color: rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
}

.close-variant {
    top: -5px;
    right: 10px;
    font-size: 30px;
}

.close-variant, .close-expense-item-form {
    font-size: 32px;
    position: absolute;
    top: 5px;
    right: 15px;
    color: #8e8e8e;
    opacity: .6;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.variant-footer > button:last-child {
    margin-right: 0;
}

.variant-footer > button {
    min-width: 0;
    width: 50%;
    margin-right: 10px;
    max-width: calc(50% - 5px);
}

.variant-footer > button {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    min-width: 10.25rem;
    padding: 0 .75rem;
    font-size: 14px;
    max-width: 250px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-variation-cont > div.product-variant-img {
    display: none;
}

.align-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.product-variant-details .product-price {
    margin-bottom: 15px;
}

.product-variant-details .variant-cont > label, .variant-shop-label {
    width: 80px;
}

.product-variant-details .variant-cont > label, .variant-shop-label {
    color: #757575;
    display: flex;
    height: 33px;
    width: 110px;
    text-transform: capitalize;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.variation-shop .discount-cont {
    margin-bottom: 7px;
}

.variant-footer > button {
    min-width: 0;
    width: 50%;
    margin-right: 10px;
    max-width: calc(50% - 5px);
}

.product-variant-details .variant-cont > label, .variant-shop-label {
    color: #757575;
    width: 80px;
    text-transform: capitalize;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.product-variant-details .product-price {
    font-weight: 600;
    color: #ee4d2d;
    margin-bottom: 4px;
}

.product-variant-details .product-price-from {
    margin-bottom: 1.5625rem;
    font-weight: 800;
    font-size: .555rem;
    color: #16558f;
}

.variant-selection-cont .variant-cont > div {
    max-height: 175px;
    overflow: auto;
}

.product-variant-details .variant-cont > div {
    -webkit-flex-basis: 32.1875rem;
    -ms-flex-preferred-size: 32.1875rem;
    flex-basis: 32.1875rem;
    max-width: 32.1875rem;
}

.wrap {
    flex-wrap: wrap !important;
}

.product-variation, .expense-category {
    cursor: pointer;
    min-width: 5rem;
    min-height: 2.125rem;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: .25rem .75rem;
    margin: 0 8px 8px 0;
    color: rgba(0, 0, 0, .8);
    text-align: left;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, .09);
    position: relative;
    background: #fff;
    outline: 0;
    word-break: break-word;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.product-variation:hover, .product-variation.variant-selected, .expense-category:hover, .expense-category.selected {
    color: #3687ff;
    border-color: #3687ff;
}

.preview-header, .preview-content {
    border: 1px solid #e9e9e9;
    border-radius: .25rem;
}

.preview-header {
    background: #f6f6f6;
    padding: 0.01rem .08rem;
    color: #64615f;
}

.products-container .body, .cart-details-container .body, .items-selection-container .body {
    padding: .25rem .5rem;
    margin: 0 .225rem;
}

.packed-preview .items {
    min-height: calc(100vh - 301px);
    max-height: calc(100vh - 301px);
    overflow-y: auto;
}

.preview-header > div, .preview-content > div {
    /* flex: 0 0 23.333%; */
    max-width: 23.333%;
    flex: 1;
    padding: .25rem;
    color: #252421;
}

.preview-content {
    position: relative;
    align-items: center;
}

.preview-header, .preview-content {
    border: 1px solid #e9e9e9;
    border-radius: .25rem;
}

.preview-content {
    flex-wrap: wrap;
}

.preview-content > div {
    z-index: 1;
}

.preview-header > div.flex-product, .preview-content > div.flex-product {
    padding: .5rem .25rem;
}

.flex-product {
    flex: 0 0 125px !important;
    max-width: 125px !important;
}

.item-name > span:first-child {
    color: #007bff;
}

.item-name > span {
    display: block;
}

.preview-header > div:not(.flex-product), .preview-content > div:not(.flex-product) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cart-input-quantity, .variant-input-quantity-cont {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.cart-input-quantity button:first-child, .variant-input-quantity-cont button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cart-input-quantity button, .variant-input-quantity-cont button {
    outline: none;
    cursor: pointer;
    border: none;
    font-size: .875rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: background-color .1s cubic-bezier(.4,0,.6,1);
    transition: background-color .1s cubic-bezier(.4,0,.6,1);
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 2px;
    background: #fff;
    color: rgba(0, 0, 0, .8);
    width: 32px;
    height: 32px;
}

.cart-input-quantity input, .variant-input-quantity-cont input {
    width: 50px;
    height: 32px;
    border-left: none;
    border-right: none;
    font-weight: 400;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    cursor: text;
    border-radius: 0;
    -webkit-appearance: none;
}

.transaction-modal .cart-input-quantity input,.transaction-modal .variant-input-quantity-cont input {
    font-size: .675rem;
}

.cart-input-quantity input, .variant-input-quantity-cont input {
    outline: none;
    cursor: pointer;
    border: none;
    /* font-size: .870rem; */
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: background-color .1s cubic-bezier(.4,0,.6,1);
    transition: background-color .1s cubic-bezier(.4,0,.6,1);
    border: 1px solid rgba(0, 0, 0, .09);
    border-radius: 2px;
    background: #fff;
    color: rgba(0, 0, 0, .8);
    width: 32px;
    height: 32px;
}

.cart-input-quantity input {
    width: 25px;
    /* height: 25px; */
}

.cart-input-quantity button {
    width: 25px;
    /* height: 25px; */
}

.shop-cont .header, .shop-cont .header .form-group {
    margin-bottom: 0;
}

.cart-details-container .header {
    height: 45px;
    width: 100%;
}

.preview-footer {
    flex-wrap: wrap;
}

.preview-footer > h3 {
    font-size: 18px;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: right;
}

.normal-color {
    color: #333;
}

.m-l-auto {
    margin-left: auto;
}

.products-container .body, .items-selection-container .body {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
}

.product-card:hover, .expense-item-card:hover {
    /* box-shadow: 0 0 10px #dedede; */
    border-color: #84ccf9;
    transform: scale(1.02);
    cursor: pointer;
}

.product-card, .expense-item-card {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #dedede;
    transition: box-shadow .25s, border-color .25s, transform .25s;
}

.btn-pure {
    max-height: 34px;
    color: #007bff;
    font-size: 0.9rem;
    background: #d0ecff;
    border: 1px solid #1791f2;
    border-radius: 4px;
    padding: 0.25rem 0.825rem;
    transition: background .25s ease-in-out;
}

.btn-pure:hover, .btn-pure:focus, .btn-pure:active {
    color: #007bff !important;
    background: #d0ecff !important;
    border: 1px solid #1791f2 !important;
}

.product-variation:hover, .product-variation.variant-selected, .expense-category:hover, .expense-category.selected {
    color: #3687ff;
    border-color: #3687ff;
}

.product-variation-tick:before, .expense-category-tick:before {
    border: .9375rem solid transparent;
    border-bottom-color: #3687ff;
    content: "";
    position: absolute;
    right: -.9375rem;
    bottom: 0;
}

.product-variation-tick>.icon-tick-bold, .expense-category-tick>.icon-tick-bold {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    width: 10px;
    height: 10px;
}

.product-variation.variant-selected .product-variation-tick, .expense-category.selected .expense-category-tick {
    display: block;
}

.product-variation-tick, .expense-category-tick {
    width: .9375rem;
    height: .9375rem;
    position: absolute;
    overflow: hidden;
    right: 0;
    bottom: 0;
    display: none;
}

.product-variation-tick>.icon-tick-bold, .expense-category-tick>.icon-tick-bold {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    width: 10px;
    height: 10px;
}

.product-variation-tick svg {
    fill: currentColor;
}

.product-variation-tick svg:not(:root) {
    overflow: hidden;
}

.variant-footer button.btn svg, .variant-footer button.btn i {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    color: #fff;
    stroke: #fff;
    position: relative;
    font-size: 1rem;
}

.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect:before {
    content: "";
    background: #ffeb3b;
    display: block;
    position: absolute;
    border-radius: 50%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    opacity: 0;
    transition: all .5s;
    z-index: 0;
    -webkit-animation: ripple .5s ease-in;
            animation: ripple .5s ease-in;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: #007bff !important
}

.special-request-container {
    padding-top: 20px;
    max-width: 100%;
    border-radius: 3px 3px 10px 10px;
    font-size: 12px;
    position: absolute;
    width: 100% !important;
    height: 100%;
    background: #fbfbfb;
    left: 0;
    max-height: calc(100% - 10px);
    z-index: 2;
    transition:all 150ms ease;
}

.hide-container {
    max-height:0px;
    overflow:hidden;
    padding:0px;
    background-color:transparent;
    transition:all 150ms ease;
}

.special-request-container input[type*="radio"] {
    display: none;
}

.special-request-container input[type*="radio"]:checked+label {
    background: #e9ecef;
}

.special-request-container .payment-item {
    margin: 5px;
}

.payment-item {
    cursor: pointer;
    background: #f6f6f6;
    flex: 1;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px;
    text-align: center;
    border-radius: .5rem;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.special-request-container input[type*="radio"]:checked+label img {
    filter: grayscale(0);
}

.payment-item img {
    max-width: 25px;
    filter: grayscale(1) opacity(0.25);
    border-radius: 0.5rem;
}

.expense-modal .payment-item img {
    max-width: 50px;
    filter: grayscale(1) opacity(0.25);
    border-radius: 0.5rem;
}

.expense-modal .payment-item span {
    display: block;
    margin: 10px 0 0;
    font-weight: 500;
    color: #c5c5c5;
}

.expense-modal input.radio-payment-mode:checked+label span {
    font-weight: 600;
    color: #666;
}

.expense-modal input.radio-payment-mode:checked+label img {
    filter: grayscale(0);
}

input[name*="who"]:checked+label span {
    font-weight: 600;
    color: #666;
}

.special-request-container .payment-item span {
    display: inline-block;
    margin: 0;
    font-weight: 500;
    margin-left: 0.225rem;
    color: #c5c5c5;
    line-height: 1;
    margin-top: 3px;
    display: block;
}

.mode-of-payment-cont {
    display: flex;
    flex-wrap: wrap;
}

.mode-of-payment-cont > label:first-child {
    flex: 0 0 100%;
}

.w-50 {
    width: 50%;
}

.slide-fade-enter-active, .slide-fade-leave-active {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.t-0 {
    top: 0;
}

.r-0 {
    right: 0;
}

.released-modal .slip-content {
    max-height: calc(90vh - 14rem);
    margin-bottom: 1rem;
    overflow-y: scroll;
    padding: 0 .5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0 1.2rem;
}

.p-dialog-header {
    padding: 0.5rem 0.8rem
}
.vr-wizard--footer {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -2rem;
    padding: 0.5rem 2rem;
    background: #f5f5f5;
    display: flex;
    justify-content: flex-end;
}

.search-input, .expense-item-search {
    flex: 0 0 30% !important;
    background: #fbfbfb;
}

.table-top .search-input {
    flex: unset;
    background: #fbfbfb;
    width: 50%;
    margin-right: 6px;
    min-width: 260px;
}

.table-top .search-set {
    width: 50%;
}

.sort-container {
    flex: 0 0 10%;
}

.discount-item-cont {
    font-size: 80%;
    line-height: 1;
    text-align: center;
}

.text-lightgreen {
    color: #00c800;
}

.discount-item-cont > span {
    display: block;
}

.cart-input-quantity svg {
    font-size: 7px;
    width: 7px;
    height: 7px;
}

.mt-n {
    margin-top: -64px;
}

.mt-n2 {
    margin-top: -154px;
}

.btn-pure.active {
    background: #a9cbff !important;
}

.bg-highlight {
    background: #fafafa;
    border-radius: 4px;
}

.btn-dashed-blue {
    color: #1791f2;
    border: 1px dashed #1791f2
}

.btn-dashed-blue:hover {
    color: #1791f2;
    border: 1px dashed #1791f2
}

.h-15 {
    height: 15px;
}

.fs-medium {
    font-size: 0.875rem;
}

.product-modal .form-overlay th {
    color: #999;
}

.product-modal .table tbody tr td {
    color: #999;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.1s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.stock-input-number{
    border: 1px solid #dbe0e6;
    background-color: #fafbfe;
    width: 105px;
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    border-radius: 8px;
}

.stock-input-number button{
    background: transparent;
    border: none;
}

.stock-input-number button svg{
    display: none;
}

.stock-input-number-input{
    border: unset;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: unset;
    background-color: transparent;
    width: 100%;
}

.stock-dropdown{
    width: 7rem !important;
}

.input-text-cn-number[type="number"]::-webkit-outer-spin-button,
.input-text-cn-number[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-text-cn-number[type="number"] {
    -moz-appearance: textfield;
}

.supplier-tab{
    background: transparent !important;
    border: unset;
    margin-left: 12px;
}

.supplier-tab.nav-tabs li a,
.supplier-tab .p-tabview-panels,
.supplier-tab ul{
    background: transparent !important;
}

.truncate-200 {
    white-space: nowrap;
    overflow: hidden;   
    text-overflow: ellipsis; 
    max-width: 200px;  
}

.truncate-300 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.truncate-20-em {
    white-space: nowrap;
    overflow: hidden;   
    text-overflow: ellipsis; 
    max-width: 20em;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;   
    text-overflow: ellipsis; 
    max-width: 100px;  
}

.text-bold {
    font-weight: 800;
}

span.circle {
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 100%;
}

.range-span {
    background: #f8f9fa;
    padding: 0px 8px;
    text-transform: lowercase;
    border-top: 1px solid #dee2e5;
    border-bottom: 1px solid #dee2e5;
    height: 36px;
    align-items: center;
    display: flex;
}

.btn-filter, .btn-filter:hover {
    background: #16558f;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 14 10 21 14 21 14 14 22 3"></polygon></svg>');
    background-size: cover;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: left 9px center;
    height: 36px;
    width: 76px;
    color: #fff;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: end;
}

.btn-filter-close, .btn-filter-close:hover {
    background: #ea3322;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
    background-size: cover;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
}

.input-blocks .btn-filters:hover {
    color: #fff;
}

.green-checked-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #28a745; /* Green background color */
    position: relative;
}

.green-checked-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 12px;
    border-left: 4px solid white;
    border-bottom: 4px solid white;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.copy-clip-cred{
    margin-top: 1.5rem;
    text-align: center ;
}

.span-close {
    margin-top: -3px;
}

.empty-items {
    min-height: calc(100vh - 179px);
    width: 100%;
    overflow-y: auto;
}

.empty-items div {
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.empty-items  h6 {
    color: #b7b7b7;
}

.w-stepper {
    display: flex;
    --circle-size: clamp(1rem, 1vw, 2rem);
    --spacing: clamp(0.25rem, 1vw, 0.5rem);
    padding: 0;
    margin: 1rem;
}

.w-stepper__item.active, .w-stepper__item.completed {
    color: var(--wizard-stepper--active-font-color)!important;
}

.w-stepper__item {
    display: flex;
    gap: var(--spacing);
    align-items: center;
}

.w_stepper__item_content {
    display: flex;
    gap: var(--spacing);
    align-items: center;
} 

.w_stepper__item_content::before {
    --size: 3rem;
    content: "";
    display: block;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background-color: var(--wizard-circle-color);
}

.w-stepper__item.active .w_stepper__item_content::before, .w-stepper__item.completed .w_stepper__item_content::before {
    border-color: var(--wizard-circle-border-color);
}

.w-stepper__item.active .w_stepper__item_content::before, .w-stepper__item.completed .w_stepper__item_content::before {
    background-color: var(--wizard-stepper--active);
}

.w-stepper__item:not(:first-child)::before {
    content: "";
    position: relative;
    z-index: -1;
    height: 2px;
    background-color: var(--wizard-line-color);
    flex: 1;
    margin-right: 0.5rem;
}

.w-stepper__item:not(:first-child)::before {
    z-index: 0!important;
}

.w-stepper__item:not(:first-child)::before {
    content: "";
    position: relative;
    z-index: -1;
    height: 2px;
    background-color: var(--wizard-line-color);
    flex: 1;
    margin-right: 0.5rem;
}

.w-stepper__item:not(:first-child) {
    flex: 1;
    margin-inline-start: 0.5rem;
}

.step-view {
    margin-block: 1rem;
    padding: 1rem;
    max-height: calc(90vh - (6rem + 192px));
    overflow: auto;
}

.process-panel .step-view {
    /* max-height : calc(100vh - ((113px + 9.75rem) + ((12px * 1.5) * 4) + (1rem * 1.2))) !important;
    height: calc(100vh - ((113px + 9.75rem) + ((12px * 1.5) * 4) + (1rem * 1.2))); */
    /* max-height : calc(100vh - (113px + 11.375rem + ((12px * 1.5) * 4)))  !important;
    height: calc(100vh - (113px + 11.375rem + ((12px * 1.5) * 4)));  */
    /* height: calc(100vh -(113px + 11.575rem +((12px* 1.5)* 4))); */
    max-height: calc(100vh - ((113px + 9.75rem) + ((12px * 1.5) * 4) + (1rem * 1.2) + ((.75rem * 1.5) + .625rem) + 63px + 1.25rem)) !important;
    height: calc(100vh - ((113px + 9.75rem) + ((12px * 1.5) * 4) + (1rem * 1.2) + ((.75rem * 1.5) + .625rem) + 63px + 1.25rem));
}

.step-view.my-0.p-0 {
    padding-left: 1.5rem!important;
    padding-right: 1.5rem!important;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    max-height: calc(90vh - (6rem + 90px));
}

/* .vr-wizard--footer {
    display: grid;
    grid-template-columns: repeat(2, auto);
} */

.vr-wizard--footer-left {
    text-align: start;
}

.vr-wizard--footer-right {
    text-align: end;
}

.vr-wizard--btn {
    background: var(--wizard-stepper--btn-bg);
    color: var(--wizard-stepper--btn-color);
    border: 1px solid var(--wizard-stepper--btn-border-color);
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.5rem 1rem;
    margin: 0 0.2rem;
}

.secondary{
    background: #fff !important;
    color: #16558f;
    border: 1px solid #16558f;
}

.page-btn .secondary {
    background: #fff !important;
    color: #16558f;
    border: 1px solid #16558f;
}

.br-8 {
    border-radius: 8px;
}

.vr-wizard--prev-btn {
    background: var(--wizard-stepper--prev-btn-bg);
    color: var(--wizard-stepper--prev-btn-color);
    border: 1px solid var(--wizard-stepper--prev-btn-border-color);
}

.vr-wizard--prev-btn[disabled] {
    opacity: 0.6;
}

.proof-custom {
    opacity: 0;
    height: 28px;
    width: 140px;
}

.proof-custom-img {
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    bottom: 0;
}

.order-form {
    font-size: 0.805rem;
    max-height: calc(90vh - 8.125rem) !important;
    overflow-y: scroll;
    margin-right: -1.5rem;
    margin-left: -1.5rem;
    padding: 0px 1.2rem !important;
    margin: 0.5rem -1.5rem;
    position: relative;
}

.payment-form {
    font-size: 0.805rem;
}

.order-status-cont .details-label {
    min-width: 165px;
    margin-right: 0;
}

.manage-modal .details-label, .refund-modal .details-label {
    min-width: 72px;
}

.details-label {
    margin-right: 1rem;
    margin-bottom: 0.125rem;
    color: #6d6d6d;
    font-weight: 500;
    padding-left: 0;
    white-space: nowrap;
    min-width: 100px;
}

.details-content {
    margin-bottom: 0;
    color: #3e3e3e;
    font-weight: 600;
    padding-left: 0.825rem;
    text-transform: capitalize;
    margin-bottom: 0.125rem;
}

.title-separator {
    border-top: 2px solid #e0e0e0;
    color: #3b9cff;
    /* border-bottom: 2px solid #e0e0e0; */
    padding: 11px 5px 0 5px;
    font-size: 1rem;
    font-weight: 600;
}

.title-separator-no-bt {
    color: #3b9cff;
    /* border-bottom: 2px solid #e0e0e0; */
    padding: 11px 5px 0 5px;
    font-size: 1rem;
    font-weight: 600;
}

.bt-light-1 {
    border-top: 2px solid #e0e0e0;
}

.view-order-items > div > div, .view-order-items-title > div > div {
    flex: 1;
    padding: .25rem .5rem .75rem;
}

.view-order-items > div, .view-order-items-title > div {
    display: flex;
    color: #3e3e3e;
    margin-bottom: .75rem;
}

.order-item-title {
    border-bottom: 3px solid #3b9cff;
    color: #3b9cff;
    font-weight: 600;
}

.view-order-items {
    max-height: 275px;
    overflow: auto;
}

.table-img > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.table-img {
    flex: 0 0 60px;
    height: 60px;
    margin-right: 0.825rem;
}

.table-img {
    display: block;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: .425rem;
    position: relative;
    background: #e9edf0;
}

.p-rm {
    padding: 0 !important;
}

.fw-600 {
    font-weight: 600;
}

.full-w {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.fx-50 {
    flex: 0 0 50%;
}

.assignee-content .p-image img {
    height: 209px;
    border: 1px solid #ccbebe;
    border-radius: 5px;
}

.view-order-items > div > div:first-child, .view-order-items-title > div > div:first-child {
    flex: 2;
}

.view-order-items.flex-1 > div > div:first-child, .view-order-items-title.flex-1 > div > div:first-child {
    flex: 1;
}

#view-order-modal .payment-info {
    flex: 0 0 75%;
}

.payment-info {
    flex: 0 0 75%;
    margin-left: auto;
    padding: .75rem;
    background: #f3f2f2;
    border-radius: .325rem;
}

.payment-info > div > *, .payment-info > div > div > * {
    flex: 1;
    text-align: right;
}

.text-blue {
    color: #3b9cff !important;
}

.text-dark-blue {
    color: #16558f !important;
}

.photo {
    width: 28px;
    margin-right: 10px;
}

button.swal2-styled.swal2-confirm {
    background-color: #16558f;
}

button.swal2-styled.swal2-confirm:hover {
    background-color: #134d83;
}

.top-danger .p-dialog-header, .top-danger.p-dialog-header {
    border-color: #fa6b6b;
    --bs-text-opacity: 1;
    border-top: 7px solid;
}

.top-danger .p-dialog-header-icons .p-dialog-header-icon {
    color: #fa6b6b;
}

.top-secondary .p-dialog-header, .top-secondary.p-dialog-header {
    border-color: #16558f;
    --bs-text-opacity: 1;
    border-top: 7px solid;
}

.top-secondary .p-dialog-header-icons .p-dialog-header-icon {
    color: #16558f;
}

.text-secondary {
    color: #16558f !important;
}

.w-custom-14{
    width: 14%;
}

.custom-clipboard-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16" part="svg"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" fill="white"></path><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" fill="white"></path></svg>');
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat; 
    background-position: center;
    border: none; 
    cursor: pointer; 
    padding: 0;
    background-color: transparent;
}

.custom-clipboard-icon.copied {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-clipboard-check" viewBox="0 0 16 16" part="svg"><path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"></path><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"></path><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"></path></svg>') !important;
}

.prod-table .p-datatable .p-datatable-tbody > tr > td {
    white-space: normal;
}

.text-limit {
    width: 133px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datatable-custom {
    /* overflow-y: scroll !important;
    width: 50%; */
}

.color-white {
    color: #fff;
}

.header-blue {
    background:  #16558f; 
}

.width-limit {
    max-width: 942px;
}

.plc-10 {
    padding-left: 10px;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s ease, transform 0.5s ease;
}
  
.fade-enter, .fade-leave-to {
    opacity: 0;
    transform: translateX(100%);
}

.rounded-custom {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 5px;
    font-size: 9px !important;
    color: #fff !important;
}

.rounded-custom:hover {
    color: #fff;
}

.mop-header {
    padding: 5px 0;
    border-bottom: 2px solid #f6f6f6;
    /* border-top: 2px solid #e9ecef;*/
}

.mop-header .btn-theme {
    width: auto;
    border-style: solid;
    margin-left: auto;
    min-width: 50px;
    padding: 0 10px;
    height: 36px;
}

.adjust-camera .camera-action-btn {
    right: 5rem !important;
}

.adjust-camera .upload-container {
    cursor: default !important;
}

.payment-container {
   max-height: calc(90svh - (6rem + (.875rem * 1.5)));
   overflow-y: auto;
}

input[name*="payment"]:checked+label {
    background: #e9ecef;
}

.payment-modal .payment-item img {
    max-width: 36px;
    margin-bottom: 4px;
}

input[name*="payment"]:checked+label img {
    filter: grayscale(0);
}

.payment-modal .payment-item span {
    margin: 0;
}

input[name*="payment"] {
    display: none;
}

.payment-modal .payment-item {
    cursor: pointer;
    background: #f6f6f6;
    flex: 1;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 7px 5px 3px 5px;
    text-align: center;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
}

.payment-item span {
    display: block;
}

input[name*="payment"]:checked+label span {
    font-weight: 600;
    color: #666;
}

.payment-item span {
    display: block;
    margin: 10px 0 0;
    font-weight: 500;
    color: #c5c5c5;
}

.modal-body {
    font-size: 0.805rem;
}

input::placeholder {
    color: #9e9e9e !important;
    opacity: 1;
    font-weight: normal !important;
}

.payment-modal .col-md-5 .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    justify-content: space-between;
}

.p-button[data-pc-name="uploadbutton"], .p-button[data-pc-name="cancelbutton"] {
    display: none;
}

.payment-modal .p-button[data-pc-name="removebutton"] {
    position: absolute;
    top: 0;
    right: 0px;
}

.p-fileupload .p-fileupload-buttonbar {
    background: none;
    padding: 0;
    border: unset;
    font-family: 'Nunito';
}

.p-fileupload .p-fileupload-content {
    background: #ffffff;
    padding: 0;
    border: none !important;
    border-bottom-right-radius: unset;
    border-bottom-left-radius: unset;
    margin-top: 8px;
}

.bg-none {
    background: none;
}

.bg-none:focus, .bg-none:hover {
    box-shadow: none !important;
    outline: none !important;
}

.h-400 {
    height: 400px;
}

.object-contain {
    object-fit: contain;
}

.mxw-medium {
    max-width: 140px;
}

.mxw-semi {
    max-width: 160px;
}

.mxw-large {
    max-width: 260px;
}

.fs-6-sub {
    font-size: 13px;
}

.fw-semi {
    font-weight: 499;
}

.bundle-cont {
    max-height: 217px;
    overflow-y: scroll;
}

.card-excel {
    max-height: calc(100svh - (227px + 1.7rem + (.875rem * 1.5) + (2rem + (0.805rem * 1.5)) + (2rem + (0.805rem * 1.5)) + 1rem)) !important;
}

.payment-modal .p-fileupload .p-fileupload-file {
    padding: 10px;
    border: none;
    border-radius: 7px;
    background: #f6f6f6;
    margin-bottom: 0.3rem;
}

.p-fileupload .p-progressbar {
    height: 0;
}

.p-fileupload-file-badge, .p-fileupload-file-name, .p-fileupload-file-size {
    display: none;
}

.p-fileupload-file-remove {
    color: #6c757d;
}

.p-fileupload-file-remove:hover, .p-fileupload-file-remove:focus {
    background: none
}

.c-gray {
    color: #91989e;
}

.payment-modal .form-overlay .p-error {
    top: -20px;
}

.form-overlay.area-handle .p-error{
    position:relative;
    top:-50px;
}

form.register section.step-view{
    overflow-x: hidden !important;
}

.img-con {
    display: flex;
    justify-content: space-around;
    height: 100%;
}

.img-con-item {
    flex: 1;
    padding: 0 20px;
}

.img-con img {
    max-width: 100%;
    height: auto;
    max-height: calc(100% - 100px);
    border-radius: 4px;
}

.order-modal .img-con img {
    max-width: 100%;
    height: auto;
    max-height: 168px;
    border-radius: 4px;
}

.no-notif-bell .vue-feather__content{
    display: inline-block;
}

.p-overlaypanel-content .p-button.notif-btn{
    color: #fff !important;
}

.p-overlaypanel-content .notif-btn .p-button-label{
    text-align: center !important;
}

.sidebars.settings-sidebar .accordion-content.active{
    background-color: var(--primary);
    color: #fff;
    border-radius: 8px;
    padding: 10px 18px;
}

.sidebars.settings-sidebar .accordion-content.active:hover{
    color: #fff;
}

.sidebars.settings-sidebar .accordion-content:hover{
    color: var(--primary);
}

.sidebars.settings-sidebar .accordion-content{
    font-size: 14px;
    color: #b8bcc9;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: 500;
    width: 100%;
    padding: 10px 10px 10px 15px;
}

.custom-panel {
    box-shadow: 0px 2px 3px #181717 !important;
    max-width: 353px !important;
    /* position: fixed !important; */
}

/* .p-overlaypanel.bg-warning:before {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ff9900 !important;
}

.p-overlaypanel.bg-warning:after {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ff9900 !important;
} */

.accordion-settings .p-accordion-content{
    background: transparent;
    border: unset;
}

.accordion-settings .p-accordion-header-action {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: .5rem;
}

.page-wrapper.production_staff .content
{
    padding: 8px 24px !important;
    padding-bottom: 0;
}

.profile-pic i.icon{
    display: none;
}

.profile-pic .camera-action-btn span.p-button-label{
    display: none;
}

.profile-pic .upload-label{
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-bottom: 0 !important;
}

.swal2-title {
    font-size: 1.25rem;
}

.z-9 {
    z-index: 9;
}

.mr-content {
    /* right: 24px; */
}

.production_staff .process-panel .vr-wizard--footer, .ofd_staff .process-panel .vr-wizard--footer {
    margin-bottom: -4px;
    margin-left: -1rem;
    margin-right: -1rem;
    z-index: 1000;
    position: absolute;
    width: 100%;
    /* background: #c8c8fe; */
}

.production_staff .vr-wizard--btn, .ofd_staff .vr-wizard--btn {
    z-index: 1000;
    position: relative;
}

/* .production_staff .step-view {
    background: #a6d5fa;
} */

.custom-border {
    border: none !important;
    border-bottom: 2px solid #dce0e5 !important;
    padding: 8px 5px !important;
    border-radius: 2px !important;
}

.custom-border:hover,.custom-border:focus {
    border: none !important;
    border-bottom: 3px solid #d5d6d9 !important;
    background: unset !important;
    box-shadow: unset !important;
    outline: none !important;
    color: unset !important;
}

tr.danger-alert-blink>td, div.danger-alert-blink {
    animation: blinkDangerBg 1.5s ease-in-out infinite, blinkDangerBorderColor 1.5s ease-in-out infinite;
}

tr.danger-alert-blink>td *, div.danger-alert-blink * {
    animation: blinkDangerColor 1.5s ease-in-out infinite;
}

tr.success-alert-blink>td, div.success-alert-blink {
    animation: blinkSuccessBg 1.5s ease-in-out infinite, blinkSuccessBorderColor 1.5s ease-in-out infinite;
}

tr.success-alert-blink>td *, div.success-alert-blink * {
    animation: blinkSuccessColor 1.5s ease-in-out infinite;
}

tr.warning-alert-blink>td, div.warning-alert-blink {
    animation: blinkWarningBg 1.5s ease-in-out infinite, blinkWarningBorderColor 1.5s ease-in-out infinite;
}

tr.warning-alert-blink>td *, div.warning-alert-blink * {
    animation: blinkWarningColor 1.5s ease-in-out infinite;
}

tr.secondary-alert-blink>td, div.secondary-alert-blink {
    animation: blinkSecondaryBg 1.5s ease-in-out infinite, blinkSecondaryBorderColor 1.5s ease-in-out infinite;
}

tr.secondary-alert-blink>td *, div.secondary-alert-blink * {
    animation: blinkSecondaryColor 1.5s ease-in-out infinite;
}

.bg-success-blink {
    background-color: rgba(22, 160, 133, 0.5);
    animation: circleblinkSuccessBg 1.5s ease-in-out infinite;
}

.bg-info-blink {
    background-color: rgba(23, 162, 184, 0.5);
    animation: circleblinkInfoBg 1.5s ease-in-out infinite;
}

tr.warning-alert>td, div.warning-alert {
    color: #FF9F43;
    border-bottom: 1px solid rgba(23, 162, 184, 0.1);
}

tr.success-alert>td, div.success-alert {
    color: #17a2b8;
    border-bottom: 1px solid rgba(23, 162, 184, 0.1);
}

tr.success-alert>td img, div.success-alert img {
    /* filter: brightness(0) saturate(100%) hue-rotate(210deg); */
}

tr.success-alert>td *, div.success-alert * {
    color: #17a2b8;
}

tr.warning-alert>td *, div.warning-alert * {
    color: #FF9F43 !important;
}

.leaflet-control-attribution.leaflet-control{
    display: none;
}

.flow-direction-row-reverse {
    flex-direction: row-reverse;
}

.chat-content {
    width: 350px;
    /* position: absolute;
    bottom: 0;
    right: 366px; */
}

.pl-c-1 {
    padding-left: 0.700rem !important;
}

.chat-input {
    max-height: 145px;
}

.chat.right .chat-message {
    background: #16558f !important;
    border-radius: 34px;
    color: #fff;
}

.upper-label {
    position: absolute;
    top: 1px;
    font-size: .6rem;
}

.fs-moderate {
    font-size: .875rem;
}

.swal2-title {
    text-transform: capitalize;
}

.chat-content .chat-header{
    background: #16558fc2;
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px;
    color: #fff;
}

.chat-content .chat-footer .chat-file-btn,
.chat-content .chat-header .chat-close-btn{
    width: 25px;
}

.chat-content .chat-file-btn {
    color: #4e7eaa;
}

.chat-content .chat-btn svg{
    color: #4e7eaa !important;
    stroke-width: 1 !important;
}

.chat-content .chat-body{
    height: 310px;
    overflow-y: auto;
    overflow-x: hidden;
}

.chat-items .h-20 {
    height: 20px;
}

.chat-content .chat-body .chat-message{
    border-radius: 10px;
    padding: .50rem;
    width: auto;
    max-width: 260px;
    white-space: pre-wrap;
    background: #e9eef1;
}

.chat-content .chat-message img {
    height: 150px;
    width: 100%;
}

.chat-content .chat-body .chat-typing{
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 62px;
}   

.chat-input-container {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px;
    max-width: 500px;
    margin: 0 auto;
    cursor: text;
    transition: background-color 0.2s;
}

.chat-input-container.dragging {
    background-color: #f0f8ff;
    border-color: #007bff;
}

.chat-input-container .image-preview {
    flex: 0 0 15%;
    height: 52px;
}

.chat-content .image-preview {
    flex: 0 0 15%;
    height: 52px;
}

.chat-btn {
    cursor: pointer !important;
    padding-bottom: 4px;
}

.chat-content .spinner-container {
    position: absolute;
    top: 5rem;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translate(-50%, -50%);
}

.chat-content .upload-label {
    padding-bottom: 0;
    font-size: 0rem;
}

.chat-textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: vertical;
    padding: 8px;
    font-size: 14px;
    border-radius: 6px;
    box-sizing: border-box;
}

.image-preview {
  position: relative;
  margin-top: 10px;
}

.preview-img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.remove-image-btn {
  position: absolute;
  top: 5px;
  right: 1px;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  cursor: pointer;
}

.hidden-file {
  display: none;
}

.send-container {
  text-align: right;
  margin-top: 10px;
}

.send-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.send-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

@keyframes typingDot {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}

.chat-content .chat-body .chat-typing .typing-dot{
    width: 2px;
    height: 2px;
    background-color: #747c84;
    border-radius: 50%;
    margin-right: 2px;
    animation: typingDot 1s infinite;
}

.chat-content .chat-body .chat-typing .typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-content .chat-body .chat-typing .typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

.chat-content .chat-body .chat-typing .typing-text{
    font-size: 12px;
    color: #91aac1;
    margin-right: 5px;
    font-style: italic;
    font-weight: 300 !important;
}

.chat-input-container textarea {
    /* height: 39px !important; */
    resize: vertical; 
    box-shadow: unset !important;
    border-radius: 10px 10px 0 0;
    padding: 11px;
    background: #f8f9fa;
}

.top-n-half {
    top: -0.5rem;
}

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

.chat-sidebar .chat-list {
    padding: 1rem 1.5rem;
    background: #e2eff9;
    height: 100vh;
    width: 352px;
}

.chat-sidebar .p-tabview .p-tabview-nav {
    background: transparent;
}

.chat-sidebar .p-tabview .p-tabview-nav li .p-tabview-nav-link {
    background: transparent;
}

.chat-sidebar  .p-tabview .p-tabview-panels {
    background: transparent;
}

.chat-sidebar .chat-items {
    padding: 1rem .5rem;
    height: calc(100vh - 6rem);
    overflow-y: auto;
    overflow-x: hidden;
}

.chat-sidebar .circle {
    width: 14px;
    height: 14px;
    bottom: 4px;
    right: 4px;
}

.chat-sidebar .user {
    display: flex;
    align-items: center;
    padding: 5px 2px;
    border-bottom: 1px solid #d5d6d9;
    background: #e2eff9;
    cursor: pointer;
}

.chat-list .search-input {
    width: 100%;
    margin-right: 0px;
}

.chat-sidebar .user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    border-bottom: 1px solid #16558f;
}

.chat-sidebar .online {
    color: green;
}

.chat-sidebar .offline {
    color: red;
}

.chat-content .chat-footer {
    display: flex;
    flex-direction: row;
    align-items: end;
    padding: .50rem;
    border-top: unset;
}

.chat-bubble {
    display: flex;
    flex-direction: column;
    color: #fff;
    align-items: center;
}

.emoji-panel {
    bottom: 3rem;
}

.chat-bubble .chat-head {
    position: relative;
    display: flex;
    flex-direction: row;
}

.chat-bubble .group-head {
    position: relative;
}

.chat-bubble .group-head,
.chat-bubble .chat-head .chat-head-content,
.new-chat {
    cursor: pointer;
    background: #16558f;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: glowPulse 3.5s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.new-chat .vue-feather {
    color: #fff;
    width: 20px;
}

.btn-elipsis{
    color: #fff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
}

.chat-bubble .group-head{
    background-size: cover;
    background-position: center;
    color: #333;
}

.chat-head-group-list{
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.chat-head-group-list .vue-feather{
    color: #5b6670;
    display: none;
}

.chat-head-group-list .group-item{
    padding: 3px 5px;
}

.chat-head-group-list .group-item:hover{
    background: #4444441c;
    border-radius: 10px;
}

.chat-head-group-list .group-item:hover .vue-feather{
    display: block;
}

.chat-bubble .group-head .chat-head-close,
.chat-bubble .chat-head .chat-head-close{
    cursor: pointer;
    position: absolute;
    color: #333;
    top: 0px;
    right: 0px;
    background: #fff;
    height: 15px;
    width: 15px;
    border-radius: 10px;
    display: none;
}

.chat-bubble .group-head:hover .chat-head-close, 
.chat-bubble .chat-head:hover .chat-head-close{
    display: block;
}

.announcement-detail-modal .profile-pic .upload-wrapper {
    width:36.5% !important;
}

.p-inputotp-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.notification-carousel .carousel__pagination-button--active::after{
    background-color: var(--primary);
}

.p-dialog-mask.p-component-overlay.p-component-overlay-enter.notification-popup{
    animation:unset;
    background-color: #ffffff3b !important;
}

.ellipsis-paragraph {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.received-image .adjust-camera .camera-action-btn {
    right: 5.4rem !important;
}

.mn-w-100 {
    min-width: 100%;
}

.notification_not_read{
    background: rgb(33 150 243 / 10%);
}

.flex-80 {
    flex: 0 0 80%;
}

.flex-20 {
    flex: 0 0 20%;
}
/* Start Carousel Notification */
.carousel__item{
    min-height: 350px;
    width: 100%;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel__slide {
    padding: 5px;
}

.carousel__viewport {
    perspective: 2000px;
}

.carousel__track {
    transform-style: preserve-3d;
}

.carousel__slide--sliding {
    transition: 0.5s;
}

.carousel__slide {
    opacity: 0.9;
    transform: rotateY(-20deg) scale(0.9);
}

.carousel__slide--active ~ .carousel__slide {
    transform: rotateY(20deg) scale(0.9);
}

.carousel__slide--prev {
    opacity: 1;
    transform: rotateY(-10deg) scale(0.95);
}

.carousel__slide--next {
    opacity: 1;
    transform: rotateY(10deg) scale(0.95);
}

.carousel__slide--active {
    opacity: 1;
    /* transform: rotateY(0) scale(1.8); */
    z-index: 1;
}
/* End Carousel Notification */

.notification-content{
    display: flex;
    flex-direction: row;
    position: absolute;
    width: 100%;
    flex-wrap: wrap;
    left: 0;

}

.notification-content .announcement-content{
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100vh;
    justify-content: center;
    align-items: flex-start;
}

.notification-content .announcement-details{
    display: flex;
    width: 50%;
    height: 90vh;
    justify-content: end;
    align-items: center;
    padding-right: 50px;
    margin: 0 auto;
}

.notification-content .announcement-content .announcement-title{
    text-align: start;
    font-weight: 600;
    font-size: 46px;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    line-height: 46px;
    margin-bottom: 14px;
}

.notification-content .announcement-content .announcement-message{
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    text-align: start;
    font-size: 18px;
    width: 90%;
}

.plain::before,
.style-4::before,
.style-3::before,
.style-2::before,
.style-1::before{
    content: '';
    display: block;
    background-image: url('../images/announcement/style1.svg');
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%; 
    position: absolute;
    top: 45px;
    left: 0;
}

.ellipsis {
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.w-25 span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 56px !important;
}

.bg-light-danger {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg,#c2a8a8, rgb(220 53 69), #fac2c2);
    background-size: 400% 400%;
    animation: gradientAnimation 8s ease infinite;
}
@keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

.bg-orange-subtle {
    background: #ffe5b4 !important;
}

.dash-widget.active {
    background: rgb(33 150 243 / 10%) !important;
}

.sh-100 {
    max-height: 108px;
    max-width: 114px;
}

.bottom-h {
    display: flex;
    align-items: end;
}

.manage-saving-modal .view-order-items {
    max-height: 600px;
    overflow: auto;
}

.h-265 {
    height: 265px;
}

.f-half {
    flex: 0 0 50%;
}

.mw-300 {
    min-width: 300px;
}

.mw-200 {
    min-width: 200px;
}

.mw-230 {
    min-width: 230px;
}

.mw-180 {
    min-width: 180px;
}

.mw-251 {
    min-width: 251px;
}

.mw-100 {
    min-width: 100px;
}

.mw-130 {
    min-width: 130px;
}

.mxw-130 {
    max-width: 130px;
}

.mw-108 {
    min-width: 108px;
}

.mw-90 {
    min-width: 90px;
}

.mw-30 {
    min-width: 30px;
}

.mxw-200 {
    max-width: 200px;
}

.mx-h-300 {
    max-height: 300px;
}

.border-radius-5 {
    border-radius: 5px !important;
}

.d-inline-block {
    display: inline-block;
}

.overflow-auto {
    overflow: auto;
}

.cursor-default {
    cursor: default;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

.c-gap-2 {
    gap: .55rem;
}

.c-btn {
    bottom: 30px;
    right: 10px;
}

.mxw-0 {
    max-width: 0;
}

.mnh-20 {
    min-height: 20px;
}

.cursor-pointer {
    cursor: pointer;
}

.style-2::before{
    background-image: url('../images/announcement/style2.svg');
}

.style-3::before{
    background-image: url('../images/announcement/style3.svg');
}

.style-4::before{
    background-image: url('../images/announcement/style4.svg');
}

.plain::before{
    background-image: url('../images/announcement/plain.svg');
}

.p-virtualscroller-content span {
    font-size: 0.805rem;
}

.default .notification-content div:first-child,
.style-4 .notification-content div:first-child,
.style-2 .notification-content div:first-child{
    order: 2;
}

.default .notification-content .announcement-content,
.style-4 .notification-content .announcement-content,
.style-2 .notification-content .announcement-content{
    align-items: flex-end;
}

.default .notification-content,
.plain .notification-content{
    flex-direction: column;
}

.default .notification-content .announcement-content,
.plain .notification-content .announcement-content{
    width: 100%;
    height: 40vh;
    align-items: center;
}

.default .notification-content .announcement-content .announcement-message,
.plain .notification-content .announcement-content .announcement-message{
    padding-left: 5.5rem !important;
    padding-right: 5.5rem !important;
    text-align: center;
    width: 100%;
}

.default .notification-content .announcement-details{
    width: 100%;
    height: 33vh;
    padding-right:0;
}

.default .announcement-details.no-carousel,
.plain .announcement-details.no-carousel{
    display: none;
}

.response-content .response-btns{
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.response-content .response-btn{
    width: 15%;
    border-radius: 9px;
    filter: grayscale(1);
}

.response-content .response-btn.active,
.response-content .response-btn:hover{
    filter: unset;
}

.response-footer{
    display: flex;
    align-items: center;
    justify-content: end;
}

.response-content .small-text{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.p-float-label > label.filter-account{
    z-index: 1;
}

.p-float-label:has(.p-inputwrapper-focus) label.filter-account, 
.p-float-label:has(.p-inputwrapper-filled) label.filter-account{
    z-index: 1;
    top: -6px;
}

.report-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.report-header .total-report-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.sales-report .page-btn.active a{
    border-color: var(--primary) !important;
}

.sales-report-tables .card-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.sales-report-tables .p-datatable .p-datatable-thead > tr > th{
    padding: 1rem .5rem;
}

.kits-report-header div{
    display: flex;
    justify-content: center;
    align-items: center;
}

.kits-report-header img{
    width: 100px;
}

.kits-report-header .wise-name{
    font-size: 24px;
    font-weight: 700;
}

.kits-report-header .wise-address{
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.row.kits-report-content{
    margin-right: 0;
    margin-left: 0;
}

.kits-report-content div.gap-1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    border: 1px solid #252421;
    padding-top: 8px;
    padding-bottom: 8px;
}

.kits-report-content div.gap-1:nth-child(1),
.kits-report-content div.gap-1:nth-child(2){
    border-right: unset;
}

.kits-report-content div.gap-1:nth-child(1){
    border-top-left-radius:20px;
}

.kits-report-content div.gap-1:nth-child(3){
    border-top-right-radius:20px;
}

.kits-report-content div.gap-1 > div{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
    width: 100%;
    padding-left: 15px;
}

.kits-report-content div.gap-1 > div span:nth-child(2){
    border-bottom: 1px solid;
    padding-left: 10px;
}

.kits-report-content div.gap-1:nth-child(3) > div span:nth-child(2),
.kits-report-content div.gap-1:nth-child(2) > div span:nth-child(2){
    text-align: end;
    padding-left: 0;
    padding-right: 10px;
}

.kits-report-table{
    border: 1px solid #252421;
}

.kits-report-table table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.kits-report-table th, td {
    padding: 7px;
    border-bottom: 1px solid #f6f6f6;
}

.kits-report-table td {
    border-right: 1px solid #b4b4b4;
}

.kits-report-table th {
    background-color: #333;
    color: white;
    text-align: center;
    border: 1px solid;
}

.kits-report-table tr:hover {
    background-color: #f1f1f1;
}

.category-type-cont{
    flex: 0 0 40%;
}

.fx-100{
    flex: 0 0 100% !important;
}

.category-type-cont, .payment-cont {
    /* padding: 0 15px; */
}

.expense-modal .payment-cont {
    flex: 1;
    /* height: calc(100vh - (4.25rem + (24px * 1.5) + 24px)); */
    height: calc(100vh - (6rem + (.875rem * 1.5) + (1.125rem * 1.2))) !important;
}

.expense-modal .transaction-mop-cont{
    height: calc(100vh - (4.25rem + (24px * 1.5) + 150px));
}

.type-selection, .category-selection {
    padding: 0 0.75rem 0.75rem;
}

.label-title {
    line-height: 20px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    font-weight: 500;
    margin-left: -0.5rem;
    margin-bottom: 5px;
}

.type-selection .accounting-type:first-child, .type-selection .accounting-type:nth-child(2), .type-selection .accounting-type:nth-child(3) {
    margin-bottom: 5px;
}

.type-selection .accounting-type {
    flex: 0 0 33.333%;
    max-width: calc(33.333% - 5px);
}

.accounting-type {
    border-radius: 4px;
    padding: 0.25rem 0.825rem;
    background: #fff;
    transition: background .25s ease-in-out;
    color: rgba(0, 0, 0, .8);
    border: 1px solid rgba(0, 0, 0, .09);
    font-size: 1rem;
}

.accounting-type.selected {
    background: #d0ecff;
    color: #007bff;
    border-color: #1791f2;
}

.category-selection {
    padding-top: 0.75rem;
}

.category-selection > .d-flex {
    max-height: calc(100vh - 300px);
    overflow: auto;
}

.accounting-item-card {
    flex: 0 0 20%;
    max-width: calc(20% - 10px) !important;
    background: #fff;
    padding: 10px;
    margin: 0 5px 13px;
}

.accounting-item-card {
    flex: 0 0 25%;
    max-width: calc(25% - 10px);
    background: #fff;
    padding: 10px;
    margin: 0 5px 13px;
    border-radius: 4px;
    border: 1px solid #dedede;
    transition: box-shadow .25s, border-color .25s, transform .25s;
}

.accounting-item-img-cont {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    height: 75px;
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.accounting-item-img-cont img{
    max-width: 50%;
}

.accounting-item-details {
    flex: 1;
    max-width: 100%;
}

.accounting-item-card.selected {
    border: 5px solid #44b7ff;
    background: #e9f6ff;
}

.accounting-item-form-cont > div {
    position: relative;
    padding: 15px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.expense-item-img {
    flex: 0 0 30%;
    max-width: 30%;
}

.accounting-item-modal .accounting-item-details {
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    height: 188px;
}

.accounting-item-form-cont > div {
    position: relative;
    padding: 15px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.accounting-item-details {
    flex: 1;
    max-width: 100%;
}

.expense-modal .variant-footer > button {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-right: 15px;
    min-width: 11.25rem;
    padding: 0 0.75rem;
    font-size: 14px;
    max-width: 250px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expense-modal .mop-scroll {
    max-height: calc(100vh - (212px + (16px * 1.2) + (42px * 1.5) + 8.25rem));
    overflow-y: auto;
}

.p-tabview-header.p-highlight .fw-normal {
    color: #16558f;
    /* font-weight: 600 !important; */
}

.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    border-color: #16558f;
}

.p-tabview-nav {
    gap: 3px;
}

.p-tabview .p-tabview-nav li .p-tabview-nav-link {
    padding: 0.6rem 0.77rem;
}

.nav-tabs li a {
    color: #67748e;
    border-radius: unset;
    border-top-width: 3px;
    border-bottom-width: 0;
}

.p-tabview .p-tabview-nav {
    background: #ffffff;
    border-width: 0;
}

.accounting-content-item:last-child, 
.accounting-content:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.stop-sync {
    height: 61px;
    width: 64px;
    border-radius: 100%;
    border: 1px solid;
}

.accounting-content {
    overflow-x: hidden !important;
}

.accounting-title-container:first-child, .summary-title-container {
    border-top: 0;
}

.accounting-title-container, .summary-title-container {
    padding: 5px 0;
    border-bottom: 1px solid #e9ecef;
    border-top: 1px solid #e9ecef;
}

.title-icon {
    max-width: 25px;
    max-height: 40px;
    margin-right: 0.325rem;
    border-radius: 8px;
}

.accounting-title-container .btn-theme {
    width: auto;
    border-style: solid;
    margin-left: auto;
    height: 35px;
    min-width: 50px;
    padding: 0 10px;
}

.btn-normal {
    width: 100%;
    height: 40px;
    color: #1791f2;
    border: 1px dashed #1791f2;
}

.btn-normal:hover {
    color: #1379d2;
    background: #f5fbff;
}

.btn-theme {
    /* color: #333; */
    background-color: #fff;
    /* border: 1px solid #e5e5e5; */
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 32px;
    min-width: 72px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
    outline: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mode-of-payment-cont {
    display: flex;
    flex-wrap: wrap;
}

.mode-of-payment-cont > label:first-child {
    flex: 0 0 100%;
}

input.radio-payment-mode {
    display: none;
}

input, textarea {
    border: none;
}

input.radio-payment-mode:checked+label {
    background: #e9ecef;
}

.payment-item {
    cursor: pointer;
    background: #f6f6f6;
    flex: 1;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0.5rem;
    text-align: center;
    border-radius: .5rem;
}

.payment-cont .form-group {
    margin-bottom: 10px;
}

.payment-cont .image-upload {
    max-width: 100%;
    margin: 0;
    max-height: 340px;
    overflow: auto;
    position: relative;
    border:unset
}

.payment-cont .image-upload:hover{
    background: unset;
}

.photo-item {
    overflow-y: hidden !important;
    padding-bottom: 24px;
}

.photo-item > .form-group {
    flex: 1;
    padding-left: 10px;
    margin-bottom: 0;
}

.payment-cont .row {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
}

.payment-cont .col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
}

.payment-cont .row>* {
    position: relative;
}

.transaction-summary-cont {
    min-height: calc(100% - 455px);
    max-height: calc(100% - 455px);
    overflow: auto;
}

.accounting-content-item:last-child, .accounting-content:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.accounting-content-item, .accounting-content {
    border-bottom: 1px dotted #e9ecef;
    margin-bottom: 10px;
}

.summary-content-0 {
    flex-wrap: wrap;
}

.summary-icon {
    height: 20px;
}

.summary-item {
    margin-right: 5px;
    margin-bottom: 5px;
    max-width: 150px;
    background-color: #f3f2f2;
    padding: 0.5rem 0 0;
    border-radius: 8px;
    overflow: hidden;
}

.summary-item div {
    max-width: 100%;
    height: auto;
    display: block;
    width: 250px;
    height: 147px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 auto;
    border-radius: 26px;
    display: block;
}

.expense-modal .p-dialog-footer .vr-wizard--footer{
    padding-bottom: 15px;
}

.report-div table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.report-div table, .report-div th, .report-div td {
    border: 1px solid black;
}
.report-div th, .report-div td {
    padding: 10px;
    text-align: left;
    font-size: 12.8px;
}
.report-div thead th {
    background-color: #cccccc;
}
.report-div .highlight {
    background-color: #ffc107;
}
.report-div .yellow-row {
    background-color: #ffeeba;
}
.report-div .total {
    font-weight: bold;
    background-color: #f0f0f0;
}

.report-div td:first-child{
    width: 80%;
}

.report-div .dark-blue-row {
    background-color: #BCD6ED;
}

.flex-custom {
    flex: 0 0 50% !important;
}

.expand-menu .sidebar .sidebar-menu ul>li>a span {
    line-height: 1;
}

.mini-sidebar .sidebar .sidebar-menu ul li a span.badge {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 6px;
    padding: 3px 3px;
    margin-top: -1px;
    margin-right: -4px;
}

.mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a span.badge {
    top: unset;
    padding: .25rem .45rem;
    margin-right: 10px;
}

.redirect-button{
    display: flex;
    justify-content: center;
    align-items: center;
}

.redirect-button a {
    display: flex;
    align-items: center;
    text-align: center;
    text-decoration: none; 
    color: var(--primary);
    width: 100%;
}

.redirect-button a::before,
.redirect-button a::after {
    content: '';
    flex: 1;
    border-bottom: 1px dashed currentColor; 
    margin: 0 10px;
}

.prc-3 {
    padding-right: 1.2rem;
}

.kit-costing-modal .kit-costing-items > .d-flex{
    max-height: calc(90vh - (10.25rem + 250px + (1.75rem* 1.5) + (1rem* 1)));
    overflow-y: auto;
    overflow-x: hidden;
}

.kit-costing-modal .kit-costing-items .form-group{
    flex: 0 0 100%;
    padding: 10px;
    margin: 0;
    border-radius: 4px;
}

.kit-costing-modal .kit-costing-items .form-group > div{
    margin: 0;
}

.kit-costing-modal .kit-costing-items .form-group .custom-width > div{
    width: 145px;
}

.kit-costing-modal .kit-costing-cards > .d-flex{
    max-height: calc(100vh - 300px);
    overflow: auto;
}

.kit-costing-view-modal .kit-costing-cards .card.kit-costing-item-card{
    flex: 0 0 32%;
    background: #fff;
    padding: 10px;
    margin: 0 5px 13px;
    border-radius: 10px;
    border: 1px solid #dedede;
    transition: box-shadow .25s, border-color .25s, transform .25s; 
}

.kit-costing-view-modal .card.kit-costing-item-card .kit-costing-card-delete-btn{
    position: absolute;
    right: 0;
    top: -10px;
    margin-right: -10px;
    z-index: 9;
}

.kit-costing-view-modal .card.kit-costing-item-card .kit-costing-card-header{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: var(--primary);
    font-weight: bolder;
    font-size: 16px;
    padding: 10px;
}

/* .order-selections{
    height: calc(100vh - ((2.625rem * 1.5) + 13rem + 240px + (32px * 1.2)));
    overflow-y: auto;
} */

.order-selections{
    height: calc(90vh - ((2.625rem * 1.5) + 13rem + 240px + (32px * 1.2)));
    overflow-y: auto;
}

.h-220 {
    height: 220px;
}

.h-250 {
    height: 250px;
}

.h-150 {
    height: 150px;
}

.mnw-137 {
    min-width: 137px !important;
}

.mnw-40 {
    min-width: 40px !important;
}

.mxw-137 {
    max-width: 137px !important;
}

.page-limit {
    border: none !important;
}

.page-limit .p-inputtext:not(textarea) {
    font-size: 0.765rem;
    height: auto;
    font-weight: bold;
    padding: 0;
    line-height: 1;
}

.page-limit-container .p-dropdown.p-component.p-inputwrapper {
    max-height: auto;
}

.page-limit .page-limit-container .p-inputtext {
    padding: 0rem 0.1rem !important;
}

.page-limit .p-icon {
    width: .7rem;
    height: auto;
    line-height: 1;
}

.page-limit-container h5 span {
    font-size: 0.805rem !important;
    color: #495072 !important;
}

.page-limit-container .p-dropdown .p-dropdown-trigger {
    width: 1.357rem !important;
}

.summary-report-detail-modal .table-responsive {
    max-height: calc(90svh - ((1rem * 1.2) + (.875rem * 1.5) + 9.357rem));
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0 1.5rem;
}

.view-sales-modal .table-responsive {
    max-height: calc(90svh - ((1rem * 1.2) + (.875rem * 1.5) + 9.357rem));
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0 1.5rem;
    min-height: 250px;
}

.fc .fc-scrollgrid-section-body table, .fc .fc-scrollgrid-section-footer table {
    width: 100% !important;
}

.fc .fc-daygrid-body {
    width: 100% !important;
}

.fc .fc-scrollgrid-section, .fc .fc-scrollgrid-section table, .fc .fc-scrollgrid-section > td {
    width: 100% !important;
}

.fc .fc-scroller {
    width: 100% !important;
}

/* .page-limit .p-dropdown-label {
    padding-top: 0rem ;
} */

.mxw-100 {
    max-width: 100px !important;
}

.account-payable-modal .p-dialog .p-datatable .p-datatable-tbody > tr > td,.account-payable-modal .p-datatable .p-datatable-tbody > tr > td {
    padding: .198rem 1rem;
}

.account-payable-modal .p-datatable .p-datatable-thead > tr > th {
    padding: .275rem .275rem;
}

.account-payable-modal .order-item-card{
    flex: 0 0 25%;
    max-width: calc(25% - 10px);
    background: #fff;
    padding: 10px;
    margin: 0 5px 13px;
    border-radius: 4px;
    border: 1px solid #dedede;
    transition: box-shadow .25s, border-color .25s, transform .25s;
}

.order-item-card.active{
    border: 5px solid #44b7ff;
    background: #e9f6ff;
}

.order-item-img-cont {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.order-item-img-cont img {
    max-width: 30%;
    min-height: 35px;
}

.single-line {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.order-item-details {
    flex: 1;
    max-width: 100%;
}

.order-item-form-cont > div {
    position: relative;
    padding: 15px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.order-item-form-cont .order-item-img{
    flex: 0 0 40%;
    max-width: 40%;
}

.order-item-details {
    flex: 1;
    max-width: 100%;
}

.account-payable-modal .payment-item img{
    max-height: 25px;
}

.account-payable-modal .payment-summary-cont{
    background: #f6f6f6;
    padding: .5rem;
    border-radius: 8px;
}

.account-payable-modal .payment-summary-item {
    display: flex;
    justify-content: space-between;
}

.account-payable-modal .payment-summary-item.final {
    font-weight: bold;
    color: #007bff;
}

.account-payable-modal .text {
    text-align: end;
    color: #888;
    width: 50%;
}

.account-payable-modal .amount {
    text-align: end;
    width: 50%;
    font-weight: bold;
}

.account-payable-modal .divider {
    border-top: 1px solid #ddd;
    margin: 10px 0;
}

.kit-costing-items .cost-div{
    border: 1px solid #dee2e6;
    border-radius: .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6.5px;
    font-weight: 600;
}

.fs-small {
    font-size: 0.83em;
}

.avatar-lg {
    height: 4.5rem !important;
    width: 4.5rem !important;
}

.border-primary {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-primary-rgb),var(--ct-border-opacity))!important
}

.border-secondary {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-secondary-rgb),var(--ct-border-opacity))!important
}

.border-success {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-success-rgb),var(--ct-border-opacity))!important
}

.border-info {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-info-rgb),var(--ct-border-opacity))!important
}

.border-warning {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-warning-rgb),var(--ct-border-opacity))!important
}

.border-danger {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-danger-rgb),var(--ct-border-opacity))!important
}

.border-light {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-light-rgb),var(--ct-border-opacity))!important
}

.border-dark {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-dark-rgb),var(--ct-border-opacity))!important
}

.border-pink {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-pink-rgb),var(--ct-border-opacity))!important
}

.border-blue {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-blue-rgb),var(--ct-border-opacity))!important
}

.border-white {
    --ct-border-opacity: 1;
    border-color: rgba(var(--ct-white-rgb),var(--ct-border-opacity))!important
}

.border {
    border: var(--ct-border-width) var(--ct-border-style) var(--ct-border-color) !important;
}

.kit-counter-import-modal .import-button {
    display: flex;
    align-items: center;
    color: #333;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ct-border-color);
    flex: 0 0 33%;
    max-width: calc(33% - 10px);
    flex-direction: column;
    filter: grayscale(1);
    min-height: 82px;
}

.w-55 {
    width: 55% !important;
}

.kit-counter-import-modal .import-button img {
    width: 70%;
}

.kit-counter-import-modal .import-button:hover {
    border: 1px solid var(--primary);
    filter: unset;
}

.kit-counter-import-modal input[type="file"] {
    display: none;
}

.import-notification{
    position: absolute;
    z-index: 9990;
    top: 8px;
}

.import-notification .import-content{
    background: #52525273;
    height: 80px;
    width: 300px;
    border-radius: 10px;
    padding: 8px 12px;
    color: #fff;
    display: flex;
}

.import-notification .import-content .p-progressbar{
    height: 8px;
    border-radius: 8px;
}

.cart-input-quantity svg {
    font-size: 1rem;
    width: 11px;
    height: 18px;
}

.upload-icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 4px 4px 8px;
    position: relative;
}

.upload-icon::before {
    content: "↑";
    font-size: 24px;
    position: relative;
    top: 2px;
}

.danger .upload-icon {
    border-color: #ff4343; 
}

.danger .upload-icon::before {
    content: "!";
    color: #ff4343; 
    font-weight: bold;
    font-size: 24px;
    position: relative;
    top: 1px;
}

.danger > .p-progressbar .p-progressbar-value {
    background: var(--danger) !important;
}

.progress-info {
    flex: 1;
    margin-left: 5px;
}

.progress-info p {
    margin: 0;
    font-size: 15px;
}

.progress-info p.file-name,
.progress-info p.count {
    font-size: 12px;
}

.p-progressbar .p-progressbar-value {
    background: var(--primary);
}

.form-overlay.merge-file-name .p-error{
    left: 13px;
    top: 0px;
}

.upload-loading-btns {
    height: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.skeleton-loading {
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%, #f0f0f0 100%);
    background-size: 300% 100%;
    animation: loadingShimmer 1.5s infinite;
}

.product-code-print-modal .item-container .product-item-card {
    flex: 0 0 50%;
    max-width: calc(50% - 10px);
    background: #fff;
    padding: 10px;
    margin: 0 5px 10px;
    border-radius: 4px;
    border: 1px solid #dedede;
    transition: box-shadow .25s, border-color .25s, transform .25s;
}

.product-code-print-modal .item-container .product-item-card .code-container{
    height: 100px;
    overflow: hidden;
}

.p-calendar input{
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
}

.p-calendar button.p-datepicker-trigger{
    padding: 0.1rem;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.form-overlay.accounting-content .p-error{
    left: 9px;
    top: 7px;
}

.form-overlay.setup-account .p-error{
    left: 0px;
    top: 0px;
}

.p-tooltip .p-tooltip-text {
    font-size: 0.775rem !important;
}

#shop-products > :first-child {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.p-accordion.accordion-admin .p-accordion-header-link.p-accordion-header-action{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.p-accordion.accordion-admin .p-accordion-header-link.p-accordion-header-action span{
    order: 1;
}

.p-accordion.accordion-admin .p-accordion-header-link.p-accordion-header-action svg{
    order: 2;
    margin: 0;
}

.mt-n-1 {
    margin-top: -2px;
}

.bar-icon span {
    background-color: #2a548b;
}

.header .mobile-user-menu a {
    color: #2a548b;
}

.text-yellow {
    background: #ffff81;
}

.t-8 {
    top: 8% !important;
}

.revolving-table .div-table, .summary-table .div-table{
    justify-content: space-between;
    display: flex;
    padding: 0 1.2rem;
    border-bottom: 1px dashed #d6dee7;
}

.revolving-table .div-table .details-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
}

.summary-table .div-table .details-label {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
}

.summary-table .details-content {
    width: 140px;
    justify-content: right;
}

.h-37 {
    height: 37px;
}

.label-bottom {
    position: absolute;
    bottom: 3px;
    right: 18px;
}

.excel-table {
    max-width: 300px;
    width: 300px;
    border: 1px solid #b6b6b6;
    border-radius: 5px;
}

.right-label {
    position: absolute;
    top: 5px;
    right: 2px;
}

.search-container {
    height: 75svh;
    width: 90%;
    position: absolute;
    background: rebeccapurple;
    top: 44.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000;
}

.b-bot {
    border-bottom: 1px solid #b6b6b6;
}

.b-right {
    border-right: 1px solid #b6b6b6;
}

.b-top {
    border-top: 1px solid #b6b6b6;
}

.fx-100 {
    flex: 0 0 100%;
}

.excel-sub-header span {
    flex: 0 0 50%;
    text-align: center;
}

.excel-body span {
    flex: 0 0 50%;
    text-align: left;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.bank-mastercard {
    width:340px; 
    height:200px; 
    border-radius:18px; 
    overflow:hidden; 
    display:flex; 
    flex-direction:column; 
    justify-content:space-between; 
    padding:1.5rem 2rem; 
    margin-right: 12px;
}

.bank-mastercard .name-bank {
    font-size:1.2rem; 
    letter-spacing:1.5px;
}

.bank-mastercard img {
    height:36px; 
    opacity:0.85;
}

.bank-mastercard .account-number {
    font-size: 1.2rem; 
    letter-spacing: 2px; 
    font-family: 'Courier New', Courier, monospace;
}

.union-bank-mastercard {
    background: linear-gradient(135deg, #ff8800 60%, #ffc27c 100%);
}

.bdo-bank-mastercard {
    background: linear-gradient(135deg, #1c2c5b 60%, #1c2c5b 100%);
}

.card-holder, .card-amount-label {
    font-size: 0.85rem;
}

.card-name, .card-amount {
    font-size: 1rem;
}

.gap-custom {
    gap: 2rem 1rem;
}

.add-btn {
    bottom: -14px;
    left: -15px;
    border-radius: 100%;
    width: 30px;
}

.btn-manage-excel {
    left: -7px;
}

.btn-manage-excel, .btn-manage-excel:focus, .btn-manage-excel:hover {
    background: none !important;
    border: none !important;
    opacity: 1;
    transition: .3s;
}

.btn-manage-excel {
    opacity: 0.4;
}

.h-2 {
    height: 27px !important;
    border-radius: 0px;
    border: none !important;
    background: none !important;
}

.h-3 {
    height: 27px !important;
    background: none !important;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #7c7c7c !important;
}

.fsc-7 {
    font-size: 0.6rem;
}

.right-1 {
    right: 1.5rem;
}

.box-in {
    width: 100% !important;
    margin-top: -13px;
    padding-right: 11px;
}

.h-10 {
    height: 10px !important;
    width: 10px !important;
    border-radius: 100%;
    /* border: 1px solid #cecece; */
}

.btn-column {
    top: 0;
    right: 0;
}

.p-absolute-i {
    position: absolute !important;
}

.fx-height {
    height: calc(100svh - (114px + (14px * 1.5) + 40px + 80px + 5rem));
}

.financial_audit .excel-footer {
   bottom: 3rem !important;
}

.sync-loader {
    height:300px;
    background: #fff;
    z-index: 1090;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    border-radius: 100%;
    border: 5px solid #e8ebed;
}

.sync-loader .loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
  
.sync-loader .loader-img {
    width: 100px;
    height: 28px;
    object-fit: contain;
    margin-bottom: 10px;
}
  
.sync-loader .loader-text {
    color: #335874;;
    font-size: 18px;
    font-weight: 600;
}


.sync-loader .loading-circle {
    stroke-dashoffset: 154;
    transition: stroke-dashoffset .35s;
}

.sync-loader .loading-circle-overlay.success {
    stroke: #2ecc71;
}

.sync-loader .loading-circle-overlay.success .loading-circle {
    animation: stroke 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.sync-loader .loading-circle-overlay.verifying {
    transform: unset;
    -webkit-animation: rotate 2s linear infinite;
            animation: rotate 2s linear infinite;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
}

.sync-loader .loading-circle-overlay.verifying .loading-circle {
    stroke-dasharray: 147, 315;
    stroke-dashoffset: -10;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
            animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

.sync-loader .loading-circle-overlay {
    position: absolute;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    top: -5px;
    left: -5px;
    border-radius: 50%;
    display: block;
    stroke-width: 1;
    stroke-miterlimit: 10;
    margin: 0 auto;
    transform: rotate(-90deg);
    transition: stroke .35s;
}

.sync-loader .blue {
    stroke: #60a6f0;
}

.excel-footer {
    bottom: 0;
    right: 0;
    background: #e2effa;
    border-radius: 25% 0 0;
    color: #16558f;
    font-weight: bold;
}

.tab-footer {
    bottom: 0;
    right: 0;
    bottom: 0;
    right: 3rem;
    background: #e2effa;
    border-radius: 25% 0 0;
    color: #16558f;
    font-weight: bold;
    height: auto;
    padding: .6rem 6rem .5rem 0rem;
    z-index: 100 !important;
    width: 100%;
    justify-content: end;
}

.tab-header {
    justify-content: flex-end !important;
}

.tab-header .fa-tabs {
    gap: 0.25rem !important;
}

.tab-footer button.active, .tab-header button.active {
    background: #16558f !important;
    color: #fff !important;
}

.tab-footer button, .tab-header button {
    background: #fff !important;
    border: .5px solid #16558f !important;
    color: #16558f !important;
    width: 32.47px;
    /* padding: 0px !important; */
}

.excel-main-header {
    color: #16558f;
}

.mop-container {
    position: absolute;
    top: 63px;
    left: 340px;
    overflow: hidden;
}

.main-test {
    position: relative;
}

.order-selections .order-item-detail div {
    word-wrap: break-word;
    white-space: pre-wrap;
}

.mop-content{
    /* animation: scrollLeft 10s linear infinite; */
}

.mop-title span {
    color: #21507f;
    font-weight: 600;
}

.mop-title span span {
    color: #3386d5;
}
.mop-item {
    margin-right: 1.25rem;
}

.mop-item:last-child {
    margin-right: 0;
}

.mop-item > div {
    padding: 3px 10px;
    /* border: 1px solid #fff; */
    background: #fff;
    border-radius: 10px;
    border: 1px solid #f5f5f5;
    height: 100%;
}

.mop-title {
    margin-top: 11px;
}

.mop-item img {
    max-width: 70px;
    max-height: 35px;
    border-radius: 4px;
}

.mop-details {
    padding: 5px 15px;
    color: #020202;
    font-weight: 600;
}

.mop-details span {
    line-height: 1;
}

.mop-details span:last-child {
    font-size: 15px;
    line-height: 1.3;
}

.bg-light-yellow {
    background: #fff4e9;
}

.bg-light-green2 {
    background: #edffea;
}

.bg-soft-yellow {
    background: #fcfcbc;
}

.readonly-wrapper {
    height: 100%;
    cursor: pointer;
}

.h-36 {
    height: 36px;
}

.scroll-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1000;
}

.search-help-container {
    position: absolute;
    z-index: 9999;
    padding: 10px;
    border-radius: 100%;
    color: #fff;
    background-color: #16558f;
    height: 50px;
    width: 50px;
    box-shadow: 

    0 0 0 2px rgba(22, 85, 143, 0.4), 
    0 0 0 4px rgba(22, 85, 143, 0.3), 
    0 0 0 6px rgba(22, 85, 143, 0.2);
    animation: waveAnimation 2s infinite;
    cursor: pointer;
}

.search-help-container div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-global {
    width: 80%;
    height: auto;
}

.search-header {
    display: none;
}

.pending-row {
    background-color: #faf6b4;
}

.exis {
    top: 5px;
    right: 5px;
    position: absolute;
    z-index: 1000;
    border-radius: 100%;
    height: 34px;
    font-size: 2rem !important;
    color: #398ae5;
    border: 1px solid #02a0e8;
}

.cart-container {
    display: flex;
    gap: 32px;
    height: calc(100svh - (5rem + (.875rem * 1.5) + 5px));
}

.flex-47 {
    flex: 0 0 47%;
}

.report-modal .report-content {
    /* height: calc(90svh - (11.7rem + 36px) + (.875rem * 1.5)); */
    height: calc(90svh - (9.7rem + 39px + (.875rem * 1.5)));
    overflow-y: scroll;
}

.report-modal .report-content .card {
    flex: 0 0 49%;
}

.cart-container .cart-items {
    flex: 2;
}

.cart-container .item-p {
    bottom: -12px;
    right: 3px;
}

.cart-container .footer-item {
    max-width: 100% !important;
}

.cart-container .cart-sidebar {
    flex: 1;
    min-width: 475px;
    max-width: 475px;
    /* height: calc(100svh - (7rem + (.875rem * 1.5))); */
    display: flex;
    flex-direction: column;
}

.cpl-3 {
    padding-left: 2.38rem !important;
}

.cart-container .empty-items {
    min-height: calc(100svh - (5rem + (.875rem * 1.5) + 5px  + (1rem * 1.2) + 0.5rem + 1px + 32px + (0.875rem * 1.5) + 28px));
    width: 100%;
    overflow-y: auto;
}

.cart-container .cart-selection-cont {
    pointer-events: none;
    right: 0;
    top: 0;
    height: 100%;
}

.cart-container .product-variant-details .variant-cont > label, .variant-shop-label {
    width: 90px;
}

.cart-container .item-unit-price {
    font-size: 0.75rem !important;
    right: 0;
    color: rgb(237, 14, 14) !important;
    margin-top: 3px;
}

.cart-container .cart-input-quantity input {
    width: 100%;
}

.cart-container .cart-input-name {
    width: 145px;
    max-width: 110px;
    word-wrap: break-word;
    padding-right: 4px;
}

.prc-4 {
    padding-right: 29px;
    padding-top: 5px;
    font-size: 0.7rem;
}

.mrc-4 {
    margin-right: 29px;
    margin-top: 2px;
    font-size: 0.7rem;
}

.topc-2 {
    top: 2px;
}

.cart-container .header {
    background: #fff;
    border-bottom: 1px solid #dbe0e6;
    height: 46px;
    z-index: 9;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    padding: 0px 12px;
}

.cart-container .body {
    max-height: calc(100svh - (5rem + (.875rem * 1.5) + 56px + 2rem));
    overflow-y: auto;
    gap: 4px;
}

.cart-container .cart-label {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 8px 8px 8px;
    width: 110px;
    box-shadow: 0 2px 6px #f3f3f3;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: box-shadow 0.2s;
    cursor: pointer;
    /* height: 170px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
}

.cart-container img.empty
{
    min-height: 10vh;
    width: 22%;
    height: 206px;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cart-container .cart-label:hover {
    border-color: #84ccf9;
    transform: scale(1.02);
    cursor: pointer;
}

.cart-container .cart-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    margin-bottom: 6px;
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px #f7f7f7;
}

.cart-container img {
    width: 100%; 
    height: 100%; 
    min-width: 33.77px;
    object-fit: cover;
}

.lottie {
    width: 343px;
    margin: auto;
}

.otp-label { 
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    height: calc(90svh - ((18px * 1.2) + (12.88px * 1.5) + 72px));
}

.otp input {
    border: 1px solid rgba(61,60,60, 0.3);
}

.otp input:hover, .otp input:focus {
    border: 1px solid #16558f !important;
}

.otp-modal .otp-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 200px;
    margin: 0 auto;
}

.otp-modal .button-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.otp-modal .otp-button {
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    text-align: center;
    cursor: pointer;
}

.otp-modal .clear-btn {
    background-color: #ffdddd;
}

.otp-modal .clear-btn:focus, .otp-modal .clear-btn:hover {
    background-color: #ff8383;
}

.otp-modal .otp-button:focus, .otp-modal .otp-button:hover {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    background-color: #e2e2e2;
}

.qr-modal .barcode-qrcode-generator {
    height: auto !important;
}

.cart-container .cart-name {
    display: flex; 
    align-items: center; 
    gap: 4px; 
    margin-bottom: 3px;
}

.cart-container .cart-name span {
    font-weight: 600; 
    font-size: 0.92em; 
    color: #222; 
    text-align: center;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.cart-container .cart-description {
    font-size: 10px;
    color: #888;
    margin-bottom: 5px;
    text-align: center;
    min-height: 16px;
}

.cart-container .cart-price {
    margin-top: auto; 
    font-size: 11px; 
    font-weight: 500;
}

.cart-container .cart-price span {
    color: #007bff;
}

.cart-container .cart-item-selected {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    background: #fff;
}

.cart-container .cart-item-selected-content {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    max-height: none;
    font-size: 0.715rem;
}

.cart-container .cart-list {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 12px;
}

.cart-container .manage-btn {
    border: none; 
    background: #eee; 
    width: 28px; 
    height: 28px; 
    border-radius: 4px; 
    font-size: 18px;
}

.cart-container .manage-btn-transparent {
    border: none; 
    background: transparent; 
    color: #dc3545; 
    font-size: 18px; 
    margin-left: 8px;
}

.cart-container .cart-total {
    border-top: 1px solid #eee; 
    margin-top: 12px; 
    padding-top: 12px; 
    text-align: right;
}

.cart-item-disabled {
    opacity: 0.2;
    pointer-events: none;
}

.fade-slide-enter-active,
.fade-slide-leave-active {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-slide-enter-from,
.fade-slide-leave-to {
    opacity: 0;
    transform: translateX(20px);
}

.fade-slide-enter-to,
.fade-slide-leave-from {
    opacity: 1;
    transform: translateX(0);
}

.slide-up-enter-active,
.slide-up-leave-active {
    transition: all 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

.slide-up-enter-to,
.slide-up-leave-from {
    opacity: 1;
    transform: translateY(0);
}

.chat-sidebar #pre-load {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
}

.chat-items .user.disabled {
    opacity: 0.8;
    pointer-events: none;
    cursor: not-allowed;
}

.chat-template {
    background: #e5e5e5;
}

.tv-preload {
    position: fixed !important;
    height: 66px;
    width: 83px;
    left: 50% !important;
}

.chat-sidebar  #pre-load .loader-inner {
    --loader-background: linear-gradient(
        0deg,
        rgba(0, 123, 255, 0.2) 0%,
        rgba(0, 100, 200, 0.2) 100%
    );
    position: relative;
    height:70px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-sidebar #pre-load .loader-inner .loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: color-change 2s infinite ease-in-out;
    z-index: 8;
}

.chat-sidebar #pre-load .loader-inner .loader-logo svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}

.chat-sidebar #pre-load .loader-inner .box {
    position: absolute;
    background: var(--loader-background);
    border-radius: 50%;
    /* border-top: 1px solid rgba(0, 123, 255, 1); */
    /* box-shadow: rgba(0, 0, 100, 0.3) 0 10px 10px 0; */
    backdrop-filter: blur(5px);
    animation: ripple2 2s infinite ease-in-out;
}

.chat-sidebar #pre-load .loader-inner .box:nth-child(1) {
    width: 25%;
    aspect-ratio: 1/1;
    z-index: 7;
}

.chat-sidebar #pre-load .loader-inner .box:nth-child(2) {
    inset: 30%;
    z-index: 6;
    /* border-color: rgba(0, 123, 255, 0.8); */
    animation-delay: 0.2s;
}

.chat-sidebar #pre-load .loader-inner .box:nth-child(3) {
    inset: 20%;
    z-index: 5;
    /* border-color: rgba(0, 123, 255, 0.6); */
    animation-delay: 0.4s;
}

.chat-sidebar #pre-load .loader-inner .box:nth-child(4) {
    inset: 10%;
    z-index: 4;
    /* border-color: rgba(0, 123, 255, 0.4); */
    animation-delay: 0.6s;
}

.chat-sidebar #pre-load .loader-inner .box:nth-child(5) {
    inset: 0;
    z-index: 3;
    /* border-color: rgba(0, 123, 255, 0.2); */
    animation-delay: 0.8s;
}

@keyframes ripple2 {
    0% {
        transform: scale(1);
        /* box-shadow: rgba(0, 0, 100, 0.3) 0 10px 10px 0; */
    }
    50% {
        transform: scale(1.3);
        /* box-shadow: rgba(0, 0, 100, 0.3) 0 30px 20px 0; */
    }
    100% {
        transform: scale(1);
        /* box-shadow: rgba(0, 0, 100, 0.3) 0 10px 10px 0; */
    }
}

@keyframes color-change {
    0% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
    }
}

@keyframes waveAnimation {
    0% {
        box-shadow: 
            0 0 0 2px rgba(187, 219, 249, 0.4), 
            0 0 0 4px rgba(160, 209, 255, 0.3), 
            0 0 0 6px rgba(159, 209, 255, 0.2);
    }
    50% {
        box-shadow: 
            0 0 12px 6px rgba(166, 191, 250, 0.5), 
            0 0 14px 7px rgba(138, 192, 245, 0.3), 
            0 0 16px 8px rgba(143, 162, 255, 0.1);
    }
    100% {
        box-shadow: 
            0 0 0 22px rgba(242, 255, 255, 0.5),  
            0 0 0 24px rgba(247, 251, 255, 0.3), 
            0 0 0 26px rgba(255, 252, 252, 0.1);
    }
}

@keyframes glowPulse {
    0% {
        box-shadow:
        0 0 0 0 rgba(133, 206, 254, 0.4),
        0 0 0 0 rgba(0, 153, 255, 0.2),
        0 0 0 0 rgba(104, 153, 186, 0.1);
    }

    40% {
        box-shadow:
        0 0 0 6px rgba(161, 217, 255, 0.4),
        0 0 0 12px rgba(121, 201, 255, 0.2),
        0 0 0 18px rgba(0, 153, 255, 0.1);
    }

    100% {
        box-shadow:
        0 0 0 0 rgba(0, 153, 255, 0);
    }
}

@media print{
    html, body {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .no-break {
        page-break-inside: avoid;
    }
    
    .page-break {
        page-break-before: always;
    }

    .product-code-print-modal-mask{
        justify-content: start !important;
        align-items: start !important;
        height: auto !important;
        position: absolute !important;
    }

    .product-code-print-modal{
        max-width: unset;
        box-shadow: unset;
        border: none;
        width: 100vw !important;
        height: auto !important;
        justify-content: start;
        align-items: start;
    }

    .product-code-print-modal .item-container .product-item-card div > .checkbox-container,
    .product-code-print-modal .item-container .product-item-card input,
    .product-code-print-modal .vr-wizard--footer,
    .product-code-print-modal .p-dialog-header{
        display: none !important;
    }

    .product-code-print-modal .p-dialog-content{
        width: 100vw !important;
        height: auto !important;
        min-height: 100vh !important;
        padding: 0;
    }

    .product-code-print-modal .p-dialog-content .item-container{
        margin-block: unset;
        padding: unset;
        max-height: unset;
        overflow: unset;
    }

    .product-code-print-modal .item-container .product-item-card{
        border: none;
        flex: 0 0 100%;
        max-width: unset;
    }

    .product-code-print-modal .item-container .product-item-card .card-header{
        justify-content: start !important;
    }

    .product-code-print-modal .item-container .product-item-card .col-md-6{
        width: 100%;
    }

    .product-code-print-modal .item-container .product-item-card .code-container{
        overflow: auto;
        height: unset;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .product-code-print-modal .item-container .product-item-card .hide-code{
        display: none !important;
    }

    .product-code-print-modal .item-container .product-item-card .code-container div{
        margin: 5px;
    }

    .barcode-qrcode-generator{
        height: unset !important;
    }

    .header, .sidebar, .page-header, .search-set {
        display: none !important; 
    }

    .card {
        margin-bottom: 0;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .report-content .card {
        border: 1px solid #dddddd;
        font-size: 0.625rem !important;
    }

    .report-content td, .report-content th {
        white-space: normal !important;
        font-size: 0.625rem !important;
    }
    
    .report-content h6 {
        font-size: 0.625rem !important;
    }

    .report-content .mb-3 {
        margin-bottom: .3rem !important;
    }

    .report-content .table-responsive {
        padding: 0 !important;
    }

    .report-content .flex-47 {
        flex: 0 0 100%;
    }

    .page-wrapper {
        margin: 0;
        padding: 0;
    }
}

@keyframes loadingShimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 100% 0;
    }
}

@keyframes blinkDangerColor {
    50% {
        color: #FF0000;
    }
}

@keyframes blinkDangerBorderColor {
    50% {
        border-bottom: 1px solid rgba(255, 0, 0, 0.1);
    }
}

@keyframes blinkSuccessBg {
    50% {
        background-color: rgba(23, 162, 184, 0.1);
    }
}

@keyframes blinkSuccessColor {
    50% {
        color: #17a2b8;
    }
}

@keyframes blinkSuccessBorderColor {
    50% {
        border-bottom: 1px solid rgba(23, 162, 184, 0.1);
    }
}

@keyframes blinkWarningBg {
    50% {
        background-color: #FF9F431a;
    }
}

@keyframes blinkWarningColor {
    50% {
        color: #FF9F43;
    }
}

@keyframes blinkWarningBorderColor {
    50% {
        border-bottom: 1px solid #FF9F431a;
    }
}

@keyframes blinkSecondaryBg {
    50% {
        background-color: #eef7ff;
    }
}

@keyframes blinkSecondaryColor {
    50% {
        color: rgba(22, 85, 143, 0.9)
    }
}

@keyframes blinkSecondaryBorderColor {
    50% {
        border-bottom: 1px solid #cfe5fa;
    }
}

@keyframes circleblinkSuccessBg {
    0% {
        background-color: rgba(22, 160, 133, 0.6);
        opacity: 0.1;
    }
    50% {
        background-color: rgba(22, 160, 133, 0.9);      
    }
    100% {
        background-color: rgba(22, 160, 133, 1);  
        box-shadow: 0 0 25px rgba(22, 160, 133, 1);
    }
}

@keyframes circleblinkInfoBg {
    0% {
        background-color: rgba(23, 162, 184, 0.6);
        opacity: 0.1;
    }
    50% {
        background-color: rgba(23, 162, 184, 0.9);      
    }
    100% {
        background-color: rgba(23, 162, 184, 1);  
        box-shadow: 0 0 25px rgba(23, 162, 184, 1);
    }
}

@keyframes rowWarningBlink {
    0% {
        background-color: rgba(255, 218, 69, 0.6);
        opacity: 0.7;
    }
    50% {
        background-color: rgba(255, 218, 69, 0.9);      
    }
    100% {
        background-color: rgba(255, 218, 69, 0.9);
        box-shadow: 0 0 5px rgba(255, 218, 69, 0.9);
    }
}


@keyframes ripple {
    from {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    to {
        width: 750px;
        height: 750px;
        opacity: 0;
    }
}

@keyframes scrollLeft {
    0% {
      transform: translateX(0%);
    }
    50% {
        transform: translateX(-40%); 
    }
    100% {
      transform: translateX(0%);
    }
}

@media (max-width: 1366px) {
    .cart-input-quantity button {
        width: 25px;
    }

    .products-container .header {
        flex-wrap: wrap;
    }

    .products-container .search-input {
        flex: 0 0 100%;
        margin: 5px 0;
    }

    .products-container .body, .items-selection-container .body {
        max-height: calc(100vh - 188px);
    }

    .table-top .search-input {
        /* flex: 0 0 42% !important; */
        min-width: 260px;
    }

    .p-dialog-maximized-sub {
        width: 100vw !important;
        height: 95vh !important;
        max-height: 100%;
        height: 100%;
    }

    .label-calendar {
        font-size: 0.5rem;
        overflow-x: scroll;
    }
}

@media (max-width: 991px) {
    .expand-menu .sidebar .sidebar-menu ul>li>a span {
        line-height: 1;
    }

    .mini-sidebar .sidebar .sidebar-menu ul li a span.badge {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 6px;
        padding: 3px 3px;
    }

    .mini-sidebar.expand-menu .sidebar .sidebar-menu ul li a span.badge {
        top: unset;
        padding: .25rem .45rem;
    }

    .table-top .search-input {
        flex: 0 0 42% !important;
    }

    .kit-costing-view-modal .kit-costing-cards .card.kit-costing-item-card {
        flex: 0 0 50%;
    }

    .search-set .p-button-label {
        width: 40px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card.table-list-card .table-top {
        padding: 8px 24px 0 !important;
        margin-bottom: 3px;
    }

    .payment-container > div:nth-child(2) {
        margin-top: 1.5rem;
    }

    .category-select {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .process-panel .step-view {
        height: 100%;
        max-height: 100% !important;
    }

    .side-panel.production_staff .details-label, .side-panel.ofd_staff .details-label {
        font-size: 0.4rem;
    }

    .side-panel.production_staff .details-content, .side-panel.ofd_staff .details-content {
        padding-left: 0;
        font-size: 0.5rem;
    }

    .side-panel h5 {
        font-size: .6rem;
    }

    .production_staff .w-stepper, .ofd_staff .w-stepper {
        margin: 0.5rem;
        font-size: .5rem;
    }

    .p-dialog .production_staff .p-datatable .p-datatable-tbody > tr > td, .production_staff .p-datatable .p-datatable-tbody > tr > td, .p-dialog .ofd_staff .p-datatable .p-datatable-tbody > tr > td, .ofd_staff .p-datatable .p-datatable-tbody > tr > td {
        font-size: 0.5rem;
    }

    .production_staff .p-datatable .p-datatable-thead > tr > th, .ofd_staff .p-datatable .p-datatable-thead > tr > th {
        padding: .3rem .7rem !important;
        font-size: 0.5rem;
    }

    .production_staff .payment-info, .ofd_staff .payment-info {
        font-size: .5rem;
    }
}

@media (max-width: 991px) and (min-width: 769px) {
    .side-panel .card .card-body {
        padding: .50rem;
    }

    .side-panel .avatar img {
        width: 100%;
        height: 100%;
    }

    .avatar {
        height: auto;
        width: 1rem;
    }

    .production_staff .fs-15, .ofd_staff .fs-15 {
        font-size: .5375rem;

        width: 67px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .label-calendar  span:first-of-type {
        display: none !important;
    }
}

@media(max-width: 768px) {
    .shop-cont .products-container {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .shop-cont .cart-details-container {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .shop-cont {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .p-dialog .p-dialog-content {
        overflow: hidden;
    }

    .w-stepper__item:not(.active), .wrapper {
        display: none;
    }

    .step-view {
        margin-block: 1.25rem;
        background: #f5f7f8;
        padding: .725rem;
    }

    .notification-content{
        flex-direction: column;
    }

    .notification-content div:first-child{
        order: 2;
    }

    .notification-content div:last-child{
        order: 1;
    }

    .notification-content .announcement-content{
        width: 100%;
        height: unset;
        margin-top: 75px;
    }

    .notification-content .announcement-content .announcement-title{
        text-align: center;
    }

    .notification-content .announcement-content .announcement-message{
        width: 100%;
    }

    .carousel__slide{
        height: 35vh;
    }

    .notification-content .announcement-details{
        width: 100%;
        height: unset;
        padding-right: 0;
        margin-top: 30px;
    }

    .style-4::before,
    .style-3::before,
    .style-2::before,
    .style-1::before{
        filter: blur(5px);
    }

    .search-set .search-input {
        margin-right: 0;
    }

    .table-top .search-input {
        flex: unset !important;
        background: #fbfbfb;
        width: 100%;
        min-width: unset;
    }

    .table-top .search-set button {
        /* width: 100%; */
        padding: .25rem .1rem;
        width: 70px;
    }
    
    .table-top .search-set {
          width: 100%;
    }
    
    .btn-label, .p-accordion-header-text {
        display: none;
    }

    .transaction-modal .p-dropdown .p-inputtext {
        /* max-width: 72px; */
    }

    .flex-custom {
        flex: 1 !important;
    }

    .top-head-btn {
        justify-content: end;
        gap: 3px;
        width: 100%;
    }

    .kit-costing-view-modal .kit-costing-cards .card.kit-costing-item-card {
        flex: 0 0 100%;
    }

    .account-payable-modal .step-view {
        max-height: calc(100vh - (5rem + 2px + ((1rem* 1.5)))) !important;
        height: calc(100vh - (5rem + 2px + ((1rem* 1.5)))) !important;
        margin-block: 0 !important;
    }

    .order-selections {
        height: calc(100vh - ((2.625rem * 1.5) + 13rem + 240px + (32px * 1.2)));
        overflow-y: auto;
    }

    .p-dialog-maximized-sub {
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100%;
        height: 100%;
    }

    input, select, textarea, .p-inputtext, input.f-16{
        font-size: 16px !important;
        touch-action: manipulation !important;
    }

    body, button {
        touch-action: manipulation !important;
    }

    .login-wrapper .login-content .login-logo img {
        margin-bottom: 9px;
        height: 65px;
    }

    .login-wrapper.login-new {
        align-items: flex-start;
        padding-top: 18px;
        /*overflow: hidden; */
        height: 100%;
    }

    .login-wrapper .login-content.user-login {
        margin: 0;
    }

    html {
        height: calc(var(--vh, 1vh) * 100);
    }

    body, #app, .main-wrapper {
        /* min-height: 100vh;
        height: 100%; */
    }

    .login-wrapper .login-content.user-login .login-register {
        width: 100% !important;
    }

    .sales-cards div {
        margin-bottom: 1rem;
    }

    .p-dropdown-item-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 100px;
        width: 336px;
    }

    .table-top-head {
        position: absolute;
        right: 16px;
    }

    .col-form-label.text-right {
        text-align: left !important;
        justify-content: start !important;
    }

    .option-wrapper {
        padding: 0;
    }

    .product-modal .w-90 {
        width: 100%;
        display: flex;
    }

    .product-modal .custom-img {
        width: 100%;
    }

    .item-container {
        width: 50%;
    }

    .image-container .col-md-9 {
        display: flex;
        margin-left: 10px;
    }

    .text-w-limit {
        width: 100%;
    }

    .order-form {
        max-height: calc(90svh - 8.125rem) !important;
    }

    .p-dialog-maximized {
        height: 100svh !important;
        max-height: 100svh !important;
    }

    .products-container .body, .items-selection-container .body {
        max-height: calc(100svh - 188px) !important;
    }

    .packed-preview .items {
        min-height: calc(100svh - 301px) !important;
        max-height: calc(100svh - 301px) !important;
    }

    .empty-items {
        min-height: calc(100svh - 179px) !important;
    }

    .p-dialog-maximized .step-view {
        max-height: calc(100svh - (5rem + 2px + ((1rem * 1.5)))) !important;
        height: calc(100svh - (5rem + 2px + ((1rem * 1.5)))) !important;
    }

    .shop-cont .header, .items-selection-container .header {
        padding: .75rem .75rem;
    }
    
    ul.list-inline.category-cont.d-flex.gap-1 li {
        flex: 1;
        width: 100%;
    }

    .products-container ul.list-inline.category-cont.d-flex.gap-1 li {
        flex: 1;
        width: 100%;
        max-width: 16.66666666666667%;
    }

    ul.list-inline.category-cont.d-flex.gap-1 li a {
        text-align: center;
        display: block;
        white-space: nowrap;
    }

    .products-container .search-input {
        flex: 0 0 100% !important;
    }

    .category-cont {
        width: 100% !important;
    }

    #shop-products > :first-child {
        justify-content: center;
    }

    .product-card {
        flex: 0 0 75px;
        max-width: calc(75px - 4px);
    }

    .btn-add-cart:focus {
        color: #fff !important;
    }

    .cart-input-quantity input {
        width: 25px !important;
        padding: 0;
    }

    .packed-preview .items {
        overflow-x: scroll;
    }

    .flex-weight span, .flex-cost span, .flex-actions span {
        white-space: nowrap;
    }

    .preview-content {
        flex-wrap: nowrap;
    }

    .transaction-modal .items, .transaction-modal .preview-header {
        font-size: .5rem;
    }

    .p-tabview-header .fw-normal {
        width: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .order-form {
        font-size: 0.425rem;
    }

    .order-status-cont .details-label {
        min-width: 76px;
        margin-right: 0;
    }

    .details-label {
        min-width: 52px;
    }

    .table-img {
        flex: 0 0 30px;
        height: 30px;
    }

    .table-img img {
        min-height: 30px;
    }

    .process-panel .step-view {
        max-height: calc(100svh - ((1rem * 1.2) + 3rem + ((.6rem * 1.5) * 4) + (14px * 1.5))) !important;
        height: calc(100svh - ((1rem * 1.2) + 3rem + ((.6rem * 1.5) * 4) + (14px * 1.5))) !important;
    }

    .side-panel {
        min-height: calc(100svh - 113px) !important;
    }

    h4, .h4 {
        font-size: 1rem;
    }

    .search-set .p-button-label {
        width: 67px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .login-wrapper .login-content.user-login {
        height: 100%;
    }

    html {
        height: 100%;
    }

    .m-custom {
        position: absolute;
        left: 0;
        z-index: 9;
    }

    .top-head-btn {
        position: relative;
    }

    .icon-only .p-button-label {
        width: 0;
    }

    .account-payable-modal .step-view {
        max-height: calc(100svh - (5rem + 2px + ((1rem * 1.5)))) !important;
        height: calc(100svh - (5rem + 2px + ((1rem * 1.5)))) !important;
    }

    .table-top .search-set button.icon-only {
        width: 100%;
        padding: .25rem .1rem;
        width: auto !important;
    }

    .m-d-none {
        display: none;
    }

    .expense-modal.p-dialog-maximized .section {
        max-height: calc(100svh - (4rem + (.875rem * 1.5) + (1.125rem * 1.2))) !important;
        height: calc(100svh - (4rem + (.875rem * 1.5) + (1.125rem * 1.2))) !important;
        overflow: scroll;
    }

    .expense-modal .category-type-cont {
        flex: 0 0 100% !important;
    }

    .expense-modal .payment-cont {
        flex: 1;
        height: 100%;
    }

    .expense-modal .mode-of-payment-cont div:nth-of-type(2) {
        flex-wrap: wrap;
    }

    .expense-modal .mode-of-payment-cont div:nth-of-type(2) div {
        width: 50% !important;
    }

    .expense-modal .payment-item span {
        margin: 0;
    }

    .expense-modal .img-preview {
        width: 40%;
    }

    .expense-modal .payment-item img {
        display: none;
    }

    .table-list-card {
        margin-top: 43px;
    }

    .no-mt.table-list-card {
        margin-top: 0px !important;
    }

    .account-payable-modal .order-selections .order-item-detail div {
        font-size: 0.645rem;
    }

    .account-payable-modal .order-selections .order-item-img-cont {
        height: 15px;
    }

    .account-payable-modal .order-selections .order-item-img-cont img {
        max-width: 23%;
        min-height: 10px;
    }

    .account-payable-modal .accounting-item-details div {
        font-size: 0.645rem;
    }

    .account-payable-modal i.icon {
        width: 19px;
        height: 19px; 
    }

    .account-payable-modal .order-item-card {
        padding: 5px 6px;
    }

    .account-payable-modal .search-input, .expense-item-search {
        flex: 0 0 100% !important;
    }

    .account-payable-modal .form-control.md-w {
        width: 100% !important;
    }

    .account-payable-modal .search-set {
        margin: 0px 5px;
    }

    .account-payable-modal .search-set .search-input {
        margin-right: 0 !important;
    }

    .account-payable-modal .p-dialog .p-datatable .p-datatable-tbody > tr > td, .account-payable-modal .p-datatable .p-datatable-tbody> tr > td {
        font-size: 0.645rem !important;
        padding: 0.198rem 0.2rem !important;
    }

    .account-payable-modal .p-dialog .p-datatable .p-datatable-tbody > tr > td:nth-child(3), .account-payable-modal .p-datatable .p-datatable-tbody> tr > td:nth-child(3) {
        min-width: 80px !important;
    }

    .account-payable-modal .p-datatable-wrapper .p-inputtext {
        height: 29px;
    }

    .kit-costing-table .p-datatable-wrapper .p-datatable-tbody > tr > td:nth-child(2) span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .btn-filter, .btn-filter:hover {
        width: 37px;
    }

    .inventory_clerk .account-payable-card, .purchaser .account-payable-card {
       margin-top: 0;
    }

    .account-payable-card .mxw-2 {
        max-width: 130px !important;
    }

    .filter-container {
        max-width: 100% !important;
    }

    .btn-filter, .btn-filter:hover {
        font-size: 0;
    }

    .search-header {
       background-color: #fff;
       position: fixed;
       top: 67px;
       left: 0;
       width: 100%;
       z-index: 1000;
       padding: 10px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       height: auto;
    }

    .search-header .search-input {
        flex: 0 0 100% !important;
        background: #fbfbfb;
    }

    .mr-61 {
        margin-right: 61px;
    }

    .search-global {
        width: 100%;
        height: auto;
        top: 105px;
    }

    .search-header {
        display: block;
    }

    .cart-container {
        flex-wrap: wrap;
        overflow-y: scroll;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
    
    .cart-container .cart-items {
        flex: 0 0 100%;
        height: 50svh;
    }

    .cart-container .body {
        max-height: 50svh;
        margin-top: 3.5rem !important;
    }

    .cart-container .cart-sidebar {
        margin-top: 4rem;
        min-width: unset;
        max-width: unset;
        width: 100%;
    }

    .cart-container .header {
        height: 80px;
    }

    .cart-container .search-input {
        flex: 0 0 100% !important;
    }

    .cart-container .cart-sidebar h5 {
        padding-left: 12px;
    }

    .cart-container .preview-content {
        flex-wrap: wrap;
    }

    .cart-container .cart-input-quantity input {
        width: 100% !important;
        padding: 0;
    }

    .cart-container .cart-label {
        width: 95px;
    }

    .cart-container .cart-name span {
        font-size: 0.72em;
    }

    .cart-container .cart-img {
        width: 28px;
        height: 28px;
    }

    .raw-material-stock  .view-order-items > div, .view-order-items-title > div {
        font-size: 0.45rem;
    }

    .raw-material-stock .details-content, .raw-material-stock .details-label {
        font-size: 0.7rem;
    }

    .report-modal .report-content .card {
        flex: 0 0 100%;
    }

    .report-modal .search-input {
        flex: 0 0 85% !important;
        background: #fbfbfb;
    }

    .chat-content {
        position: absolute;
        z-index: 9;
        height: 100svh;
        width: 100%;
        top: 0;
    }

    .chat-content .chat-body {
        height: 100%;
        width: 100%;
    }

    .chat-sidebar {
        /* width: 100%; */
        justify-content: end;
    }

    .chat-sidebar .chat-list {
        height: 100svh;
        width: 100%;
    }

    .chat-bubble {
        margin: 1rem 1.2rem;
    }

    .chat-content .chat-message img {
        height: auto !important;
    }

    .tab-header {
        justify-content: space-around !important;
    }

    .btn-resync, .btn-resync:hover {
        width: 37px;
    }

    .btn-resync span {
        display: none;
    }

    .tab-footer button, .tab-header button {
        height: 19px;
        font-size: .5rem !important;
        width: 31.47px;
    }

    .tab-footer {
        right: 1.5rem;
    }

    .fa-legend {
        display: none !important;
    }

    .tab-header .fa-tabs {
        gap: .02rem !important
    }

    .p-tabview-panels {
        display: none !important;
    }

    .label-calendar  span:first-of-type {
        display: none !important;
    }

    .preview-footer .w-55 {
        width: 100% !important;
    }
}

@media(max-width: 375px) {
    .vr-wizard--btn {
        min-width: unset !important;
    }
}