.s-site-logo-img {
  content: url(../brand/mark-violet.svg);
}

.s-Administration-LanguageDialog > .size {
  width: 450px;
}
.s-Administration-LanguageDialog .caption {
  width: 120px;
}
.s-Administration-RoleDialog > .size {
  width: 450px;
}
.s-Administration-RoleDialog .caption {
  width: 120px;
}
.s-Administration-UserDialog > .size {
  width: 650px;
}
.s-Administration-UserDialog .caption {
  width: 150px;
}
.s-Administration-UserDialog .s-PropertyGrid .categories {
  height: 450px;
}
.s-TranslationGrid input.custom-text {
  width: 100%;
  height: 23px;
  padding: 0 3px;
}
.s-UserPermissionDialog > .size,
.s-RolePermissionDialog > .size {
  min-width: 900px;
  width: 900px;
  min-height: 560px;
  height: 560px;
}
.s-UserRoleDialog > .size {
  min-width: 670px;
  width: 670px;
  min-height: 450px;
  height: 450px;
}
/* The two permission dialogs carry a line of help above the grid now. The theme
   already lays the dialog body out as a flex column, so the grid takes what is
   left; the height: 100% it used to be given would have pushed the help line off
   the bottom. .s-UserRoleDialog has no help line and keeps the old rule. */
.s-UserPermissionDialog .s-DataGrid,
.s-RolePermissionDialog .s-DataGrid {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
.s-UserRoleDialog .s-DataGrid {
  height: 100%;
}
.s-UserPermissionDialog .ui-dialog-content,
.s-RolePermissionDialog .ui-dialog-content,
.s-UserRoleDialog .ui-dialog-content {
  padding: 8px;
}
/* The tick boxes were four flat PNGs from an older Serenity. Drawn in CSS now:
   one box, violet when allowed, red when blocked, and half filled when only part
   of a section is. Scoped to this editor, so nothing else moves. */
.s-PermissionCheckEditor .check-box {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--ug-grey-400);
  border-radius: 6px;
  background: var(--ug-white);
  background-image: none;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color .12s ease, background-color .12s ease;
}
.s-PermissionCheckEditor .check-box::before {
  content: "\f00c";
  display: block;
  font-family: var(--s-icon-font);
  font-weight: var(--s-icon-solid);
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  color: transparent;
}
.s-PermissionCheckEditor .check-box:hover {
  border-color: var(--ug-v-400);
}
.s-PermissionCheckEditor .check-box.checked {
  border-color: var(--ug-v-500);
  background-color: var(--ug-v-500);
}
.s-PermissionCheckEditor .check-box.checked::before {
  color: var(--ug-white);
}
.s-PermissionCheckEditor .check-box.checked.revoke {
  border-color: var(--bs-danger);
  background-color: var(--bs-danger);
}
.s-PermissionCheckEditor .check-box.checked.partial {
  border-color: var(--ug-v-400);
  background-color: var(--ug-v-100);
}
.s-PermissionCheckEditor .check-box.checked.partial::before {
  content: "\f068";
  color: var(--ug-v-600);
}
.s-PermissionCheckEditor .check-box.checked.revoke.partial {
  border-color: var(--bs-danger);
  background-color: #fbe3e3;
}
.s-PermissionCheckEditor .check-box.checked.revoke.partial::before {
  color: var(--bs-danger);
}
/* One mark per row, not two. common-theme.css already draws the effective
   permission as a coloured Font Awesome glyph in ::before; the PNG background
   that used to be set here drew a second, older tick right beside it. */
.s-PermissionCheckEditor .effective-permission {
  cursor: default;
}
.s-PermissionCheckEditor .effective-permission::before {
  display: inline-block;
  width: 1.15em;
  font-size: 15px;
}
/* Nothing is drawn where a permission is absent. Forty red "no entry" signs down
   the left of a list reads as a page full of errors rather than a blank form. */
.s-PermissionCheckEditor .effective-permission.deny::before {
  content: "";
}
/* One click sets a whole section: None, View, Edit, Full. The individual
   permissions are still underneath for whoever needs exactly one of them. */
.s-PermissionCheckEditor .perm-levels {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 3px 6px 0 0;
  padding: 2px;
  border: 1px solid var(--ug-line);
  border-radius: 999px;
  background: var(--ug-sunken);
}
.s-PermissionCheckEditor .perm-level {
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ug-grey-500);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.s-PermissionCheckEditor .perm-level:hover {
  background: var(--ug-white);
  color: var(--ug-ink);
}
.s-PermissionCheckEditor .perm-level.active,
.s-PermissionCheckEditor .perm-level.active:hover {
  background: var(--ug-v-500);
  color: var(--ug-white);
}
.s-PermissionCheckEditor .perm-levels.readonly .perm-level {
  cursor: default;
}
.s-PermissionCheckEditor .perm-levels.readonly .perm-level:hover {
  background: transparent;
  color: var(--ug-grey-500);
}
.s-PermissionCheckEditor .perm-levels.readonly .perm-level.active:hover {
  background: var(--ug-v-500);
  color: var(--ug-white);
}
.s-PermissionCheckEditor .slick-header-column {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.s-PermissionCheckEditor .slick-row:hover .slick-cell {
  background-color: var(--ug-v-50);
}
/* The permission count on the Roles grid, which is also the way into that role's
   permissions. Looks like a link because it is one. */
.s-Administration-RoleGrid .role-permissions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ug-v-600);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.s-Administration-RoleGrid .role-permissions:hover {
  text-decoration: underline;
}
.s-Administration-RoleGrid .role-permissions i {
  color: var(--ug-grey-400);
  font-size: 11px;
}
/* The seven area rows the dialog opens on. Tinted and heavier than the sections
   hanging off them, so the tree reads as areas first at a glance. */
.s-PermissionCheckEditor .slick-row.perm-row-area .slick-cell {
  background-color: var(--ug-sunken);
}
.s-PermissionCheckEditor .slick-row.perm-row-area:hover .slick-cell {
  background-color: var(--ug-v-50);
}
.s-PermissionCheckEditor .perm-area {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ug-ink);
}
.s-PermissionCheckEditor .perm-area i {
  display: inline-block;
  width: 17px;
  margin-right: 9px;
  text-align: center;
  color: var(--ug-v-500);
}
.s-PermissionCheckEditor .perm-level-custom {
  padding: 0 9px 0 5px;
  font-size: 11px;
  font-style: italic;
  color: var(--ug-grey-400);
}
/* Whoever opens a permission dialog is usually deciding what a new joiner may
   touch, not administering a system. The line of help, the running count and the
   section rows in bold are all there so the grid can be read at a glance. */
.s-UserPermissionDialog .perm-help,
.s-RolePermissionDialog .perm-help {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
  padding: 9px 12px;
  border: 1px solid var(--ug-line);
  border-left: 3px solid var(--ug-v-500);
  border-radius: var(--bs-border-radius);
  background-color: var(--ug-v-50);
  color: var(--ug-grey-700);
  font-size: 12.5px;
  line-height: 1.55;
}
.s-UserPermissionDialog .perm-help i,
.s-RolePermissionDialog .perm-help i {
  margin-top: 2px;
  color: var(--ug-v-500);
}
.s-PermissionCheckEditor .perm-count {
  margin-left: auto;
  align-self: center;
  padding: 0 10px;
  color: var(--ug-grey-500);
  font-size: 12px;
  white-space: nowrap;
}
.s-PermissionCheckEditor .effective-permission.perm-group {
  font-weight: 600;
}

.s-Form label.caption {
  margin-bottom: 3px;
  text-align: left;
  flex-basis: 100%;
}

.flex-layout .field {
  flex-wrap: wrap;
  align-self: flex-start; /* top-align just this field */
}

.category-links {
  display: none
}

@media (min-width: 768px) {
  .s-Transactions-EnquiryDialog.s-Panel .s-Transactions-EnquiryServiceDetailsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-QuotationDialog.s-Panel .s-Transactions-QuotationServiceDetailsEditor > .grid-container {
    height: 210px;
    background-color: whitesmoke;
  }

  .s-Transactions-ContractDialog.s-Panel .s-Transactions-ContractServiceDetailsEditor > .grid-container {
    height: 210px;
    background-color: whitesmoke;
  }

  .s-Transactions-ContractDialog.s-Panel .s-Transactions-BillingScheduleEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-ContractDialog.s-Panel .s-Transactions-InvoiceEditor > .grid-container {
    height: 300px;
    background-color: whitesmoke;
  }

  .s-Transactions-ContractDialog.s-Panel .s-Transactions-ProformaEditor > .grid-container {
    height: 300px;
    background-color: whitesmoke;
  }

  .s-Transactions-InvoiceDialog.s-Panel .s-Transactions-InvoiceServiceDetailsEditor > .grid-container {
    height: 210px;
    background-color: whitesmoke;
  }

  .s-Transactions-ProformaDialog.s-Panel .s-Transactions-ProformaServiceDetailsEditor > .grid-container {
    height: 210px;
    background-color: whitesmoke;
  }

  .s-Transactions-EnquiryDialog.s-Panel .s-Transactions-EnquiryFollowupsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-QuotationDialog.s-Panel .s-Transactions-QuotationFollowupsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-ContractDialog.s-Panel .s-Transactions-ContractFollowupsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-InvoiceDialog.s-Panel .s-Transactions-InvoiceFollowupsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-InvoiceDialog.s-Panel .s-Transactions-VisitsEditor > .grid-container {
    height: 320px;
    background-color: whitesmoke;
  }

  .s-Transactions-ContractDialog.s-Panel .s-Transactions-VisitsEditor > .grid-container {
    height: 320px;
    background-color: whitesmoke;
  }

  .s-Transactions-EnquiryDialog.s-Panel .s-Transactions-VisitsEditor > .grid-container {
    height: 320px;
    background-color: whitesmoke;
  }

  .s-Transactions-ProformaDialog.s-Panel .s-Transactions-ProformaFollowupsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-PurchaseDialog.s-Panel .s-Transactions-PurchaseServiceDetailsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-CreditNoteDialog.s-Panel .s-Transactions-CreditNoteServiceDetailsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-PurchaseOrderDialog.s-Panel .s-Transactions-PurchaseOrderServiceDetailsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  /* No .s-Panel here: RfqDialog is a plain dialog, so the selector every rule
     above it uses would never match. 260px is about seven lines, which is what
     an RFQ basket runs to; the stock 150px min-height showed three and made a
     six-line request look as though it had been cut off. */
  .s-Transactions-RfqDialog .s-Transactions-RfqItemsEditor > .grid-container {
    height: 260px;
    background-color: whitesmoke;
  }

  .s-Transactions-VisitsDialog.s-Panel .s-Transactions-ConsumptionEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-VisitsDialog.s-Panel .s-Transactions-ServiceSuppliesEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-VisitsDialog.s-Panel .s-Transactions-VisitFollowupEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Transactions-MonthlyPayrollDialog.s-Panel .s-Transactions-MonthlyPayrollEmployeesEditor > .grid-container {
    height: 300px;
    background-color: whitesmoke;
  }

  .s-Transactions-MonthlyPayrollDialog.s-Panel .s-Transactions-MonthlyPayrollSalaryComponentsEditor > .grid-container {
    height: 300px;
    background-color: whitesmoke;
  }

  .s-Transactions-InspectionDialog.s-Panel .s-Transactions-InspectionObservationsEditor > .grid-container {
    height: 300px;
    background-color: whitesmoke;
  }

  .s-Masters-CustomerDialog.s-Panel .s-Masters-SiteAddressesEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Masters-EmployeeDialog.s-Panel .s-Masters-EmployeeSalaryComponentsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }

  .s-Masters-EmployeeDialog.s-Panel .s-Masters-EmployeeAllowedLeavesEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }
  
  .s-Masters-CustomerDialog.s-Panel .s-Masters-OpeningBalanceEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }
  
  .s-Masters-ProductsDialog.s-Panel .s-Masters-OpeningStockEditor > .grid-container {
    height: 350px;
    background-color: whitesmoke;
  }
  
  .s-Transactions-StockTransferDialog.s-Panel .s-Transactions-StockTransferProductsEditor > .grid-container {
    height: 250px;
    background-color: whitesmoke;
  }
}

@media (min-width: 5000px) {
  .s-sidebar {
    top: 48px;
    transform: translateX(0);
  }

  .s-main {
    padding-left: 300px;
  }

  .s-sidebar-toggler {
    visibility: hidden;
    width: 10px !important;
  }
}

.rounded-image {
  border-radius: 70%; /* This makes the image rounded */
  object-fit: cover; /* Ensures the image covers the area without distortion */
}

.s-Transactions-VisitsGrid .unapproved-rescheduledvisit /* .col-unit-price */{
  background-color: lightsalmon;
  color: #fff;
}

.send-whatsapp-button .button-inner {
  background-color: #25D366 !important; /* WhatsApp Green */
  color: white !important;
  border-color: #25D366 !important;
}

.send-whatsapp-button:hover .button-inner {
  background-color: #128C7E !important; /* Darker Green on Hover */
}

/* "Template Library" toolbar button — soft green accent that matches the flat toolbar */
.whatsapp-templates-button .button-inner {
  background-color: #eafaf1 !important;
  color: #0d7a63 !important;
  border-color: #9ee0bf !important;
  font-weight: 600 !important;
}
.whatsapp-templates-button .button-inner i,
.whatsapp-templates-button .button-inner .fa-whatsapp {
  color: #128C7E !important;
}
.whatsapp-templates-button:hover .button-inner {
  background-color: #d8f4e6 !important;
  border-color: #4cca8b !important;
  color: #0a6553 !important;
}