/* GNB Design System — Custom Overrides
   Overrides for the Citizen Portal
   to align with the GNB design system.
   ----------------------------------------------------------------
   Load order: after citizen-portal-assets styles, after gnb-fonts-custom.css
   ---------------------------------------------------------------- */


/* ================================================================
   GLOBAL BUTTON BASE
   ================================================================ */

.btn {
  min-height: 47px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ================================================================
   LICENCES PAGE — Purchase a Licence button
   ================================================================ */

.btn.btn-fill.btn-primary:not(.select-field-hidden) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn.btn-fill.btn-primary.select-field-hidden {
  display: none !important;
}

.btn.btn-fill.btn-primary {
  align-items: center !important;
  background-color: #004a98 !important;
  border: 2px solid #004a98 !important;
  border-radius: 0.25rem !important;
  color: #ffffff !important;
  font-family: "Public Sans", Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  padding: 0.5rem 1.5rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: 0.2s ease-in-out !important;
}


.btn.btn-fill.btn-primary:hover,
.btn.btn-fill.btn-primary:focus {
  background-color: #1a6ed8 !important;
  border-color: #1a6ed8 !important;
  color: #ffffff !important;
}

.btn.btn-fill.btn-primary:focus {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.btn.btn-fill.btn-primary i {
  margin-right: 0.5rem !important;
}

@media screen and (max-width: 767px) {
  .btn.btn-fill.btn-primary,
  .btn.reprint-button {
    padding: 0.5rem 1.5rem !important;
    line-height: 1.5 !important;
  }
}


/* Reprint Licence — secondary button style */
.btn.btn-fill.btn-primary.reprint-button {
  background-color: transparent !important;
  border: 2px solid #004a98 !important;
  color: #004a98 !important;
}

.btn.btn-fill.btn-primary.reprint-button:hover,
.btn.btn-fill.btn-primary.reprint-button:focus {
  background-color: #004a98 !important;
  border-color: #004a98 !important;
  color: #ffffff !important;
}

.btn.btn-fill.btn-primary.reprint-button:focus {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.btn.reprint-button::before {
  content: '';
  display: inline-block !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23004a98'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") !important;
}

.btn.reprint-button:hover::before,
.btn.reprint-button:focus::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") !important;
}


/* Cart badge spacing */
.icon-padding + .badge {
  margin-left: 0.375rem !important;
  display: inline-block !important;
}


/* ================================================================
   LICENCES PAGE — main-content padding on mobile
   ================================================================ */

@media screen and (max-width: 991px) {
  .main-panel .main-content,
  #home.main-content,
  .main-content.main-login {
    padding-top: 2rem !important;
  }
}

@media screen and (max-width: 991px) {
  .guidingmain {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .logincard {
    margin-top: 6rem !important;
  }
}


/* ================================================================
   LICENCES PAGE — tabs flush against content card on larger screens
   ================================================================ */

.nav.nav-tabs + .col-md-12 .card {
  margin-top: 0 !important;
  border-top: none !important;
  border-radius: 0 0 0.25rem 0.25rem !important;
}



/* ================================================================
   LICENCES PAGE — card header and content padding on larger screens
   ================================================================ */

@media screen and (min-width: 992px) {
  .main-content .card .header {
    padding: 2rem 2rem 0rem 1.5rem !important;
  }

  .main-content .card .content {
    padding: 0 2rem 1.5rem !important;
  }
}

.main-content .card .category {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  color: #000 !important;
}

/* ================================================================
   DATATABLE FOOTER — page count and pager styling
   ================================================================ */

/* ================================================================
   LICENCES PAGE — datatable search input
   ================================================================ */

#mDataTable1_search_id,
[id^="mDataTable"][id$="_search_id"] {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  color: #000 !important;
  background-color: #ffffff !important;
  border: 2px solid #000 !important;
  border-radius: 0.25rem !important;
  padding: 0.5rem 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 1rem 0 !important;
  display: block !important;
}

[id^="mDataTable"][id$="_search_id"]:hover {
  background-color: #dae8f9 !important;
}

[id^="mDataTable"][id$="_search_id"]:focus {
  border-color: #000 !important;
  outline: 3px solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}


/* Expand/collapse row icon */
.expand-cell {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.expand-cell i,
.expand-cell span {
  vertical-align: middle !important;
}

.expand-cell i {
  font-size: 1.25rem !important;
  color: #004a98 !important;
}

.expand-cell span {
  font-size: 1rem !important;
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  color: #000 !important;
}


/* Table margin, header border, and cell padding */
.ngx-datatable {
  margin-top: 1.5rem !important;
}

.ngx-datatable .datatable-header {
  height: auto !important;
  border-bottom: 2px solid #000 !important;
}

.ngx-datatable .datatable-header-cell,
.ngx-datatable .datatable-body-cell {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  color: #000 !important;
}

.ngx-datatable .datatable-header-cell .datatable-header-cell-template-wrap {
  padding-bottom: 0.5rem !important;
}


.datatable-footer,
.ngx-datatable.bootstrap .datatable-footer {
  background: #eeeeee !important;
  color: #000 !important;
  border-radius: 0.25rem !important;
  padding: 0.75rem 1rem !important;
  margin-top: 0.5rem !important;
}

.datatable-footer .page-count,
.datatable-footer .selected-count,
.datatable-footer .total-result-count {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 0.875rem !important;
  color: #000 !important;
  background-color: transparent !important;
}

.datatable-footer .pager {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
}

.datatable-footer .pager li a {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 0.875rem !important;
  color: #004a98 !important;
  background-color: transparent !important;
  border: 1px solid #ddd !important;
  border-radius: 0.25rem !important;
  padding: 0.25rem 0.625rem !important;
  display: inline-block !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
}

.datatable-footer .pager li.active a {
  background-color: #004a98 !important;
  border-color: #004a98 !important;
  color: #fff !important;
}

.datatable-footer .pager li.disabled a {
  color: #999 !important;
  border-color: #eee !important;
  pointer-events: none !important;
}

.datatable-footer .pager li a:hover {
  background-color: #dae8f9 !important;
  color: #004a98 !important;
}

.datatable-footer .pager li.active a:hover {
  background-color: #1a6ed8 !important;
  color: #fff !important;
}



/* ================================================================
   DATATABLE — action column width override (Angular sets 100.25px inline, too narrow)
   ================================================================ */



/* ================================================================
   DATATABLE — widen action column to fit button
   ================================================================ */

@media screen and (min-width: 801px) {
  .datatable-body-cell.action-button,
  .datatable-header-cell.action-button {
    min-width: 170px !important;
    width: 170px !important;
  }

  .datatable-body-cell.action-button button[title="remove"] i {
    display: none !important;
  }

  .datatable-body-cell.action-button button[title="remove"]::before {
    content: '' !important;
    display: inline-block !important;
    width: 0.875rem !important;
    height: 0.875rem !important;
    margin-right: 0.25rem !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2379242f'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
  }

  .datatable-body-cell.action-button button[title="remove"]:hover::before,
  .datatable-body-cell.action-button button[title="remove"]:focus::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important;
  }

  .datatable-body-cell.action-button button[title="remove"] {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    gap: 0 !important;
    background-color: transparent !important;
    border: 2px solid #79242f !important;
    color: #79242f !important;
    padding: 0.25rem 0.5rem !important;
  }

  .datatable-body-cell.action-button button[title="remove"]:hover,
  .datatable-body-cell.action-button button[title="remove"]:focus {
    background-color: #79242f !important;
    border-color: #79242f !important;
    color: #ffffff !important;
  }

  .datatable-body-cell.action-button button[title="remove"]:focus {
    outline: 0.25rem solid #efb300 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }
}


/* ================================================================
   LICENCES PAGE — card fonts
   ================================================================ */

.main-content .card .header h4,
.main-content .card .header p,
.main-content .card .content p,
.main-content .card .content span:not(.button-label),
.main-content .card .content td,
.main-content .card .content th {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  color: #000000 !important;
}


/* ================================================================
   NAV TABS
   ================================================================ */

@media screen and (max-width: 767px) {
  .nav.nav-tabs {
    flex-direction: column !important;
    display: flex !important;
  }

  .nav.nav-tabs > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 0.5rem !important;
  }

  .nav.nav-tabs > li > a,
  .nav.nav-tabs > li > a:hover,
  .nav.nav-tabs > li > a:focus,
  .nav.nav-tabs > li.active > a,
  .nav.nav-tabs > li.active > a:hover,
  .nav.nav-tabs > li.active > a:focus {
    display: block !important;
    border-radius: 0.25rem !important;
    border: none !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
  }

  .nav.nav-tabs > li > a:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
}

.nav.nav-tabs {
  margin-left: 15px !important;
  margin-right: 15px !important;
  /* background-color: #006055 !important; */
  border-radius: 0.25rem 0.25rem 0 0 !important;
  padding: 1rem 1rem 0 !important;
  border-bottom: none !important;
}

@media screen and (max-width: 767px) {
  .nav.nav-tabs {
    padding-bottom: 1rem !important;
  }
}

.nav.nav-tabs > li > a {
  border-bottom: none !important;
  color: #ffffff !important;
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

@media screen and (min-width: 768px) {
  .nav.nav-tabs > li > a {
    padding-bottom: 0.75rem !important;
  }

  .nav.nav-tabs > li:not(.active) > a {
    padding-bottom: 0.75rem !important;
  }
}


.nav.nav-tabs > li > a:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: none !important;
}

.nav.nav-tabs > li.active > a,
.nav.nav-tabs > li.active > a:hover,
.nav.nav-tabs > li.active > a:focus {
  border-bottom: none !important;
  color: #000000 !important;
}


/* ================================================================
   CHOICE CARDS — styled to match .gnb-card
   ================================================================ */

/* Card base */
.fullbackground .nav-card .choice,
.fullbackground .nav-card .choice table,
.fullbackground .nav-card .choice td {
  text-align: left !important;
}

.fullbackground .nav-card .choice {
  background-color: #ffffff !important;
  /*! border: 1px solid #ddd !important; */
  /*! border-radius: 0.25rem !important; */
  /*! box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important; */
  color: #000 !important;
  display: flex !important;
  box-sizing: border-box !important;
  height: 100% !important;
  flex-direction: column !important;
  /*! position: relative !important; */
  overflow: hidden !important;
  transition: 0.2s ease-in-out !important;
  padding: 1.5rem !important;
}


/* Icon */
.fullbackground .nav-card .choice i {
  display: inline-block !important;
  width: 4rem !important;
  height: 4rem !important;
  line-height: 4rem !important;
  text-align: center !important;
  background-color: #eeeeee !important;
  border-radius: 100% !important;
  font-size: 1.875rem !important;
  color: #004a98 !important;
  margin-bottom: 1rem !important;
}

/* Heading */
.fullbackground .nav-card .choice h1 {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #004a98 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media screen and (min-width: 768px) {
  .fullbackground .nav-card .choice h1 {
    font-size: 1.5rem !important;
  }
}

/* Page background */
body {
  background-color: #eeeeee !important;
}

/* fullbackground section */
.fullbackground {
  background-color: transparent !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: -160px !important;
}

/* Remove fixed heights and default margin from nav-card */
.fullbackground .nav-card {
  height: auto !important;
  margin-bottom: 30px !important;
}

.fullbackground .nav-card .choice {
  min-height: unset !important;
}

/* Table fills the card and shows all rows */
.fullbackground .nav-card .choice table {
  width: 100% !important;
  height: auto !important;
}

.fullbackground .nav-card .choice .choice-detail {
  display: table-row !important;
  visibility: visible !important;
}

/* Detail text */
.fullbackground .nav-card .choice p {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  color: #000 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* Hover / active */
.fullbackground .nav-card:hover .choice,
.fullbackground .nav-card:active .choice {
  background-color: #004a98 !important;
  border-color: #004a98 !important;
  color: #ffffff !important;
}

.fullbackground .nav-card:hover .choice h1,
.fullbackground .nav-card:active .choice h1,
.fullbackground .nav-card:hover .wrapper-anchor,
.fullbackground .nav-card:active .wrapper-anchor {
  color: #ffffff !important;
}

.fullbackground .nav-card:hover .choice p,
.fullbackground .nav-card:active .choice p {
  color: #ffffff !important;
}

.fullbackground .nav-card:hover .choice i,
.fullbackground .nav-card:active .choice i {
  background-color: #eeeeee !important;
  color: #004a98 !important;
}

.fullbackground .nav-card:active .choice {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
}


/* ================================================================
   HERO BANNER — heading and lead text styles
   Copied from gnb.css .guidingtitle added to match the Citizen Portal's existing class
   ================================================================ */

/* Landing choices top padding */
.landing-choices {
  padding-top: 3.5rem !important;
}

/* Navbar — match gnb-header height, layout and shadow */
.navbar.navbar-default.navbar-custom.navbar-fixed-top {
  height: auto !important;
  min-height: unset !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

/* Logo container — match gnb-header .logo padding */
#nav-header {
  padding: 0.5rem 1rem !important;
  margin: 0 auto 0 0 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

@media screen and (min-width: 768px) {
  #nav-header {
    padding: 0.2rem 1.5rem !important;
  }
}

/* Navbar brand — remove absolute positioning from client.css */
#nav-header .navbar-brand {
  position: static !important;
  width: auto !important;
  height: auto !important;
  pointer-events: auto !important;
  display: block !important;
  padding: 0 !important;
}

/* Navbar fonts */
.navbar .navbar-nav > li > a,
.navbar .navbar-nav > li > a > p,
.navbar .navbar-nav > li > a .button-label,
ul.navbar-left > li > a > p,
ul.navbar-right > li > a > p {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #000000 !important;
}

/* Navbar link hover states */
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus {
  background-color: transparent !important;
  text-decoration: underline !important;
}

.navbar .navbar-nav > li > a:hover p,
.navbar .navbar-nav > li > a:focus p,
.navbar .navbar-nav > li > a:hover .button-label,
.navbar .navbar-nav > li > a:focus .button-label {
  color: #004a98 !important;
}

/* Navbar — push links to right at desktop (matches Bootstrap hamburger breakpoint) */
.navbar.navbar-default.navbar-custom.navbar-fixed-top .container-fluid {
  display: flex !important;
  /* flex: 1 !important; */
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0 1rem !important;
}

@media screen and (min-width: 992px) {
  .navbar.navbar-default.navbar-custom.navbar-fixed-top .navbar-collapse {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
  }
}

/* Logo image — match gnb-header .logo img */
#logoimg {
  height: 2rem !important;
  width: auto !important;
  max-height: unset !important;
  margin: 0 !important;
  margin-top: 0 !important;
  opacity: 1 !important;
  display: block !important;
}

@media screen and (min-width: 768px) {
  #logoimg {
    height: 2.5rem !important;
  }
}

/* Login card content — remove 66% width constraint */
.logincard .content.center-form {
  width: 100% !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-bottom: 2rem !important;
  padding-top: 2rem !important;
}

/* ================================================================
   SIGN-IN FORM CONTENT — styled to match sign-in-example.html
   ================================================================ */

/* Form max-width and centring — matches .gnb-fws-form-container form */
.logincard .content.center-form form {
  max-width: 520px !important;
  margin: 0 auto !important;
}

/* Labels */
.logincard .content .fixedLabel .label-text,
.logincard .content label {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #000 !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
  background-color: transparent !important;
}

/* Inputs */
.logincard .content .form-control.nsw-form-input {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  color: #000 !important;
  background-color: #ffffff !important;
  border: 2px solid #646974 !important;
  border-radius: 0.25rem !important;
  padding: 0.5rem 0.75rem !important;
  width: 100% !important;
  display: block !important;
  /*margin-bottom: 1rem !important;*/
}

.logincard .content .form-control.nsw-form-input:focus {
  border-color: #004a98 !important;
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
}

/* h3 headings in content — sizes match gnb.css, margins corrected to design system */
.logincard .content h3,
.logincard .guiding-bottom h3 {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 2rem 0 1rem 0 !important;
  background-color: transparent !important;
  text-align: left !important;
}

/* List item padding */
.logincard .content li,
.logincard .guiding-bottom li {
  padding-bottom: 0.5rem !important;
}

/* Body text in content */
.logincard .content p,
.logincard .content li,
.logincard .guiding-bottom p,
.logincard .guiding-bottom li {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #000000 !important;
  background-color: transparent !important;
  text-align: left !important;
}

/* Remove force-center in content */
.logincard .content .force-center,
.logincard .guiding-bottom .force-center {
  text-align: left !important;
}

/* Links in content */
.logincard .content a,
.logincard .guiding-bottom a {
  color: #004a98 !important;
  text-decoration: underline !important;
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
}

.logincard .content a:hover,
.logincard .guiding-bottom a:hover {
  text-decoration: none !important;
}

/* Global link and button focus — brand yellow, kill client.css blue box-shadow */
a:focus,
button:focus {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 1 !important;
  box-shadow: none !important;
}

/* Login card header — styled to match .gnb-fws-container-header */
.logincard .header {
  background-color: #006055 !important;
  border-radius: 0.25rem 0.25rem 0 0 !important;
  padding: 2rem 1rem !important;
}

@media screen and (min-width: 992px) {
  .main-content .card.logincard .header {
    padding: 3rem 1rem !important;
  }
}

.logincard .header h2,
.logincard .header p,
.logincard .header a,
.logincard .header .force-center {
  background-color: transparent !important;
  color: #ffffff !important;
}

.logincard .header h2,
.logincard .header h2 .force-center {
  font-family: "DM Serif Text", Georgia, "Times New Roman", serif !important;
  font-size: calc(1.5rem + 4.5vw) !important;
  font-weight: 400 !important;
  line-height: 1.125 !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  text-align: center !important;
}

@media screen and (min-width: 576px) {
  .logincard .header h2,
  .logincard .header h2 .force-center {
    font-size: 3rem !important;
  }
}

@media screen and (min-width: 992px) {
  .logincard .header h2,
  .logincard .header h2 .force-center {
    font-size: 3.5rem !important;
  }
}

.logincard .header *:not(h2):not(h2 *) {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  color: #ffffff !important;
  background-color: transparent !important;
  margin-bottom: 0 !important;
}



/* Hero lead line-height */
.guidingtext p,
.guidingtext .guidingconent,
.guidingtext .guidingconent .force-center {
  line-height: 1.5 !important;
}

/* ================================================================
   GNB BUTTONS — base styles copied from gnb.css
   Required as gnb.css is not loaded on the Citizen Portal pages
   ================================================================ */

.gnb-btn,
.gnb-btn-tertiary {
  background-color: #004a98 !important;
  border: 2px solid #004a98 !important;
  border-radius: 0.25rem;
  box-sizing: border-box;
  color: #ffffff !important;
  display: block;
  font-family: "Public Sans", Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.5;
  padding: 0.5rem 1.5rem;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  margin-bottom: 0.5rem;
  width: 100%;
  transition: 0.2s ease-in-out;
}

@media screen and (min-width: 576px) {
  .gnb-btn,
  .gnb-btn-tertiary {
    display: inline-block;
    width: auto;
  }
}



.gnb-btn:hover,
.gnb-btn:focus,
.gnb-btn:active {
  background: #1a6ed8 !important;
  border-color: #1a6ed8 !important;
  color: #ffffff !important;
}

.gnb-btn:focus,
.gnb-btn:active,
.gnb-btn-tertiary:focus,
.gnb-btn-tertiary:active {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.gnb-btn-tertiary {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
  text-decoration: underline !important;
}

.gnb-btn-tertiary:hover,
.gnb-btn-tertiary:focus,
.gnb-btn-tertiary:active {
  background: rgba(0, 74, 152, 0.12) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Hero CTA paragraph alignment — matches the h1 and lead copy */
.gnb-hero-cta {
  display: block;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1.5rem !important;
  text-align: left;
  padding-top: 0 !important;
}

.gnb-hero-cta.cta-custom {
    padding-top: 24px !important;
}
/* ================================================================
   Hero background on .guidingtext — matches .gnb-big-hero-banner-img */
.guidingtext {
  margin-bottom: 0 !important;
  background-color: #004a98 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-blend-mode: multiply !important;
}

@media screen and (min-width: 1200px) {
  .guidingtext {
    background-attachment: fixed !important;
  }
}

/* Heading font, spacing, and max-width */
.gnb-big-hero-banner-img h1,
.guidingtext .guidingtitle {
  font-family: "DM Serif Text", Georgia, "Times New Roman", serif !important;
  font-weight: 400;
  display: block !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.125;
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: left !important;
}

.guidingtext .guidingtitle .force-center {
  text-align: left !important;
}

/* Lead paragraph — matches .gnb-big-hero-banner-img p */
.guidingtext .guidingconent {
  display: block !important;
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #fff !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1.5rem !important;
  text-align: left !important;
}

@media screen and (min-width: 992px) {
  .guidingtext .guidingconent {
    font-size: 1.375rem !important;
  }
}

@media screen and (min-width: 992px) {
  .guidingtext .guidingconent {
    font-size: 1.375rem !important;
  }
}

.guidingconent{
  font-weight: 400 !important
}

.guidingtext .guidingconent .force-center {
  text-align: left !important;
}

/* h1 fluid size */
.gnb-big-hero-banner-img h1,
.guidingtext .guidingtitle {
  font-size: calc(1.625rem + 4.5vw) !important;
  line-height: 1.125 !important;
}

@media screen and (min-width: 576px) {
  .gnb-big-hero-banner-img h1,
  .guidingtext .guidingtitle {
    font-size: 4rem !important;
  }
}

@media screen and (min-width: 992px) {
  .gnb-big-hero-banner-img h1,
  .guidingtext .guidingtitle {
    font-size: 6rem !important;
  }
}

/* Below large — full width with 2rem side padding */
@media screen and (max-width: 991px) {
  .guidingtext .guidingtitle,
  .guidingtext .guidingconent {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box;
  }

  .guidingtext .guidingconent,
  .guidingtext .guidingconent .force-center {
    font-size: 1rem !important;
  }
}


/* ================================================================
   PURCHASE PAGE — Next / Cancel button pair
   Angular renders: Cancel (.btn-danger.pull-left) then Next (.btn-primary.pull-right)
   We reverse visual order (Next left, Cancel right), unify size, style Cancel as secondary
   ================================================================ */

/* Container: flex row, reversed so Next is left, Go back is right */
.col-md-12.text-center:has(.btn-success.btn-fill),
/* Container: flex row, reversed so Next is left, Cancel is right */
.col-md-12.text-center:has(.btn-danger.btn-fill) {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 1rem !important;
  text-align: left !important;
}

/* Remove Bootstrap pull-left / pull-right floats */
.col-md-12.text-center .btn-fill.pull-left,
.col-md-12.text-center .btn-fill.pull-right {
  float: none !important;
}

/* Go back — GNB secondary (same as Cancel) */
.col-md-12.text-center .btn-fill.btn-success {
  background-color: transparent !important;
  border-color: #004a98 !important;
  color: #004a98 !important;
}

.col-md-12.text-center .btn-fill.btn-success:hover {
  background-color: #004a98 !important;
  border-color: #004a98 !important;
  color: #ffffff !important;
}

.col-md-12.text-center .btn-fill.btn-success:focus {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Shared size and typography for both buttons */
.col-md-12.text-center .btn-fill.btn-primary,
.col-md-12.text-center .btn-fill.btn-danger,
.col-md-12.text-center .btn-fill.btn-success {
  font-family: "Public Sans", Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  padding: 0.5rem 1.5rem !important;
  border-radius: 0.25rem !important;
  border-width: 2px !important;
  border-style: solid !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: 0.2s ease-in-out !important;
  box-shadow: none !important;
  min-width: 8rem !important;
  height: auto !important;
}



/* Hide empty icon placeholder so padding is even */
.col-md-12.text-center .btn-fill i:empty {
  display: none !important;
}

/* Next — GNB primary */
.col-md-12.text-center .btn-fill.btn-primary {
  background-color: #004a98 !important;
  border-color: #004a98 !important;
  color: #ffffff !important;
}

.col-md-12.text-center .btn-fill.btn-primary:hover {
  background-color: #1a6ed8 !important;
  border-color: #1a6ed8 !important;
  color: #ffffff !important;
}

.col-md-12.text-center .btn-fill.btn-primary:focus {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Cancel — GNB secondary */
.col-md-12.text-center .btn-fill.btn-danger {
  background-color: transparent !important;
  border-color: #004a98 !important;
  color: #004a98 !important;
}

.col-md-12.text-center .btn-fill.btn-danger:hover {
  background-color: #004a98 !important;
  border-color: #004a98 !important;
  color: #ffffff !important;
}

.col-md-12.text-center .btn-fill.btn-danger:focus {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Mobile — stack vertically, Next on top */
@media screen and (max-width: 767px) {
  .col-md-12.text-center:has(.btn-danger.btn-fill),
  .col-md-12.text-center:has(.btn-success.btn-fill) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}


/* ================================================================
   TEXT INPUTS — nsw-form-input, GNB design system styles
   ================================================================ */

input.form-control:not([type="radio"]):not([type="checkbox"]),
input.nsw-form-input:not([type="radio"]):not([type="checkbox"]),
textarea.form-control {
  font-family: "Public Sans", Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #000 !important;
  background-color: #ffffff !important;
  border: 2px solid #000 !important;
  border-radius: 0.25rem !important;
  padding: 0.5rem 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input.form-control:not([type="radio"]):not([type="checkbox"]),
input.nsw-form-input:not([type="radio"]):not([type="checkbox"]),
.btn.date-calendar {
  min-height: 47px !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #EEEEEE !important;
}



input.form-control:not([type="radio"]):not([type="checkbox"]):hover,
input.nsw-form-input:not([type="radio"]):not([type="checkbox"]):hover {
  background-color: #dae8f9 !important;
}

input.form-control:not([type="radio"]):not([type="checkbox"]):focus,
input.nsw-form-input:not([type="radio"]):not([type="checkbox"]):focus {
  border-color: #000 !important;
  outline: 3px solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}


/* ================================================================
   CREATE ACCOUNT PAGE — card header text and callout
   ================================================================ */


/* ================================================================
   STATIC LABEL — Angular static text fields
   ================================================================ */

.static-label,
.static-label p,
.static-label li,
.static-label strong,
.static-label em {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #000 !important;
  background-color: transparent !important;
  text-align: left !important;
}

.static-label > div > strong:first-child {
  display: block !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 2rem 0 1rem 0 !important;
}

.static-label strong {
  font-weight: 700 !important;
}

.static-label h3,
.static-label h4,
.static-label .text-center h3 {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 2rem 0 1rem 0 !important;
  text-align: left !important;
}

.static-label li {
  margin-bottom: 0.25rem !important;
}

.static-label a {
  color: #004a98 !important;
  text-decoration: underline !important;
}

.static-label a:hover {
  text-decoration: none !important;
}

.static-label .btn-success.btn-fill {
  color: #ffffff !important;
}


/* CREATE ACCOUNT — card header body text and list */
.card .header p,
.card .header ul,
.card .header li,
.card .header strong {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #000 !important;
  text-align: left !important;
}

.card .header strong {
  font-weight: 700 !important;
}

.card .header li {
  margin-bottom: 0.25rem !important;
}

.card .header a {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: inherit !important;
  color: #004a98 !important;
  text-decoration: underline !important;
}


/* "Create an account" subheading inside .bg-light in card header */
.card .header .bg-light h4,
.card .header .bg-light.py-5 h4 {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1rem 0 !important;
}

@media screen and (min-width: 768px) {
  .card .header .bg-light h4,
  .card .header .bg-light.py-5 h4 {
    font-size: 1.75rem !important;
  }
}

/* Strip Bootstrap chrome from the .bg-light wrapper div */
.card .header .bg-light.py-5,
.card .header .bg-light.border {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 1rem !important;
}


/* NOTE callout — restyle bg-warning as GNB warning alert */
.text-center.bg-warning,
.bg-warning.p-3 {
  background-color: #fdf3d6 !important;
  border-left: 4px solid #d6a329 !important;
  border-radius: 0 0.25rem 0.25rem 0 !important;
  padding: 1rem 1.5rem !important;
  text-align: left !important;
  color: #000 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.text-center.bg-warning p,
.text-center.bg-warning strong,
.text-center.bg-warning em,
.bg-warning.p-3 p,
.bg-warning.p-3 strong,
.bg-warning.p-3 em {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  color: #000 !important;
  background-color: transparent !important;
}



.text-center.bg-warning a,
.bg-warning.p-3 a {
  color: #004a98 !important;
  text-decoration: underline !important;
}

.text-center.bg-warning h3,
.bg-warning.p-3 h3 {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 0 0 0.75rem 0 !important;
  text-align: left !important;
}


/* ================================================================
   SELECT MENUS — gnb.css styles applied to the portal's native selects
   The red comes from Bootstrap .has-error (Angular marks invalid on load)
   ================================================================ */

/* Label text — Public Sans bold, black always */
.label-text,
.label-text b,
.label-text strong,
label .label-text {
  font-family: "Public Sans", Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #000 !important;
}



/* Kill Bootstrap has-error red on label, border, help-block */
.has-error .control-label,
.has-error .checkbox,
.has-error .radio,
.has-error label {
  color: #000 !important;
}

.has-error .help-block {
  color: #79242f !important;
}

.has-error .form-control {
  border-color: #000 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.has-error .form-control:focus {
  border-color: #000 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* Date picker calendar button */
.btn.date-calendar {
  background-color: #004a98 !important;
  border: 2px solid #004a98 !important;
  border-radius: 0 0.25rem 0.25rem 0 !important;
  color: #ffffff !important;
  padding: 0.5rem 0.75rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn.date-calendar i {
  color: #ffffff !important;
}

.btn.date-calendar:hover {
  background-color: #1a6ed8 !important;
  border-color: #1a6ed8 !important;
}

.btn.date-calendar:focus {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}


/* Required / validation help text */
.help-block {
  font-family: "Public Sans", Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 0.875rem !important;
  color: #79242f !important;
}

/* Select — gnb.css styles, caret as inline SVG data URI */
select,
select.form-control,
select.nsw-form-select {
  box-sizing: border-box !important;
  border: 2px solid #000 !important;
  border-radius: 0.25rem !important;
  color: #000 !important;
  display: block !important;
  font-family: "Public Sans", Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 1rem !important;
  min-height: 47px !important;
  padding: 0.5rem 2.5rem 0.5rem 1rem !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L2 5h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1rem !important;
  cursor: pointer !important;
}



select:hover,
select.form-control:hover {
  background-color: #dae8f9 !important;
}

select:focus,
select:active,
select.form-control:focus {
  background-color: #dae8f9 !important;
  border-color: #000 !important;
  outline: 3px solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

select option {
  color: #000 !important;
  background-color: #ffffff !important;
}


/* ================================================================
   GNB SIGN-IN FORM — styles for the static GNB form markup
   (.gnb-fws-form-container inside .logincard .content)
   ================================================================ */

/* Form container */
.logincard .content .gnb-fws-form-container {
  background-color: #f3f3f3 !important;
  border-radius: 0.25rem !important;
  padding: 1.5rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

@media screen and (min-width: 992px) {
  .logincard .content .gnb-fws-form-container {
    padding: 1.5rem 2rem !important;
  }
}

/* Form max-width */
.logincard .content .gnb-fws-form-container form {
  max-width: 520px !important;
  margin: 0 auto !important;
}

/* h2 inside form */
.logincard .content .gnb-fws-form-container h2 {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  background-color: transparent !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
  text-align: left !important;
}

@media screen and (min-width: 768px) {
  .logincard .content .gnb-fws-form-container h2 {
    font-size: 1.75rem !important;
  }
}

/* Labels */
.logincard .content .gnb-fws-form-container label {
  font-family: "Public Sans", Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #000 !important;
  display: block !important;
  background-color: transparent !important;
}

/* Inputs — matches design system input styles */
.logincard .content .gnb-fws-form-container input[type="text"],
.logincard .content .gnb-fws-form-container input[type="password"] {
  font-family: "Public Sans", Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #000 !important;
  background-color: #ffffff !important;
  border: 2px solid #000 !important;
  border-radius: 0.25rem !important;
  padding: 0.5rem 1rem !important;
  width: 100% !important;
  display: block !important;
  margin-bottom: 1rem !important;
  box-sizing: border-box !important;
}



.logincard .content .gnb-fws-form-container input[type="text"]:hover,
.logincard .content .gnb-fws-form-container input[type="password"]:hover {
  background-color: #dae8f9 !important;
}

.logincard .content .gnb-fws-form-container input[type="text"]:focus,
.logincard .content .gnb-fws-form-container input[type="password"]:focus {
  border-color: #000 !important;
  outline: 3px solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Paragraph text in form */
.logincard .content .gnb-fws-form-container p {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #000 !important;
  background-color: transparent !important;
  text-align: left !important;
}

/* Top margin utility */
.margin-top-sm {
  margin-top: 1rem !important;
}

/* Info icon */
.gnb-fws-info-icon {
  color: #004a98 !important;
}

/* hr in form */
.logincard .content .gnb-fws-form-container hr {
  border-color: #ddd !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* ================================================================
   GNB ALERT WARNING — extracted from gnb.css (not linked globally
   to avoid Bootstrap 3 grid conflicts)
   ================================================================ */

.gnb-alert-warning {
  margin: 2rem 0;
  padding: 1.5rem 1.5rem 1.5rem 3.25rem;
  line-height: 1.5;
  color: #000;
  border-style: solid;
  border-width: 0 0 0 4px;
  border-radius: 0 0.25rem 0.25rem 0;
  border-color: #fdf3d6;
  border-left-color: #d6a329;
  background: #fdf3d6 url(../img/icons/icon-warning.svg) top left no-repeat;
  background-size: 1.5rem;
  background-position-x: 1rem;
  background-position-y: 1.5rem;
}

.gnb-alert-warning h2:first-of-type {
  margin: 0 0 0.75rem 0 !important;
  font-size: 1.25rem !important;
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #000 !important;
  background-color: transparent !important;
  text-align: left !important;
}

@media screen and (min-width: 768px) {
  .gnb-alert-warning h2:first-of-type {
    font-size: 1.5rem !important;
  }
}

/* Close button X — force black */
.gnb-alert-warning button,
.gnb-alert-warning button i {
  color: #000 !important;
}

.gnb-alert-warning p {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  color: #000 !important;
  background-color: transparent !important;
}



.gnb-alert-warning a {
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size: inherit !important;
  color: #004a98 !important;
  background-color: transparent !important;
  text-decoration: underline !important;
}

.gnb-alert-warning a:focus {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
}


/* ================================================================
   CART PAGE — button row layout
   ================================================================ */

/* Kill positional offsets that cause buttons to overlap */
.movebtndown,
.movebtndown2,
.movebtndown3 {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  margin-bottom: 0 !important;
}

/* Pay Fees — primary solid styling (high specificity to beat .col-md-12.text-center .btn-fill.btn-success) */
.col-md-12.text-center.payfeebuttons .btn {
  background-color: #004a98 !important;
  border-color: #004a98 !important;
  color: #ffffff !important;
  margin-bottom: 1.25rem !important;
  float: none !important;
}

.col-md-12.text-center.payfeebuttons .btn:hover,
.col-md-12.text-center.payfeebuttons .btn:focus {
  background-color: #1a6ed8 !important;
  border-color: #1a6ed8 !important;
  color: #ffffff !important;
}

/* Cart icon — suppress FA glyph, render SVG via ::before */
.col-md-12.text-center.payfeebuttons .btn i {
  display: none !important;
}

.col-md-12.text-center.payfeebuttons .btn::before {
  content: '' !important;
  display: inline-block !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-right: 0.4rem !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM5.17 5L3 3H1V1H0v4h1l3.6 7.59L3.25 14c-.27.48-.03 1.08.49 1.21L5 17h14v-2H5.42l1.1-2H19a2 2 0 001.76-1.06L23 6H5.17z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
}

/* notpaidbuttons — flatten row/col wrappers and lay buttons out in one flex row */
.notpaidbuttons form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Hide empty spacer rows (contain only  ) */
.notpaidbuttons form > .row > .col-md-12:not(.text-center) {
  display: none !important;
}

.notpaidbuttons form > .row {
  display: contents !important;
}

.notpaidbuttons form > .row > .col-md-12.text-center {
  display: contents !important;
}

.notpaidbuttons form > .row > .col-md-12.text-center > span {
  display: contents !important;
}

/* Reorder: Make Another Purchase to the left, Edit/Empty to the right */
.notpaidbuttons .btn[title="Make Another Purchase"] {
  order: -1 !important;
  float: none !important;
}

.notpaidbuttons .btn[title="Edit Profile"] {
  margin-left: auto !important;
  float: none !important;
}

.notpaidbuttons .btn {
  float: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  white-space: normal !important;
}

@media screen and (max-width: 767px) {
  .notpaidbuttons form {
    flex-direction: column !important;
  }

  .notpaidbuttons .btn {
    width: 100% !important;
    display: flex !important;
  }

  .notpaidbuttons .btn[title="Edit Profile"] {
    margin-left: 0 !important;
  }
}


/* ================================================================
   INDEX.HTML ONLY — body text scales to 1.125rem on larger screens
   ================================================================ */

@media screen and (min-width: 768px) {
  .gnb-btn,
  .gnb-btn-tertiary {
    font-size: 1.125rem !important;
  }
}

/* ================================================================
   LICENCE RECEIPT PAGE 
   Selectors use .no-print class (bilingual-safe) scoped to their
   specific containers so they don't bleed into other pages.
   ================================================================ */

/* Button spacing inside notpaidbuttons form */
.notpaidbuttons form .btn {
  margin-right: 0.5rem !important;
}


/* Side-by-side layout — both containers made inline so they flow
   next to each other while Pay Fees stays untouched above */
.row.notpaidbuttons:has(.btn.no-print),
.row.print-button-row {
  display: inline-flex !important;
  vertical-align: middle !important;
  width: auto !important;
  align-items: center !important;
  margin-right: 0.75rem !important;
  margin-bottom: 0.5rem !important;
}

/* Secondary styling — shared */
.notpaidbuttons .btn.no-print,
.print-button-row .btn.no-print {
  background-color: transparent !important;
  border: 2px solid #004a98 !important;
  color: #004a98 !important;
  font-weight: 600 !important;
  float: none !important;
  margin: 0 !important;
}

.notpaidbuttons .btn.no-print:hover,
.notpaidbuttons .btn.no-print:focus,
.print-button-row .btn.no-print:hover,
.print-button-row .btn.no-print:focus {
  background-color: #004a98 !important;
  border-color: #004a98 !important;
  color: #ffffff !important;
}

.notpaidbuttons .btn.no-print:focus,
.print-button-row .btn.no-print:focus {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Hide FA icons, replace with SVG ::before */
.notpaidbuttons .btn.no-print i,
.print-button-row .btn.no-print i {
  display: none !important;
}

/* Print Licence — printer icon (in .notpaidbuttons) */
.notpaidbuttons .btn.no-print::before {
  content: '' !important;
  display: inline-block !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-right: 0.4rem !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23004a98'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
}

.notpaidbuttons .btn.no-print:hover::before,
.notpaidbuttons .btn.no-print:focus::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") !important;
}

/* Print Receipt — printer icon (in .print-button-row) */
.print-button-row .btn.no-print::before {
  content: '' !important;
  display: inline-block !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-right: 0.4rem !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23004a98'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
}

.print-button-row .btn.no-print:hover::before,
.print-button-row .btn.no-print:focus::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") !important;
}



/* ================================================================
   INDEX.HTML ONLY — body text scales to 1.125rem on larger screens
   ================================================================ */

@media screen and (min-width: 768px) {
  .gnb-btn,
  .gnb-btn-tertiary {
    font-size: 1.125rem !important;
  }
}




/* ================================================================

   VENDOR

   ================================================================ */

/* CLIENT SEARCH — reduce top padding on public-search main content up to 991px */

@media screen and (max-width: 991px) {

  .main-content.public-search {

    padding-top: 2rem !important;

  }

}

/* CLIENT SEARCH — card header padding on smaller screens */

@media screen and (max-width: 991px) {

  #search-advanced .card .header {

    padding: 2rem !important;

  }

}

/* CLIENT SEARCH — content padding */

.search-advanced .card .content {

  padding: 0rem 2rem 2rem 1.5rem !important;

}

/* CLIENT SEARCH — left-align buttons inside search-advanced text-center cols */

#search-advanced .col-md-12.text-center {

  text-align: left !important;

  justify-content: flex-start !important;

}

/* CLIENT SEARCH — desktop top offset for specific fields */

@media screen and (min-width: 992px) {

  #search-advanced .search-advanced:first-of-type #OutdoorsCardNum,

  #search-advanced .search-advanced:first-of-type #datebirth {

    margin-top: 20px !important;

  }

}

/* CLIENT SEARCH — dropdown button typography matches .button-label */

.btn-secondary.dropbtn {

  font-size: 1rem !important;

  font-weight: 600 !important;

  color: rgba(0, 0, 0, 1) !important;

  opacity: 1 !important;

}

.btn-secondary.dropbtn:hover,

.btn-secondary.dropbtn:focus {

  color: #004a98 !important;

}

.btn-secondary.dropbtn .button-label {

  margin-right: 0.25rem !important;

}


/* ================================================================

   BOOTSRAP OVERRIDES

   ================================================================ */

/* Used throughout as a helper class to align buttons and content to the left, but these must be left-aligned, so we need to override this class*/

.main-content .container-fluid, .alert .container-fluid{

  max-width: 1110px !important;

}

.text-center{

text-align: left;

}

@media screen and (min-width: 991px) {

  .btn {

    margin-right: 0.5rem !important;

  }

}

/* ================================================================
   OTC DEER DRAW
   ================================================================ */
.row:has([id="21021"]) .col-md-6.formfield {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  margin-bottom: 1rem !important;
  margin-top: 1rem !important;
}
 
/* ================================================================
   MODAL FOOTER — secondary button styling for cancel/close
   ================================================================ */

.modal-footer #confirmNo, .modal-footer .custom-modal-close {
  background-color: transparent !important;
  border: 2px solid #004a98 !important;
  color: #004a98 !important;
  font-weight: 600 !important;
}

.modal-footer #confirmNo:hover,
.modal-footer #confirmNo:focus,
.modal-footer .custom-modal-close:hover,
.modal-footer .custom-modal-close:focus {
  background-color: #004a98 !important;
  border-color: #004a98 !important;
  color: #ffffff !important;
}

.modal-footer #confirmNo:focus, .modal-footer .custom-modal-close:focus {
  outline: 0.25rem solid #efb300 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
 
.modal-footer .custom-modal-close {
  background-color: transparent !important;
  border: 2px solid #004a98 !important;
  color: #004a98 !important;
  font-weight: 600 !important;
}

/* ================================================================
   Additional overrides fixes
   ================================================================ */


#search-advanced .search-advanced:first-of-type div#OutdoorsCardNum.formfield {
   margin-top:0px !important;
}

.main-content .card .content span.btn-fill {
 color:#ffffff !important;
}

.main-content .card .content .addButton span{
 color:#ffffff !important;
}

.col-md-12.text-center .btn-fill.btn-success.hideitem {
  display: none !important;
}

.col-md-12.text-center .btn-fill.btn-default.hideitem {
  display: none !important;
}

.gnb-hero-cta.cta-custom{
  padding-top:24px !important;
}

.btn-password{
  display: none;
}

.main-content .card .content .cancelButton span {
 color:#ffffff !important;
}

app-view-detail > .detail-widget > .card:first-of-type{
  max-width:none !important;
  margin-left:15px !important;
  margin-right: 15px !important;
}

.content.folderinfo form > .row app-select > div > #20035 {
  margin-top: 20px !important;
}

input.form-control[readonly]:not([type="radio"]):not([type="checkbox"]),
input.nsw-form-input[readonly]:not([type="radio"]):not([type="checkbox"]) {
  background-color: #EEEEEE !important; 
  border-color:#a0a5ae !important;
}

.has-error select.form-control[disabled],
.has-error select.nsw-form-select[disabled] {
 border-color:#a0a5ae !important;
}

.card label.nsw-form-radio__label{
  font-family: "Public Sans", Helvetica, Arial, sans-serif !important;
  font-size:16px;
}

.nsw-form-radio__label::before{
  top:.5px !important;
  left: .5px !important;
}

@media screen and (min-width: 992px) {
    .navbar.navbar-default.navbar-custom.navbar-fixed-top .navbar-collapse {
        display: none !important;
    }
}

div.datatable-body-cell-label
  span.action-cell
  button.action-button.btn.btn-fill.btn-success.row-button:focus 
 {
    outline: 0.25rem solid #efb300 !important;
  	outline-offset: 0 !important;
  	box-shadow: none !important;
}

.main-content .card .content span.common-cell span.gnb-badge.gnb-badge-success {
    color: #fff !important;
}

.content.page-navigation-buttons-wrapper{
  padding:0rem 0rem 0rem 1.5rem;
}

footer {
  width: 100% !important;
  margin-top: 2rem !important;
}

body {
  padding-top:78px!important
}

/* ================================================================
   Fields with custom class
   ================================================================ */
.modal-footer #confirmYes {
 font-size:16px;
}

.reg-fr-20034info {
  margin-top: 20px !important;
}


#search-advanced .search-advanced:first-of-type div#OutdoorsCardNum.otc-outdoorcard-num {
  margin-top: 20px !important;
}

.otc-nbdrivers-license-fr{
  padding-left:0px !important;
  padding-right:0px !important;
}

.readonly-tag-num-fr{
  margin-top: 20px !important;
}

#search-advanced .search-advanced:first-of-type div#OutdoorsCardNum.vendor-outdoorcard-num {
  margin-top: 20px !important;
}

.training-qualification-fr{
  margin-top: 20px !important;
}

.profile-identification-fr{
  margin-top: 20px !important;
}

.gnb-alert-info {
  border-color: #dae8f9;
  border-left-color: #004a98;
  background: #dae8f9 url(../gnb/img/icons/icon-info.svg) top left no-repeat;
  background-size: 1.5rem;
  background-position-x: 1rem;
  background-position-y: 1.5rem;
}

.gnb-alert-info {
  margin: 1rem 0;
  padding: 1.5rem 1.5rem 1.5rem 3.25rem;
  line-height: 1.5;
  color: #000;
  border-style: solid;
  border-width: 0 0 0 4px;
  border-radius: 0 0.25rem 0.25rem 0;
}

.gnb-alert-info p{
  font-size: 1rem !important;
}

.col-md-12.text-center .btn-fill.btn-success.custom-primary{
  background-color: #004a98 !important;
  color:#ffffff !important;
}


.col-md-12.text-center .btn-fill.custom-btn-danger{
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    gap: 0 !important;
    background-color: transparent !important;
    border: 2px solid #79242f !important;
    color: #79242f !important;
    padding: 0.25rem 0.5rem !important;
}

.col-md-12.text-center .btn-fill.custom-btn-danger:hover,
.col-md-12.text-center .btn-fill.custom-btn-danger:focus{
    background-color: #79242f !important;
    border-color: #79242f !important;
    color: #ffffff !important;
}

.custom-btn-danger{
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    gap: 0 !important;
    background-color: transparent !important;
    border: 2px solid #79242f !important;
    color: #79242f !important;
    padding: 0.25rem 0.5rem !important;
}

.custom-btn-danger:hover,
.custom-btn-danger:focus{
    background-color: #79242f !important;
    border-color: #79242f !important;
    color: #ffffff !important;
}

.main-content .card .content .cancelButton.custom-btn-danger span{
    color: #79242f !important;
}

.main-content .card .content .cancelButton.custom-btn-danger:hover span,
.main-content .card .content .cancelButton.custom-btn-danger:focus span{
     color: #ffffff !important;
}


.notpaidbuttons .btn[title="Mettre le profil à jour"] {
  order: -3 !important;
  float: none !important;
}

.notpaidbuttons .btn[title="Faire un autre achat"] {
  order: -2 !important;
  margin-left: auto !important;
  float: none !important;
}
.notpaidbuttons .btn[title="Vider le panier"] {
  margin-left: 0px;
  float: none !important;
}

.col-md-12.text-center .movebtndown3 {
    background-color: #004a98 !important;
    border-radius: 0.25rem !important;
    color: #ffffff !important;
}

.col-md-12.text-center .movebtndown3:hover,
.col-md-12.text-center .movebtndown3:focus{
   background-color: #1a6ed8 !important;
  border-color: #1a6ed8 !important;
  color: #ffffff !important;
}

.col-md-12.text-center .movebtndown3::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E") !important;
}

select.form-select[title="Select month"]{
  font-size:14px !important;
  padding:0.5rem 1.0rem 0.5rem 1rem !important;
}

select.form-select[title="Select year"]{
  font-size:14px !important;
  padding:0.5rem 1.0rem 0.5rem 1rem !important;
}

.col-md-12.text-center .btn-fill.btn-primary.custom-hide.custom-hide {
  display: none !important;
}
.col-md-12.text-center .btn-fill.btn-success.custom-hide.custom-hide {
  display: none !important;
}

.choice-icon{
  display: none;
}

/* Modal Footer */
.modal-footer {
    display: flex;
    justify-content: left;
    align-items: start;
    padding: 15px 20px;
    flex-direction: row-reverse;
    /*! row-gap: 8px !important; */
    gap: 8px !important;
}

.navbar-default button.navbar-toggle,div.navbar-header {
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.0) !important;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0) !important;
    -ms-box-shadow: 0 2px 4px rgba(0,0,0,0) !important;
    -o-box-shadow: 0 2px 4px rgba(0,0,0,0) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0) !important;
}

div.navbar-buttons div.navbar-button {
    border-left: 0px !important;
}

/* ================================================================
   Print styles — hide buttons and info alerts that aren't relevant on paper
   ================================================================ */

@media print {
 .col-md-12.text-center .btn-fill.no-print {
    display: none !important;
  }
  .col-md-12 .btn.btn-default.btn-fill.no-print {
    display:none !important;
  }
  .col-md-12.text-center .movebtndown3.btn.no-print {
    display: none !important;
  }
  .col-md-12.total-select-fees p .alert-noprint{
    display: none !important;
  }
}