:root {
  /* Blues */
  --simpro-blue: #1976d2;
  --simpro-light-blue: #229bff;
  --simpro-mobile-light-blue: #3bb5e2;
  --simpro-lighter-blue: #91bce7;
  --simpro-dark-blue: #0e527f;
  --simpro-payments-blue: #002f87;
  --simpro-payments-dark-blue: rgb(10 21 37);
  --simpro-payments-yellow: #ffdd00;
  /* Greens */
  --simpro-green: #2a7235;
  --simpro-light-green: #c9fac1;
  /* Oranges/Yellows/Reds */
  --simpro-light-orange: #faaf3c;
  --simpro-yellow: #feed78;
  --simpro-orange: #ff7740;
  --simpro-red: #de104f;
  --simpro-light-red: #ff7070;
  /* Text Colors */
  --simpro-body-text: #222222;
  --simpro-header-text: var(--simpro-grey-900);
  --simpro-text-primary: #212529; /* Primary text color for body copy and main content */
  --simpro-text-secondary: #6c757d; /* Secondary text color for less prominent information or subtext */
  --simpro-text-disabled: #adb5bd; /* Text color for disabled interactive elements or content */
  --simpro-text-brand: #007bff; /* Text color for brand emphasis */
  --simpro-text-success: #28a745; /* Text color for success messages or indicators */
  --simpro-text-warning: #ffc107; /* Text color for warning messages or indicators */
  --simpro-text-info: #17a2b8; /* Text color for informational messages or indicators */
  --simpro-text-critical: #dc3545; /* Text color for critical errors or destructive action indicators */
  /* Whites/Blacks */
  --simpro-white: #ffffff;
  --simpro-black: #000000;
  /* Canonical Greys (grey-0 to grey-900) */
  --simpro-grey-0: #f7f7f7;
  --simpro-grey-100: #e2e2e2;
  --simpro-grey-200: #eeeeee;
  --simpro-grey-300: #dddddd;
  --simpro-grey-400: #cccccc;
  --simpro-grey-500: #aaaaaa;
  --simpro-grey-600: #888888;
  --simpro-grey-700: #555555;
  --simpro-grey-800: #333333;
  --simpro-grey-900: #222222;
  --simpro-top-bar-color: #f0f1f2;
  /* Alert Colors with all variations */
  --simpro-alert-primary: var(--simpro-dark-blue);
  --simpro-alert-primary-bg: var(--simpro-lighter-blue);
  --simpro-alert-secondary: #383d41;
  --simpro-alert-secondary-bg: #4f5459;
  --simpro-alert-success: #41b555;
  --simpro-alert-success-bg: #91c891;
  --simpro-alert-danger: #721c24;
  --simpro-alert-danger-bg: #f5c6cb;
  --simpro-alert-warning: #f2c94c;
  --simpro-alert-warning-bg: #fff3cd;
  --simpro-alert-info: #0c5460;
  --simpro-alert-info-bg: #d1ecf1;
  --simpro-alert-light: #818182;
  --simpro-alert-light-bg: #b2b2b2;
  --simpro-alert-dark: #1b1e21;
  --simpro-alert-dark-bg: #1f2124;
  /* UI Component Colors */
  --simpro-focus: #ddeffc;
  --simpro-hover-blue: #bfdaff;
  --simpro-tab-content-border: #cccccc;
  --simpro-border: #f3f3f3;
  --simpro-border-grey: #dddddd;
  --simpro-purple: #6f42c1;
  /* Background Colors */
  --simpro-background-primary: #f8f9fa; /* Primary application background color */
  --simpro-background-inverse: #343a40; /* Background color for inverse-themed sections or components */
  --simpro-background-surface-hover: #f1f3f5; /* Background color for interactive surfaces on hover */
  --simpro-background-surface-selected: #e0e7ff; /* Background color for selected items or surfaces (brand-tinted) */
  --simpro-background-surface-selected-hover: #d1dfff; /* Background color for hovered selected items or surfaces */
  --simpro-background-surface-secondary: #fafafa; /* Secondary surface color for subtle differentiation or sections */
  --simpro-background-brand: #007bff; /* Background color for primary brand actions or highlights */
  --simpro-background-brand-hover: #0056b3; /* Hover state for brand background color */
  --simpro-background-success-bold: #28a745; /* Stronger background color for emphasized success states */
  --simpro-background-info-bold: #17a2b8; /* Stronger background color for emphasized info states */
  --simpro-background-critical-bold: #dc3545; /* Stronger background color for emphasized critical/error states */
  /* Borders*/
  --simpro-border-primary: #ced4da;
  --simpro-border-brand: #007bff; /* Border color for brand emphasis or brand-related components */
  --simpro-border-success: #28a745; /* Border color for success state indicators */
  --simpro-border-warning: #ffb300; /* Border color for warning state indicators */
  --simpro-border-info: #17a2b8; /* Border color for informational state indicators */
  --simpro-border-critical: #dc3545; /* Border color for critical error state indicators */
  /* Z-Index Stack */
  --simpro-z-index-sticky-header: 500;
  --simpro-z-index-suggest-select-results: 600;
  --simpro-z-index-top-bar: 997;
  --simpro-z-index-left-menu: 998;
  --simpro-z-index-tooltip: 998;
  --simpro-z-index-dialog-box: 999;
  --simpro-z-index-file-upload-container: 1000;
  --simpro-z-index-over-dialog-box: 1000;
  --simpro-z-index-ui-date-picker: 1000;
  --simpro-z-index-dialog-box-tooltip: 1001;
  --simpro-z-index-loading-items: 1100;
  --simpro-z-index-loading-image: 99999;
}

/* Asset Paths */
body,
#page {
  background-color: var(--simpro-white);
}

body,
body.iframe-body {
  min-width: 0;
}

body #main,
body.iframe-body #main {
  margin: 0;
}

button {
  height: 2em;
}

@media only screen and (max-width: 480px) {
  #paymentFields .mobile {
    width: 100%;
    margin: 0;
  }
  .header img {
    width: 30%;
  }
}
#paymentForm {
  padding-bottom: 30px;
  margin: 0 auto;
  max-width: 1000px;
}

#paymentFields {
  background-color: var(--simpro-white);
  padding: 0 10px;
  font-size: 14px;
}

#paymentFields .fieldHeader,
#paymentFields .warning {
  font-size: 12px;
}

#paymentFields .paymentSuccess {
  font-size: 12px;
}

#paymentFields .expiry input[type=text] {
  width: 50px;
}

#paymentFields .slash {
  font-size: 12px;
}

#paymentFields .cvv {
  width: 52px;
}

.header {
  position: relative;
}

.header .headerTitle {
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 12px;
  font-weight: 500;
}

input[type=text],
.selectBoxFontSize button {
  font-size: 12px;
  height: auto;
}

img.inputCCIcon {
  height: 29px;
}

.totalRow {
  color: var(--simpro-white);
  font-size: 14px;
  font-weight: 300;
  padding: 2px 10px;
}

.totalRow .totalHeading {
  line-height: 2.2em;
}

.totalRow .totalTitle {
  font-weight: bold;
  font-size: 12px;
  margin-top: 0.2em;
}

.totalRow .totalAmount {
  line-height: 0.9em;
  font-size: 0.8rem; /* potential breaking change - added missing unit for valid CSS */
  font-weight: bold;
}

.totalRow .totalBoxColor {
  color: var(--simpro-blue) !important;
}

.totalRow .totalBoxPadding {
  padding: 20px;
}

.invoiceTitle {
  margin-top: 35px;
  line-height: 0.5em;
  font-weight: bold;
}

.invoiceNo {
  line-height: 1.5em;
}

#submit {
  color: var(--simpro-white);
}

#registerPreview {
  height: 400px;
}

#registerPreview .registerOverlay {
  height: 370px;
  width: 100%;
  position: fixed;
  z-index: 1;
}

#registerPreview #paymentForm {
  transform: scale(0.65, 0.65);
  transform-origin: center top;
  width: auto;
}

input[type=text],
input[type=number],
input[type=password],
input[type=search],
input[type=email],
input[type=url],
textarea {
  padding: 4px 5px;
  margin: 0px;
  width: 100%;
  border: 1px solid var(--simpro-grey-400);
  font-family: "Inter", sans-serif !important;
  font-weight: 400;
  font-size: 12px;
  height: 26px;
}

@media (max-width: 667px) {
  .squareFormFullWidth {
    width: 100% !important;
  }
  .ccDetails {
    width: 100% !important;
    float: none;
  }
}
#autoPayContainer {
  max-width: 1000px;
  margin: auto;
  padding-bottom: 30px;
}

#autoPayContainer #autoPayHeaderContainer {
  height: 80px;
  position: fixed;
  background-color: var(--simpro-grey-100);
  left: 0px;
}

#autoPayContainer #autoPayHeaderContainer #autoPayHeader {
  margin: auto;
  height: 80px;
  max-width: 775px;
}

#autoPayContainer #autoPayHeaderContainer #autoPayHeader #infoDiv {
  background-color: var(--simpro-grey-600);
  border-radius: 5px;
  color: var(--simpro-white);
  margin: 5px 0;
}

#autoPayContainer #autoPayHeaderContainer #autoPayHeader #infoDiv #totalsRow {
  padding: 10px;
}

#autoPayContainer #autoPayHeaderContainer #autoPayHeader #infoDiv #totalsRow #totalBox {
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#autoPayContainer #autoPayHeaderContainer #autoPayHeader #infoDiv #totalsRow #totalBox #autoPayTotal {
  white-space: nowrap;
}

#autoPayContainer #autoPayHeaderContainer #autoPayHeader #infoDiv #totalsRow .headingFont {
  font-size: 12px;
}

#autoPayContainer #autoPayHeaderContainer #autoPayHeader #infoDiv #totalsRow .valueFont {
  font-size: 14px;
}

#autoPayContainer #autoPayHeaderContainer #autoPayHeader #infoDiv .borderLeft {
  padding-left: 15px;
  border-left: 1px solid var(--simpro-white);
}

#autoPayContainer #autoPayHeaderContainer #autoPayHeader #buttonsDiv {
  font-size: 12px;
  text-align: right !important;
  margin: 16px 0 0 0;
  float: right;
}

#autoPayContainer #autoPayHeaderContainer #autoPayHeader #buttonsDiv #autoPaySetupBtn,
#autoPayContainer #autoPayHeaderContainer #autoPayHeader #buttonsDiv #payNowBtn {
  height: 3em;
}

#autoPayContainer canvas {
  border: 1px solid var(--simpro-grey-400);
}

#autoPayCanvasRow {
  text-align: center;
}

#autoPayCanvasRow #pdfRow {
  margin-top: 82px;
}