:root{
  --msa-blue: #011E41;     /* Pantone 282C */
  --msa-sky:  #46A4E4;     /* Pantone 292C */
  --msa-orange:#FF662D;    /* Pantone 164C */
  --msa-gray: #D9D9D9;     /* 15% Black */
  --msa-text: #0b1f3b;     /* you already use similar */
  --msa-muted:#6b7785;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;

  --shadow-card: 0 12px 30px rgba(1,30,65,.10);
  --border-soft: 1px solid rgba(1,30,65,.12);
}

#photoUploadSection {
  display: flex;
  gap: 24px !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin-top: 20px !important;
}

#photoUploadSection .photo-box {
  display: block !important;
  width: 340px !important;
  min-width: 340px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  background: rgba(255, 255, 255, .04) !important;
}

#photoUploadSection .photo-guidelines {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 260px !important;
}

#photoUploadSection .avatar {
  width: 120px !important;
  height: 120px !important;
  border-radius: 60px !important;
  border: 2px solid rgba(255, 255, 255, .18) !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

#photoUploadSection #photoPreview {
  display: none;
  width: 120px !important;
  height: 120px !important;
  object-fit: cover !important;
}

#photoUploadSection #photoPlaceholder {
  font-size: 44px !important;
  opacity: .6 !important;
}

#photoUploadSection .upload-btn {
  display: inline-block !important;
  padding: 10px 12px !important;
  border: 1px dashed rgba(255, 255, 255, .45) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #fff !important;
}

#photoUploadSection .hint,
#photoUploadSection .desc,
#photoUploadSection li {
  color: rgba(255, 255, 255, .85) !important;
}

#photoUploadSection .title {
  color: #ff7a00 !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

/* If portal applies display:none to nested divs accidentally */
#photoUploadSection * {
  visibility: visible !important;
  opacity: 1 !important;
}

.licence-header {
  margin: 10px 0 22px 0;
}

.licence-title {
  font-size: 38px;
  line-height: 1.15;
  font-weight: 800;
  color: #0b1f3b;
  margin: 0;
}

.licence-subtitle {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  color: #7b8794;
  margin-top: 8px;
}
/* Visually hide elements but keep them accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Make the multistep form action area a flex row */
#WebFormPanel .entity-form .form-actions,
#WebFormPanel .entity-form .entity-form-actions,
#WebFormPanel .entity-form .actions,
#WebFormPanel .entity-form .button-bar,
#WebFormPanel .entity-form .buttonBar{
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
}

/* Force Previous to not stretch full width */
.entity-form input[value="Previous"],
.entity-form button:contains("Previous") {
  width: auto !important;
  min-width: 140px;
  display: inline-block !important;
}

/* Optional: keep Submit on right end */
.entity-form input[value="Submit"],
.entity-form button:contains("Submit") {
  margin-left: auto !important;
}

.entity-grid input[value="Add Existing"],
.entity-grid button[aria-label="Add Existing"],
.entity-grid a[aria-label="Add Existing"],
.entity-grid a[title="Add Existing"],
.entity-grid button:contains("Add Existing"),
.entity-grid a:contains("Add Existing") {
  display: none !important;
}

/* Make action buttons aligned */
.entity-form .form-actions,
.entity-form .entity-form-actions,
.entity-form .actions,
.entity-form .button-bar,
.entity-form .buttonBar {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}

/* Prevent Previous becoming full width */
.entity-form input[value="Previous"] {
  width: auto !important;
  display: inline-block !important;
  min-width: 140px;
}

.row.form-custom-actions .col-md-6.clearfix {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}

/* Keep each group from taking full line space */
.row.form-custom-actions .col-md-6.clearfix .btn-group.entity-action-button {
  display: flex !important;
  /* instead of inline-block */
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  margin: 0 !important;
}

/* Optional: stop the second group from pushing to next line */
.row.form-custom-actions .col-md-6.clearfix .btn-group.entity-action-button+.btn-group.entity-action-button {
  padding-left: 0 !important;
  /* remove your runtime padding-left */
}

/* Ensure buttons don't stretch */
.row.form-custom-actions .col-md-6.clearfix input,
.row.form-custom-actions .col-md-6.clearfix button {
  width: auto !important;
  white-space: nowrap !important;
}

.policy-list {
  width: 100%;
  margin-top: 10px;
}

.policy-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #cfe9ff;
  background: #d9f0ff;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.policy-item.is-off {
  background: #ffffff;
  border-color: #e6e6e6;
}

.policy-text {
  padding-right: 18px;
  width: 100%;
  color: #172341;
}

.policy-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.policy-sub {
  font-size: 12.5px;
  color: #666666;
}

.policy-sub a {
  text-decoration: underline;
}

.req {
  color: #b00020;
  font-weight: 700;
  margin-left: 4px;
}

.policy-input {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #c9c9c9;
  background: #fff;
}

/* Toggle Switch 
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  margin: 0;
  flex: 0 0 auto;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cfcfcf;
  transition: .2s;
  border-radius: 40px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: white;
  transition: .2s;
  border-radius: 50%;
}

.switch input:checked+.slider {
  background-color: #0d7bdc !important;
}

.switch input:checked+.slider:before {
  transform: translateX(22px);
}
  */

.policy-error {
  color: #b00020;
  font-size: 13px;
  margin-top: 6px;
}

#WebFormPanel {
  color: var(--msa-text) !important;
}

a.policy-open {
  color: blueviolet !important;
}

.btn-outline {
  border: 1px solid #d8dee7;
  background: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary {
  border: 0;
  background: #1185ff;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.btn-primary:hover {
  filter: brightness(.95);
}

.confirmation-wrapper {
  min-height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7f7f7;
}

.confirmation-card {
  background: #ffffff;
  max-width: 700px;
  width: 100%;
  padding: 40px 50px;
  text-align: center;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.confirmation-icon {
  font-size: 56px;
  color: #2ecc71;
  margin-bottom: 20px;
}

.confirmation-title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 10px;
}

.confirmation-subtitle {
  font-size: 16px;
  color: #555;
  margin-bottom: 30px;
}

.confirmation-details {
  text-align: left;
  margin: 0 auto 30px;
  max-width: 420px;
}

.confirmation-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}

.confirmation-row span:first-child {
  color: #777;
}

.confirmation-row span:last-child {
  font-weight: 500;
}

.confirmation-actions a {
  display: inline-block;
  padding: 12px 26px;
  background: #0078d4;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 15px;
}

.confirmation-actions a:hover {
  background: #005fa3;
}

/* The switch - the box around the slider 
.itk-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}

.itk-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.itk-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.itk-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}


/* Color when checked (using your dashboard blue) */
input:checked+.itk-slider {
  background-color: #f3a44a;
}

input:checked+.itk-slider:before {
  transform: translateX(22px);
}
*/

.toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: #172341;
}

/* =========================================================
   Motorsport Australia – Power Pages Multi-step Web Form UI
   Scope: affects all Multi-step (Web Form) pages globally
   ========================================================= */

#WebFormPanel{
  color: var(--msa-text) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

/* 1) Make the overall form feel like a modern card */
#WebFormPanel .entity-form,
#WebFormPanel form{
  background:#fff;
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* If the webform is already inside a container, add spacing */
#WebFormPanel .entity-form{
  padding: 22px 22px;
}

/* 2) Step titles / section titles */
#WebFormPanel h1, 
#WebFormPanel h2, 
#WebFormPanel h3,
#WebFormPanel .page-header h1,
#WebFormPanel .page-header h2{
  color: var(--msa-blue);
  letter-spacing: -.01em;
}

/* 3) Inputs – clean borders + modern focus ring */
#WebFormPanel input[type="text"],
#WebFormPanel input[type="email"],
#WebFormPanel input[type="tel"],
#WebFormPanel input[type="number"],
#WebFormPanel input[type="password"],
#WebFormPanel input[type="date"],
#WebFormPanel select,
#WebFormPanel textarea,
#WebFormPanel .form-control{
  border: 1px solid rgba(1,30,65,.18) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#WebFormPanel input:focus,
#WebFormPanel select:focus,
#WebFormPanel textarea:focus,
#WebFormPanel .form-control:focus{
  border-color: var(--msa-sky) !important;
  box-shadow: 0 0 0 4px rgba(70,164,228,.22) !important;
  outline: none !important;
}

/* Labels stronger, modern 
#WebFormPanel label{
  font-weight: 750;
  color: var(--msa-blue);
}*/

.form-group{
 position:relative;
 margin-bottom:22px;
}

.form-group label{
 position:absolute;
 top:12px;
 left:14px;
 background:#fff;
 padding:0 6px;
 transition:.2s ease;
 pointer-events:none;
} 

.form-control:focus + label,
.form-control:not(:placeholder-shown)+label{
 top:-8px;
 font-size:12px;
 color:var(--msa-sky);
}


/* 4) Progress indicator (common Bootstrap progress markup) */
#WebFormPanel .progress{
  height: 8px;
  background: rgba(1,30,65,.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(1,30,65,.06);
}
#WebFormPanel .progress-bar{
  border-radius: 999px;
  background: linear-gradient(90deg, var(--msa-sky), var(--msa-orange));
}

/* 5) Step navigation (covers common nav-pills/tabs patterns) */
#WebFormPanel .nav,
#WebFormPanel .nav-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 16px;
}

#WebFormPanel .nav-pills > li > a,
#WebFormPanel .nav-tabs > li > a{
  border: 1px solid rgba(1,30,65,.12);
  background: rgba(1,30,65,.04);
  color: var(--msa-blue);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  text-decoration:none;
}

#WebFormPanel .nav-pills > li.active > a,
#WebFormPanel .nav-tabs > li.active > a{
  background: var(--msa-blue);
  color:#fff;
  border-color: var(--msa-blue);
}

/* Optional: completed steps */
#WebFormPanel .nav-pills > li:not(.active) > a:hover{
  background: rgba(70,164,228,.10);
  border-color: rgba(70,164,228,.35);
}

/* 6) Buttons – primary navy, secondary outlined */
#WebFormPanel .btn,
#WebFormPanel button,
#WebFormPanel input[type="submit"],
#WebFormPanel input[type="button"]{
  border-radius: var(--radius-md) !important;
  padding: 10px 16px !important;
  font-weight: 850 !important;
  letter-spacing: .01em;
}

/* Primary actions */
#WebFormPanel .btn-primary,
#WebFormPanel button.btn-primary,
#WebFormPanel input[type="submit"].btn-primary{
  background: var(--msa-blue) !important;
  border: none !important;
  color:#fff !important;
}
#WebFormPanel .btn-primary:hover{
  filter: brightness(.96);
}

/* Secondary/Previous */
#WebFormPanel .btn-default,
#WebFormPanel .btn-secondary,
#WebFormPanel button.btn-default{
  background:#fff !important;
  border: 1px solid rgba(1,30,65,.22) !important;
  color: var(--msa-blue) !important;
}
#WebFormPanel .btn-default:hover,
#WebFormPanel .btn-secondary:hover{
  background: rgba(1,30,65,.04) !important;
}

/* Your original goal: Previous shouldn't stretch */
#WebFormPanel input[value="Previous"],
#WebFormPanel button[aria-label="Previous"]{
  width:auto !important;
  min-width: 140px !important;
}

/* Right-align Submit/Next if needed */
#WebFormPanel input[value="Submit"],
#WebFormPanel button[aria-label="Submit"],
#WebFormPanel input[value="Next"],
#WebFormPanel button[aria-label="Next"]{
  margin-left:auto !important;
}

/* 7) Sticky action bar (optional modern UX) 
#WebFormPanel .entity-form-actions,
#WebFormPanel .form-actions{
  border-top: 1px solid rgba(1,30,65,.10);
  padding-top: 14px;
  margin-top: 18px;
} */

#WebFormPanel .entity-form-actions,
#WebFormPanel .form-actions{
 position:sticky;
 bottom:0;
 background:rgba(255,255,255,.96);
 backdrop-filter:blur(12px);
 border-top:1px solid rgba(1,30,65,.10);
 padding:14px 20px;
 z-index:999;
 box-shadow:0 -8px 20px rgba(1,30,65,.08);
}

/* Uncomment if you want a sticky footer action bar
#WebFormPanel .entity-form-actions,
#WebFormPanel .form-actions{
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  padding: 14px 0 0;
  z-index: 3;
}
*/

/* 8) Validation – clean and readable */
#WebFormPanel .validation-summary-errors,
#WebFormPanel .text-danger,
#WebFormPanel .field-validation-error{
  color: #b00020 !important;
}

#WebFormPanel .validation-summary-errors{
  background: #fff0f2;
  border: 1px solid rgba(176,0,32,.20);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 12px 0 18px;
}

/* ===== Option 3: Left rail timeline stepper (Position Left) ===== */

:where(#WebFormPanel, body) [id$="_ProgressIndicator"] .progress.list-group.left,
:where(#WebFormPanel, body) [id*="ProgressIndicator"] .progress.list-group.left{
  list-style: none !important;
  margin: 0 0 16px 0 !important;
  padding: 12px 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(1,30,65,.10) !important;
  background: rgba(1,30,65,.03) !important;
}

:where(#WebFormPanel, body) [id$="_ProgressIndicator"] .progress.list-group.left .list-group-item,
:where(#WebFormPanel, body) [id*="ProgressIndicator"] .progress.list-group.left .list-group-item{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: black !important;
  border-radius: 12px !important;
  font-weight: 850 !important;
}

/* vertical line */
:where(#WebFormPanel, body) [id$="_ProgressIndicator"] .progress.list-group.left .list-group-item::after,
:where(#WebFormPanel, body) [id*="ProgressIndicator"] .progress.list-group.left .list-group-item::after{
  content: "" !important;
  position: absolute !important;
  left: 19px !important;
  top: 28px !important;
  bottom: -10px !important;
  width: 2px !important;
  background: rgba(1,30,65,.12) !important;
}

:where(#WebFormPanel, body) [id$="_ProgressIndicator"] .progress.list-group.left .list-group-item:last-child::after,
:where(#WebFormPanel, body) [id*="ProgressIndicator"] .progress.list-group.left .list-group-item:last-child::after{
  display:none !important;
}

/* dot */
:where(#WebFormPanel, body) [id$="_ProgressIndicator"] .progress.list-group.left .list-group-item::before,
:where(#WebFormPanel, body) [id*="ProgressIndicator"] .progress.list-group.left .list-group-item::before{
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 2px solid rgba(1,30,65,.25) !important;
  flex: 0 0 14px !important;
}

/* active row */
:where(#WebFormPanel, body) [id$="_ProgressIndicator"] .progress.list-group.left .list-group-item.active,
:where(#WebFormPanel, body) [id*="ProgressIndicator"] .progress.list-group.left .list-group-item.active{
  background: #fff !important;
  color: var(--msa-blue) !important;
  box-shadow: 0 10px 22px rgba(1,30,65,.10) !important;
}

:where(#WebFormPanel, body) [id$="_ProgressIndicator"] .progress.list-group.left .list-group-item.active::before,
:where(#WebFormPanel, body) [id*="ProgressIndicator"] .progress.list-group.left .list-group-item.active::before{
  background: var(--msa-orange) !important;
  border-color: var(--msa-orange) !important;
}


/* =========================================================
   MSA – Modern Data Grid (Entity List / Entity Grid / Subgrid)
   Scope: global; applies across the site
   ========================================================= */

/* Card wrapper */
.entitylist,
.entitylist.entity-grid,
.entity-grid{
  background:#fff !important;
  border: var(--border-soft) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden !important;
}

/* Inner grid area */
.entity-grid .view-grid,
.entitylist .view-grid{
  padding: 10px 12px 14px !important;
}

/* Table base */
.entity-grid .view-grid table,
.entitylist .view-grid table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 14px !important;
  color: var(--msa-text) !important;
}

/* ===== Grid header: White + Orange accent underline ===== */
.entity-grid .view-grid thead th,
.entitylist .view-grid thead th{
  background: #fff !important;
  color: var(--msa-blue) !important;
  font-weight: 950 !important;
  padding: 14px 14px !important;
  border-bottom: 3px solid var(--msa-orange) !important;  /* Pantone 164C */
}

/* Sort links */
.entity-grid .view-grid thead th a,
.entitylist .view-grid thead th a{
  color: var(--msa-blue) !important;
  font-weight: 950 !important;
  text-decoration: none !important;
}

.entity-grid .view-grid thead th a:hover,
.entitylist .view-grid thead th a:hover{
  color: var(--msa-orange) !important;
}

/* Header links (sortable columns) */
.entity-grid .view-grid thead th a,
.entitylist .view-grid thead th a{
  color: var(--msa-blue) !important;
  text-decoration: none !important;
}
.entity-grid .view-grid thead th a:hover,
.entitylist .view-grid thead th a:hover{
  color: var(--msa-sky) !important;
}

/* Body cells */
.entity-grid .view-grid tbody td,
.entitylist .view-grid tbody td{
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(1,30,65,.08) !important;
  vertical-align: middle !important;
}

/* Zebra rows (subtle) */
.entity-grid .view-grid tbody tr:nth-child(even),
.entitylist .view-grid tbody tr:nth-child(even){
  background: rgba(1,30,65,.015) !important;
}

/* Hover = modern highlight */
.entity-grid .view-grid tbody tr:hover,
.entitylist .view-grid tbody tr:hover{
  background: rgba(70,164,228,.10) !important;
}

/* Primary column links */
.entity-grid .view-grid tbody td a,
.entitylist .view-grid tbody td a{
  color: var(--msa-blue) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.entity-grid .view-grid tbody td a:hover,
.entitylist .view-grid tbody td a:hover{
  color: var(--msa-sky) !important;
  text-decoration: underline !important;
}

/* ===== Pagination ===== */
.entity-grid .pagination,
.entitylist .pagination{
  margin: 12px 0 0 !important;
}

.entity-grid .pagination > li > a,
.entity-grid .pagination > li > span,
.entitylist .pagination > li > a,
.entitylist .pagination > li > span{
  border: 1px solid rgba(1,30,65,.16) !important;
  border-radius: 10px !important;
  margin-right: 6px !important;
  color: var(--msa-blue) !important;
  background: #fff !important;
  font-weight: 800 !important;
}

.entity-grid .pagination > li.active > a,
.entity-grid .pagination > li.active > span,
.entitylist .pagination > li.active > a,
.entitylist .pagination > li.active > span{
  background: var(--msa-blue) !important;
  border-color: var(--msa-blue) !important;
  color: #fff !important;
}

.entity-grid .pagination > li > a:hover,
.entitylist .pagination > li > a:hover{
  background: rgba(1,30,65,.04) !important;
  border-color: rgba(70,164,228,.35) !important;
}

/* ===== Search bar + view selector (navbar inside entity list template) ===== */
.entitylist .navbar,
.entity-grid .navbar{
  border: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.entitylist .navbar-form .form-control,
.entity-grid .navbar-form .form-control{
  border-radius: 12px !important;
  border: 1px solid rgba(1,30,65,.18) !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}

.entitylist .navbar-form .form-control:focus,
.entity-grid .navbar-form .form-control:focus{
  border-color: var(--msa-sky) !important;
  box-shadow: 0 0 0 4px rgba(70,164,228,.20) !important;
}

/* Search button */
.entitylist .navbar-form .btn,
.entity-grid .navbar-form .btn{
  border-radius: 12px !important;
  font-weight: 850 !important;
}

/* ===== Action buttons inside grids ===== */
.entity-grid .btn,
.entitylist .btn{
  border-radius: 12px !important;
  font-weight: 850 !important;
}

/* Optional: make “Create/New” feel primary */
.entity-grid .btn-primary,
.entitylist .btn-primary{
  background: var(--msa-blue) !important;
  border-color: var(--msa-blue) !important;
}
.entity-grid .btn-primary:hover,
.entitylist .btn-primary:hover{
  filter: brightness(.96);
}


/* Sticky header (optional) */
.entity-grid .view-grid,
.entitylist .view-grid{
  overflow: auto !important;
  max-height: 600px; /* adjust */
}

.entity-grid .view-grid th,
.entitylist .view-grid th{
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(1,30,65,.04) !important;
}


/* =========================================================
   MSA – Lookup Modal (Global)
   Targets lookup popup opened from lookup fields in forms
   ========================================================= */

/* 1) Modal container sizing + subtle “premium” feel */
:where(#WebFormPanel, body) [id$="_lookupmodal"] .modal-dialog{
  width: min(980px, 92vw) !important;
  margin: 6vh auto !important;
}

/* 2) Modal shell */
:where(#WebFormPanel, body) [id$="_lookupmodal"] .modal-content{
  border: 1px solid rgba(1,30,65,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(1,30,65,.22) !important;
  overflow: hidden !important;
}

/* 3) Header – Motorsport navy with orange accent */
:where(#WebFormPanel, body) [id$="_lookupmodal"] .modal-header{
  background: var(--msa-blue) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  padding: 14px 16px !important;
  position: relative !important;
}
:where(#WebFormPanel, body) [id$="_lookupmodal"] .modal-header::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:3px !important;
  background: var(--msa-orange) !important;
}

/* Title */
:where(#WebFormPanel, body) [id$="_lookupmodal"] .modal-title{
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  color: #fff !important;
}

/* Close (x) */
:where(#WebFormPanel, body) [id$="_lookupmodal"] .close{
  color:#fff !important;
  opacity: .9 !important;
  text-shadow: none !important;
}
:where(#WebFormPanel, body) [id$="_lookupmodal"] .close:hover{
  opacity: 1 !important;
}

/* 4) Body */
:where(#WebFormPanel, body) [id$="_lookupmodal"] .modal-body{
  padding: 14px 16px 10px !important;
  background: #fff !important;
  color: var(--msa-text) !important;
}

/* 5) Search box inside lookup (if present) */
:where(#WebFormPanel, body) [id$="_lookupmodal"] input[type="text"],
:where(#WebFormPanel, body) [id$="_lookupmodal"] .form-control{
  border: 1px solid rgba(1,30,65,.18) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}
:where(#WebFormPanel, body) [id$="_lookupmodal"] input:focus,
:where(#WebFormPanel, body) [id$="_lookupmodal"] .form-control:focus{
  border-color: var(--msa-sky) !important;
  box-shadow: 0 0 0 4px rgba(70,164,228,.20) !important;
  outline: none !important;
}

/* 6) Lookup results grid/table */
:where(#WebFormPanel, body) [id$="_lookupmodal"] table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Header row in lookup table */
:where(#WebFormPanel, body) [id$="_lookupmodal"] thead th{
  background: rgba(1,30,65,.04) !important;
  color: var(--msa-blue) !important;
  font-weight: 950 !important;
  padding: 12px 12px !important;
  border-bottom: 1px solid rgba(1,30,65,.12) !important;
}

/* Rows */
:where(#WebFormPanel, body) [id$="_lookupmodal"] tbody td{
  padding: 12px 12px !important;
  border-bottom: 1px solid rgba(1,30,65,.08) !important;
}
:where(#WebFormPanel, body) [id$="_lookupmodal"] tbody tr:nth-child(even){
  background: rgba(1,30,65,.015) !important;
}
:where(#WebFormPanel, body) [id$="_lookupmodal"] tbody tr:hover{
  background: rgba(70,164,228,.10) !important;
}

/* 7) Footer buttons */
:where(#WebFormPanel, body) [id$="_lookupmodal"] .modal-footer{
  padding: 12px 16px !important;
  border-top: 1px solid rgba(1,30,65,.10) !important;
  background: rgba(1,30,65,.02) !important;
}

/* Primary “Select” button */
:where(#WebFormPanel, body) [id$="_lookupmodal"] .modal-footer .btn-primary{
  background: var(--msa-blue) !important;
  border-color: var(--msa-blue) !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  padding: 10px 14px !important;
}
:where(#WebFormPanel, body) [id$="_lookupmodal"] .modal-footer .btn-primary:hover{
  filter: brightness(.96) !important;
}

/* Secondary button */
:where(#WebFormPanel, body) [id$="_lookupmodal"] .modal-footer .btn{
  border-radius: 12px !important;
  font-weight: 850 !important;
}



/* =========================================================
   MSA – List Page Header / Toolbar Modernisation (Classic Lists)
   Targets .entitylist toolbar + search + actions
   ========================================================= */

/* Make the header/toolbar area feel like a product header */
.entitylist .navbar.navbar-default,
.entitylist.entity-grid .navbar.navbar-default{
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(1,30,65,.10) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
}

/* Title (if rendered as navbar-brand) */
.entitylist .navbar .navbar-brand{
  color: var(--msa-blue) !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
  font-size: 16px !important;
}

/* Right side actions group */
.entitylist .navbar .navbar-right,
.entitylist.entity-grid .navbar .navbar-right{
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

/* Make action buttons modern */
.entitylist .navbar .btn,
.entitylist.entity-grid .navbar .btn{
  border-radius: 12px !important;
  font-weight: 900 !important;
  padding: 10px 14px !important;
}

/* Primary action = Motorsport navy */
.entitylist .navbar .btn-primary,
.entitylist.entity-grid .navbar .btn-primary{
  background: var(--msa-blue) !important;
  border-color: var(--msa-blue) !important;
  color: #fff !important;
}
.entitylist .navbar .btn-primary:hover{
  filter: brightness(.96);
}

/* Secondary action */
.entitylist .navbar .btn-default,
.entitylist.entity-grid .navbar .btn-default{
  background: #fff !important;
  border: 1px solid rgba(1,30,65,.22) !important;
  color: var(--msa-blue) !important;
}
.entitylist .navbar .btn-default:hover{
  background: rgba(1,30,65,.04) !important;
  border-color: rgba(70,164,228,.35) !important;
}


/* =========================================================
   MSA – List Search Bar
   ========================================================= */

.entitylist .navbar-form{
  margin: 0 !important;
  padding: 0 !important;
}

.entitylist .navbar-form .input-group{
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.entitylist .navbar-form input[type="text"],
.entitylist .navbar-form .form-control{
  border: 1px solid rgba(1,30,65,.18) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  min-width: 260px;
  box-shadow: none !important;
}

.entitylist .navbar-form .form-control:focus{
  border-color: var(--msa-sky) !important;
  box-shadow: 0 0 0 4px rgba(70,164,228,.20) !important;
  outline: none !important;
}

.entitylist .navbar-form button.btn{
  border-radius: 12px !important;
  font-weight: 900 !important;
  padding: 10px 12px !important;
}

/* =========================================================
   MSA – Entity List Filters (Classic)
   ========================================================= */

/* Filter container (usually appears above the grid) */
.entitylist .entitylist-filter,
.entitylist .entitylist-filters,
.entitylist .filters{
  background: rgba(1,30,65,.03) !important;
  border: 1px solid rgba(1,30,65,.10) !important;
  border-radius: 14px !important;
  padding: 12px 12px !important;
  margin: 12px 12px 0 !important;
}

/* Make each filter item align nicely */
.entitylist .entitylist-filter li,
.entitylist .entitylist-filters li{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  align-items: center !important;
  margin: 8px 0 !important;
}

/* Labels */
.entitylist .entitylist-filter label,
.entitylist .entitylist-filters label{
  font-weight: 900 !important;
  color: var(--msa-blue) !important;
  margin: 0 !important;
}

/* Inputs/Dropdowns */
.entitylist .entitylist-filter select,
.entitylist .entitylist-filter input,
.entitylist .entitylist-filters select,
.entitylist .entitylist-filters input{
  border: 1px solid rgba(1,30,65,.18) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Focus ring */
.entitylist .entitylist-filter select:focus,
.entitylist .entitylist-filter input:focus{
  border-color: var(--msa-sky) !important;
  box-shadow: 0 0 0 4px rgba(70,164,228,.20) !important;
  outline: none !important;
}

/* Filter buttons (Apply/Clear etc.) */
.entitylist .entitylist-filter .btn,
.entitylist .entitylist-filters .btn{
  border-radius: 12px !important;
  font-weight: 900 !important;
}


/* =========================================================
   Motorsport Australia – Login & Registration (Authenticated)
   ========================================================= */

/* Page background */
body.signin-page,
body.register-page{
  background: linear-gradient(
    180deg,
    rgba(1,30,65,.06),
    rgba(1,30,65,.02)
  );
}

/* Center the auth card */
#content-container .page-content,
.account-signin,
.account-register{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 120px);
}

/* Auth card */
.account-signin form,
.account-register form{
  background: #fff;
  padding: 36px 32px;
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 25px 55px rgba(1,30,65,.18);
  border: 1px solid rgba(1,30,65,.12);
}

/* Headings */
.account-signin h1,
.account-register h1{
  color: var(--msa-blue);
  font-weight: 950;
  text-align: center;
  margin-bottom: 10px;
}

/* Page copy text */
.account-signin p,
.account-register p{
  text-align: center;
  color: rgba(1,30,65,.8);
  margin-bottom: 28px;
}

/* Inputs */
.account-signin input,
.account-register input{
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(1,30,65,.2);
}

/* Focus state */
.account-signin input:focus,
.account-register input:focus{
  border-color: var(--msa-sky);
  box-shadow: 0 0 0 4px rgba(70,164,228,.25);
  outline: none;
}

/* Primary button */
.account-signin button[type="submit"],
.account-register button[type="submit"]{
  width: 100%;
  background: var(--msa-blue);
  border-color: var(--msa-blue);
  color: #fff;
  font-weight: 900;
  padding: 12px;
  border-radius: 14px;
}

/* Secondary links */
.account-signin a,
.account-register a{
  color: var(--msa-blue);
  font-weight: 700;
}
.account-signin a:hover,
.account-register a:hover{
  color: var(--msa-orange);
}


/* Registration steps */
.msa-register-page .msa-steps{
  display:flex;
  gap:12px;
  justify-content:center;
  margin:24px 0 32px;
}

.msa-register-page .msa-step{
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  background:rgba(1,30,65,.06);
  color:rgba(1,30,65,.65);
}

.msa-register-page .msa-step.active{
  background:var(--msa-blue);
  color:#fff;
}


/* OTP / Verification */
.msa-verify-page .account-setpassword form{
  background:#fff;
  padding:36px;
  border-radius:18px;
  max-width:460px;
  margin:auto;
  box-shadow:0 25px 55px rgba(1,30,65,.18);
}

.msa-verify-page .account-setpassword input{
  text-align:center;
  letter-spacing:normal;}  

  /* New to Motorsport panel */
.msa-help-card{
  background:rgba(70,164,228,.08);
  border:1px solid rgba(70,164,228,.25);
  border-radius:16px;
  padding:20px 22px;
  margin-bottom:28px;
}

.msa-help-card h3{
  margin-top:0;
  font-weight:900;
  color:var(--msa-blue);
}

.msa-help-card ul{
  padding-left:18px;
}

.msa-help-note{
  font-size:13px;
  opacity:.85;
}

/* =========================================================
   Motorsport Australia – Quick Create / Insert Form
   ========================================================= */

/* Modal backdrop */
.modal-backdrop{
  background-color: rgba(1,30,65,.55) !important;
}

/* Modal container */
.modal-dialog{
  margin-top: 8vh !important;
}

/* Modal content = modern card */
.modal-content{
  border-radius: 20px !important;
  border: 1px solid rgba(1,30,65,.12) !important;
  box-shadow: 0 35px 80px rgba(1,30,65,.35) !important;
  overflow: hidden;
}

/* Modal header */
.modal-header{
  background: var(--msa-blue) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  padding: 20px 24px !important;
}

.modal-header h4,
.modal-title{
  font-weight: 950 !important;
  letter-spacing: .02em;
  color: #fff !important;
}

/* Close button */
.modal-header .close{
  color: #fff !important;
  opacity: .9 !important;
  font-size: 40px;
}
.modal-header .close:hover{
  opacity: 1;
}

/* Modal body */
.modal-body{
  padding: 28px 26px !important;
  background: #fff;
}

/* Entity / Quick Create form */
.entity-form,
.entity-form form{
  background: transparent !important;
}

/* Labels */
.entity-form label{
  font-weight: 800 !important;
  color: var(--msa-blue) !important;
  margin-bottom: 6px !important;
}

/* Inputs */
.entity-form .form-control{
  border-radius: 14px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(1,30,65,.18) !important;
  box-shadow: none !important;
}

/* Focus state */
.entity-form .form-control:focus{
  border-color: var(--msa-sky) !important;
  box-shadow: 0 0 0 4px rgba(70,164,228,.25) !important;
  outline: none !important;
}

/* Spacing between fields */
.entity-form .form-group{
  margin-bottom: 20px !important;
}

/* Required asterisk */
.entity-form .required{
  color: var(--msa-orange) !important;
  font-weight: 900;
}

/* Validation summary */
.validation-summary-errors{
  background: #fff0f2 !important;
  border: 1px solid rgba(176,0,32,.25) !important;
  color: #7f1d1d !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  margin-bottom: 20px !important;
}

/* Modal footer */
.modal-footer{
  padding: 18px 24px !important;
  border-top: 1px solid rgba(1,30,65,.1) !important;
  background: #f7f9fc;
}

/* Primary button */
.modal-footer .btn-primary{
  background: var(--msa-blue) !important;
  border-color: var(--msa-blue) !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  padding: 10px 18px !important;
}

/* Secondary / cancel */
.modal-footer .btn-default{
  background: #fff !important;
  border: 1px solid rgba(1,30,65,.25) !important;
  color: var(--msa-blue) !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
}

/* Hover states */
.modal-footer .btn:hover{
  filter: brightness(.96);
}

.modal-header .close span{
  color: #ffffff !important;
}

.modal-header .close{
  font-size: 28px !important;
  font-weight: 300 !important;
}

/* =========================================================
   Motorsport Australia – AUTH PAGES (FINAL)
   ========================================================= */

/* Shared auth background */
.msa-signin-page,
.msa-register-page,
.msa-verify-page{
  background: linear-gradient(
    180deg,
    rgba(1,30,65,.06),
    rgba(1,30,65,.02)
  );
}

/* Center card */
.msa-signin-page #content-container,
.msa-register-page #content-container,
.msa-verify-page #content-container{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:calc(100vh - 120px);
}

/* Card */
.msa-signin-page form,
.msa-register-page form,
.msa-verify-page form{
  background:#fff;
  padding:36px 32px;
  max-width:460px;
  width:100%;
  border-radius:20px;
  border:1px solid rgba(1,30,65,.12);
  box-shadow:0 25px 55px rgba(1,30,65,.18);
}

/* Headings */
.msa-signin-page h1,
.msa-register-page h1,
.msa-verify-page h1{
  text-align:center;
  font-weight:950;
  color:var(--msa-blue);
}

/* Intro text */
.msa-auth-intro{
  text-align:center;
  margin-bottom:26px;
  color:rgba(1,30,65,.8);
}

/* Inputs */
.msa-signin-page input,
.msa-register-page input,
.msa-verify-page input{
  border-radius:14px;
  padding:12px 14px;
}

/* Focus */
.msa-signin-page input:focus,
.msa-register-page input:focus,
.msa-verify-page input:focus{
  border-color:var(--msa-sky);
  box-shadow:0 0 0 4px rgba(70,164,228,.25);
  outline:none;
}

/* Primary button */
.msa-signin-page button[type="submit"],
.msa-register-page button[type="submit"],
.msa-verify-page button[type="submit"]{
  width:100%;
  background:var(--msa-blue);
  border-color:var(--msa-blue);
  font-weight:900;
  border-radius:14px;
  padding:12px;
}

/* Force list table to use full width */
.entitylist .table {
    width: 100%;
    table-layout: fixed;
}

/* Prevent unused action column space */
.entitylist .table th:last-child,
.entitylist .table td:last-child {
    width: auto;
}

/* ===============================
   OPTION 3 – Input First
   =============================== */

/* Input */
input[type="date"],
.bootstrap-datetimepicker-widget + input{
  font-weight:700;
  letter-spacing:.04em;
}

/* Calendar very subtle */
.datepicker{
  opacity:.98;
  transform:scale(.98);
  box-shadow:0 10px 20px rgba(1,30,65,.12) !important;
}


/*Adding more */

.list-group-item.completed::before{
 content:"✓";
 background:var(--msa-orange);
 border:none;
 color:#fff;
}
.list-group-item.completed{
 opacity:.55;
}

.form-group{
 position:relative;
}
.form-group label{
 position:absolute;
 top:12px;
 left:14px;
 transition:.2s;
 background:#fff;
 padding:0 6px;
}
.form-control:focus + label,
.form-control:not(:placeholder-shown)+label{
 top:-8px;
 font-size:12px;
}

.entity-grid tbody:empty::after{
 content:"No records found";
 display:block;
 padding:40px;
 text-align:center;
}

.entity-form,
.entitylist,
.modal-content{
 transition:all .25s ease;
}

input[value="Previous"]{
 background:#fff !important;
 border:1px solid rgba(1,30,65,.22) !important;
 color:var(--msa-blue) !important;
}

input[value="Next"],
input[value="Submit"]{
 background:var(--msa-blue) !important;
 color:#fff !important;
}


.entity-form{
 animation:fadeIn .25s ease;
}

@keyframes fadeIn{
 from{
  opacity:0;
  transform:translateY(6px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}

.field-validation-error{
 display:block;
 margin-top:6px;
 font-size:13px;
}

.entitylist,
.modal-content{
 transition:.25s ease;
}

.entitylist:hover{
 transform:translateY(-2px);
 box-shadow:0 12px 28px rgba(1,30,65,.14);
}

.modal-header .close,
.modal-header button.close,
.modal-header .close span,
.modal-header button.close span{
 color:#ffffff !important;
 opacity:1 !important;
 text-shadow:none !important;
}

.modal-header .close:hover,
.modal-header button.close:hover{
 color:#ffffff !important;
 opacity:.85 !important;
}

.modal-header .close{
 font-size:28px !important;
 font-weight:300 !important;
 background:transparent !important;
 margin-top:-6px;
}

[id$="_lookupmodal"] .modal-header
[id$="_lookupmodal"] .modal-header .close,
[id$="_lookupmodal"] .modal-header .close span{
 color:#ffffff !important;
 opacity:1 !important;
}

.modal-header .close{
 width:40px;
 height:40px;
 display:flex;
 align-items:center;
 justify-content:center;
}

.modal-header .close:hover{
 background:rgba(255,255,255,.15);
 border-radius:8px;
}

input[type="date"]{
 appearance:none;
 -webkit-appearance:none;
 border:1px solid rgba(1,30,65,.18);
 border-radius:12px;
 padding:12px 14px;
 background:#fff;
}

input[type="date"]::-webkit-calendar-picker-indicator{
 opacity:0;
 position:absolute;
 right:0;
 width:100%;
 height:100%;
 cursor:pointer;
}

.msa-date{
 position:relative;
}

.msa-date::after{
 content:"📅";
 position:absolute;
 right:14px;
 top:50%;
 transform:translateY(-50%);
 pointer-events:none;
 font-size:16px;
 opacity:.65;
}

input[type="date"]{
 border:1px solid rgba(1,30,65,.18);
 border-radius:12px;
 padding:12px 14px;
 transition:.2s ease;
 background:#fff;
}

input[type="date"]:hover{
 border-color:var(--msa-sky);
}

input[type="date"]:focus{
 border-color:var(--msa-sky);
 box-shadow:0 0 0 4px rgba(70,164,228,.22);
}

/* Render Yes / No radio inline */
#WebFormPanel .control[data-attribute="itk_safetycagerequired"] .radio {
    display:flex !important;
    gap:24px !important;
    align-items:center !important;
}

#WebFormPanel .control[data-attribute="itk_safetycagerequired"] .radio label{
    margin:0 !important;
    font-weight:600 !important;
}