html, body {margin: 0; padding: 0; font-family: "Roboto", sans-serif; font-size: 14px; color: #111827;}
a {text-decoration: none; color: #9B57A8 !important;}
ul, ol {margin: 0; padding: 0; list-style: none;}
input[type="text"]:read-only, input[type="password"]:read-only, input[type="email"]:read-only, input[type="number"]:read-only, input[type="date"]:read-only, textarea:read-only {background-color: #E9ECEF !important; border-color: #DEE2E6 !important; opacity: 1; pointer-events: none !important; }
input[type="text"]:read-only:focus, input[type="password"]:read-only:focus, input[type="email"]:read-only:focus, input[type="number"]:read-only:focus, textarea:read-only:focus {background-color: inherit; border-color: inherit; box-shadow: none;}
.form-label:has(+input[required]), .form-label:has(+select[required]), .form-label:has(+textarea[required]) {position: relative;}
.form-label:has(+input[required])::after, .form-label:has(+select[required])::after, .form-label:has(+textarea[required])::after {content: "*"; position: absolute; top: 0; right: -10px; color: red;}
.btn {display: inline-flex; gap: 10px; align-items: center; justify-content: center;}
.primary-color {color: #9B57A8 !important;}
.primary-color-bg {position: relative; background: #9B57A8 !important; color: #FFFFFF !important; display: inline-flex; gap: 10px; align-items: center; justify-content: center;}
.primary-btn {position: relative; background: linear-gradient(45deg, #3B82F6, #8B5CF6) !important; color: #FFFFFF !important; transition: background 0.5s ease;}
.primary-btn:hover {background: linear-gradient(225deg, #3B82F6, #8B5CF6) !important;}
.capitalize {text-transform: capitalize !important;}
.main-container {width: 100%; min-height: 100vh; background: #EDEDEF; overflow: hidden;}
.main-container.center {display: flex; align-items: center; justify-content: center; text-align: center}
.main-container.dark {background: #000000;}
.main-container.center .form-container {width: 400px; height: auto;}
.main-container.center .form-container img.form-logo {height: 50px; width: auto; margin-bottom: 30px;}
.main-container .form-container .form-wrapper {/*background: #111827;*/ background: #FFFFFF; padding: 30px; border-radius: 20px; text-align: left; color: #111827;}
.main-container .form-container .form-wrapper h2 {margin-bottom: 20px; text-align: center;}

.btn-spinner {display: none; width: 16px; height: 16px; border: 2px solid #ffffff; border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; position: relative; right: 0; top: 8px; transform: translateY(-50%);}

@keyframes spin {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}

header {}
header .header-wrapper {align-items: center; background: #232323; height: 60px; padding: 15px; color: #FFFFFF;}
header .header-wrapper .header-logo-wrapper {display: flex; align-items: center; justify-content: flex-start;}
header .header-wrapper .header-logo-wrapper .header-icon {width: auto; height: 30px;}
header .header-wrapper .header-logo-wrapper .header-logo {width: auto; height: 25px; margin-left: 10px;}
header .header-wrapper .header-logo-wrapper .version-txt {font-size: small; color: #CDCDCD; margin-left: auto; align-self: flex-end;}
header .header-wrapper .header-search-wrapper {position: relative;}
header .header-wrapper .header-search-wrapper input {margin-left: 20px; padding: 3px 10px; background: #333333; border-color: #555555; color: #F0F0F9; width: 75%; transition: width 0.3s ease;}
header .header-wrapper .header-search-wrapper input::placeholder {color: #F0F0F9;}
header .header-wrapper .header-search-wrapper input.active {background: #FFFFFF; color: #333333; width: 100%;}
header .header-wrapper .header-search-wrapper input.active::placeholder {color: #333333;}
header .header-wrapper .header-search-wrapper .suggestions-wrapper {display: none; position: absolute; border: 1px solid #ccc; background: white; width: calc(100% - 20px); max-height: 260px; overflow-y: auto; z-index: 1000; left: 30px; top: 35px; border-radius: 6px;}
header .header-wrapper .header-search-wrapper .suggestions-wrapper ul {padding: 0}
header .header-wrapper .header-search-wrapper .suggestions-wrapper ul li {padding: 10px; color: #333333;}
header .header-wrapper .header-search-wrapper .suggestions-wrapper ul li:hover, header .header-wrapper .header-search-wrapper .suggestions-wrapper ul li.active {cursor: pointer; background: #f0f0f0;}
header .header-wrapper .header-search-wrapper .suggestions-wrapper ul li.no-result {font-style: italic; pointer-events: none; color: #999;}
header .header-wrapper .header-search-wrapper .suggestions-wrapper ul li span {float: right; font-size: small; color: #676767;}
header .header-wrapper .header-options-wrapper {padding-right: 30px; display: flex; align-items: center; justify-content: flex-end;}
header .header-wrapper .header-options-wrapper .header-text {margin: 0; margin-right: 30px; font-size: 18px; font-weight: 400;}
header .header-wrapper .header-options-wrapper .header-options {}
header .header-wrapper .header-options-wrapper .header-options .header-option-item {margin-left: 20px;}
header .header-wrapper .header-options-wrapper .header-options .header-option-item-link {position: relative; margin-left: 25px; cursor: pointer; color: #FFFFFF !important;}
header .header-wrapper .header-options-wrapper .header-options .header-option-item-link:hover {color: #9B57A8 !important;}
header .header-wrapper .header-options-wrapper .header-options .header-option-item-link::before {content: ""; position: absolute; width: 18px; height: 18px; top: 0; left: -25px; background: no-repeat center center / cover; filter: brightness(0) invert(1); image-rendering: pixelated;}
header .header-wrapper .header-options-wrapper .header-options .header-option-item-link.logout::before {background-image: url('/assets/img/icons/logout.png');}
header .header-wrapper .header-options-wrapper .header-options .header-option-item-link.view-store::before {background-image: url('/assets/img/icons/view-store.png');}

.main-content-wrapper .sidebar-nav-wrapper {background: #232323; top: 60px; height: 100vh; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none;}
.main-content-wrapper .sidebar-nav-wrapper::-webkit-scrollbar {display: none;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav {margin: 25px 0; font-size: 16px; padding-bottom: 60px;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item {margin-bottom: 1px;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link {position: relative; padding: 10px; color: #FFFFFF !important; display: flex; align-items: center; justify-content: space-between; cursor: pointer; border-radius: 6px;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link span {margin-left: 30px;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link:hover, .main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.active, .main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item.has-submenu.open .sidebar-nav-item-link {background: #333333;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.active {color: #9B57A8 !important;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link::before {content: ""; position: absolute; width: 18px; height: 18px; top: 12px; left: 10px; background: no-repeat center center / cover; filter: brightness(0) invert(1); image-rendering: pixelated;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.dashboard::before {background-image: url('/assets/img/icons/dashboard.png');}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.documents::before {background-image: url('/assets/img/icons/documents.png');}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.templates::before {background-image: url('/assets/img/icons/templates.png');}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.reports::before {background-image: url('/assets/img/icons/reports.png');}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.settings::before {background-image: url('/assets/img/icons/settings.png');}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.staff::before {background-image: url('/assets/img/icons/staff.png');}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.customers::before {background-image: url('/assets/img/icons/staff.png');}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.admins::before {background-image: url('/assets/img/icons/staff.png');}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .sidebar-nav-item-link.branches::before {background-image: url('/assets/img/icons/branches.png');}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item.has-submenu .sidebar-nav-item-link::after {content: ""; position: absolute; width: 15px; height: 15px; top: 14px; right: 5px; background: url('/assets/img/icons/down-arrow.png') no-repeat center center / cover; transition: transform 0.3s; filter: brightness(0) invert(1); image-rendering: pixelated;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item.has-submenu.open .sidebar-nav-item-link {border-radius: 6px 6px 0 0;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item.has-submenu.open .sidebar-nav-item-link::after {transform: rotate(180deg);}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .submenu {display: none; position: relative; padding: 10px 20px 10px 40px; background: #232323; margin-bottom: 10px; border-radius: 0 0 6px 6px;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .submenu::before {content: ""; position: absolute; height: 90%; width: 5px; background: #676767; top: 5%; left: 16px;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item.open > .submenu {display: block;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .submenu li {margin: 10px 0;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .submenu li a {font-size: 14px; color: #FFFFFF !important; display: block; line-height: 1.75;}
.main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .submenu li a:hover, .main-content-wrapper .sidebar-nav-wrapper .sidebar-nav .sidebar-nav-item .submenu li a.active {color: #9B57A8 !important;}
.main-content-wrapper .content-container {margin-top: 60px; padding: 30px 40px;}
.main-content-wrapper .content-container .content-title-wrapper {margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between;}
.main-content-wrapper .content-container .content-title-wrapper .content-title {margin: 0;}
.main-content-wrapper .content-container .content-title-wrapper .content-title-links {display: flex; text-wrap: nowrap; gap: 15px; margin-right: 10px;}
.main-content-wrapper .content-container .content-title-wrapper .content-title-links .content-title-link {}
.main-content-wrapper .content-container .content-body {background: #FFFFFF; padding: 30px; border-radius: 10px; min-height: 500px;}
.main-content-wrapper .content-container .content-body .content-section-title {display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid #DCDCDC; font-size: 15px; font-weight: 500;}
.main-content-wrapper .content-container .content-body .document-wrapper, .main-content-wrapper .content-container .content-body .invoice-wrapper {padding: 15px; box-shadow: 1px 1px 10px #DCDCDC; border-radius: 6px;}

#invoiceItemsContainer, #cnItemsContainer, #invoiceCalculationContainer, #cnCalculationContainer {margin-bottom: 50px;}
#invoiceItemsContainer .invoice-item-head, #cnItemsContainer .invoice-item-head {background: #EDEDED; margin: 0; padding-right: 20px;}
#invoiceItemsContainer .invoice-item-head > div, #cnItemsContainer .invoice-item-head > div {padding: 10px 0; text-align: center;}
#invoiceItemsContainer .invoice-item-row, #cnItemsContainer .invoice-item-row {position: relative; margin-right: 20px;}
#invoiceItemsContainer .invoice-item-row .remove-item, #cnItemsContainer .invoice-item-row .remove-item {font-size: 25px; position: absolute; right: -20px; width: fit-content;}

.tags-wrapper {display: flex; align-items: flex-end; justify-content: flex-start; flex-wrap: wrap; gap: 10px;}
.tags-wrapper .tag {display: block; padding: 10px 15px; background: #EFEFEF; border: 1px solid #EDEDED; width: fit-content; border-radius: 3px; cursor: copy;}
.tags-wrapper .tag:hover {border: 1px dashed #CDCDCD;}
.tags-wrapper .tag .remove-tag {color: red; cursor: pointer; margin-left: 8px; font-size: 20px; line-height: 1;}

.dataTables_filter {float: left !important; text-align: left !important; margin-bottom: 10px;}
.dataTables_filter input {width: 200px; padding: 5px; font-size: 14px;}
.dataTables_filter input:focus {outline: none;}

#listTable_wrapper .top-bar, #documentsViewTable_wrapper .top-bar, #invoicesViewTable_wrapper .top-bar, #creditNotesViewTable_wrapper .top-bar {margin: -10px -10px 0;}
#listTable_wrapper .bottom, #documentsViewTable_wrapper .bottom, #invoicesViewTable_wrapper .bottom, #creditNotesViewTable_wrapper .bottom {margin: 15px -10px 0;}
#listTable {opacity: 0; transition: opacity 0.3s ease; margin: 0 -30px; width: calc(100% + 60px) !important;}
#documentsViewTable, #invoicesViewTable, #creditNotesViewTable {opacity: 0; transition: opacity 0.3s ease; margin-left: -26px; width: calc(100% + 80px) !important;}
#listTable.loaded, #documentsViewTable.loaded, #invoicesViewTable.loaded, #creditNotesViewTable.loaded {opacity: 1;}
#listTable th:first-child, #listTable td:first-child, #documentsViewTable th:first-child, #documentsViewTable td:first-child, #invoicesViewTable th:first-child, #invoicesViewTable td:first-child, #creditNotesViewTable th:first-child, #creditNotesViewTable td:first-child {padding-left: 20px;}
#listTable th:last-child, #listTable td:last-child, #documentsViewTable th:last-child, #documentsViewTable td:last-child, #invoicesViewTable th:last-child, #invoicesViewTable td:last-child, #creditNotesViewTable th:last-child, #creditNotesViewTable td:last-child {padding-right: 20px;}
.dataTables_wrapper .dataTables_paginate .paginate_button {padding: 5px 10px !important;}
.dataTables_scroll {margin: 0 -30px;}
.dataTables_scroll .dataTables_scrollHead .dataTables_scrollHeadInner thead th:first-child {padding-left: 20px;}
.dataTables_scroll .dataTables_scrollHead .dataTables_scrollHeadInner thead th {}
.dataTables_scroll .dataTables_scrollFoot .dataTables_scrollFootInner {margin-left: -5px;}
.dataTables_scroll #listTable {margin: 0;}

.action-btns {display: flex; align-items: center; gap: 10px;}
.action-btns .action-btn {background: no-repeat center center / cover; width: 20px; height: 20px; cursor: pointer;}
.action-btns .action-btn.edit-btn {background-image: url('/assets/img/icons/edit.png');}
.action-btns .action-btn.delete-btn {background-image: url('/assets/img/icons/delete.png');}
.action-btns .action-btn.view-btn {background-image: url('/assets/img/icons/view.png');}
.action-btns .action-btn.link-btn {background-image: url('/assets/img/icons/link.png');}
.action-btns .action-btn.download-btn {background-image: url('/assets/img/icons/download.png');}
.action-btns .action-btn.send-btn {background-image: url('/assets/img/icons/send.png');}
.action-btns .action-btn.reset-password-btn {background-image: url('/assets/img/icons/reset-password.png');}
.action-btns .action-btn.lock-btn {background-image: url('/assets/img/icons/lock.png'); cursor: not-allowed;}
.action-btns .action-btn.document-btn {background-image: url('/assets/img/icons/document.png');}

.password-input-wrapper {position: relative;}
.password-input-wrapper .toggle-password {position: absolute; width: 20px; height: 20px; background: no-repeat center center / cover; cursor: pointer; top: 7px; right: 15px;}
.password-input-wrapper .toggle-password {background-image: url('/assets/img/icons/view.png');}
.password-input-wrapper .toggle-password.visible {background-image: url('/assets/img/icons/hide.png');}

.photo-preview-wrapper, .logo-preview-wrapper, .brand-logo-preview-wrapper, .signature-preview-wrapper {position: relative;}
.photo-preview-wrapper .photo-preview, .logo-preview-wrapper .logo-preview, .brand-logo-preview-wrapper .brand-logo-preview, .signature-preview-wrapper .signature-preview {border: 1px solid #DCDCDC; padding: 6px; border-radius: 6px; margin-bottom: 20px;}
.photo-preview-wrapper .photo-preview img, .logo-preview-wrapper .logo-preview img, .brand-logo-preview-wrapper .brand-logo-preview img, .signature-preview-wrapper .signature-preview img {width: 100%; height: auto;}
.photo-preview-wrapper #removePhotoBtn, .logo-preview-wrapper #removeLogoBtn, .brand-logo-preview-wrapper #removeBrandLogoBtn, .signature-preview-wrapper #removeSignatureBtn {display: none; position: absolute; width: 25px; height: 25px; background: url('/assets/img/icons/remove-white.png') no-repeat center center / cover #DC3545; cursor: pointer; top: 12px; right: 12px; padding: 5px; background-origin: content-box;}

.modal .modal-body .document-details-wrapper {padding: 50px 30px;}

.toast-wrapper {padding: 5px; font-size: 15px; box-shadow: none; border-radius: 10px;}
.toast-wrapper.success {background-color: #b7f7c4;}
.toast-wrapper.error {background-color: #ffb7b6;}
.toast-wrapper.info {background-color: #b3e6f5;}
.toast-wrapper.warning {background-color: #fbe7c6;}
.toast-wrapper .toast-body {position: relative; padding: 10px !important; padding-left: 40px !important;}
.toast-wrapper .toast-body::before {content: ""; position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background: no-repeat center center / cover; }
.toast-wrapper.success .toast-body::before {background-image: url('/assets/img/icons/success.png');}
.toast-wrapper.error .toast-body::before {background-image: url('/assets/img/icons/error.png');}
.toast-wrapper.info .toast-body::before {background-image: url('/assets/img/icons/info.png');}
.toast-wrapper.warning .toast-body::before {background-image: url('/assets/img/icons/warning.png');}

.content-tabs-wrapper {position: relative; border-left: 1px solid #DCDCDC; min-height: 100vh;}
.content-tabs-wrapper .content-tabs {margin-left: 15px; border-bottom: 1px solid #DCDCDC; display: flex; gap: 15px;}
.content-tabs-wrapper .content-tabs .content-tab-title {position: relative; padding: 0 15px 15px; line-height: 1; color: #555555; cursor: pointer;}
.content-tabs-wrapper .content-tabs .content-tab-title:hover {color: #000000;}
.content-tabs-wrapper .content-tabs .content-tab-title.active {font-weight: 700; color: #000000;}
.content-tabs-wrapper .content-tabs .content-tab-title.active::after {content: ""; height: 3px; width:100%; background-color: #9B57A8; position: absolute; left: 0; bottom: 0;}
.content-tabs-wrapper .content-tab-body {padding: 25px; display: none;}
.content-tabs-wrapper .content-tab-body.active {display: block;}

#stickyCol.fixed {position: fixed; top: 0; right: -37.25px; z-index: 1000; width: 25%;}

.sidebar-tabs-wrapper {position: relative; border-right: 1px solid #DCDCDC; min-height: 100vh;}
.sidebar-tabs-wrapper .sidebar-tab-head {padding: 15px; font-size: 20px; font-weight: 500;}
.sidebar-tabs-wrapper .sidebar-tabs {display: flex; gap: 15px; flex-direction: column;}
.sidebar-tabs-wrapper .sidebar-tabs .sidebar-tab-title {position: relative; padding: 15px; line-height: 1; color: #555555; cursor: pointer;}
.sidebar-tabs-wrapper .sidebar-tabs .sidebar-tab-title:hover {color: #000000;}
.sidebar-tabs-wrapper .sidebar-tabs .sidebar-tab-title.active {font-weight: 700; color: #000000; background: #EDEDED;}
.sidebar-tabs-wrapper .sidebar-tabs .sidebar-tab-title.active::after {content: ""; width: 3px; height:100%; background-color: #9B57A8; position: absolute; top: 0; right: 0;}
.sidebar-tab-body {padding: 0 5px; display: none;}
.sidebar-tab-body.active {display: block;}

.note-editable[contenteditable="false"] {background-color: #FFFFFF !important; border-radius: 6px;}

#cropModal .modal-body {padding: 0;}
#cropModal .modal-body #cropImage {width: auto; height: 500px; display: block; margin: 0 auto;}

#listTable_filter select {border: 1px solid #aaa; border-radius: 3px; padding: 7px; background-color: transparent; color: inherit; margin-left: 10px; font-size: 14px;}
#listTable_filter input[type='date'], #listTable_filter button {margin-left:10px;}

.stepper-wrapper {
    position: fixed;
    width: 62%;
    top: 15px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 999999;
    background: #FFFFFF;
    padding: 15px 30px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #CDCDCD;
}
.stepper {
  position: relative;
  width: 100%;
}
.step {
  position: relative;
  flex: 1;
  text-align: center;
}
.step-content {
  display: inline-flex;
  align-items: center;
}
.circle {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #e0e0e0;
  font-weight: bold;
  text-align: center;
  position: relative;
}
.step.completed .circle {
  background: #9B57A8;
  color: #FFFFFF;
}
.label {
    font-size: 14px;
    white-space: nowrap;
}
.step.completed .label {
    font-weight: 700;
}
.line {
  flex: 1;
  height: 2px;
  background: #e0e0e0;
  margin: 0 10px;
}
.step.active .circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #3B82F6;
  transform: translate(-50%, -50%);
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 1; }
}

/* Styles for tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  
  body {
    font-size: 16px;
  }
}

/* Styles for mobile devices */
@media only screen and (max-width: 767px) {
  body {font-size: 16px;}
  .main-container.center {align-items: start;}
  .main-container.center .form-container {width: 90%; margin-top: 30px;}
  .main-container.center .form-container .form-wrapper {padding: 20px;}
}