/*!
 * Bootstrap v3.3.6 base (shipped with Power Pages legacy templates)
 * Your custom theme overrides start below.
 */

/* ---------------------------------------------
   1) GLOBAL / BASELINE
   --------------------------------------------- */

/* Load Work Sans (not actually used below as the first choice, but available) */
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* Set default body typography and vertical rhythm */
body {
  font-family: area-normal, Helvetica, Arial, sans-serif; /* area-normal first, then standard fallbacks */
  font-size: 1.4rem; /* comfortable base size (≈14px if root is 10px) */
  line-height: 1.4em; /* readable leading */
}

/* Field labels across forms */
.field-label {
  color: #091267; /* brand navy */
}

/* ---------------------------------------------
   2) THEME TOKENS (CSS CUSTOM PROPERTIES)
   Use these for quick color/shape tweaks site-wide.
   --------------------------------------------- */
:root {
  /* Links */
  --link-color: #000;
  --link-color-focus: #091267;

  /* Button defaults (applies to .btn-default, primary, success, info, etc.) */
  --btn-border-radius: 0.5rem;
  --btn-text-decoration-focus: underline;

  /* Default button */
  --btn-default-color: #fff;
  --btn-default-background-color: #091267;
  --btn-default-border-color: #091267;
  --btn-default-color-focus: #fff;
  --btn-default-background-color-focus: #091267;
  --btn-default-border-color-focus: #091267;

  /* Primary button (gold) */
  --btn-primary-color: #091267;
  --btn-primary-background-color: #e7c569;
  --btn-primary-border-color: #e7c569;
  --btn-primary-color-focus: #091267;
  --btn-primary-background-color-focus: #e7c569;
  --btn-primary-border-color-focus: #e7c569;

  /* Info button (white on white; looks like link/ghost) */
  --btn-info-color: #000;
  --btn-info-background-color: #fff;
  --btn-info-border-color: #fff;
  --btn-info-color-focus: #000;
  --btn-info-background-color-focus: #fff;
  --btn-info-border-color-focus: #fff;

  /* Success button re-skinned to gold */
  --btn-success-color: #091267;
  --btn-success-background-color: #e7c569;
  --btn-success-border-color: #e7c569;
  --btn-success-color-focus: #091267;
  --btn-success-background-color-focus: #e7c569;
  --btn-success-border-color-focus: #e7c569;

  /* Navbar & dropdown focus/hover colors */
  --dropdown-menu-link-focus-color: #000;
  --dropdown-menu-background-link-focus-color: #f5f5f6;
  --navbar-background-color-focus: #f5f5f6;
  --navbar-inverse-color-focus: #000;
  --navbar-inverse-background-color-focus: #f5f5f6;
  --navbar-inverse-border-color-focus: #f5f5f6;

  /* Pagination focus ring */
  --pagination-background-color-focus: #98c9e3;
  --pagination-border-color-focus: #98c9e3;

  /* Alert palette (brand-aligned) */
  --alert-success-color: #091267;
  --alert-success-background-color: #e3f5ff;
  --alert-success-border-color: #e3f5ff;

  --alert-info-color: #091267;
  --alert-info-background-color: #98c9e3;
  --alert-info-border-color: #98c9e3;

  --alert-warning-color: #091267;
  --alert-warning-background-color: #e7c569;
  --alert-warning-border-color: #e7c569;

  --alert-danger-color: #091267;
  --alert-danger-background-color: #e78669;
  --alert-danger-border-color: #e78669;

  /* Custom menu panel palette */
  --custom-meny-panel-color: #000;
  --custom-meny-panel-background-color: #f5f5f6;
  --custom-meny-panel-border-color: #f5f5f6;
  --custom-meny-list-item-background-color-focus: #e3f5ff;

  /* Footer palette */
  --footer-color: #fff;
  --footer-link-color: #fff;
  --footer-background-color: #091267;

  /* Page background */
  --background-color: #fff;

  /* Form input styling */
  --input-border-color: #000;

  /* Table striping */
  --table-td-odd-color: #f5f5f6;
}

/* Membership callout box (used in profile/employment) */
div.membership-box {
  border: 1px solid #091267;
  padding: 15px;
  border-radius: 20px;
}

/* Underlined headings helper */
h1.underline,
h4.underline {
  border-bottom: 1px solid #bcbcbc;
  padding-bottom: 21px;
}

/* Small utility: center text on mobile only */
@media (max-width: 767px) {
  .text_center-mobile {
    text-align: center;
  }
}

/* ---------------------------------------------
   3) BUTTONS, BREADCRUMBS, PAGINATION
   --------------------------------------------- */

/* Large “home” CTA */
.btn-lg-home {
  padding: 20px 40px;
  font-size: 15px;
}

/* Ghosty info button that inverts on hover/focus */
.btn-info-home {
  color: #fff;
  border-color: #fff;
  background: transparent;
}
.btn-info-home:hover,
.btn-info-home:active,
.btn-info-home:focus {
  color: #000;
  border-color: #000;
  background: #fff;
}

/* Breadcrumb visual tweaks */
.breadcrumb > li a,
.breadcrumb > li a:hover {
  text-decoration: none;
  color: #666666;
}
.breadcrumb > .active {
  font-weight: bold;
}

/* Minimalist pagination (no borders; circular active pill) */
.pagination > li > a,
.pagination > li > span {
  background-color: transparent;
  border: 0;
  margin-left: 10px;
  width: 40px;
  height: 40px;
  text-align: center;
}
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
  background-color: transparent;
  border-color: transparent;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  border-color: transparent;
  border-radius: 50%;
}

/* ---------------------------------------------
   4) NAVBAR (HEADER)
   – Removes default borders, controls spacing/brand, menu hover line
   --------------------------------------------- */

.navbar-fixed-top,
.navbar-static-top {
  border-width: 0;
}
.navbar-static-top {
  margin-bottom: 0;
}
.navbar-default {
  border-color: transparent;
}

/* Home link in top bar (keeps white text, no underline) */
.homelink,
a.homelink:hover,
a.homelink:focus {
  color: #fff;
  text-decoration: none;
}

/* Keep top bar compact */
.navbar-fixed-top.navbar {
  min-height: 67px;
}
.navbar-fixed-top.navbar .navbar-collapse {
  max-height: 510px;
  box-shadow: none;
  border-top: none;
  padding-top: 8px;
}
.navbar-fixed-top.navbar .navbar-form {
  border: none;
  margin-left: 0;
  margin-right: 0;
}
.navbar-fixed-top.navbar .navbar-form .form-control {
  font-size: 1em;
}

/* Same for .navbar-static-top */
.navbar-static-top.navbar .navbar-collapse {
  max-height: 510px;
  box-shadow: none;
  border-top: none;
}
.navbar-static-top.navbar .navbar-form {
  border: none;
  margin-left: 0;
  margin-right: 0;
}
.navbar-static-top.navbar .navbar-form .form-control {
  font-size: 1em;
}

/* Hide register bar on desktop (shown on mobile) */
@media (min-width: 992px) {
  .fix-navbar .register-bar {
    display: none;
  }
}

/* Inline-block layout for header grid so items align bottom */
.navbar-fixed-top.navbar > .container > .row > div,
.navbar-static-top.navbar > .container > .row > div {
  float: none !important;
  display: inline-block;
  vertical-align: bottom;
}

/* Menu item typography */
.navbar-fixed-top.navbar .menu-bar > .navbar-nav > li > a,
.navbar-static-top.navbar .menu-bar > .navbar-nav > li > a {
  font-family: Arial, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
}

/* Vertical separators between menu items (desktop only) */
.navbar-fixed-top.navbar .menu-bar > .navbar-nav > .divider-vertical {
  height: 21px;
  margin: 14.5px 4px 0;
  border-right: 1px solid #fff;
  border-left: 1px solid #666;
}
.navbar-static-top.navbar .menu-bar > .navbar-nav > .divider-vertical {
  height: 21px;
  margin: 14.5px 4px 0;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
}

/* Brand position/size */
.navbar-fixed-top .navbar-brand,
.navbar-static-top .navbar-brand {
  font-size: 2.11em;
  font-family: Arial, sans-serif;
  color: #232222;
  position: relative;
}
@media (max-width: 1200px) {
  .navbar-fixed-top .navbar-brand,
  .navbar-static-top .navbar-brand {
    position: initial;
    height: 42px;
  }
}
.navbar-fixed-top .navbar-header {
  padding-top: 8px;
}

/* Color scheme: inverse navbar on white background */
.navbar-fixed-top.navbar-inverse {
  background-color: #fff;
  border-color: transparent;
}
.navbar-fixed-top.navbar-inverse .navbar-brand {
  color: #fff;
} /* likely a legacy detail */
.navbar-fixed-top.navbar-inverse .divider-vertical {
  border-right-color: #fff;
  border-left-color: #111;
}

.navbar-static-top.navbar-inverse {
  background-color: var(--background-color);
  border-color: transparent;
}
.navbar-static-top.navbar-inverse .navbar-brand {
  color: #000;
}
.navbar-static-top.navbar-inverse .divider-vertical {
  border-right-color: #fff;
  border-left-color: #111;
}

/* === Force navbar dropdown open state to blue background + white text === */
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  background-color: #091267 !important; /* dark blue */
  color: #fff !important;
  border-bottom: none !important;
}

/* === Dropdown panel background === */
.navbar-inverse .dropdown-menu {
  background-color: #091267 !important; /* dark blue panel */
  border-color: #091267 !important;
}

/* === Dropdown menu items default text === */
.navbar-inverse .dropdown-menu > li > a {
  color: #fff !important;
}

/* === Dropdown menu items hover with light transparent blue === */
.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > li > a:focus {
  background-color: rgba(
    135,
    206,
    235,
    0.5
  ) !important; /* light sky blue with 50% opacity */
  color: #fff !important;
}

/* Slightly tighter padding on smaller screens */
@media (max-width: 1199px) {
  .navbar-inverse .navbar-nav > li > a:hover {
    padding-bottom: 6px;
  }
}

/* Cart icon badge in menu */
.menu-bar .shopping_link {
  position: relative;
}
.menu-bar .shopping_link .cart_amount {
  position: absolute;
  bottom: 6px;
  right: -6px;
  width: 17px;
  height: 17px;
  border-radius: 100%;
  background-color: #2f5fef;
  line-height: 17px;
  font-size: 9px;
  padding-left: 1.9px;
  color: #fff;
}

/* Hide vertical dividers on tablet/mobile */
@media (max-width: 1199px) {
  .navbar-fixed-top .navbar-collapse .nav > .divider-vertical,
  .navbar-static-top .navbar-collapse .nav > .divider-vertical {
    display: none;
  }
}
/* Stack header regions on mobile */
@media (max-width: 767px) {
  .navbar-fixed-top.navbar > .container > .row > div,
  .navbar-static-top.navbar > .container > .row > div {
    display: block;
  }
  .navbar-header {
    position: relative;
  }
}

/* ---------------------------------------------
   5) PANELS / ACCORDIONS / CARDS
   --------------------------------------------- */

/* Flatten Bootstrap panels (no shadows) */
.panel {
  box-shadow: 0 0 0 transparent;
}
.panel-group {
  margin-bottom: 21px;
}
.panel-group.border-bottom {
  border-bottom: 1px solid #bcbcbc;
  padding-bottom: 84px;
}
.panel-group .panel {
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.panel-group .panel + .panel {
  margin-top: 5px;
}
.panel-group .panel-heading {
  border-bottom: 0;
}
.panel-group .panel-heading .panel-title a {
  text-decoration: none;
}
.panel-group .panel-heading .panel-title a:hover {
  color: #2f5fef;
}
/* Adds custom expand/collapse chevron via background-position sprite */
.panel-group .panel-heading .panel-title a:before {
  content: " ";
  display: inline-block;
  width: 22px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: -92px -5px;
  margin-right: 10.5px;
}
.panel-group .panel-heading .panel-title a.collapsed:before {
  background-position: -5px -126px;
}
.panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: none;
}

/* ---------------------------------------------
   6) PAGE STRUCTURE & DECOR
   – Layers, sections, wrappers, hero, search stripes
   --------------------------------------------- */

body {
  padding-top: 0;
  height: 100%;
  display: flex;
  flex-direction: column; /* sticky footer layout */
}

/* Decorative layers for section transitions (uses PNG web files) */
.layer_down {
  height: 50px;
  background: url("layer_down.png") no-repeat bottom center;
  position: absolute;
  bottom: 0;
  z-index: 900;
  width: 100%;
}
.layer_up {
  height: 40px;
  background: url("layer_up.png") no-repeat bottom center;
  position: relative;
  z-index: 20;
}

.section-margin {
  margin: 21px 0;
}
.color-inverse,
.color-inverse h1,
.color-inverse h2,
.color-inverse h3 {
  color: #fff;
}

/* “Inline search” band with background image */
.section-inline-search {
  background: url("helpdesk.png") no-repeat;
  background-size: cover;
}
.section-inline-search .row > div {
  margin-top: 100px;
}
.section-inline-search .row > div h1 {
  color: #fff;
}
@media screen and (max-width: 600px) {
  .section-inline-search .row > div h1 {
    font-size: 16vw;
  } /* responsive headline */
}
/* Large input group styling in search band */
.section-inline-search .input-group {
  margin-right: 21px;
}
.section-inline-search .input-group .input-group-addon {
  background-color: #fff;
  border-right: none;
}
.section-inline-search .input-group .form-control {
  height: 60px;
  border-left: none;
  box-shadow: none;
}

/* Wrapper ensuring 16:9 contained areas when needed */
.wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  transition: width 0.3s ease-out;
}
.wrapper .contained {
  position: relative;
  height: 400px;
  padding-bottom: 56.25%;
} /* 16:9 */
.wrapper .contained > svg {
  margin-top: -100px;
  position: absolute;
  display: block;
}

/* ---------------------------------------------
   7) FOOTER
   – Uses CSS variables for quick theming
   --------------------------------------------- */

footer {
  position: relative;
  color: var(--footer-color) !important;
  background-color: var(--footer-background-color);
}
footer a {
  color: var(--footer-link-color);
}
footer a:hover,
a:focus,
a:active {
  color: var(--footer-color) !important;
  text-decoration: underline;
}
/* “Top” band (dark) and “bottom” band (brand color) */
footer .footer-top {
  width: 100%;
  min-height: 130px;
  background-color: #232222;
  display: flex;
  align-items: center;
}
footer .footer-top h3,
footer .footer-top h4 {
  color: var(--footer-color);
}
footer .footer-top .list-social-links {
  margin-top: 25px;
  margin-bottom: 12.5px;
}
@media screen and (max-width: 991px) {
  footer .footer-top h3,
  footer .footer-top .list-social-links {
    text-align: center;
  }
}
footer .footer-bottom {
  width: 100%;
  min-height: 36px;
  background-color: var(--footer-background-color);
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 40px 15px !important;
}
footer .footer-bottom h4,
.footer-bottom h3 {
  margin-top: 0;
  color: #fff;
}
footer .footer-bottom ul {
  list-style-type: none;
  margin: 0;
}
footer .footer-bottom ul li a,
footer .footer-bottom ul li a:hover,
footer .footer-bottom ul li a:focus,
footer .footer-bottom ul li a:active,
footer .footer-bottom ul li a.active {
  font-size: 15px;
  color: #fff;
}

/* Social links list (inline) */
.list-social-links {
  list-style-type: none;
  padding-left: 0;
}
.list-social-links li {
  display: inline-block;
  margin: 0 10px;
}
.list-social-links li a,
.list-social-links li a:hover,
.list-social-links li a:focus,
.list-social-links li a:active,
.list-social-links li a.active {
  color: #fff;
}

/* ---------------------------------------------
   8) CONTENT STYLES: articles, search, media, carousel
   --------------------------------------------- */

/* Article striping and metadata */
.article-title-container {
  border-top: 1px solid #bcbcbc;
  border-bottom: 1px solid #bcbcbc;
  padding: 28px 0 28px 15px;
}
.article-title {
  margin-left: -35px;
}
.article-title > span {
  margin-left: 3px;
}
.article-title > span .article-author {
  font-weight: bold;
  color: #2f5fef;
}
.article-content {
  margin-top: 15px;
}
.article-content > p {
  text-align: justify;
}
@media screen and (max-width: 993px) {
  .article-title {
    margin-left: 0;
    text-align: center;
  }
  .article-author {
    text-align: center;
  }
}

/* Search page header band + form controls */
.section-search .header-search {
  padding: 40px 0;
  margin-bottom: 40px;
  background-color: #eee;
}
.section-search .header-search img {
  max-width: 350px;
}
@media screen and (max-width: 600px) {
  .section-search .header-search h1 {
    font-size: 13vw;
  }
}
.section-search .title-search {
  font-size: 26px;
  font-weight: bold;
}
.section-search input {
  border-style: none;
  padding-left: 10px;
  height: 60px;
}

/* Carousel tweaks: centered captions, brand indicators */
.carousel-custom .carousel-inner > .item {
  margin-left: auto;
  margin-right: auto;
}
.carousel-custom .carousel-inner > .item .carousel-caption {
  display: flex;
  align-items: center;
  top: 5%;
  left: 5%;
  right: 5%;
}
.carousel-custom .carousel-indicators li {
  border-color: #232222;
}

/* ---------------------------------------------
   9) POLL / SIDEBAR NAV (left nav) / DROPDOWN SEARCH
   --------------------------------------------- */

/* Poll widget look (grey card with blue top border) */
.poll {
  background-color: #eee;
  border-top: 7px solid #0b80d0;
  position: relative;
  padding: 0 15px;
}
.poll .poll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #bcbcbc;
  padding-bottom: 5px;
}
.poll .poll-content {
  padding-top: 25px;
}

/* Side navigation (multi-level) with right border and glyph before link */
.nav-sidebar {
  padding-left: 20px;
  margin: 20px 0;
}
.nav-sidebar .nav > li > a {
  padding: 4px 20px;
  color: #2f5fef;
  border-right: 2px solid #eee;
}
.nav-sidebar .nav > li > a:hover,
.nav-sidebar .nav > li > a:focus {
  color: #232222;
  background-color: transparent;
  text-decoration: none;
  border-right: 2px solid #555;
}
.nav-sidebar .nav > .active > a {
  color: #232222;
  background-color: transparent;
  border-right: 2px solid #555;
  font-weight: bold;
}

/* Compact dropdown search in navbar (no shadows) */
#navbar .dropdown-menu {
  margin-top: 8px;
}
#navbar .dropdown-search {
  padding-top: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 9px;
}
#navbar .dropdown-search #q,
#navbar .dropdown-search #q_id {
  min-width: 200px;
}
@media (max-width: 1199px) {
  #navbar .dropdown-search .input-group-btn {
    vertical-align: top;
  }
  #navbar .dropdown-search #search-filter {
    width: 100%;
    text-align: left;
    padding-left: 25px;
  }
  #navbar .dropdown-search.dropdown-menu > li:hover,
  #navbar .dropdown-search .dropdown-menu > li:hover {
    color: white;
    background-color: transparent;
  }
}

/* ---------------------------------------------
   10) VALIDATION COLORS / ACCESSIBILITY FIXES
   --------------------------------------------- */

/* Match Bootstrap “has-error” tone for various portal survey controls */
.help-block.error,
label.control-label.required:before,
.crmEntityFormView .cell div.info.required label:after,
.crmEntityFormView .cell div.info div.validators,
.crmEntityFormView .validator-text,
.crmEntityFormView .rank-order-cell .validator-text,
.crmEntityFormView .constant-sum-cell .validator-text,
.crmEntityFormView .stack-rank-cell .validator-text {
  color: #a94442;
}

/* High contrast tweaks for toggler bars (IE/Edge modes) */
@media screen and (-ms-high-contrast: active) {
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
  }
  .navbar-inverse .navbar-toggle .icon-bar {
    background-color: #fff;
  }
}

/* ---------------------------------------------
   11) CUSTOMER-SPECIFIC UTILITIES & SECTIONS
   – Blue borders, hero sections, home content, sidebar-home
   --------------------------------------------- */

.no-lr-margins {
  margin-left: 0;
  margin-right: 0;
}

/* Black default button variant */
.btn-default-black {
  color: black;
  border-color: black;
}
.btn-default-black:hover {
  color: black;
  border-color: black;
  background: #2f5fef;
}

/* Blue underline separator */
.blue_border {
  padding-bottom: 10px;
  border-bottom: 7px solid #0b80d0;
}

/* Generic page section scaffolding + headings scale */
.page_section {
  position: relative;
  background-size: cover;
  color: #000;
}
.page_section .row {
  padding-top: 25px;
  padding-bottom: 100px;
}
.page_section .row.sidebar-home {
  padding-bottom: 0;
}
.page_section h1 {
  font-size: 71px;
}
.page_section h2 {
  color: #666;
  font-size: 40px;
}
.page_section h3 {
  font-size: 66px;
  font-family: Arial, sans-serif;
}
.page_section p {
  border-top: 1px solid #666;
  padding-top: 5px;
}
.page_section .btn {
  margin-top: 50px;
}
.page_section .form-search .btn {
  margin-top: 0;
}

/* Hero (landing) backgrounds and skewed sections (diagonal bands) */
.section-diagonal-left {
  transform: skew(0deg, -1.3deg);
  overflow: hidden;
  margin: -60px 0 -20px;
}
.section-diagonal-right {
  transform: skew(0deg, 1.3deg);
  overflow: hidden;
  margin: 60px 0 -20px;
}
.section-diagonal-right.home-section {
  margin-top: -60px;
}
.section-diagonal-left .section-diagonal-left-content {
  transform: skew(0deg, 1.3deg);
  background: url("homethumbnail2.jpg") no-repeat 0 20%;
  background-size: cover;
  margin-top: -70px;
}
.section-diagonal-left .section-diagonal-left-content:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;
  z-index: -1;
  background-color: #fff; /* soft overlay */
}
.section-diagonal-right .section-diagonal-right-content {
  transform: skew(0deg, -1.3deg);
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("homethumbnail4.jpg") no-repeat;
  background-size: cover;
  margin-top: -70px;
}
.section-diagonal-right .section-diagonal-right-content:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.8;
  z-index: -1;
  background-color: #2f5fef; /* brand tint */
}

/* Landing hero */
.section-landing {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("homehero.jpg") no-repeat center;
  background-size: cover;
}
.section-landing .row > div {
  margin-top: 80px;
}
/* Big uppercase headings on hero */
.section-landing .section-landing-heading {
  font-size: 8rem;
  color: #fff;
  text-transform: uppercase;
}
@media screen and (max-width: 600px) {
  .section-landing .section-landing-heading {
    font-size: 16vw;
  }
}
.section-landing .section-landing-sub-heading {
  margin: 0 0 50px;
  font-size: 4.3rem;
  color: #fff;
  letter-spacing: 19px;
  text-transform: uppercase;
}

/* Sub-landing & default sections (alternative hero bands) */
.section-sub-landing {
  background: linear-gradient(rgba(0, 0, 0, 0.5), #07aaf6),
    url("homethumbnail1.jpg") no-repeat center;
  background-size: cover;
}
.section-default {
  background: url("homethumbnail3.jpg") no-repeat center;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .section-default:before {
    /* darken on mobile for text contrast */
    content: " ";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.59) 41%,
      rgba(0, 0, 0, 0.62) 43%,
      black 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
  }
}
.section-default .row {
  padding-bottom: 150px;
}

/* Home content lists styled as transparent panels/links */
.content-home .btn {
  margin-top: 0;
}
.content-home .panel {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.content-home .list-group-item {
  padding: 20px 0;
  font-size: 20px;
  background-color: transparent;
  border: 0;
  border-top: 1px solid #ddd;
}
.content-home a.list-group-item,
.content-home .list-group-item a.title {
  color: #232222;
}
.content-home a.list-group-item:hover,
.content-home .list-group-item a.title:hover {
  color: #232222;
  text-decoration: underline;
  background-color: transparent;
}
.content-home .title {
  font-size: 24px;
  font-family: Arial, sans-serif;
}

/* Sidebar-home card (grey box with blue top border) */
.sidebar-home {
  background-color: #eee;
  border-top: 7px solid #0b80d0;
  margin-top: 36px;
  position: relative;
}
.sidebar-home .panel {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar-home .panel-title {
  font-size: 14px;
  color: #2f5fef;
  font-family: Arial, sans-serif;
}
.sidebar-home .list-group-item {
  padding-left: 0;
  font-size: 14px;
  background-color: transparent;
  border: 0;
}
.sidebar-home .list-group-item:hover {
  text-decoration: underline;
  background-color: transparent;
}
.sidebar-home .list-group-item .date {
  visibility: hidden;
}

/* ---------------------------------------------
   12) CUSTOM COMPONENTS (menus, cards, buttons)
   --------------------------------------------- */

/* Makes the main content flex, enabling sticky footer */
.content-wrapper {
  flex: 1 0 auto;
  background-color: var(--background-color);
  padding-bottom: 15px;
}

/* Left “custom menu” card */
.custom-meny-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--custom-meny-panel-background-color);
  border: 1px solid var(--custom-meny-panel-border-color);
  color: var(--custom-meny-panel-color);
  border-radius: 12px;
}
.custom-meny-header {
  margin-top: 20px;
  margin-left: 3rem;
  font-weight: 600;
  min-height: 2.5rem;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.custom-meny-list {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100;
  padding: 0;
}
.custom-meny-list-item {
  min-height: 35px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 4rem;
}
/* Hover/active/focus background highlight */
.custom-meny-list-item:hover,
.custom-meny-list-item:active,
.custom-meny-list-item:focus {
  background-color: #98c9e3;
}

.custom-meny-list-item-container {
  min-height: 2.5rem;
  height: 2.5 rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding-left: 0.285714rem;
  flex-grow: 1;
  overflow: hidden;
  align-self: stretch;
  align-items: center;
}

.custom-meny-list-item-link {
  display: flex;
  flex-direction: row;
  color: #000;
  text-decoration: none;
}
.custom-meny-list-item-link:hover,
.custom-meny-list-item-link:active,
.custom-meny-list-item-link:focus {
  color: #000;
  text-decoration: none;
}

.custom-meny-list-item-img-container {
  min-width: 16px;
  width: 16px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-meny-list-item-img {
  height: 16px;
  width: 16px;
  vertical-align: middle;
}

.custom-meny-list-item-title {
  display: inline-block;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  margin: 0 1rem;
}

/* Benefits/card layout */
.benefit-title {
  font-weight: 700;
  font-size: 25px;
}

/* Responsive card grid for “benefits/features” */
.custom-cards-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
@media (max-width: 409px) {
  .custom-cards-container {
    justify-content: center;
  }
}

.custom-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
  width: 32%;
  min-width: 180px;
  margin: 5px;
}
.custom-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.custom-card-img {
  width: 100%;
  border-radius: 5px 5px 0 0;
}
.custom-card-text {
  padding: 2px 16px;
  overflow-wrap: break-word;
}
.custom-card-link,
.custom-card-link:hover,
.custom-card-link:active,
.custom-card-link:focus {
  color: #666;
  text-decoration: none;
}

/* Unstyled dropdown content block (used inside nav/popovers) */
.custom-dropdown-menu {
  display: block;
  position: relative !important;
  left: unset !important;
  top: unset !important;
  border: 1px solid #2f5fef;
  background: #fff;
  box-shadow: none;
  margin: 0;
  padding: 0;
  color: #2f5fef;
}

/* Disabled button look for non-interactive states */
.custom-inactive-button,
.custom-inactive-button:hover,
.custom-inactive-button:active,
.custom-inactive-button:focus {
  color: #fff;
  background-color: #829ff5;
  border-color: #829ff5;
  cursor: default;
}

/* Inputs that should “look like text” */
.hidden-input,
.hidden-input:hover,
.hidden-input:active,
.hidden-input:focus {
  background-color: #fff !important;
  border: none;
  box-shadow: none;
  padding-left: 0;
}

/* Swap main menu panels on mobile: hide the desktop left menu, show an “under-menu” */
@media only screen and (max-width: 991px) {
  .custom-meny-panel {
    display: none;
  }
}
.custom-undermeny-panel {
  display: none;
}
@media only screen and (max-width: 991px) {
  .custom-undermeny-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.custom-undermeny-btn {
  width: 30%;
  margin: 15px 0;
}
@media only screen and (max-width: 425px) {
  .custom-undermeny-btn {
    width: 100%;
  }
}

/* ---------------------------------------------
   13) POWER VIRTUAL AGENTS (floating chat widget)
   --------------------------------------------- */
.pva-floating-style {
  position: fixed;
  right: 0;
  bottom: 0;
  margin-right: 16px;
  margin-bottom: 18px;
  z-index: 9999; /* stay above everything */
}

/* === Custom Hamburger Toggle Styling (Mobile Only) ===
   - Button is 60x36px
   - Blue (#091267) border with rounded edges
   - White background
   - 3 blue bars inside, evenly spaced
   - Hidden again on desktop
========================================================== */

/* MOBILE/TABLET ONLY — apply custom styling */
@media (max-width: 1199px) {
  .navbar-toggle,
  .navbar-inverse .navbar-toggle,
  .navbar-default .navbar-toggle {
    width: 60px !important; /* button width */
    height: 36px !important; /* button height */
    border: 2px solid #091267 !important; /* blue border */
    border-radius: 8px !important; /* rounded edges */
    background-color: #fff !important; /* white background */

    /* Flexbox centering for the 3 bars */
    display: flex !important;
    flex-direction: column;
    justify-content: center; /* vertical centering */
    align-items: center; /* horizontal centering */

    padding: 0 !important; /* reset Bootstrap padding */
    margin: 8px 15px; /* spacing from edges */
  }

  /* Bars inside the hamburger toggle */
  .navbar-toggle .icon-bar,
  .navbar-inverse .navbar-toggle .icon-bar,
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #091267 !important; /* blue bars */
    border: none !important; /* remove black outline */
    width: 28px !important; /* bar length */
    height: 2px !important; /* bar thickness */
    border-radius: 1px; /* slightly rounded ends */
  }

  /* Spacing between the 3 bars */
  .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 5px !important;
  }
}

/* DESKTOP ONLY — ensure the hamburger stays hidden */
@media (min-width: 1200px) {
  .navbar-toggle {
    display: none !important;
  }
}

/* === Dropdown divider line (above "Logg av") === */
.navbar-inverse .dropdown-menu > .divider,
.navbar-inverse .dropdown-menu .divider {
  background-color: #fff !important; /* white line */
  height: 1px;
  margin: 6px 0; /* spacing around divider */
  opacity: 0.9; /* slightly softened */
}

/* Desktop/default: strong, compact titles */
h1.page-title,
.page-title,
.page-header h1,
.display-4,
.entitylist-title {
  font-size: 24px !important; /* unified desktop size */
  font-weight: 700 !important; /* bold weight */
  line-height: 1.2 !important; /* tighter leading for headings */
}

/* Tablet & down: slightly smaller for fit/readability */
@media (max-width: 992px) {
  h1.page-title,
  .page-title,
  .page-header h1,
  .display-4,
  .entitylist-title {
    font-size: 18px !important; /* responsive scale */
  }
}

/* ========================================================================
   MUST-NEEDED OVERRIDE: Heading hierarchy fixes (H1 vs H3 on mobile)
   Ensures H3 is never larger than H1 on pages like Min profil, Mitt arbeidsforhold.
   Place at bottom of Theme CSS so it overrides earlier .page_section h3 styles.
   ======================================================================== */

/* Desktop & default */
h1,
.page-title,
.entitylist-title {
  font-size: 24px !important; /* Primary title */
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

h3 {
  font-size: 20px !important; /* Keep below H1 */
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Tablet & down (≤992px) */
@media (max-width: 992px) {
  h1,
  .page-title,
  .entitylist-title {
    font-size: 18px !important; /* Smaller but still dominant */
  }
  h3 {
    font-size: 16px !important; /* Ensure H3 stays smaller than H1 */
  }
}