:root {
  --bg-color: rgb(239, 249, 254);
  --form-padding: 32px;
  --form-radius: 30px;
}

h1 {
  font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
}

.crmEntityFormView {
  background-color: var(--bg-color) !important;
  padding: calc(var(--form-padding) / 2) var(--form-padding) var(--form-padding) var(--form-padding) !important;
  border-bottom-left-radius: var(--form-radius) !important;
  border-bottom-right-radius: var(--form-radius) !important;
  border: 0px !important;
}

.crmEntityFormView .section-title {
  padding-left: 1% !important;
}

.crmEntityFormView label {
  background-color: var(--bg-color) !important;
  font-weight: normal;
}

.crmEntityFormView input[type=radio] {
  vertical-align: middle !important;
}

/* Form submit container */
.crmEntityFormView .actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Checkbox & label container*/
.checkbox-cell {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}

.instructions {
  background-color: var(--bg-color);
  border-top-left-radius: var(--form-radius);
  border-top-right-radius: var(--form-radius);
  padding-left: calc(var(--form-padding) * 1.5);
  padding-right: calc(var(--form-padding) * 1.5);
  padding-top: 32px;
}

fieldset:not([aria-label="OptionalPerpetratorInfo"])::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: gray;
  margin-bottom: 10px; /* spacing between line and fieldset content */
}

fieldset[aria-label="OptionalPerpetratorInfo"] {
  border: none; /* remove default */
  outline: 1px dashed gray;
  outline-offset: -10px; /* pulls the outline inside */
  padding: 1rem; /* add space between content and the outline */
}

.form-control {
  border-radius: 0px !important;
  border: 1px solid #949494 !important;
}

.captcha-cell img {
  width: 360px !important;
  height: auto !important;
}

div[id$="EntityFormView_captcha_ctl01"] {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

div[id$="EntityFormView_captcha_SpamProtectorPanel"] {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}


input[id$="EntityFormView_captcha_CaptchaTextBox"] {
  display: block;
  /* Make it block-level */
  margin: 0 auto;
  /* Center horizontally */
  text-align: center;
  /* Optional: center text inside */
}


/* Base: mobile layout */
#fluent-listbox3 {
  display: flex !important;
  flex-direction: column !important; /* stack vertically */
  flex-wrap: nowrap !important;       /* no wrapping */
  overflow: visible !important;       /* prevent scrollbar */
  max-height: none !important;        /* remove height limit */
}

/* Each option */
#fluent-listbox3 > div[id^="fluent-option"] {
  display: flex;          /* align checkbox + text */
  align-items: center;    /* vertical center */
  min-height: 24px;       /* prevent collapse */
}

/* Checkbox span */
#fluent-listbox3 > div[id^="fluent-option"] > span.fui-Option__checkIcon {
  flex: none;             /* don’t stretch */
  width: 16px;            /* reserve space for checkbox */
  height: 16px;
  display: inline-flex;   /* keep SVG centered inside */
  margin-right: 8px;      /* spacing to text */
}

/* Desktop / tablet: side-by-side options */
@media (min-width: 601px) {
  #fluent-listbox3 {
    flex-direction: row !important;  /* horizontal layout */
    flex-wrap: wrap !important;      /* allow wrapping */
    overflow: visible !important;    /* ensure no scrollbar */
  }

  #fluent-listbox3 > div[id^="fluent-option"] {
    flex: 0 0 50%;                  /* two per row */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 24px;
    padding-right: 8px;             /* spacing between items */
  }
}

.form-control.field-error {
  border: 1.5px solid red !important;
}