/* ==========================================================================
   1. Theme Tokens
   ========================================================================== */
/*
  File map:
  1) Theme tokens
  2) Base and typography
  3) Navigation and shell
  4) Page layout and content modules
  5) Accordions, tables, and forms
  6) Tabs, breadcrumbs, and graph UI
  7) Tooltips and global overrides
  8) Icons and shared utility tweaks
  9) Responsive rules
  10) Dashboard and footer variants
*/

/* Theme variables (light + dark mode) */

:root {
  --primary-gradient: linear-gradient(175deg, #c60086 0%, #0ba2e3 100%);
  --secondary-gradient: linear-gradient(
    to bottom,
    rgb(245 245 245 / 0) 69%,
    #f5f5f5 100%
  );
  --main-page-secondary-gradient: linear-gradient(
    to bottom,
    rgb(245 245 245 / 0) 58%,
    #f5f5f5 100%
  );
  --primary-main: #870d87;
  --primary-color: #c60086;
  --primary-light: #f3e7f3;
  --secondary-color: #0c669e;
  --dark-grey-headings: #1f1f1f;
  --text-color: #2e2e2e;
  --body-background: #f5f5f5;
  --border-color: #d0d0d0;
  --button-primary: var(--secondary-color);
  --button-primary-hover: #009ee2;
  --button-disabled: #727272;
  --panel-heading-bg: var(--primary-main);
  --panel-heading-text: white;
  --badge-bg: var(--primary-color);
  --table-header-text: #1f1f1f;
  --table-header-bg: #ffffff;
  --input-bg: white;
  --input-text: #2e2e2e;
  --checkbox-border: #d0d0d0;
  --checkbox-checked-bg: #f3e7f3;
  --white-color: #ffffff;
  --nav-bg-color: #ffffff;
  --tile-bg-color: #ffffff;
  --tile-bg-color-disabled: #d0d0d0;
  --text-disabled: #727272;
  --danger-color: #af0000;
  --danger-button-bg: #d43f3a;
  --surface-info: #e7f6fd;
  --overlay-white-20: rgb(255 255 255 / 0.2);
  --tab-hover-bg-dark: #310031;
  --breadcrumb-dark-text: #a0a0a0;
  --breadcrumb-dark-bg: #424242;
  --tooltip-shadow: drop-shadow(0 4px 12px #0000001f);
  --menu-shadow: 0 0 15px 0 #00000033;
  --dashboard-number-value: var(--primary-color);
  --consumption-gradient: linear-gradient(
    154.19deg,
    #870d87 1.38%,
    #c60086 98.48%
  );
  --contact-gradient: linear-gradient(157.39deg, #005980 1.14%, #007db3 97.89%);
  --link-accent-dark: #7dd8ff;
  --footer-border-color: rgb(160 160 160 / 0.2);
  --loading-overlay-gradient: linear-gradient(
    to top,
    rgb(39 39 39 / 0.9) 80%,
    rgb(0 0 0 / 0) 100%
  );
  --mobile-drop-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
  --table-scroll-shadow: inset -40px 0 30px -5px rgb(245 245 245 / 0.97);
  --table-scroll-shadow-as-bg: linear-gradient(
    to left,
    rgba(255 255 255 / 1),
    rgba(255 255 255 / 0)
  );
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--primary-main);
  --focus-ring-color-on-primary: var(--text-color);
  --text-success-dark: #6ee7a0;
  --text-danger-dark: #fca5a5;
  --text-warning-dark: #fcd34d;
  --toast-warning-dark: #b57bee;
  --qmr-overlay-bg: rgb(255 255 255 / 0.75);
  --toast-success-bg: #dbeafe;
  --toast-error-bg: #ffeaea;
  --toast-warning-bg: var(--primary-light);
}

.dark-mode {
  --primary-gradient: linear-gradient(175deg, #c60086 0%, #008ee2 100%);
  --secondary-gradient: linear-gradient(
    to bottom,
    rgb(32 32 32 / 0) 69%,
    #1e1e1e 100%
  );
  --main-page-secondary-gradient: linear-gradient(
    to bottom,
    rgb(32 32 32 / 0) 58%,
    #1e1e1e 100%
  );
  --secondary-color: #0c669e;
  --dark-grey-headings: #ffffff;
  --text-color: #f3f3f3;
  --body-background: #1b1b1b;
  --border-color: #585858;
  --button-primary: var(--secondary-color);
  --button-primary-hover: #009ee2;
  --button-disabled: #555555;
  --panel-heading-bg: var(--primary-main);
  --panel-heading-text: #ffffff;
  --table-header-text: #ffffff;
  --table-header-bg: #1e1e1e;
  --input-bg: #2a2a2a;
  --input-text: #e0e0e0;
  --checkbox-border: #555555;
  --checkbox-checked-bg: #870d87;
  --white-color: white;
  --nav-bg-color: #000000;
  --tile-bg-color: #272727;
  --tile-bg-color-disabled: #555555;
  --text-disabled: #c5c5c5;
  --surface-info: #004d71;
  --menu-shadow: 0 0 15px 0 #27252533;
  --dashboard-number-value: #ffa4e2;
  --mobile-drop-shadow: 0 8px 20px rgb(255 255 255 / 0.05);
  --table-scroll-shadow: inset -40px 0 30px -5px rgb(27 27 27 / 0.97);
  --table-scroll-shadow-as-bg: linear-gradient(
    to left,
    rgba(0 0 0 / 0.5),
    rgba(0 0 0 / 0)
  );
  --qmr-overlay-bg: rgb(0 0 0 / 0.55);
  --toast-success-bg: #172554;
  --toast-error-bg: #3b0a0a;
  --toast-warning-bg: #310031;
  --danger-color: var(--text-danger-dark);
}

body.dark-mode .navbar,
body.dark-mode [bpc-include="partials.template.header.sidebar"] {
  background: var(--nav-bg-color);
}

[bpc-include="partials.template.header.sidebar"] {
  position: relative;
  z-index: 2001;
}

.dark-mode .panel,
.panel-contract .panel-body,
table,
.tab-pane.active .panel-body,
thead tr {
  background: var(--tile-bg-color);
}

.dark-mode select,
.ui-select-container.ui-select-multiple {
  background-color: transparent;
}

/* ==========================================================================
   2. Base and Shared Primitives
   ========================================================================== */

/* 
         Reset Styles
         ========================================================================== 
         Purpose: Normalize default browser styles to ensure consistency across different browsers. */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  padding: 0;
  margin: 0;
  vertical-align: baseline;
  border: 0;
}

/* 
         Box Sizing
         ========================================================================== 
         Purpose: Apply a universal box-sizing rule to include padding and border in the element's total width and height. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 
         Body Styles
         ========================================================================== 
         Purpose: Define the base font size and font family for the document. 
          - font-size: Sets the default text size to 16px for readability.
          - font-family: Uses "Segoe UI" as the primary font, with sans-serif as a fallback.
          - color: Sets the default text color to black.
          - font-weight: Sets the default font weight to 400 for normal text.
          - font-style: Sets the default font style to normal.
*/
body {
  overflow: hidden;
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: var(--text-color);
  background: var(--nav-bg-color);
}

h1 {
  font-size: 36px;
  font-weight: 700;
}

h2 {
  font-size: 28px;
  font-weight: 700;
}

h3 {
  font-size: 24px;
  font-weight: 700;
}

@media (max-width: 1024px) {
  h3 {
    font-size: 1.375rem;
  }
}

h4 {
  font-size: 1.125rem;
}
/* 
        a link Tag Styles
        ========================================================================== 
        Purpose: Define the default appearance for anchor links. 
*/
a {
  font-size: inherit;
  font-weight: 700;
  line-height: 24px;
  color: var(--button-primary);
  hyphens: auto;
  text-decoration: underline;
  cursor: pointer !important;
}

a:hover {
  color: var(--button-primary-hover);
  text-decoration: underline;
}

/* 
        Button Styling
        ========================================================================== 
        Purpose: Define styles for primary and default buttons to ensure consistency */

/* Default Button : Ensure pagination buttons maintain original shape */
st-pagination .btn-default {
  clip-path: unset !important;
}

/* Modal: raise above sidebar (z-index: 2001) and its backdrop */
.modal {
  z-index: 2100 !important;
}

.modal-backdrop {
  z-index: 2090 !important;
}

/* Modal: use theme token so background adapts to dark mode */
.modal-content {
  background-color: var(--tile-bg-color) !important;
}

/* Default button styling in main content */
main .btn-default:not(.input-group button):not(span),
.modal .btn-default:not(.input-group button):not(span),
.btn-secondary {
  position: relative;
  place-content: center;
  min-height: 48px;
  padding: 12px 33px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--button-primary) !important;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--button-primary);
  border-radius: 2px;
  box-shadow: none;
  opacity: 1;
}

/* Disabled Default Button */
main .btn-default:disabled:not(.input-group button):not(span),
.modal .btn-default:disabled:not(.input-group button):not(span),
.btn-secondary:disabled {
  color: var(--button-disabled) !important;
  background: transparent;
  border-color: var(--button-disabled);
  opacity: 1;
}

/* Hover Effect for Default Button */
main .btn-default:not(.input-group button):not(span):hover,
.modal .btn-default:not(.input-group button):not(span):hover,
.btn-secondary:hover {
  color: var(--button-primary-hover) !important;
  text-decoration: none;
  background: transparent;
  border-color: var(--button-primary-hover);
  opacity: 1;
}

.btn-secondary {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* 
        Primary Button Styling
        ========================================================================== 
        Purpose: Style the primary action buttons for clarity and consistency 
*/

.btn.btn-primary,
[ui-sref="logout"] button,
.btn-danger,
.btn-warning {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: var(--white-color) !important;
  text-align: center;
  text-decoration: none;
  background: var(--button-primary);
  border: none;
  border-radius: 2px;
  box-shadow: none;
  opacity: 1;
}

.btn.btn-primary span {
  flex-direction: row-reverse;
  align-items: center;
}

.btn.btn-primary span,
.btn.btn-default,
.btn.btn-default span {
  display: inline-flex !important;
  gap: 8px;
  align-items: center;
}

/* Primary Button Hover Effect */
.btn.btn-primary:hover {
  background: var(--button-primary-hover);
  opacity: 1;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background: var(--primary-color);
  opacity: 1;
}

/* Disabled Primary Button */
.btn.btn-primary:disabled,
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning {
  background: var(--button-disabled);
  opacity: 1;
}

.btn-warning {
  color: var(--white-color) !important;
  background: var(--primary-main);
}

.btn-danger {
  background: var(--danger-button-bg);
}

/* 
         Form Inputs
         ========================================================================== 
         Purpose: Style form elements, including labels, inputs, selects, and input buttons. 
*/

label,
.control-label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  color: var(--dark-grey-headings);
}

main
  .btn-next-pageNumber:not(.input-group button):not(.ui-select-match-item)
  strong,
main
  .btn-prev-pageNumber:not(.input-group button):not(.ui-select-match-item)
  strong,
.bpc-page-quick .base-paginator .btn-default strong,
.bpc-page-quick .base-paginator .btn-default.page strong {
  font-weight: 400 !important;
}

.form-group select,
input {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: var(--input-text);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: none;
}

.input-group .form-control,
input.form-control {
  min-height: 48px;
  background: var(--input-bg);
  border-color: var(--border-color);
  border-radius: 4px;
  box-shadow: none;
}

.form-group select:hover,
.form-group input:hover {
  background: var(--body-background);
}

.form-group select:focus,
.form-group input:focus {
  background: var(--tile-bg-color);
  border-color: var(--primary-main);
}

/* Styles for buttons inside input groups */
.input-group-btn > .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 12px;
  background: var(--input-bg);
  border-color: var(--border-color);
  border-radius: 4px;
  box-shadow: none;
}

.input-group-btn > .btn:focus {
  outline: none !important;
}

/* Ensures button icon or text stays aligned */
.input-group-btn > .btn span,
.panel .panel .indicator span,
main .btn-next-page:not(.input-group button):not(.ui-select-match-item) span,
main .btn-last-page:not(.input-group button):not(.ui-select-match-item) span,
main .btn-first-page:not(.input-group button):not(.ui-select-match-item) span,
main .btn-prev-page:not(.input-group button):not(.ui-select-match-item) span,
.panel-heading h3,
.panel-heading h4,
tfoot .bpc-pagination-template .pull-right,
quick-meter-reading-filter form > div:first-child,
form[name="billaddressForm"] .dl-horizontal,
.last-login > span,
.page > .row:nth-of-type(2),
.panel-title bpc-address-output,
.st-pagination form,
st-pagination form,
.uib-button-bar .btn-group {
  display: flex;
}

.checkbox label input,
.radio label input {
  height: auto;
}

.input-group-btn > .btn span,
.page > .row,
.panel .panel .indicator span,
main .btn-next-page:not(.input-group button):not(.ui-select-match-item) span,
main .btn-last-page:not(.input-group button):not(.ui-select-match-item) span,
main .btn-first-page:not(.input-group button):not(.ui-select-match-item) span,
main .btn-prev-page:not(.input-group button):not(.ui-select-match-item) span,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
tfoot .bpc-pagination-template .pull-right,
quick-meter-reading-filter form > div:first-child,
form[name="billaddressForm"] .dl-horizontal,
.last-login > span,
bpc-phone-input .input-group-btn:first-child > .btn,
td .bpc-field-error,
.qmr-register .bpc-field-error {
  margin: 0;
}

/* Styles for input group addons */
.input-group-addon {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  background: var(--input-bg);
  border-color: var(--border-color);
  border-radius: 4px;
  box-shadow: none;
}

/* 
         Checkbox Styling
         ========================================================================== 
         Purpose: Define styles for checkboxes to ensure consistency and accessibility 
*/

.checkbox label {
  position: relative;
  display: inline !important;
  gap: 8px;
  align-items: center;
  padding-left: 25px;
  /* Space for custom checkbox */
  margin-right: 15px;
  font-size: 16px;
  cursor: pointer;
}

.checkbox .bpc-field-error:has(.has-error) {
  display: inline-block;
  width: 100%;
  padding-left: 10px;
  margin-bottom: 2px;
}

.checkbox label input[type="checkbox"] {
  display: inline-block;
  margin-right: 0;
  vertical-align: middle;
}

/* 
         Tag Buttons
         ========================================================================== 
         Purpose: Style tag buttons within multi-select dropdowns for a clean and consistent UI.
*/

.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
  display: inline-block !important;
  padding: 4px 8px;
  margin-right: 10px;
  color: var(--text-color);
  background: var(--input-bg);
  border-color: var(--border-color);
  border-radius: 4px;
}

/* Angular adds .btn-primary to the active chip after a deletion — prevent
   the global .btn.btn-primary rule from overwriting the chip appearance */
.ui-select-multiple.ui-select-bootstrap .ui-select-match-item.btn-primary {
  padding: 4px 8px !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: var(--text-color) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
  margin-top: 2px;
  color: var(--dark-grey-headings);
  opacity: 1;
}

.ui-select-multiple.ui-select-bootstrap .ui-select-match-item .curser-help,
.ui-select-multiple.ui-select-bootstrap
  .ui-select-match-item
  .curser-help:before,
li .glyphicon-info-sign:before {
  width: 18px;
  height: 18px;
}

.ui-select-match-item > span {
  display: flex;
  gap: 8px;
  font-size: 14px;
}

.ui-select-multiple.ui-select-bootstrap {
  padding: 16px;
  box-shadow: none;
}

/* ui-select sets an explicit pixel width on the search input inline (e.g.
   width: 905px). Constrain it to the container's content box so the focus
   ring has room to breathe on the left and right sides. overflow: visible
   was intentionally NOT set here — it caused the container's own .form-control
   focus box-shadow to escape across the full page width on initial page load. */
.ui-select-multiple.ui-select-bootstrap .ui-select-search {
  width: 100% !important;
  max-width: 100% !important;
}

.ui-select-bootstrap .ui-select-choices-row > span:focus,
.ui-select-bootstrap .ui-select-choices-row > span:hover {
  color: var(--text-color);
  background: var(--body-background);
}

.ui-select-bootstrap .ui-select-choices-row.active > span {
  color: unset;
  background: unset;
}

/* ==========================================================================
   3. Navigation and Shell
   ========================================================================== */
#sideMenu > li > a > span:first-child,
#sideMenu > li > div > span:first-child,
main .btn-default:not(.input-group button):not(span) .bpcIcon-home::before,
main .btn-default:not(.input-group button):not(span) .glyphicon::before,
main .btn-default:not(.input-group button):not(span) .fa::before {
  color: var(--secondary-color);
}

/*  Top Bar Menu    */
nav.navbar-fixed-top.navbar {
  z-index: 2001;
  padding: 10px 32px;
  margin-bottom: 0 !important;
}

.sidebar.navbar {
  height: 100%;
  margin-top: 0;
  overflow: auto;
  border-radius: 0;
}

.sidebar.navbar > ul li:last-of-type,
.account-info dt,
.panel-body .table-responsive:last-of-type table,
.panel-body .table-responsive:last-of-type,
.table-responsive > div:last-of-type,
.panel-body > ng-transclude > div:last-of-type,
.sidebar.navbar .dropdown ul li:last-of-type a,
.panel.panel-contract-account > .slideToggle > .panel-body uib-accordion > div,
.panel-body > *:last-child,
.panel-body form > *:last-child,
div[bpc-message],
.panel-body form > div:last-of-type,
.panel.panel-contract-account .panel:last-of-type,
ng-transclude > .form-group:last-of-type,
.panel-body ng-transclude > div dt {
  margin-bottom: 0;
}

/* Navbar General Styles */

.nav.navbar-right,
.panel.panel-contract-account > .panel-heading .text-right ng-include,
.bpc-page-contract [contract-account] > .panel-heading .text-right ng-include,
.panel.panel-contract-account > .panel-heading .text-right .lock-reason-icon,
.bpc-page-contract
  [contract-account]
  > .panel-heading
  .text-right
  .lock-reason-icon,
.panel.panel-contract-account
  > .panel-heading
  .text-right
  bpc-contract-account-property-icons,
.bpc-page-contract
  [contract-account]
  > .panel-heading
  .text-right
  bpc-contract-account-property-icons,
.panel.panel-contract-account
  > .panel-heading
  .text-right
  bpc-contract-account-division-icons
  .division-list,
.bpc-page-contract
  [contract-account]
  > .panel-heading
  .text-right
  bpc-contract-account-division-icons
  .division-list,
.control-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.nav.navbar-right.navbar-nav a,
.nav.navbar-right.navbar-nav a span {
  display: flex;
  gap: 16px;
  align-items: center;
  font-weight: 600;
}

/* Navbar Menu Styles */

.navbar {
  background: var(--nav-bg-color);
  border: none;
}

/* Navbar Links */
.navbar-default .navbar-nav a,
[ui-sref="logout"] button,
.sidebar.navbar > ul > li > div {
  padding: 18px 32px;
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-grey-headings) !important;
  text-decoration: none !important;
  border-radius: 4px;
}

.nav.navbar-right.navbar-nav a {
  padding: 18px 16px;
}

.navbar-default .navbar-nav a[ui-sref="postbox"] {
  flex-direction: row-reverse;
}

.sidebar.navbar > ul > li > a,
.sidebar.navbar > ul > li > div {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: start;
  padding: 18px 16px;
  text-transform: uppercase !important;
}

.sidebar.navbar > ul > li > a .caret,
.sidebar.navbar > ul > li > div .caret {
  margin-left: auto;
}

.sidebar.navbar .dropdown ul {
  padding: 16px 12px 0 44px;
}

.sidebar.navbar .dropdown ul li a {
  padding: 12px !important;
  margin-bottom: 8px;
  font-weight: 600 !important;
  word-break: break-all;
}

.sidebar.navbar .dropdown.active li.active a,
.navbar-default .navbar-nav .dropdown .active:hover > a,
.navbar-default .navbar-nav .dropdown.active:hover > a,
.navbar-default .navbar-nav .dropdown.active.open:focus > a,
.alert-info .alert-link font {
  color: var(--secondary-color) !important;
}

.navbar-default .navbar-nav a:hover,
.navbar-default .navbar-nav a[aria-expanded="true"],
.navbar-default .navbar-nav div[aria-expanded="true"],
.sidebar .navbar-nav > li > div:hover {
  color: var(--dark-grey-headings) !important;
  cursor: pointer;
  background: var(--surface-info) !important;
}

/* Active States */
.navbar-default .navbar-nav .active a[aria-expanded="true"],
.navbar-default .navbar-nav .active div[aria-expanded="true"],
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  color: var(--white-color) !important;
  outline: none;
  background: var(--secondary-color) !important;
}

.navbar-default .navbar-nav .active a[aria-expanded="true"] span,
.navbar-default .navbar-nav .active div[aria-expanded="true"] span,
.navbar-default .navbar-nav > .active > a span,
.navbar-default .navbar-nav > .active > a:hover span,
.dark-mode .navbar-default .navbar-nav .dropdown .active:hover > a,
.dark-mode .navbar-default .navbar-nav .dropdown.active:hover > a,
.dark-mode .navbar-default .navbar-nav .dropdown.active.open:focus > a,
.dark-mode .sidebar.navbar .dropdown.active li.active a:hover {
  color: var(--white-color) !important;
}

.navbar-default .navbar-nav .dropdown-menu > .active > a {
  color: var(--secondary-color) !important;
  background: transparent;
}

.navbar-default
  .navbar-nav
  .dropdown[ng-include="partials.template.header.account.profile"].open
  > a {
  color: var(--white-color) !important;
  background: var(--secondary-color) !important;
}

/* Dropdown Styles */
.navbar-default .navbar-nav .dropdown-menu {
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
}

.navbar-default .navbar-nav .dropdown-menu a {
  padding: 18px 41px 18px 20px;
  font-size: 18px !important;
  font-weight: 500;
  line-height: 24px;
}

.navbar-default .navbar-nav .dropdown-menu a:hover,
main .btn-next-page:not(.input-group button):not(.ui-select-match-item):hover,
main .btn-last-page:not(.input-group button):not(.ui-select-match-item):hover,
main .btn-first-page:not(.input-group button):not(.ui-select-match-item):hover,
main .btn-prev-page:not(.input-group button):not(.ui-select-match-item):hover,
main
  .btn-next-pageNumber:not(.input-group button):not(
    .ui-select-match-item
  ):hover,
main
  .btn-prev-pageNumber:not(.input-group button):not(
    .ui-select-match-item
  ):hover {
  color: var(--dark-grey-headings) !important;
  background: var(--surface-info) !important;
}

.dropdown-menu a {
  text-decoration: none;
  border-radius: 0 !important;
}

/* Navbar Right Section */
.navbar-right a {
  color: var(--dark-grey-headings) !important;
  text-decoration: none !important;
}

/* Other Styles */
a[keyboard-nav][uib-dropdown-toggle]:focus,
.uib-datepicker-popup table thead .uib-left,
.uib-datepicker-popup table thead .uib-right,
.breadcrumb li:hover span,
.breadcrumb li span.disabled:hover {
  border: none;
}

a[ui-sref="logout"],
bpc-process-indicator > div,
.panel-body ng-transclude > div {
  padding: 0 !important;
}

[ui-sref="logout"] button {
  color: var(--white-color) !important;
  background: var(--primary-color);
}

[ui-sref="logout"] button:hover {
  background: var(--primary-color);
}

#logo::after,
#teaser-area header h4,
#teaser-area .service-container span,
.navbar-brand::after,
.navbar-header .git-infos,
.panel-contract-account bpc-debug,
.bpc-page-dashboard .page-header p[bpc-i18n-eval="header.text"],
.dark-mode .teag-logo:not(.negative-outline),
.panel.panel-contract-account
  > .panel-heading
  bpc-contract-account-property-icons
  sup,
.breadcrumb li:last-of-type::after,
.breadcrumb li:before,
.breadcrumb li > span:last-of-type,
.panel.panel-contract td > .checkbox > label > span:last-child,
.tooltip .tooltip-arrow,
.panel.panel-contract > .panel-collapse > .panel-body br:has(+ header.h3),
table br,
.bpc-page-dashboard .tile-static .tile-electricity .tile br,
.bpc-page-dashboard .tile-static .tile-gas .tile br,
.panel.panel-product > div > .panel-body:before,
.panel.panel-product > div > .panel-body:after,
.checkbox .bpc-field-error,
.bpc-page-meter
  bpc-contract-account-search-collapsable
  .clickable
  .pull-right:has(.glyphicon-pushpin),
.pull-right .glyphicon-pushpin,
sup.fa,
.bpc-page-dashboard .panel-body .tile h3 span,
a[ui-sref="home"].btn.btn-default {
  display: none !important;
}

.navbar-brand {
  display: flex;
  align-items: center;
  margin: 0;
  margin-right: 20px;
}

.account-info dd {
  margin-bottom: 10px;
}

footer {
  padding: 24px 0;
}

footer a:hover,
.panel-contract-account .list-group {
  background: transparent !important;
}

footer a {
  padding: 0 !important;
  margin-right: 24px;
}

.portal-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-main);
}

/* Container Width element width sidebar override */

.page {
  padding: 0;
  overflow: auto;
}

.page > .row > .col-lg-2 {
  /* position + z-index: sidebar column must render above #loading-bar-spinner
     (main.min.css: position:fixed; z-index:2000) */
  position: relative;
  z-index: 2001;
  width: 400px !important;
  height: calc(100vh - 79px);
  padding: 0 24px 24px;
  overflow: hidden;
  background: var(--nav-bg-color);
}

.page .sidebar.navbar {
  width: 100%;
  min-width: 100% !important;
  padding: 0;
  margin: auto;
}

.page > .row > .main-content {
  height: calc(100vh - 79px);
  padding: 0;
  overflow: auto;
  background: var(--body-background);
  border-radius: 8px 0 0;
}

.page > .row > .main-content,
bpc-global-required-marker {
  display: block;
  width: calc(100vw - 400px) !important;
  margin: auto;
}

bpc-global-required-marker {
  padding: 0 15px;
  margin-top: 24px;
}

@media screen and (max-width: 1024px) {
  .page > .row > .main-content {
    border-radius: 0;
  }
}

.page > .row > .main-content > div,
.page > .row > .main-content > div > .container,
.page
  > .row
  > .main-content
  > div
  > .container
  > .row
  > main
  > div[bpc-page-header],
table header .navbar.navbar-default,
.contact img,
small[ng-if="document.periodFrom && document.periodTo"],
.panel.panel-contract-account .description bpc-address-output,
.uib-datepicker-popup table,
footer .container,
.bpc-page-quick .qmr-filter-row {
  width: 100%;
}

.page > .row > .main-content > div > .container > .row > main {
  display: block;
  min-width: 100%;
  padding: 0;
  margin: auto;
  overflow-x: hidden;
}

.page > .row > .main-content > div > .container > .row > main > div {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.page > .row > .main-content > div > .container > .row > main .main-content,
.page-header h1 span,
.page-header p[bpc-i18n-eval="header.text"],
#teaser-area,
footer > div,
bpc-global-required-marker {
  max-width: 1000px;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* QMR table needs more horizontal room than other pages */
.bpc-page-quick
  .page
  > .row
  > .main-content
  > div
  > .container
  > .row
  > main
  .main-content {
  max-width: 1300px;
}

/* ==========================================================================
   4. Page Layout and Content Modules
   ========================================================================== */

/* Header */

.page-header {
  padding: 0;
  margin-top: 0;
  margin-bottom: 48px;
  border: none;
}

.page-header h1 {
  padding: 32px 0 59px;
  font-size: 36px;
  font-weight: 700;
  line-height: 134%;
  color: var(--white-color);
  background: var(--secondary-gradient), var(--primary-gradient);
}

.page-header h1 span {
  display: block;
  padding-inline: 15px;
}

.page-header p[bpc-i18n-eval="header.text"] {
  padding-inline: 15px;
  margin-top: 24px;
  line-height: 24px;
  color: var(--text-color);
}

/* 
         Right Sidebar Teaser Card
         ========================================================================== 
         Purpose: Style the teaser area in the Right sidebar, including layout, typography, and spacing. 
*/

#teaser-area {
  padding-inline: 15px;
  margin: 0;
  margin-top: 40px;
  margin-bottom: 40px;
}

#teaser-area .panel-group {
  max-width: 400px;
  background: var(--body-background) !important;
}

#teaser-area .panel-body {
  padding: 0;
  background: var(--tile-bg-color);
}

#teaser-area .panel-teaser {
  padding: 0;
  overflow: hidden;
  background: var(--tile-bg-color);
  border: none;
  border-radius: 8px;
}

#qmr-result-table,
bpc-product-properties dl {
  padding-bottom: 24px;
}

.qmr-filter-row::before {
  display: none;
  content: "";
}

.qmr-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0;
}

.qmr-filter-row > div {
  width: 100% !important;
  padding: 0;
}

#teaser-area .contact .title {
  margin-top: 0;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  color: var(--dark-grey-headings);
}

#teaser-area .contact .description {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-color);
}

#teaser-area figcaption {
  padding-inline: 24px;
  padding-bottom: 24px;
}

#teaser-area .service-container p {
  margin-bottom: 5px;
}

#teaser-area .service-container a {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--button-primary);
  text-decoration: underline;
}

#teaser-area .service-container a:hover,
#footer ul li a:hover {
  color: var(--button-primary-hover);
}

/* Well component */

/* General well container styles */
.well {
  padding: 0;
  background: var(--input-bg);
  border: none;
  border-radius: 4px;
}

/* Styles for clickable headers inside a well */

.well > .clickable,
.well > .contract-account-search-header {
  padding: 24px;
  font-size: 20px;
  font-weight: 700;
  color: var(--dark-grey-headings);
  background: var(--input-bg);
  border: none;
  border-radius: 4px;
}

/* Styles for collapsible content inside a well */

.well .slideToggle {
  padding: 24px;
  margin-top: 0;
  border: none;
  border-top: 1px solid var(--border-color);
}

.well > .clickable .glyphicon,
.well > .contract-account-search-header .glyphicon {
  margin-right: 0;
  font-size: 18px;
}

/* Nested well component */

/* Styles for nested clickable headers */
.well .well > .clickable {
  font-size: 16px;
  font-weight: 400 !important;
  line-height: 24px;
  color: var(--dark-grey-headings);
  border: 1px solid var(--border-color);
  border-radius: 4px 4px 0 0;
}

/* Ensure normal font weight inside clickable headers */
.well .well > .clickable span,
small {
  font-size: 16px;
  font-weight: 400;
}

/* Styles for badges inside clickable headers */
.well .well > .clickable .badge {
  width: 25px;
  height: 25px;
  padding: 0;
  padding-top: 5px;
  font-size: 16px;
  font-weight: 600;
  background: var(--badge-bg);
  border-radius: 50%;
}

/* Styles for collapsible content inside nested wells */

.well .well .slideToggle {
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
}

/* Object-filter select styled as a primary button.
   appearance: none removes the native OS arrow that overlaps the text;
   a custom white chevron is painted via background-image instead. */
select#objectfilter {
  padding: 12px 44px 12px 24px !important;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: var(--white-color);
  appearance: none;
  cursor: pointer;
  background-color: var(--button-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  border: none;
  border-radius: 2px;
  box-shadow: none;
}

select#objectfilter:hover {
  background-color: var(--button-primary-hover);
}

select#objectfilter option {
  color: initial;
  background-color: var(--white-color);
}

.well .well .pull-left a .text-muted {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: var(--text-color);
}

/* ==========================================================================
   5. Accordions, Tables, and Form-heavy Modules
   ========================================================================== */

/* Main panel accordions */

/* Remove default panel styles */
.panel {
  border: none;
  border-radius: 4px;
  box-shadow: none;
}

.panel-title {
  font-size: 18px !important;
}

@media (max-width: 1024px) {
  .panel-title {
    font-size: 18px;
  }
}

.panel-body {
  padding: 16px;
  margin-bottom: 0 !important;
  background: var(--body-background);
}

/* Styles for the accordion heading */
.panel.panel-contract-account,
.bpc-page-contract [contract-account] {
  border-radius: 8px !important;
}

.panel.panel-contract-account > .panel-heading,
.bpc-page-contract [contract-account] > .panel-heading,
.relocation bpc-premise-header .panel.panel-default > .panel-heading {
  padding: 12px 16px;
  font-weight: 700;
  color: var(--panel-heading-text);
  background: var(--panel-heading-bg);
  border: 1px solid var(--panel-heading-bg);
  border-radius: 4px;
}

/* Styles for icons inside the panel heading */
.panel.panel-contract-account > .panel-heading .glyphicon,
.bpc-page-contract [contract-account] > .panel-heading .glyphicon {
  font-size: 24px;
  color: var(--panel-heading-text);
}

@media (max-width: 1024px) {
  .panel.panel-contract-account > .panel-heading,
  .bpc-page-contract [contract-account] > .panel-heading,
  .panel.panel-contract-account > .panel-heading .glyphicon,
  .bpc-page-contract [contract-account] > .panel-heading .glyphicon {
    font-size: calc(1.375rem);
  }
}

.panel.panel-contract-account > .panel-heading > .row > .panel-title ng-include,
.bpc-page-contract
  [contract-account]
  > .panel-heading
  > .row
  > .panel-title
  ng-include,
.panel.panel-contract-account > .panel-heading .row bpc-address-output,
.bpc-page-contract [contract-account] > .panel-heading .row bpc-address-output,
.panel.panel-contract-account > .panel-heading a.bpc-noLink:link,
.bpc-page-contract [contract-account] > .panel-heading a.bpc-noLink:link,
.panel.panel-contract-account > .panel-heading .panel-title,
.bpc-page-contract [contract-account] > .panel-heading .panel-title,
.panel header .text-right ng-include,
.panel header .text-right ng-include .division-list,
.radio label,
.well .well > .clickable > span,
.navbar-header,
.ui-select-choices
  .ui-select-choices-row
  .ui-select-choices-row-inner
  bpc-division-icon {
  display: flex;
  align-items: center;
}

/* Styles for muted text within the panel heading */
.panel.panel-contract-account > .panel-heading .text-muted,
.bpc-page-contract [contract-account] > .panel-heading .text-muted {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--panel-heading-text);
}

/* Ensure descriptions inside the heading are aligned */

/* Divider line between muted text and other elements */
.panel.panel-contract-account > .panel-heading .text-muted:before,
.bpc-page-contract [contract-account] > .panel-heading .text-muted:before {
  display: none;
  width: 1px;
  height: 20px;
  margin-inline: 4px;
  content: "";
  background: var(--border-color);
}

/*  remove width for the heading  */
.panel > .panel-heading .row {
  display: flex !important;
  gap: 16px;
  align-items: center;
  justify-content: end;
  margin: 0;
}

.panel > .panel-heading .row:after,
.panel > .panel-heading .row:before {
  content: none;
}

.panel > .panel-heading .row > div {
  width: unset !important;
  padding: 0;
}

.panel > .panel-heading .row > div:first-child,
.panel-body .list-group > span > span {
  margin-right: auto;
}

.panel.panel-contract-account > .panel-heading .row bpc-address-output a span,
.bpc-page-contract
  [contract-account]
  > .panel-heading
  .row
  bpc-address-output
  a
  span {
  margin-right: 16px;
}

.panel .panel bpc-division-icon,
.panel-contract-account .list-group .list-group-item .col-md-9 {
  order: 1;
  padding: 0;
}

.panel .panel .indicator,
.panel-contract-account .list-group a {
  order: 2;
}

/* Styles for the accordion content */
.panel.panel-contract-account > .panel-collapse > .panel-body,
.bpc-page-contract [contract-account] > .panel-collapse > .panel-body,
.panel.panel-contract-account > .slideToggle > .panel-body {
  margin-top: 0;
  border-color: var(--panel-heading-bg);
  border-radius: 0 0 4px 4px !important;
}

.panel.panel-contract-account > .slideToggle > .panel-body,
.bpc-page-contract [contract-account] > .slideToggle > .panel-body {
  border: 1px solid var(--panel-heading-bg);
}

.panel.panel-contract-account
  > .slideToggle
  > .panel-body
  uib-accordion
  > div
  > div {
  margin: 0;
  margin-top: 24px;
}

.panel.panel-contract-account
  > .slideToggle
  > .panel-body
  uib-accordion
  > div
  > div:last-of-type,
.panel-group .panel + .panel,
bpc-chart-config #submit-btn .btn.btn-primary,
.valueOptimal span {
  margin-top: 0;
}

.panel.panel-contract-account
  > .slideToggle
  > .panel-body
  uib-accordion
  > div
  div
  .panel-heading,
.panel.panel-contract-account
  > .slideToggle
  > .panel-body
  uib-accordion
  > div
  div
  .panel-body {
  background: var(--white-color) !important;
}

.panel.panel-contract-account
  > .slideToggle
  > .panel-body
  uib-accordion
  > div
  div
  .panel-heading
  .panel-title
  a {
  font-size: 20px !important;
}

.panel.panel-contract-account > .panel-heading bpc-division-icon > span,
.bpc-page-contract [contract-account] > .panel-heading bpc-division-icon > span,
bpc-contract-account-property-icons > span > span {
  position: relative;
  padding: 0;
  font-size: 18px !important;
}

.panel.panel-contract-account > .panel-heading bpc-division-icon span,
.bpc-page-contract [contract-account] > .panel-heading bpc-division-icon span,
a.bpcIcon-checkbox-unchecked,
a.bpcIcon-checkbox-checked {
  font-size: 18px;
}

.panel.panel-contract-account > .panel-heading bpc-division-icon span,
.bpc-page-contract [contract-account] > .panel-heading bpc-division-icon span,
bpc-contract-account-property-icons > span,
.panel.panel-contract-account > .panel-heading .glyphicon-info-sign,
.bpc-page-contract [contract-account] > .panel-heading .glyphicon-info-sign,
.panel.panel-contract-account > .panel-heading .glyphicon-ban-circle,
.bpc-page-contract [contract-account] > .panel-heading .glyphicon-ban-circle,
.panel-heading a.bpc-noLink .glyphicon-ban-circle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 0;
  background: var(--overlay-white-20);
  border-radius: 50%;
}

bpc-contract-account-property-icons > span {
  margin-right: 0;
}

.bpc-budget-billing,
.panel-body > bpc-collapse:last-of-type .row {
  margin-top: 24px !important;
}

/* Styles for elements within the accordion */

.panel-heading .indicator {
  display: flex;
  align-items: center;
  justify-content: end;
  width: auto;
  height: 100%;
  padding: 0;
  margin-right: 0;
  margin-left: 0;
}

.panel-heading .indicator a {
  margin-top: 4px;
  margin-right: 0;
  font-size: 18px !important;
}

.panel-heading a {
  font-weight: 300;
  text-decoration: none;
}

/* 
         Secondary Accordion
         ========================================================================== 
         Purpose: Style the secondary accordion for a clean and structured appearance. 
   */

.panel.panel-contract-account .panel {
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 2px !important;
}

/* Styles for secondary accordion heading */

.panel.panel-contract > .panel-heading,
.panel.panel-default > .panel-heading {
  padding: 24px 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-grey-headings);
  background: var(--input-bg);
  border: none !important;
  border-radius: 2px;
}

/* Panel heading h2/h3 — override portal rules that reset font sizes */
.panel.panel-contract > .panel-heading > .row > .panel-title h3,
.panel.panel-contract-account
  .panel-heading
  .row
  .contract-account-header-designation
  h2,
.panel.panel-contract-account .panel-heading .row .panel-title h2 {
  font-size: 24px;
}

.panel.panel-contract > .panel-heading .panel-title > h3 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
}

/* Small text inside inner contract panel heading */
.panel.panel-contract > .panel-heading h3 small {
  font-size: 14px;
  color: var(--dark-grey-headings);
}

.panel.panel-contract
  > .panel-heading
  h3[bpc-i18n="common.contract.header"]
  > small {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-color);
}

/* Styles for the accordion body */
.panel.panel-contract > .panel-collapse > .panel-body {
  border: none;
  border-top: 1px solid var(--border-color) !important;
}

/* Section headings inside the contract panel body (product name, tariff details) */
.panel.panel-contract .panel-body h3,
.panel.panel-contract .panel-body h4 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--dark-grey-headings);
}

/* Invoice simulation: redundant step title (already in breadcrumb stepper) +
   inline <br> tags inside contract heading smalls (e.g. ", <br>Malo …").
   Only target <br> inside <small>, NOT the <br> inside <span> — that one is the
   natural line-break between the product-name and the metadata line. */
h4[bpc-i18n="b2c.invoicesimulation.meter-reading.title"],
.panel.panel-contract .panel-heading h3 small br {
  display: none;
}

.panel .panel-default {
  border: 1px solid var(--border-color) !important;
}

.panel-default .panel-body.slideToggle {
  border-top: 1px solid var(--border-color) !important;
}

.panel-default > .panel-body {
  background: var(--tile-bg-color);
  border-radius: 0 0 8px 8px !important;
}

/* 
         Table Styling
         ==========================================================================
         Purpose: Style table elements for consistent layout, readability, and structure */

/* Styling for table body cells */
.table {
  width: 99%;
  max-width: 100%;
}

.table > thead > tr > th,
.table > tbody > tr > td {
  padding: 12px 16px 12px 0 !important;
  border: none !important;
}

.table > thead > tr > th,
table[st-table="contractAccountDocuments"] > tbody > tr > td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.table > thead > tr > th:last-of-type,
table.table > thead > tr {
  border: none !important;
}

/* table.table > thead > tr > th:last-of-type,
table.table > tbody > tr:last-of-type,
.table thead tr.filter-row {
  border-bottom: none !important;
} */
tfoot tr:last-of-type,
.uib-datepicker-popup table tr,
.uib-datepicker-popup table thead tr,
.st-sort-ascent,
.st-sort-descent {
  border-bottom: none !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  padding: 12px 16px 12px 0 !important;
  line-height: normal;
  border-top: none !important;
}

table tr,
table thead tr,
table.table > thead > tr {
  border-bottom: 1px solid var(--border-color) !important;
}

table thead tr.filter-row th {
  padding-bottom: 24px !important;
}

tfoot .bpc-pagination-template {
  display: flex;
  justify-content: space-between;
  margin-inline: -15px;
  margin-top: 24px;
}

st-pagination.center-block {
  margin-right: auto;
  margin-left: 15px;
}

/* Add border to the last cell of each row */

/* 
         Table Navigation & Pagination
         ========================================================================== 
         Purpose: Style table navigation buttons and input elements */

table nav,
.panel.panel-product > .panel-heading .panel-title,
.well > .contract-account-search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Style for table navigation buttons  need reformating */
table nav .btn-group button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-height: 40px !important;
  color: var(--dark-grey-headings) !important;
  background: var(--input-bg) !important;
  border: none !important;
}

main .btn-next-page:not(.input-group button):not(.ui-select-match-item),
main .btn-last-page:not(.input-group button):not(.ui-select-match-item),
main .btn-first-page:not(.input-group button):not(.ui-select-match-item),
main .btn-prev-page:not(.input-group button):not(.ui-select-match-item),
main .btn-next-pageNumber:not(.input-group button):not(.ui-select-match-item),
main .btn-prev-pageNumber:not(.input-group button):not(.ui-select-match-item),
.bpc-page-quick .base-paginator .btn-default {
  min-width: 42px;
  padding: 8px 12px !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--dark-grey-headings) !important;
  background: var(--body-background) !important;
  border: none !important;
  border-top: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-left: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}

/* Borders */

main .btn-first-page:not(.input-group button):not(.ui-select-match-item),
.bpc-page-quick .base-paginator .btn-group > .first {
  border-radius: 4px 0 0 4px !important;
}

main .btn-last-page:not(.input-group button):not(.ui-select-match-item),
.bpc-page-quick .base-paginator .btn-group > .last {
  border-right: 1px solid var(--border-color) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* Style for small input fields in table navigation */

table nav .input-group input.input-sm.ng-valid-maxlength.ng-not-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 0 12px;
  font-size: 16px !important;
  color: var(--white-color) !important;
  text-align: center !important;
  background: var(--secondary-color) !important;
  border: none !important;
  border-top: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-left: 1px solid var(--border-color) !important;
}

table nav .input-group input.input-sm:hover {
  background: var(--surface-info) !important;
}

table nav .input-group {
  border: none !important;
  border-radius: 0 !important;
}

table nav page-select .input-group span.input-group-addon {
  padding: 0 12px;
  margin: 0 !important;
  font-weight: 400 !important;
  color: var(--dark-grey-headings) !important;
  background: var(--body-background) !important;
  border: none !important;
  border-top: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-left: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}

page-select input {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--dark-grey-headings) !important;
}

.bpc-pagination-template {
  margin-top: 16px;
  margin-left: -8px;
}

.bpc-pagination-template nav {
  justify-content: start;
}

/* 
         Form Controls within Table
         ========================================================================== 
         Purpose: Standardize form elements used in table filtering and actions 
*/

form select.form-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px !important;
  padding: 8px 16px;
  padding-right: 4px;
  border-radius: 4px !important;
  box-shadow: none;
}

.bpc-pagination-template .form-group select.form-control {
  max-height: 40px;
  padding: 0 12px !important;
  padding-right: 24px !important;
  background-color: var(--body-background);
  border-radius: 4px !important;
}

.bpc-pagination-template .form-group select.form-control:hover {
  background-color: var(--surface-info) !important;
}

/* Input & Button Styling */
st-pagination .input-group-addon,
st-pagination .input-group .ng-valid-maxlength.ng-not-empty,
st-pagination .btn-default {
  height: 40px !important;
  min-height: 40px !important;
  border-left: none !important;
  border-radius: 0 !important;
}

.panel-info {
  overflow: hidden !important;
  border: 1px solid var(--secondary-color) !important;
  border-radius: 8px !important;
}

bpc-phone-input input {
  border-left: none !important;
}

/* ==========================================================================
   6. Tabs, Graphs, and Breadcrumbs
   ========================================================================== */

/* Graph section */

/* Accordion tab header styles */
#accordiongroup-4685-9002-tab {
  padding-bottom: 16px;
  padding-left: 0;
  border-color: var(--dark-grey-headings);
  border-bottom: 1px solid;
}

/* Panel title styling */
#accordiongroup-4685-9002-tab .panel-title span {
  font-size: 18px;
  font-weight: 700;
}

/* Search bar styling for MRD History */
#mrdHistoryDateSearch {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 49px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 400;
}

/* Top margin for tab section */
.tabset,
.panel-body form > button,
ng-transclude > button {
  margin-top: 24px;
}

/* Tab navigation styling */
.nav-tabs.nav-justified > li > a {
  padding: 16px 4px;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: var(--dark-grey-headings);
  text-decoration: none;
  background: var(--tile-bg-color);
  border: none;
}

.tab-content > .tab-pane {
  background: var(--tile-bg-color);
  border: none;
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
}

/* Active tab styling */
.nav-tabs .nav-item.active a {
  color: var(--white-color) !important;
  background: var(--primary-main);
  border: none;
  border-radius: 8px 8px 0 0;
}

.nav-tabs .nav-item a:hover,
.radio input[type="radio"]:checked,
.radio input[type="radio"]:hover,
.checkbox input[type="checkbox"]:checked,
.checkbox input[type="checkbox"]:hover,
.clickable.bpc-noLink.checkable:hover,
.clickable.bpc-noLink.checkable.bpcIcon-checkbox-checked {
  background: var(--primary-light);
}

/* Hover state for active tabs */
.nav-tabs .nav-item.active a:hover,
.nav-tabs .nav-item.active a:focus {
  color: var(--white-color);
  background: var(--primary-main) !important;
  border: none;
}

.dark-mode .nav-tabs .nav-item a:hover {
  background: var(--tab-hover-bg-dark);
}

/* Content pane styling */

.tab-pane {
  padding: 24px;
  border: 1px solid var(--border-color);
}

/* Accordion toggle button styling */
.accordion-toggle {
  font-size: 18px;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
  color: var(--dark-grey-headings) !important;
}

/* Additional accordion tab styling */
#accordiongroup-324-7652-tab,
#accordiongroup-155-5364-tab {
  border-bottom: 1px solid var(--dark-grey-headings);
}

/* Accordion and breadcrumb */

/* Accordion Group Styles */
div[uib-accordion-group] {
  color: var(--dark-grey-headings);
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}

div[uib-accordion-group] .panel-body {
  border-top: none !important;
}

/* Breadcrumb Styling */

.breadcrumb {
  display: flex;
  flex-flow: row wrap;
  row-gap: 16px;
  padding: 20px 0 24px;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
  background: transparent;
}

.breadcrumb li > span {
  margin: 0;
  color: var(--text-disabled);
  cursor: pointer;
  border: none;
  border-radius: 0;
}

.breadcrumb li a {
  display: block;
  color: var(--text-color);
  text-decoration: none;
}

.breadcrumb li > span,
.breadcrumb li > a {
  position: relative;
  z-index: 999 !important;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 40px 16px 24px;
  margin-right: 12px;
  background: var(--body-background);
  border: 1px solid var(--border-color) !important;
  border-right: none !important;
  border-radius: 4px;
}

.breadcrumb li {
  position: relative;
  z-index: 999 !important;
  margin-right: 20px;
}

.breadcrumb li::after {
  position: absolute;
  top: 0;
  right: -5px;
  z-index: -1;
  width: 24px;
  height: 100%;
  content: "";
  background-image: url("data:image/svg+xml;utf8,<svg width='24' height='61' viewBox='0 0 24 61' xmlns='http://www.w3.org/2000/svg'><path d='M2.26855 0.5C5.24321 0.5 8.00223 2.05545 9.54199 4.60059L22.0078 25.207L22.1523 25.4551C23.551 27.9531 23.5979 30.9896 22.2764 33.5293L22.1396 33.7822L9.50977 56.1758C8.00289 58.8474 5.17372 60.5 2.10645 60.5H0.5V0.5H2.26855Z' fill='transparent' stroke='%23D0D0D0'/></svg>");
  background-repeat: no-repeat;
  background-size: 24px calc(100%);
}

.breadcrumb li.active > span,
.dark-mode .breadcrumb li.active > span {
  color: var(--white-color) !important;
  background: var(--primary-main);
  border: 1px solid var(--primary-main) !important;
}

.breadcrumb li.active::after,
.dark-mode .breadcrumb li.active::after {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2259%22%20viewBox%3D%220%200%2022%2059%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M20.5804%2024.4655L8.11384%203.85898C6.66465%201.46356%204.06867%200%201.26899%200H0V59H1.10642C3.99342%2059%206.65646%2057.4445%208.07465%2054.9299L20.7038%2032.5364C22.1224%2030.021%2022.0752%2026.9364%2020.5804%2024.4655Z%22%20fill%3D%22%23870D87%22/%3E%3C/svg%3E");
}

@media (max-width: 1024px) {
  .breadcrumb {
    flex-direction: column;
    margin-bottom: 0;
  }

  .breadcrumb li {
    display: block;
    width: 100%;
    margin: 0 !important;
    margin-bottom: 14px !important;
  }

  .breadcrumb li:last-of-type::before,
  span[bpc-i18n="common.menu.menu"] {
    display: none;
  }

  .breadcrumb li > span,
  .breadcrumb li > a {
    border: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
  }

  .breadcrumb li:last-of-type > span,
  .breadcrumb li:last-of-type > a {
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
  }

  .breadcrumb li::after {
    inset: 100% 0 auto;
    z-index: 1000;
    width: 100%;
    height: 12px;
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 12' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 0H400L200 12Z' fill='%23f5f5f5'/><path d='M-2 0L200 12L402 0' fill='none' stroke='%23d0d0d0' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .breadcrumb li.active::after,
  .dark-mode .breadcrumb li.active::after {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 12' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 0H400L200 12Z' fill='%23870d87'/></svg>");
  }

  .breadcrumb li span {
    margin: 0;
  }
}

/* Breadcrumb dark mode variants */

.dark-mode .breadcrumb li > span,
.dark-mode .breadcrumb li > a {
  color: var(--breadcrumb-dark-text) !important;
  background: var(--breadcrumb-dark-bg);
  border-color: var(--border-color) !important;
}

/* Prevent dark-mode text-danger !important from bleeding into panel heading icons */
.dark-mode .breadcrumb li > a,
.dark-mode main st-pagination .btn-default:not(.input-group button):not(span),
.dark-mode bpc-global-required-marker span,
.dark-mode .panel.panel-contract-account > .panel-heading .glyphicon,
.uib-datepicker-popup table tbody button.active span {
  color: var(--panel-heading-text) !important;
}

.dark-mode .breadcrumb li::after {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2261%22%20viewBox%3D%220%200%2024%2061%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M2.26855%200.5C5.24321%200.5%208.00223%202.05545%209.54199%204.60059L22.0078%2025.207L22.1523%2025.4551C23.551%2027.9531%2023.5979%2030.9896%2022.2764%2033.5293L22.1396%2033.7822L9.50977%2056.1758C8.00289%2058.8474%205.17372%2060.5%202.10645%2060.5H0.5V0.5H2.26855Z%22%20fill%3D%22%23424242%22%20stroke%3D%22%23585858%22/%3E%3C/svg%3E");
}

/* Breadcrumb stepper: downward arrow on mobile (must follow dark-mode overrides above) */

@media (max-width: 1024px) {
  .dark-mode .breadcrumb li::after {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 400 12' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 0H400L200 12Z' fill='%23424242'/><path d='M-2 0L200 12L402 0' fill='none' stroke='%23585858' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>");
  }

  .breadcrumb li.active > span,
  .breadcrumb li.active > a,
  .dark-mode .breadcrumb li > span,
  .dark-mode .breadcrumb li > a {
    border: none !important;
  }
}

/* No-link styling */
a.bpc-noLink:active,
a.bpc-noLink:focus,
a.bpc-noLink:hover,
a.bpc-noLink:link,
a.bpc-noLink:visited {
  color: var(--white-color);
}

/* ==========================================================================
   7. Tooltips and Global Overrides
   ========================================================================== */

/* Tooltip */

/* Ensure the tooltip container does not clip the arrow */
.tooltip {
  z-index: 9999;
  overflow: visible !important;
  font-family: "Segoe UI", sans-serif;
}

.tooltip.in {
  opacity: 1;
}

/* Main tooltip bubble styling */
.tooltip .tooltip-inner {
  position: relative;
  z-index: 9;
  min-width: 300px;
  padding: 16px 20px;
  margin-top: 15px;
  font-size: 16px;
  font-weight: 400;
  color: var(--input-text);
  background: var(--tile-bg-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  filter: var(--tooltip-shadow);
}

/* Border effect: Larger arrow behind the actual arrow */
.tooltip .tooltip-inner::before {
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 9;
  width: 0;
  height: 0;
  content: "";
  border-right: 12px solid transparent;
  border-bottom: 12px solid var(--border-color);
  border-left: 12px solid transparent;
  transform: translateX(-50%);
}

/* Actual arrow: var(--white-color) arrow on top */
.tooltip .tooltip-inner::after {
  position: absolute;
  top: -9px;
  /* Lower than the border arrow to create the effect */
  left: 50%;
  z-index: 9;
  width: 0;
  height: 0;
  content: "";
  border-right: 11px solid transparent;
  border-bottom: 11px solid var(--white-color);
  border-left: 11px solid transparent;
  transform: translateX(-50%);
  /* Same as tooltip background */
}

.tooltip .tooltip-inner a {
  font-size: 16px !important;
}
/* Overrides */

quick-meter-reading-filter .panel-default {
  background: var(--tile-bg-color);
  border: none !important;
}

.panel-default .alert-info {
  margin: 24px;
}

.bpc-page-about .std-text-link,
.bpc-page-about .has-external-link,
.alert-info,
.alert-info a,
.last-login,
.bpc-page-customer
  table[st-table="businesspartner.customerContacts"]
  thead
  td[colspan="3"]
  input {
  font-size: 16px;
}

dt,
.bpc-page-dashboard .link {
  margin-bottom: 12px;
}

form > span {
  display: block;
  margin-top: 24px;
}

.panel-body > h3:not(.panel-title),
.sidebar.navbar > ul > li,
.panel.panel-contract .panel .panel-body,
.contract-account-000800005001 .col-md-3,
.CA000800005002 .col-md-3,
.col-sm-12 > p:first-child {
  margin-bottom: 16px;
}

.panel-group,
bpc-profile-selection ng-transclude,
bpc-consumption-history-pdf {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dropdown-menu .account-info {
  padding-top: 24px;
}

#teaser-area .title {
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

#teaser-area .description,
.bpc-page-dashboard .content {
  margin-bottom: 24px !important;
}

.picture-credits {
  display: flex;
  font-size: 12px;
}

.qmr-register,
form[name="billaddressForm"] > div .well,
.bpc-page-dashboard .panel-contract-account .panel-body,
.bpc-page-dashboard .panel-contract-account .panel-body > div {
  padding: 16px !important;
}

.qmr-register .qmr-lockReason {
  width: 350px;
}

.qmr-register .qmr-reading-reason {
  margin: 8px 0 16px;
}

/* QMR uses base-paginator instead of the older st-pagination markup.
   Mirror the established paginator layout so the empty field-error node
   cannot force a line break and the page-size select gets the same custom arrow. */
.bpc-page-quick .base-paginator {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.bpc-page-quick .base-paginator .wrapper-selection-page > form {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
}

.bpc-page-quick .base-paginator .bpc-field-error {
  display: none;
  margin: 0;
}

.bpc-page-quick .base-paginator .input-group-addon,
.bpc-page-quick .base-paginator .input-group .form-control,
.bpc-page-quick .base-paginator .btn-default,
.bpc-page-quick .base-paginator select.form-control {
  height: 40px !important;
  min-height: 40px !important;
}

.bpc-page-quick .base-paginator .btn-default.page {
  overflow: visible;
}

.bpc-page-quick .base-paginator .btn-default[disabled] {
  color: var(--dark-grey-headings) !important;
  opacity: 1;
}

.bpc-page-quick .base-paginator .input-group .form-control {
  width: auto !important;
  padding: 0 12px;
  font-size: 16px !important;
  color: var(--white-color) !important;
  text-align: center !important;
  background: var(--secondary-color) !important;
  border: none !important;
  border-top: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-left: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}

.bpc-page-quick .base-paginator .input-group-addon {
  padding: 0 12px;
  margin: 0 !important;
  font-size: 16px;
  font-weight: 400 !important;
  color: var(--dark-grey-headings) !important;
  background: var(--body-background) !important;
  border: none !important;
  border-top: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-left: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
}

.bpc-page-quick .base-paginator select.form-control {
  padding-top: 8px;
  padding-right: 36px !important;
  padding-bottom: 8px;
  padding-left: 12px;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 24px;
  color: var(--dark-grey-headings) !important;
  background-color: var(--body-background);
  background-position: right 12px center !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  box-shadow: none;
}

.bpc-page-quick .base-paginator .input-group .form-control:hover,
.bpc-page-quick .base-paginator .input-group .form-control:focus {
  background: var(--secondary-color) !important;
}

select.form-control,
select.form-control:hover,
select.form-control:focus {
  padding-right: 12px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Removes default styling */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5896 0.706722L11.2929 1.41L6 6.70289L0.707107 1.41L1.41039 0.706721L5.64683 4.93394L6 5.28634L6.35317 4.93394L10.5896 0.706722Z' fill='%231F1F1F' stroke='%231F1F1F'/%3E%3C/svg%3E%0A") !important;
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.form-group:focus-within label,
.control-label:has(~ .form-control:focus),
.boxes.products-list .box h3 {
  color: var(--primary-main);
}

.form-control:focus {
  border-color: var(--primary-main);
}

.dark-mode select.form-control,
.dark-mode select.form-control:hover,
.dark-mode select.form-control:focus {
  background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.293 1.41016L6 6.70312L0.707031 1.41016L1.41016 0.706055L5.64648 4.93359L6 5.28613L6.35352 4.93359L10.5889 0.706055L11.293 1.41016Z" fill="white" stroke="white"/></svg>') !important;
}

div[uib-accordion-group] > div[role="tab"] {
  padding: 24px 0;
  background: var(--body-background) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

div[uib-accordion-group] > div[role="tab"] .panel-title .indicator a {
  margin-top: 0;
  font-size: 20px !important;
}

div[uib-accordion-group] > div[role="tab"] .panel-title a {
  font-size: 24px !important;
  color: var(--dark-grey-headings);
}

.panel-body dl {
  margin: 16px 0;
}

.panel.panel-contract
  > .panel-collapse
  > .panel-body
  bpc-include[src="partials.modules.contractoverview.overview.currentTariff"]
  h4[bpc-i18n="b2c.productchange.tarif.title.since"],
.panel.panel-contract
  > .panel-collapse
  > .panel-body
  bpc-include[src="partials.modules.contractoverview.overview.nextTariff"]
  header.h3[bpc-i18n="b2c.productchange.tarif.title.from"] {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--dark-grey-headings);
}

.panel.panel-contract
  > .panel-collapse
  > .panel-body
  bpc-include[src="partials.modules.contractoverview.overview.currentTariff"]
  h4[bpc-i18n="b2c.productchange.tarif.title.since"]
  > small,
.panel.panel-contract
  > .panel-collapse
  > .panel-body
  bpc-include[src="partials.modules.contractoverview.overview.nextTariff"]
  header.h3[bpc-i18n="b2c.productchange.tarif.title.from"]
  > small {
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
}

.panel.panel-contract
  > .panel-collapse
  > .panel-body
  bpc-include[src="partials.modules.contractoverview.overview.currentTariff"]
  h4[bpc-i18n="b2c.productchange.tarif.title"],
.panel.panel-contract
  > .panel-collapse
  > .panel-body
  bpc-include[src="partials.modules.contractoverview.overview.nextTariff"]
  header.h4[bpc-i18n="b2c.productchange.tarif.title"] {
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--dark-grey-headings);
}

.panel-body dl dt {
  margin: 12px 0 !important;
  font-weight: 600;
}

.dl-horizontal > div {
  display: flex;
  align-items: center;
  width: unset;
  overflow: unset;
  text-overflow: unset;
}

.panel-body a.bpc-noLink:link,
.uib-datepicker-popup table tbody button .text-info,
.uib-datepicker-popup button,
.boxes.products-list .box p,
.boxes.products-list .box li,
.boxes.products-list .box h4,
.dropdown-menu,
.ui-select-bootstrap .ui-select-choices-row > span {
  color: var(--text-color);
}

.addresses {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  margin-top: 16px;
}

.panel-body .list-group {
  padding-inline: 0 !important;
}

.panel-body .list-group > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: end;
  margin-inline: 0 !important;
  border: 1px solid var(--border-color);
  border-bottom: none;
}

.panel-body .list-group > span:last-of-type,
.radio input[type="radio"]:hover:checked,
.checkbox input[type="checkbox"]:hover:checked,
.popover {
  border: 1px solid var(--border-color);
}

.panel-body .list-group > span > * {
  width: auto;
}

.panel-body > *,
.panel-body > form > *,
.form-group,
.form p,
bpc-wizard-step p,
.panel.panel-contract-account > .panel-collapse > .panel-body,
.panel.panel-contract-account .panel,
.panel-body form > div,
.table-responsive > table,
.panel-body > ng-transclude > div {
  margin-bottom: 24px;
}

.table-responsive > table,
.postbox .panel-body .table-responsive:last-of-type table {
  width: 100%;
  margin: 12px 0;
}

input {
  min-height: 48px;
}

#bpcPhoneInput-947,
#bpcPhoneInput-9590,
bpc-phone-input bpc-phone-input {
  min-height: 48px !important;
}

bpc-phone-input .dropdown-menu a {
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

bpc-phone-input .dropdown-menu,
.panel .panel-body .panel-body .table-responsive,
.bpc-page-market
  .ngdialog.ngdialog-theme-default
  .ngdialog-content
  .panel-heading {
  padding: 0;
}

.wrapper-bank-details {
  display: grid;
  margin: 0;
}

.wrapper-bank-details dl dt {
  padding: 5px;
  margin: 0 !important;
}

.wrapper-bank-details > div {
  width: 100%;
  padding: 24px;
}

.wrapper-bank-details .dl-horizontal > div {
  flex-direction: column;
  align-items: start;
}

.wrapper-bank-details dt,
.wrapper-bank-details dd {
  width: unset !important;
  text-align: left !important;
}

.wrapper-bank-details dd {
  margin-left: 200px !important;
}

table[st-table="businesspartner.customerContacts"] thead td[colspan="3"] {
  border-left: 1px solid var(--border-color);
}

.table-responsive {
  padding-inline: 24px;
  margin-bottom: 24px;
  background: var(--tile-bg-color);
}

.panel-group .list-group-item {
  background: transparent;
  border: none;
}

bpc-premise-header .panel-body {
  background: var(--tile-bg-color);
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
}

table small {
  font-size: 16px;
  line-height: 150%;
}

table td .input-group input {
  font-size: 16px;
  border-radius: 4px 0 0 4px !important;
}

table td .input-group span.input-group-addon {
  font-size: 16px;
  border-radius: 0 4px 4px 0 !important;
}

form[name="billaddressForm"] > div,
.bpc-page-register form > .col-md-12 {
  padding-inline: 0;
}

.well .col-sm-4 {
  width: 50%;
}

.invoicetype > div {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

.invoicetype {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

/* Growl toast notifications (angular-growl)
   HTML: .growl-container > .growl-item.alert.[alert-success|alert-error|alert-warning|alert-info][.icon][.alert-dismissable]
   The .icon class is on the growl-item itself; the portal sets background-image (PNG) via .growl-container>.alert-success.icon (0,3,0).
   We use .growl-container>.growl-item (0,3,0 for type rules) to suppress the PNG and inject our own SVG ::before icons.
   ========================================================================== */

.growl-container > .growl-item {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 40px 16px 16px;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  background: var(--tile-bg-color);
  background-image: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--mobile-drop-shadow);
}

.growl-container > .growl-item::before {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  content: "";
  background-color: currentcolor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.growl-item .growl-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: inherit;
}

/* Override portal's .growl-item.icon > .growl-message/title { margin-left: 40px } */
.growl-item.icon > .growl-message,
.growl-item.icon > .growl-title {
  margin-left: 0;
}

.growl-item .growl-message,
.last-login__date {
  font-weight: 400;
}

.growl-item .growl-message {
  flex: 1;
}

.growl-item .close {
  position: absolute;
  top: 12px;
  right: 12px;
  color: currentcolor;
  opacity: 0.7;
}

.growl-container > .growl-item.alert-success,
.growl-container > .growl-item.alert-info {
  color: var(--secondary-color);
  background: var(--tile-bg-color);
}

.growl-container > .growl-item.alert-success::before {
  /* checkmark-circle */
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>");
}

.growl-container > .growl-item.alert-error,
.growl-container > .growl-item.alert-danger {
  color: var(--danger-color);
  background: var(--tile-bg-color);
}

.growl-container > .growl-item.alert-error::before,
.growl-container > .growl-item.alert-danger::before {
  /* x-circle */
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/></svg>");
}

.growl-container > .growl-item.alert-warning {
  color: var(--primary-main);
  background: var(--tile-bg-color);
}

.growl-container > .growl-item.alert-warning::before {
  /* warning-triangle */
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/></svg>");
}

.growl-container > .growl-item.alert-info::before {
  /* info-circle */
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/></svg>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/></svg>");
}

/* ==========================================================================
   8. Icons and Shared Utility Tweaks
   ========================================================================== */
.icon-consumption,
.icon-home,
.icon-products,
.icon-premise,
.icon-contact,
.glyphicon,
.bpcIcon-home {
  top: 0;
  display: inline-flex !important;
  gap: 0 !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  /* color: var(--dark-grey-headings); */
}

.glyphicon-font::before,
.icon-premise::before,
.icon-contact::before,
.icon-products::before,
.icon-consumption::before,
.icon-home::before,
.glyphicon-user:before,
.fa-envelope:before,
.glyphicon-chevron-up:before,
.glyphicon-chevron-down:before,
.glyphicon-pushpin:before,
.bpcIcon-gas:before,
.bpcIcon-electricity:before,
.fa-file:before,
.glyphicon-map-marker:before,
.glyphicon-calendar:before,
.bpcIcon-save:before,
.bpcIcon-home:before,
.glyphicon-step-backward:before,
.glyphicon-step-forward:before,
.glyphicon-triangle-left:before,
.glyphicon-triangle-right:before,
.glyphicon-info-sign:before,
.glyphicon-filter:before,
.glyphicon-star-empty:before,
.st-sort-ascent:before,
.st-sort-descent:before,
.glyphicon-ok:before,
.glyphicon-exclamation-sign:before,
.glyphicon-cloud-download:before,
.glyphicon-download-alt:before,
.glyphicon-trash:before,
.fa-envelope-open-o:before,
.glyphicon-envelope::before,
.fa-power-off:before,
.glyphicon-remove:before {
  display: inline-block;
  width: 24px;
  height: 24px;
  content: "";
  background-color: currentcolor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-premise:before,
.fa-file:before {
  -webkit-mask-image: url("./assets/Icon-document.svg");
  mask-image: url("./assets/Icon-document.svg");
}

.icon-contact:before,
.fa-envelope:before,
.glyphicon-envelope:before {
  -webkit-mask-image: url("./assets/Icon-mail.svg");
  mask-image: url("./assets/Icon-mail.svg");
}

.icon-products::before {
  -webkit-mask-image: url("./assets/Icon-product.svg");
  mask-image: url("./assets/Icon-product.svg");
}

.icon-consumption::before {
  -webkit-mask-image: url("./assets/Icon-graph.svg");
  mask-image: url("./assets/Icon-graph.svg");
}

.glyphicon-user:before {
  -webkit-mask-image: url("./assets/Icon-user.svg");
  mask-image: url("./assets/Icon-user.svg");
}

.glyphicon-font:before {
  -webkit-mask-image: url("./assets/Icon-cost.svg");
  mask-image: url("./assets/Icon-cost.svg");
}

.glyphicon-chevron-up:before {
  -webkit-mask-image: url("./assets/Icon-arrow-up.svg");
  mask-image: url("./assets/Icon-arrow-up.svg");
}

.glyphicon-chevron-down:before {
  -webkit-mask-image: url("./assets/Icon-arrow-down.svg");
  mask-image: url("./assets/Icon-arrow-down.svg");
}

.glyphicon-pushpin:before {
  -webkit-mask-image: url("./assets/Icon-pin.svg");
  mask-image: url("./assets/Icon-pin.svg");
}

.bpcIcon-gas:before {
  -webkit-mask-image: url("./assets/Icon-gas.svg");
  mask-image: url("./assets/Icon-gas.svg");
}

.bpcIcon-electricity:before {
  -webkit-mask-image: url("./assets/Icon-electricity.svg");
  mask-image: url("./assets/Icon-electricity.svg");
}

.glyphicon-map-marker:before {
  -webkit-mask-image: url("./assets/Icon-map.svg");
  mask-image: url("./assets/Icon-map.svg");
}

.glyphicon-calendar:before {
  -webkit-mask-image: url("./assets/Icon-calendar.svg");
  mask-image: url("./assets/Icon-calendar.svg");
}

.bpcIcon-save:before {
  -webkit-mask-image: url("./assets/Icon-save.svg");
  mask-image: url("./assets/Icon-save.svg");
}

.bpcIcon-home:before,
.icon-home:before {
  -webkit-mask-image: url("./assets/Icon-home.svg");
  mask-image: url("./assets/Icon-home.svg");
}

.glyphicon-step-backward:before {
  -webkit-mask-image: url("./assets/Icon-double-arrow-left.svg");
  mask-image: url("./assets/Icon-double-arrow-left.svg");
}

.glyphicon-step-forward:before {
  -webkit-mask-image: url("./assets/Icon-double-arrow-right.svg");
  mask-image: url("./assets/Icon-double-arrow-right.svg");
}

.glyphicon-triangle-left:before {
  -webkit-mask-image: url("./assets/Icon-arrow-down.svg");
  mask-image: url("./assets/Icon-arrow-down.svg");
  transform: rotate(90deg);
}

.glyphicon-triangle-right:before {
  -webkit-mask-image: url("./assets/Icon-arrow-down.svg");
  mask-image: url("./assets/Icon-arrow-down.svg");
  transform: rotate(-90deg);
}

.glyphicon-info-sign:before {
  width: 24px;
  height: 14px;
  -webkit-mask-image: url("./assets/Icon-info.svg");
  mask-image: url("./assets/Icon-info.svg");
}

.glyphicon-filter:before {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url("./assets/Icon-filter.svg");
  mask-image: url("./assets/Icon-filter.svg");
}

.glyphicon-star-empty:before {
  -webkit-mask-image: url("./assets/Icon-star.svg");
  mask-image: url("./assets/Icon-star.svg");
}

.st-sort-ascent:before {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  -webkit-mask-image: url("./assets/Icon-sort-asc.svg");
  mask-image: url("./assets/Icon-sort-asc.svg");
}

.st-sort-descent:before {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  -webkit-mask-image: url("./assets/Icon-sort-desc.svg");
  mask-image: url("./assets/Icon-sort-desc.svg");
}

.glyphicon-ok:before {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url("./assets/Icon-check.svg");
  mask-image: url("./assets/Icon-check.svg");
}

.glyphicon-exclamation-sign:before {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url("./assets/Icon-exclamation-circle.svg");
  mask-image: url("./assets/Icon-exclamation-circle.svg");
}

.glyphicon-cloud-download:before,
.glyphicon-download-alt:before {
  -webkit-mask-image: url("./assets/Icon-download.svg");
  mask-image: url("./assets/Icon-download.svg");
}

.glyphicon-trash:before,
.glyphicon-remove:before {
  -webkit-mask-image: url("./assets/Icon-close.svg");
  mask-image: url("./assets/Icon-close.svg");
}

.fa-envelope-open-o:before {
  -webkit-mask-image: url("./assets/Icon-mail-open.svg");
  mask-image: url("./assets/Icon-mail-open.svg");
}

.fa-power-off:before {
  -webkit-mask-image: url("./assets/Icon-exit.svg");
  mask-image: url("./assets/Icon-exit.svg");
}

.table > thead > tr > th[bpc-i18n="b2c.postbox.download"] {
  width: 100px !important;
}

/* Mass postbox: pad and card-style the table container */
.mass-postbox .table-responsive {
  padding: 16px 24px 24px;
  background: var(--tile-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

/* Center Guthaben, Forderung, and Download columns — headers and cells */
.table > thead > tr > th[bpc-i18n="b2c.invoice.credit"],
.table > thead > tr > th[bpc-i18n="b2c.invoice.debit"],
.table > thead > tr > th[bpc-i18n="b2c.postbox.download"],
.table > thead > tr > th[bpc-i18n="b2c.connectionobject.table.column.download"],
.bpc-page-postbox .panel-contract-account td:nth-last-of-type(-n + 3) {
  text-align: center;
}

/* Shared utility spacing */

.alert {
  padding: 24px;
}

/* ==========================================================================
   9. Responsive and Device-specific Adjustments
   ========================================================================== */
.text-success,
.text-warning,
.text-info,
.text-danger,
.search-list-description,
.search-list-description a,
.search-list-description a span {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  text-wrap: auto;
  text-decoration: none;
}

table .text-danger {
  display: inline-block;
}

.text-warning,
.text-success {
  flex-direction: row-reverse;
  justify-content: center;
}

a[analytics-category] span {
  display: flex;
  gap: 8px;
  align-items: center;
}

#header,
bpc-global-required-marker .pull-right,
.bpc-page-dashboard .service-name .pull-right,
.uib-datepicker-popup .btn-group.pull-left,
.uib-datepicker-popup button.pull-right {
  float: none !important;
}

bpc-global-required-marker .pull-right .text-danger,
.checkbox label .bpc-required {
  display: inline-block !important;
}

main
  .btn-default:not(.input-group button):not(span):hover
  .bpcIcon-home::before,
main
  .btn-default:not(.input-group button):not(span):not(
    st-pagination .btn.btn-default
  ):hover
  .glyphicon::before,
main .btn-default:not(.input-group button):not(span):hover .fa::before {
  color: var(--button-primary-hover) !important;
  transition: 0.3s ease all !important;
}

.form-group bpc-field-help .glyphicon-info-sign {
  margin-top: -8px;
}

form .input-group-btn .btn.btn-default .bpcIcon-home::before,
form .input-group-btn .btn.btn-default .glyphicon::before,
form .input-group-btn .btn.btn-default .fa::before,
st-pagination .btn.btn-default .glyphicon::before,
form .input-group-btn .btn.btn-default:hover .bpcIcon-home::before,
form .input-group-btn .btn.btn-default:hover .glyphicon::before,
form .input-group-btn .btn.btn-default:hover .fa::before,
st-pagination .btn.btn-default:hover .glyphicon::before {
  color: var(--dark-grey-headings) !important;
}

.panel .panel-body .panel-body .table-responsive h3 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 18px !important;
}

[st-safe-src="meterReadingDetails"] tfoot td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.panel .panel-body .row > bpc-division-icon {
  order: 0;
  width: auto;
}

.panel .panel-body .row > .panel-title {
  order: 1;
}

bpc-profile-selection .panel .panel-heading .row > .panel-title {
  order: unset;
}

bpc-address-output {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

bpc-contract-details,
bpc-product-properties > dl,
bpc-product-tariff-table {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-body bpc-product-properties dl,
.panel-body bpc-product-properties dt,
.panel-body bpc-product-properties dd,
bpc-product-tariff-table dl,
bpc-product-tariff-table .table,
bpc-budget-billing-input > div > dl,
st-pagination .bpc-field-error {
  margin: 0 !important;
}

.qmr-filter-row,
.qmr-filter-row .form-group {
  gap: 24px;
  margin: 0;
}

bpc-budget-billing-input,
.panel.panel-contract-account .description small:not(:first-of-type):before {
  display: block;
}

bpc-budget-billing-input tfoot {
  border-bottom: 1px solid var(--border-color);
}

[bpc-i18n="b2c.budgetbilling.changeFromInfo"] .text-info,
.panel-info {
  padding: 24px;
  color: var(--text-color);
  background: var(--tile-bg-color);
  border: 1px solid var(--secondary-color);
  border-radius: 4px;
}

[bpc-i18n="b2c.budgetbilling.changeFromInfo"] .text-info .glyphicon-info-sign,
.panel-info .glyphicon-info-sign {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 16px;
  background: var(--surface-info);
  border-radius: 50%;
}

[bpc-i18n="b2c.budgetbilling.changeFromInfo"]
  .text-info
  .glyphicon-info-sign:before,
.panel-info .glyphicon-info-sign:before {
  width: 16px;
  color: var(--secondary-color);
}

/* Dark-mode: secondary-color (#0c669e) is near-invisible on surface-info
   (#004d71) — use text-color token for sufficient contrast */
.dark-mode .panel-info .glyphicon-info-sign:before {
  font-size: inherit;
  color: var(--text-color);
}

/* panel-info Bootstrap-panel layout: icon + title must sit on one line.
   .panel-heading h3 inherits display:flex but no align-items, so items
   stretch by default; the icon also needs flex-shrink:0 to stay circular. */
.panel-info .panel-heading h3 {
  align-items: center;
}

.panel-info .panel-heading .glyphicon-info-sign {
  flex-shrink: 0;
  min-width: 24px;
  max-width: 24px;
}

[bpc-i18n="b2c.budgetbilling.changeFromInfo"] strong,
.bpc-noLink .text-warning,
.qmr-filter-row .glyphicon-info-sign {
  color: var(--dark-grey-headings);
}

.panel-body bpc-budget-billing bpc-budget-billing-input dl dt,
.panel-body bpc-budget-billing bpc-budget-billing-input form > div {
  padding: 24px;
  margin: 0 !important;
  background: var(--tile-bg-color);
}

.panel-body bpc-budget-billing bpc-budget-billing-input dl dt {
  padding-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.panel-body bpc-budget-billing bpc-budget-billing-input form > div {
  border-radius: 0 0 8px 8px;
}

.panel-body st-pagination nav form .btn-group,
.panel.panel-product > div > .panel-body .row {
  margin-bottom: 0 !important;
}

.caret,
.cdc-menu-trigger__arrow-icon {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 0;
}

.caret::before,
.cdc-menu-trigger__arrow-icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: currentcolor;
  -webkit-mask-image: url("./assets/Icon-arrow-down.svg");
  mask-image: url("./assets/Icon-arrow-down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform: translate(-50%, -50%);
}

.navbar a[aria-expanded="true"] .caret::before {
  transform: translate(-50%, -50%) rotate(180deg);
}

.panel.panel-info .panel-heading,
.panel.panel-info .panel-body {
  padding: 0;
  background: var(--tile-bg-color);
  border: 0;
}

.panel-info .panel-heading .panel-title {
  display: flex;
  margin-bottom: 24px;
  font-size: 20px !important;
  color: var(--dark-grey-headings);
}

.panel-contract-account .list-group .list-group-item bpc-division-icon {
  display: flex;
  order: 0;
  padding: 0;
  margin-right: 16px;
}

.panel-contract-account
  .list-group
  [bpc-i18n="common.contract.header"]
  > small {
  font-weight: 400;
  color: var(--text-color);
}

.panel-info .panel-body ul {
  margin-left: 24px;
}

form[name="billaddressForm"] > div .well h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 24px;
}

form[name="billaddressForm"] > div .well dl > div {
  display: flex;
  flex-direction: column;
  align-items: start;
}

form[name="billaddressForm"] > div .well dl > div > dt,
form[name="billaddressForm"] > div .well dl > div > dd {
  width: unset;
  padding: 0;
  margin: 0 !important;
  font-weight: 400;
}

.panel-contract-account .list-group [bpc-i18n="common.contract.header"] > span,
form[name="billaddressForm"] > div .well dl > div > dt {
  font-weight: 600;
}

.qmr-filter-row .glyphicon-info-sign:before {
  width: 16px;
  height: 16px;
}

/* Alert and validation refinements */
.alert.alert-info:not(.growl-item) {
  margin: 16px 0;
  font-size: 16px !important;
  font-weight: 400;
  color: var(--text-color);
  background: var(--tile-bg-color);
  border-color: var(--primary-main);
  border-radius: 4px;
}

.alert.alert-info font {
  font-size: 16px !important;
  font-weight: 400;
  color: var(--text-color);
}

.alert.alert-info h4 font,
.alert.alert-info h4 {
  margin-bottom: 16px;
  font-size: 20px !important;
  font-weight: 700;
  color: var(--dark-grey-headings);
}

quick-meter-reading-filter-note {
  display: block;
  margin-bottom: 24px;
}

.quick-meter-reading.main-content .form-group > .hidden-print button {
  margin: 12px 12px 24px;
}

.qmr-implausible .modal-footer .btn + .btn {
  width: 100%;
  margin: 8px 0;
}

.text-warning {
  color: var(--primary-color);
}

bpc-profile-selection .panel-body ng-transclude {
  gap: 0;
}

a.bpcIcon-checkbox-unchecked {
  margin-top: -2px;
  font-size: 24px;
}

@media (max-width: 1024px) {
  div[uib-accordion-group] > div[role="tab"] .panel-title a,
  form[name="billaddressForm"] > div .well h3,
  a.bpcIcon-checkbox-unchecked,
  a.bpcIcon-checkbox-checked {
    font-size: 22px;
  }
}

bpc-field-help .glyphicon:before,
bpc-field-help .glyphicon {
  width: 18px;
}

.btn.btn-primary > span span:has(.bpcIcon-next) {
  flex-direction: row;
}

.panel.panel-product > .panel-heading {
  padding: 24px;
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-grey-headings);
  background: var(--input-bg);
  border: none !important;
  border-radius: 4px;
}

.panel.panel-product > .panel-heading a {
  order: 2;
  color: var(--dark-grey-headings) !important;
}

.panel .panel-product {
  border: 1px solid var(--border-color) !important;
  border-radius: 4px;
}

.panel.panel-product > div > .panel-body {
  background: var(--white-color) !important;
  border-radius: 0 0 8px 8px;
}

.profile-accordion > .panel-collapse > .panel-body {
  padding: 0;
  padding-top: 24px;
}

.profile-accordion > .panel-heading .panel-title span {
  font-size: 28px !important;
}

div[uib-accordion-group].profile-accordion {
  border-bottom: 0 solid transparent !important;
}

bpc-process-indicator > .col-sm-12 {
  padding: 15px !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
.form-control[disabled]:hover,
.form-control[readonly]:hover,
fieldset[disabled] .form-control:hover,
.uib-datepicker-popup table button:hover {
  background: var(--border-color);
}

button[type="submit"] > span span {
  display: flex;
  gap: 8px;
}

.address-input .row {
  display: grid !important;
}

.billaddress > div > form > div ng-transclude > .btn.btn-primary,
.billaddress > div > form > div ng-transclude > .btn.btn-default {
  display: inline-flex;
  margin-top: 0;
  margin-right: 16px;
  margin-bottom: 0;
}

.radio input[type="radio"] {
  position: relative;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-color: var(--white-color);
  border: 1px solid var(--border-color);
  /* Outer circle */
  border-radius: 50%;
}

.radio input[type="radio"]::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  content: "";
  background-color: var(--primary-main);
  /* Dot color */
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease-in-out;
}

.radio input[type="radio"]:checked::before,
.checkbox input[type="checkbox"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

.radio input[type="radio"]:hover,
.checkbox input[type="checkbox"]:hover {
  border-color: var(--primary-light);
}

.checkbox input[type="checkbox"] {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-color: var(--white-color);
  border: 1px solid var(--border-color);
  /* Outer box */
  border-radius: 4px;
  transition:
    border-color 0.2s ease-in-out,
    background 0.2s ease-in-out;
}

.checkbox input[type="checkbox"]::before {
  position: absolute;
  top: 50%;
  left: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 8px;
  content: "";
  background-image: url('data:image/svg+xml,<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.671875 3.40104L3.2433 5.73437L8.67188 0.734375" stroke="%23870D87" stroke-width="2"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease-in-out;
}

bpc-collapse .row,
bpc-budget-billing > div > dl:first-child {
  margin-top: 0 !important;
}

td > span {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

bpc-wizard-buttons,
.bpc-page-billaddress .panel-contract-account .dl-horizontal {
  display: flex;
  gap: 16px;
}

.panel-group > div {
  overflow: hidden;
  border-radius: 4px;
}

.bpc-field-error {
  display: block;
  margin: 8px 0;
}

/* Tablet-specific controls */
bpc-date-input .input-group-btn > .btn {
  margin-right: -2px;
}

bpc-date-input input.form-control {
  border-radius: 0 4px 4px 0 !important;
}

@media (max-width: 1200px) {
  /* Tablet layout overrides */
  .page > .row > .col-lg-2,
  .nav.navbar-nav.navbar-right,
  .navbar-toggle .icon-bar,
  .portal-name,
  .tabset ul:before,
  .panel.panel-contract-account > .panel-heading .text-muted:before {
    display: none;
  }

  .page > .row > .main-content,
  bpc-global-required-marker {
    width: 100vw !important;
  }

  .navbar-toggle {
    display: flex;
    align-items: center;
    order: 3;
    padding: 0;
    margin: 0;
    border: none;
  }

  .glyphicon-menu-hamburger:before,
  .glyphicon-user:before {
    display: inline-block;
    width: 24px;
    height: 24px;
    content: "";
    background-color: currentcolor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .glyphicon-menu-hamburger:before {
    -webkit-mask-image: url("./assets/Icon-hamburger.svg");
    mask-image: url("./assets/Icon-hamburger.svg");
  }

  .glyphicon-user:before {
    -webkit-mask-image: url("./assets/Icon-user.svg");
    mask-image: url("./assets/Icon-user.svg");
  }

  nav.navbar-fixed-top.navbar,
  .nav-container {
    padding: 0;
  }

  .navbar {
    min-height: 0;
  }

  .navbar-header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: end;
    width: 100%;
    padding: 17px 1px;
    margin: 0;
    border: none !important;
  }

  .navbar-nav {
    margin: 0;
  }

  .navbar-fixed-top {
    margin: 0;
    background: var(--white-color);
    border: none !important;
  }

  .dark-mode .navbar-fixed-top,
  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    background: transparent;
  }

  .navbar-header > #logo {
    order: 0;
    width: unset;
    margin: 0;
    margin-right: auto;
  }

  .navbar-header:before {
    order: 1;
  }

  #sideMenu,
  .list-group-item,
  .panel.panel-product > .panel-heading,
  .panel-body bpc-budget-billing bpc-budget-billing-input dl dt,
  .panel-body bpc-budget-billing bpc-budget-billing-input form > div,
  [bpc-i18n="b2c.budgetbilling.changeFromInfo"] .text-info,
  .panel-info,
  .alert,
  form[name="billaddressForm"] > div .well,
  .table-responsive,
  .wrapper-bank-details > div,
  .addresses,
  .panel-body ng-transclude > div,
  .tab-pane,
  .panel.panel-contract > .panel-heading,
  .panel.panel-default > .panel-heading,
  .panel.panel-contract-account > .panel-heading,
  .panel-body,
  .well .well .slideToggle,
  .well .slideToggle,
  .well > .clickable,
  .page > .row > .col-lg-2 {
    padding: 16px;
  }

  #teaser-area figcaption {
    padding-inline: 16px;
    padding-bottom: 16px;
  }

  #teaser-area,
  #qmr-result-table,
  .billaddress > div > form > div ng-transclude > .btn.btn-primary,
  .billaddress > div > form > div ng-transclude > .btn.btn-default {
    margin-top: 16px;
  }

  .page-header h1 {
    padding-inline: 16px;
    font-size: 28px;
  }

  .page > .row > .main-content > div > .container > .row > main .main-content,
  bpc-global-required-marker,
  .page-header h1 span,
  .page-header p[bpc-i18n-eval="header.text"],
  #teaser-area,
  footer > div {
    max-width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #teaser-area .panel-group {
    max-width: 100%;
  }

  .panel-body > *,
  .panel-body > form > *,
  .form-group,
  quick-meter-reading-filter-note,
  bpc-profile-cockpit form .row > div,
  .dateinput {
    margin-bottom: 16px;
  }

  .panel-body > bpc-collapse:last-of-type .row {
    margin-top: 16px !important;
  }

  [ng-if="filter.options.showDivision"] label {
    display: block;
  }

  .table-responsive {
    border: none;
  }

  .qmr-filter-row {
    grid-template-columns: 1fr;
  }

  [bpc-i18n="b2c.budgetbilling.changeFromInfo"] .text-info .glyphicon-info-sign,
  .panel-info .glyphicon-info-sign {
    margin-right: 8px;
  }

  .profile-accordion > .panel-heading .panel-title span {
    font-size: 24px !important;
  }

  .btn {
    text-align: left;
    white-space: wrap !important;
  }

  .tab-content .tab-pane {
    padding: 0;
    margin-top: -4px;
  }

  .tabset ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  #footer ul {
    display: flex;
  }

  .well .col-sm-4 {
    width: 100%;
  }

  bpc-paginator > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  bpc-paginator st-pagination.center-block {
    margin-right: 0;
    margin-bottom: 8px;
    background: transparent;
  }

  bpc-paginator #firstPageButton.btn-first-page,
  bpc-paginator #lastPageButton {
    display: none !important;
  }

  #prevPageButton {
    border-radius: 4px 0 0 4px !important;
  }

  #nextPageButton {
    border-right: 1px solid var(--border-color) !important;
    border-radius: 0 4px 4px 0 !important;
  }
}

/* ==========================================================================
   10. Dashboard, Profile Menu, and Footer Variants
   ========================================================================== */

/* Dashboard tiles */
.bpc-page-dashboard .tile.tile-large,
.tile.download,
.tile {
  width: 100% !important;
  height: auto !important;
  padding: 24px !important;
  margin: 0 !important;
  background: var(--tile-bg-color);
  border-radius: 4px;
  box-shadow: none;
}

.bpc-page-dashboard .tile.tile-large {
  display: flex;
  flex-direction: column;
}

.tile.download {
  grid-row: 2 / span 2;
}

.bpc-page-dashboard .panel-body > ng-transclude {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.bpc-page-dashboard .panel-body .tile h3 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 20px;
  font-style: normal;
}

.bpc-page-dashboard .content bpc-division-icon {
  margin-right: 9px;
  margin-bottom: 2px;
}

.bpc-page-dashboard .number-title {
  font-weight: 700;
}

.bpc-page-dashboard .content .number-value {
  display: flex;
  gap: 8px;
  width: 100%;
  font-size: 36px !important;
  font-weight: 700;
  line-height: 48px;
  color: var(--primary-color);
}

.bpc-page-dashboard .dark-mode .content .number-value {
  color: var(--dashboard-number-value);
}

.bpc-page-dashboard .service-name {
  display: flex;
  width: 100%;
  padding: 0 !important;
  margin-top: auto !important;
}

.bpc-page-dashboard .link a {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--secondary-color);
}

.bpc-page-dashboard .consumptionhistory {
  display: block;
  color: var(--white-color);
  background: var(--consumption-gradient);
}

.bpc-page-dashboard .consumptionhistory > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 43px 24px !important;
}

.bpc-page-dashboard .consumptionhistory .glyphicon-stats,
.bpc-page-dashboard .contact .glyphicon-earphone {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  color: var(--dark-grey-headings);
  background: var(--nav-bg-color);
  border-radius: 50%;
}

.glyphicon-stats::before {
  display: inline-block;
  width: 24px;
  height: 24px;
  content: "";
  background-color: currentcolor;
  -webkit-mask-image: url("./assets/Icon-graph.svg");
  mask-image: url("./assets/Icon-graph.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.bpc-page-dashboard .panel-contract-account .panel-body .contact {
  display: block;
  grid-column: 2;
  color: var(--white-color);
  background: var(--contact-gradient);
  /* grid-row: 3; */
}

.bpc-page-dashboard .contact > div {
  padding: 43px 24px !important;
}

.glyphicon-earphone::before {
  display: inline-block;
  width: 24px;
  height: 24px;
  content: "";
  background-color: currentcolor;
  -webkit-mask-image: url("./assets/Icon-mobile.svg");
  mask-image: url("./assets/Icon-phone.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media (max-width: 1200px) {
  .bpc-page-dashboard .tile.tile-large,
  .bpc-page-dashboard .tile.download,
  .bpc-page-dashboard .tile {
    padding: 16px !important;
    margin: 0 !important;
  }

  .bpc-page-dashboard .tile {
    display: flex;
    flex-direction: column;
  }

  .bpc-page-dashboard .tile.download {
    grid-row: auto !important;
    /* remove row span */
  }

  .bpc-page-dashboard .panel-contract-account .panel-body,
  .bpc-page-dashboard .panel-contract-account .panel-body > div,
  .bpc-page-dashboard .consumptionhistory > div,
  .bpc-page-dashboard .contact > div {
    padding: 16px !important;
  }

  .bpc-page-dashboard .panel-body > ng-transclude {
    grid-template-rows: auto;
    grid-template-columns: 1fr !important;
  }

  .bpc-page-dashboard .panel-contract-account .panel-body .contact {
    grid-row: auto !important;
    grid-column: auto !important;
  }

  .bpc-page-dashboard .content {
    margin-bottom: 16px !important;
  }

  .bpc-page-dashboard .content .number-value {
    font-size: 28px !important;
  }

  .bpc-page-dashboard .link {
    margin-bottom: 8px;
  }
}

.bpc-page-dashboard .page-header h1 {
  height: 271px;
  background: var(--main-page-secondary-gradient), var(--primary-gradient);
}

.bpc-page-dashboard .page-header {
  margin-bottom: -100px !important;
}

.bpc-page-dashboard .dashboard div.salutation h2 {
  display: none;
  margin-left: 0 !important;
  color: var(--white-color);
}

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--input-bg) !important;
}

.table td {
  font-size: 16px;
  font-weight: 400;
  vertical-align: middle !important;
  color: var(--text-color);
  background-color: var(--tile-bg-color);
}

.dark-mode .input-group .form-control,
.dark-mode input.form-control,
.dark-mode table td .input-group span.input-group-addon,
.dark-mode #sideMenu > li > a:hover > span:first-child,
.dark-mode #sideMenu > li > div:hover > span:first-child,
.dark-mode #sideMenu > li > a[aria-expanded="true"]:hover > span:first-child,
.dark-mode #sideMenu > li > div[aria-expanded="true"]:hover > span:first-child,
.dark-mode .portal-name,
.dark-mode bpc-phone-input .input-group-btn:first-child > .btn,
.dark-mode .input-group-addon,
.dark-mode #footer ul li a {
  color: var(--panel-heading-text);
}

.dark-mode main .btn-default:not(.input-group button):not(span),
.dark-mode .btn-secondary {
  color: var(--link-accent-dark) !important;
  border-color: var(--link-accent-dark);
}

.dark-mode main .btn-default:not(.input-group button):not(span):hover,
.dark-mode .btn-secondary:hover {
  color: var(--button-primary-hover) !important;
  border-color: var(--button-primary-hover) !important;
}

.dark-mode a,
.dark-mode #teaser-area .service-container a,
.dark-mode #sideMenu > li > a > span:first-child,
.dark-mode #sideMenu > li > div > span:first-child,
.dark-mode .text-primary,
.dark-mode .text-info,
.dark-mode .growl-container > .growl-item.alert-success,
.dark-mode .growl-container > .growl-item.alert-info {
  color: var(--link-accent-dark);
}

.dark-mode .growl-container > .growl-item.alert-warning {
  color: var(--toast-warning-dark);
}

.dark-mode .navbar-default .navbar-nav a[aria-expanded="true"],
.dark-mode .navbar-default .navbar-nav div[aria-expanded="true"] {
  background: var(--button-primary);
}

.dark-mode .form-control {
  color: var(--white-color);
  background-color: var(--tile-bg-color);
  border-color: var(--border-color);
}

/* Profile menu */

.cdc-menu,
.cdc-menu button {
  height: 60px !important;
}

.cdc-menu-trigger__arrow-icon {
  margin-left: auto !important;
  font-size: 0 !important;
}

.cdc-menu button > span > span {
  gap: 16px !important;
}

.cdc-menu button:hover {
  color: var(--text-color);
  background: var(--surface-info);
}

.cdc-menu button[aria-expanded="true"] {
  color: var(--white-color);
  background: var(--secondary-color) !important;
}

.cdc-menu button[aria-expanded="true"] .cdc-menu-trigger__user-icon path,
.dark-mode .cdc-menu button .cdc-menu-trigger__user-icon svg path {
  fill: var(--white-color) !important;
}

.cdc-menu.logged-in
  .loading-indicator-wrapper__content
  .cdc-menu-trigger__content {
  align-items: start;
}

.menu-container {
  display: block !important;
  min-width: 308px;
  border-radius: 4px;
  box-shadow: var(--menu-shadow);
}

hr {
  padding: 8px 12px;
}

.menu-container .menu-item {
  padding: 12px 16px !important;
  font-size: 18px;
  font-weight: 600;
}

svg text {
  font-family: "Segoe UI", sans-serif;
}

.cdc-menu.logged-in .loading-indicator-wrapper__content {
  flex-wrap: nowrap !important;
  width: unset;
}

.panel.panel-contract-account,
.panel.panel-contract-account .panel {
  overflow: unset;
}

.relocation bpc-premise-header .panel.panel-default.open > .panel-heading,
.panel.panel-contract-account.active > .panel-heading {
  border-radius: 4px 4px 0 0;
}

.dark-mode .navbar-default .navbar-nav a:hover,
.dark-mode .navbar-default .navbar-nav a[aria-expanded="true"],
.dark-mode .navbar-default .navbar-nav div[aria-expanded="true"],
.dark-mode .cdc-menu button:hover,
.dark-mode .menu-container .menu-item:hover,
.dark-mode .submenu .menu-item:hover {
  background: var(--button-primary) !important;
}

/* Active nav link: --secondary-color is unreadable on dark backgrounds */
.dark-mode .sidebar.navbar .dropdown.active li.active a {
  color: var(--link-accent-dark) !important;
}

.dark-mode .teag-logo.negative-outline {
  display: block;
  width: 100px;
  object-fit: cover;
}

.navbar-brand img {
  background: none;
}

.dark-mode .cdc-menu button {
  color: var(--white-color);
  background: transparent;
}

.dark-mode .menu-container .menu,
.dark-mode .submenu {
  background: var(--nav-bg-color);
  box-shadow: var(--menu-shadow);
}

.dark-mode .color-mode__icon svg path,
.dark-mode .logout-entry__icon svg path {
  fill: var(--white-color);
}

.breadcrumb li:last-of-type > span:first-child,
.uib-datepicker-popup table tbody tr td:not(:last-of-type) button {
  border-right: 1px solid var(--border-color) !important;
}

.dark-mode
  main
  st-pagination
  .btn-default:not(.input-group button):not(span):hover,
.dark-mode main .bpc-pagination-template .form-group select.form-control:hover {
  color: var(--white-color) !important;
  background-color: var(--button-primary-hover) !important;
}

.dark-mode .tooltip .tooltip-inner::before {
  border-bottom: 12px solid var(--border-color);
}

.dark-mode .tooltip .tooltip-inner::after {
  border-bottom: 11px solid var(--tile-bg-color);
}

.dark-mode .popover,
.dark-mode .product.E-FIX .panel-body {
  background: var(--tile-bg-color) !important;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: 1px solid var(--border-color);
}

.dark-mode .panel.panel-contract-account > .panel-heading .text-muted:before {
  background: var(--panel-heading-text) !important;
}

input:-internal-autofill-selected {
  color: var(--text-color) !important;
  background-color: var(--input-bg) !important;
}

.dark-mode .popover.top > .arrow:after {
  border-top-color: var(--tile-bg-color) !important;
}

.popover.top > .arrow:before {
  bottom: -11px;
  margin-left: -11px;
  content: " ";
  border-width: 11px;
  border-top-color: var(--border-color) !important;
}

.popover > .arrow,
.popover > .arrow:before {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.nav > li > a:focus,
.btn-default:focus,
.dark-mode .menu-container .menu-item[data-focused],
.dark-mode .menu-container .submenu .menu-item[data-focused] {
  background: transparent;
}

.dark-mode #loading-bar-spinner,
.dark-mode #splash-wrapper {
  background: var(--loading-overlay-gradient);
}

.cdc-menu button {
  height: unset;
  padding: 10px 14px !important;
  border: none;
  border-radius: 8px;
}

.cdc-menu {
  height: unset;
}

@media (max-width: 1200px) {
  .panel-body .list-group > span {
    gap: 8px;
    justify-content: start;
  }

  .panel-body .list-group > span bpc-division-icon {
    margin-left: -8px;
  }

  .panel-body .list-group > span > span {
    margin: 0;
    margin-bottom: 8px;
  }
}

.breadcrumb li > span.disabled {
  cursor: not-allowed;
}

.bpc-page-customer
  table[st-table="businesspartner.customerContacts"]
  thead
  td[colspan="3"] {
  font-size: 16px;
  border-left: none;
}

@media (max-width: 768px) {
  #teaser-area {
    min-width: 100%;
  }

  bpc-budget-billing-input form > div {
    overflow: scroll;
  }
}

#footer .col-xs-12 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#footer .col-xs-12 .navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#footer ul li a {
  font-size: 12px;
  font-weight: bold;
  color: var(--text-color);
  text-decoration: none;
}

#footer ul {
  width: 100%;
  padding: 30px 0;
  list-style-type: none;
  border-top: 1px solid var(--footer-border-color);
}

@media (max-width: 1440px) {
  #footer .col-xs-12 .navbar-nav {
    gap: 12px 4px;
  }
}

/* Dashboard tile-static variant */

.panel-group.tile-static {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.bpc-page-dashboard .tile-static .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px 24px !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--white-color);
  background: var(--primary-color);
  border-radius: 8px;
}

.bpc-page-dashboard .tile-static .tile:hover {
  box-shadow: none;
}

.bpc-page-dashboard .tile-static .tile-electricity .tile,
.bpc-page-dashboard .tile-static .tile-gas .tile,
.uib-datepicker-popup table tbody button.active,
.uib-datepicker-popup table tbody button.active:hover {
  background: var(--primary-main);
}

.bpc-page-dashboard .tile-static .tile-contact-person {
  grid-column: span 2;
  align-items: start;
  order: 10;
  padding: 28px 0 0 !important;
  overflow: hidden;
  color: var(--dark-grey-headings);
  background: var(--secondary-color);
}

.bpc-page-dashboard .tile-static .tile.tile-contact-person img {
  width: 108px;
  margin: 0 auto 28px;
}

.bpc-page-dashboard .tile-static .tile.tile-contact-person > span,
.bpc-page-dashboard .tile-static .tile.tile-contact-person > div {
  display: block;
  width: 100%;
  padding-inline: 24px;
  text-align: left;
  background: var(--nav-bg-color);
}

.bpc-page-dashboard
  .tile-static
  .tile.tile-contact-person
  > span[bpc-i18n="b2b.dashboard.tile.contactperson.text"] {
  padding-top: 24px;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.bpc-page-dashboard
  .tile-static
  .tile.tile-contact-person
  > span[bpc-i18n="b2b.dashboard.tile.contactperson.name"] {
  padding-bottom: 24px;
  font-size: 20px;
  font-weight: 400;
  line-height: 27px;
}

.bpc-page-dashboard .tile-static .tile.tile-contact-person > div {
  display: flex;
  gap: 24px;
  padding-bottom: 24px;
}

.bpc-page-dashboard .tile-static .tile.tile-contact-person > div a {
  padding-bottom: 8px;
  font-size: 18px;
  line-height: 24px;
  cursor: pointer !important;
  border-bottom: 2px solid var(--button-primary);
}

.bpc-page-dashboard .tile-static .tile.tile-contact-person > div a:hover {
  text-decoration: none;
  border-bottom: 2px solid var(--button-primary-hover);
}

.bpc-page-dashboard .tile-static .glyphicon,
.bpc-page-dashboard .tile-static .bpcIcon-electricity,
.bpc-page-dashboard .tile-static .bpcIcon-gas {
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  color: var(--dark-grey-headings);
  background: var(--nav-bg-color);
  border-radius: 100%;
}

.bpc-page-dashboard .tile-static .bpcIcon-electricity,
.bpc-page-dashboard .tile-static .bpcIcon-gas,
.panel-heading .curser-help .fa-file {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1024px) {
  .bpc-page-dashboard .tile-static .tile,
  .bpc-page-dashboard .tile-static .tile-electricity,
  .bpc-page-dashboard .tile-static .tile-gas {
    grid-column: span 2;
  }
}

.panel.panel-contract-account .description,
.bpc-page-contract [contract-account] .description {
  display: flex;
  flex-flow: row wrap;
  margin-right: 24px;
}

.panel.panel-contract-account .description small,
.bpc-page-contract [contract-account] .description small {
  margin-top: 8px;
  font-size: 14px;
}

.uib-datepicker-popup {
  min-width: 355px;
  padding: 16px;
}

.uib-datepicker-popup .uib-button-bar button {
  padding: 12px 16px !important;
  font-weight: 700 !important;
  background: none;
  border-radius: 2px !important;
}

.uib-datepicker-popup .uib-button-bar .uib-clear {
  margin-inline: 12px;
  font-size: 18px !important;
  color: var(--button-disabled) !important;
  border: 1px solid var(--button-disabled);
}

.dark-mode .uib-datepicker-popup .uib-button-bar .uib-clear {
  color: var(--input-text) !important;
  border: 1px solid var(--input-text);
}

.uib-datepicker-popup .uib-button-bar .btn-info,
.uib-datepicker-popup .uib-button-bar .btn-success {
  font-size: 18px !important;
  color: var(--button-primary) !important;
  border: 1px solid var(--button-primary);
}

.uib-button-bar {
  display: flex;
  gap: 0;
  width: 100%;
  padding: 16px 0 0;
}

.uib-datepicker-popup table thead tr th {
  padding-bottom: 8px !important;
}

.uib-datepicker-popup table thead tr:first-of-type th .uib-left {
  justify-content: start;
  transform: translateY(11px);
}

/* Fix focus ring overflow caused by translateY — use box-shadow instead of outline */
.uib-datepicker-popup table thead button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color) !important;
}

/* Fix hover visibility: use CI color with white icon */
.uib-datepicker-popup table thead button:hover,
.uib-datepicker-popup table thead button:focus-visible {
  position: relative;
  z-index: 1;
  color: var(--white-color);
  background: var(--primary-main) !important;
}

.uib-datepicker-popup table button {
  display: block !important;
}

.uib-datepicker-popup table thead .uib-right {
  justify-content: end;
}

.uib-datepicker-popup table thead .uib-title {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
  text-align: center;
}

.uib-datepicker-popup table tbody {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 4px !important;
}

.uib-datepicker-popup table tbody button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  font-size: 16px;
  color: var(--text-color);
  text-align: center;
  border: none;
  border-radius: 0;
}

.uib-datepicker-popup table tbody button:hover,
.uib-datepicker-popup table tbody button:focus-visible {
  position: relative;
  z-index: 1;
}

.uib-datepicker-popup table tbody .btn[disabled] {
  color: var(--text-disabled);
  background: var(--body-background);
  opacity: 1;
}

.uib-datepicker-popup table tbody tr {
  border-color: var(--border-color) !important;
  border-style: solid !important;
  border-width: 1px !important;
}

.uib-datepicker-popup table tr,
.uib-datepicker-popup table thead tr,
.uib-datepicker-popup button,
.uib-datepicker-popup table thead button,
.uib-datepicker-popup.dropdown-menu,
.dropdown-menu,
.boxes.products-list .box {
  background: var(--table-header-bg);
}

.dark-mode .uib-datepicker-popup .uib-button-bar .btn-info,
.dark-mode .uib-datepicker-popup .uib-button-bar .btn-success {
  color: var(--link-accent-dark) !important;
  border: 1px solid var(--link-accent-dark);
}

/* text-success and text-danger are too dark for dark backgrounds —
   override with lighter variants that meet contrast requirements */
.dark-mode .text-success,
.dark-mode .text-success * {
  color: var(--text-success-dark) !important;
}

.dark-mode .text-danger,
.dark-mode .text-danger * {
  color: var(--text-danger-dark) !important;
}

/* Remaining Bootstrap text utilities — all too dark on dark backgrounds */
.dark-mode .text-muted {
  color: var(--breadcrumb-dark-text);
}

/* .text-primary and .text-info share the same dark-mode color as the
   active sidebar link — consolidated into one rule */

.dark-mode .text-warning {
  color: var(--text-warning-dark) !important;
}

@media (max-width: 1024px) {
  .menu-container[data-id="cdc-menu"] {
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-shadow: none;
  }

  .cdc-menu.logged-in
    .loading-indicator-wrapper__content
    .cdc-menu-trigger__content,
  .cdc-menu.logged-in
    .loading-indicator-wrapper__content
    .cdc-menu-trigger__arrow-icon {
    display: none !important;
  }

  .cdc-menu,
  .cdc-menu button {
    height: 48px !important;
  }

  .cdc-menu.logged-in button .loading-indicator-wrapper__content {
    width: min-content;
    min-width: min-content;
  }

  .navbar-header span[bpc-i18n="b2c.postbox.menu.icon"] {
    display: flex;
  }

  #header button[aria-expanded="true"] {
    color: var(--white-color);
    background: var(--secondary-color);
  }

  [bpc-include="partials.template.header.sidebar"] {
    position: absolute;
    z-index: 2001;
    width: 100%;
    background: var(--nav-bg-color);
  }
}
@media (max-width: 1024px) {
  #header .navbar-toggle:not(.cos3-cdc-menu) {
    padding: 12px;
  }
}
@media (max-width: 1024px) {
  .navbar-header {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: end;
    width: 100%;
    padding: 8px 0;
    margin: 0;
    border: none !important;
  }
}
@media (max-width: 1024px) {
  .panel > .panel-heading .row {
    position: relative;
    flex-direction: column;
    align-items: start;
    justify-content: start;
  }

  .panel > .panel-heading .row .description bpc-address-output,
  .bpc-page-contract
    [contract-account]
    > .panel-heading
    .row
    .description
    bpc-address-output {
    max-width: 90%;
  }

  .panel > .panel-heading .row .indicator {
    position: absolute;
    top: 0%;
    right: 0;
  }

  .panel > .panel-heading .row > .hidden-xs {
    display: block !important;
  }

  .wrapper-bank-details dd {
    margin-bottom: 8px;
    margin-left: 0 !important;
  }
}

/* Vertragsübersicht exports can miss .panel-contract-account on contract panels. */
.bpc-page-contract
  [contract-account]
  > .panel-heading
  .contractaccount-header-title,
.bpc-page-contract [contract-account] > .panel-heading .description,
.bpc-page-contract
  [contract-account]
  > .panel-heading
  .description
  bpc-address-output {
  font-size: 18px;
  line-height: 24px;
}

.bpc-page-contract
  [contract-account]
  > .panel-heading
  .contractaccount-header-title
  h2 {
  font-size: inherit;
  line-height: inherit;
}

.bpc-page-contract [contract-account] > .panel-heading .description small,
.bpc-page-contract [contract-account] > .panel-heading .text-muted {
  font-size: 16px;
  line-height: 24px;
}

.clickable.bpc-noLink.checkable {
  position: relative;
  width: 16px;
  height: 16px;
  margin-right: 12px;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 2px;
}

.clickable.bpc-noLink.checkable::before {
  position: absolute;
  inset: 0;
  /* center */
  width: 10px;
  height: 8px;
  /* fill the parent */
  margin: auto;
  content: "";
  background-image: url('data:image/svg+xml,<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.671875 3.40104L3.2433 5.73437L8.67188 0.734375" stroke="%23870D87" stroke-width="2"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: scale(0);
  transition: transform 0.2s ease-in-out;
}

.clickable.bpc-noLink.checkable.bpcIcon-checkbox-checked::before {
  content: "";
  transform: scale(1);
}

.wrapper-bank-details.flex {
  flex-direction: column;
}

.bpc-page-dashboard .consumptionhistory,
.bpc-page-dashboard .panel-contract-account .panel-body .contact {
  font-size: 18px;
  font-weight: 700;
  line-height: 100%;
  cursor: pointer !important;
}

.tile:hover {
  box-shadow: 4px 1px 11px var(--border-color) !important;
}

.bpc-page-dashboard .tile.tile-large.tile-disable > *,
.bpc-page-dashboard .tile.tile-large.tile-disable {
  color: var(--text-disabled);
  background: var(--tile-bg-color-disabled);
}

.panel-heading .curser-help:has(.fa-at) .fa-file::before {
  -webkit-mask-image: url("./assets/icon-atv2.svg");
  mask-image: url("./assets/icon-atv2.svg");
}

.panel-heading .curser-help:has(.fa-envelope-o) .fa-file::before {
  -webkit-mask-image: url("./assets/icon-mailv2.svg");
  mask-image: url("./assets/icon-mailv2.svg");
}

.panel.panel-contract-account.movedout > .panel-heading,
.bpc-page-contract [contract-account].movedout > .panel-heading {
  background: var(--button-disabled);
  border-color: var(--button-disabled);
}

.panel.panel-contract-account.movedout > .slideToggle > .panel-body,
.bpc-page-contract [contract-account].movedout > .slideToggle > .panel-body {
  border-color: var(--button-disabled);
}

td bpc-document-download {
  display: flex;
  justify-content: center;
}

.bpc-page-market
  .ngdialog.ngdialog-theme-default
  .ngdialog-content
  .panel-body {
  padding-inline: 0;
  padding-bottom: 0;
  font-size: 16px;
  line-height: 150%;
}

.bpc-page-market .ngdialog.ngdialog-theme-default .ngdialog-content {
  color: var(--text-color);
  background: var(--tile-bg-color);
}

.bpc-page-market .ngdialog.ngdialog-theme-default .ngdialog-content .clearfix {
  display: flex;
  gap: 8px;
  align-items: stretch;
  justify-content: start;
  margin-left: -1px;
}

[bpc-confirm="downloadMarketInformationPdf()"] {
  display: flex;
  column-gap: 4px;
  align-items: center;
}

.well .ui-select-choices {
  padding-top: 0;
  padding-bottom: 0;
}

.ui-select-choices .ui-select-choices-row .ui-select-choices-row-inner {
  display: flex;
  column-gap: 8px;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.ui-select-choices
  .ui-select-choices-row
  .ui-select-choices-row-inner
  bpc-division-icon
  .bpcIcon-gas:before {
  width: 20px;
  margin-right: 4px;
}

@media (max-width: 400px) {
  .uib-datepicker-popup.dropdown-menu {
    left: -47px !important;
    width: 100vw;
  }
}
@media (max-width: 1200px) {
  [bpc-include="partials.template.header.sidebar"]:has(#sideMenu) {
    position: absolute;
    z-index: 10;
    box-shadow: var(--mobile-drop-shadow);
  }

  #header {
    position: relative;
    z-index: 15;
  }
}

.bpc-page-product form .btn,
.mass-postbox .table-responsive > .btn {
  margin-top: 16px;
}

.bpc-page-contact label[for="email"] span,
.bpc-page-contact label[for="email"] a {
  display: contents;
  margin-inline: 2px;
}

.qmr-register .qmr-description {
  width: 300px;
}

.qmr-register .qmr-division {
  width: 30px;
}

/* Fixed widths for the right-side input columns */
.qmr-register .qmr-meterNumber,
.qmr-register .qmr-oldDate-and-result,
.qmr-register .qmr-result,
.qmr-register .qmr-readingDate {
  width: 160px;
}

.qmr-register .qmr-meterNumber {
  width: 170px;
}

.qmr-register .qmr-oldDate-and-result,
.qmr-register .qmr-result {
  width: 200px;
}

/* Prevent global min-height from bloating QMR row inputs and calendar button;
   pin height explicitly so all elements are uniform */
.qmr-register .input-group .form-control,
.qmr-register .input-group-btn > .btn,
.qmr-register .input-group-addon {
  height: 34px;
  min-height: unset;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 34px;
}

/* Speichern / btn-warning (implausible) should be compact inline buttons in QMR rows,
   not the full-size primary button style used elsewhere */
.qmr-register .qmr-action .btn-primary,
.qmr-register .qmr-action .btn-warning {
  height: 34px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 34px;
}

/* Allow #qmr-result-table's own overflow-x:scroll (from main.min.css) to work —
   our overflow-x:hidden on main would otherwise clip it */
.bpc-page-quick .page > .row > .main-content > div > .container > .row > main {
  overflow-x: auto;
}

/* Overlay z-index: main.min.css sets .form-control:hover to z-index 3000,
   which paints inputs on top of the loading overlay (z-index 100).
   Raise it above the hover z-index and apply theme-aware background color. */
.bpc-page-quick quick-meter-reading-filter .panel-body .qmr-loading-overlay {
  z-index: 3001;
  background-color: var(--qmr-overlay-bg);
}

/* Our column total (~1182px) exceeds main.min.css's 1130px min-width */
.bpc-page-quick #qmr-result-table #qmr-result-table-body,
.bpc-page-quick #qmr-result-table #qmr-result-table-header {
  min-width: 1200px;
}

/* Right-edge fade overlay: same ::after pattern as .postbox .table-wrapper.
   The wrapper (.main-content.quick-meter-reading) is not itself a scroll container,
   so the absolutely-positioned ::after stays fixed at the right viewport edge while
   #qmr-result-table scrolls inside it. z-index 3001 beats the z-index:3000 that
   main.min.css applies to .form-control:hover (incl. the search-input inside the table). */
.bpc-page-quick .main-content.quick-meter-reading {
  position: relative;
}

.bpc-page-quick .main-content.quick-meter-reading::after {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3001;
  width: 60px;
  height: 100%;
  pointer-events: none;
  content: "";
  background: var(--table-scroll-shadow-as-bg);
}

/* overflow-x: scroll already set by main.min.css */
#qmr-result-table {
  overflow-x: scroll;
}

@media (max-width: 1200px) {
  #qmr-result-table {
    overflow-x: auto;
  }

  .table-responsive > table {
    position: relative;
    width: 100%;
    padding-inline: 16px;
    margin: 24px 0;
  }

  .table-responsive {
    position: relative;
    padding: 0 16px !important;
  }

  .table-responsive > table,
  .postbox .panel-body .table-responsive:last-of-type table {
    margin: 12px 0;
  }

  .postbox .table-wrapper {
    position: relative;
    margin-bottom: 24px !important;
  }

  .postbox .table-wrapper::before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    width: 48px;
    height: calc(100%);
    content: "";
    background: var(--table-scroll-shadow-as-bg);
  }

  .postbox .table-wrapper bpc-paginator {
    position: relative;
    box-shadow: none;
  }

  .bpc-page-billaddress .panel-contract-account .dl-horizontal {
    flex-wrap: wrap;
  }
}

input[type="checkbox"],
input[type="radio"] {
  min-height: auto;
  margin-top: -1px;
  line-height: normal;
}

.bpc-page-meter .table-responsive > table {
  width: 100%;
  margin-inline: 0;
}

@media (max-width: 1200px) {
  .uib-datepicker-popup.dropdown-menu {
    left: 0;
  }

  .uib-datepicker-popup .btn-group.pull-left {
    width: 66.66%;
  }

  .uib-datepicker-popup .btn-group.pull-left button {
    flex: 1;
  }

  .uib-datepicker-popup .uib-button-bar .btn-success {
    display: flex;
    justify-content: center;
    width: 33.33%;
  }
}

/* ============================================================
   GLOBAL KEYBOARD FOCUS RING
   Add to your global overrides / utilities section
   ============================================================ */

:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

/* ============================================================
   UTILITY CLASS — On-primary focus ring
   Apply to interactive elements whose background/border
   is --primary-main so the default ring remains visible
   ============================================================ */

.u-focus-on-primary:focus-visible {
  outline-color: var(--focus-ring-color-on-primary);
}

:focus:not(:focus-visible) {
  outline: none; /* Safe: hides ring for mouse/touch only */
}

/* Override main.min.css hover outline to use CI colors */
.btn-default:not([disabled]):hover,
.btn-primary:not([disabled]):hover,
.input-group-btn > .btn:not([disabled]):hover,
.panel-heading.clickable:not([disabled]):hover,
input[type="text"]:not([disabled]):hover,
input[type="checkbox"]:not([disabled]):hover + .slider.round {
  outline-color: var(--focus-ring-color);
  border-color: var(--focus-ring-color);
}

.bpc-page-cockpit td > .checkbox {
  display: inline-block;
  margin: 0;
}

.panel.panel-contract td > .checkbox > label {
  display: inline-flex !important;
  gap: 0;
  align-items: center;
  padding-left: 0;
  margin: 0;
}

.bpc-page-cockpit td > .checkbox:hover {
  outline: none;
  border-color: transparent;
}

/* Visually hide the inner aria-label <label> without removing it from the
   accessibility tree. Standard clip-pattern keeps it readable by screen readers
   while taking up no space in the layout. */
#selectProfileLabel {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
}

table[st-table="contract.loadprofileHeader"] > tbody > tr > td:first-child {
  width: 32px !important;
  min-width: 32px;
  max-width: 32px;
  padding-right: 0 !important;
  padding-left: 4px !important;
  text-align: left;
  white-space: nowrap;
}

/* Bootstrap 3 positions .checkbox input[type="checkbox"] absolute with
   margin-left: -20px. Reset to static flow so the checkbox stays inside
   the narrow first-column cell. */
table[st-table="contract.loadprofileHeader"]
  td
  > .checkbox
  > label
  > input[type="checkbox"] {
  position: static;
  margin-left: 0;
}

table[st-table="contract.loadprofileHeader"] > thead > tr > th:first-child,
table[st-table="contract.loadprofileHeader"] > thead > tr > td:first-child {
  width: 32px !important;
  min-width: 32px;
  max-width: 32px;
  padding-right: 0 !important;
  padding-left: 0 !important;
  vertical-align: bottom !important;
}

/* The glyphicon-stats span inside the first thead td inherits
   position: relative; top: 1px from the portal's .glyphicon rule.
   Reset so it sits flush with the bottom of the header row. */
table[st-table="contract.loadprofileHeader"]
  > thead
  > tr
  > td:first-child
  > span.glyphicon {
  position: static;
  top: auto;
  transform: translateY(5px);
}

/* Override main.css [tabindex="0"]:hover rule:
   - Replace hardcoded #3C3E41 outline with CI color
   - Reduce z-index: 9999 to a sensible value that does not overlay
     dropdowns or the datepicker popup (Bootstrap dropdown z-index: 1000) */
[tabindex="0"]:hover,
[tabindex="0"]:not(:has(.clickable)):hover,
[tabindex="0"]:not(:has([tabindex="0"])):hover {
  z-index: 1;
  outline-color: var(--focus-ring-color);
}

/* Raise focused/hovered elements above their neighbours so the focus
   ring is never clipped by adjacent elements in input-groups, button
   groups, or any other tightly-packed component.
   Note: main.css sets .input-group .form-control to z-index 2,
   so .input-group-btn needs z-index 3 to appear above it. */
.input-group-btn:hover,
.input-group-btn:focus-within,
.input-group .form-control:hover,
.input-group .form-control:focus,
.input-group .form-control:focus-visible,
.input-group-addon:hover,
.btn-group > .btn:hover,
.btn-group > .btn:focus-visible,
.breadcrumb li:hover,
.breadcrumb li:focus-visible {
  position: relative;
  z-index: 3;
}

/* ==========================================================================
   Abwendungsvereinbarung – Ratenzahlung (Schritt 1 & 2)
   Components: .ratenzahlung-container, .gesamtforderungen-container,
               .payment-variant-container
   ========================================================================== */

/* Outer wrapper: lay all cards out in a wrapping flex row */
.ratenzahlung-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  padding: 8px 0;
}

/* ---- Shared card base ---- */
.gesamtforderungen-container,
.payment-variant-container {
  display: flex;
  flex-direction: column;
  min-width: 260px;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: none !important;
}

/* ---- Gesamtforderungen: reset to standard border (overrides shared rule) ---- */
.gesamtforderungen-container {
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

/* ---- Card headers ---- */
.gesamtforderungen-container-header,
.payment-variant-container-header {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--panel-heading-text);
  text-align: center;
  background: var(--panel-heading-bg);
  border-radius: 5px 5px 0 0;
}

/* ---- Payment variant headers: white with standard text color ---- */
.payment-variant-container-header {
  color: var(--text-color);
  background: var(--white-color);
  border-bottom: 1px solid var(--border-color);
}

/* ---- Card bodies ---- */
.gesamtforderungen-container-body,
.payment-variant-container-body {
  flex: 1;
  padding: 16px;
  box-shadow: none !important;
}

/* ---- Row layout: label left, value right ---- */
.gesamtforderungen-stand,
.gesamtforderungen-summe,
.payment-variant__reihe {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 0;
}

/* ---- Labels ---- */
.gesamtforderungen-stand__label,
.gesamtforderungen-summe__label,
.gesamtforderungen-total__label,
.payment-variant__label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-color);
}

/* ---- Values ---- */
.gesamtforderungen-stand__value,
.gesamtforderungen-summe__value,
.gesamtforderungen-total__value,
.payment-variant__value {
  font-size: 14px;
  color: var(--text-color);
  white-space: nowrap;
}

/* ---- Separator before Stand row ---- */
.gesamtforderungen-stand {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

/* ---- Total row: visually separated and emphasised ---- */
.gesamtforderungen-total {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0 4px;
  margin-top: 8px;
  border-top: 2px solid var(--border-color);
}

.gesamtforderungen-total__label,
.gesamtforderungen-total__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark-grey-headings);
}

/* ---- "Abschließen" footer button: full-width, flush with card bottom ---- */
.payment-variant-container-footer.btn.btn-primary,
.payment-variant-container-footer {
  display: flex;
  width: 100%;
  padding: 12px 16px;
  border-radius: 0 0 5px 5px !important;
}

/* ---- Dark mode overrides ---- */
.dark-mode .gesamtforderungen-container,
.dark-mode .payment-variant-container {
  background: var(--tile-bg-color);
  border-color: var(--border-color);
}