.left {
  float: left;
}
.right {
  float: right;
}
.center {
  text-align: center;
}

.btn_use_template {
  border: none !important;
  background-color: transparent !important;
  color: #1976d2 !important;
  float: left;
  font-weight: bold !important;
}

.btn_use_template:hover {
  background-color: transparent !important;
  color: #1976d2 !important;
  border: none;
}

.btn_send {
  background-color: #1976d2 !important;
  font-size: 14px;
  color: #fff !important;
  font-weight: bold !important;
}

.btn_send:hover {
  background-color: #1976d2 !important;
  color: #fff;
  font-weight: bold;
}

.btn_send:focus {
  border: none !important;
  background-color: #1976d2 !important;
  color: #fff;
  font-weight: bold;
}

.btn_save_draft {
  border: none !important;
  background-color: #dfeffd !important;
  font-size: 14px;
  color: #1976d2 !important;
  font-weight: bold !important;
}

.btn_save_draft:hover {
  background-color: #dfeffd !important;
  color: #1976d2 !important;
  font-weight: bold;
}

.btn_save_draft:focus {
  border: none !important;
  background-color: #dfeffd !important;
  color: #1976d2 !important;
  font-weight: bold;
}

.tblLayoutComponent [role="presentation"] {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Global Adobe Spectrum table fixes — applies to every TableView in the app */
[role="grid"] [role="columnheader"] {
  font-size: 14px !important;
  color: #455a64;
  background-color: #dee4e7;
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.15 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  align-items: center !important;
}

[role="grid"] [role="columnheader"] > *,
[role="grid"] [role="columnheader"] [class*="headCellContents"],
[role="grid"] [role="columnheader"] [class*="headerCellText"],
[role="grid"] [role="columnheader"] [class*="headCellButton"] {
  font-size: 14px !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  display: block !important;
  line-height: 1.2 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Keep the auto-rendered "select all" checkbox vertically centered in the
   header. The rule above forces display:block on columnheader children,
   which collapses the Spectrum Checkbox's internal flex layout. Horizontal
   alignment is left to Spectrum so the header box lines up with row boxes. */
[role="grid"] [role="columnheader"][class*="checkboxCell"] {
  display: flex !important;
  align-items: center !important;
}
[role="grid"] [role="columnheader"][class*="checkboxCell"] > *,
[role="grid"] [role="columnheader"][class*="checkboxCell"] [class*="spectrum-Checkbox"] {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
}

[role="grid"] [role="row"]:has([role="columnheader"]),
[role="grid"] [role="rowgroup"]:first-of-type > [role="row"],
[role="grid"] > div > [role="row"]:first-child {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}

[role="grid"] [role="rowgroup"]:has([role="columnheader"]),
[role="grid"] [class*="headWrapper"],
[role="grid"] [class*="Table-head"]:not([class*="headCell"]):not([class*="header"]) {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  overflow: visible !important;
}

[role="grid"] [role="rowheader"],
[role="grid"] [role="gridcell"],
[role="grid"] [role="cell"] {
  font-size: 14px !important;
}

[role="grid"] [role="rowheader"] *,
[role="grid"] [role="gridcell"] *,
[role="grid"] [role="cell"] * {
  font-size: 14px !important;
}

/* Hover tooltips are now handled by Adobe Spectrum's TooltipTrigger component
   (see InvoiceListTable.tsx for the pattern). The previous CSS hover-expand
   bubble was removed in favor of a proper Spectrum-styled tooltip. */

/*Create media query for tblLayoutComponent width for ipad and tablets*/

/* Table Layout Component Media Queries */
.tblLayoutComponent {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Media Query for iPad Air - Portrait */
@media (min-width: 820px) and (max-width: 820px) and (orientation: portrait) {
  /* .tblLayoutComponent {
    width: 93vw !important;
    overflow-x: auto;
  } */

  /* .heading_text_parent {
    width: 92vw !important;
  } */
}

/* Media Query for iPad Air - Landscape */
@media (min-width: 1180px) and (max-width: 1180px) and (orientation: landscape) {
  /* .tblLayoutComponent {
    width: 90vw !important;
    overflow-x: auto;
    margin: auto;
  } */

  /* .heading_text_parent {
    width: 70vw !important;
  } */
}

/* Media Query for MacBook Air 13 Inch */
@media (min-width: 1280px) and (max-width: 1440px) {
  /* .tblLayoutComponent {
    width: 85vw !important;
    overflow-x: auto;
    margin: auto;
  } */

  /* .heading_text_parent {
    width: 70vw !important;
  } */
}

/* Media Query for iPad mini */

@media (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
  /* .tblLayoutComponent {
    width: 730px !important;
    overflow-x: auto;
  } */

  /* .heading_text_parent {
    width: 92vw !important;
  } */
}

.tblContainer {
  max-width: 100%;
  overflow-x: auto;
}

@media only screen and (max-width: 480px) {
  .tblContainer {
    max-width: calc(100vw - 20px);
  }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .tblContainer {
    max-width: calc(100vw - 30px);
  }
}

/* @media only screen and (min-width: 769px) and (max-width: 1024px) {
  .tblContainer {
    max-width: calc(100vw - 50px) !important;
  }
} */

.tblContactLayoutComponent
  [role="row"]:first-child
  [role="presentation"]:first-child
  [role="columnheader"] {
  border-top-left-radius: 8px;
}
.tblContactLayoutComponent
  [role="row"]:first-child
  [role="presentation"]:last-child
  [role="columnheader"] {
  border-top-right-radius: 8px;
}

.tblContactLayoutComponent [role="presentation"] {
  height: 50px;
  border: #455a64;
}

.tblContactLayoutComponent [role="columnheader"] {
  font-size: 14px;
  color: #455a64;
  background-color: #dee4e7;
}

.tblContactLayoutComponent [role="row"]:nth-child(even) {
  background-color: #e6edf1 !important;
  border: #455a64;
}

/* Ensure the text inside even rows is white */
.tblContactLayoutComponent [role="row"]:nth-child(even) [role="presentation"] {
  background-color: #e6edf1;
}

.tblContactLayoutComponent [role="row"] [role="presentation"]:first-child {
  border-right: 1px solid #ccc;
}

#contactDGroups div[role="gridcell"]:has(span[role="button"]) label {
  display: none;
}

.hide-resize-observer {
  display: none !important;
}

/* ComboBox Heigth issue fix for iPhone */
.P1vhCW_tray-dialog,
.cTLQuW_tray-dialog {
  height: fit-content !important;
}

/* React Spectrum Datepicker BG issue fix for Safari*/
.date_bg_fix > div:first-child {
  background-color: transparent;
}

#listActivityStatus [role="option"] {
  height: 30px;
}

#listProjectStatus [role="option"] {
  height: 30px;
}

#listPaymentStatus [role="option"] {
  height: 30px;
}

#listInvoiceStatus [role="option"] {
  height: 30px;
}

/*SERVICE ACTIVITY COMPONENT*/
#listActivityCards [aria-selected="true"] {
  width: 98%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px !important;
}

#listActivityCards [aria-selected="true"] div {
  border: none !important;
}

#listActivityCards [aria-selected="false"]:hover {
  width: 98%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#listActivityCards [aria-selected="false"]:hover div {
  border: none !important;
}

#listActivityCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#listActivityCards [role="img"] {
  display: none;
}

#listActivityCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
  margin-left: 5px;
  margin-right: 8px;
}

#listActivityCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#listActivityCardsMobile [aria-selected="false"]:hover {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#listActivityCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#listActivityCardsMobile [role="option"] {
  height: 95% !important;
}

#listActivityCardsMobile [role="img"] {
  display: none;
}

/*PROJECT ACTIVITY COMPONENT*/
#listProjectCards [aria-selected="true"] {
  width: 98%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
}

#listProjectCards [aria-selected="true"] div {
  border: none !important;
}

#listProjectCards [aria-selected="false"]:hover {
  width: 98%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#listProjectCards [aria-selected="false"]:hover div {
  border: none !important;
}

#listProjectCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#listProjectCards [role="img"] {
  display: none;
}

#listProjectCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
}

#listProjectCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#listProjectCardsMobile [aria-selected="false"]:hover {
  width: 98%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#listProjectCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#listProjectCardsMobile [role="option"] {
  height: 95% !important;
}

#listProjectCardsMobile [role="img"] {
  display: none;
}

/*MESSAGE LIST COMPONENT*/
#listMessageCards [aria-selected="true"] {
  border-radius: 8px;
  background-color: #eff7fe !important;
  height: 95% !important;
  width: 98% !important;
}

#listMessageCards [aria-selected="true"] div {
  border: none !important;
}

#listMessageCards [aria-selected="false"]:hover {
  border-radius: 8px;
  background-color: #eff7fe;
  height: 95% !important;
}

#listMessageCards [aria-selected="false"]:hover div {
  border: none !important;
}

#listMessageCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#listMessageCards [role="img"] {
  display: none;
}

#listMessageCardsMobile [aria-selected="true"] {
  border-radius: 8px;
  background-color: #eff7fe !important;
  height: 95% !important;
  width: 99% !important;
  top: 0 !important;
  margin-top: 0 !important;
}

#listMessageCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#listMessageCardsMobile [aria-selected="false"]:hover {
  border-radius: 8px;
  background-color: #eff7fe;
  height: 95% !important;
}

#listMessageCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#listMessageCardsMobile [role="option"] {
  height: 95% !important;
  width: 99%;
}

#listMessageCardsMobile [role="img"] {
  display: none;
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
  width: 5px;
  overflow: auto;
  opacity: 0.1;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  opacity: 0.1;
}

::-webkit-scrollbar-thumb {
  background: #f5f6f9;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f5f6f9;
}

@media only screen and (max-width: 480px) {
  #listActivityStatus [role="img"] {
    margin-top: -10px;
  }
}

/*Contact COMPONENT*/
#contactCards [aria-selected="true"] {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ff9800 !important;
  box-sizing: border-box;
  height: 115px !important;
}

#contactCards [aria-selected="true"] div {
  border: none !important;
}

#contactCards [aria-selected="false"]:hover {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ff9800 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#contactCards [aria-selected="false"]:hover div {
  border: none !important;
}

#contactCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#contactCards [role="img"] {
  display: none;
}

#contactCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ff9800 !important;
  box-sizing: border-box;
  height: 130px;
}

#contactCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#contactCardsMobile [aria-selected="false"]:hover {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #ff9800 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#contactCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#contactCardsMobile [role="option"] {
  height: 95% !important;
}

#contactCardsMobile [role="img"] {
  display: none;
}

/*REACT SELECT SPERATOR REMOVE*/

.css-1u9des2-indicatorSeparator {
  background-color: transparent !important;
}

#txtSubject {
  height: 25px;
}

/*Product COMPONENT*/
#productCards [aria-selected="true"] {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 115px !important;
}

#productCards [aria-selected="true"] div {
  border: none !important;
}

#productCards [aria-selected="false"]:hover {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#productCards [aria-selected="false"]:hover div {
  border: none !important;
}

#productCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#productCards [role="img"] {
  display: none;
}

#productCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
}

#productCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#productCardsMobile [aria-selected="false"]:hover {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#productCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#productCardsMobile [role="option"] {
  height: 95% !important;
}

#productCardsMobile [role="img"] {
  display: none;
}
.k-window-content,
.k-prompt-container {
  padding-inline: 5px !important;
}
/*CUSTOM MODAL CSS*/
/*Event Cards*/
#eventCards [aria-selected="true"] {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 115px !important;
}

#eventCards [aria-selected="true"] div {
  border: none !important;
}

#eventCards [aria-selected="false"]:hover {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#eventCards [aria-selected="false"]:hover div {
  border: none !important;
}

#eventCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#eventCards [role="img"] {
  display: none;
}

#eventCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
}

#eventCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#eventCardsMobile [aria-selected="false"]:hover {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#eventCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#eventCardsMobile [role="option"] {
  height: 95% !important;
}

#eventCardsMobile [role="img"] {
  display: none;
}

.no-bottom-border-input [class*="spectrum-Textfield-input"] {
  border-bottom: 0 !important;
  position: static !important;
  height: auto !important;
}
.nWhlFW_spectrum-InputGroup--quiet .nWhlFW_spectrum-FieldButton:before {
  border-bottom: 0 !important;
  box-shadow: none !important;
  height: 0 !important;
}

/*Invoice Cards*/
#invoiceCards [aria-selected="true"] {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 115px !important;
}

#invoiceCards [aria-selected="true"] div {
  border: none !important;
}

#invoiceCards [aria-selected="false"]:hover {
  width: 99%;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#invoiceCards [aria-selected="false"]:hover div {
  border: none !important;
}

#invoiceCards [role="option"] {
  height: 95% !important;
  width: 98%;
}

#invoiceCards [role="img"] {
  display: none;
}

#invoiceCardsMobile [aria-selected="true"] {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 130px;
}

#invoiceCardsMobile [aria-selected="true"] div {
  border: none !important;
}

#invoiceCardsMobile [aria-selected="false"]:hover {
  width: auto;
  box-shadow: 0px 8px 8px -2px rgba(38, 50, 56, 0.25);
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #1976d2 !important;
  box-sizing: border-box;
  height: 95% !important;
}

#invoiceCardsMobile [aria-selected="false"]:hover div {
  border: none !important;
}

#invoiceCardsMobile [role="option"] {
  height: 95% !important;
}

#invoiceCardsMobile [role="img"] {
  display: none;
}

#item-create-update-dialog input[type="text"],
#item-create-update-dialog input[type="number"],
#item-create-update-dialog input[type="email"],
#item-create-update-dialog input[type="password"],
#item-create-update-dialog input[type="date"],
#item-create-update-dialog input[type="checkbox"],
#item-create-update-dialog input[type="radio"],
#item-create-update-dialog input[type="file"],
#item-create-update-dialog input[type="color"],
#item-create-update-dialog input[type="button"],
#item-create-update-dialog textarea,
#item-create-update-dialog select {
  border: 1px solid #d3d3d3 !important;
  border-color: #d3d3d3 !important;
  background-color: #fff !important;
}

#numeric-text-field input[type="text"] {
  border: none !important;
}

.btn:hover {
  background-color: #1877d2 !important;
  color: white !important;
  font-style: bold;
}

.btn:disabled {
  background-color: #d3d3d3 !important;
  color: white !important;
  font-style: bold;
}

.btn:disabled:hover {
  background-color: #d3d3d3 !important;
  color: white !important;
  font-style: bold;
}

.btn:disabled:focus {
  border: none !important;
  background-color: #d3d3d3 !important;
  color: white !important;
  font-style: bold;
}

.btn:disabled:active {
  background-color: #d3d3d3 !important;
  color: white !important;
  font-style: bold;
}

/* Picker border override - #ccc border on all Picker components */
/* UNSAFE_className lands on the outer Field <span>. The button's border-color
   is driven by CSS custom props, so override them at the wrapper scope. */
.picker {
  --spectrum-actionbutton-border-color: #ccc;
  --spectrum-actionbutton-border-color-hover: #b0b0b0;
  --spectrum-actionbutton-border-color-down: #b0b0b0;
  --spectrum-actionbutton-border-color-key-focus: #b0b0b0;
  --spectrum-alias-border-color: #ccc;
}

.picker button {
  border-color: #ccc !important;
  box-shadow: none !important;
}

/* DatePicker border override - #ccc border.
   The actual border is on the inner spectrum-Textfield element, styled via
   CSS custom properties. Override them at wrapper scope so they cascade down. */
.datePicker {
  --spectrum-textfield-border-color: #ccc;
  --spectrum-textfield-border-color-hover: #b0b0b0;
  --spectrum-textfield-border-color-key-focus: #b0b0b0;
  --spectrum-textfield-border-color-down: #b0b0b0;
  --spectrum-alias-border-color: #ccc;
  --spectrum-alias-font-family: "Adobe Clean", sans-serif;
  --spectrum-alias-font-size: 14px;
  --spectrum-alias-font-weight: 500;
}

.datePicker .spectrum-InputGroup {
  height: 32px !important;
  min-height: 32px !important;
}

.datePicker .spectrum-InputGroup .spectrum-Textfield-input {
  height: 32px !important;
  min-height: 32px !important;
  font-size: 14px;
}

.datePicker .spectrum-InputGroup .spectrum-FieldButton {
  height: 30px !important;
  min-height: 30px !important;
}

.comboBox {
  --spectrum-textfield-border-color: #ccc;
  --spectrum-textfield-border-color-hover: #b0b0b0;
  --spectrum-textfield-border-color-key-focus: #b0b0b0;
  --spectrum-textfield-border-color-down: #b0b0b0;
  --spectrum-alias-border-color: #ccc;
}

.borderGrey {
  --spectrum-textfield-border-color: #ccc;
  --spectrum-textfield-border-color-hover: #b0b0b0;
  --spectrum-textfield-border-color-key-focus: #b0b0b0;
  --spectrum-textfield-border-color-down: #b0b0b0;
  --spectrum-alias-border-color: #ccc;
  --spectrum-alias-font-family: "Adobe Clean", sans-serif;
}
/*iPad */
@media (min-width: 768px) and (max-width: 768px) and (orientation: portrait) {
  #expectedCloseDate {
    width: 90% !important;
  }
}

/*iPad Air*/
@media (min-width: 820px) and (max-width: 820px) and (orientation: portrait) {
  #expectedCloseDate {
    width: 90% !important;
  }
}

/* Borderless Spectrum TextField — strips inner-input chrome so the field
   reads as flat text on a transparent background. Used by the email
   compose subject row and the document title row; the wrapping row
   carries its own bottom hairline. The inline UNSAFE_style only hides the
   outer wrapper's border — the actual <input> inside still inherits
   Spectrum's default border, which this rule clears. */
.borderless_textfield,
.borderless_textfield input,
.borderless_textfield textarea,
.borderless_textfield [class*="spectrum-Textfield"] {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
.borderless_textfield input:focus,
.borderless_textfield input:focus-within,
.borderless_textfield input:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Spectrum overlay portals (Picker dropdowns, ComboBox menus, Tooltips,
   DatePicker calendars, etc.) render at low z-index by default. Kendo Window
   (the floating-window shell used by the document editor and message compose)
   sits at z-index: 1000, so overlays render behind the window. Bump anything
   that looks like a Spectrum/react-aria popover/tray above 1000.

   IMPORTANT: do NOT include Underlay / Modal / ModalOverlay here. Dialogs
   render their underlay (backdrop) and modal content as siblings inside the
   same OverlayContainer; promoting both to the same z-index reverses their
   paint order, dropping the backdrop on top of the dialog content and
   dimming the whole modal. Keep this list to popover/tray/tooltip-style
   overlays only — Spectrum's Modal already manages its own stacking. */
[class*="spectrum-Popover"],
[class*="spectrum-Tray"],
[class*="react-aria-Popover"],
[class*="react-spectrum-OverlayContainer"] {
  z-index: 100000 !important;
}

[role="presentation"]:has(> [role="listbox"]),
[role="presentation"]:has(> [class*="spectrum-Popover"]),
[role="presentation"]:has(> [class*="spectrum-Tray"]),
[role="presentation"]:has(> [class*="react-aria-Popover"]),
div[style*="position: fixed"]:has(> [role="listbox"]),
div[style*="position: fixed"]:has(> [class*="spectrum-Popover"]),
div[style*="position: absolute"]:has(> [class*="spectrum-Popover"]) {
  z-index: 100000 !important;
}

body > div:has(> [class*="spectrum-Popover"]),
body > div:has(> [class*="spectrum-Tray"]),
body > div:has(> [role="presentation"] > [role="listbox"]) {
  z-index: 100000 !important;
}