/* ---------------------------------------------------------------
// Client Theme template for Theme Builder
//
// DO NOT add changes here for a client. This is the base template
// that applies to ALL clients.
// Clients custom values are added in client-theme-values.css
// -------------------------------------------------------------*/

:root,
[data-bs-theme="light"] {

  /* Contrast Treshold */
  --contrastThreshold: 50%;

  /* Calculations Based on Lightness */
  --lightnessTransform: 20%;
  --darknessTransform: 10%;
  --subtleTransform: 50%;
  --subtleDarkTransform: 30%;
  --v1-theme-primary-color-light-l: calc(var(--v1-theme-primary-color-l) + var(--lightnessTransform));
  --v1-theme-primary-color-dark-l: calc(var(--v1-theme-primary-color-l) - var(--darknessTransform));
  --v1-theme-primary-color-subtle-l: calc(var(--v1-theme-primary-color-l) + var(--subtleTransform));
  --v1-theme-primary-color-subtle-dark-l: calc(var(--v1-theme-primary-color-l) - var(--subtleDarkTransform));

  /* Theme theme color combined */
  --v1-theme-primary: hsl(var(--v1-theme-primary-color-h), var(--v1-theme-primary-color-s), var(--v1-theme-primary-color-l));
  --v1-theme-primary-dark:hsl(var(--v1-theme-primary-color-h), var(--v1-theme-primary-color-s), var(--v1-theme-primary-color-dark-l));
  --v1-theme-primary-light:hsl(var(--v1-theme-primary-color-h), var(--v1-theme-primary-color-s), var(--v1-theme-primary-color-light-l));
  --v1-theme-primary-subtle:hsl(var(--v1-theme-primary-color-h), var(--v1-theme-primary-color-s), var(--v1-theme-primary-color-subtle-l));
  --v1-theme-primary-subtle-dark:hsl(var(--v1-theme-primary-color-h), var(--v1-theme-primary-color-s), var(--v1-theme-primary-color-subtle-dark-l));

  /* Accent theme color combined */
  --v1-theme-accent: hsl(var(--v1-theme-accent-color-h), var(--v1-theme-accent-color-s), var(--v1-theme-accent-color-l));

  /* Heading theme color combined */
  --v1-theme-heading: hsl(var(--v1-theme-heading-color-h), var(--v1-theme-heading-color-s), var(--v1-theme-heading-color-l));
  --v1-theme-heading-color-light-l: calc(var(--v1-theme-heading-color-l) + var(--lightnessTransform));
  --v1-theme-heading-light:hsl(var(--v1-theme-heading-color-h), var(--v1-theme-heading-color-s), var(--v1-theme-heading-color-light-l));

  /* Page theme color combined */
  --v1-theme-page: hsl(var(--v1-theme-page-color-h), var(--v1-theme-page-color-s), var(--v1-theme-page-color-l));


  /* Apply theme color to vars */
  --v1-primary: var(--v1-theme-primary);
  --v1-primary-text: var(--v1-theme-primary-dark);
  --v1-primary-bg-subtle: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.10);
  --v1-primary-border-subtle: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.25);

  --v1-primary-chart: var(--v1-theme-primary-hex);

  --v1-link-color: var(--v1-theme-primary);
  --v1-link-hover-color: var(--v1-theme-primary-dark);
  --v1-nav-link-icon-color-active: var(--v1-theme-primary);
  --v1-list-group-active-bg: var(--v1-theme-primary);

  --v1-header-icon-color: var(--v1-theme-primary);
  --v1-header-icon-color-hover: var(--v1-theme-primary);
  --v1-header-icon-background-hover: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.15);

  --v1-header-search-icon-color: var(--v1-theme-primary);
  --v1-header-search-icon-color-focus: var(--v1-theme-primary);
  --v1-header-search-icon-color-hover: var(--v1-theme-primary);
  --v1-header-search-btn-bg-hover: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.15);

  /* Apply accent color to vars */
  --v1-page-header-border-bottom: var(--v1-theme-accent-border-width) solid var(--v1-theme-accent);
  --v1-footer-border-top: var(--v1-theme-accent-border-width) solid var(--v1-theme-accent);

  /* Apply Heading color to vars */
  --v1-heading-color: var(--v1-theme-heading);
}

/* Adjust theme color value for darkmode */
[data-bs-theme="dark"] {

  --v1-theme-primary: var(--v1-theme-primary-light); /* general darkmode overwrite of primary theme color */

  --v1-primary: var(--v1-theme-primary);
  --v1-primary-text: var(--v1-theme-primary-light);
  --v1-primary-bg-subtle: var(--v1-theme-primary-subtle-dark);

  --v1-header-icon-color: var(--v1-theme-primary-light);
  --v1-header-icon-color-hover: var(--v1-theme-primary-light);
  --v1-header-icon-background-hover: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.35);

  --v1-nav-link-icon-color-active: var(--v1-theme-primary-light);

  --v1-heading-color: var(--v1-theme-heading-light);

  --v1-theme-page: var(--v1-body-bg); /* reset to default for darkmode */
}

/* ---------------------------------------------------------------
// Primary Utility classes
// -------------------------------------------------------------*/

.text-primary {
  color: var(--v1-theme-primary) !important;
}

.text-primary-emphasis {
  color: var(--v1-theme-primary-dark) !important;
}

[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .text-primary-emphasis {
  color: var(--v1-theme-primary-light) !important;
}

.bg-primary,
.text-bg-primary {
  background-color: var(--v1-theme-primary) !important;
  color: white;
}

/* ---------------------------------------------------------------
// Buttons
// -------------------------------------------------------------*/

.btn-primary {
  --v1-btn-bg: var(--v1-theme-primary);
  --v1-btn-border-color: var(--v1-theme-primary);
  --v1-btn-hover-bg: var(--v1-theme-primary-dark);
  --v1-btn-hover-border-color: var(--v1-theme-primary-dark);
  --v1-btn-active-bg: var(--v1-theme-primary-dark);
  --v1-btn-active-border-color: var(--v1-theme-primary-dark);
  --v1-btn-focus-shadow-rgb: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.5);
  --v1-btn-focus-box-shadow: 0 0 0 0.25rem var(--v1-btn-focus-shadow-rgb);

  /* --switch: calc((var(--v1-theme-primary-color-l) - var(--contrastThreshold)) * -100);
  color: hsl(0, 0%, var(--switch)); */
}

.btn-outline-primary {
  --v1-btn-color: var(--v1-theme-primary);
  --v1-btn-hover-color: var(--v1-theme-primary);
  --v1-btn-border-color: var(--v1-theme-primary);
  --v1-btn-hover-bg: var(--v1-header-icon-background-hover);
  --v1-btn-hover-border-color: var(--v1-theme-primary);
  --v1-btn-active-color: var(--v1-theme-primary);
  --v1-btn-active-bg: var(--v1-header-icon-background-hover);
  --v1-btn-active-border-color: var(--v1-theme-primary-dark);
  --v1-btn-focus-shadow-rgb: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.5);
  --v1-btn-focus-box-shadow: 0 0 0 0.25rem var(--v1-btn-focus-shadow-rgb);
}

.btn-outline-primary.dropdown-toggle::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236F6F85' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}


.btn-link {
  --v1-btn-color: var(--v1-theme-primary);
  --v1-btn-hover-color: var(--v1-theme-primary-dark);
}

[data-bs-theme="dark"] .btn-link {
  --v1-btn-color: var(--v1-theme-primary-light);
}

.btn-service-water {
  --v1-btn-bg: var(--v1-service-water);
  --v1-btn-border-color: var(--v1-service-water);
  --v1-btn-hover-bg: var(--v1-service-water);
  --v1-btn-hover-border-color: var(--v1-service-water);
  --v1-btn-active-bg: var(--v1-service-water);
  --v1-btn-active-border-color: var(--v1-service-water);
}

.btn-service-stormwater {
  --v1-btn-bg: var(--v1-service-stormwater);
  --v1-btn-border-color: var(--v1-service-stormwater);
  --v1-btn-hover-bg: var(--v1-service-stormwater);
  --v1-btn-hover-border-color: var(--v1-service-stormwater);
  --v1-btn-active-bg: var(--v1-service-stormwater);
  --v1-btn-active-border-color: var(--v1-service-stormwater);
}

.btn-service-wastewater {
  --v1-btn-bg: var(--v1-service-wastewater);
  --v1-btn-border-color: var(--v1-service-wastewater);
  --v1-btn-hover-bg: var(--v1-service-wastewater);
  --v1-btn-hover-border-color: var(--v1-service-wastewater);
  --v1-btn-active-bg: var(--v1-service-wastewater);
  --v1-btn-active-border-color: var(--v1-service-wastewater);
}

.btn-service-gas {
  --v1-btn-bg: var(--v1-service-gas);
  --v1-btn-border-color: var(--v1-service-gas);
  --v1-btn-hover-bg: var(--v1-service-gas);
  --v1-btn-hover-border-color: var(--v1-service-gas);
  --v1-btn-active-bg: var(--v1-service-gas);
  --v1-btn-active-border-color: var(--v1-service-gas);
}

.btn-service-electricity {
  --v1-btn-bg: var(--v1-service-electricity);
  --v1-btn-border-color: var(--v1-service-electricity);
  --v1-btn-hover-bg: var(--v1-service-electricity);
  --v1-btn-hover-border-color: var(--v1-service-electricity);
  --v1-btn-active-bg: var(--v1-service-electricity);
  --v1-btn-active-border-color: var(--v1-service-electricity);
}

.btn-service-refuse {
  --v1-btn-bg: var(--v1-service-refuse);
  --v1-btn-border-color: var(--v1-service-refuse);
  --v1-btn-hover-bg: var(--v1-service-refuse);
  --v1-btn-hover-border-color: var(--v1-service-refuse);
  --v1-btn-active-bg: var(--v1-service-refuse);
  --v1-btn-active-border-color: var(--v1-service-refuse);
}


/* ---------------------------------------------------------------
// Dropdown
// -------------------------------------------------------------*/

.dropdown-menu {
  --v1-dropdown-link-active-bg: var(--v1-theme-primary);
}

/* ---------------------------------------------------------------
// Body
// -------------------------------------------------------------*/

/* default to light theme if data-bs-theme is not set */
body {
  background: var(--v1-theme-page);
}

/* ---------------------------------------------------------------
// Alerts Extra
// -------------------------------------------------------------*/

.alert-primary.alert-extra .alert-extra-header {
  background: var(--v1-theme-primary);
}

/* ---------------------------------------------------------------
// Form Controls
// -------------------------------------------------------------*/

.form-control:focus,
.form-input-boxed-checked,
.form-select:focus,
.dataTable-selector:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.5);
  box-shadow: 0 0 0 .25rem hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.25);
}

.form-input-boxed:has(input:checked),
.form-input-boxed-checked {
  background: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.10);
  box-shadow: 0 0 0 .25rem hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.25);
}

.form-check-input:checked {
  background-color: var(--v1-theme-primary);
  border-color: var(--v1-theme-primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 .25rem hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.25);
}

/* ---------------------------------------------------------------
// Tables
// -------------------------------------------------------------*/

.table-primary {
  --v1-table-bg: var(--v1-theme-primary-subtle);
  --v1-table-border-color: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.25);
  --v1-table-hover-bg: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.10)
}

/* ---------------------------------------------------------------
// Pagination
// -------------------------------------------------------------*/

.pagination,
.dataTable-pagination-list {
  --v1-pagination-color: var(--v1-theme-primary);
  --v1-pagination-hover-color: var(--v1-theme-primary);
  --v1-pagination-active-bg: var(--v1-theme-primary);
  --v1-pagination-active-border-color: var(--v1-theme-primary);
}

/* ---------------------------------------------------------------
// Header Search
// -------------------------------------------------------------*/

.header-search-component:focus-within,
.input-submit-group:focus-within input {
  border-color: hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.5);
  box-shadow: 0 0 0 .25rem hsl(var(--v1-theme-primary-color-h),var(--v1-theme-primary-color-s),var(--v1-theme-primary-color-l),.25);
}

/* ---------------------------------------------------------------
// Accent Colors
// -------------------------------------------------------------*/

.card-page .card-page-header-h,
.card-page-form .card-page-form-header-h,
.card-non-auth-secondary h2,
.card-non-auth-secondary a,
.card-enroll-info p,
.card-h-bar,
.card-header[class*="bg-pastel-"] h2 {
  --switch: calc((var(--v1-theme-accent-color-l) - var(--contrastThreshold)) * -100);
  color: hsl(0, 0%, var(--switch));
}

[class*="bg-pastel-"]:not([class*="tile-promo"]) {
  background-color: var(--v1-theme-accent) !important;
  --switch: calc((var(--v1-theme-accent-color-l) - var(--contrastThreshold)) * -100);
  color: hsl(0, 0%, var(--switch)) !important;
}

/* ---------------------------------------------------------------
// Underline Links Option
// -------------------------------------------------------------*/

.header-logo-container,
.footer-logo-container,
.btn,
.card-page,
.card-page-form,
.card-product,
.message-list-item,
.nav-link {
  text-decoration: none;
}