@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap');

/* ============================================================================
   TUIC B2B Portal – Custom Theme CSS
   Bootstrap 5.2.2 | Power Pages
   Replaces portalbasictheme.css (deactivated)
   ============================================================================ */

/* ==========================================================================
   1. :root – Design Tokens
   ========================================================================== */

:root {
  /* Portal Theme Colors (Power Pages compatibility) */
  --portalThemeColor1: #A8B2C3;
  --portalThemeColor2: #516588;
  --portalThemeColor3: #F4F5F7;
  --portalThemeColor4: #263E6A;
  --portalThemeColor5: #FDFDFD;
  --portalThemeColor6: #516588;
  --portalThemeColor7: #FFFFFF;
  --portalThemeColor8: #263E6A;
  --portalThemeColor9: #07152F;
  --portalThemeColor10: ;
  --portalThemeColor11: ;
  --portalThemeColor12: ;
  --portalThemeOnColor1: #263E6A;
  --portalThemeOnColor2: #FFFFFF;
  --portalThemeOnColor3: #263E6A;
  --portalThemeOnColor4: #FFFFFF;
  --portalThemeOnColor5: #263E6A;
  --portalThemeOnColor6: #FFFFFF;
  --portalThemeOnColor7: #263E6A;
  --portalThemeOnColor8: #FFFFFF;
  --portalThemeOnColor9: #FFFFFF;
  --portalThemeOnColor10: ;
  --portalThemeOnColor11: ;
  --portalThemeOnColor12: ;

  /* TUIC Design Tokens – Dark Blue Scale */
  --tuic-primary: #263E6A;         /* 100 */
  --tuic-primary-dark: #07152F;    /* Hover */
  --tuic-blue-80: #516588;
  --tuic-blue-60: #7C8BA6;
  --tuic-blue-40: #A8B2C3;
  --tuic-blue-20: #D3D8E1;
  --tuic-blue-10: #E9ECF0;
  --tuic-blue-05: #F4F5F7;

  /* Semantic colors */
  --tuic-white: #FFFFFF;
  --tuic-bg: #FDFDFD;
  --tuic-error: #C44141;
  --tuic-error-brand: #D41318;

  /* Font */
  --tuic-font: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Border */
  --tuic-radius-sm: 4px;
  --tuic-radius-md: 8px;
  --tuic-radius-lg: 18px;
  --tuic-border-width: 1.6px;

  /* Shadows */
  --tuic-shadow-drop: 0px 2px 8px rgba(0, 0, 0, 0.15);
  --tuic-shadow-dropdown: 0px 2px 16px rgba(38, 62, 106, 0.15);

  /* BS5 variable overrides – https://getbootstrap.com/docs/5.2/customize/css-variables/ */
  --bs-primary: #263E6A;
  --bs-primary-rgb: 38, 62, 106;
  --bs-secondary: #516588;
  --bs-secondary-rgb: 81, 101, 136;
  --bs-danger: #C44141;
  --bs-danger-rgb: 196, 65, 65;
  --bs-body-color: #263E6A;
  --bs-body-color-rgb: 38, 62, 106;
  --bs-body-bg: #FDFDFD;
  --bs-body-bg-rgb: 253, 253, 253;
  --bs-body-font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;
  --bs-link-color: #263E6A;
  --bs-link-hover-color: #516588;
  --bs-border-color: #D3D8E1;
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 18px;
}

/* [data-component-theme] – Power Pages Section-Theming */
[data-component-theme="portalThemeColor1"] {
  background-color: var(--portalThemeColor1);
  color: var(--portalThemeOnColor1); }
  [data-component-theme="portalThemeColor1"] h1, [data-component-theme="portalThemeColor1"] h2, [data-component-theme="portalThemeColor1"] h3, [data-component-theme="portalThemeColor1"] h4, [data-component-theme="portalThemeColor1"] h5, [data-component-theme="portalThemeColor1"] h6, [data-component-theme="portalThemeColor1"] p, [data-component-theme="portalThemeColor1"] p.smallText {
    color: var(--portalThemeOnColor1); }

[data-component-theme="portalThemeColor2"] {
  background-color: var(--portalThemeColor2);
  color: var(--portalThemeOnColor2); }
  [data-component-theme="portalThemeColor2"] h1, [data-component-theme="portalThemeColor2"] h2, [data-component-theme="portalThemeColor2"] h3, [data-component-theme="portalThemeColor2"] h4, [data-component-theme="portalThemeColor2"] h5, [data-component-theme="portalThemeColor2"] h6, [data-component-theme="portalThemeColor2"] p, [data-component-theme="portalThemeColor2"] p.smallText {
    color: var(--portalThemeOnColor2); }

[data-component-theme="portalThemeColor3"] {
  background-color: var(--portalThemeColor3);
  color: var(--portalThemeOnColor3); }
  [data-component-theme="portalThemeColor3"] h1, [data-component-theme="portalThemeColor3"] h2, [data-component-theme="portalThemeColor3"] h3, [data-component-theme="portalThemeColor3"] h4, [data-component-theme="portalThemeColor3"] h5, [data-component-theme="portalThemeColor3"] h6, [data-component-theme="portalThemeColor3"] p, [data-component-theme="portalThemeColor3"] p.smallText {
    color: var(--portalThemeOnColor3); }

[data-component-theme="portalThemeColor4"] {
  background-color: var(--portalThemeColor4);
  color: var(--portalThemeOnColor4); }
  [data-component-theme="portalThemeColor4"] h1, [data-component-theme="portalThemeColor4"] h2, [data-component-theme="portalThemeColor4"] h3, [data-component-theme="portalThemeColor4"] h4, [data-component-theme="portalThemeColor4"] h5, [data-component-theme="portalThemeColor4"] h6, [data-component-theme="portalThemeColor4"] p, [data-component-theme="portalThemeColor4"] p.smallText {
    color: var(--portalThemeOnColor4); }

[data-component-theme="portalThemeColor5"] {
  background-color: var(--portalThemeColor5);
  color: var(--portalThemeOnColor5); }
  [data-component-theme="portalThemeColor5"] h1, [data-component-theme="portalThemeColor5"] h2, [data-component-theme="portalThemeColor5"] h3, [data-component-theme="portalThemeColor5"] h4, [data-component-theme="portalThemeColor5"] h5, [data-component-theme="portalThemeColor5"] h6, [data-component-theme="portalThemeColor5"] p, [data-component-theme="portalThemeColor5"] p.smallText {
    color: var(--portalThemeOnColor5); }

[data-component-theme="portalThemeColor6"] {
  background-color: var(--portalThemeColor6);
  color: var(--portalThemeOnColor6); }
  [data-component-theme="portalThemeColor6"] h1, [data-component-theme="portalThemeColor6"] h2, [data-component-theme="portalThemeColor6"] h3, [data-component-theme="portalThemeColor6"] h4, [data-component-theme="portalThemeColor6"] h5, [data-component-theme="portalThemeColor6"] h6, [data-component-theme="portalThemeColor6"] p, [data-component-theme="portalThemeColor6"] p.smallText {
    color: var(--portalThemeOnColor6); }

[data-component-theme="portalThemeColor7"] {
  background-color: var(--portalThemeColor7);
  color: var(--portalThemeOnColor7); }
  [data-component-theme="portalThemeColor7"] h1, [data-component-theme="portalThemeColor7"] h2, [data-component-theme="portalThemeColor7"] h3, [data-component-theme="portalThemeColor7"] h4, [data-component-theme="portalThemeColor7"] h5, [data-component-theme="portalThemeColor7"] h6, [data-component-theme="portalThemeColor7"] p, [data-component-theme="portalThemeColor7"] p.smallText {
    color: var(--portalThemeOnColor7); }

[data-component-theme="portalThemeColor8"] {
  background-color: var(--portalThemeColor8);
  color: var(--portalThemeOnColor8); }
  [data-component-theme="portalThemeColor8"] h1, [data-component-theme="portalThemeColor8"] h2, [data-component-theme="portalThemeColor8"] h3, [data-component-theme="portalThemeColor8"] h4, [data-component-theme="portalThemeColor8"] h5, [data-component-theme="portalThemeColor8"] h6, [data-component-theme="portalThemeColor8"] p, [data-component-theme="portalThemeColor8"] p.smallText {
    color: var(--portalThemeOnColor8); }

[data-component-theme="portalThemeColor9"] {
  background-color: var(--portalThemeColor9);
  color: var(--portalThemeOnColor9); }
  [data-component-theme="portalThemeColor9"] h1, [data-component-theme="portalThemeColor9"] h2, [data-component-theme="portalThemeColor9"] h3, [data-component-theme="portalThemeColor9"] h4, [data-component-theme="portalThemeColor9"] h5, [data-component-theme="portalThemeColor9"] h6, [data-component-theme="portalThemeColor9"] p, [data-component-theme="portalThemeColor9"] p.smallText {
    color: var(--portalThemeOnColor9); }

[data-component-theme="portalThemeColor10"] {
  background-color: var(--portalThemeColor10);
  color: var(--portalThemeOnColor10); }
  [data-component-theme="portalThemeColor10"] h1, [data-component-theme="portalThemeColor10"] h2, [data-component-theme="portalThemeColor10"] h3, [data-component-theme="portalThemeColor10"] h4, [data-component-theme="portalThemeColor10"] h5, [data-component-theme="portalThemeColor10"] h6, [data-component-theme="portalThemeColor10"] p, [data-component-theme="portalThemeColor10"] p.smallText {
    color: var(--portalThemeOnColor10); }

[data-component-theme="portalThemeColor11"] {
  background-color: var(--portalThemeColor11);
  color: var(--portalThemeOnColor11); }
  [data-component-theme="portalThemeColor11"] h1, [data-component-theme="portalThemeColor11"] h2, [data-component-theme="portalThemeColor11"] h3, [data-component-theme="portalThemeColor11"] h4, [data-component-theme="portalThemeColor11"] h5, [data-component-theme="portalThemeColor11"] h6, [data-component-theme="portalThemeColor11"] p, [data-component-theme="portalThemeColor11"] p.smallText {
    color: var(--portalThemeOnColor11); }

[data-component-theme="portalThemeColor12"] {
  background-color: var(--portalThemeColor12);
  color: var(--portalThemeOnColor12); }
  [data-component-theme="portalThemeColor12"] h1, [data-component-theme="portalThemeColor12"] h2, [data-component-theme="portalThemeColor12"] h3, [data-component-theme="portalThemeColor12"] h4, [data-component-theme="portalThemeColor12"] h5, [data-component-theme="portalThemeColor12"] h6, [data-component-theme="portalThemeColor12"] p, [data-component-theme="portalThemeColor12"] p.smallText {
    color: var(--portalThemeOnColor12); }

/* ==========================================================================
   2. Body + Typography
   BS5-Ref: https://getbootstrap.com/docs/5.2/content/typography/
   ========================================================================== */

body {
  color: var(--tuic-primary);
  background-color: var(--tuic-bg);
  font-family: var(--tuic-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6; }

legend {
  color: var(--tuic-primary); }

/* Headlines – BS5: h1,.h1 etc. + Power Pages section selectors */
h1,
.h1,
.section-landing-heading,
.section-landing .row > div .section-landing-heading,
.section-inline-search .row > div h1,
.section-landing h1,
.section-search .header-search h1,
.page_section h1,
.color-inverse h1,
h1 p {
  font-family: var(--tuic-font);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.3;
  color: var(--tuic-primary);
  margin-left: 0px;
  margin-right: 0px; }

h2,
.h2,
.section-landing .row > div .section-landing-sub-heading,
.page_section h2,
.color-inverse h2,
h2 p {
  font-family: var(--tuic-font);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--tuic-primary); }

h3,
.h3,
.page_section h3,
.color-inverse h3,
.sidebar-home h3 {
  font-family: var(--tuic-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--tuic-primary); }

h4,
.h4,
.poll .poll-header h4,
.poll .poll-tags h4 {
  font-family: var(--tuic-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--tuic-primary); }

h5,
.h5 {
  font-family: var(--tuic-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tuic-primary); }

h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 21px;
  margin-bottom: 10.5px; }

h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 10.5px;
  margin-bottom: 10.5px; }

/* Body-Text */
p,
.p,
.page_section p,
.section-diagonal-left p,
.section-diagonal-right p,
p.form-text span {
  font-family: var(--tuic-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tuic-primary); }

.p2 {
  font-family: var(--tuic-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tuic-blue-80); }

p.smallText {
  display: inline;
  vertical-align: middle;
  color: var(--tuic-white);
  font-family: var(--tuic-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6; }

/* Links – BS5: https://getbootstrap.com/docs/5.2/content/typography/#inline-text-elements */
a:not(.btn) {
  text-decoration: none; }
  a:not(.btn):hover {
    text-decoration: underline; }

a,
.a {
  color: var(--tuic-primary);
  font-family: var(--tuic-font);
  font-weight: 400;
  font-size: 14px; }
  a:hover, a:focus,
  .a:hover,
  .a:focus {
    color: var(--tuic-blue-80); }

a[disabled] {
  color: var(--tuic-blue-40);
  pointer-events: none; }

a.anchor-inherit-styles {
  font-size: inherit;
  font-family: inherit;
  color: inherit; }

a.anchor-text-decoration-none {
  text-decoration: none; }

a.anchor-text-decoration-underline {
  text-decoration: underline; }

a.anchor-hover-text-decoration-none:hover {
  text-decoration: none; }

a.anchor-hover-text-decoration-underline:hover {
  text-decoration: underline; }

/* Anchor hover color utilities (use portalThemeColor vars) */
a.anchor-hover-color-color1:hover { color: var(--portalThemeColor1) !important; }
a.anchor-hover-color-color2:hover { color: var(--portalThemeColor2) !important; }
a.anchor-hover-color-color3:hover { color: var(--portalThemeColor3) !important; }
a.anchor-hover-color-color4:hover { color: var(--portalThemeColor4) !important; }
a.anchor-hover-color-color5:hover { color: var(--portalThemeColor5) !important; }
a.anchor-hover-color-color6:hover { color: var(--portalThemeColor6) !important; }
a.anchor-hover-color-color7:hover { color: var(--portalThemeColor7) !important; }
a.anchor-hover-color-color8:hover { color: var(--portalThemeColor8) !important; }
a.anchor-hover-color-color9:hover { color: var(--portalThemeColor9) !important; }
a.anchor-hover-color-color10:hover { color: var(--portalThemeColor10) !important; }
a.anchor-hover-color-color11:hover { color: var(--portalThemeColor11) !important; }
a.anchor-hover-color-color12:hover { color: var(--portalThemeColor12) !important; }

/* Responsive Headlines */
@media (max-width: 768px) {
  h1, .h1,
  .section-landing-heading,
  .section-landing .row > div .section-landing-heading,
  .section-inline-search .row > div h1,
  .section-landing h1,
  .section-search .header-search h1,
  .page_section h1,
  .color-inverse h1,
  h1 p {
    font-size: 32px; }

  h2, .h2,
  .section-landing .row > div .section-landing-sub-heading,
  .page_section h2,
  .color-inverse h2,
  h2 p {
    font-size: 24px; }

  h3, .h3,
  .page_section h3,
  .color-inverse h3,
  .sidebar-home h3 {
    font-size: 20px; }
}

/* ==========================================================================
   3. Buttons
   BS5-Ref: https://getbootstrap.com/docs/5.2/components/buttons/
   ========================================================================== */

/* Primary – .btn-primary (BS5) + .button1 (Power Pages) */
.btn-primary {
  color: var(--tuic-white);
  background-color: var(--tuic-primary);
  border-color: var(--tuic-primary);
  border-radius: var(--tuic-radius-md);
  font-family: var(--tuic-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  padding: 20px 32px;
  width: fit-content;
  border-style: solid; }
  .btn-primary:hover {
    color: var(--tuic-white);
    background-color: var(--tuic-primary-dark);
    border-color: var(--tuic-primary-dark); }
  .btn-primary:active, .btn-primary.active {
    color: var(--tuic-white);
    background-color: var(--tuic-primary-dark);
    border-color: var(--tuic-primary-dark); }
    .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus {
      color: var(--tuic-white);
      background-color: var(--tuic-primary-dark);
      border-color: var(--tuic-primary-dark); }
  .btn-primary:focus, .btn-primary.focus {
    color: var(--tuic-white);
    background-color: var(--tuic-primary-dark);
    border-color: var(--tuic-primary-dark); }

.button1 {
  color: var(--tuic-white);
  border-radius: var(--tuic-radius-md);
  font-family: var(--tuic-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  border-color: var(--tuic-primary);
  padding: 20px 32px;
  width: fit-content;
  border-style: solid;
  border-width: var(--tuic-border-width);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tuic-primary); }

.button1:hover {
  color: var(--tuic-white);
  background-color: var(--tuic-primary-dark);
  border-color: var(--tuic-primary-dark); }

.button1:active, .button1.active {
  color: var(--tuic-white) !important;
  background-color: var(--tuic-primary-dark) !important;
  border-color: var(--tuic-primary-dark) !important; }

.button1:focus, .button1.focus, .button1:focus-visible {
  color: var(--tuic-white);
  background-color: var(--tuic-primary-dark);
  border-color: var(--tuic-primary-dark); }

/* Secondary – .button2, .btn-secondary, .btn-default (BS5 + Power Pages) */
.button2, .btn-secondary, .btn-default {
  color: var(--tuic-primary);
  border-radius: var(--tuic-radius-md);
  font-family: var(--tuic-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  border-color: transparent;
  padding: 20px 32px;
  width: fit-content;
  border-style: solid;
  border-width: var(--tuic-border-width);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; }

.button2:hover, .btn-default:hover {
  color: var(--tuic-blue-80);
  background-color: transparent;
  border-color: transparent; }

.button2:active, .button2.active, .btn-default:active, .btn-default.active {
  color: var(--tuic-blue-80) !important;
  background-color: transparent !important;
  border-color: transparent !important; }

.button2:focus, .button2.focus, .button2:focus-visible, .btn-default:focus, .btn-default.focus, .btn-default:focus-visible {
  color: var(--tuic-blue-80);
  background-color: transparent;
  border-color: transparent; }

/* Disabled */
button[disabled] {
  background-color: var(--tuic-blue-20);
  color: var(--tuic-blue-60);
  pointer-events: none;
  border: var(--tuic-border-width) solid var(--tuic-blue-20);
  cursor: not-allowed; }

/* Dropdown toggles */
.btn-secondary.dropdown-toggle.show {
  color: var(--tuic-white);
  background-color: var(--tuic-primary);
  border-color: var(--tuic-primary); }

.btn-default.dropdown-toggle.show {
  color: var(--tuic-white);
  background-color: var(--tuic-primary);
  border-color: var(--tuic-primary); }

.btn-primary.dropdown-toggle.show {
  color: var(--tuic-white);
  background-color: var(--tuic-primary);
  border-color: var(--tuic-primary); }
  .btn-primary.dropdown-toggle.show:hover, .btn-primary.dropdown-toggle.show:focus, .btn-primary.dropdown-toggle.show.focus {
    color: var(--tuic-white);
    background-color: var(--tuic-primary-dark);
    border-color: var(--tuic-primary-dark); }

.ppFlexContainer .button1, .ppFlexContainer .button2 {
  white-space: nowrap; }

/* ==========================================================================
   4. Navigation
   BS5-Ref: https://getbootstrap.com/docs/5.2/components/navbar/
   ========================================================================== */

/* --- 4.1 Outer navbar --------------------------------------------------- */
.tuic-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 77px;
  background-color: var(--tuic-blue-10);
  box-shadow: none;
  padding: 0;
}

/* --- 4.2 Zone 1: Logo --------------------------------------------------- */
.tuic-header .tuic-logo-holder {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tuic-blue-10);
  padding: 0 20px;
}

/* --- 4.3 Zone 2: Inner-brand -------------------------------------------- */
.tuic-header .tuic-inner-brand {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: var(--tuic-white);
  height: 76px;
  align-self: flex-start;
  padding: 0 24px;
  min-width: 0;
}

.tuic-header .tuic-inner-brand .navbar-collapse {
  flex-grow: 0;
}

/* --- 4.4 Zone 3: Controls ----------------------------------------------- */
.tuic-header .tuic-header-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background-color: var(--tuic-blue-10);
  gap: 16px;
  padding: 0 20px;
}

/* --- 4.5 Language switcher ---------------------------------------------- */
.tuic-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: transparent;
  border: var(--tuic-border-width) solid var(--tuic-primary);
  border-radius: var(--tuic-radius-md);
  padding: 8px 12px;
  color: var(--tuic-primary);
  font-family: var(--tuic-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.tuic-lang-toggle:hover {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
}

.tuic-lang-toggle:focus {
  outline: none;
  box-shadow: none;
}

.tuic-lang-toggle::after {
  display: none;
}

.tuic-lang-chevron {
  font-size: 10px;
}

/* --- 4.6 Icon buttons --------------------------------------------------- */
.tuic-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: none;
  color: var(--tuic-primary);
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

.tuic-icon-btn:hover {
  color: var(--tuic-blue-80);
  text-decoration: none;
}

.tuic-icon-btn:focus {
  color: var(--tuic-blue-80);
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

.tuic-icon-btn.dropdown-toggle::after {
  display: none;
}

/* --- 4.7 Burger toggler ------------------------------------------------- */
.tuic-header .navbar-toggler {
  background-color: transparent;
  border: none;
  padding: 0;
  width: 24px;
  height: 24px;
}

.tuic-header .navbar-toggler:hover {
  background-color: transparent;
}

.tuic-header .navbar-toggler:focus {
  border: none;
  background-color: transparent;
  box-shadow: none;
}

.tuic-header .navbar-toggler .navbar-toggler-icon {
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 5C2.25 4.58579 2.58579 4.25 3 4.25H21C21.4142 4.25 21.75 4.58579 21.75 5C21.75 5.41421 21.4142 5.75 21 5.75H3C2.58579 5.75 2.25 5.41421 2.25 5Z' fill='%23263E6A'/%3E%3Cpath d='M2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H21C21.4142 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12Z' fill='%23263E6A'/%3E%3Cpath d='M3 18.25C2.58579 18.25 2.25 18.5858 2.25 19C2.25 19.4142 2.58579 19.75 3 19.75H21C21.4142 19.75 21.75 19.4142 21.75 19C21.75 18.5858 21.4142 18.25 21 18.25H3Z' fill='%23263E6A'/%3E%3C/svg%3E");
}

/* --- 4.8 Nav-link styling ----------------------------------------------- */
.tuic-header .navbar-nav.weblinks {
  gap: 24px;
}

.tuic-header .menu-bar > .navbar-nav.weblinks > li > a,
.tuic-header .menu-bar > .navbar-nav.weblinks > li.dropdown > a {
  color: var(--tuic-primary);
  font-family: var(--tuic-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  padding: 8px 0;
  white-space: nowrap;
}

.tuic-header .menu-bar > .navbar-nav.weblinks > li > a:hover,
.tuic-header .menu-bar > .navbar-nav.weblinks > li.dropdown > a:hover {
  background-color: transparent;
  color: var(--tuic-blue-80);
  text-decoration: none;
}

.tuic-header .menu-bar > .navbar-nav.weblinks > li > a:focus,
.tuic-header .menu-bar > .navbar-nav.weblinks > li.dropdown > a:focus {
  background-color: transparent;
  color: var(--tuic-blue-80);
  text-decoration: none;
}

.tuic-header .menu-bar > .navbar-nav.weblinks > li > a:focus-visible,
.tuic-header .menu-bar > .navbar-nav.weblinks > li.dropdown > a:focus-visible {
  background-color: transparent;
  color: var(--tuic-blue-80);
  text-decoration: none;
}

.tuic-header .menu-bar > .navbar-nav a.show,
.tuic-header .menu-bar > .navbar-nav a.dropdown-toggle.show {
  color: var(--tuic-primary);
  background-color: transparent;
  text-decoration: none;
}

.tuic-header .menu-bar > .navbar-nav a.show:hover,
.tuic-header .menu-bar > .navbar-nav a.dropdown-toggle.show:hover {
  color: var(--tuic-blue-80);
  background-color: transparent;
  text-decoration: none;
}

.tuic-header .menu-bar > .navbar-nav a.show:focus,
.tuic-header .menu-bar > .navbar-nav a.dropdown-toggle.show:focus {
  color: var(--tuic-blue-80);
  background-color: transparent;
  text-decoration: none;
}

/* --- 4.9 Dropdown menus ------------------------------------------------- */
.tuic-header .dropdown-menu {
  background-color: var(--tuic-white);
  border: none;
  border-radius: var(--tuic-radius-md);
  box-shadow: var(--tuic-shadow-dropdown);
  padding: 8px 0;
}

.tuic-header .dropdown-menu .dropdown-item {
  color: var(--tuic-primary);
  font-family: var(--tuic-font);
  font-size: 14px;
  text-decoration: none;
  padding: 8px 16px;
}

.tuic-header .dropdown-menu .dropdown-item:hover {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
  text-decoration: none;
}

.tuic-header .dropdown-menu .dropdown-item:focus {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
  text-decoration: none;
}

.tuic-header .dropdown-menu > .active > a {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
  text-decoration: none;
}

/* --- 4.10 Brand --------------------------------------------------------- */
.tuic-header .navbar-brand a {
  color: var(--tuic-primary);
  text-decoration: none;
}

.tuic-header .navbar-brand a p,
.tuic-header .navbar-brand a h1,
.tuic-header .navbar-brand a h2,
.tuic-header .navbar-brand a h3,
.tuic-header .navbar-brand a h4,
.tuic-header .navbar-brand a h5,
.tuic-header .navbar-brand a span {
  display: inline;
  vertical-align: middle;
  color: var(--tuic-primary);
}

h1.siteTitle,
.tuic-header .navbar-brand a h1.siteTitle,
.tuic-header .navbar-brand a h1.siteTitle > span {
  display: inline;
  vertical-align: middle;
  color: var(--tuic-primary);
  font-family: var(--tuic-font);
  font-weight: 600;
  font-size: 30px;
}

/* --- 4.11 Desktop (>=1200px) -------------------------------------------- */
@media (min-width: 1200px) {
  .tuic-header .navbar-toggler {
    display: none;
  }

  .tuic-header .navbar-collapse {
    display: flex !important;
  }
}

/* --- 4.12 Mobile (<1200px) ---------------------------------------------- */
@media (max-width: 1199.98px) {
  .tuic-header {
    flex-wrap: wrap;
    height: auto;
    min-height: 60px;
  }

  .tuic-header .tuic-logo-holder {
    height: 60px;
    padding: 0 12px;
  }

  .tuic-header .tuic-inner-brand {
    order: 3;
    flex-basis: 100%;
    height: auto;
    min-height: 0;
    background-color: transparent;
    padding: 0;
    justify-content: flex-start;
  }

  .tuic-header .tuic-inner-brand .navbar-collapse {
    background-color: var(--tuic-white);
    width: 100%;
  }

  .tuic-header .tuic-inner-brand .menu-bar {
    margin-left: 0 !important;
    width: 100%;
  }

  .tuic-header .tuic-inner-brand .navbar-nav.weblinks {
    flex-direction: column;
    gap: 0;
    padding: 12px 16px;
  }

  .tuic-header .menu-bar > .navbar-nav.weblinks > li > a {
    padding: 10px 0;
    border-bottom: 1px solid var(--tuic-blue-10);
  }

  .tuic-header .tuic-header-controls {
    height: 60px;
    margin-left: auto;
    padding: 0 12px;
  }
}

/* --- 4.13 Search dropdown ----------------------------------------------- */
.tuic-header .dropdown-search {
  min-width: 300px;
  padding: 16px;
}

/* --- General nav (site-wide) -------------------------------------------- */
.nav > li > a {
  text-decoration: none;
}

.nav > li > a:hover {
  background-color: var(--tuic-blue-05);
}

.nav > li > a:focus {
  background-color: var(--tuic-blue-05);
}

.nav .show.dropdown-menu {
  background-color: var(--tuic-white);
}

.nav .show.dropdown-menu > li > a {
  text-decoration: none;
  color: var(--tuic-primary);
}

.nav .show.dropdown-menu > li > a:hover {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
}

.nav .show.dropdown-menu > li > a:focus {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
}

.nav .show.dropdown-menu > .active > a {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
}

.nav .show.dropdown-menu > .active > a:hover {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
}

.nav .show.dropdown-menu > .active > a:focus {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
}

.nav > .dropdown > a.show {
  text-decoration: none;
  background-color: transparent;
}

.nav > .dropdown > a.show:hover {
  background-color: transparent;
}

.nav > .dropdown > a.show:focus {
  background-color: transparent;
}

/* --- 4.14 Tabs ---------------------------------------------------------- */
.nav-tabs > li > a:hover {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
}

.nav-tabs > li > a:focus {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
}

a.nav-link[role="tab"]:not(.active) {
  color: var(--portalThemeColor8);
  font-family: var(--tuic-font);
  font-weight: 400;
  font-size: 14px;
}

a.active.nav-link[role="tab"] {
  font-size: 14px;
  text-decoration: none;
}

/* ==========================================================================
   5. Forms
   BS5-Ref: https://getbootstrap.com/docs/5.2/forms/overview/
   ========================================================================== */

.form-control,
.crmEntityFormView .text.form-control,
.crmEntityFormView .lookup.form-control,
.crmEntityFormView input.form-control {
  background-color: var(--tuic-white) !important;
  color: var(--tuic-primary);
  font-family: var(--tuic-font);
  font-size: 16px;
  line-height: 1.6;
  border: var(--tuic-border-width) solid var(--tuic-blue-20);
  border-radius: var(--tuic-radius-md);
  padding: 16px; }

.form-control:focus {
  border-color: var(--tuic-blue-80);
  box-shadow: none; }

input {
  background-color: var(--tuic-white); }

::placeholder {
  color: var(--tuic-blue-60) !important; }

.crmEntityFormView label {
  background-color: transparent;
  color: var(--tuic-primary);
  font-family: var(--tuic-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6; }

.help-block {
  color: var(--tuic-blue-80);
  font-size: 14px;
  line-height: 1.6; }

/* Select – BS5: https://getbootstrap.com/docs/5.2/forms/select/ */
.form-select, .crmentityformview select {
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.21967 9.21967C3.51256 8.92678 3.98744 8.92678 4.28033 9.21967L11.75 16.6893L19.2197 9.21967C19.5126 8.92678 19.9874 8.92678 20.2803 9.21967C20.5732 9.51256 20.5732 9.98744 20.2803 10.2803L12.2803 18.2803C11.9874 18.5732 11.5126 18.5732 11.2197 18.2803L3.21967 10.2803C2.92678 9.98744 2.92678 9.51256 3.21967 9.21967Z' fill='%23263E6A'/%3E%3C/svg%3E"); }

/* Checkboxes – BS5: https://getbootstrap.com/docs/5.2/forms/checks-radios/ */
.form-check-input {
  width: 24px;
  height: 24px;
  border: var(--tuic-border-width) solid var(--tuic-blue-40);
  border-radius: var(--tuic-radius-sm); }

.form-check-input:checked {
  background-color: transparent;
  border-color: var(--tuic-blue-80);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L9 17L19 7' stroke='%23516588' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.form-check-input:focus {
  border-color: var(--tuic-blue-80);
  box-shadow: none; }

/* Error state */
.form-control.is-invalid,
.input-validation-error {
  border-color: var(--tuic-error); }

.field-validation-error {
  color: var(--tuic-error);
  font-size: 14px;
  line-height: 1.6; }

/* DateTimePicker – input group addon */
.input-group .input-group-text,
.input-group .input-group-append .btn,
.input-group .input-group-btn .btn,
.datetimepicker .input-group-addon {
  padding: 16px;
  border: var(--tuic-border-width) solid var(--tuic-blue-20);
  border-left: none;
  border-radius: 0 var(--tuic-radius-md) var(--tuic-radius-md) 0;
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center; }

.input-group .form-control {
  border-right: none;
  border-radius: var(--tuic-radius-md) 0 0 var(--tuic-radius-md); }

/* Lookup field – buttons inside the visual border */
.crmEntityFormView .input-group {
  border: var(--tuic-border-width) solid var(--tuic-blue-20);
  border-radius: var(--tuic-radius-md);
  background-color: var(--tuic-white); }

.crmEntityFormView .input-group .form-control {
  border: none;
  border-radius: var(--tuic-radius-md) 0 0 var(--tuic-radius-md); }

.crmEntityFormView .input-group .btn {
  border: none;
  background: transparent;
  color: var(--tuic-primary);
  padding: 16px 12px; }

.bootstrap-datetimepicker-widget {
  background-color: var(--tuic-white); }
  .bootstrap-datetimepicker-widget table thead tr:first-child th:hover, .bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td span:hover {
    color: var(--tuic-primary); }
  .bootstrap-datetimepicker-widget table td.active:hover, .bootstrap-datetimepicker-widget table td span.active:hover {
    color: var(--tuic-white); }

/* Multi-Select (Power Pages) */
.msos-selection-container, .msos-container, .msos-caret-container, .msos-action-buttons:hover {
  color: var(--tuic-primary) !important;
  background: var(--tuic-white) !important; }

.msos-option-selected, .msos-selected-display-item, .msos-quick-delete, .msos-quick-delete:hover {
  background: var(--tuic-blue-05) !important; }

.msos-label, .msos-quick-delete, .msos-quick-delete:hover {
  color: var(--tuic-primary) !important; }

.msos-option-focused:after, .msos-selecteditems:focus .msos-selected-display-item.msos-selecteditem-active:after, .msos-selecteditems-toggle:focus {
  border-color: var(--tuic-primary) !important; }

.msos-option:hover, .msos-option-selected:hover {
  background: var(--tuic-blue-05) !important; }

.msos-selecteditems-toggle {
  color: var(--tuic-blue-80) !important; }

.form-close {
  color: var(--tuic-primary); }
  .form-close:hover {
    color: var(--tuic-primary) !important; }
  .form-close:focus {
    color: var(--tuic-primary) !important; }

/* Form layout – two-column gap */
table.section {
  padding: 0;
  border-spacing: 0;
}

table.section td.cell {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  table.section td.cell ~ td.cell {
    padding-left: 16px;
  }
}

table.section td.zero-cell {
  display: none;
}

fieldset {
  padding: 0;
  margin: 0; }

/* Label-to-input gap: Figma 4px */
.crmEntityFormView .field-label {
  margin-bottom: 4px; }

/* Empty-value dash overlay – align with input padding */
.crmEntityFormView .control .text-muted[aria-hidden="true"] {
  top: 16px !important;
  left: 16px !important; }

.crmEntityFormView .table-info {
  margin-bottom: 0; }

/* ==========================================================================
   6. Tables
   BS5-Ref: https://getbootstrap.com/docs/5.2/content/tables/
   ========================================================================== */

/* Table wrapper – rounded corners */
.view-grid {
  border-radius: var(--tuic-radius-md);
  overflow: hidden; }

/* BS5 scoped table variables */
.table {
  --bs-table-bg: var(--tuic-white);
  --bs-table-color: var(--tuic-primary);
  --bs-table-border-color: var(--tuic-blue-20);
  --bs-table-striped-bg: var(--tuic-blue-05);
  --bs-table-striped-color: var(--tuic-primary);
  --bs-table-hover-bg: var(--tuic-blue-10);
  --bs-table-hover-color: var(--tuic-primary);
  --bs-table-active-bg: var(--tuic-blue-10);
  --bs-table-active-color: var(--tuic-primary);
  border-color: var(--tuic-blue-20); }

/* Table header – Figma: Dark Blue 60, 2px gap between cells */
.table > thead > tr {
  background-color: var(--tuic-blue-60); }

.table > thead > tr > th {
  color: var(--tuic-white);
  font-family: var(--tuic-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  padding: 16px;
  border-bottom: none;
  background-color: var(--tuic-blue-60);
  vertical-align: middle; }

.table > thead > tr > th a {
  color: var(--tuic-white) !important;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none; }

.table > thead > tr > th a:hover,
.table > thead > tr > th a:focus {
  color: var(--tuic-white);
  text-decoration: underline; }

/* Table body cells */
.table > tbody > tr > td {
  font-family: var(--tuic-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tuic-primary);
  padding: 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--tuic-blue-20); }

/* Zebra striping */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--tuic-white); }

.table-striped > tbody > tr:nth-of-type(even) {
  background-color: var(--tuic-blue-05); }

/* Hover */
.table-hover > tbody > tr:hover {
  background-color: var(--tuic-blue-10); }

/* Detail links in table cells */
.table > tbody > tr > td a.details-link {
  color: var(--tuic-primary);
  text-decoration: none;
  font-weight: 600; }

.table > tbody > tr > td a.details-link:hover {
  color: var(--tuic-blue-80);
  text-decoration: underline; }

/* Info rows */
.table > thead > tr.info > td,
.table > thead > tr.info > th,
.table > thead > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table > tbody > tr > td.info,
.table > tbody > tr > th.info,
.table > tfoot > tr.info > td,
.table > tfoot > tr.info > th,
.table > tfoot > tr > td.info,
.table > tfoot > tr > th.info {
  background-color: var(--tuic-blue-05); }

.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr.info:hover > th,
.table-hover > tbody > tr:hover > .info {
  background-color: var(--tuic-blue-10); }

/* Entity grid zebra striping (lookup modals, subgrids) */
.entity-grid .table > tbody > tr:nth-of-type(odd) {
  background-color: var(--tuic-white);
}

.entity-grid .table > tbody > tr:nth-of-type(even) {
  background-color: var(--tuic-blue-05);
}

.entity-grid .table > tbody > tr.selected,
.entity-grid .table > tbody > tr.table-info {
  --bs-table-bg-state: var(--tuic-blue-10);
  background-color: var(--tuic-blue-10);
}

.entity-grid .table > tbody > tr.selected > td,
.entity-grid .table > tbody > tr.table-info > td {
  background-color: var(--tuic-blue-10);
  color: var(--tuic-primary);
}

/* Power Pages entity lists / CRM views */
.crmEntityFormView, .entitylist {
  background-color: var(--tuic-white);
  color: var(--tuic-primary);
  border: none; }

.modal-content, .popover-content {
  background-color: var(--tuic-white);
  color: var(--tuic-primary);
  border: 1px solid var(--tuic-blue-10); }

.search-results .highlight {
  color: var(--tuic-primary); }

.login-heading-section {
  color: unset; }

/* ==========================================================================
   7. Layout & Spacing
   BS5-Ref: https://getbootstrap.com/docs/5.2/layout/containers/
   ========================================================================== */

/* Power Pages section layout */
.columnBlockLayout {
  margin-top: 64px;
  margin-bottom: 64px;
  padding: 16px; }

.ppFlexContainer {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px; }

.sectionBlockLayout .columnBlockLayout:has(.ppFlexContainer) {
  display: block !important;
  height: fit-content !important; }

.sectionBlockLayout .container-fluid {
  padding-left: 0;
  padding-right: 0; }

@media (min-width: 768px) {
  .ppFlexContainer {
    flex-basis: 0%; } }

/* BS5 Container breakpoints */
@media (min-width: 576px) {
  .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-sm {
    max-width: 540px; } }

@media (min-width: 768px) {
  .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm {
    max-width: 720px; } }

@media (min-width: 992px) {
  .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-lg, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm {
    max-width: 960px; } }

@media (min-width: 1200px) {
  .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-lg, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm, .row.sectionBlockLayout > .container-xl {
    max-width: 1140px; } }

@media (min-width: 1400px) {
  .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-lg, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm, .row.sectionBlockLayout > .container-xl, .row.sectionBlockLayout > .container-xxl {
    max-width: 1540px; } }

/* Section Colors */
.sectionPrimaryColor {
  background-color: var(--tuic-blue-80);
  color: var(--tuic-white); }
  .sectionPrimaryColor h1, .sectionPrimaryColor h2, .sectionPrimaryColor h3, .sectionPrimaryColor h4, .sectionPrimaryColor h5, .sectionPrimaryColor h6, .sectionPrimaryColor p, .sectionPrimaryColor a {
    color: var(--tuic-white); }
  .sectionPrimaryColor .crmEntityFormView h1, .sectionPrimaryColor .crmEntityFormView h2, .sectionPrimaryColor .crmEntityFormView h3, .sectionPrimaryColor .crmEntityFormView h4, .sectionPrimaryColor .crmEntityFormView h5, .sectionPrimaryColor .crmEntityFormView h6, .sectionPrimaryColor .crmEntityFormView p, .sectionPrimaryColor .crmEntityFormView a {
    color: var(--tuic-primary); }
  .sectionPrimaryColor .entitylist h1, .sectionPrimaryColor .entitylist h2, .sectionPrimaryColor .entitylist h3, .sectionPrimaryColor .entitylist h4, .sectionPrimaryColor .entitylist h5, .sectionPrimaryColor .entitylist h6, .sectionPrimaryColor .entitylist p, .sectionPrimaryColor .entitylist a {
    color: var(--tuic-primary); }

/* Breadcrumb – BS5: https://getbootstrap.com/docs/5.2/components/breadcrumb/ */
.breadcrumb {
  background-color: transparent; }
  .breadcrumb > li a {
    color: var(--tuic-primary); }
    .breadcrumb > li a:hover {
      color: var(--tuic-blue-80); }
  .breadcrumb > .active {
    color: var(--tuic-primary); }

/* Cards – BS5: https://getbootstrap.com/docs/5.2/components/card/ */
.card-body, .list-group-item {
  background-color: var(--tuic-white);
  color: var(--tuic-primary); }

.card-header {
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary); }

.facet-list-group-item-title {
  color: var(--tuic-primary); }

/* ==========================================================================
   8. Footer
   ========================================================================== */

footer {
  color: var(--tuic-white);
  font-family: var(--tuic-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.424; }
  footer .footer-bottom {
    background-color: var(--tuic-primary); }

/* ==========================================================================
   9. Miscellaneous
   ========================================================================== */

/* Bootstrap V5 Dropdown compat */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  text-decoration: none;
  display: block;
  width: auto;
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary); }

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
  text-decoration: none;
  outline: 0;
  width: auto;
  background-color: var(--tuic-blue-05);
  color: var(--tuic-primary); }

.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857;
  color: var(--tuic-primary);
  white-space: nowrap;
  width: auto; }

/* Pagination – BS5: https://getbootstrap.com/docs/5.2/components/pagination/ */
.pagination-container,
.entity-grid .pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0; }

.pagination,
.view-pagination .pagination {
  margin-bottom: 15px;
  --bs-pagination-color: var(--tuic-primary);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: transparent;
  --bs-pagination-hover-color: var(--tuic-primary-dark);
  --bs-pagination-hover-bg: var(--tuic-blue-05);
  --bs-pagination-hover-border-color: transparent;
  --bs-pagination-focus-color: var(--tuic-primary-dark);
  --bs-pagination-focus-bg: var(--tuic-blue-05);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(38, 62, 106, 0.25);
  --bs-pagination-active-color: var(--tuic-white);
  --bs-pagination-active-bg: var(--tuic-primary);
  --bs-pagination-active-border-color: var(--tuic-primary);
  --bs-pagination-disabled-color: var(--tuic-blue-40);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: transparent; }

.page-link {
  font-family: var(--tuic-font);
  font-weight: 600;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0; }

.page-item.active > .page-link,
.page-item.active > .page-link:hover,
.page-item.active > .page-link:focus {
  background-color: var(--tuic-primary) !important;
  border-color: var(--tuic-primary) !important;
  color: var(--tuic-white) !important; }

/* ==========================================================================
   10. Cockpit / Startseite (LGH-242)
   ========================================================================== */

/* --- 10.1 Layout --------------------------------------------------------- */
.cockpit-container { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }

/* --- 10.2 Anonymous View ------------------------------------------------- */
.anon-hero {
  text-align: center;
  padding: 80px 40px;
  background: var(--tuic-white);
  border-radius: var(--tuic-radius-md);
  box-shadow: var(--tuic-shadow-drop); }

.anon-overline {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--tuic-blue-80); }

.anon-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 16px; }

.anon-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tuic-blue-80);
  max-width: 600px;
  margin: 0 auto 48px; }

.anon-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  text-align: left; }

.anon-card {
  background: var(--tuic-blue-05);
  border-radius: var(--tuic-radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px; }

.anon-card-icon {
  width: 48px;
  height: 48px;
  background: var(--tuic-primary);
  border-radius: var(--tuic-radius-md);
  display: flex;
  align-items: center;
  justify-content: center; }

.anon-card-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--tuic-white);
  fill: none;
  stroke-width: 1.6; }

.anon-card h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }

.anon-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tuic-blue-80);
  flex: 1; }

.anon-card .btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: middle; }

.anon-card .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px; }

/* --- 10.3 Authenticated View (Cockpit) ----------------------------------- */
.cockpit-header { margin-bottom: 40px; }

.cockpit-overline {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tuic-blue-80);
  margin-bottom: 8px; }

.cockpit-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.3; }

.cockpit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px; }

/* Cockpit Cards */
.cockpit-grid .card {
  background: var(--tuic-white);
  border-radius: var(--tuic-radius-md);
  box-shadow: var(--tuic-shadow-drop);
  padding: 32px; }

.card-full { grid-column: 1 / -1; }

.cockpit-grid .card-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 24px; }

/* --- 10.4 Ansprechpartner (LGH-244) ------------------------------------- */
.brand-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tuic-blue-60);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px; }

.contact-card-content {
  display: flex;
  gap: 24px;
  align-items: flex-start; }

.contact-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--tuic-blue-05);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }

.contact-avatar svg {
  width: 40px;
  height: 40px;
  stroke: var(--tuic-blue-40);
  fill: none;
  stroke-width: 1.6; }

.contact-avatar-sm { width: 56px; height: 56px; }
.contact-avatar-sm svg { width: 28px; height: 28px; }
.contact-details { display: flex; flex-direction: column; gap: 8px; }
.contact-name { font-size: 18px; font-weight: 600; }
.contact-role { font-size: 14px; color: var(--tuic-blue-80); }

.contact-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--tuic-primary); }

.contact-info svg {
  width: 16px;
  height: 16px;
  stroke: var(--tuic-blue-80);
  fill: none;
  stroke-width: 1.6;
  flex-shrink: 0; }

/* --- 10.5 Agenturdaten (LGH-246) ---------------------------------------- */
.agency-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; }

.agency-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tuic-blue-60);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px; }

.agency-field span { font-size: 16px; font-weight: 400; }
.agency-field.full { grid-column: 1 / -1; }

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--tuic-radius-lg);
  background: var(--tuic-primary);
  color: var(--tuic-white);
  font-size: 12px;
  font-weight: 600; }

/* --- 10.6 Newsletter (LGH-245) ------------------------------------------ */
.newsletter-intro {
  font-size: 14px;
  color: var(--tuic-blue-80);
  margin-bottom: 20px;
  line-height: 1.6; }

.newsletter-section { margin-bottom: 20px; }

.newsletter-section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--tuic-blue-80); }

.newsletter-list { display: flex; flex-direction: column; gap: 12px; }

.nl-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none; }

.nl-box {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--tuic-blue-40);
  border-radius: var(--tuic-radius-sm);
  background: var(--tuic-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: 1px; }

.nl-check[data-checked="true"] .nl-box {
  border-color: var(--tuic-primary);
  background: var(--tuic-primary); }

.nl-check[data-checked="true"] .nl-box::after {
  content: '';
  width: 6px;
  height: 11px;
  border: solid var(--tuic-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px; }

.nl-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tuic-text); }

.newsletter-actions { margin-top: 24px; }

/* --- 10.7 Umsatzdaten (LGH-247) ----------------------------------------- */
.revenue-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--tuic-blue-10); }

.revenue-tab {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tuic-blue-60);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  background: none;
  font-family: var(--tuic-font); }

.revenue-tab.active {
  color: var(--tuic-primary);
  border-bottom-color: var(--tuic-primary); }

.revenue-years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; }

.revenue-year {
  background: var(--tuic-blue-05);
  border-radius: var(--tuic-radius-md);
  padding: 20px; }

.revenue-year-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }

.revenue-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--tuic-blue-10);
  font-size: 13px; }

.revenue-row:last-child {
  border-bottom: none;
  font-weight: 600;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 2px solid var(--tuic-blue-20); }

.revenue-row .label { color: var(--tuic-blue-80); }
.revenue-row .value { font-weight: 600; text-align: right; }

.revenue-row .sub {
  padding-left: 12px;
  font-size: 12px;
  color: var(--tuic-blue-60); }

.revenue-meta {
  margin-top: 20px;
  padding: 16px;
  background: var(--tuic-blue-05);
  border-radius: var(--tuic-radius-md);
  font-size: 12px;
  color: var(--tuic-blue-80);
  line-height: 1.6; }

.revenue-meta strong { font-weight: 600; color: var(--tuic-primary); }

/* --- 10.8 Cockpit Responsive --------------------------------------------- */
@media (max-width: 768px) {
  .cockpit-container { padding: 24px 16px; overflow-x: hidden; }
  .anon-title, .cockpit-title { font-size: 32px; }
  .anon-overline, .cockpit-overline { font-size: 20px; }
  .anon-cards { grid-template-columns: 1fr; }
  .cockpit-grid { grid-template-columns: 1fr; min-width: 0; }
  .cockpit-grid .card { padding: 24px 16px; min-width: 0; }
  .revenue-years { grid-template-columns: 1fr; }
  .agency-grid { grid-template-columns: 1fr; }
  .contact-card-content { flex-wrap: wrap; }
}