
@media (max-width: 768px) {
  
  body.fu-uc .fu-uc-icon-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  body.fu-uc .fu-uc-icon-btn i {
    font-size: 18px !important;
    line-height: 1 !important;
  }
  body.fu-uc .fu-uc-brand img {
    max-height: 28px !important;
  }

  
  .fu-tabbar-svg {
    width: 22px !important;
    height: 22px !important;
  }
  .fu-tabbar-svg path {
    stroke-width: 2 !important;
  }
  .fu-tabbar-item {
    font-size: 11px !important;
    gap: 4px !important;
  }

  
  .fu-tabs-card {
    border-radius: 8px !important;
    overflow: visible !important;
  }
  .fu-tabs-card .fu-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    background: #fff !important;
    scrollbar-width: none;
  }
  .fu-tabs-card .fu-tabs::-webkit-scrollbar {
    display: none;
  }
  .fu-tabs-card .fu-tabs .fu-tabs-item {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }
  .fu-tabs-card .fu-tabs .fu-tabs-item:before,
  .fu-tabs-card .fu-tabs .fu-tabs-item:last-child:before {
    display: none !important;
  }
  .fu-tabs-card .fu-tabs .fu-tabs-item.active {
    background: #fff !important;
    box-shadow: inset 0 -2px 0 #2563eb !important;
  }
  .fu-tabs-card .fu-tabs .fu-tabs-item.active span {
    padding-left: 0 !important;
    color: #2563eb !important;
  }
  
  .fu-tabs-card .fu-tabs .fu-tabs-item.active span:after {
    display: none !important;
    content: none !important;
  }
  .fu-tabs-card .tabs-dropbtn {
    display: none !important;
  }

  
  .tabs_table,
  .tabs_table .card,
  .tabs_table .table-container,
  .tabs_table .table-responsive,
  .table-responsive,
  .card .table-responsive,
  .tabs_table .card-body {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .tabs_table.fu-tx-table .table-responsive,
  .tabs_table.fu-tx-table .table-container {
    overflow-x: hidden !important;
  }
  .tabs_table .table-responsive,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .tabs_table table.table,
  .tabs_table table.tablelist,
  .table-responsive > table.table,
  .card .table-responsive > table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    margin-bottom: 0 !important;
  }
  .tabs_table table.tablelist colgroup col {
    width: auto !important;
  }
  .tabs_table.fu-tx-table table.tablelist colgroup col:nth-child(n+5) {
    width: 0 !important;
    display: none !important;
  }
  .tabs_table .table th,
  .tabs_table .table td,
  .tablelist th,
  .tablelist td {
    font-size: 13px !important;
    padding: 10px 8px !important;
    vertical-align: middle !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  .tabs_table .table th .bx,
  .tablelist th .bx {
    font-size: 12px !important;
  }
  
  .tabs_table table.tablelist td[colspan],
  .tablelist td[colspan] {
    width: 100% !important;
    text-align: center !important;
  }
  .tabs_table .no-data,
  .tablelist .no-data,
  .no-data {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    background-position: center 36px !important;
    background-size: 160px auto !important;
    padding-top: 110px !important;
    height: 160px !important;
    box-sizing: border-box !important;
  }

  
  body.fu-uc[data-page="transaction"] .tabs_table table.tablelist thead th:nth-child(n+5),
  body.fu-uc[data-page="transaction"] .tabs_table table.tablelist tbody td:nth-child(n+5),
  .tabs_table.fu-tx-table table.tablelist thead th:nth-child(n+5),
  .tabs_table.fu-tx-table table.tablelist tbody td:nth-child(n+5) {
    display: none !important;
  }
  .tabs_table.fu-tx-table table.tablelist thead th:nth-child(-n+4),
  .tabs_table.fu-tx-table table.tablelist tbody td:nth-child(-n+4) {
    width: 25% !important;
  }
  
  .tabs_table.fu-tx-table table.tablelist td[colspan] {
    display: table-cell !important;
    width: 100% !important;
  }

  
  .Product-table,
  .Product-table .fu-flex-100,
  .Product-table .table-container,
  .Product-table .tabs_table,
  .Product-table .card-body {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .Product-table .table-container,
  .Product-table .card-body {
    overflow-x: hidden !important;
  }
  
  .Product-table table.tablelist thead th:nth-child(5),
  .Product-table table.tablelist thead th:nth-child(6),
  .Product-table table.tablelist thead th:nth-child(7),
  .Product-table table.tablelist thead th:nth-child(8),
  .Product-table table.tablelist tbody td:nth-child(5),
  .Product-table table.tablelist tbody td:nth-child(6),
  .Product-table table.tablelist tbody td:nth-child(7),
  .Product-table table.tablelist tbody td:nth-child(8) {
    display: none !important;
  }
  .Product-table table.tablelist thead th:nth-child(1),
  .Product-table table.tablelist tbody td:nth-child(1) {
    width: 36px !important;
  }
  .Product-table table.tablelist thead th:nth-child(2),
  .Product-table table.tablelist tbody td:nth-child(2) {
    width: 34% !important;
  }
  .Product-table table.tablelist thead th:nth-child(3),
  .Product-table table.tablelist tbody td:nth-child(3) {
    width: 18% !important;
  }
  .Product-table table.tablelist thead th:nth-child(4),
  .Product-table table.tablelist tbody td:nth-child(4) {
    width: 26% !important;
  }
  .Product-table table.tablelist thead th:nth-child(9),
  .Product-table table.tablelist tbody td:nth-child(9) {
    width: 22% !important;
  }
  .Product-table table.tablelist thead th .text-black-50 {
    display: none !important;
  }
  .Product-table table.tablelist thead th,
  .Product-table table.tablelist tbody td {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 12px !important;
    padding: 10px 6px !important;
    vertical-align: middle !important;
  }
  .Product-table table.tablelist td[colspan],
  .Product-table table.tablelist td[colspan="12"],
  .Product-table table.tablelist td[colspan="9"] {
    display: table-cell !important;
    width: 100% !important;
  }
  
  .Product-table .operationButtons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .Product-table .operationButtons > .btn,
  .Product-table .operationButtons > .dropdown.bootstrap-select,
  .Product-table .operationButtons > a.btn {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .Product-table .table-search {
    width: 100% !important;
    margin-top: 8px !important;
  }
  .Product-table .table-search .col-sm-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .Product-table .server-area {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    height: auto !important;
    margin-bottom: 10px !important;
    background: transparent !important;
  }
  .Product-table .server-area .server-area-item {
    width: 100% !important;
    height: 38px !important;
    justify-content: flex-start !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
  }
  .Product-table .server-area .server-area-item:before {
    display: none !important;
  }
  .Product-table .server-area .server-area-item.active {
    background: #e7eaef !important;
  }

  
  .tabs_table .billingUrl ~ .card-body table.tablelist thead th:nth-child(3),
  .tabs_table .billingUrl ~ .card-body table.tablelist tbody td:nth-child(3),
  .tabs_table .billingUrl ~ .card-body table.tablelist thead th:nth-child(5),
  .tabs_table .billingUrl ~ .card-body table.tablelist tbody td:nth-child(5),
  .tabs_table .billingUrl ~ .card-body table.tablelist thead th:nth-child(6),
  .tabs_table .billingUrl ~ .card-body table.tablelist tbody td:nth-child(6),
  .tabs_table .billingUrl ~ .card-body table.tablelist thead th:nth-child(7),
  .tabs_table .billingUrl ~ .card-body table.tablelist tbody td:nth-child(7),
  .tabs_table:has(.billingUrl) table.tablelist thead th:nth-child(3),
  .tabs_table:has(.billingUrl) table.tablelist tbody td:nth-child(3),
  .tabs_table:has(.billingUrl) table.tablelist thead th:nth-child(5),
  .tabs_table:has(.billingUrl) table.tablelist tbody td:nth-child(5),
  .tabs_table:has(.billingUrl) table.tablelist thead th:nth-child(6),
  .tabs_table:has(.billingUrl) table.tablelist tbody td:nth-child(6),
  .tabs_table:has(.billingUrl) table.tablelist thead th:nth-child(7),
  .tabs_table:has(.billingUrl) table.tablelist tbody td:nth-child(7) {
    display: none !important;
  }
  .tabs_table:has(.billingUrl) table.tablelist thead th:nth-child(1),
  .tabs_table:has(.billingUrl) table.tablelist tbody td:nth-child(1),
  .tabs_table .billingUrl ~ .card-body table.tablelist thead th:nth-child(1),
  .tabs_table .billingUrl ~ .card-body table.tablelist tbody td:nth-child(1) {
    width: 36px !important;
  }
  .tabs_table:has(.billingUrl) table.tablelist thead th:nth-child(2),
  .tabs_table:has(.billingUrl) table.tablelist tbody td:nth-child(2),
  .tabs_table .billingUrl ~ .card-body table.tablelist thead th:nth-child(2),
  .tabs_table .billingUrl ~ .card-body table.tablelist tbody td:nth-child(2) {
    width: 22% !important;
  }
  .tabs_table:has(.billingUrl) table.tablelist thead th:nth-child(4),
  .tabs_table:has(.billingUrl) table.tablelist tbody td:nth-child(4),
  .tabs_table .billingUrl ~ .card-body table.tablelist thead th:nth-child(4),
  .tabs_table .billingUrl ~ .card-body table.tablelist tbody td:nth-child(4) {
    width: 22% !important;
  }
  .tabs_table:has(.billingUrl) table.tablelist thead th:nth-child(8),
  .tabs_table:has(.billingUrl) table.tablelist tbody td:nth-child(8),
  .tabs_table .billingUrl ~ .card-body table.tablelist thead th:nth-child(8),
  .tabs_table .billingUrl ~ .card-body table.tablelist tbody td:nth-child(8) {
    width: 22% !important;
  }
  .tabs_table:has(.billingUrl) table.tablelist thead th:nth-child(9),
  .tabs_table:has(.billingUrl) table.tablelist tbody td:nth-child(9),
  .tabs_table .billingUrl ~ .card-body table.tablelist thead th:nth-child(9),
  .tabs_table .billingUrl ~ .card-body table.tablelist tbody td:nth-child(9) {
    width: 28% !important;
  }
  .tabs_table:has(.billingUrl) table.tablelist td[colspan],
  .tabs_table .billingUrl ~ .card-body table.tablelist td[colspan] {
    display: table-cell !important;
    width: 100% !important;
  }

  
  .tabs_table .logSearch ~ .fu-tabs-card table.tablelist thead th:nth-child(3),
  .tabs_table .logSearch ~ .fu-tabs-card table.tablelist tbody td:nth-child(3),
  .tabs_table .logSearch ~ .fu-tabs-card table.tablelist thead th:nth-child(4),
  .tabs_table .logSearch ~ .fu-tabs-card table.tablelist tbody td:nth-child(4) {
    display: none !important;
  }
  .tabs_table .logSearch ~ .fu-tabs-card table.tablelist thead th:nth-child(1),
  .tabs_table .logSearch ~ .fu-tabs-card table.tablelist tbody td:nth-child(1) {
    width: 62% !important;
  }
  .tabs_table .logSearch ~ .fu-tabs-card table.tablelist thead th:nth-child(2),
  .tabs_table .logSearch ~ .fu-tabs-card table.tablelist tbody td:nth-child(2) {
    width: 38% !important;
  }
  .tabs_table .logSearch ~ .fu-tabs-card table.tablelist td[colspan] {
    display: table-cell !important;
    width: 100% !important;
  }

  
  .tabs_table table.tablelist:has(td.messageTitle) thead th:nth-child(4),
  .tabs_table table.tablelist:has(td.messageTitle) tbody td:nth-child(4) {
    display: none !important;
  }
  .tabs_table table.tablelist:has(td.messageTitle) thead th:nth-child(1),
  .tabs_table table.tablelist:has(td.messageTitle) tbody td:nth-child(1) {
    width: 36px !important;
  }
  .tabs_table table.tablelist:has(td.messageTitle) thead th:nth-child(2),
  .tabs_table table.tablelist:has(td.messageTitle) tbody td:nth-child(2) {
    width: 58% !important;
  }
  .tabs_table table.tablelist:has(td.messageTitle) thead th:nth-child(3),
  .tabs_table table.tablelist:has(td.messageTitle) tbody td:nth-child(3) {
    width: 34% !important;
  }
  .tabs_table table.tablelist:has(td.messageTitle) td[colspan] {
    display: table-cell !important;
    width: 100% !important;
  }

  
  .tabs_table td.messageTitle,
  .tabs_table .messageTitle {
    white-space: normal !important;
    word-break: break-word !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  
  .table-footer,
  .fu-table-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 12px 16px !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  .table-pagination,
  .tabs_table .tablemsg .table-pagination,
  .fu-content .table-pagination,
  .fu-table-footer .table-pagination {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .fu-table-quantity,
  .fui-page-total {
    white-space: nowrap !important;
    line-height: 28px !important;
  }
  .fui-table-pageinfo,
  .table-pageinfo {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px 8px !important;
    margin: 0 !important;
    width: auto !important;
    font-size: 13px !important;
    color: #64748b !important;
  }
  .fui-page-limit,
  .fui-table-pageinfo .mx-2,
  .table-pageinfo .mx-2 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  .fui-table-pageinfo .bootstrap-select,
  .table-pageinfo .bootstrap-select,
  .fui-table-pageinfo .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn),
  .table-pageinfo .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn),
  .table-pageinfo .paging .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 72px !important;
  }
  .fui-table-pageinfo .bootstrap-select > .dropdown-toggle,
  .table-pageinfo .bootstrap-select > .dropdown-toggle {
    padding: 4px 22px 4px 8px !important;
    height: 30px !important;
    font-size: 13px !important;
  }
  .pagination {
    margin: 0 !important;
    justify-content: flex-start !important;
  }
  .pagination .page-link {
    min-width: 32px;
    padding: 6px 10px !important;
  }

  
  .tabs_table .row .col-12 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .tabs_table .row .col-12 .btn {
    flex: 1 1 calc(50% - 4px) !important;
    margin: 0 !important;
    min-height: 40px !important;
    font-size: 14px !important;
  }

  
  .security-header .security-item,
  .security-items .security-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 12px !important;
    flex-wrap: nowrap !important;
  }
  .security-item-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .security-item-icon i {
    font-size: 18px !important;
    color: #fff !important;
    line-height: 1 !important;
  }
  .security-item-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .security-item-title {
    font-size: 15px !important;
    margin: 0 0 4px !important;
  }
  .security-item .btn,
  .security-item button.btn {
    flex-shrink: 0 !important;
    min-width: 64px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
  
  body.fu-uc .security-header > .card-body {
    padding: 14px 12px !important;
  }
  body.fu-uc .security-header-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  body.fu-uc .security-header .security-info {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  body.fu-uc .security-header .security-meta {
    grid-template-columns: 1fr !important;
  }

  
  body.fu-uc:not(.auth-page) .main-content .page-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .tabs_table .bgw,
  .card.mb-4 {
    border-radius: 10px !important;
  }
  .fu-content-panel,
  .fu-content .card {
    width: 100% !important;
  }

  
  .fas, .far, .fal, .fab, .fa,
  .bx, .bxs, .bxl {
    speak: none;
    -webkit-font-smoothing: antialiased;
  }
  i.fas:before, i.far:before, i.fal:before, i.fab:before, i.fa:before {
    font-family: "Font Awesome 5 Pro" !important;
  }
  i.fas:before, i.fa:before {
    font-weight: 900 !important;
  }
  i.far:before {
    font-weight: 400 !important;
  }

  

  
  .fu-step {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  .fu-step ol {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }
  .fu-step .step-item {
    width: 100% !important;
  }
  .fu-step .step-item-title {
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }
  .bgw,
  .layui-elem-quote {
    width: 100% !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
  }
  .layui-elem-quote p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .selectDepartment.fu-card,
  .workOrderContent.fu-card,
  .workviewticket .fu-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: 1px solid #eef2f7 !important;
    border-radius: 10px !important;
  }
  .selectDepartment .fu-title,
  .workOrderContent .fu-title,
  .workviewticket .fu-title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  
  .selectDepartment .problemSearch .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  .selectDepartment .problemSearch .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .selectDepartment .problemSearch .input-group-append,
  .selectDepartment .problemSearch .btn {
    flex-shrink: 0 !important;
  }
  .selectDepartment .selectDepartment-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .selectDepartment .selectDepartment-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  .selectDepartment .selectDepartment-item-title,
  .selectDepartment .selectDepartment-item-content {
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  
  .workOrderContent form .fu-column {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .workOrderContent form .col-sm-4,
  .workOrderContent form .col-12,
  .workOrderContent form .col-6,
  .workOrderContent form .col-sm-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .workOrderContent form .col-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .workOrderContent .form-group {
    margin-bottom: 14px !important;
  }
  .workOrderContent .form-control,
  .workOrderContent .bootstrap-select,
  .workOrderContent .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn),
  .workOrderContent .bootstrap-select > .dropdown-toggle {
    width: 100% !important;
    max-width: 100% !important;
  }
  .workOrderContent .btn-block,
  .workviewticket .btn-block {
    min-height: 42px !important;
  }

  
  .container-img {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .container-img .image-preview-container {
    width: 100% !important;
    min-height: 88px !important;
  }
  .container-img .image-preview-container .placeholder,
  .container-img .image-preview {
    width: 96px !important;
    height: 72px !important;
  }
  .container-img .upload-btn-container {
    width: 100% !important;
  }
  .container-img .upload-btn {
    width: 100% !important;
  }

  
  .note-editor.note-frame,
  .note-editor {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .note-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
  }
  .note-editable {
    min-height: 140px !important;
  }

  
  .workviewticket.fu-flex-container,
  .workviewticket {
    width: 100% !important;
    flex-direction: column !important;
  }
  .workviewticket .fu-row {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .workviewticket .fu-flex-70,
  .workviewticket .fu-flex-30,
  .workviewticket .fu-flex-100,
  .workviewticket .workviewticket-drawPoints {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    top: auto !important;
    height: auto !important;
  }
  .workviewticket .workviewticket-head {
    padding: 12px 0 0 !important;
    margin-bottom: 10px !important;
  }
  .workviewticket .workviewticket-head .d-flex {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  .workviewticket .workviewticket-head p,
  .workviewticket .workviewticket-head span {
    font-size: 13px !important;
    word-break: break-word !important;
  }
  .workviewticket .chat-container {
    width: 100% !important;
    padding: 0 !important;
  }
  .workviewticket .chat-container .chat-message {
    padding: 12px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .workviewticket .chat-container .admin,
  .workviewticket .chat-container .user {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .workviewticket .chat-container .message-header {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  .workviewticket .chat-container .message-content,
  .workviewticket .chat-container .message-content * {
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  .workviewticket .chat-container .message-content img {
    height: auto !important;
  }
  .workviewticket .workOrderInformation {
    width: 100% !important;
    gap: 12px !important;
  }
  .workviewticket .ticket-info-item {
    width: 100% !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }
  .workviewticket .ticket-info-item-content {
    text-align: right !important;
    word-break: break-word !important;
    max-width: 65% !important;
  }
  .workviewticket .fu-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .workviewticket #ticketReplyContainer,
  .workviewticket .card-reply {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .workviewticket #ticketReplyContainer .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .workviewticket #ticketReplyContainer .col-lg-3,
  .workviewticket #ticketReplyContainer .col-xs-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-bottom: 8px !important;
  }

  
  .workOrderList .card-body {
    padding: 12px !important;
  }
  .workOrderList .table-header .btn,
  .workOrderList .table-header a {
    display: block !important;
    width: 100% !important;
  }
  .workOrderList .table-header .btn {
    margin: 0 0 10px !important;
  }
  .workOrderList .table-responsive {
    overflow: visible !important;
  }
  .workOrderList table.tablelist {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
    border: 0 !important;
  }
  .workOrderList table.tablelist thead {
    display: none !important;
  }
  .workOrderList table.tablelist tbody,
  .workOrderList table.tablelist tr,
  .workOrderList table.tablelist td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .workOrderList table.tablelist tr {
    margin: 0 0 10px !important;
    padding: 12px !important;
    border: 1px solid #e8eef5 !important;
    border-radius: 10px !important;
    background: #fff !important;
  }
  .workOrderList table.tablelist tr:last-child {
    margin-bottom: 0 !important;
  }
  
  .workOrderList table.tablelist tbody td:nth-child(3),
  .workOrderList table.tablelist tbody td:nth-child(5),
  .workOrderList table.tablelist tbody td:nth-child(6),
  .workOrderList table.tablelist tbody td:nth-child(7) {
    display: none !important;
  }
  .workOrderList table.tablelist tbody td:nth-child(1),
  .workOrderList table.tablelist tbody td:nth-child(2),
  .workOrderList table.tablelist tbody td:nth-child(4) {
    display: block !important;
    width: 100% !important;
    padding: 0 0 6px !important;
    border: 0 !important;
  }
  .workOrderList table.tablelist tbody td:nth-child(2) {
    order: -1;
    padding-bottom: 8px !important;
  }
  .workOrderList .workOrderTitle a {
    padding-left: 0 !important;
    display: block !important;
  }
  .workOrderList .workOrderTitle a:before {
    display: none !important;
  }
  .workOrderList .workOrderTitle a p {
    max-width: 100% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .workOrderList table.tablelist tbody td:nth-child(1) .btn {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
    margin: 0 !important;
    white-space: normal !important;
  }
  .workOrderList .processingStatus {
    justify-content: flex-start !important;
  }
  .workOrderList table.tablelist td[colspan],
  .workOrderList table.tablelist tr:has(.no-data) {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }
  .workOrderList table.tablelist tr:has(.no-data) td {
    padding: 0 !important;
  }

  
  body[data-page="invoicelist"] .card,
  body[data-page="invoiceaddress"] .card,
  body[data-page="invoicecompany"] .card,
  body[data-page="invoiceapply"] .card,
  .fu-invoice-page {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body[data-page="invoicelist"] .card-body,
  body[data-page="invoiceaddress"] .card-body,
  body[data-page="invoicecompany"] .card-body,
  .fu-invoice-page .card-body {
    padding: 12px !important;
  }
  .fu-invoice-apply-btn,
  .fu-invoice-tool-btn,
  body[data-page="invoicelist"] .btn-success.btn-sm,
  body[data-page="invoiceaddress"] .table-tools .btn,
  body[data-page="invoicecompany"] .table-tools .btn {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    min-height: 40px;
  }
  body[data-page="invoicelist"] .table-search .col-sm-6,
  body[data-page="invoicelist"] .table-header .col-sm-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  body[data-page="invoicelist"] .table-responsive,
  body[data-page="invoiceaddress"] .table-responsive,
  body[data-page="invoicecompany"] .table-responsive,
  .fu-invoice-page .table-responsive {
    overflow-x: hidden !important;
  }

  
  .fu-invoice-list-table,
  body[data-page="invoicelist"] table.tablelist {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
    border: 0 !important;
  }
  .fu-invoice-list-table thead,
  body[data-page="invoicelist"]:not(:has(.fu-invoice-apply-table)) table.tablelist thead {
    display: none !important;
  }
  .fu-invoice-list-table tbody,
  .fu-invoice-list-table tr,
  .fu-invoice-list-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fu-invoice-list-table tr {
    margin: 0 0 10px !important;
    padding: 12px !important;
    border: 1px solid #e8eef5 !important;
    border-radius: 10px !important;
    background: #fff !important;
  }
  .fu-invoice-list-table tbody td:nth-child(5),
  .fu-invoice-list-table tbody td:nth-child(6) {
    display: none !important;
  }
  .fu-invoice-list-table tbody td {
    padding: 0 0 6px !important;
    border: 0 !important;
    font-size: 13px !important;
    word-break: break-word !important;
  }
  .fu-invoice-list-table tbody td:nth-child(2) {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #1e293b !important;
  }
  .fu-invoice-list-table tbody td:nth-child(7) {
    padding-top: 4px !important;
  }
  .fu-invoice-list-table tbody td:nth-child(7) a {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 10px 0 0 !important;
    font-size: 13px !important;
  }
  .fu-invoice-list-table td[colspan],
  .fu-invoice-list-table tr:has(.no-data) {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  
  .fu-invoice-apply-table thead th:nth-child(4),
  .fu-invoice-apply-table thead th:nth-child(5),
  .fu-invoice-apply-table tbody td:nth-child(4),
  .fu-invoice-apply-table tbody td:nth-child(5) {
    display: none !important;
  }
  .fu-invoice-apply-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 100% !important;
  }
  .fu-invoice-apply-table thead th:nth-child(1),
  .fu-invoice-apply-table tbody td:nth-child(1) { width: 36px !important; }
  .fu-invoice-apply-table thead th:nth-child(2),
  .fu-invoice-apply-table tbody td:nth-child(2) { width: 28% !important; }
  .fu-invoice-apply-table thead th:nth-child(3),
  .fu-invoice-apply-table tbody td:nth-child(3) { width: 30% !important; }
  .fu-invoice-apply-table thead th:nth-child(6),
  .fu-invoice-apply-table tbody td:nth-child(6) { width: 30% !important; }
  .fu-invoice-apply-table thead th .text-black-50 { display: none !important; }
  .fu-invoice-page #issueBtn {
    width: 100% !important;
    margin-top: 10px !important;
    min-height: 40px;
  }

  
  .fu-invoice-address-table thead th:nth-child(5),
  .fu-invoice-address-table tbody td:nth-child(5) {
    display: none !important;
  }
  .fu-invoice-address-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 100% !important;
  }
  .fu-invoice-address-table thead th:nth-child(1),
  .fu-invoice-address-table tbody td:nth-child(1) { width: 14% !important; }
  .fu-invoice-address-table thead th:nth-child(2),
  .fu-invoice-address-table tbody td:nth-child(2) { width: 18% !important; }
  .fu-invoice-address-table thead th:nth-child(3),
  .fu-invoice-address-table tbody td:nth-child(3) { width: 22% !important; }
  .fu-invoice-address-table thead th:nth-child(4),
  .fu-invoice-address-table tbody td:nth-child(4) { width: 24% !important; }
  .fu-invoice-address-table thead th:nth-child(6),
  .fu-invoice-address-table tbody td:nth-child(6) { width: 22% !important; }
  .fu-invoice-address-table thead th .text-black-50 { display: none !important; }
  .fu-invoice-address-table tbody td {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 12px !important;
    padding: 10px 4px !important;
    vertical-align: top !important;
  }
  .fu-invoice-address-table tbody td:nth-child(6) a {
    display: inline-block !important;
    margin: 0 0 4px !important;
    white-space: nowrap !important;
  }

  
  .fu-invoice-company-table thead th:nth-child(3),
  .fu-invoice-company-table thead th:nth-child(4),
  .fu-invoice-company-table tbody td:nth-child(3),
  .fu-invoice-company-table tbody td:nth-child(4) {
    display: none !important;
  }
  .fu-invoice-company-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 100% !important;
  }
  .fu-invoice-company-table thead th:nth-child(1),
  .fu-invoice-company-table tbody td:nth-child(1) { width: 14% !important; }
  .fu-invoice-company-table thead th:nth-child(2),
  .fu-invoice-company-table tbody td:nth-child(2) { width: 34% !important; }
  .fu-invoice-company-table thead th:nth-child(5),
  .fu-invoice-company-table tbody td:nth-child(5) { width: 28% !important; }
  .fu-invoice-company-table thead th:nth-child(6),
  .fu-invoice-company-table tbody td:nth-child(6) { width: 24% !important; }
  .fu-invoice-company-table thead th .text-black-50 { display: none !important; }
  .fu-invoice-company-table tbody td {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 12px !important;
    padding: 10px 4px !important;
  }
  .fu-invoice-company-table tbody td:nth-child(6) a {
    display: inline-block !important;
    margin: 0 0 4px !important;
  }

  
  .fu-invoice-issue-form .form-group.row,
  .fu-invoice-page form .form-group.row,
  body[data-page="invoiceaddress"] form .form-group.row,
  body[data-page="invoicecompany"] form .row > [class*="col-"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .fu-invoice-issue-form .col-sm-1,
  .fu-invoice-issue-form .col-sm-5,
  .fu-invoice-issue-form .col-sm-11,
  .fu-invoice-issue-form .col-form-label,
  .fu-invoice-page form .col-sm-1,
  .fu-invoice-page form .col-sm-2,
  .fu-invoice-page form .col-sm-5,
  .fu-invoice-page form .col-sm-10,
  .fu-invoice-page form .col-sm-11,
  body[data-page="invoiceaddress"] form .col-8,
  body[data-page="invoiceaddress"] form .col-sm-2,
  body[data-page="invoiceaddress"] form .col-sm-10,
  body[data-page="invoicecompany"] form .col-md-8,
  body[data-page="invoicecompany"] form .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .fu-invoice-page form .col-form-label,
  .fu-invoice-issue-form .col-form-label {
    margin-bottom: 6px !important;
    padding-top: 0 !important;
  }
  .fu-invoice-page form .form-control,
  .fu-invoice-page form .bootstrap-select,
  .fu-invoice-page form .select2,
  .fu-invoice-issue-form .form-control,
  .fu-invoice-issue-form .bootstrap-select {
    width: 100% !important;
    max-width: 100% !important;
  }
  .fu-invoice-page table.table:not(.tablelist),
  .fu-invoice-issue-form table.table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .fu-invoice-page table.table:not(.tablelist) thead,
  .fu-invoice-page table.table:not(.tablelist) tbody,
  .fu-invoice-page table.table:not(.tablelist) tr {
    width: 100%;
  }
  .fu-invoice-page table.table:not(.tablelist) th,
  .fu-invoice-page table.table:not(.tablelist) td,
  .fu-invoice-page table.table:not(.tablelist) pre {
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 12px !important;
  }
  .fu-invoice-page .btn.w-md,
  .fu-invoice-issue-form .btn.w-md {
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  
  body[data-page="downloads"] .fu-downloads-page,
  .fu-downloads-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  body[data-page="downloads"] .filemanager-sidebar,
  .fu-downloads-page .filemanager-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex: none !important;
  }
  body[data-page="downloads"] .filemanager-sidebar .card-body,
  .fu-downloads-page .filemanager-sidebar .card-body {
    padding: 12px !important;
  }
  body[data-page="downloads"] .filemanager-sidebar .mb-4,
  .fu-downloads-page .filemanager-sidebar .mb-4 {
    margin-bottom: 0 !important;
  }
  body[data-page="downloads"] .categories-list,
  .fu-downloads-page .categories-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  body[data-page="downloads"] .categories-list li,
  .fu-downloads-page .categories-list li {
    margin: 0 !important;
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 140px !important;
  }
  body[data-page="downloads"] .categories-list a,
  .fu-downloads-page .categories-list a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border: 1px solid #e8eef5 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    font-size: 13px !important;
    word-break: break-word !important;
  }
  body[data-page="downloads"] .fu-downloads-main,
  .fu-downloads-page .fu-downloads-main,
  body[data-page="downloads"] .w-100 {
    width: 100% !important;
    max-width: 100% !important;
  }
  body[data-page="downloads"] .card-body,
  .fu-downloads-page .fu-downloads-main .card-body {
    padding: 12px !important;
  }
  body[data-page="downloads"] .mt-4 {
    margin-top: 0 !important;
  }
  .fu-downloads-table,
  body[data-page="downloads"] table.table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }
  .fu-downloads-table.table-nowrap td,
  .fu-downloads-table.table-nowrap th,
  body[data-page="downloads"] table.table-nowrap td,
  body[data-page="downloads"] table.table-nowrap th {
    white-space: normal !important;
  }
  
  .fu-downloads-table thead th:nth-child(3),
  .fu-downloads-table tbody td:nth-child(3),
  body[data-page="downloads"] table.table thead th:nth-child(3),
  body[data-page="downloads"] table.table tbody td:nth-child(3) {
    display: none !important;
  }
  .fu-downloads-table thead th:nth-child(1),
  .fu-downloads-table tbody td:nth-child(1) {
    width: 52% !important;
  }
  .fu-downloads-table thead th:nth-child(2),
  .fu-downloads-table tbody td:nth-child(2) {
    width: 30% !important;
  }
  .fu-downloads-table thead th:nth-child(4),
  .fu-downloads-table tbody td:nth-child(4) {
    width: 18% !important;
    text-align: right !important;
  }
  .fu-downloads-table tbody td,
  .fu-downloads-table thead th {
    font-size: 12px !important;
    padding: 10px 6px !important;
    vertical-align: middle !important;
    word-break: break-word !important;
  }
  .fu-downloads-table tbody td:nth-child(1) a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    line-height: 1.4 !important;
  }
}

.Uicon {
  font-family: "Font Awesome 5 Pro", "FontAwesome" !important;
  font-weight: 900 !important;
}
.search-box .search-icon.bx-search-alt:before,
.fu-content-search .search-icon.bx-search-alt:before {
  font-family: "boxicons" !important;
  font-weight: normal !important;
  content: "\eb2d" !important;
}
.fu-content-search .fa-search:before,
.search-box .fa-search:before {
  font-family: "Font Awesome 5 Pro" !important;
  font-weight: 900 !important;
  content: "\f002" !important;
}
.fu-tabs-card .fu-tabs .fu-tabs-item.active span:after {
  font-family: "Font Awesome 5 Pro" !important;
  font-weight: 900 !important;
}
